{"id":14070190,"url":"https://github.com/theopenconversationkit/tock-react-kit","last_synced_at":"2025-09-04T00:36:13.678Z","repository":{"id":35146603,"uuid":"208288317","full_name":"theopenconversationkit/tock-react-kit","owner":"theopenconversationkit","description":"React component to embed Tock chatbots into Web interfaces.","archived":false,"fork":false,"pushed_at":"2025-08-12T12:40:49.000Z","size":1442,"stargazers_count":22,"open_issues_count":8,"forks_count":19,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-08-12T14:39:58.884Z","etag":null,"topics":["ai","bot","chatbot","opensource","react","tock","web","widget"],"latest_commit_sha":null,"homepage":"https://doc.tock.ai","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theopenconversationkit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-09-13T15:03:54.000Z","updated_at":"2025-08-12T12:40:54.000Z","dependencies_parsed_at":"2024-02-01T19:26:14.735Z","dependency_job_id":"42dda6e0-123c-4eca-a531-bbfd2ca4323d","html_url":"https://github.com/theopenconversationkit/tock-react-kit","commit_stats":{"total_commits":152,"total_committers":20,"mean_commits":7.6,"dds":0.8092105263157895,"last_synced_commit":"1487322145cbca9b745481db2c2998916fb8d53d"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/theopenconversationkit/tock-react-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-react-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-react-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-react-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-react-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theopenconversationkit","download_url":"https://codeload.github.com/theopenconversationkit/tock-react-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theopenconversationkit%2Ftock-react-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273533986,"owners_count":25122635,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["ai","bot","chatbot","opensource","react","tock","web","widget"],"created_at":"2024-08-13T07:07:32.823Z","updated_at":"2025-09-04T00:36:13.651Z","avatar_url":"https://github.com/theopenconversationkit.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Event Release](https://github.com/theopenconversationkit/tock-react-kit/workflows/Publish/badge.svg?branch=master\u0026event=repository_dispatch)\n![Manual Release](https://github.com/theopenconversationkit/tock-react-kit/workflows/Manual%20Release/badge.svg?branch=master\u0026event=workflow_dispatch)\n[![Dependencies](https://img.shields.io/librariesio/release/npm/tock-react-kit)](https://img.shields.io/librariesio/release/npm/tock-react-kit)\n\n[![Latest release](https://img.shields.io/npm/v/tock-react-kit)](https://img.shields.io/npm/v/tock-react-kit)\n[![Release Date](https://img.shields.io/github/release-date/theopenconversationkit/tock-react-kit)](https://github.com/theopenconversationkit/tock-react-kit/releases)\n[![NPM Downloads](https://img.shields.io/npm/dy/tock-react-kit)](https://img.shields.io/npm/dy/tock-react-kit)\n\n[![Gitter](https://badges.gitter.im/tockchat/Lobby.svg)](https://gitter.im/tockchat/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=body_badge)\n[![Contributors](https://img.shields.io/github/contributors-anon/theopenconversationkit/tock-react-kit)](https://github.com/theopenconversationkit/tock-react-kit/graphs/contributors)\n[![Commit Activity](https://img.shields.io/github/commit-activity/y/theopenconversationkit/tock-react-kit)](https://github.com/theopenconversationkit/tock-react-kit/pulse/monthly)\n\n[![Home](https://img.shields.io/website?label=home\u0026down_message=offline\u0026up_message=doc.tock.ai\u0026url=https%3A%2F%2Fdoc.tock.ai)](https://doc.tock.ai)\n[![Demo](https://img.shields.io/website?label=demo\u0026down_message=offline\u0026up_message=live\u0026url=https%3A%2F%2Fdoc.tock.ai)](https://doc.tock.ai)\n[![License](https://img.shields.io/github/license/theopenconversationkit/tock-react-kit)](https://github.com/theopenconversationkit/tock-react-kit/blob/master/LICENSE)\n\n# Tock React Kit\n\n\u003cimg alt=\"Tock Logo\" src=\"http://doc.tock.ai/tock/en/assets/images/logo.svg\" style=\"width: 150px;\"\u003e\u003cbr\u003e\n\nA toolkit to easily embed [Tock](https://doc.tock.ai) chatbots into Web pages.\n\nThe toolkit provides:\n- simple integration, as a script or React module\n- connection/dialog with a Tock bot using _Bot API_ (using SSE if available)\n- user interface for conversations, including default widgets and animations\n- customizable styles\n\nThe toolkit is currently used in production by various conversational assistants from SNCF, Enedis and more\n(see [Tock showcase](http://doc.tock.ai/tock/en/about/showcase/)).\n\n🏠 Home: [https://doc.tock.ai](https://doc.tock.ai)\n\n▶️ Live demo: [Web frontend](https://doc.tock.ai) / [bot backend](https://demo.tock.ai)\n\n💬 Contact: [https://gitter.im/tockchat/Lobby](https://gitter.im/tockchat/Lobby)\n\n## Prerequisites\n\n- Run a [Tock Bot in API mode](https://doc.tock.ai/tock/en/dev/bot-api/) ([NodeJS alternative](https://github.com/theopenconversationkit/tock-node))\n\n## Quick Start\n\nIf you do not use a package manager, you can include the standalone bundle for the `tock-react-kit` in an HTML page.\nNote that this bundle includes its own copy of React - if you have an existing React application,\nplease refer to the [module instructions below](#use-as-a-module).\n\n```html\n\u003cscript\n crossorigin\n src=\"https://unpkg.com/tock-react-kit@latest/build/tock-react-kit-standalone.umd.js\"\n\u003e\u003c/script\u003e\n```\n\nRender your app in an element:\n\n```html\n\u003cbody\u003e\n \u003cdiv id=\"chat\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n TockReact.renderChat(document.getElementById('chat'), '\u003cTOCK_BOT_API_URL\u003e');\n \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Use as a module\n\nYou can install this package alongside its peer dependencies using the package manager of your choice,\nand then bundle it with the rest of your web application. For example with NPM:\n\n```\nnpm i react@18 react-dom@18 @emotion/react@11 @emotion/styled@11 tock-react-kit\n```\n\nYour bundler must support ESM modules, which is the case for Webpack, Rollup and Vite among others.\n\n### Use in a React app\n\n```jsx\nimport { ThemeProvider } from \"@emotion/react\";\nimport { TockContext, Chat, createTheme } from 'tock-react-kit';\n\n\u003cTockContext endpoint=\"\u003cTOCK_BOT_API_URL\u003e\" settings={{\n // all properties from TockSettings can be configured here, like:\n locale: navigator.language,\n network: {\n disableSse: true,\n },\n}}\u003e\n \u003cThemeProvider theme={createTheme({ /* ... */})}\u003e\n \u003cChat\n /* All parameters are optional */\n afterInit={() =\u003e {}}\n openingMessage=\"Hi\"\n referralParameter=\"referralParameter\"\n widgets={{...}}\n /\u003e\n \u003c/ThemeProvider\u003e\n\u003c/TockContext\u003e\n```\n\nNote that unmounting `TockContext` at any point may cause bugs in the chat due to live data being lost.\nTherefore, in apps where the `Chat` component is susceptible to being unmounted and remounted (e.g. Single Page Applications),\n`TockContext` should go at the root of the page (hoisting out of render).\n`ThemeProvider` should also be hoisted out of render for performance reasons, as noted in the [Emotion docs](https://emotion.sh/docs/theming#themeprovider-reactcomponenttype).\n\n### Use in a non-React app\n\nWhen working in a non-React app, you can once again use `renderChat` to render the app in an existing element:\n\n```js\nimport { renderChat } from 'tock-react-kit';\n\nrenderChat(\n document.getElementById('chat'),\n '\u003cTOCK_BOT_API_URL\u003e',\n /* The following parameters are optional */\n 'referralParameter',\n { /* ... */ },\n { /* ... */ },\n);\n```\n\n## Styling your chat\n\nUse the third argument of `renderChat` to style your app:\n\n```js\nrenderChat(document.getElementById('chat'), '\u003cTOCK_BOT_API_URL\u003e', 'referralParameter', {\n palette: {\n text: {\n user: 'limegreen',\n bot: 'rebeccapurple',\n card: 'black',\n input: 'black',\n },\n background: {\n user: 'red',\n bot: 'orange',\n card: 'lightgreen',\n input: 'lightblue',\n inputDisabled: '#b6b4b4',\n },\n },\n sizing: {\n loaderSize: '8px',\n borderRadius: '8px',\n conversation: {\n width: '720px',\n },\n },\n typography: {\n fontFamily: 'monospace',\n fontSize: '24px',\n },\n overrides: {\n chat: `background: #fff;`,\n },\n});\n```\n\nYou can use createTheme function to init a valid theme.\n\n```js\nrenderChat(document.getElementById('chat'), '\u003cTOCK_BOT_API_URL\u003e', 'referralParameter', createTheme({}));\n```\n\n## Customize interface\n\nIf the chat does not suit your needs, there are two main ways to customize the interface rendering.\n\n### Configure custom renderers\n\nCustom rendering can currently be defined for text, images, and buttons. Here are some examples of what this enables:\n\n- processing custom markup in the text of any component\n- stripping harmful HTML tags and attributes when the backend is untrustworthy\n- dynamically decorating text messages and buttons\n- automatically embedding SVG images into the DOM\n- implementing fallback behavior when an image fails to load\n- using [metadata](#message-metadata) sent by the server to set image properties like width and height\n- setting up redirects for links\n\nSee the [`TockSettings`](#renderersettings) API reference for the details of available renderers.\n\n### Use the chat components separately\n\nThe `tock-react-kit` exports its main components, so you can re-use them to build your own chat interface.\nThis approach can be used alongside custom renderers to control more granular aspects of rendering.\n\n## Message Metadata\n\n*TOCK*'s backend supports sending metadata alongside messages. This metadata takes the form of key-value pairs of arbitrary strings.\nThe `tock-react-kit` supports customization of the interface based on said metadata at two levels:\n\n### Chat metadata\n\nThe metadata from the last processed response is made available globally in `TockContext`.\nThis can be used to implement global effects on the chat interface, like showing status messages.\nThis metadata is not persistent; it is therefore the responsibility of either the backend or a customized frontend to\nensure data stays available if required.\n\n### Message metadata\n\nThe metadata from each response is also attached to the corresponding messages.\nThis metadata is persisted with the messages, including through page reloads if [local storage history](#local-storage-history) is enabled.\nIt is available to [custom renderers](#configure-custom-renderers) through the use of the `useMessageMetadata` hook,\nas well as to custom React-based frontends that handle message rendering themselves.\n\n## API Reference\n\n### `renderChat(element, tockBotApiUrl, referralParameter, theme, options)`\n\nRenders an entire chat in a target element.\n\n| Argument name | Type | Description |\n|---------------------|-----------------------------------------------------------------------|------------------------------------------------|\n| `element` | [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) | Target element where the chat will be rendered |\n| `tockBotApiUrl` | `string` | URL to the Tock Bot REST API |\n| `referralParameter` | `string` | Optional referal parameter |\n| `theme` | `TockTheme` | Optional theme object |\n| `options` | `TockOptions` | Optional options object |\n\n### `useTock()`\n\nHook that provides chat history and methods to communicate with the Tock Bot. It must be used alongside with `TockContext`. Returns a useTock interface.\n\nUntil version 24.9.0 of the tock-react-kit, this function took the following arguments, which are now moved to [`TockSettings`](#TockSettings):\n\n| Argument name | Type | Description |\n|------------------------|-----------------------------------------|---------------------------------------------------------------|\n| `tockBotApiUrl` | `string` | URL to the Tock Bot REST API |\n| `extraHeadersProvider` | `() =\u003e Promise\u003cRecord\u003cstring, string\u003e\u003e` | Optional Provider of extra HTTP headers for outgoing requests |\n| `disableSse` | `boolean` | Optional Force-disabling of SSE mode |\n| `localStorageHistory` | `TockLocalStorage` | Optional Configuration for LocalStorage history |\n\n### `TockTheme`\n\nA `TockTheme` can be used as a value of a `ThemeProvider` of [`emotion-theming`](https://emotion.sh/docs/theming) (bundled with the library) or as a third argument of `renderChat`.\n\n| Property name | Type | Description |\n|----------------------|--------------|----------------------------------------------------|\n| `palette` | `Palette` | Object for customising colors (see below) |\n| `sizing` | `Sizing` | Object for customising elements sizing (see below) |\n| `typography` | `Typography` | Object for customising typographies (see below) |\n| `overrides` | `Overrides?` | Object allowing further styling (see below) |\n| `inlineQuickReplies` | `boolean?` | Displaying quick replies inline (by default false) |\n\n#### `Palette`\n\n| Property name | Type | Description |\n|-----------------|---------------------|-------------------------------------------------------------|\n| `background` | `BackgroundPalette` | Object for customising background colors (see below) |\n| `text` | `TextPalette?` | Object for customising text colors (see below) |\n\n#### `BackgroundPalette`\n\n| Property name | Type | Description |\n|-----------------|--------------------|--------------------------------------------------------------|\n| `user` | `string?` | CSS color used mainly for the user's chat speech balloons |\n| `bot` | `string?` | CSS color used mainly for the bot's chat speech balloons |\n| `card` | `string?` | CSS background color for cards |\n| `input` | `string?` | CSS background color for the main user text input |\n| `inputDisabled` | `string?` | CSS background color for the main user text input disabled |\n\n#### `TextPalette`\n\n| Property name | Type | Description |\n|-----------------|--------------------|--------------------------------------------------------------|\n| `user` | `string?` | CSS color used mainly for the user's chat speech balloons |\n| `bot` | `string?` | CSS color used mainly for the bot's chat speech balloons |\n| `card` | `string?` | CSS background color for cards |\n| `input` | `string?` | CSS background color for the main user text input |\n\n#### `Sizing`\n\n| Property name | Type | Description |\n|-----------------|--------------------|--------------------------------------------------------------|\n| `loaderSize` | `string?` | Loader component size |\n| `borderRadius` | `string?` | Border radius used in various chat components |\n| `conversation` | `Shape` | Object for customising chat size (see below) |\n\n#### `Shape`\n\n| Property name | Type | Description |\n|-----------------|--------------------|--------------------------------------------------------------|\n| `width` | `string?` | CSS max-width of the chat interface |\n\n#### `Typography`\n\n| Property name | Type | Description |\n|-----------------|--------------------|--------------------------------------------------------------|\n| `fontFamily` | `string?` | CSS font-family used in the chat |\n| `fontSize` | `string?` | CSS base font-size used in the chat |\n\n#### `Overrides`\n\n| Property name | Type | Description |\n|---------------------|------------------------|----------------------------------------------------------------------------------|\n| `buttons` | `TockThemeButtonStyle` | Object for adding CSS styles on button components (see below) |\n| `card` | `TockThemeCardStyle` | Object for adding CSS styles on card component (see below) |\n| `chatInput` | `TockThemeInputStyle?` | Object for adding CSS styles on chat input component (see below) |\n| `carouselContainer` | `string?` | Additional CSS styles for carousel cards container (overrides base styles) |\n| `carouselItem` | `string?` | Additional CSS styles for carousel cards container (overrides base styles) |\n| `carouselArrow` | `string?` | Additional CSS styles for carousel scrolling arrows (overrides base styles) |\n| `messageBot` | `string?` | Additional CSS styles for the bot's speech balloons (overrides base styles) |\n| `messageUser` | `string?` | Additional CSS styles for the user's speech balloons (overrides base styles) |\n| `quickReply` | `string?` | Additional CSS styles for the quick reply buttons (overrides base styles) |\n| `chat` | `string?` | Additional CSS styles for the chat container (overrides base styles) |\n| `quickReplyArrow` | `string?` | Additional CSS styles for quick replies scrolling arrows (overrides base styles) |\n\n#### `TockThemeButtonStyle`\n\n| Property name | Type | Description |\n|-------------------|------------------------|-------------------------------------------------------------------------|\n| `urlButton` | `string?` | Additional CSS styles for URL buttons (overrides base styles) |\n| `postbackButton` | `string?` | Additional CSS styles for postback buttons (overrides base styles) |\n| `buttonList` | `string?` | Additional CSS styles for button lists (overrides base styles) |\n| `buttonContainer` | `string?` | Additional CSS styles for button list container (overrides base styles) |\n\n#### `TockThemeCardStyle`\n\n| Property name | Type | Description |\n|-------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------|\n| `cardContainer` | `string?` | Additional CSS styles for carousel cards container (overrides base styles) |\n| `cardTitle` | `string?` | Additional CSS styles for carousel cards title (overrides base styles) |\n| `cardSubTitle` | `string?` | Additional CSS styles for carousel cards subtitle (overrides base styles) |\n| `cardImage` | `string?` | Additional CSS styles for carousel cards image (overrides base styles) |\n| `cardButton` | `string?` | Additional CSS styles for carousel cards button (overrides base styles and [button overrides](#tockthemebuttonstyle)) |\n| `buttonList` | `string?` | Additional CSS styles for carousel cards button list (overrides base styles and [button overrides](#tockthemebuttonstyle)) |\n| `buttonContainer` | `string?` | Additional CSS styles for carousel button list container (overrides base styles and [button overrides](#tockthemebuttonstyle)) |\n\n#### `TockThemeInputStyle`\n\n| Property name | Type | Description |\n|---------------------|------------------------|----------------------------------------------------------------------------------|\n| `container` | `string?` | Additional CSS styles for input container (overrides base styles) |\n| `input` | `string?` | Additional CSS styles for input (overrides base styles) |\n| `icon` | `string?` | Additional CSS styles for input icon (overrides base styles) |\n\n### `TockSettings`\n\nThe main source of configuration for the chatbot interface.\nObjects implementing this interface can be passed to `renderChat` or to `TockContext`.\n\n| Property name | Type | Description |\n|----------------|-------------------------|------------------------------------------------------|\n| `locale` | `string?` | Optional user language, as an *RFC 5646* code |\n| `localStorage` | `LocalStorageSettings?` | Configuration for use of localStorage by the library |\n| `network` | `NetworkSettings?` | If `true`, disables any SSE connection attempt |\n| `renderers` | `RendererSettings?` | Configuration for custom image and text renderers |\n\n#### `LocalStorageSettings`\n\n| Property name | Type | Description |\n|------------------------|------------|---------------------------------------------------------------------------------------------------------------------------------------------|\n| `enableMessageHistory` | `boolean?` | If set to `true`, the most recent messages of a conversation will be persisted in the local storage. Defaults to `false`. |\n| `maxMessageCount` | `number?` | When message history is enabled, sets the max number of messages to store. Defaults to 10. |\n| `prefix` | `string?` | Prefix for local storage keys allowing communication with different bots from the same domain (used for both `userId` and message history). |\n\n#### `NetworkSettings`\n\n| Property name | type | Description |\n|------------------------|------------------------------------------|---------------------------------------------------|\n| `disableSse` | `boolean?` | If `true`, disables any SSE connection attempt |\n| `extraHeadersProvider` | `() =\u003e Promise\u003cRecord\u003cstring, string\u003e\u003e?` | Provides extra HTTP headers for outgoing requests |\n\n#### `RendererSettings`\n\n| Property name | Type | Description |\n|--------------------|---------------------|------------------------------------------------------------------------------------|\n| `buttonRenderers` | `ButtonRenderers?` | Configuration of renderers for buttons displayed in the chat interface |\n| `imageRenderers` | `ImageRenderers?` | Configuration of renderers for dynamic images displayed in the chat interface |\n| `messageRenderers` | `MessageRenderers?` | Configuration of renderers for individual message components in the chat interface |\n| `textRenderers` | `TextRenderers?` | Configuration of renderers for dynamic text displayed in the chat interface |\n\n#### `ButtonRenderers`\n\nButton renderers all implement some specialization of the `ButtonRenderer` interface.\nThey are tasked with rendering a graphical component using button-specific data, a class name, and other generic HTML attributes.\nThe passed in class name provides the default style for the rendered component, as well as applicable [overrides](#overrides).\n\n| Property name | Type | Description |\n|---------------|-----------------------------|------------------------------------------------------------------------------------------------------|\n| `default` | `ButtonRenderer` | The fallback renderer. By default, renders a single `button` component using the provided properties |\n| `url` | `UrlButtonRenderer` | Renders an `UrlButton`. By default, renders a single `a` component using the provided properties |\n| `postback` | `PostBackButtonRenderer?` | Renders a `PostBackButton` |\n| `quickReply` | `QuickReplyButtonRenderer?` | Renders a `QuickReply` |\n\n#### `ImageRenderers`\n\nImage renderers all implement the `ImageRenderer` interface.\nThey are tasked with rendering a graphical component using a source URL, a description, a class name, and other generic HTML attributes.\nThe passed in class name provides the default style for the rendered component, as well as applicable [overrides](#overrides).\n\n| Property name | Description |\n|---------------|---------------------------------------------------------------------------------------------------|\n| `default` | The fallback renderer. By default, renders a single `img` component using the provided properties |\n| `standalone` | Renders images in the dedicated image component, including the zoomed-in view |\n| `card` | Renders images in the card component (including in carousels) |\n| `buttonIcon` | Renders icons in quick replies, URL buttons, and postback buttons |\n\n#### `MessageRenderers`\n\nMessage renderers are tasked with rendering individual messages exchanged between the bot and the user.\nCurrently, the only message renderer that can be defined here is for the `error` message - a special message that only\nappears after a network error (and disappears after a successful request).\n\n| Property name | Description |\n|---------------|--------------------------------------------------------------------------------------|\n| `error` | The error message renderer. If left unspecified, no error message is ever displayed. |\n\n#### `TextRenderers`\n\nText renderers all implement the `TextRenderer` interface.\nThey are tasked with rendering a string into a text component.\n\nA renderer can be restricted in the kind of HTML nodes it emits depending on the context in which it is invoked.\nMost text renderers should only emit [phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)\nthat is also [non-interactive](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).\nHowever, some contexts allow interactive phrasing content, or even any [flow content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content).\n\nSome renderers are expected to handle rich text, that is text that already contains HTML formatting.\nSuch rich text renderers may strip HTML tags or attributes that are deemed dangerous to add to the DOM.\n\n| Property name | Type of content | Description |\n|---------------|--------------------------|-----------------------------------------------------------------------------------------------------------|\n| `default` | non-interactive phrasing | The fallback renderer. By default, renders the whole string as a single text node |\n| `html` | flow | The fallback renderer for rich text. By default, renders the string into a `div` with `innerHTML` |\n| `htmlPhrase` | phrasing | The fallback renderer for inline rich text. By default, renders the string into a `span` with `innerHTML` |\n| `userContent` | phrasing | Renders text in user messages. If unspecified, falls back to `default` |\n\n### `TockOptions`\n\nContains all the properties from [`TockSettings`](#tocksettings) as well as the following:\n\n| Property name | Type | Description |\n|-------------------------|----------------------------------------|--------------------------------------------------------------------------|\n| `afterInit` | `(PostInitContext) =\u003e Promise\u003cvoid\u003e?` | Callback that will be executed after chat init and before openingMessage |\n| `openingMessage` | `string?` | Initial message to send to the bot to trigger a welcome sequence |\n| `extraHeadersProvider` | `() =\u003e Promise\u003cRecord\u003cstring, string\u003e` | Provider of extra HTTP headers for outgoing requests |\n| `timeoutBetweenMessage` | `number?` | Timeout between message |\n| `widgets` | `any?` | Custom display component |\n| `disableSse` | `boolean?` | Disable SSE (not even trying) |\n| `accessibility` | `TockAccessibility` | Object for overriding role and label accessibility attributes |\n| `localStorageHistory` | `TockLocalStorage?` | Object for history local storage |\n\n#### `TockAccessibility`\n\n| Property name | Type | Description |\n|-----------------------------------|----------------------------|-----------------------------------------------------------------------------------------------------|\n| `input` | `InputAccessibility?` | Object for adding accessibility labels on input component (see below) |\n| `carousel` | `CarouselAccessibility?` | Object for adding accessibility labels on carousel component (see below) |\n| `qrCarousel` | `QRCarouselAccessibility?` | Object for adding accessibility labels on QR inline carousel component component (see below) |\n\n#### `InputAccessibility`\n\n| Property name | Type | Description |\n|-----------------------------------|----------------------------|-----------------------------------------------------------------------------------------------------|\n| `sendButtonLabel` | `string?` | Message of the send message button image aria-label attribute (overrides 'Send a message') |\n| `clearButtonLabel` | `string?` | Message of the clear messages button image aria-label attribute (overrides 'Clear messages') |\n\n#### `TockLocalStorage`\n\n| Property name | Type | Description |\n|-----------------------------------|------------------------|-----------------------------------------------------------------------------|\n| `enable` | `boolean?` | Enable history local storage |\n| `maxNumberMessages` | `number?` | Max number of messages in the history local storage (default 10) |\n\n#### `CarouselAccessibility`\n\n| Property name | Type | Description |\n|---------------------------|------------------------|----------------------------------------------------------------------------------------------------|\n| `roleDescription` | `string?` | Message of the carousel aria-roledescription attribute (overrides 'Carousel') |\n| `slideRoleDescription` | `string?` | Message of the slide carousel aria-roledescription attribute (overrides 'Slide') |\n| `previousButtonLabel` | `string?` | Message of the carousel previous button image aria-label attribute (overrides 'Previous slides') |\n| `nextButtonLabel` | `string?` | Message of the carousel next button image aria-label attribute (overrides 'Next slides') |\n\n#### `QRCarouselAccessibility`\n\n| Property name | Type | Description |\n|-------------------------|------------------------|------------------------------------------------------------------------------------------------------------------------|\n| `previousButtonLabel` | `string?` | Message of the quick replies carousel previous button image aria-label attribute (overrides 'Previous quick replies') |\n| `nextButtonLabel` | `string?` | Message of the quick replies carousel next button image aria-label attribute (overrides 'Next quick replies') |\n\n#### Accessibility\n\nThe optional `accessibility` makes it possible to override default messages for some aria attributes.\n\nExample :\n\n```js\nrenderChat(\n document.getElementById('chat'),\n '\u003cTOCK_BOT_API_URL\u003e',\n undefined,\n {},\n { accessibility: {\n carousel: {\n roleDescription: 'Carousel',\n slideRoleDescription: 'Result',\n },\n },\n },\n);\n```\n\n#### Local storage history\n\nThe optional `localStorage.enableMessageHistory` setting (disabled by default) makes it possible to provide a history session of messages.\nThis history loads at the creation of the chat and is stored in the local storage of the browser.\nThe number of persisted messages can be configured with the `localStorage.maxMessageCount` setting.\n\nExample:\n\n```js\nrenderChat(\n document.getElementById('chat'),\n '\u003cTOCK_BOT_API_URL\u003e',\n undefined,\n {},\n { localStorage: {\n enableMessageHistory: true,\n maxMessageCount: 15, // default is 10 messages max\n }\n },\n);\n```\n\n\u003e If sensitive information appear in conversation, do not use this option.\n\u003e\n\u003e If browser disable or cannot handle local storage, the chat will not store messages.\n\n#### Post-initialization behaviours\n\n##### After Init callback\n\nThe optional `afterInit` is a callback function, called once the chat is ready to send payloads to the server.\nIt takes a [`PostInitContext`](./src/PostInitContext.ts) parameter, which allows the callback to interact with the chat\n(sending messages, clearing the chat, etc.). If it returns a promise, the chat will wait for the promise to resolve\nbefore performing other post-init tasks.\n\nExample:\n\n```js\nrenderChat(\n document.getElementById('chat'), \n '\u003cTOCK_BOT_API_URL\u003e', \n undefined,\n {},\n {\n localStorageHistory: { enable: true },\n afterInit: async (context) =\u003e {\n if (context.history) await context.sendMessage('I am back');\n else await context.sendPayload('greetings')\n }\n },\n);\n```\n\nIn this example, whenever the page is loaded:\n- If the user previously interacted with the bot, they will send the \"I am back\" message to the bot endpoint,\ntriggering the corresponding story. Said message will be displayed as a user message.\n- Otherwise, a payload will be sent, which will trigger the intent with the ID `greetings`.\n\n##### Opening message\n\nThe optional `openingMessage` is a sentence, automatically sent to the bot when the conversation starts.\nIf an `afterInit` callback is also specified, it runs before the opening message gets sent.\nThis is typically used to trigger a welcoming or onboarding story for the user,\nwithout requiring them to type a sentence first.\nSaid story is configured in _Tock Studio_, or managed like any other Tock story,\n\nThe `openingMessage` parameter is a sentence from the user to the bot, albeit not actually displayed in conversation.\nIt is not the configured answer from the bot.\n\nExample:\n\n```js\nrenderChat(\n document.getElementById('chat'), \n '\u003cTOCK_BOT_API_URL\u003e', \n undefined,\n {},\n { openingMessage: 'hello my bot' },\n);\n```\n\nIn this example, when the user opens/loads the page embedding the `tock-react-kit` for the first time,\nthe story corresponding to _\"hello my bot\"_ (e.g. `hello`) will be triggered, starting the conversation.\n\n#### Extra headers\n\nThe optional `extraHeadersProvider` makes it possible to provide additional HTTP headers, \nto message requests from the Web page (`tock-react-kit` component) to the Bot (Tock Bot API).\n\nExample:\n\n```js\nrenderChat(\n document.getElementById('chat'), \n '\u003cTOCK_BOT_API_URL\u003e', \n undefined,\n {},\n { extraHeadersProvider: (async () =\u003e ({'my-custom-header': 'some value'})) },\n);\n```\n\nThis is typically used to pass tokens or custom values to the Bot backend.\n\n\u003e Note that extra headers should be allowed by the backend's CORS setup for the application to work as intended.\n \n#### Custom widgets\n\nTock web connector can send custom messages :\n\n```json5\n{\n data: {\n departure: 'Paris',\n arrival: 'Nice'\n },\n type: 'TrainCardWidget',\n} \n```\n\nYou can define your own display components for this custom message :\n\n```js\nimport React from 'react';\nimport { renderChat, MessageContainer, Message } from 'tock-react-kit';\n\nconst TrainCardWidget = ({departure, arrival}) =\u003e {\n return (\n \u003cMessageContainer\u003e\n \u003cMessage\u003e\n \u003cp\u003eDeparture: {departure}\u003c/p\u003e\n \u003cp\u003eArrival: {arrival}\u003c/p\u003e\n \u003c/Message\u003e\n \u003c/MessageContainer\u003e\n );\n};\n\nrenderChat(\n document.getElementById('chat'),\n '\u003cTOCK_BOT_API_URL\u003e',\n undefined,\n {}, \n {\n widgets: {\n TrainCardWidget\n }\n }\n);\n```\n\n#### SSE\n\nBy default, the `tock-react-kit` tries to connect to the Bot through [Server-sent events](https://en.wikipedia.org/wiki/Server-sent_events).\nIf an error occurs, it probably means the Bot's backend does not accept SSE, so the `tock-react-kit` switches to classic requests.\n\nThe optional `disableSse`parameter makes it possible to disable SSE before even trying, possibly preventing a `404` error \nfrom console (when the Bot does not accept SSE).\n\nExample:\n\n```js\nrenderChat(\n document.getElementById('chat'), \n '\u003cTOCK_BOT_API_URL\u003e', \n undefined,\n {},\n { disableSse: true },\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheopenconversationkit%2Ftock-react-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheopenconversationkit%2Ftock-react-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheopenconversationkit%2Ftock-react-kit/lists"}