### Installing Node.js Dependencies using npm (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/nextjs/README.md

This command installs all the project dependencies specified in the `package.json` file. It requires Node.js and npm to be installed. The command downloads packages from the npm registry and places them in the `node_modules` folder.

```Shell
npm install
```

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

### Building Project Dependencies - Maven - Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/java/springboot/README.md

This Maven command cleans the target directory and installs all required project dependencies. This step ensures that the project has all necessary libraries before compilation and execution.

```Shell
mvn clean install
```

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

### Installing Node.js Dependencies (Bash)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/ui/README.md

This command installs all required Node.js dependencies for the project, as specified in the package.json file. It must be run from within the project directory after cloning.

```Bash
npm install
```

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

### Starting Deep Chat UI Project (Bash)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/ui/README.md

This command executes the 'start' script defined in the project's package.json, which typically compiles and launches the development server for the Deep Chat UI application. It makes the project accessible locally.

```Bash
npm run start
```

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

### Starting Development Server Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/README.md

Starts a local development server for the documentation website. It automatically rebuilds and serves the site, making it suitable for active development.

```shell
# automatically build and serve:
$ npm run start
```

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

### Starting the Express Server - npm Bash

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/express/README.md

Initiates the project's startup process by executing the 'start' script defined in the package.json file using npm. This command typically compiles the code if necessary and launches the Express server instance, making it ready to handle requests.

```bash
npm run start
```

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

### Running Next.js Project Locally using npm (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/nextjs/README.md

This command runs the Next.js application in development mode. It executes the `dev` script defined in the project's `package.json`, which usually starts a local development server, often on port 3000. Requires Node.js and installed dependencies.

```Shell
npm run dev
```

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

### Running Flask Server (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/python/flask/README.md

Command to start the Flask server by executing the 'app.py' script. This makes the server operational and ready to communicate with the Deep Chat component or handle API proxy requests. This command should be executed from within the project's 'src' directory after installing dependencies.

```Shell
python app.py
```

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

### Cloning Git Repository with Shallow Depth - Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/README.md

This snippet provides a shell command to clone the 'active-chat' GitHub repository using a shallow clone. The '--depth 1' option retrieves only the latest commit, which is recommended to reduce the size of the downloaded project for local setup.

```Shell
git clone --depth 1 https://github.com/OvidijusParsiunas/active-chat.git
```

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

### Serving Deep Chat Component Locally - Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/component/README.md

Starts a local web server to serve the built component, typically from an example HTML file (like index.html). Allows testing the component in a browser. Requires dependencies installed.

```Shell
npm run start
```

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

### Installing Project Dependencies - npm Bash

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/express/README.md

Runs the npm install command within the project directory. This command reads the package.json file and downloads and installs all required Node.js packages that the Express server project depends on, preparing it for execution.

```bash
npm install
```

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

### Cloning Repository using Git (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/nextjs/README.md

This command clones the specified GitHub repository for the project. The `--depth 1` flag performs a shallow clone, downloading only the most recent commit history to reduce size. Requires the `git` command-line tool to be installed.

```Shell
git clone --depth 1 https://github.com/OvidijusParsiunas/active-chat.git
```

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

### Running Spring Boot Application - Maven - Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/java/springboot/README.md

This Maven command executes the Spring Boot application. It starts the embedded server and makes the defined API endpoints available, allowing communication with the Deep Chat UI and proxying AI requests.

```Shell
mvn spring-boot:run
```

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

### Cloning Project Repository - Git - Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/java/springboot/README.md

This command clones the project repository from GitHub using a shallow clone (`--depth 1`) to reduce the download size. This is the first step to obtain the project source code.

```Shell
git clone --depth 1 https://github.com/OvidijusParsiunas/active-chat.git
```

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

### Installing Node Dependencies Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/README.md

Installs all required Node.js dependencies for the project using the npm package manager. This command should be run initially after cloning the repository or when dependencies are updated.

```shell
# Install node dependencies:
$ npm install
```

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

### Full Camera Integration Configuration Example (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

