TalkJS Examples

https://github.com/talkjs/talkjs-examples
Admin
TalkJS (https://talkjs.com) examples
Tokens:9,835
Snippets:89
Trust Score:7.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installing Dependencies React Native

Source: https://github.com/talkjs/talkjs-examples/blob/master/react-native/basic-example/ReactNativeNavigationExample/README.md

Install the project's JavaScript dependencies using Yarn. This command reads the package.json file and fetches all required packages from the npm registry.

```Shell
yarn
```

--------------------------------

### Starting React Native App with Yarn (Shell)

Source: https://github.com/talkjs/talkjs-examples/blob/master/react-native/basic-example/ReactNavigationExample/README.md

Executes the `yarn start` command from the project's root directory to launch the React Native development server (Metro). This server is responsible for bundling the JavaScript code and serving it to a connected device or emulator, allowing the application to be run and tested during the development phase.

```sh
yarn start
```

--------------------------------

### Running the Application React Native

Source: https://github.com/talkjs/talkjs-examples/blob/master/react-native/basic-example/ReactNativeNavigationExample/README.md

Start the React Native development server and launch the application on a connected physical device or emulator/simulator. The command will typically prompt you to choose the target platform (Android or iOS).

```Shell
yarn start
```

--------------------------------

### Installing JS Dependencies with Yarn (Shell)

Source: https://github.com/talkjs/talkjs-examples/blob/master/react-native/basic-example/ReactNavigationExample/README.md

Executes the `yarn` command in the project's root directory to install all JavaScript dependencies specified in the `package.json` file. This is a fundamental step to prepare the project environment before building or running the app.

```sh
yarn
```

--------------------------------

### Installing Dependencies with npm (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-make-a-threaded-chat/README.md

This command installs the required Node.js package dependencies for the TalkJS example project, reading from the package.json file. It is required before running the application.

```bash
npm install
```

--------------------------------

### Starting the Server with npm (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-make-a-threaded-chat/README.md

This command executes the start script defined in the project's package.json file, which typically launches the Node.js server for the TalkJS example application.

```bash
npm start
```

--------------------------------

### Starting the Node.js Application (Shell)

Source: https://github.com/talkjs/talkjs-examples/blob/master/webhooks/nodejs/express-webhook/README.md

Command to start the Node.js webhooks application. This typically uses the `start` script defined in the project's `package.json` file, which launches the Express server.

```Shell
npm start
```

--------------------------------

### Installing iOS Dependencies CocoaPods

Source: https://github.com/talkjs/talkjs-examples/blob/master/react-native/basic-example/ReactNativeNavigationExample/README.md

Install iOS-specific dependencies managed by CocoaPods. This step is necessary if you plan to build and run the app on iOS. Run this command from within the 'ios' directory of the project.

```Shell
pod install
```

--------------------------------

### Cloning TalkJS Webhooks Example Repository (Shell)

Source: https://github.com/talkjs/talkjs-examples/blob/master/webhooks/nodejs/express-webhook/README.md

Instructions to clone the TalkJS examples repository and navigate to the specific Node.js webhooks directory using shell commands. This is the first step to get the project files locally.

```Shell
git clone https://github.com/talkjs/talkjs-examples.git
cd talkjs-examples/webhooks/nodejs/express-webhook
```

--------------------------------

### Installing Node.js Dependencies (Shell)

Source: https://github.com/talkjs/talkjs-examples/blob/master/webhooks/nodejs/express-webhook/README.md

Command to install the necessary Node.js packages and dependencies required for the TalkJS webhooks example project using npm. This command should be run from the project's root directory.

```Shell
npm install
```

--------------------------------

### Installing iOS Native Dependencies with CocoaPods (Shell)

Source: https://github.com/talkjs/talkjs-examples/blob/master/react-native/basic-example/ReactNavigationExample/README.md

Runs the `pod install` command specifically within the `ios` subdirectory of the project. This command uses CocoaPods to install the necessary native iOS libraries and frameworks required by the React Native application for building and running on iOS devices or simulators. This step is only required if building for iOS.

```sh
pod install
```

--------------------------------

### Installing Dependencies with Flutter

Source: https://github.com/talkjs/talkjs-examples/blob/master/flutter_sdk/basic-example/README.md

Installs all required dependencies for the Flutter project using the 'flutter pub get' command. This command should be run once after cloning the project or making changes to the pubspec.yaml file.

```bash
flutter pub get
```

--------------------------------

### Setup Python Virtual Environment and Install Django (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/django/django_talkjs/README.md

Executes commands to create a Python virtual environment named 'venv', activate it, and then install the Django framework using pip. This is a standard procedure to isolate project dependencies and prepare the development environment.

```bash
python -m venv venv
source venv/bin/activate  # On Windows, use: venv\Scripts\activate
pip install django
```

--------------------------------

### Example Environment Configuration (.env)

Source: https://github.com/talkjs/talkjs-examples/blob/master/webhooks/nodejs/express-webhook/README.md

An example of the contents of the `.env` file, used to configure the application with necessary environment variables such as the TalkJS App ID, secret key, and optional port number. The file should be created or renamed from `example.env`.

```env
APPID=abc123
SECRET=secretvalue
PORT=3000
```

--------------------------------

### Start Webhook Server - npm

Source: https://github.com/talkjs/talkjs-examples/blob/master/chatbot-integration/openai-chatgpt/README.md

Executes the default 'start' script defined in the project's package.json file using the npm package manager. This script typically initiates the Node.js webhook server that handles incoming TalkJS messages and interacts with the OpenAI API. Requires Node.js and npm to be installed and dependencies installed via `npm install`.

```npm
npm start
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/talkjs/talkjs-examples/blob/master/django/gameschat/README.md

Command to install all required Python packages listed in the `requirements.txt` file using pip. This is necessary after cloning the repository.

```Shell
pip install -r requirements.txt
```

--------------------------------

### Installing Dependencies - Bash

Source: https://github.com/talkjs/talkjs-examples/blob/master/php/laravel-integration/README.md

Installs the required PHP dependencies using Composer and JavaScript dependencies using npm. This command is essential for setting up the project environment after cloning or downloading.

```bash
composer install
npm install
```

--------------------------------

### Starting Python Simple HTTP Server

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-add-a-create_new_chat-button-in-talkjs/Readme.md

This shell command uses Python's built-in `http.server` module to start a simple HTTP server. This server hosts files from the current directory, which is useful for serving static files like HTML and JavaScript for local development and testing of the example project without needing a full-fledged web server.

```shell
python -m http.server
```

--------------------------------

### Installing Project Dependencies with npm

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

This command installs all necessary project dependencies listed in the package.json file. It must be run after cloning or downloading the project to set up the development environment.

```Shell
npm install
```

--------------------------------

### Running Flutter Application

Source: https://github.com/talkjs/talkjs-examples/blob/master/flutter_sdk/basic-example/README.md

Runs the Flutter application on a connected Android/iOS device or emulator using the 'flutter run' command. This command starts the application after dependencies are installed and the TalkJS App ID is configured in lib/main.dart.

```bash
flutter run
```

--------------------------------

### Installing Project Dependencies with Bundle (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/ruby/rails-talkjs/README.md

Uses Bundler to install all required gems listed in the project's Gemfile. This ensures all necessary libraries for the Rails application are available.

```Bash
bundle install
```

--------------------------------

### Run Django Development Server

Source: https://github.com/talkjs/talkjs-examples/blob/master/django/gameschat/README.md

Command to start the Django development server. The application will be accessible locally, typically at http://localhost:8000.

```Shell
python manage.py runserver
```

--------------------------------

### Serving Laravel Application - Bash

Source: https://github.com/talkjs/talkjs-examples/blob/master/php/laravel-integration/README.md

Starts the Laravel development server, making the application accessible locally. By default, it runs on http://127.0.0.1:8000, allowing you to view and test the application.

```bash
php artisan serve
```

--------------------------------

### Installing Rails Gem (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/ruby/rails-talkjs/README.md

Installs the Ruby on Rails framework gem using the default gem manager, which is required to run the application. This command fetches the latest version of the Rails gem and its dependencies.

```Bash
gem install rails
```

--------------------------------

### Exposing Local Server with ngrok (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-make-a-threaded-chat/README.md

This command starts ngrok, creating a public URL that tunnels traffic to the local web server running on port 3000. This is used to make the local webhook endpoint accessible from the internet for TalkJS.

```bash
ngrok http 3000
```

--------------------------------

### Starting Rails Development Server (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/ruby/rails-talkjs/README.md

Launches the built-in Puma web server (or other configured server) for the Rails application in development mode. The application becomes accessible via a local address, typically http://127.0.0.1:3000.

```Bash
rails server
```

--------------------------------

### Starting Angular Development Server with ng serve

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

This command compiles the Angular application and starts a local development server. It automatically watches for file changes and reloads the application in the browser, typically at http://localhost:4200/.

```Shell
ng serve
```

--------------------------------

### Getting Angular CLI Help with ng help

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

This command displays help information for the Angular CLI, providing an overview and command reference directly in the terminal.

```Shell
ng help
```

--------------------------------

### Install Dependencies - npm

Source: https://github.com/talkjs/talkjs-examples/blob/master/chatbot-integration/openai-chatgpt/README.md

Runs the npm package manager to install project dependencies listed in the package.json file. This command is necessary to download required libraries and modules before running the server. Requires Node.js and npm to be installed.

```npm
npm install
```

--------------------------------

### Creating Example User 1 via curl

Source: https://github.com/talkjs/talkjs-examples/blob/master/flask/README.md

This curl command sends a POST request to the Flask backend's /createUser endpoint. It sends a JSON payload containing the details for the first example user (Tom Hardy) to be added to the application's user database. The Flask server must be running on localhost:8080.

```sh
curl -X POST -H "Content-Type: application/json" -d '{
   "id": 1,
   "name": "Tom Hardy",
   "dp": "https://randomuser.me/api/portraits/men/1.jpg",
   "email": "tom.hardy@operator.com",
   "role": "AGENT"
}' http://localhost:8080/createUser/
```

--------------------------------

### Creating Laravel Project - Bash

Source: https://github.com/talkjs/talkjs-examples/blob/master/php/laravel-integration/README.md

Uses Composer to create a new Laravel project with preferred distribution settings. The command then changes the current directory into the newly created project folder.

```bash
composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name
```

--------------------------------

### Create Second Example User via REST Endpoint - sh

Source: https://github.com/talkjs/talkjs-examples/blob/master/java/spring-boot/README.md

Similar to the first, this `curl` command sends a POST request to the `/createUser` endpoint with a JSON payload. This specific command creates the 'John Morrison' user, demonstrating how to add multiple users to the system required for chat interactions in the example.

```sh
curl -X POST http://localhost:8080/createUser \
    -H "Content-Type: application/json" \
    -d '{
          "name": "John Morrison",
          "dp": "https://randomuser.me/api/portraits/men/62.jpg",
          "email": "john.morrison@operator.com",
          "role": "USER"
        }'
