Chatbot
The Chatbot component enables you to build interactive conversational UIs with customizable actions, message flows, and backend integration.Component Usage
The Chatbot component provides a flexible interface for building conversational UIs. You can customize its actions, initial messages, placeholder content, and backend endpoint.Basic Chatbot Setup
Render the chatbot with a placeholder content. Once the user writes a message the placeholder will be removed.
Use the cbq command to specify to which command the chatbot will send the message.
Chatbot messages
The chatbot can be initialized with a set of messages. This is useful for pre-populating the conversation or simulating a chat history.
You can also add an initial message, this message will be rendered and processed by the chatbot as it was the first interaction.
Chatbot actions
Chatbot actions allow you to add interactive elements like buttons or file uploads to the chatbot input area. You can customize the action icons and configure filepond options for file uploads.
For each action, you can customize the behavior and appearance by providing specific options.
The current available actions are:
Chatbot::ACTION_IMAGES- Allows users to upload images using Filepond.
Custom actions
You can add custom action buttons to the chatbot input area.
Streaming response
To enable streaming responses in the chatbot, configure the chat session using the options method and provide a unique sessionId.
When a user sends a message, the chatbot will send the request to the configured cbq endpoint and listen for streaming responses on the channel identified by the session ID.
Messages sent to the chatbot should be formatted using blocks:
Text block: Regular messages must be wrapped between [start-text-block] and [end-text-block].
Action block: If a message includes an action, wrap it between [start-action-block] and [end-action-block], and specify the action inside.
To signal the end of a streaming response, send the message-streaming-complete event.
If an error occurs during streaming, send the message-streaming-failed event.
API
The Chatbot component exposes several methods for configuration and interaction.API PHP
API JS
Message Options
The following object type is the expected format for messages sent to the chatbot, either in JS or PHP. This fields are used in the addMessage method in JS and for initialMessage in PHP.
Events
You can listen to events on the Chatbot component using the bouion() method.Overview
The Chatbot component enables conversational UI experiences, supporting custom actions, message flows, and backend integration.
Status
The Chatbot component is currently in development. Features and API may change.