ChooChoo Widget

Web components for the ChooChoo conductor and agents 🚂

Properties

| Property | Attribute | Description | Type | Default | | -------------------------- | --------------------------- | ------------------------------------------------------------------------------------------ | --------- | -------------------------- | | authenticationToken | authentication-token | User authentication token | string | '' | | autoOpen | auto-open | If set to True, it will open the chat, triggering the 'initialPayload' immediately if set. | boolean | false | | botIcon | bot-icon | Static icon for the chatbot | string | '' | | displayTimestamp | display-timestamp | Indicates if a message timestamp should be displayed | boolean | false | | errorMessage | error-message | Message that should be displayed if an error occurs | string | 'Something bad happened' | | initialPayload | initial-payload | Data that should be sent on Chat Widget initialization | string | '' | | inputMessagePlaceholder | input-message-placeholder | Message placeholder for input | string | 'Type your message here' | | messageDelay | message-delay | Indicates time between message is received and printed. | number | 600 | | messageTimestamp | message-timestamp | Format of the message timestamp | string | '' | | publicAppId (required) | public-app-id | Public App ID | string | undefined | | senderId | sender-id | ID of a user engaged with the Chat Widget | string | '' | | serverUrl (required) | server-url | Url of the ChooChoo chatbot backend server (example: [https://api.choochoo.cc]) | string | undefined | | streamMessages | stream-messages | If set to True, bot messages will be received as stream (printing word by word). | boolean | false | | toggleFullScreen | toggle-full-screen | Indicates whether the chat messenger can be toggled to full screen mode. | boolean | true | | widgetIcon | widget-icon | Static icon for the widget | string | '' | | widgetTitle | widget-title | Title of the Chat Widget | string | 'ChooChoo Conductor' |

Events

| Event | Description | Type | | ------------------------------- | --------------------------------------------------- | ------------------------------------- | | chatSessionStarted | Emitted when the Chat Widget is opened by the user | CustomEvent<{ sessionId: string; }> | | chatWidgetClosed | Emitted when the Chat Widget is closed by the user | CustomEvent<undefined> | | chatWidgetFileStartedDownload | Emitted when a user is starting to download a file. | CustomEvent<undefined> | | chatWidgetHyperlinkClicked | Emitted when a user clicks on a hyperlink option. | CustomEvent<undefined> | | chatWidgetOpened | Emitted when the Chat Widget is opened by the user | CustomEvent<undefined> | | chatWidgetQuickReply | Emitted when the user click on quick reply | CustomEvent<string> | | chatWidgetReceivedMessage | Emitted when the user receives a message | CustomEvent<unknown> | | chatWidgetSentMessage | Emitted when the user sends a message | CustomEvent<string> |

Dependencies

Depends on

• choochoo-session-divider
• chat-message
• choochoo-text-message
• choochoo-image-message
• choochoo-video
• choochoo-file-download-message
• choochoo-accordion
• choochoo-text
• choochoo-quick-reply
• choochoo-carousel
• choochoo-rating
• global-error-handler
• choochoo-typing-indicator
• choochoo-icon-close-chat
• choochoo-icon-chat
• error-toast
• choochoo-chat-input

Graph

graph TD;
  choochoo-widget --> choochoo-session-divider
  choochoo-widget --> chat-message
  choochoo-widget --> choochoo-text-message
  choochoo-widget --> choochoo-image-message
  choochoo-widget --> choochoo-video
  choochoo-widget --> choochoo-file-download-message
  choochoo-widget --> choochoo-accordion
  choochoo-widget --> choochoo-text
  choochoo-widget --> choochoo-quick-reply
  choochoo-widget --> choochoo-carousel
  choochoo-widget --> choochoo-rating
  choochoo-widget --> global-error-handler
  choochoo-widget --> choochoo-typing-indicator
  choochoo-widget --> choochoo-icon-close-chat
  choochoo-widget --> choochoo-icon-chat
  choochoo-widget --> error-toast
  choochoo-widget --> choochoo-chat-input
  choochoo-session-divider --> choochoo-text
  chat-message --> choochoo-icon-robot
  chat-message --> choochoo-text
  choochoo-text-message --> choochoo-text
  choochoo-image-message --> choochoo-image
  choochoo-image-message --> choochoo-text
  choochoo-image --> choochoo-icon-default-image-fallback
  choochoo-file-download-message --> choochoo-icon-paperclip
  choochoo-file-download-message --> choochoo-text
  choochoo-accordion --> choochoo-text
  choochoo-accordion --> choochoo-icon-chevron-down
  choochoo-quick-reply --> chat-message
  choochoo-quick-reply --> choochoo-text
  choochoo-quick-reply --> choochoo-button
  choochoo-carousel --> choochoo-image-message
  choochoo-carousel --> choochoo-icon-chevron-down
  choochoo-typing-indicator --> chat-message
  error-toast --> choochoo-icon-danger
  error-toast --> choochoo-text
  choochoo-chat-input --> choochoo-icon-paper-plane
  style choochoo-widget fill:#f9f,stroke:#333,stroke-width:4px