```

--------------------------------

### Creating Example User 2 via curl

Source: https://github.com/talkjs/talkjs-examples/blob/master/flask/README.md

This curl command sends a POST request to the Flask backend's /createUser endpoint. It sends a JSON payload containing the details for the second example user (John Morrison) to be added to the application's user database. The Flask server must be running on localhost:8080.

```sh
curl -X POST -H "Content-Type: application/json" -d '{
   "id": 2,
   "name": "John Morrison",
   "dp": "https://randomuser.me/api/portraits/men/62.jpg",
   "email": "john.morrison@operator.com",
   "role": "USER"
}' http://localhost:8080/createUser/
```

--------------------------------

### Building Angular Project for Deployment with ng build

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

This command compiles the Angular application into output files that are ready for deployment. The build artifacts are typically placed in the 'dist/' directory.

```Shell
ng build
```

--------------------------------

### Include JavaScript Files for TalkJS Visitor Chat HTML

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-let-visitors-join-a-chat/README.md

This HTML snippet shows how to include the essential JavaScript files (`create-visitor-panel.js` and `example-chat.js`) required to run the TalkJS visitor chat functionality and the associated HTML panel within a webpage.

```html
<script src="./create-visitor-panel.js"> </script>
<script src="./example-chat.js"> </script>
```

--------------------------------

### Seeding Rails Database with Test Data (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/ruby/rails-talkjs/README.md

Runs the database seed file (`db/seeds.rb`) to populate the database with initial or test data. In this specific example, it's used to add test user data required for the chat application.

```Bash
rails db:seed
```

--------------------------------

### Apply Django Database Migrations

Source: https://github.com/talkjs/talkjs-examples/blob/master/django/gameschat/README.md

Command to apply database schema changes defined in the Django application's migration files. This sets up the necessary tables in the configured PostgreSQL database.

```Shell
python manage.py migrate
```

--------------------------------

### Create Example User via REST Endpoint - sh

Source: https://github.com/talkjs/talkjs-examples/blob/master/java/spring-boot/README.md

This shell command uses `curl` to send a POST request to the backend's `/createUser` endpoint. It includes the `Content-Type` header set to `application/json` and provides user data in the request body as a JSON object. This creates the 'Tom Hardy' user in the application's database.

```sh
curl -X POST http://localhost:8080/createUser \
    -H "Content-Type: application/json" \
    -d '{
          "name": "Tom Hardy",
          "dp": "https://randomuser.me/api/portraits/men/1.jpg",
          "email": "tom.hardy@operator.com",
          "role": "AGENT"
        }'
