Design
Examples to help you get started in styling your Deep Chat component.
ChatGPT
This example simulates the styling used in ChatGPT. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or
set the avatars property to true.
Bard
Simulation of the styling used in Google Bard. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or
set the avatars property to true.
Bing
Simulation of the styling used in Bing Chat.
iMessage
Chat style that uses the iMessage SMS theme.
Blue
A blue color theme that uses a background image.
Lo-fi
A blue and purple theme that uses an image background.
Red
A red color flavour. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or
set the avatars property to true.
Violet
A violet color theme that uses a squared border styling approach.
Dark blue
Dark blue color variation that is suitable for a dark screen mode.
Dark Orange
Dark orange color variation that is suitable for a dark screen mode.
Grouped messages
Messages are grouped by the role their role. The styling is set via the deep-chat-top-message, deep-chat-middle-message and deep-chat-bottom-message classes
using the auxiliaryStyle property.
Full width input
A simple text input area that covers the full width of the chat component.