Provides a complete example of the `<deep-chat>` HTML element configuration, including the `camera` property with `connect`, `files`, `button`, and `modalContainerStyle`, along with `demo`, `style`, and `introMessage` attributes for a runnable example demonstrating camera capture functionality.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  camera='{
    "connect": {"url": "https://customapi.com/image-from-camera"},
    "files": {"format": "png"},
    "button": {"position": "outside-left"},
    "modalContainerStyle": {"borderRadius": "5px"}
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the camera button to open up a modal for capturing photos."}'
></deep-chat>
```

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

### Cloning Deep Chat UI Repo (Bash)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/ui/README.md

This command clones the Deep Chat UI example repository from GitHub with a shallow depth of 1, reducing the download size and history. It is the first step in setting up the project locally.

```Bash
git clone --depth 1 https://github.com/OvidijusParsiunas/active-chat.git
```

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

### Configure OpenAI Chat with Function Calling (Full Example)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAI.mdx

This example provides a more complete setup for OpenAI function calling, including the definition of a sample `get_current_weather` helper function. It illustrates how the `function_handler` receives function call details from the model and uses the helper function to generate a response that is then returned to the chat system.

```JavaScript
// using JavaScript for a simplified example

chatElementRef.directConnection = {
  openAI: {
    chat: {
      tools: [
        {
          type: 'function',
          function: {
            name: 'get_current_weather',
            description: 'Get the current weather in a given location',
            parameters: {
              type: 'object',
              properties: {
                location: {
                  type: 'string',
                  description: 'The city and state, e.g. San Francisco, CA',
                },
                unit: {type: 'string', enum: ['celsius', 'fahrenheit']},
              },
              required: ['location'],
            },
          },
        },
      ],
      function_handler: (functionsDetails) => {
        return functionsDetails.map((functionDetails) => {
          return {
            response: getCurrentWeather(functionDetails.arguments),
          };
        });
      },
    },
    key: 'placeholder-key',
  },
};

function getCurrentWeather(location) {
  location = location.toLowerCase();
  if (location.includes('tokyo')) {
    return JSON.stringify({location, temperature: '10', unit: 'celsius'});
  } else if (location.includes('san francisco')) {
    return JSON.stringify({location, temperature: '72', unit: 'fahrenheit'});
  } else {
    return JSON.stringify({location, temperature: '22', unit: 'celsius'});
  }
}
```

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

### Full InfoModal Configuration Example (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

Provides a complete example of the `<deep-chat>` HTML element configuration, including the `images.files.infoModal` property with `textMarkDown`, `openModalOnce`, and `containerStyle`, along with `demo` and `style` attributes for a runnable example demonstrating the info modal feature.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  images='{
    "files": {
      "infoModal": {
        "textMarkDown":
          "Please note our terms of service for sending files: [link](https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley).",
        "openModalOnce": true,
        "containerStyle": {"borderRadius": "5px"}
      }
    }
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Click the image button to open up the modal."}'
></deep-chat>
```

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

### Installing Deep Chat NestJS Project Dependencies (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/nestjs/README.md

Command to install all necessary project dependencies listed in the `package.json` file using npm. This command should be executed within the root directory of the cloned project.

```Shell
npm install
```

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

### Installing Node.js Dependencies

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/websockets/README.md

Navigate to the project directory and run npm install to download and set up all required Node.js packages specified in the package.json file.

```Shell
npm install
```

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

### Installing Python Dependencies (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/python/flask/README.md

Command to install the required Python packages using pip. These packages (flask, flask-cors, load_dotenv) are necessary for the Flask server to run correctly. This command should be executed from within the project's 'src' directory.

```Shell
pip install flask flask-cors load_dotenv
```

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

### Running Deep Chat NestJS Server Project (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/nestjs/README.md

Command to start the NestJS server project after dependencies have been installed. This typically compiles the TypeScript code and launches the application for local development or testing.

```Shell
npm run start
```

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

### Configure OpenAI Audio in HTML (Full Example)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAI.mdx

Shows a full HTML example using the `<deep-chat>` custom element with the `directConnection` attribute configured for OpenAI, including the `audio` parameters (note: this example uses 'audio' instead of 'speechToText') and a style attribute.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "audio": {"model": "whisper-1", "temperature": 0.3, "language": "en", "type": "transcription"}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

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

### Starting the Node.js Server

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/websockets/README.md

Execute the npm run start command within the project directory. This will run the script defined in package.json to launch the Node.js websocket server.

```Shell
npm run start
```

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

### Installing Project Dependencies with npm Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/sveltekit/README.md

Installs all necessary Node.js packages and dependencies defined in the project's package.json file. This command must be run within the project directory after cloning.

```Shell
npm install
```

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

### Building and Serving Production Site Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/README.md

Builds the static production version of the documentation website and then serves it locally. This allows testing the final output before deployment.