```

--------------------------------

### Start ngrok HTTP Tunnel - Shell

Source: https://github.com/talkjs/talkjs-examples/blob/master/chatbot-integration/openai-chatgpt/README.md

Executes the ngrok command to create a public HTTP tunnel forwarding requests to the local port 3000. This allows the TalkJS webhook server running locally to receive webhook requests from the internet. Requires ngrok to be installed and configured.

```Shell
ngrok http 3000
```

--------------------------------

### Running Database Migrations - Bash

Source: https://github.com/talkjs/talkjs-examples/blob/master/php/laravel-integration/README.md

Executes pending database migrations defined in the Laravel application. This command sets up necessary database tables required for the application's functionality, often including user authentication tables.

```bash
php artisan migrate
```

--------------------------------

### Compiling Frontend Assets - Bash

Source: https://github.com/talkjs/talkjs-examples/blob/master/php/laravel-integration/README.md

Compiles frontend assets (like CSS and JavaScript files) using Laravel Mix. This step is necessary to process and prepare the assets for inclusion in the application's views.

```bash
npm run dev
```

--------------------------------

### Running Rails Database Migrations (Bash)

Source: https://github.com/talkjs/talkjs-examples/blob/master/ruby/rails-talkjs/README.md

Executes pending database migration scripts defined in the Rails application. This command sets up or updates the database schema according to the migration files, typically creating necessary tables for users and other models.

```Bash
rails db:migrate
```

--------------------------------

### Running End-to-End Tests with ng e2e

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

This command executes the project's end-to-end tests. Before running, a package implementing end-to-end testing capabilities must be added to the project.

```Shell
ng e2e
```

--------------------------------

### Running TalkJS Data Export Script - Bash

Source: https://github.com/talkjs/talkjs-examples/blob/master/rest-api/export-data/README.md

This bash command installs the necessary Node.js dependencies for the TalkJS export script and then executes the main script file.

```bash
npm i && node exportData.js
```

--------------------------------

### Generate Django SECRET_KEY using Python

Source: https://github.com/talkjs/talkjs-examples/blob/master/django/gameschat/README.md

Instructions on how to use the Python interactive interpreter to generate a hexadecimal string suitable for use as a Django SECRET_KEY.

```Shell
python
```

```Python
import secrets
secrets.token_hex(16)
```

--------------------------------

### Running Unit Tests with ng test

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

This command executes the project's unit tests, typically configured to run via Karma. It's used to verify that individual components and services function correctly.

```Shell
ng test
```

--------------------------------

### Full TalkJS Contact List and Chat Integration Example - CSS, HTML, Javascript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This comprehensive snippet provides the full code for integrating a TalkJS chatbox with a custom contact list. It includes CSS for styling the contact list and layout, the necessary HTML structure for the containers, and Javascript code to define contact data, dynamically render the contact list, initialize the TalkJS session and chatbox, create conversations for each contact, and add click listeners to select conversations.

```css
<style>
    #contacts-list {
        margin-top: auto;
        width: 700px;
        border: #d0d8dc solid 1px;
        border-radius: 6px;
        height: 510px;
        color: #111;
        font-family: 'Open Sans', sans-serif;
    }

    #contacts-list h2 {
        color: #111;
        background: #e7ecee;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 13.3px;
        font-weight: 700;
        margin: 0;
        padding-top: 20px;
        padding-left: 20px;
        text-align: left;
        height: 40px;
    }

    .contact-container {
        height: 50px;
        display: flex;
        margin: 5px 0;
        padding: 5px 0;
        cursor: pointer; 
    }

    .contact-container:hover {
        background-color: #e7ecee;
    }

    .contact-name {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    img {
        height: 40px;
        width: 40px;
        border-radius: 200px;
        margin-left: 20px;
        margin-right: 20px;
    }
</style>
```

```html
<div style="display: flex; justify-content: center;">
    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 30%;">
    <i>Loading chat...</i>
    </div>

    <div id="contacts-list" style="width: 400px;">
        <h2>Contacts</h2>
    </div>

</div>
```

```javascript
<script>
    const contactsList = [

        {
            id: 1,
            name: 'Lisa',
            photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
        },
        {
            id: 2,
            name: 'Alice',
            photoUrl: 'https://talkjs.com/images/avatar-2.jpg'
        },
        {
            id: 3,
            name: 'Tina',
            photoUrl: 'https://talkjs.com/images/avatar-3.jpg'
        },
        {
            id: 4,
            name: 'Lee',
            photoUrl: 'https://talkjs.com/images/avatar-4.jpg'
        },
        {
            id: 5,
            name: 'Pete',
            photoUrl: 'https://talkjs.com/images/avatar-5.jpg'
        },\n        {
            id: 6,
            name: 'Dana',
            photoUrl: 'https://talkjs.com/images/avatar-6.jpg'
        },
        {
            id: 7,
            name: 'Ro',
            photoUrl: 'https://talkjs.com/images/avatar-7.jpg'
        },
    ];
    
    // Display contacts list on page
    // Get contacts list container from the DOM
    const contactsWrapper = document.getElementById('contacts-list');
    // Loop through array and display each contact in contact-list div
    for (let contact of contactsList) {
        // Extract contact details
        const id = contact.id;
        const username = contact.name;
        const photoUrl = contact.photoUrl;

        //create img tag to hold contact pic, give it a class name (for styling purposes) and add photo to it
        const contactPhoto = document.createElement('img');
        contactPhoto.classList.add('contact-photo');
        contactPhoto.src = photoUrl;

        // Create div to hold contact Name and add name
        const usernameDiv = document.createElement('div');
        usernameDiv.classList.add('contact-name');
        usernameDiv.innerText = username;

        // Create contact parent div and add to it contactPhotoDiv and usernameDiv
        const contactContainerDiv = document.createElement('div');
        contactContainerDiv.classList.add('contact-container');

        contactContainerDiv.appendChild(contactPhoto);
        contactContainerDiv.appendChild(usernameDiv);

        contactsWrapper.appendChild(contactContainerDiv);
    };

    Talk.ready.then(function() {
    // Create user "me"
    let me = new Talk.User({
        id: '0',
        name: 'Josh',
        photoUrl: 'images/josh.webp'
    });

    // Start TalkJS Session
    window.talkSession = new Talk.Session({
        appId: 'tQWG4Gnl',
        me: me
    });

    // Create and mount the chatbox
    const chatbox = talkSession.createChatbox();
    chatbox.select(null);
    chatbox.mount(document.getElementById('talkjs-container'));

    // Create conversationBuilder objects for each user
    const conversations = contactsList.map(function(user, index) {
        const talkUser = new Talk.User(user);

        conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, talkUser));

        conversation.setParticipant(me);
        conversation.setParticipant(talkUser);

        return conversation;
    });

    // Listen for clicks on each contact and select the appropriate conversation
    let contactsListDivs = document.getElementsByClassName('contact-container');

    conversations.forEach(function(conversation, index) {
        contactsListDivs[index].addEventListener('click', () => {
        chatbox.select(conversation);
        });
    });
    });
