Skip to main content

Messages

Properties related to messages.

history​

Messages that are pre-populated when the chat loads up. Use loadHistory to load messages asynchronously.

Example​

<deep-chat
  history='[
    {"text": "Show me a modern city", "role": "user"},
    {"files": [{"src": "path-to-file.jpeg", "type": "image"}], "role": "ai"},
    {"text": "Whats on your mind?", "role": "user"},
    {"text": "Peace and tranquility", "role": "ai"}
  ]'
></deep-chat>

browserStorage​

  • Type: true | {
         key?: string,
         maxMessages?: number,
         textInput?: boolean,
         scrollHeight?: boolean,
         clear?: () => void
    }

  • Default: {key: "deep-chat-storage", maxMessages: 1000, textInput: false}

Automatically store message history in the browser's local storage for future sessions. You can enable this by setting the value to true or by defining an object with the following properties:
key is the storage key used to identify the stored message history in your browser.
maxMessages is the maximum number of messages that can be stored.
textInput is used to toggle whether the text input is stored.
scrollHeight restores the previous session's scroll height.
clear is a function used to clear the storage.

info

clear is automatically assigned and does not need to be defined. To use it, the browserStorage property must be an object and not a boolean (using browserStorage: {} is fine).

Example​

<deep-chat browserStorage='{"maxMessages": 10}'></deep-chat>;

// to use the clear function first retrieve element reference via your framework of choice
chatElementRef.browserStorage.clear();
tip

If you want the storage to be cleared on app load, use localStorage.removeItem("key-name") in your code.

introMessage​

  • Type: {text?: string, html?: string} | Array

Initial ai message that is displayed when the chat is loaded. It is different to history as it will not trigger the onMessage listener, will not be part of the returned messages when getMessages is called and is not taken into consideration when calculating requestBodyLimits.
html is used to render custom code and can be coupled with a deep-chat-temporary-message class to make this message disappear after a new one is added.
This can either be defined as an object for one message, or as an array for multiple ones.

Example​

<deep-chat introMessage='{"text": "Hi I am your assistant, ask me anything!"}'></deep-chat>

avatars​

Add avatars beside messages. You can enable this by setting the value to true or by defining an object with Avatar properties. The default property is applied to all roles. custom roles (e.g. "bob") use ai styling by default.

Example​

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

Avatar​

This object is used to configure avatars that are displayed beside messages.
src is the path to an avatar image file.
avatar property is used to configure the avatar element's styling.
container is used to style the element that encapsulates the avatar element.
position defines which side of the message the avatar is going to be displayed on.

Example​

<deep-chat
  avatars='{
    "default": {"styles": {"avatar": {"height": "30px", "width": "30px"}, "container": {"marginTop": "8px"}}},
    "ai": {"src": "path-to-file.svg", "styles": {"avatar": {"marginLeft": "-3px"}}},
    "bob": {"src": "path-to-file.png", "styles": {"avatar": {"borderRadius": "15px"}}}
  }'
></deep-chat>

names​

Add names beside messages. You can enable this by setting the value to true or by defining an object with Name properties. The default property is applied to all roles. custom roles (e.g. "bob") use ai styling by default.

Example​

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

Name​

  • Type: {
         text?: string,
         style?: CustomStyle,
         position?: "start" | "end"
    }

This object is used to configure names that are displayed beside messages.
text is the string used for the name.
style is used to define the style of the name element.
position defines which side of the message the name is going to be displayed.

Example​

<deep-chat
  names='{
    "default": {"style": {"fontSize": "18px", "marginTop": "14px", "width": "32px"}},
    "ai": {"text": "You"},
    "user": {"text": "Me"},
    "Bob": {"style": {"color": "green"}}}'
></deep-chat>

displayLoadingBubble​

  • Type: boolean | {toggle: (config?: LoadingToggleConfig) => void}
  • Default: true

LoadingToggleConfig​

Define if the loading bubble should be displayed.
When using the toggle function the loading bubble will not be displayed until called first and only hide when it is called again with no arguments e.g. toggle(). Calling it with the LoadingToggleConfig object (e.g. toggle({...})) will display/update the loading bubble with the defined contents. More info here.
In LoadingToggleConfig the role property is useful for setting the avatars or names associated with it.

Example​

<deep-chat displayLoadingBubble="false"></deep-chat>
tip

When toggle is defined we recommend using onMessage/interceprots to help display the loading bubble.

scrollButton​

  • Type: true | {
         styles?: StatefulStyles,
         smoothScroll?: boolean
         scrollDelta?: number
         content?: string
    }

  • Default: {smoothScroll: true, scrollDelta: 80}

Display a scroll down button when the chat has scrolled up. Enable this by setting the value to true or by defining an object with the following properties:
styles is used to configure the button appearance.
smoothScroll toggles animation when scrolling down. content is a html string used to customize the button.
scrollDelta is the number of pixels scroll scrolled upwards before the button is displayed.

Simple Example​

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

Arrow Example​