```shell
# build and serve for production:
$ npm run build
$ npm run serve
```

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

### Setting Initial Chat History (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

This JSON array provides an example of how to pre-populate the chat interface with a conversation history, including user and AI messages.

```JSON
[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]
```

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

### Configuring Deep Chat with OpenAI key validation and style (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/directConnection.mdx

Provides a complete HTML example demonstrating Deep Chat configuration for direct OpenAI connection with key validation enabled via `validateKeyProperty: true`. It includes a placeholder key, a system prompt, and applies a border-radius style. This setup is for prototyping and not suitable for production environments.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "validateKeyProperty": true,
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

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

### Installing Node Dependencies - Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/component/README.md

Navigates into the source directory and installs the project's Node.js dependencies using npm. Requires Node.js and npm to be installed and the repository cloned.

```Shell
npm install
```

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

### Configure New OpenAI Assistant (HTML Full Example)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAI.mdx

Provides a more complete example of configuring a new OpenAI assistant using the `<deep-chat>` custom element, including the OpenAI API key, specifying the `code_interpreter` tool, enabling mixed file uploads, and applying basic styling.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "assistant": {
        "new_assistant": {
          "name": "Demo Assistant",
          "tools": [{"type": "code_interpreter"}]
      }}
  }}'
  mixedFiles="true"
  style="border-radius: 8px"
></deep-chat>
```

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

### Full DeepChat Camera Example (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

Provides a complete HTML example showing how to integrate the DeepChat component with camera file configuration, including demo mode, custom styling, and an introductory message. The camera settings are passed via the `camera` attribute.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  camera='{
    "files": {
      "format": "png",
      "dimensions": {"width": 450, "height": 600},
      "maxNumberOfFiles": 2,
      "acceptedFormats": ".jpg,.png"
    }
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the camera button to open up a modal for capturing photos."}'
></deep-chat>
```

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

### Configuring Deep Chat with direct OpenAI connection and style (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/directConnection.mdx

Provides a fuller HTML example of the Deep Chat component configuration. It uses the `directConnection` property to connect directly to OpenAI with a placeholder key and a system prompt, and also applies a border-radius style. This setup is for prototyping purposes only and not suitable for production.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

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

### Fetching Go Dependencies (Go/Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/go/README.md

Uses the Go command-line tool to download and install the required project dependencies listed in the go.mod file. This step is essential to ensure all necessary packages are available before building or running the server.

```Shell
go get
```

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

### Configure deep-chat tag for OpenAI Assistant (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAI.mdx

Shows how to configure the `<deep-chat>` custom HTML element to connect to the OpenAI Assistant API. Includes examples for basic setup and a more complete version with styling, both demonstrating the basic assistant configuration.

```html
<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "assistant": true
  }}'
></deep-chat>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "assistant": true
  }}'
  style="border-radius: 8px"
></deep-chat>
```

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

### Running the Go Server (Go/Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/go/README.md

Compiles and executes the main Go application file (`main.go`). This command starts the server, making it ready to accept connections from the Deep Chat UI component and process requests, potentially routing them to configured AI APIs.

```Shell
go run main.go
```

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

### DeepChat Demo Setup with Styling in HTML

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/demo.mdx

This snippet demonstrates setting up the DeepChat component in demo mode with an added style attribute for rounded corners. It includes a comment indicating it's a basic Vanilla JS example.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat demo="true" style="border-radius: 8px"></deep-chat>
```

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

### Full DeepChat Microphone Example (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

Presents a complete HTML example for integrating the DeepChat component with microphone configuration, including the API connection URL, file format, button position, demo mode, custom styling, and an introductory message.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  microphone='{
    "connect": {"url": "https://customapi.com/audio-from-microphone"},
    "files": {"format": "mp3"},
    "button": {"position": "outside-left"}
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the microphone button to record audio."}'
></deep-chat>
```

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

### Full Deep Chat API Connection Example (HTML/JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/connect.mdx

Provides a more complete example of the Deep Chat component with API connection configuration via the `connect` attribute. It includes styling and notes that the example is for Vanilla JS.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  connect='{
    "url": "https://customapi.com/message",
    "method": "POST",
    "headers": {"customName": "customHeaderValue"},
    "additionalBodyProps": {"customBodyField": "customBodyValue"}
  }'
  style="border-radius: 8px"