</script>
```

--------------------------------

### Authenticating Firebase CLI - Shell

Source: https://github.com/talkjs/talkjs-examples/blob/master/firebase/notifications-example/README.md

This command logs the user into their Firebase account via the command-line interface. It is required to interact with Firebase projects and services. Requires the Firebase CLI to be installed.

```sh
firebase login
```

--------------------------------

### Generating Angular Code Scaffolding with ng generate

Source: https://github.com/talkjs/talkjs-examples/blob/master/angular/angular-chat-app/README.md

These commands use the Angular CLI to generate new code scaffolding like components, directives, pipes, services, classes, guards, interfaces, enums, or modules. This helps quickly create standard boilerplate code.

```Shell
ng generate component component-name
```

```Shell
ng generate directive|pipe|service|class|guard|interface|enum|module
```

--------------------------------

### Using TalkJS Wrapper Component in Svelte

Source: https://github.com/talkjs/talkjs-examples/blob/master/svelte/sveltekit-typescript-wrapper/README.md

This snippet shows how to use the custom `<TalkJS>` Svelte wrapper component. It requires passing the `currentUser` prop and uses a slot with `let:session` to provide the initialized TalkJS session to the child component (`<MyChatInterface>`). Components placed inside this wrapper can safely assume TalkJS is ready.

```svelte
<TalkJs currentUser={oliver} let:session>
  <MyChatInterface {session} />
</TalkJs>
```

--------------------------------

### Configuring TalkJS App ID in JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-add-a-create_new_chat-button-in-talkjs/Readme.md

This JavaScript snippet shows how to declare a constant variable `appId` to store the TalkJS application ID. This ID is crucial for initializing the TalkJS chat client and connecting to your TalkJS application. Users must replace the placeholder value with their actual TalkJS App ID obtained from the TalkJS dashboard.

```javascript
const appId = "<Add Your TalkJS APP ID Here>"
```

--------------------------------

### Initializing Firebase Hosting - Shell

Source: https://github.com/talkjs/talkjs-examples/blob/master/firebase/notifications-example/README.md

This command initializes Firebase Hosting for the current project directory. It prompts the user to select a Firebase project, configure the public directory, and set up single-page application routing. Requires the Firebase CLI.

```sh
firebase init hosting
```

--------------------------------

### Deploying Firebase Hosting Content - Shell

Source: https://github.com/talkjs/talkjs-examples/blob/master/firebase/notifications-example/README.md

This command deploys the content from the configured public directory (typically `public/`) to Firebase Hosting. The `--only hosting` flag ensures only the hosting service is deployed. Requires the Firebase CLI and completed `firebase init hosting`.

```sh
firebase deploy --only hosting
```

--------------------------------

### Waiting for TalkJS API Readiness (JavaScript)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This JavaScript snippet demonstrates the standard way to ensure the TalkJS API is fully loaded and ready before interacting with it. It uses the `Talk.ready` promise, executing the provided function only after the SDK has initialized asynchronously.

```javascript
Talk.ready.then(function() {
    ...
})
```

--------------------------------

### Creating and Mounting TalkJS Popup UI - JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

Instantiates the TalkJS Popup user interface using `talkSession.createPopup`, typically linked to a specific conversation. It then mounts the popup, making it visible on the page. This UI is often preferred for customer-facing applications where the chat can be minimized.

```javascript
const chatPopup = talkSession.createPopup(conversation);
chatPopup.mount({ show: true });

