Demo

This is used by default to demonstrate the component's capabilities without connecting to any APIs.

`demo`

Type: true | {
     response?: Response | (message: MessageContent) => Response,
     displayErrors?: DisplayErrors,
     displayLoading?: DemoLoading,
     displayFileAttachmentContainer?: boolean
}}

Set this to true or define an object with properties to remove the initial setup guidance message.
response is used to override the default demo response with a custom one. It can either be a Response object or a function that returns a Response object.
The following properties are used to toggle elements to showcase their design without making any user actions:
displayErrors is used to display error messages.
displayLoading is used to display various loading spinners.
displayFileAttachmentContainer is used to display the element that encapsulates all of the files to be sent on the next message.

Base Example

Sample code
Full code

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

<!-- 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>

Custom Response Example

Sample code
Full code

chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};

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

<deep-chat
  id="chat-element"
  introMessage='{"text": "Rock, Paper, Scissors! Make your guess and see who wins!"}'
  style="border-radius: 8px"
></deep-chat>

<script>
// ...other code
const chatElementRef = document.getElementById('chat-element');
chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};

Types

`DemoErrors`

Type: {default?: boolean, service?: boolean, speechToText?: boolean}

Display various error messages. This is mainly used to showcase the override capabilities in errorMessages.
default displays a default component error.
service is an API error.
speechToText is a speech to text issue error.

Sample code
Full code

<deep-chat demo='{"displayErrors": {"service": true}}'></deep-chat>

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

<deep-chat demo='{"displayErrors": {"service": true}}' style="border-radius: 8px"></deep-chat>

`DemoLoading`

Type: {
message?: boolean,
history?: {full?: boolean, small?: boolean}
}

Display various loading spinners.
message is a loading spinner inside a message bubble.
history is a loading spinner that is displayed when messages are being loading via loadHistory. full is a spinner that covers the entire chat message window on the initial load. small is displayed when there are messages already present inside the chat. If full is set to true and messages are added, the chat will automatically display the small spinner.

Sample code
Full code

<deep-chat demo='{"displayLoading": {"message": true, "history": {"small": true}}}'></deep-chat>

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

<deep-chat demo='{"displayLoading": {"message": true, "history": {"small": true}}}' style="border-radius: 8px"></deep-chat>

demo​

Base Example​

Custom Response Example​

Types​

DemoErrors​