></deep-chat>
```

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

### Install deep-chat via npm (Bash)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/installation.mdx

Installs the core deep-chat library using the npm package manager.

```bash
npm install deep-chat
```

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

### Full DeepChat Azure Text-to-Speech HTML Example

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/Azure.mdx

Provides a complete HTML example demonstrating how to embed and configure the `deep-chat` custom element for Azure Text-to-Speech. It includes the `directConnection` attribute setup and basic styling, noting it's intended for a Vanilla JS environment.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "azure": {
      "key": "placeholder key",
      "textToSpeech": {"region": "eastus"}
    }
  }'
  style="border-radius: 8px"
></deep-chat>
```

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

### Configure deep-chat tag for OpenAI Vision (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAI.mdx

Shows how to configure the `<deep-chat>` custom HTML element to connect to the OpenAI Vision API. Includes examples for basic setup and a more complete version with styling, both demonstrating image and camera capabilities.

```html
<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "chat": {"model": "gpt-4-vision-preview"}
  }}'
  images="true"
  camera="true"
></deep-chat>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "chat": {"model": "gpt-4-vision-preview"}
  }}'
  images="true"
  camera="true"
  style="border-radius: 8px"
  textInput='{"styles": {"container": {"width": "77%"}}}'
></deep-chat>
```

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

### Install deep-chat-react via npm (Bash)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/installation.mdx

Installs the React-specific version of the deep-chat library using the npm package manager.

```bash
npm install deep-chat-react
```

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

### Configuring DeepChat Microphone Files (HTML Full Example)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

This more complete HTML example shows how to configure the audio recording file settings for the DeepChat component, similar to the sample, but also includes attributes for enabling demo mode, applying styling, and setting an introductory message. It configures the microphone files with specific format, duration, file count, and accepted formats.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  microphone='{
    "files": {
      "format": "mp3",
      "maxDurationSeconds": 10,
      "maxNumberOfFiles": 2,
      "acceptedFormats": ".mp3,.wav"
    }
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the microphone button to record audio."}'
></deep-chat>
```

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

### Define Simple FetchEphemeralKey Function (JS)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

Provides a basic JavaScript example for defining the `fetchEphemeralKey` function to return a static ephemeral key value, suitable for simple setups or testing.

```js
// There are many ways to define the function depending on your framework.
// The following is a simple VanillaJs example:

chatElementRef.directConnection.openAI.realtime.fetchEphemeralKey = () => 'my-key';
```

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

### Configuring Deep Chat Connection Settings (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Configures how the component connects to the backend, enabling features like streaming.

```json
{
  "stream": true
}
```

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

### Full Audio File Handling Configuration in DeepChat HTML

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

This comprehensive example demonstrates configuring audio file handling along with demo mode, styling, and an introductory message for the DeepChat component.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  audio='{
    "connect": {"url": "https://customapi.com/audio"},
    "files": {"acceptedFormats": ".mp3,.wav"},
    "button": {"position": "outside-left"}
  }'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the audio button or drop a file to attach it to the next outgoing message."}'
></deep-chat>
```

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

### Access deep-chat via CDN (URL)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/installation.mdx

Provides the direct URL to access the deep-chat library bundle via CDN.

```text
https://unpkg.com/deep-chat@2.2.0/dist/deepChat.bundle.js
```

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

### Cloning Git Repository with Shallow Depth - Bash

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/node/express/README.md

Executes a git clone command to download the project repository from GitHub. The `--depth 1` flag is used to perform a shallow clone, retrieving only the latest commit to minimize download size and speed up the setup process.

```bash
git clone --depth 1 https://github.com/OvidijusParsiunas/active-chat.git
```

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

### Configure DeepChatBrowser for OpenAI Assistant (JSX)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAI.mdx

Demonstrates configuring the `DeepChatBrowser` React component to connect to the OpenAI Assistant API. Shows examples with and without the API key directly in the configuration, using the basic assistant setup.

```jsx
<DeepChatBrowser
  style={{borderRadius: '8px'}}
  directConnection={{
    openAI: {
      key: 'placeholder key',
      assistant: {},
    },
  }}
></DeepChatBrowser>
```

```jsx
<DeepChatBrowser
  style={{borderRadius: '8px'}}
  directConnection={{
    openAI: {
      assistant: {},
    },
  }}
></DeepChatBrowser>
```

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

### Basic DeepChat Demo Mode (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/modes.mdx

This is a simple HTML example demonstrating how to enable the demo mode for the DeepChat component by setting the `demo` attribute to `true`. It provides a basic setup for showcasing component capabilities without API connection.