```

--------------------------------

### Creating and Mounting TalkJS Inbox UI - JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

Instantiates the default TalkJS Inbox user interface using `talkSession.createInbox`, optionally specifying the currently selected conversation. It then renders this full Inbox UI into a designated HTML container element on the page.

```javascript
const inbox = talkSession.createInbox({ selected: conversation });
inbox.mount(document.getElementById('talkjs-container'));

```

--------------------------------

### Creating and Mounting TalkJS Chatbox (JavaScript)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This JavaScript snippet creates an instance of the TalkJS `Chatbox` UI component using an existing `talkSession`. It then mounts this chatbox onto the specified HTML element (`talkjs-container`), making the chat interface visible on the page.

```javascript
const chatbox = talkSession.createChatbox();
chatbox.mount(document.getElementById('talkjs-container'));
```

--------------------------------

### Creating TalkJS User Objects in Javascript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

Demonstrates how to instantiate TalkJS User objects using the Talk.User constructor, providing essential user details such as ID, name, email, photo URL, and a specified role. These objects are used to represent participants in TalkJS conversations.

```Javascript
var me = new Talk.User({
    id: "123456",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "/path_to_photo",
    role: "youtube"
});

....

var other1 = new Talk.User({
    id: "234567",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "",
    role: "youtube"
});
```

--------------------------------

### Mounting TalkJS Chatbox with Subject in Javascript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

Initializes a TalkJS chatbox instance for a given conversation, sets the conversation's subject attribute, and mounts the chatbox UI into an HTML element with the ID 'talkjs-container'. Requires an existing TalkJS session and conversation object.

```Javascript
Talk.ready.then(function() {
    ...
    conversation.setAttributes({
        subject: "Cooking With Alice"
    });
    var chatbox = talkSession.createChatbox(conversation);
    chatbox.mount(document.getElementById("talkjs-container"));
})
```

--------------------------------

### Setting up HTML Container for TalkJS Chat

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This HTML snippet defines the basic structure for embedding the TalkJS chat UI and a contact list. It uses `div` elements with specific IDs (`talkjs-container` and `contacts-list`) where the respective components will be rendered by JavaScript. Basic flexbox styling is applied for initial layout.

```html
<div style="display: flex; justify-content: center">
    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 30%;">
        <i>Loading chat...</i>
    </div>

    <div id="contacts-list">
        <h2>Contacts</h2>
    </div>
</div>
```

--------------------------------

### Simulating Multiple Client Users - TalkJS JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

Defines additional `Talk.User` objects to simulate multiple client users interacting with the support agent. These users are created with basic identification details (ID, name, email) and are used to demonstrate how the support backend can handle multiple simultaneous conversations.

```javascript
var other1 = new Talk.User({
    id: '237644',
    name: 'Jon',
    email: 'jon@example.com'
});
var other2 = new Talk.User({
    id: '2267363',
    name: 'Chloe',
    email: 'chloe@example.com'
});

```

--------------------------------

### Firebase SDK Configuration Structure - JSON

Source: https://github.com/talkjs/talkjs-examples/blob/master/firebase/notifications-example/README.md

This JSON object represents the configuration required to connect a web application to a specific Firebase project. It contains keys like API key, auth domain, project ID, storage bucket, messaging sender ID, and app ID. Users must replace placeholder values with their project's actual settings.

```json
{
  "apiKey": "<FIREBASE_API_KEY>",
  "authDomain": "<FIREBASE_APP_NAME>.firebaseapp.com",
  "projectId": "<FIREBASE_APP_NAME>",
  "storageBucket": "<FIREBASE_APP_NAME>.firebasestorage.app",
  "messagingSenderId": "<SENDER_ID>",
  "appId": "<FIREBASE_APP_ID>"
}
```

--------------------------------

### Setting Conversation Attributes - TalkJS JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

Uses the `setAttributes` method on a `ConversationBuilder` object to configure properties for the entire conversation. This allows setting a `subject` for the chat title, a `photoUrl` for the chat header image, and providing `welcomeMessages` that are displayed to the user when they open the chat.

```javascript
conversation.setAttributes({
    subject: "Team TalkJS",
    photoUrl: "https://talkjs.com/images/logo.jpg", // Should be an absolute path
    welcomeMessages: [
        "Hi, welcome. We are usually online during working hours but feel free to leave a message at any time.",
        "You can also check our <https://example.com/docs|docs>" 
    ]
});

```

--------------------------------

### Styling Message Action Menus and Emoji Reactions in CSS

Source: https://github.com/talkjs/talkjs-examples/blob/master/react/team-chat-with-threads/theme/UserMessage.txt

Provides CSS rules to style action menus associated with messages and the components related to displaying and adding emoji reactions. It defines padding, margins, background colors, borders, flex layouts, and hover effects for various elements like `.action-menu`, `.emoji-reactions`, `.emoji-reaction`, and `.add-emoji-reaction`, including specific styles for user-sent messages (`.by-me`) and messages with thumbnails.

```css
  padding: 0.325rem;
    margin: 0.1rem;
    z-index: 1;
}

