Skip to main content

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,
         displayLoadingBubble?: boolean,
         displayFileAttachmentContainer?: boolean,
         displayErrors?: {
             default?: boolean,
             service?: boolean,
             speechToText?: 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:
displayLoadingBubble is used to display the loading bubble.
displayFileAttachmentContainer is used to display the element that encapsulates all of the files to be sent on the next message.
displayErrors is used to display error messages; for the component via default, an API error via service and a speech to text issue via speechToText. This is mainly used to showcase the override capabilities in errorMessages.

Base Example​

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

Custom Response Example​

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};
  },
};

Elements Example​

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