```html
<deep-chat demo="true"></deep-chat>
```

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

### Full DeepChat Demo Mode Example (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/modes.mdx

This HTML snippet provides a more complete example of the DeepChat component in demo mode, including basic styling. It also includes a comment indicating that this is a Vanilla JS example and may need adaptation for different frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat demo="true" style="border-radius: 8px"></deep-chat>
```

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

### Configuring Deep Chat Text Input (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Sets configuration options for the text input area, such as placeholder text.

```json
{
  "placeholder": {
    "text": "Send a message"
  }
}
```

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

### Setting up Deep Chat Wrapper Project

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/other-packages/react/README.md

These commands are used for setting up the local development environment for the deep-chat wrapper project. The first command installs all necessary Node.js dependencies, and the second command builds the wrapper component.

```bash
# Install node dependencies:
$ npm install

# Build the wrapper:
$ npm run build
```

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

### Configuring Connection Streaming (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

This simple JSON object configures the connection behavior, enabling streaming for responses.

```JSON
{"stream": true}
```

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

### Configuring Deep Chat Avatars (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Sets the configuration for user and AI avatars, including default styles and AI avatar source.

```json
{
  "default": {
    "styles": {
      "position": "left"
    }
  },
  "ai": {
    "src": "path-to-icon.png"
  }
}
```

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

### Basic DeepChat Setup with Avatars and History (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/messages/messages.mdx

Initialize the `deep-chat` web component with basic avatar display enabled. The full code example demonstrates how to pre-populate the chat history using the `history` attribute with a JSON string containing message objects.

```html
<deep-chat avatars="true"></deep-chat>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  avatars="true"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, how about you?", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {
      "text": "This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",
      "role": "ai"
    }
  ]'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

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

### Configuring Connection Streaming - JSON

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Configures connection settings for the chat component, enabling message streaming.

```JSON
{"stream": true}
```

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

### Configure OpenAI Realtime Buttons in DeepChat (JSX) - Example 2

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

This is a second example demonstrating the configuration of OpenAI realtime button styling and SVG content within a DeepChatBrowser component using the `directConnection` prop, similar to the first example but without the API key.

```javascript
{
  openAI: {
    realtime: {
      buttons: {
        container: {backgroundColor: '#f7f7f7'},
        microphone: {
          default: {
            svg: {
              content:
                '<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none">\n<path d="M3 16.5C2.59 16.5 2.25 16.16 2.25 15.75V8.25C2.25 7.84 2.59 7.5 3 7.5C3.41 7.5 3.75 7.84 3.75 8.25V15.75C3.75 16.16 3.41 16.5 3 16.5Z" fill="#292D32"/>\n<path d="M7.5 19C7.09 19 6.75 18.66 6.75 18.25V5.75C6.75 5.34 7.09 5 7.5 5C7.91 5 8.25 5.34 8.25 5.75V18.25C8.25 18.66 7.91 19 7.5 19Z" fill="#292D32"/>\n<path d="M12 21.5C11.59 21.5 11.25 21.16 11.25 20.75V3.25C11.25 2.84 11.59 2.5 12 2.5C12.41 2.5 12.75 2.84 12.75 3.25V20.75C12.75 21.16 12.41 21.5 12 21.5Z" fill="#292D32"/>\n<path d="M16.5 19C16.09 19 15.75 18.66 15.75 18.25V5.75C15.75 5.34 16.09 5 16.5 5C16.91 5 17.25 5.34 17.25 5.75V18.25C17.25 18.66 16.91 19 16.5 19Z" fill="#292D32"/>\n<path d="M21 16.5C20.59 16.5 20.25 16.16 20.25 15.75V8.25C20.25 7.84 20.59 7.5 21 7.5C21.41 7.5 21.75 7.84 21.75 8.25V15.75C21.75 16.16 21.41 16.5 21 16.5Z" fill="#292D32"/>\n</svg>'
            }
          }
        },
        toggle: {
          default: {
            svg: {
              styles: {
                default: {
                  filter:
                    'brightness(0) saturate(100%) invert(58%) sepia(77%) saturate(282%) hue-rotate(172deg) brightness(91%) contrast(93%)'
                }
              }
            }
          }
        }
      }
    }
  }
}
```

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

### Full Deep Chat Configuration Example (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/speech.mdx