.by-me .action-menu {
    background-color: #404040;
}
.by-other .action-menu {
    background-color: #404040;
}

.message.has-thumbnail .action-menu {
    box-shadow: none;
    background: none;
}

.emoji-reactions {
    margin-top: -0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.emoji-reactions.by-me {
    justify-content: flex-start;
    margin-left: 4.25rem;
}
.emoji-reactions.by-other {
    margin-left: 4.25rem;
}
.emoji-reaction {
    border: 1px solid transparent;
    margin: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 8rem;
    background-color: #404040;
}
.emoji-reaction.i-reacted {
    background: #007df9;
    border: 1px solid transparent;
    color: white;
}
.emoji-reaction.i-reacted:hover {
    background: #007df9;
    border: 1px solid #737373;
}
.emoji-reaction span {
    display: inline-block;
    vertical-align: middle;
}
.emoji-reaction .reaction {
    font-size: 1.25rem;
}
.emoji-reaction .num-reactions {
    padding-left: 0.25rem;
    font-size: 0.85rem;
}
.add-emoji-reaction {
    border: 1px solid transparent;
    margin: 0rem;
    padding: 0.15rem 0.75rem;
    border-radius: 8rem;
    background-color: #404040;
    color: white;
}
.emoji-reaction:hover,
.add-emoji-reaction:hover {
    border: 1px solid #737373;
}
.add-emoji-reaction .icon {
    width: 1.5rem;
    height: 1.5rem;
}
```

--------------------------------

### Defining Support User with Photo URL - TalkJS JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

Creates a `Talk.User` object representing the support agent or service provider. This object includes basic identifying information such as ID, name, and email, and specifies a `photoUrl` to display a custom profile picture in the chat interface instead of default initials.

```javascript
var me = new Talk.User({
    id: "103489",
    name: "Alice",
    email: "alice@example.com",
    photoUrl: "/https://talkjs.com/images/avatar.jpg"
});

```

--------------------------------

### Defining Client User with Role - TalkJS JavaScript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

Creates a `Talk.User` object for a client and assigns a specific `role` property, such as 'customer'. User roles are defined in the TalkJS Dashboard and are used to control permissions and features, like the ability to send file attachments.

```javascript
var other = new Talk.User({
    id: "854791",
    name: "Sebastian",
    email: "sebastian@example.com",
    role: "customer"
});

```

--------------------------------

### Creating/Getting TalkJS Conversations (JavaScript)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This JavaScript code iterates through the `contactsList` and creates a `Talk.User` object for each contact. It then uses `talkSession.getOrCreateConversation` with `Talk.oneOnOneId` to either fetch an existing direct conversation between 'me' and the contact or create a new one, setting both users as participants.

```javascript
// Create conversationBuilder objects for each user
const conversations = contactsList.map(function(user, index) {
    const talkUser = new Talk.User(user);

    conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, talkUser));

    conversation.setParticipant(me);
    conversation.setParticipant(talkUser);

    return conversation;
});
```

--------------------------------

### UserMessage Template: Displaying Sender Name (Replacement)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

This template code replaces the default logic for displaying the sender's name in the UserMessage component. It sets the sender's name color to gray, applies a 13px font size, and displays the name if there are other participants.

```TalkJS Theme Editor (Templating)
<div t:if="{{ conversation.others.length > 0 }}" class="message-author"
    style="color: gray; font-size: 13px">
   {{ sender.name }}
