{"id":20547283,"url":"https://github.com/theopenconversationkit/tock-vue-kit","last_synced_at":"2025-03-06T05:17:25.808Z","repository":{"id":232215374,"uuid":"783733647","full_name":"theopenconversationkit/tock-vue-kit","owner":"theopenconversationkit","description":"Vue app to embed Tock chatbots into web interfaces.","archived":false,"fork":false,"pushed_at":"2024-08-22T15:01:03.000Z","size":725,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-08-23T09:26:00.628Z","etag":null,"topics":["theopenconversationkit","tock"],"latest_commit_sha":null,"homepage":"http://doc.tock.ai/tock-vue-kit/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theopenconversationkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-08T13:17:40.000Z","updated_at":"2024-08-22T15:01:06.000Z","dependencies_parsed_at":"2024-04-15T12:58:20.675Z","dependency_job_id":"6dfb8088-549e-4285-9820-adf6a3d09cae","html_url":"https://github.com/theopenconversationkit/tock-vue-kit","commit_stats":null,"previous_names":["theopenconversationkit/tock-vue-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-vue-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-vue-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-vue-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-vue-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theopenconversationkit","download_url":"https://codeload.github.com/theopenconversationkit/tock-vue-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242150811,"owners_count":20080007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["theopenconversationkit","tock"],"created_at":"2024-11-16T02:07:15.763Z","updated_at":"2025-03-06T05:17:25.793Z","avatar_url":"https://github.com/theopenconversationkit.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tock Vue Kit\n\nA Vue 3 chat widget to easily embed [Tock](https://doc.tock.ai) into web pages or web apps.\n\n## Demo\n\nTry the Tock Vue Kit (and the Tock Vue Kit Editor) on the [demo page](https://doc.tock.ai/tock-vue-kit/)\n\n## Prerequisites\n\nRun a [Tock Bot in API mode](https://doc.tock.ai/tock/en/dev/bot-api/)\n\n## Quick Start\n\n### Basic html page integration example\n\nInclude js and css files:\n\n```html\n\u003cscript src=\"https://unpkg.com/vue@3.4/dist/vue.global.prod.js\"\u003e\u003c/script\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/tock-vue-kit@1.0.1/dist/style.css\"\n/\u003e\n\u003cscript\n  crossorigin\n  src=\"https://unpkg.com/tock-vue-kit@1.0.1/dist/tock-vue-kit.iife.js\"\n\u003e\u003c/script\u003e\n\n\u003c!-- Next line can be omitted if no Latex formula is expected in bot responses --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/katex@0.16.21/dist/katex.min.css\"\n/\u003e\n```\n\nDisplay the chat widget in desired target:\n\n```html\n\u003cdiv id=\"chat-wrapper\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  TockVueKit.renderChat(\n    document.getElementById(\"chat-wrapper\"),\n    \"\u003cTOCK_BOT_API_URL\u003e\"\n  );\n\u003c/script\u003e\n```\n\n### Vue3 3.4.29 integration example\n\nInstall the dependency:\n\n```bash\nnpm install tock-vue-kit\n```\n\nIn the desired component:\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  import { onMounted, ref } from \"vue\";\n  import \"tock-vue-kit/dist/style.css\";\n  import { renderChat } from \"tock-vue-kit\";\n\n  const chatTarget = ref\u003cHTMLElement\u003e();\n\n  onMounted(() =\u003e {\n    renderChat(chatTarget.value!, \"\u003cTOCK_BOT_API_URL\u003e\");\n  });\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv ref=\"chatTarget\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n  /* Any scoped styling... */\n\u003c/style\u003e\n\n\u003c!-- Use unscoped styling to visualy customize the Tvk widget --\u003e\n\u003cstyle\u003e\n  :root {\n    --tvk_colors_brand-hue: 214;\n    --tvk_colors_brand-lightness: 42%;\n    --tvk_colors_brand-saturation: 40%;\n    --tvk_colors_dark_neutral: white;\n    --tvk_colors_dark_text1: white;\n    --tvk_colors_dark_text2: white;\n    --tvk_wrapper_height: calc(98vh - 6em);\n  }\n\u003c/style\u003e\n```\n\nIf Latex formulas are expected in bot responses, include the katex css file as well.\n\nFor example, directly in the component :\n\n```html\n\u003cstyle lang=\"scss\"\u003e\n  @import url(\"https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css\");\n\u003c/style\u003e\n```\n\nOr by installing the library locally:\n\n```bash\nnpm install katex\n```\n\nAnd then by including the css in your imports :\n\n```bash\nimport \"katex/dist/katex.min.css\";\n```\n\n### Angular 18.1.0 integration example\n\nInstall the dependency:\n\n```bash\nnpm install tock-vue-kit\n```\n\nIn the desired component:\n\n```typescript\nimport {\n  Component,\n  ElementRef,\n  ViewChild,\n  ViewEncapsulation,\n} from \"@angular/core\";\nimport { renderChat } from \"tock-vue-kit\";\nimport \"tock-vue-kit/dist/style.css\";\n\n@Component({\n  selector: \"app-my-component\",\n  standalone: true,\n  template: `\u003cdiv #chatTarget\u003e\u003c/div\u003e`,\n  styles: `\n  :root {\n    --tvk_colors_brand-hue: 214;\n    --tvk_colors_brand-lightness: 42%;\n    --tvk_colors_brand-saturation: 40%;\n    --tvk_colors_light_background: hsl(var(--tvk_colors_brand-hue) 50% 90%);\n    --tvk_colors_dark_neutral: white;\n    --tvk_colors_dark_text1: white;\n    --tvk_colors_dark_text2: white;\n    --tvk_wrapper_height: calc(100vh - 5em);\n    --tvk_wrapper_max-height: calc(100vh - 5em);\n  }\n  `,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class MyComponentComponent {\n  @ViewChild(\"chatTarget\") chatTarget!: ElementRef\u003cHTMLDivElement\u003e;\n\n  ngAfterViewInit() {\n    renderChat(this.chatTarget.nativeElement, \"\u003cTOCK_BOT_API_URL\u003e\");\n  }\n}\n```\n\nIf Latex formulas are expected in bot responses, include the katex css file as well.\n\nFor example, by localy installing the katex library:\n\n```bash\nnpm install katex\n```\n\nAnd then including katex css file in your angular.json :\n\n```json\n\"projects\": {\n    \"YOUR_PROJECT\": {\n      ...\n      \"architect\": {\n        \"build\": {\n          ...\n          \"options\": {\n            ...\n            \"styles\": [\n              ...\n              \"node_modules/katex/dist/katex.min.css\"\n            ],\n          ...\n```\n\n### React 18.3.1 integration example\n\nInstall the dependency:\n\n```bash\nnpm install tock-vue-kit\n```\n\nIn a css file, define your visual customizations of the widget (styles.css by example):\n\n```css\n:root {\n  --tvk_colors_brand-hue: 214;\n  --tvk_colors_brand-lightness: 42%;\n  --tvk_colors_brand-saturation: 40%;\n  --tvk_colors_light_background: hsl(var(--tvk_colors_brand-hue) 50% 90%);\n  --tvk_colors_dark_neutral: white;\n  --tvk_colors_dark_text1: white;\n  --tvk_colors_dark_text2: white;\n  --tvk_wrapper_height: calc(100vh - 5em);\n  --tvk_wrapper_max-height: calc(100vh - 5em);\n}\n```\n\nFinally in the desired component:\n\n```javascript\nimport { useRef, useEffect } from \"react\";\nimport { renderChat } from \"tock-vue-kit\";\nimport \"tock-vue-kit/dist/style.css\";\nimport \"./styles.css\";\n\nfunction App() {\n  const chatTarget = useRef(null);\n\n  useEffect(() =\u003e {\n    renderChat(chatTarget.current, \"\u003cTOCK_BOT_API_URL\u003e\");\n  });\n\n  return \u003cdiv ref={chatTarget}\u003e\u003c/div\u003e;\n}\n\nexport default App;\n```\n\nIf Latex formulas are expected in bot responses, include the katex css file as well `https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css`.\n\n### Svelte 4.2.7 integration example\n\nInstall the dependency:\n\n```bash\nnpm install tock-vue-kit\n```\n\nIn the desired component:\n\n```html\n\u003cstyle\u003e\n  :root {\n    --tvk_colors_brand-hue: 214;\n    --tvk_colors_brand-lightness: 42%;\n    --tvk_colors_brand-saturation: 40%;\n    --tvk_colors_light_background: hsl(var(--tvk_colors_brand-hue) 50% 90%);\n    --tvk_colors_dark_neutral: white;\n    --tvk_colors_dark_text1: white;\n    --tvk_colors_dark_text2: white;\n    --tvk_wrapper_height: calc(98vh - 6em);\n  }\n\u003c/style\u003e\n\n\u003cscript\u003e\n  import { onMount } from \"svelte\";\n  import { renderChat } from \"tock-vue-kit\";\n  import \"tock-vue-kit/dist/style.css\";\n\n  /** @type {HTMLDivElement} */\n  let chatTarget;\n\n  onMount(() =\u003e {\n    renderChat(chatTarget, \"\u003cTOCK_BOT_API_URL\u003e\");\n  });\n\u003c/script\u003e\n\n\u003cdiv bind:this=\"{chatTarget}\"\u003e\u003c/div\u003e\n```\n\nIf Latex formulas are expected in bot responses, include the katex css file as well `https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css`.\n\n## Note on KaTeX Integration\n\nTo optimize the size of our library and cater to the diverse needs of our users, we have chosen not to include the KaTeX CSS by default. Since the display of LaTeX formulas is not a required feature for all users, this approach helps reduce the overall weight of the library.\n\nIf you need the LaTeX formula display functionality, you can easily include the KaTeX CSS in your project by adding the following line to your HTML file or importing it into your CSS:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css\"\n/\u003e\n```\n\nThis will enable the display of mathematical formulas while giving you control over the resources loaded in your application.\n\n## Render method arguments\n\n\u003e TockVueKit.renderChat([element](#element),[tockBotApiUrl](#tockBotApiUrl),[customizationOptions](#customizationOptions))\n\n#### element\n\nThe first argument of _TockVueKit.renderChat_ method is the element where to render the widget. The element must be present in the document and provided as a _HTMLElement_ reference.\n\n#### tockBotApiUrl\n\nThe second argument is the url of the Tock instance to communicate with. This can be found in Tock Studio in Settings \u003e Configurations, _Relative REST path_ field (add the hosting domain of the Tock instance before the given path).\n\n#### customizationOptions\n\nThe third argument hosts the widget's customization options. See below.\n\n## Customization options\n\nCustomization options are functional options of the widget. For visual widget customization, see [Visual customization](#Visual-customization) below.\nCustomization options are provided in the form of an object that can contain the following optional attributes:\n\n- [LocalStorage](#LocalStorage);\n- [Initialization](#Initialization);\n- [Preferences](#Preferences);\n- [Wording](#Wording);\n\n\u003e [Tock Vue Kit Editor](https://github.com/theopenconversationkit/tock-vue-kit-editor) offers an easy way to define customization options (See [demo page](https://doc.tock.ai/tock-vue-kit/), click _Editor_ switch then see _Preferences_ and _Wording_ tabs)\n\n### LocalStorage\n\nOptions relating to the persistence in _localStorage_ of messages exchanged by the user with the Tock instance :\n\n| Property name     | Description                                                                                                      | Type    | Default   |\n| ----------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | --------- |\n| enabled           | Retain conversation history in local storage                                                                     | Boolean | False     |\n| prefix            | Prefix for local storage keys allowing communication with different bots from the same domain                    | String  | undefined |\n| maxNumberMessages | Maximum number of messages to store in local storage. Passing this limit, older messages are removed of history. | Integer | 20        |\n\nExample :\n\n```Javascript\nTockVueKit.renderChat(\n  document.getElementById(\"\u003cTARGET_ELEMENT_ID\u003e\"),\n  \"\u003cTOCK_BOT_API_URL\u003e\",\n  {\n    localStorage : {\n      enabled : true,\n      prefix : 'myprefix',\n      maxNumberMessages : 15\n    }\n  }\n);\n```\n\n### Initialization\n\n| Property name  | Description                                                                                                                                                                | Type            | Default   |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------- |\n| extraHeaders   | Additional HTTP header key/value pairs to be supplied in requests. Warning : Tock server configuration required.                                                           | Key/Value pairs | undefined |\n| welcomeMessage | Initial bot message to be displayed to the user at startup. It will not be sent to the bot and will be stored in local storage, if any.                                    | String          | undefined |\n| openingMessage | Initial user message to be sent to the bot at startup to trigger a welcome sequence. It will not be displayed to the user and will not be stored in local storage, if any. | String          | undefined |\n\nExample :\n\n```Javascript\nTockVueKit.renderChat(\n  document.getElementById(\"\u003cTARGET_ELEMENT_ID\u003e\"),\n  \"\u003cTOCK_BOT_API_URL\u003e\",\n  {\n    \"initialization\": {\n      \"extraHeaders\": {\n        \"my-header-name\": \"My header value\",\n        \"other-header-name\": \"other header value\"\n      },\n      \"welcomeMessage\": \"Hi, how can i help you today ?\"\n    }\n  }\n)\n```\n\n### Preferences\n\n| Property name | Description             | Type                        | Default |\n| ------------- | ----------------------- | --------------------------- | ------- |\n| messages      | Messages options        | [Messages](#Messages)       |         |\n| questionBar   | User input area options | [QuestionBar](#QuestionBar) |         |\n\n#### Messages\n\n| Property name             | Description                                                                                                                                                                                                                                                                                                                                                              | Type                    | Default |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------- |\n| hideIfNoMessages          | Hide messages container if there is no messages to display.                                                                                                                                                                                                                                                                                                              | Boolean                 | true    |\n| clearOnNewRequest         | If true, deletes previous messages when a new user request is sent                                                                                                                                                                                                                                                                                                       | Boolean                 | false   |\n| parseBotResponsesMarkdown | If true, the text of the bot's responses is evaluated by a markown parser, transformed into html markup and then injected in dom after sanitizing. This includes syntax highlighting of code blocks and display of Latex and MathML content. If false, the textual content of the bot's responses is displayed in plain text, even if it's markdown and/or html content. | Boolean                 | true    |\n| message                   | Message options                                                                                                                                                                                                                                                                                                                                                          | [Message](#Message)     |         |\n| footNotes                 | Footnotes options                                                                                                                                                                                                                                                                                                                                                        | [FootNotes](#FootNotes) |         |\n\n##### Message\n\n| Property name    | Description                               | Type              | Default |\n| ---------------- | ----------------------------------------- | ----------------- | ------- |\n| hideUserMessages | If true, user messages are not displayed. | Boolean           | false   |\n| header           | Message header options                    | [Header](#Header) |         |\n\n###### Header\n\n| Property name | Description                     | Type              | Default |\n| ------------- | ------------------------------- | ----------------- | ------- |\n| display       | Display a header above message. | Boolean           | true    |\n| avatar        | Message header avatar options   | [Avatar](#Avatar) |         |\n| label         | Message header label options    | [Label](#Label)   |         |\n\n###### Avatar\n\n| Property name | Description                                                                       | Type                  | Default           |\n| ------------- | --------------------------------------------------------------------------------- | --------------------- | ----------------- |\n| display       | Display an avatar in message header.                                              | Boolean               | true              |\n| userIcon      | Class name of the user avatar icon (displayed only if User image is not defined). | String                | bi bi-person-fill |\n| userImage     | Image of the user avatar.                                                         | [ImageDef](#ImageDef) | undefined         |\n| botIcon       | Class name of the bot avatar icon (displayed only if Bot image is not defined).   | String                | bi bi-robot       |\n| botImage      | Image of the bot avatar.                                                          | [ImageDef](#ImageDef) | undefined         |\n\n###### Label\n\n| Property name | Description                                                                                                                                        | Type    | Default |\n| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |\n| display       | Display a label in message header (cf wording.messages.message.header.labelUser and wording.messages.message.header.labelBot for textual content). | Boolean | true    |\n\n##### FootNotes\n\nFootnotes can optionally be added to Rag messages.\n\n| Property name             | Description                                                                                                                                                                                               | Type    | Default |\n| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |\n| display                   | For RAG responses, display the sources used to generate the answer if any.                                                                                                                                | Boolean | true    |\n| requireSourcesContent     | For RAG responses, request the textual content of the source in addition to the source title and link.                                                                                                    | Boolean | false   |\n| parseContentMarkdown      | If true, the text content of footnotes is evaluated by a markown parser, transformed into html markup and then injected in dom after sanitizing. If false, content of sources is displayed in plain text. | Boolean | true    |\n| clampSourceContent        | For RAG responses with sources content, truncate the textual source content.                                                                                                                              | Boolean | true    |\n| clampSourceContentNbLines | For RAG responses with sources content, number of lines after which to truncate text.                                                                                                                     | Integer | 2       |\n| displayOnMessageSide      | For RAG responses, any sources are displayed on one side of the message response rather than directly following the response.                                                                             | Boolean | false   |\n\n#### QuestionBar\n\n| Property name           | Description                                                          | Type                          | Default |\n| ----------------------- | -------------------------------------------------------------------- | ----------------------------- | ------- |\n| clearTypedCharsOnSubmit | Whether or not the question input field should be cleared on submit. | Boolean                       | true    |\n| maxUserInputLength      | Max length of the user input message string                          | Integer                       | 500     |\n| clearHistory            | Options of clear hitsory button                                      | [clearHistory](#clearHistory) |         |\n| submit                  | Options of submit button                                             | [submit](#submit)             |         |\n\n##### clearHistory\n\n| Property name | Description                                                                          | Type                  | Default          |\n| ------------- | ------------------------------------------------------------------------------------ | --------------------- | ---------------- |\n| display       | Show the clear discussion and history button                                         | Boolean               | true             |\n| icon          | Class name of the clear history control icon (displayed only if no image is defined) | String                | bi bi-trash-fill |\n| image         | Image of the clearHistory control                                                    | [ImageDef](#ImageDef) | undefined        |\n\n##### submit\n\n| Property name | Description                                                                   | Type                  | Default         |\n| ------------- | ----------------------------------------------------------------------------- | --------------------- | --------------- |\n| icon          | Class name of the submit control icon (displayed only if no image is defined) | String                | bi bi-send-fill |\n| image         | Image of the submit control                                                   | [ImageDef](#ImageDef) | undefined       |\n\n### ImageDef\n\nOption object for providing images references.\n\n| Property name | Description                              | Type   |\n| ------------- | ---------------------------------------- | ------ |\n| width         | Width in which to display the image.     | String |\n| height        | Height in which to display the image.    | String |\n| src           | Src of the image (url or svg data image) | String |\n\nExample :\n\n```Javascript\nTockVueKit.renderChat(\n  document.getElementById(\"\u003cTARGET_ELEMENT_ID\u003e\"),\n  \"\u003cTOCK_BOT_API_URL\u003e\",\n  {\n    \"preferences\": {\n      \"messages\": {\n        \"hideIfNoMessages\": false,\n        \"message\": {\n          \"header\": {\n            \"avatar\": {\n              \"userImage\": {\n                \"src\": \"https://my-url.com/my-file.png\",\n                \"width\": \"1em\",\n                \"height\": \"1em\"\n              }\n            },\n            \"label\": {\n              \"display\": false\n            }\n          }\n        },\n        \"footNotes\": {\n          \"requireSourcesContent\": true,\n          \"clampSourceContentNbLines\": \"4\"\n        }\n      },\n      \"questionBar\": {\n        \"submit\": {\n          \"icon\": \"bi bi-arrow-right-circle-fill\"\n        }\n      }\n    }\n  }\n)\n```\n\n### Wording\n\nThe _Wording_ customization option lets you redefine all or part of the text displayed by the widget.\n\n| Property name          | Description              | Type                          | Default                                              |\n| ---------------------- | ------------------------ | ----------------------------- | ---------------------------------------------------- |\n| messages               | Messages wording         | [Messages](#Messages-1)       |                                                      |\n| questionBar            | User input area wording  | [QuestionBar](#QuestionBar-1) |                                                      |\n| connectionErrorMessage | Connection error message | String                        | An unexpected error occured. Please try again later. |\n\n#### Messages\n\n| Property name | Description     | Type                  |\n| ------------- | --------------- | --------------------- |\n| message       | Message wording | [Message](#Message-1) |\n\n##### Message\n\n| Property name | Description               | Type                      |\n| ------------- | ------------------------- | ------------------------- |\n| header        | Message header wording    | [Header](#Header-1)       |\n| footnotes     | Message footnotes wording | [Footnotes](#Footnotes-1) |\n\n###### Header\n\n| Property name | Description               | Type   | Default |\n| ------------- | ------------------------- | ------ | ------- |\n| labelUser     | Message header user label | String | You     |\n| labelBot      | Message header bot label  | String | Bot     |\n\n###### Footnotes\n\n| Property name | Description          | Type   | Default     |\n| ------------- | -------------------- | ------ | ----------- |\n| sources       | Footnotes label      | String | Sources:    |\n| showMoreLink  | Show more link label | String | \u003e Show more |\n\n#### QuestionBar\n\n| Property name         | Description                     | Type            | Default                             |\n| --------------------- | ------------------------------- | --------------- | ----------------------------------- |\n| clearHistory          | Clear history button label      | String          |                                     |\n| clearHistoryAriaLabel | Clear history button Aria label | String          | Clear discussion and history button |\n| submit                | Submit button label             | String          |                                     |\n| submitAriaLabel       | Submit button Aria label        | String          | Submit button                       |\n| input                 | Input field wording             | [Input](#Input) |                                     |\n\n##### Input\n\n| Property name | Description            | Type   | Default              |\n| ------------- | ---------------------- | ------ | -------------------- |\n| placeholder   | User input placeholder | String | Ask me a question... |\n\nExample :\n\n```Javascript\nTockVueKit.renderChat(\n  document.getElementById(\"\u003cTARGET_ELEMENT_ID\u003e\"),\n  \"\u003cTOCK_BOT_API_URL\u003e\",\n  {\n    \"wording\": {\n      \"messages\": {\n        \"message\": {\n          \"header\": {\n            \"labelUser\": \"Vous\"\n          },\n          \"footnotes\": {\n            \"sources\": \"Sources :\",\n            \"showMoreLink\": \"\u003e Voir plus\"\n          }\n        }\n      },\n      \"questionBar\": {\n        \"clearHistoryAriaLabel\": \"Effacer la discussion et l'historique\",\n        \"input\": {\n          \"placeholder\": \"Posez moi une question...\"\n        },\n        \"submitAriaLabel\": \"Bouton d'envoi\"\n      },\n      \"connectionErrorMessage\": \"Une erreur est survenue. Merci de réessayer dans quelques instants.\"\n    }\n  }\n)\n```\n\n## Visual customization\n\nMost of the css rules that shape the widget are defined by css variables.\n\nEach of these variables has a default value, which you are free to redefine according to your needs. Use your DevTools to identify the variables to overload or take a look at the [Tock Vue Kit Editor](https://github.com/theopenconversationkit/tock-vue-kit-editor) via its [demo page](https://doc.tock.ai/tock-vue-kit/).\nThe css variables are prefixed with the string “--tvk” so as not to unintentionally impact the page hosting the widget.\n\n\u003e [Tock Vue Kit Editor](https://github.com/theopenconversationkit/tock-vue-kit-editor) offers an easy way to define and export css variables customization (See [demo page](https://doc.tock.ai/tock-vue-kit/), click _Editor_ switch then see _Styling_ and _Output_ tabs)\n\nYou can redefine the desired css variables in a number of ways:\n\n### Visual customization in source\n\nRedefine desired css variables in the source of the page hosting the widget, anywhere after inclusion of the css file.\n\nExample :\n\n```Html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" /\u003e\n    \u003ctitle\u003eMy Website\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/vue@3.4\"\u003e\u003c/script\u003e\n    \u003clink href=\"node_modules/tock-vue-kit/dist/style.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript src=\"node_modules/tock-vue-kit/dist/tock-vue-kit.umd.cjs\"\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n      :root {\n        --tvk_colors_brand-hue: 214;\n        --tvk_colors_brand-lightness: 42%;\n        --tvk_colors_brand-saturation: 40%;\n        --tvk_colors_dark_neutral: white;\n        --tvk_colors_dark_text1: white;\n        --tvk_colors_dark_text2: white;\n        --tvk_wrapper_height: calc(98vh - 6em);\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain\u003e\n      \u003ch1\u003eWelcome to My Website\u003c/h1\u003e\n      \u003cdiv id=\"chat-wrapper\"\u003e\u003c/div\u003e\n    \u003c/main\u003e\n\n    \u003cscript\u003e\n      TockVueKit.renderChat(\n        document.getElementById(\"chat-wrapper\"),\n        \"\u003cTOCK_BOT_API_URL\u003e\"\n      );\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n### Visual customization in a separate css file\n\nCreate a separate css file where you redefine css variables and include this file in source, after inclusion of main css file.\n\nExample :\n\nMain html page\n\n```Html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" /\u003e\n    \u003ctitle\u003eMy Website\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/vue@3.4\"\u003e\u003c/script\u003e\n    \u003clink href=\"node_modules/tock-vue-kit/dist/style.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript src=\"node_modules/tock-vue-kit/dist/tock-vue-kit.umd.cjs\"\u003e\u003c/script\u003e\n    \u003clink href=\"my-visual-customization.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain\u003e\n      \u003ch1\u003eWelcome to My Website\u003c/h1\u003e\n      \u003cdiv id=\"chat-wrapper\"\u003e\u003c/div\u003e\n    \u003c/main\u003e\n\n    \u003cscript\u003e\n      TockVueKit.renderChat(\n        document.getElementById(\"chat-wrapper\"),\n        \"\u003cTOCK_BOT_API_URL\u003e\"\n      );\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nSeparate customization file (my-visual-customization.css in this example)\n\n```Css\n:root {\n  --tvk_colors_brand-hue: 214;\n  --tvk_colors_brand-lightness: 42%;\n  --tvk_colors_brand-saturation: 40%;\n  --tvk_colors_dark_neutral: white;\n  --tvk_colors_dark_text1: white;\n  --tvk_colors_dark_text2: white;\n  --tvk_wrapper_height: calc(98vh - 6em);\n}\n\n```\n\n### Visual customization with javascript\n\nIf necessary, you can inject css variable overloads with javascript at runtime.\n\nExample :\n\n```Html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" /\u003e\n    \u003ctitle\u003eMy Website\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/vue@3.4\"\u003e\u003c/script\u003e\n    \u003clink href=\"node_modules/tock-vue-kit/dist/style.css\" rel=\"stylesheet\" /\u003e\n    \u003cscript src=\"node_modules/tock-vue-kit/dist/tock-vue-kit.umd.cjs\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cmain\u003e\n      \u003ch1\u003eWelcome to My Website\u003c/h1\u003e\n      \u003cdiv id=\"chat-wrapper\"\u003e\u003c/div\u003e\n    \u003c/main\u003e\n\n    \u003cscript\u003e\n      TockVueKit.renderChat(\n        document.getElementById(\"chat-wrapper\"),\n        \"\u003cTOCK_BOT_API_URL\u003e\"\n      );\n\n      const styling = {\n        \"--tvk_colors_brand-hue\": \"214\",\n        \"--tvk_colors_brand-lightness\": \"42%\",\n        \"--tvk_colors_brand-saturation\": \"40%\",\n        \"--tvk_colors_dark_background\":\n          \"hsl(var(--tvk_colors_brand-hue) 50% 20%)\",\n        \"--tvk_colors_dark_neutral\": \"white\",\n        \"--tvk_colors_dark_text1\": \"white\",\n        \"--tvk_colors_dark_text2\": \"white\",\n        \"--tvk_colors_light_background\":\n          \"hsl(var(--tvk_colors_brand-hue) 50% 90%)\",\n        \"--tvk_wrapper_height\": \"calc(98vh - 6em)\",\n      };\n\n      let root = document.documentElement;\n      Object.entries(styling).forEach((style) =\u003e {\n        root.style.setProperty(style[0], style[1]);\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n### More advanced visual customization\n\nIf you need to modify the widget's appearance in greater depth, use your own version of the \"dist/style.css\" file, which you can then customize as you see fit.\n\n### About colors\n\nThe Tock Vue Kit supports light and dark modes out of the box.\nBased on the three HSL variables (--tvk_colors_brand-hue, --tvk_colors_brand-lightness and --tvk_colors_brand-saturation), two sets of color variables (light and dark) are defined. The variables in each of these two sets contain the discriminants light or dark in their names, enabling the colors for each mode to be defined easily and independently (--tvk_colors_light_text1 | --tvk_colors_dark_text1, --tvk_colors_light_surface1 | --tvk_colors_dark_surface1, etc.). These are automatically mapped to their non-discriminating equivalent (--tvk_colors_text1, --tvk_colors_surface1, etc.) according to the state of the “data-theme” (or “data-bs-theme”) html tag attribute. Wherever color variables are referenced, the non-discriminant versions are used. This makes it possible to switch seamlessly between light and dark modes.\nTake a look at the [demo page](https://doc.tock.ai/tock-vue-kit/) of the [Tock Vue Kit Editor](https://github.com/theopenconversationkit/tock-vue-kit-editor) to better understand this mechanism.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheopenconversationkit%2Ftock-vue-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheopenconversationkit%2Ftock-vue-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheopenconversationkit%2Ftock-vue-kit/lists"}