Provides a more complete example of the Deep Chat custom element configuration, including speech-to-text settings, an introductory message, styling, and demo mode. Note that this is a vanilla JS example and may need adaptation for specific frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  speechToText='{"webSpeech": {"language": "en-US"}}'
  introMessage='{"text": "Click the microphone to start transcribing your speech."}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

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

### Running SvelteKit Project Locally with npm Shell

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/sveltekit/README.md

Starts the SvelteKit development server. This command executes the 'dev' script specified in package.json, allowing you to run and test the application locally, typically at http://localhost:5173 or a similar port.

```Shell
npm run dev
```

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

### Configuring Microphone Button (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

This JSON object configures the microphone button's appearance and position within the chat interface.

```JSON
{
    "button": {
      "default": {
        "container": {"default": {"bottom": "1em", "right": "0.6em", "borderRadius": "20px", "width": "1.9em", "height": "1.9em"}},
        "svg": {"styles": {"default": {"bottom": "0.35em", "left": "0.35em"}}}
      },
      "position": "inside-right"
    }
  }
```

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

### Complete OpenAI Realtime Function Example (JS)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

This snippet provides a more complete example, including the OpenAI realtime configuration (defining tools and the handler) and a sample implementation of the `getCurrentWeather` function that the handler calls to process the model's request.

```js
// using JavaScript for a simplified example

chatElementRef.directConnection = {
  openAI: {
    key: 'placeholder-key',
    realtime: {
      config: {
        tools: [
          {
            type: 'function',
            name: 'get_current_weather',
            description: 'Get the current weather in a given location',
            parameters: {
              type: 'object',
              properties: {
                location: {
                  type: 'string',
                  description: 'The city and state, e.g. San Francisco, CA',
                },
                unit: {type: 'string', enum: ['celsius', 'fahrenheit']}
              },
              required: ['location']
            }
          }
        ],
        function_handler: (functionsDetails) => {
          const {location} = JSON.parse(functionsDetails.arguments);
          return this.getCurrentWeather(location);
        }
      }
    }
  }
};

function getCurrentWeather(location) {
  location = location.toLowerCase();
  if (location.includes('tokyo')) {
    return {location, temperature: '10', unit: 'celsius'};
  } else if (location.includes('san francisco')) {
    return {location, temperature: '72', unit: 'fahrenheit'};
  } else {
    return {location, temperature: '22', unit: 'celsius'};
  }
}
```

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

### Cloning Git Repository (Shell)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/example-servers/python/flask/README.md

Command to clone the project repository using git with a shallow depth (--depth 1) to reduce its size. This is the first step for obtaining the project files locally.

```Shell
git clone --depth 1 https://github.com/OvidijusParsiunas/active-chat.git
```

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

### Example Server Status Messages with Config (Text)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/connect.mdx

Example text combining the DeepChat component configuration with a sequence of messages that a server might send to update the status bubble.

```text
Component configuration:
<deep-chat connect='{"url": "ws://customapi.com", "websocket": true}'></deep-chat>

Messages from the server:
1: {text: "Downloading...", overwrite: true}
2: {text: "Loading...", overwrite: true}
3: {text: "Processing...", overwrite: true}
4: {text: "Ready...", overwrite: true}
```

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

### Setting Initial Chat History - JSON

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Provides an initial set of messages to populate the chat history when the component loads. Each message includes text and the role (user or ai).

```JSON
[
  {"text": "Hey, how are you?", "role": "user"},
  {"text": "I am doing great, thanks.", "role": "ai"},
  {"text": "What is the meaning of life?", "role": "user"},
  {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]
```

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

### Configure Speech-to-Text in DeepChat HTML (Full Example)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/speech.mdx

This comprehensive HTML example shows how to configure the `speechToText` feature on a `<deep-chat>` element, similar to the sample. It includes additional attributes like `introMessage`, `style`, and `demo` to provide a complete, runnable example for vanilla JS.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  speechToText='{
    "webSpeech": true,
    "translations": {"hello": "goodbye", "Hello": "Goodbye"},
    "commands": {"resume": "resume", "settings": {"commandMode": "hello"}},
    "button": {"position": "outside-left"}
  }'
  introMessage='{"text": "Click the microphone to start transcribing your speech."}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

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

### Setting Deep Chat Initial History (JSON)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Provides an initial conversation history to display when the component loads.

```json
[
  {
    "text": "Hey, how are you?",
    "role": "user"
  },
  {
    "text": "I am doing great, thanks.",
    "role": "ai"
  },
  {
    "text": "What is the meaning of life?",
    "role": "user"
  },
  {
    "text": "Seeking fulfillment and personal growth.",
    "role": "ai"
  }
]
```

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