</div>
```

--------------------------------

### Wrapping User Name in TalkJS Profile Action Button (TalkJS Theme)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-make-a-clickable-profile-link/README.md

This snippet replaces the standard display of the user's name in the chat header with a TalkJS ActionButton component. The button triggers a custom action named "goToProfile" and includes the user's ID in a `data-userId` attribute, allowing custom client-side logic to handle the profile link. It requires the TalkJS theme system and available `user` context within the ChatHeader template.

```TalkJS Theme
<span><ActionButton action="goToProfile" data-userId="{{user.id}}">{{user.name}}</ActionButton></span>
```

--------------------------------

### UserMessage CSS: Modified '.message' Styles

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

Updates the CSS rules for the '.message' class in the UserMessage component. It adds `display: flex;` for layout control and removes default border and background color properties to eliminate chat bubble styling.

```TalkJS Theme Editor (CSS)
.message {
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    border-color: #E7ECEE;
    color: #111;
    display: flex;
}
```

--------------------------------

### Styling Contact List with CSS

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This CSS code provides styling rules for the contact list container and its elements. It defines the appearance of the list, heading, individual contact rows, profile pictures, and contact names. Includes flexbox for aligning photo and name, border-radius for rounded images, and a hover effect for contact rows.

```css
<style>

    #contacts-list {
        margin-top: auto;
        width: 700px;
        border: #d0d8dc solid 1px;
        border-radius: 6px;
        height: 510px;
        color: #111;
        font-family: 'Open Sans', sans-serif;
    }

    #contacts-list h2 {
        color: #fff;
        background: #e7ecee;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 13.3px;
        font-weight: 700;
        margin: 0;
        padding-top: 20px;
        padding-left: 20px;
        text-align: left;
        height: 40px;
    }
    
    .contact-container {
        height: 50px;
        display: flex;
        margin: 5px 0;
        cursor: pointer; 
    }

    .contact-container:hover {
        background-color: #e7ecee;
    }

    .contact-name {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    img {
        height: 40px;
        width: 40px;
        border: #fff 2px solid;
        border-radius: 200px;
        margin-left: 20px;
        margin-right: 20px;
    }

</style>
```

--------------------------------

### Rendering Contacts in DOM (JavaScript)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This JavaScript code iterates through the `contactsList` array and dynamically creates HTML elements to display each contact within the `contacts-list` div. It creates an image for the photo and a div for the name, wrapping them in a container div, and appends them to the contact list element in the document.

```javascript
// Display contacts list on page
// Get contacts list container from the DOM
const contactsWrapper = document.getElementById('contacts-list');
// Loop through array and display each contact in contact-list div
for (let contact of contactsList) {
    // Extract contact details
    const id = contact.id;
    const username = contact.name;
    const photoUrl = contact.photoUrl;

    //create img tag to hold contact pic, give it a class name (for styling purposes) and add photo to it
    const contactPhoto = document.createElement('img');
    contactPhoto.classList.add('contact-photo');
    contactPhoto.src = photoUrl;

    // Create div to hold contact Name and add name
    const usernameDiv = document.createElement('div');
    usernameDiv.classList.add('contact-name');
    usernameDiv.innerText = username;

    // Create contact parent div and add to it contactPhotoDiv and usernameDiv
    const contactContainerDiv = document.createElement('div');
    contactContainerDiv.classList.add('contact-container');

    contactContainerDiv.appendChild(contactPhoto);
    contactContainerDiv.appendChild(usernameDiv);

    contactsWrapper.appendChild(contactContainerDiv);
};
```

--------------------------------

### UserMessage CSS: Modified '.by-me.message' Styles

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

Targets the CSS class for messages sent by the current user, specifically removing default `border-color` and `background-color` properties to ensure consistency after modifying the general `.message` class.

```TalkJS Theme Editor (CSS)
.by-me.message
```

--------------------------------

### Defining Current TalkJS User (JavaScript)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This JavaScript code creates a `Talk.User` object representing the user who is currently using the chat application ('me'). This object is essential for identifying the user in the TalkJS session and conversations. It requires an `id`, `name`, and optional `photoUrl`.

```javascript
let me = new Talk.User({
    id: '0',
    name: 'Demi',
    photoUrl: 'https://talkjs.com/images/avatar.jpg'
});
```

--------------------------------

### Chat Header Search Button Element - TalkJS Theme HTML

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

This HTML snippet is part of the `ChatHeader` component template in the TalkJS Theme Editor. It renders the search icon button. Removing this code block eliminates the search functionality icon from the chat header UI.

```html
<SearchButton t:if="{{ showSearchButton }}" class="action-button">
    <Icon type="search" />
</SearchButton>

```

--------------------------------

### Styling TalkJS Action Button Images (CSS)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-make-a-clickable-profile-link/README.md

This CSS snippet provides styling rules for action buttons that wrap images within the TalkJS chat header. It makes the button circular using `border-radius: 50%`, removes default padding, and adds a subtle opacity change on hover for visual feedback. These styles are intended to be added to the theme's `<style>` section to ensure the button containing the image looks like a standard circular image.

```CSS
.header .image button[data-action] {
  border-radius: 50%;
  padding: 0;
}

.header .image button[data-action]:hover {
  opacity: 70%;
}
```

--------------------------------

### UserMessage CSS: Modified '.message-row' Styles

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

Updates the CSS for the `.message-row` class to adjust vertical spacing between message rows using `margin-bottom` and `margin-top`, and explicitly sets `display: flex;` for layout purposes.

```TalkJS Theme Editor (CSS)
margin-bottom: 0.5rem;
margin-top: 0.5rem;
display: flex;
```

--------------------------------

### Defining Hardcoded Contact Data (JavaScript)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This JavaScript code defines a simple array of objects, `contactsList`, representing potential chat contacts. Each object contains essential properties (`id`, `name`, `photoUrl`) required to identify and display the user. In a production application, this data would typically be fetched from a backend service or database.

```javascript
const contactsList = [
    {
        id: 1,
        name: 'Lisa',
        photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
    },
    {
        id: 2,
        name: 'Alice',
        photoUrl: 'https://talkjs.com/images/avatar-2.jpg'
    },
    {
        id: 3,
        name: 'Tina',
        photoUrl: 'https://talkjs.com/images/avatar-3.jpg'
    },
    {
        id: 4,
        name: 'Lee',
        photoUrl: 'https://talkjs.com/images/avatar-4.jpg'
    },
    {
        id: 5,
        name: 'Pete',
        photoUrl: 'https://talkjs.com/images/avatar-5.jpg'
    },
    {
        id: 6,
        name: 'Dana',
        photoUrl: 'https://talkjs.com/images/avatar-6.jpg'
    },
    {
        id: 7,
        name: 'Ro',
        photoUrl: 'https://talkjs.com/images/avatar-7.jpg'
    },
];
```

--------------------------------

### Attaching Click Listeners to Contacts - Javascript

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-direct-message-chat-with-contact-list/tutorial.md

This snippet demonstrates how to add event listeners to elements representing contacts in a list. It retrieves DOM elements with the class 'contact-container', iterates through them, and adds a click listener to each. When a contact is clicked, it selects the corresponding conversation in the TalkJS chatbox.

```javascript
let contactsListDivs = document.getElementsByClassName('contact-container');
conversations.forEach(function(conversation, index) {
    contactsListDivs[index].addEventListener('click', function() {
    chatbox.select(conversation);
    });
});
}
```

--------------------------------

### MessageBody CSS: Modified '.text' Padding

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

Modifies the padding for the `.text` class within the MessageBody subcomponent to reduce spacing around the message text content, setting top padding to 0.5rem and other paddings to 0.

```TalkJS Theme Editor (CSS)
.text {
    padding: 0.5rem 0 0 0;
}
```

--------------------------------

### Conditionally Wrapping Conversation Image in TalkJS Profile Action Button (TalkJS Theme)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-make-a-clickable-profile-link/README.md

This snippet conditionally wraps the conversation image component within a TalkJS ActionButton for 1-on-1 conversations. It uses `t:if` to check if there's exactly one other participant and, if so, creates a button triggering the "goToProfile" action with the other participant's ID. This allows clicking the image to go to the other user's profile in direct chats, while group chat images remain standard. It adds a class for styling.

```TalkJS Theme
<ActionButton t:if="{{ conversation.otherParticipants.length == 1 }}" class="action-button-image" action="goToProfile" data-userId="{{ conversation.otherParticipants[0].id }}"><ConversationImage conversation="{{ conversation }}" /></ActionButton>
<ConversationImage t:else conversation="{{ conversation }}" />
```

--------------------------------

### Chat Header Subtitle Element - TalkJS Theme HTML

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-build-custom-support-chat-solution/tutorial.md

This HTML snippet is found within the `ChatHeader` component template in the TalkJS Theme Editor. It is responsible for displaying the names of the conversation participants as a subtitle below the subject. Deleting this line removes participant names from the chat header.

```html
<div class="subtitle">{{ names }}</div>

