Skip to main content

Messages

Properties related to messages.

initialMessages​

Messages that are pre-populated when the chat loads up.

Example​

<deep-chat
  initialMessages='[
    {"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>

introMessage​

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

Initial ai message that is displayed when the chat is loaded. It is different to initialMessages as it will not trigger the onNewMessage listener, will not be part of the returned messages when the getMessages method 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.

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?: "left" | "right"
    }

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 whether the loading bubble should be displayed when waiting for a message response. If set to false - the submit button will automatically have a loading animation.

Example​

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

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>

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.
files is an array that encapsulates details on the response files.
html is a string that defines the markup for custom elements.

Example​

<deep-chat
  initialMessages='[
    {"files": [{"src": "path-to-image.jpeg", "type": "image"}], "role": "user"},
    {"text": "This is a nice image of a yellow bird on a branch.", "role": "ai"}
  ]'
></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 onNewMessage events.

Example​

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