Props

You can pass the following props to the component: | Prop | Type | Default | Description | |-----------------|------------------|------------------|-----------------------------------------------------------------------------| | embedded | boolean | true | If true, the component will be rendered as an embedded chatbot. | | darkMode | boolean | false | If true, the component will be rendered in dark mode. | | products | string[] | ["VIQ", "HDS"] | An array of products to select from (in non-embedded mode only). | | defaultProduct| string | "VIQ" | The default product selected. |

Building

• To build for VIQ-plugin, we need to have everything in a single file (JS + CSS). To do so, please run npm run build:single. The output shall be found in the folder webc-single-file/.
• To build for VS Code, please run npm run build:vscode. The output shall be found in the folder webc-vscode/. ⚠️ Make sure to import the custom css snippet @layer ready-for-vscode found in custom-theme.css for the styling to work.

Colors and Theming

Just override these css variables to change the theme:

• --llamda-aside-bg
• --llamda-header-txt
• --llamda-header-bg
• --llamda-bot-msg-bg
• --llamda-bot-msg-txt
• --llamda-user-msg-bg
• --llamda-user-msg-txt
• --llamda-chat-bg
• --llamda-avatar-bg
• --llamda-avatar-txt

> Example (Monokai Theme):

:root {
  --llamda-aside-bg: #363636;
  --llamda-header-txt: #dddddd;
  --llamda-header-bg: #1f1f1f;
  --llamda-bot-msg-bg: #1f1f1f;
  --llamda-bot-msg-txt: #dddddd;
  --llamda-user-msg-bg: #1f1f1f;
  --llamda-user-msg-txt: #dddddd;
  --llamda-chat-bg: #161616;
  --llamda-avatar-bg: #dddddd;
  --llamda-avatar-txt: #1f1f1f;
}

> Example (VS Code compatible):

:root {
  --llamda-aside-bg: var(--vscode-badge-background);
  --llamda-header-txt: var(--vscode-editor-foreground);
  --llamda-header-bg: var(--vscode-editor-background);
  --llamda-bot-msg-bg: var(--vscode-editor-background);
  --llamda-bot-msg-txt: var(--vscode-editor-foreground);
  --llamda-user-msg-bg: var(--vscode-editor-background);
  --llamda-user-msg-txt: var(--vscode-editor-foreground);
  --llamda-chat-bg: var(--vscode-editorPane-background);
  --llamda-avatar-bg: var(--vscode-editor-foreground);
  --llamda-avatar-txt: var(--vscode-editor-background);
}

To build as a single file (js + css), use npm run build --mode staging