### Styling Dropup Button - JSON

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Configures the appearance and SVG icon of the dropup menu button, defining container styles and SVG content/styles.

```JSON
{
  "button": {
    "styles": {
      "container": {
        "default": {
          "width": "1.6em",
          "height": "1.6em",
          "borderRadius": "25px",
          "backgroundColor": "#8282821a"
        }
      },
      "svg": {
        "styles": {
          "default": {
            "width": "1em",
            "marginLeft": "0.06em",
            "marginTop": "0.3em",
            "filter": "brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)"
          }
        },
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?><svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z\"/><\/svg>"
      }
    }
  }
}
```

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

### Installing Deep Chat React Component | npm

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/other-packages/react/README.md

This command installs the Deep Chat React component library from the npm registry. It is the first step required to use the component within a React project.

```npm
npm install deep-chat-react
```

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

### Configure DeepChat OpenAI Realtime Error with Key (HTML/Python Full)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

Provides a full HTML example for configuring the `deep-chat` component's OpenAI direct connection, including a placeholder key and custom realtime error message text and style via the `directConnection` attribute. This example is tailored for use with Python frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
  "openAI": {
    "key": "placeholder key",
    "realtime": {
      "error": {
        "text": "Custom Error!",
        "style": {"color": "orange"}
      }}}}'
  style="border-radius: 8px"
></deep-chat>
```

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

### Configuring Camera Button Position - JSON

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Specifies the position of the camera button within the chat interface, setting it to appear in a dropup menu.

```JSON
{"button": {"position": "dropup-menu"}}
```

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

### Full Image File Handling Configuration in DeepChat HTML

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

This example provides a complete configuration for image file handling, including setting file limits and formats, along with demo mode, styling, and an introductory message.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  images='{"files": {"maxNumberOfFiles": 2, "acceptedFormats": ".jpg,.png"}}'
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the image button or drop a file to attach it to the next outgoing message."}'
></deep-chat>
```

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

### Configuring DeepChat with Audio Uploads and History (HTML Full)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

This comprehensive HTML example demonstrates how to enable the audio upload button (`audio="true"`), set demo mode, apply styling, configure an introductory message, and pre-populate the chat history with a user message containing an audio file attachment.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  audio="true"
  demo="true"
  style="border-radius: 8px"
  introMessage='{"text": "Use the audio button or drop a file to attach it to the next outgoing message."}'
  history='[{"files": [{"src": "path-to-file.wav", "type": "audio"}], "role": "user"}]'
></deep-chat>
```

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

### Applying Loading Styles in HTML (Sample)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/messages/styles.mdx

Shows a basic example of setting loading styles for the `<deep-chat>` web component using the `messageStyles` attribute with a JSON string.

```HTML
<deep-chat
  messageStyles='{
    "loading": {
      "history": {
        "full": {
          "styles": {"outerContainer": {"marginTop": "28px"}},
          "html": "<div class=\"lds-ripple\"><div></div><div></div></div>"
        },
        "small": {
          "styles": {"outerContainer": {"marginTop": "-10px", "marginBottom": "50px"}}
  }}}}'
></deep-chat>
```

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

### Configure DeepChat React with Stability AI Text-to-Image (No Key)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/StabilityAI.mdx

Similar to the previous React/JSX example, this snippet configures DeepChatBrowser for Stability AI text-to-image but omits the 'key' property from the directConnection object. This setup might be used if the key is provided via environment variables or another method.

```jsx
<DeepChatBrowser
  style={{borderRadius: '8px'}}
  directConnection={{
    stabilityAI: {
      textToImage: {engine_id: 'stable-diffusion-v1-6', weight: 1, style_preset: 'fantasy-art', samples: 2},
    },
  }}
></DeepChatBrowser>
```

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

### Full OpenAI Realtime Connection (Python Context)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

Provides a more complete example of embedding the `deep-chat` custom element for OpenAI Realtime connection, including basic styling. This example is presented in a Python context, with a note about tailoring for specific frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  directConnection='{
    "openAI": {"key": "placeholder key", "realtime": true}
  }'
  style="border-radius: 8px"
></deep-chat>
```

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

### Sample Camera Integration Configuration (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/files.mdx

