Rasa Chat Widget - Documentation ⋅ Storybook

Name Description Default Control
propertyName* This is a short description
summary		 defaultValue Set string
propertyName* This is a short description
summary		 defaultValue Set string
propertyName* This is a short description
summary		 defaultValue Set string

No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.

  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.

  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Rasa Chat Widget

Show code

Name Description Default Control
Hide props itemsprops Hide props items
authenticationToken User authentication token
string		 '' Set string
autoOpen If set to True, it will open the chat, triggering the 'initialPayload' immediately if set.
boolean		 false Set boolean
botIcon Static icon for the chatbot
string		 '' Set string
displayTimestamp Indicates if a message timestamp should be displayed
boolean		 false Set boolean
errorMessage Message that should be displayed if an error occurs
string		 'Something bad happened' Set string
initialPayload Data that should be sent on Chat Widget initialization
string		 '' Set string
inputMessagePlaceholder Message placeholder for input
string		 'Type your message here' Set string
messageDelay Indicates time between message is received and printed.
number		 600 Set number
messageTimestamp Format of the message timestamp
string		 '' Set string
restEnabled If set to True, instead of the default WebSocket communication, the widget will use the HTTP protocol.
boolean		 false Set boolean
senderId ID of a user engaged with the Chat Widget
string		 '' Set string
serverUrl* Url of the Rasa chatbot backend server (example: https://example.com)
string		 Set string
streamMessages If set to True, bot messages will be received as stream (printing word by word).
boolean		 false Set boolean
toggleFullScreen Indicates whether the chat messenger can be toggled to full screen mode.
boolean		 false Set boolean
widgetIcon Static icon for the widget
string		 '' Set string
widgetTitle Title of the Chat Widget
string		 'Rasa Widget' Set string
Hide events itemsevents Hide events items
chatSessionStarted Emitted when the Chat Widget is opened by the user
{ sessionId: string; }		 - -
chatWidgetClosed Emitted when the Chat Widget is closed by the user
undefined		 - -
chatWidgetFileStartedDownload Emitted when a user is starting to download a file.
undefined		 - -
chatWidgetHyperlinkClicked Emitted when a user clicks on a hyperlink option.
undefined		 - -
chatWidgetOpened Emitted when the Chat Widget is opened by the user
undefined		 - -
chatWidgetQuickReply Emitted when the user click on quick reply
string		 - -
chatWidgetReceivedMessage Emitted when the user receives a message
unknown		 - -
chatWidgetSentMessage Emitted when the user sends a message
string		 - -
Hide Style Tokens Global itemsStyle Tokens Global Hide Style Tokens Global items
--color-primary Sets the primary color for the widget
-		 -
--color-secondary Sets the secondary color for the widget.
-		 -
--color-secondary-opposite Sets the secondary opposite color for the widget.
-		 -
--color-danger Sets the danger color for the widget.
-		 -
--font-family Sets the font family for the widget.
-		 - Set string
Hide Style Tokens Granular itemsStyle Tokens Granular Hide Style Tokens Granular items
--launcher-background-color Sets the background color of the widget launcher button.
-		 -
--launcher-color Sets the color of the icon or text within the launcher button.
-		 -
--header-background-color Sets the background color of the chat widget header.
-		 -
--header-color Sets the color of the text within the header.
-		 -
--input-placeholder-color Sets the color of the placeholder text in the input field.
-		 -
--input-placeholder-opacity Sets the opacity of the placeholder text in the input field.
-		 - 0-- / 1
--input-background-color Sets the background color of the input field.
-		 -
--input-color Sets the color of the text entered in the input field.
-		 -
--input-send-color Sets the color of the send button within the input field.
-		 -
--messenger-background-color Sets the background color of the messenger area.
-		 -
--message-user-color Sets the color of the text in the user's messages.
-		 -
--message-robot-icon-background-color Sets the background color of the robot icon in messages.
-		 -
--message-robot-icon-color Sets the color of the robot icon in messages.
-		 -
--message-robot-background-color Sets the background color of the robot's messages.
-		 -
--message-robot-color Sets the color of the text in the robot's messages.
-		 -
--message-user-background-color Sets the background color of the user's messages.
-		 -
--message-button-color Sets the color of the text in the user's messages.
-		 -
--message-button-background-color Sets the background color of message buttons.
-		 -
--message-button-border-color Sets the border color of message buttons.
-		 -
--message-selected-button-color Sets the color of the text in selected message buttons.
-		 -
--message-selected-button-background-color Sets the background color of selected message buttons.
-		 -
--message-selected-button-border-color Sets the border color of selected message buttons.
-		 -
--accordion-background-color Sets the background color of the accordion component.
-		 -
--session-divider-color Sets the color of the divider between chat sessions.
-		 -
--session-divider-text-color Sets the color of the text on the session divider.
-		 -
--error-toast-background-color Sets the background color of error toast notifications.
-		 -
--error-toast-color Sets the color of the text within error toast notifications.
-		 -
--timestamp-color Sets the color of the text on message timestamp.
-		 -