// It is simpler to define longer content strings in JavaScript
chatElementRef.scrollButton = {
  content: `
    <svg width="16" height="12" viewBox="0 0 24 12" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 4 L12 12 L22 4"
        fill="none"
        stroke="currentColor"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"/>
    </svg>`,
};

hiddenMessages​

  • Type: true | {
         styles?: StatefulStyles,
         onUpdate?: (content: string, number: number) => string,
         clickScroll?: "first" | "last"
         smoothScroll?: boolean
    }

  • Default: {smoothScroll: true}

Display an indicator when there are new messages not visible in the chat view. Enable this by setting the value to true or by defining an object with the following properties:
styles is used to configure the indicator appearance.
onUpdate is a function used to customize the indicator that is triggered when there is a new hidden message. content is a html string and number is the number of hidden messages. The function expects to return a html string.
clickScroll determines the scroll behavior when the indicator is clicked - "first" scrolls to the first hidden message, "last" scrolls to the bottom.
smoothScroll toggles animation for scrolling down.

Simple Example​

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

Arrow Example​

// When using onUpdate - define it in JavaScript
chatElementRef.hiddenMessages = {
  styles: {
    default: {borderRadius: '50%', width: '1.4rem', height: '1.4rem', left: 'unset', right: '10px'},
  },
  onUpdate: (content, number) => {
    return `<span style="font-size: 20px; cursor: pointer;">&darr;</span>`;
  },
};

errorMessages​

  • Type: {
         displayServiceErrorMessages?: boolean,
         overrides?: {
             default?: string,
             service?: string,
             speechToText?: string
    }}

  • Default: {displayServiceErrorMessages: false, overrides: {default: "Error, please try again."}}

Deep Chat automatically displays an error message when something goes wrong. This object is used to control what the message will contain.
displayServiceErrorMessages is used to display the full error message that has been returned from the service.
overrides is used to overwrite the error message text based on what has caused it: default is used for any kind of error, service is for communication with the target service and speechToText is when there is a problem using the speechToText functionality.

Example​

<deep-chat
  errorMessages='{
    "overrides": {
      "default": "Default error :(",
      "service": "Target service error!",
      "speechToText": "Speech to text microphone error!"
    }
  }'
></deep-chat>

maxVisibleMessages​

  • Type: number
  • Default: 4000

Maximum number of messages that can be displayed in the chat.
This is used to prevent browser memory overflow.

Example​

<deep-chat maxVisibleMessages="4"></deep-chat>

Types​

Shared object property types related to messages:

MessageContent​

Object format used to encapsulate a message within the chat.
role defines the message sender. If not set it is automatically regarded as "ai".
text is string content for a textual message. It uses Markdown syntax to render the message accordingly which is useful for displaying code snippets, paragraphs and more. See this playground for reference.
html is a string that defines the markup for custom elements.
files is an array that encapsulates details on the response files.
custom encapsulates any custom data.

Example​

<deep-chat
  history='[
    {"files": [{"src": "path-to-image.jpeg", "type": "image"}], "role": "user"},
    {"text": "A nice image of a yellow bird on a branch.", "role": "ai", "custom": {"id": 2}}
  ]'
></deep-chat>

MessageRole​

  • Type: "ai" | "user" | [custom]

Message sender.
"user" represents messages sent out from the chat and "ai" are messages received from a service.
You can also use custom roles which represent other entities such as agents ("ai-1"/"ai-2") or users in a group chat ("bob"/"ross"). You can style them using messageStyles, avatars and names properties.

MessageFile​

Format that defines the details of a file.
name is used to display the file name inside the message bubble (if not image/gif/audio).
src is either the url path to the file location or the base64 encoding as a string (make sure to use the correct type prefix e.g: "data:(type);base64,").
The component will automatically try to infer the file type from the src property so that it can render its media correctly, however you can help it by setting the type.
ref is the actual file's reference. It is only included in onMessage events.

Example​

<deep-chat
  history='[
    {"role": "user", "files": [
        {"src": "path-to-file.jpeg", "type": "image"},
        {"src": "data:image/gif;base64,R0lGODlh4A...", "type": "image"},
        {"src": "path-to-file.wav", "type": "audio"},
        {"name": "placeholder.exe"},
        {"src": "path-to-file", "name": "hello-world.txt", "type": "file"}
  ]}]'
></deep-chat>
info

Files with "image" or "any" types that contain a src property as a url will have their bubble set as a hyperlink.

MessageFileType​

  • Type: "image" | "audio" | "any"

Type of a file stored inside a message. "any" is the default type.

Code messages​

By default, text messages containing code will be rendered with white text in a dark background. In order to highlight the code, you will need to add an external module called highligt.js. Check out external module EXAMPLES to find multiple ways of how you can add it to your project.

Example​

<deep-chat
  history='[
    {
      "text": "```java\nwhile (i < 5) {\n console.log(\"hi\");\n i+= 1;\n}\n```",
      "role": "ai"
    }
  ]'
></deep-chat>