Messages
Properties related to messages.
history
- Type:
MessageContent[]
Messages that are pre-populated when the chat loads up.
Example
- Sample code
- Full code
<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>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<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"}
]'
style="height: 370px; border-radius: 8px"
demo="true"
></deep-chat>
introMessage
- Type: {
text?: string
,html?: string
}
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.
Example
- Sample code
- Full code
<deep-chat introMessage='{"text": "Hi I am your assistant, ask me anything!"}'></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
introMessage='{"text": "Hi I am your assistant, ask me anything!"}'
demo="true"
style="border-radius: 8px"
></deep-chat>
avatars
- Type:
true
| {default?: Avatar
,ai?: Avatar
,user?: Avatar
,[custom]?: Avatar
}
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
- Sample code
- Full code
<deep-chat avatars="true"></deep-chat>
<!-- 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>
Avatar
- Type: {
src?: string
,
styles?: {
avatar?: CustomStyle
,
container?: CustomStyle
position?: "left" | "right"
}}
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
- Sample code
- Full code
<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>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<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"}}}
}'
history='[
{"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"
},
{
"text": "We dont laugh because we feel good, we feel good because we laugh.",
"role": "bob"
}
]'
style="border-radius: 8px"
demo="true"
></deep-chat>
names
- Type:
true
| {default?: Name
,ai?: Name
,user?: Name
,[custom]?: Name
}
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
- Sample code
- Full code
<deep-chat names="true"></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
names="true"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great!", "role": "ai"},
{"text": "Motivate me", "role": "user"},
{
"text": "Talent is a pursued interest. Anything you’re willing to practice, you can do.",
"role": "Bob"
}
]'
style="border-radius: 8px"
demo="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
- Sample code
- Full code
<deep-chat
names='{
"default": {"style": {"fontSize": "18px", "marginTop": "14px", "width": "32px"}},
"ai": {"text": "You"},
"user": {"text": "Me"},
"Bob": {"style": {"color": "green"}}}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
names='{
"default": {"style": {"fontSize": "18px", "marginTop": "14px", "width": "32px"}},
"ai": {"text": "You"},
"user": {"text": "Me"},
"Bob": {"style": {"color": "green"}}}'
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great!", "role": "ai"},
{"text": "Motivate me", "role": "user"},
{
"text": "Talent is a pursued interest. Anything you’re willing to practice, you can do.",
"role": "Bob"
}
]'
style="border-radius: 8px"
demo="true"
></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
- Sample code
- Full code
<deep-chat displayLoadingBubble="false"></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
displayLoadingBubble="false"
introMessage='{"text": "Send a new message to observe a response with no loading bubble."}'
style="border-radius: 8px"
demo="true"
></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
- Sample code
- Full code
<deep-chat
errorMessages='{
"overrides": {
"default": "Default error :(",
"service": "Target service error!",
"speechToText": "Speech to text microphone error!"
}
}'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
errorMessages='{
"overrides": {
"default": "Default error :(",
"service": "Target service error!",
"speechToText": "Speech to text microphone error!"
}
}'
style="border-radius: 8px"
demo='{"displayErrors": {"default": true, "service": true, "speechToText": true}}'
></deep-chat>
Types
Shared object property types related to messages:
MessageContent
- Type: {
role?: MessageRole
,text?: string
,files?: MessageFile[]
,html?: string
}
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
- Sample code
- Full code
<deep-chat
history='[
{"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>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
history='[
{"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"}
]'
style="border-radius: 8px"
demo="true"
></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
- Type: {
name?: string
,src?: string
,type?: MessageFileType
,ref?: File
} - Default: {name: "file", type: "any"}
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
- Sample code
- Full code
<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>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<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"}
]}]'
style="height: 370px; border-radius: 8px"
demo="true"
></deep-chat>
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
- Sample code
- Full code
<deep-chat
history='[
{
"text": "```java\nwhile (i < 5) {\n console.log(\"hi\");\n i+= 1;\n}\n```",
"role": "ai"
}
]'
></deep-chat>
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<deep-chat
history='[
{
"text": "```java\nwhile (i < 5) {\n console.log(\"hi\");\n i+= 1;\n}\n```",
"role": "ai"
}
]'
messageStyles='{
"default": {
"shared": {
"bubble": {"maxWidth": "270px"}
}
}
}'
style="border-radius: 8px"
demo="true"
></deep-chat>