Skip to content

Files

1776 lines (1684 loc) · 53.6 KB

design.mdx

File metadata and controls

1776 lines (1684 loc) · 53.6 KB
sidebar_position
0

Design

Examples to help you get started in styling your Deep Chat component.

ChatGPT {#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.

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>

Bard {#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.

', 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: '#ededed'}, }, svg: { content: ' ', styles: { default: { filter: 'brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)', }, }, }, }, }} >
<!-- 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>

Bing {#bing}

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>

iMessage {#iMessage}

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>

Blue {#blue}

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>

Lo-fi {#lofi}

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>

Red {#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.

<!-- 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>

Violet {#violet}

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 {#darkBlue}

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 {#darkOrange}

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>

Full width input {#fullWidthInput}

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>