sidebar_position |
---|
0 |
Examples to help you get started in styling your Deep Chat component.
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.
import ComponentContainer from '@site/src/components/table/componentContainer'; import DeepChatBrowser from '@site/src/components/table/deepChatBrowser'; import CodeToggle from '@site/src/components/toggle/codeToggle'; import LineBreak from '@site/src/components/markdown/lineBreak'; import BrowserOnly from '@docusaurus/BrowserOnly'; import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs';
{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}
', styles: { default: { width: '1.3em', marginTop: '0.15em', filter: 'brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)', }, }, }, }, loading: { container: { default: {backgroundColor: 'white'}, }, svg: { content: ' ', styles: { default: { filter: 'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)', }, }, }, }, stop: { container: { default: {backgroundColor: 'white'}, hover: {backgroundColor: '#dadada52'}, }, svg: { content: ' ', styles: { default: { width: '0.95em', marginTop: '0.32em', filter: 'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)', }, }, }, }, }} textInput={{ placeholder: {text: 'Send a message'}, }} ><!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px"
messageStyles='{
"default": {
"shared": {
"bubble": {
"maxWidth": "100%", "backgroundColor": "unset", "marginTop": "10px", "marginBottom": "10px"}},
"user": {
"bubble": {
"marginLeft": "0px", "color": "black"}},
"ai": {
"outerContainer": {
"backgroundColor": "rgba(247,247,248)", "borderTop": "1px solid rgba(0,0,0,.1)", "borderBottom": "1px solid rgba(0,0,0,.1)"
}
}
}
}'
avatars='{
"default": {"styles": {"position": "left"}},
"ai": {"src": "path-to-icon.png"}
}'
submitButtonStyles='{
"submit": {
"container": {
"default": {"backgroundColor": "#19c37d"},
"hover": {"backgroundColor": "#0bab69"},
"click": {"backgroundColor": "#068e56"}
},
"svg": {
"content": "<?xml version=\"1.0\" ?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"> <g> <path d=\"M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z\"> </path> </g> </svg>",
"styles": {
"default": {
"width": "1.3em",
"marginTop": "0.15em",
"filter": "brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)"
}
}
}
},
"loading": {
"container": {"default": {"backgroundColor": "white"}},
"svg": {
"styles": {
"default": {"filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"}
}
}
},
"stop": {
"container": {
"default": {"backgroundColor": "white"},
"hover": {"backgroundColor": "#dadada52"}
},
"svg": {
"content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"> <rect width=\"24\" height=\"24\" rx=\"4\" ry=\"4\" /> </svg>",
"styles": {
"default": {
"width": "0.95em",
"marginTop": "0.32em",
"filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"}
}
}
}
}'
textInput='{"placeholder": {"text": "Send a message"}}'
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
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.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; border-color: #dcdcdc; background-color: #f3f6fc"
textInput='{
"styles": {
"container": {"borderRadius": "20px", "border": "1px solid #969696", "boxShadow": "unset", "width": "78%", "marginLeft": "-15px"},
"text": {"padding": "10px", "paddingLeft": "15px", "paddingRight": "34px"}
},
"placeholder": {"text": "Enter a prompt here", "style": {"color": "#bcbcbc"}}
}'
messageStyles='{
"default": {
"shared": {"bubble": {"maxWidth": "100%", "backgroundColor": "unset", "marginTop": "10px", "marginBottom": "10px"}},
"user": {"bubble": {"marginLeft": "0px", "color": "black"}},
"ai": {"innerContainer": {"borderRadius": "15px", "backgroundColor": "white"}}
}
}'
avatars='{
"default": {
"styles": {"position": "left", "container": {"marginLeft": "12px", "marginRight": "5px"}}
},
"ai": {"src": "path-to-icon.png", "styles": {"position": "left", "avatar": {"paddingTop": "6px"}}}
}'
speechToText='{
"button": {
"default": {
"container": {"default": {"bottom": "1em", "right": "0.6em", "borderRadius": "20px", "width": "1.9em", "height": "1.9em"}},
"svg": {"styles": {"default": {"bottom": "0.35em", "left": "0.35em"}}}
},
"position": "inside-right"
}
}'
submitButtonStyles='{
"position": "outside-right",
"submit": {
"container": {
"default": {"bottom": "0.9em", "borderRadius": "25px", "padding": "6px 5px 4px", "backgroundColor": "#f3f6fc"},
"hover": {"backgroundColor": "#b0deff4f"},
"click": {"backgroundColor": "#b0deffb5"}
},
"svg": {
"content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z\"/></svg>",
"styles": {
"default": {
"width": "1.5em",
"filter": "brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)"
}
}
}
},
"loading": {
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
}
}
}
},
"stop": {
"container": {"hover": {"backgroundColor": "#ededed"}},
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)"
}
}
}
}
}'
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
Simulation of the styling used in Bing Chat.
', styles: { default: { width: '1.5em', filter: 'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)', }, }, }, }, loading: { svg: { content: ' ', styles: { default: { filter: 'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)', }, }, }, }, stop: { container: { hover: {backgroundColor: '#ededed94'}, }, svg: { content: ' ', styles: { default: { filter: 'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)', }, }, }, }, }} ><!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; border-color: #e4e4e4; background: linear-gradient(90deg, rgb(239, 242, 247) 0%, 7.60286%, rgb(237, 240, 249) 15.2057%, 20.7513%, rgb(235, 239, 248) 26.297%, 27.6386%, rgb(235, 239, 248) 28.9803%, 38.2826%, rgb(231, 237, 249) 47.585%, 48.1216%, rgb(230, 236, 250) 48.6583%, 53.1306%, rgb(228, 236, 249) 57.6029%, 61.5385%, rgb(227, 234, 250) 65.4741%, 68.7835%, rgb(222, 234, 250) 72.093%, 75.7603%, rgb(219, 230, 248) 79.4275%, 82.8265%, rgb(216, 229, 248) 86.2254%, 87.8354%, rgb(213, 228, 249) 89.4454%, 91.8605%, rgb(210, 226, 249) 94.2755%, 95.4383%, rgb(209, 225, 248) 96.6011%, 98.3005%, rgb(208, 224, 247) 100%)"
textInput='{
"styles": {
"container": {
"borderRadius": "20px",
"border": "unset",
"width": "78%",
"marginLeft": "-15px",
"boxShadow": "0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)"
},
"text": {"padding": "10px", "paddingLeft": "15px", "paddingRight": "34px"}
},
"placeholder": {"text": "Ask me anything...", "style": {"color": "#606060"}}
}'
messageStyles='{
"default": {
"shared": {
"bubble": {
"backgroundColor": "unset",
"marginTop": "10px",
"marginBottom": "10px",
"boxShadow": "0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)"
}
},
"user": {
"bubble": {
"background": "linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)"
}
},
"ai": {"bubble": {"background": "rgba(255,255,255,0.7)"}}
}
}'
microphone='{
"button": {
"default": {
"container": {"default": {"bottom": "1em", "right": "0.6em", "borderRadius": "20px", "width": "1.9em", "height": "1.9em"}},
"svg": {"styles": {"default": {"bottom": "0.35em", "left": "0.35em"}}}
},
"position": "inside-right"
}
}'
submitButtonStyles='{
"position": "outside-right",
"submit": {
"container": {
"default": {"bottom": "0.8em", "borderRadius": "25px", "padding": "6px 5px 4px", "backgroundColor": "unset"},
"hover": {"backgroundColor": "#b0deff4f"},
"click": {"backgroundColor": "#b0deffb5"}
},
"svg": {
"content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z\"/></svg>",
"styles": {
"default": {
"width": "1.5em",
"filter":
"brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)"
}
}
}
},
"loading": {
"svg": {
"styles": {
"default": {
"filter":
"brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
}
}
}
},
"stop": {
"container": {"hover": {"backgroundColor": "#ededed94"}},
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
}
}
}
}
}'
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
Chat style that uses the iMessage SMS theme.
`, styles: { default: { filter: 'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)', transform: 'scale(0.95)', }, }, }, }, loading: { svg: { content: ` `, }, }, stop: { svg: { content: ` `, }, }, }} textInput={{ styles: { container: { boxShadow: 'none', borderRadius: '1em', border: '1px solid rgba(0,0,0,0.2)', }, text: { padding: '0.4em 0.8em', paddingRight: '2.5em', }, }, }} images={true} camera={{button: {position: 'dropup-menu'}}} dropupStyles={{ button: { styles: { container: { default: { width: '1.6em', height: '1.6em', borderRadius: '25px', backgroundColor: '#8282821a', }, }, svg: { styles: { default: { width: '1em', left: '5px', top: '0.2em', filter: 'brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)', }, }, content: ` `, }, }, }, }} attachmentContainerStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.6)', borderRadius: '5px 5px 0 0', border: '1px solid rgba(0,0,0,0.2)', top: '-2.6em', height: '4em', }} ><!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; font-size: 16px; font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"
messageStyles='{
"default": {
"shared": {
"bubble": {
"maxWidth": "75%",
"borderRadius": "1em",
"padding": ".42em .7em",
"fontSize": "15px"
}
},
"user": {"bubble": {"backgroundColor": "#00c82a"}}
},
"loading": {"bubble": {"padding": "0.6em 0.75em 0.6em 1.3em"}}
}'
submitButtonStyles='{
"submit": {
"container": {
"default": {
"width": "0.95em",
"height": "0.95em",
"justifyContent": "center",
"display": "flex",
"borderRadius": "25px",
"padding": "0.3em",
"backgroundColor": "#00c82a"
}
},
"svg": {
"content": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 115.4 122.88\"><path d=\"M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z\"/></svg>",
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)",
"transform": "scale(0.95)"
}
}
}
}
}'
textInput='{
"styles": {
"container": {
"boxShadow": "none",
"borderRadius": "1em",
"border": "1px solid rgba(0,0,0,0.2)"
},
"text": {
"padding": "0.4em 0.8em",
"paddingRight": "2.5em"
}
}
}'
images="true"
camera='{"button": {"position": "dropup-menu"}}'
dropupStyles='{
"button": {
"styles": {
"container": {
"default": {
"width": "1.6em",
"height": "1.6em",
"borderRadius": "25px",
"backgroundColor": "#8282821a"
}
},
"svg": {
"styles": {
"default": {
"width": "1em",
"left": "5px",
"top": "0.2em",
"filter": "brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)"
}
},
"content": "<?xml version=\"1.0\" encoding=\"utf-8\"?><svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z\"/></svg>"
}
}
}
}'
attachmentContainerStyle='{
"backgroundColor": "rgba(255, 255, 255, 0.6)",
"borderRadius": "5px 5px 0 0",
"border": "1px solid rgba(0,0,0,0.2)",
"top": "-2.6em",
"height": "4em"
}'
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
A blue color theme that uses a background image.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; border: unset; background-image: url('path-to-image.jpg')"
messageStyles='{
"default": {
"user": {
"bubble": {"backgroundColor": "#2670ff"}},
"ai": {"bubble": {"backgroundColor": "#004f97", "color": "white"}}
}}'
submitButtonStyles='{
"submit": {
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(60%) sepia(79%) saturate(643%) hue-rotate(185deg) brightness(102%) contrast(100%)"
}
}
}
}
}'
textInput='{
"styles": {
"container": {
"backgroundColor": "#004f97",
"color": "white",
"boxShadow": "unset"
}
},
"placeholder": {"style": {"color": "#d1d1d1"}}
}'
auxiliaryStyle="
::-webkit-scrollbar-thumb {
background-color: #0174db;
}
::-webkit-scrollbar-track {
background-color: unset;
}"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
A blue and purple theme that uses an image background.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; border: unset; background-image: url('path-to-image.jpg')"
messageStyles='{
"default": {
"user": {
"bubble": {
"background": "linear-gradient(90deg, rgb(225 37 255) 0%, rgb(161, 99, 233) 100%)",
"color": "white"
}
},
"ai": {
"bubble": {"background": "linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)", "color": "white"}
}
},
"loading": {
"bubble": {
"background": "linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)",
"color": "white"
}
}
}'
textInput='{
"styles": {
"container": {
"backgroundColor": "rgb(239 245 255)",
"color": "#0d008d"
}
}
}'
submitButtonStyles='{
"submit": {
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(26%) sepia(95%) saturate(6989%) hue-rotate(288deg) brightness(107%) contrast(122%)"
}
}
}
}
}'
auxiliaryStyle="
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #54a7ff;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background-color: unset;
}"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
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.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
messageStyles='{"default": {"user": {"bubble": {"backgroundColor": "#ff2020"}}}}'
avatars='{"ai": {"src": "path-to-icon.png"}}'
submitButtonStyles='{
"submit": {
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)"
}
}
}
}
}'
textInput='{
"styles": {
"container": {
"border": "1px solid #ffd9d9",
"backgroundColor": "#fffcfc"
}
},
"placeholder": {"text": "Insert your question here..."}
}'
auxiliaryStyle="
::-webkit-scrollbar-thumb {
background-color: red;
}"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
A violet color theme that uses a squared border styling approach.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px"
messageStyles='{
"default": {
"shared": {"bubble": {"borderRadius": "0px"}},
"user": {"bubble": {"backgroundColor": "#6c00ff"}}
}}'
avatars="true"
inputAreaStyle='{"backgroundColor": "#eeeeee"}'
textInput='{
"styles": {
"container": {
"backgroundColor": "white",
"borderRadius": "0px",
"boxShadow": "unset",
"width": "70%",
"marginLeft": "-40px"
}
}
}'
submitButtonStyles='{
"position": "outside-right",
"submit": {
"container": {
"default": {
"backgroundColor": "#5900ff",
"marginBottom": "0.1em",
"marginLeft": "10px",
"borderRadius": "0px"
},
"hover": {"backgroundColor": "#4d00dc"},
"click": {"backgroundColor": "#3b00a8"}
},
"text": {
"content": "Send",
"styles": {"default": {"color": "white", "height": "1.78em", "width": "3em", "fontSize": "0.95em"}}
}
},
"loading": {"container": {"default": {"backgroundColor": "#afafaf"}}},
"stop": {
"container": {
"default": {"backgroundColor": "#919191"},
"hover": {"backgroundColor": "#8c8c8c"},
"click": {"backgroundColor": "#818181"}
},
"text": {"content": "Stop"}
},
"disabled": {"container": {"default": {"backgroundColor": "#afafaf"}}}
}'
auxiliaryStyle="
::-webkit-scrollbar-thumb {
background-color: #5900ff;
}"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
Dark blue color variation that is suitable for a dark screen mode.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; border: unset; background-color: #292929"
messageStyles='{
"default": {
"ai": {"bubble": {"backgroundColor": "#545454", "color": "white"}}
},
"loading": {
"bubble": {"backgroundColor": "#545454", "color": "white"}
}
}'
textInput='{
"styles": {
"container": {
"backgroundColor": "#666666",
"border": "unset",
"color": "#e8e8e8"
}
},
"placeholder": {"text": "Insert your question here...", "style": {"color": "#bcbcbc"}}
}'
submitButtonStyles='{
"submit": {
"container": {
"default": {"bottom": "0.7rem"}
},
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)"
}
}
}
}
}'
auxiliaryStyle="
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: grey;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background-color: unset;
}"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
Dark orange color variation that is suitable for a dark screen mode.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px; border: unset; background-color: #292929"
messageStyles='{
"default": {
"ai": {
"bubble": {
"backgroundColor": "#4a4e59",
"color": "white"
}
},
"user": {
"bubble": {
"background": "linear-gradient(180deg, rgba(255,166,0,1) 0%, rgba(225,71,71,1) 100%)",
"color": "white"
}
}
},
"loading": {
"bubble": {"backgroundColor": "#4a4e59", "color": "white"}
}
}'
textInput='{
"styles": {
"container": {
"backgroundColor": "#666666",
"border": "unset",
"color": "#e8e8e8"
}
},
"placeholder": {"text": "Insert your question here...", "style": {"color": "#bcbcbc"}}
}'
submitButtonStyles='{
"submit": {
"container": {
"default": {
"bottom": "0.7rem"
}
},
"svg": {
"styles": {
"default": {
"filter": "brightness(0) saturate(100%) invert(38%) sepia(100%) saturate(577%) hue-rotate(343deg) brightness(100%) contrast(103%)"
}
}
}
}
}'
auxiliaryStyle="
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: grey;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background-color: unset;
}"
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>
A simple text input area that covers the full width of the chat component.
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->
<deep-chat
style="border-radius: 10px"
textInput='{
"styles": {
"container": {
"width": "100%",
"margin": "0",
"border": "unset",
"borderTop": "1px solid #d5d5d5",
"borderRadius": "0px",
"boxShadow": "unset"
},
"text": {
"fontSize": "1.05em",
"paddingTop": "11px",
"paddingBottom": "13px",
"paddingLeft": "12px",
"paddingRight": "2.4em"
}
},
"placeholder": {"text": "Type a message...", "style": {"color": "#bcbcbc"}}
}'
submitButtonStyles='{
"submit": {
"container": {
"default": {
"transform": "scale(1.21)",
"marginBottom": "-3px",
"marginRight": "0.4em"
}
}
}
}'
history='[
{"text": "Hey, how are you?", "role": "user"},
{"text": "I am doing great, thanks.", "role": "ai"},
{"text": "What is the meaning of life?", "role": "user"},
{"text": "Seeking fulfillment and personal growth.", "role": "ai"}
]'
demo="true"
connect='{"stream": true}'
></deep-chat>