Demonstrates the basic configuration of the `camera` property for the `<deep-chat>` HTML element, setting the `connect` URL for sending images, specifying the output `files.format`, positioning the camera `button`, and applying a style to the camera `modalContainerStyle`.

```html
<deep-chat
  camera='{
    "connect": {"url": "https://customapi.com/image-from-camera"},
    "files": {"format": "png"},
    "button": {"position": "outside-left"},
    "modalContainerStyle": {"borderRadius": "5px"}
  }'
></deep-chat>
```

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

### Example Server Status Messages (Text)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/connect.mdx

Example text showing a sequence of messages that a server might send to update the status bubble in the DeepChat component.

```text
Messages from the server:
1: {text: "Downloading...", overwrite: true}
2: {text: "Loading...", overwrite: true}
3: {text: "Processing...", overwrite: true}
4: {text: "Ready...", overwrite: true}
```

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

### Installing Deep Chat for React

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/component/README.md

Installs the official React wrapper for the Deep Chat component using npm. This is recommended when integrating Deep Chat into a React application.

```Shell
npm install deep-chat-react
```

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

### Configuring DeepChatBrowser with Dark Theme (React)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

Example demonstrating how to configure the DeepChatBrowser React component to apply a dark blue theme using inline styles and message style overrides. Includes history and streaming settings.

```jsx
connect={{stream: true}}
demo={true}
history={[
  {text: 'Hey, how are you?', role: 'user'},
  {text: 'I am doing great, thanks.', role: 'ai'},
  {text: 'What is the meaning of life?', role: 'user'},
  {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
]}
style={{
  borderRadius: '10px',
  border: 'unset',
  backgroundColor: '#292929',
}}
messageStyles={{
  default: {
    ai: {
      bubble: {backgroundColor: '#545454', color: 'white'},
    },
  },
  loading: {
    bubble: {backgroundColor: '#545454', color: 'white'},
  },
}}
textInput={{
  styles: {
    container: {
      backgroundColor: '#666666',
      border: 'unset',
      color: '#e8e8e8',
    },
  },
  placeholder: {text: 'Insert your question here...', style: {color: '#bcbcbc'}},
}}
submitButtonStyles={{
  submit: {
    container: {
      default: {
        bottom: '0.7rem',
      },
    },
    svg: {
      styles: {
        default: {
          filter:
            'brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)',
        },
      },
    },
  },
}}
auxiliaryStyle="
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background-color: unset;
}
"
```

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

### Configuring Speech-to-Text Commands in HTML (Full Example)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/speech.mdx

This snippet provides a more complete example of configuring the `speechToText` commands for the `<deep-chat>` HTML element. It includes the same command definitions as the sample but also adds `introMessage`, `style`, and `demo` attributes to the component for a functional demonstration.

```HTML
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<deep-chat
  speechToText='{
    "commands": {
      "stop": "stop",
      "pause": "pause",
      "resume": "resume",
      "removeAllText": "remove text",
      "submit": "submit",
      "commandMode": "command",
      "settings": {
        "substrings": true,
        "caseSensitive": false
  }}}'
  introMessage='{"text": "Click the microphone to start transcribing your speech. Command mode activation phrase is `command`."}'
  style="border-radius: 8px"
  demo="true"
></deep-chat>
```

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

### Configuring Deep Chat Connection Options with JSON

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/examples/design.mdx

This snippet shows a simple JSON object for the 'connect' attribute to configure connection options. It enables streaming responses by setting the 'stream' property to true.

```JSON
{"stream": true}
```

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

### Configuring Deep Chat with direct OpenAI connection (HTML)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/directConnection.mdx

Demonstrates configuring the Deep Chat component to connect directly to the OpenAI API using the `directConnection` property and providing a placeholder `key`. It also includes a `system_prompt` configuration for the chat. This setup is intended for prototyping only and should not be used in production.

```HTML
<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
></deep-chat>
```

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

### Configure OpenAI Realtime Loading in HTML (Sample)

Source: https://github.com/ovidijusparsiunas/active-chat/blob/main/website/docs/docs/directConnection/OpenAI/OpenAIRealtime.mdx

Illustrates how to configure a custom HTML loading spinner and its style using the `directConnection` attribute on the `<deep-chat>` custom element in a basic HTML setup.

```HTML
<deep-chat
  directConnection='{
    "openAI": {
      "realtime": {
        "loading": {
          "html": "<div class=\"lds-ripple\"><div></div><div></div></div>",
          "style": {"top": "20px"}
      }}}}
'></deep-chat>
```