```

--------------------------------

### Styling Forwarded Message Indicator in TalkJS Theme (CSS)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-add-forwarding/README.md

This CSS snippet defines the visual appearance of the forwarded message indicator within the TalkJS MessageBody component. It styles the `.forwarded-header` container using flexbox, sets dimensions and margins for the SVG icon within the header, and styles the `.forwarded-indicator` text with specific color, font-style, and opacity. These styles are added to the `<styles>` section of the MessageBody theme component.

```CSS
/* Styles for forwarded messages */
.forwarded-header {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.8rem;
}

.forwarded-header svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.3rem;
}

.forwarded-indicator {
    color: #ffffff;
    font-style: italic;
    opacity: 0.8;
}
```

--------------------------------

### ChatHeader Template: Subtitle Div (To Be Removed)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

This is a snippet from the default TalkJS ChatHeader template responsible for rendering the conversation subtitle, often showing participant names. The tutorial instructs deleting this line in the Theme Editor to remove the subtitle.

```TalkJS Theme Editor (Templating)
<div class="subtitle">{{ names }}</div>
```

--------------------------------

### UserMessage CSS: Default '.message-row.by-me' Styles (To Be Removed/Modified)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

This CSS targets message rows sent by the current user in the default TalkJS theme, typically applying styles for right alignment. The tutorial instructs deleting this entire class or removing its flex-direction property to make messages left-aligned.

```TalkJS Theme Editor (CSS)
.message-row.by-me {
```

--------------------------------

### ChatHeader Template: Avatar Div (To Be Removed)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

This is a snippet from the default TalkJS ChatHeader template responsible for rendering the conversation or user avatar. The tutorial instructs deleting this code block in the Theme Editor to remove avatars from the header.

```TalkJS Theme Editor (Templating)
<div class="image">
    <ConversationImage conversation="{{conversation }}" />
</div>
```

--------------------------------

### UserMessage CSS: '.by-other .message' Class (To Be Removed)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-create-a-youtube-chatroom/tutorial.md

This CSS class in the UserMessage component likely contains styles specifically for messages from other users. The tutorial instructs deleting this entire class to avoid conflicting styles and ensure consistent alignment and appearance.

```TalkJS Theme Editor (CSS)
.by-other .message
```

--------------------------------

### Conditionally Rendering MessageBody in TalkJS Theme (HTML)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-add-forwarding/README.md

This HTML snippet modifies the TalkJS UserMessage component template. It uses conditional rendering (`t:if` and `t:else`) to check if the message's custom properties include `forwardedFrom`. If the property exists, it renders the MessageBody component passing `forwardedFrom` as a prop; otherwise, it renders MessageBody without that prop. This is a prerequisite for styling forwarded messages within the MessageBody component.

```HTML
<MessageBody t:if="{{ custom and custom.forwardedFrom }}"
    body="{{ body }}"
    timestamp="{{ timestamp }}"
    floatTimestamp="auto"
    showStatus="{{ sender.isMe }}"
    isLongEmailMessage="{{isLongEmailMessage}}"
    darkenMenuArea="{{ darkenMenuArea }}"
    referencedMessage="{{ referencedMessage }}"
    forwardedFrom="{{ custom.forwardedFrom }}"
/>
<MessageBody t:else
    body="{{ body }}"
    timestamp="{{ timestamp }}"
    floatTimestamp="auto"
    showStatus="{{ sender.isMe }}"
    isLongEmailMessage="{{isLongEmailMessage}}"
    darkenMenuArea="{{ darkenMenuArea }}"
    referencedMessage="{{ referencedMessage }}"
/>
```

--------------------------------

### Displaying Forwarded Indicator in TalkJS MessageBody (HTML)

Source: https://github.com/talkjs/talkjs-examples/blob/master/howtos/how-to-add-forwarding/README.md

This HTML snippet is added to the TalkJS MessageBody component template. It uses `t:if` to check if the `forwardedFrom` property is available. If it is, a `div` with the class `forwarded-header` is rendered, containing an SVG icon (a right-pointing arrow) and a `span` with the text "Forwarded" and class `forwarded-indicator`. This provides a visual cue that the message has been forwarded.

```HTML
<div t:if="{{ forwardedFrom }}">
    <div class="forwarded-header">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve">
            <path d="M56.8,31.5V16c-0.1-0.8,0.1-1.6,0.7-2.2c1-1,2.7-1,3.8,0l32.4,28.9c0.6,0.6,0.8,1.3,0.8,2c0,0.7-0.2,1.5-0.8,2L61.4,75.5 c-0.5,0.6-1.2,1-2,1c-0.7,0-1.4-0.3-1.9-0.8c0,0,0,0,0,0c-0.6-0.6-0.8-1.4-0.7-2.2c0,0,0-14.6,0-15.5c-17.4,0-33.6-1.1-50.3,22.1 C3.3,84.3,5.8,31.3,56.8,31.5z" fill="#FFFFFF" opacity="0.8"/>
        </svg>
        <span class="forwarded-indicator">Forwarded</span>
    </div>
</div>
```
Tokens:
Raw