Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-22 22:17:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8
ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/chat/properties.md
Pratik Agrawal 27e78409d7
[docs]: App Builder Sprint (#14879) 
* [docs]: App Builder Sprint

* minor formatting

* html and reset query

* form styles

* minor updates

* Components UI/UX style enhancements

* table img updates
2026-01-21 11:23:40 +05:30

5.6 KiB
Raw Blame History

id title
properties Properties

The Chat Component can be customized by configuring various properties or adding events to perform specific actions. To learn how to build a chatbot, refer to the Chat Component Overview guide. For more information on CSAs and Exposed Variables, check out the Component Specific Actions guide.

Properties

Property Description Expected Value
Chat Title Title of the chat component. String (e.g. ToolJet Support Chatbot)
Initial Chat Initial messages to be loaded when the chat starts. Array of Objects ( e.g. {{[ { message: 'Hey! Welcome to ToolJet. How may I help you?' } ]}} )
User Name Defines the user's name. String (e.g. John Doe)
User Avatar Defines the user's avatar. Image URL
Respondent Name Defines the respondent's name. String (e.g. ToolJet Bot)
Respondent Avatar Defines the respondent's avatar. Image URL

Message Object Properties

Property Description Required Expected Value
Message The content of the message. Required String (e.g. "Hey! How can I help you?")
Message ID ID of the message. Auto-generated String (e.g. "e3dd6f60-d5e8-46c5-b73b-006f2f4a34f2")
Timestamp Date and Time of the message. Auto-generated DateTime in ISO 8601 format (e.g. "2025-02-05T09:33:32.468Z")
Name Message sender's name. Optional String (e.g. "John Doe")
Avatar Message sender's avatar. Optional Image URL
Type Type of the message. Required Accepted Values: "response", "message" or "error".

Events

Event Description
On history cleared Triggers whenever the history is cleared.
On message sent Triggers whenever a message is sent.

Additional Actions

All the following actions can be enabled or disabled either by using the toggle switch or by dynamically configuring the value by clicking on fx and entering a logical expression.

Action Description
Visibility Controls the component's visibility.
Disable input state Enables or disables the input state.
Histroy loading state Enables the history loading state, often used with isLoading to indicate progress.
Response loading state Enables the response loading state, often used with isLoading to indicate progress.
Enable clear history button Enables or disables the clear history button.
Enable download history button Enables or disables the delete history button.

Devices

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Expected Value
Show on desktop Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
Show on mobile Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.

Styles

Message

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Name Sets the color for the sender's name. Select a color from the color picker or set it programmatically using fx.
Message Sets the color for the message text. Select a color from the color picker or set it programmatically using fx.
Timestamp Sets the color for the timestamp. Select a color from the color picker or set it programmatically using fx.

Field

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Background Sets the background color of the input field. Select a color from the color picker or set it programmatically using fx.
Border Sets the border color of the input field. Select a color from the color picker or set it programmatically using fx.
Accent Sets the accent color of the input field. Select a color from the color picker or set it programmatically using fx.
Text Sets the text color of the input field. Select a color from the color picker or set it programmatically using fx.
Send icon Sets the color of the send icon. Select a color from the color picker or set it programmatically using fx.

Container

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> Configuration Options
Background Sets the background color of the chat container. Select a color from the color picker or set it programmatically using fx.
Border Sets the border color of the chat container. Select a color from the color picker or set it programmatically using fx.
Box shadow Sets the box shadow color of the chat container. Select a color from the color picker or set it programmatically using fx.
Border radius Sets the corner radius of the chat container. Enter a numeric value (default: 6) or set it programmatically using fx.

:::info Any property having fx button next to its field can be programmatically configured. :::