Chat

Use a Chat component to allow users to leave comments for each other or chat directly with ChatGPT powered by the OpenAI integration

Chat Properties

Component Properties

Property	Description
Content
Header	Set the chat title
Message History	Array containing the message history. Each object in the array represents a message
Message	Field name to use to access the message
Name	Field name to use to access the user's display name
Avatar URL (optional)	Field name to use to access the avatar image URL
Timestamp (optional)	Field name to use to access the timestamp of a message
Appearance
Header Style	Changes the style (font, size, color, etc.) of the chat's header text. Configure styles in the Typography settings
Placeholder Text	Sets the placeholder text for the chat input
Timestamp Format	Sets the format of the timestamp
Show Pending Message	While the onSendMessage action is running, show the message as pending
Enable Pending State	Enables the pending state for the chat widget after a message has been sent
Pending State Text	Sets the text for the pending state
Pending State Timeout	Length of time between sending the message and showing the pending state in seconds
Allow Emojis	Show emoji menu in editor, values are a boolean
Layout
Width	Controls the width of the component
Height	Controls the height of the component
Visible	Controls the visibility of the component, values are a boolean
Collapse When Invisible	Controls the visibility of the component. When true, other components shift to fill its space; when false, it leaves blank space. No effect in edit mode.
Interaction
Search	Allow users to search for messages, values are a boolean
Send on "Enter"	Hitting enter will send the message, values are a boolean
Allow Images	Allow users to add images to their messages, values are a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Chat component, and dot referencing the property. For a Chat component named Chat1:

Property	Description
Chat1.userMessageText	Returns a string of the current text in the message field in plain text
Chat1.messageHistory	Returns an array of objects containing the message history
Chat1.userMessageRichText	Returns a string of the current text in the message field in HTML format
Chat1.userMessageImages	Returns an array of image URLs currently in the message field
Chat1.lastMessage	Returns an object of the last message in the message history
Chat1.isVisible	Returns the boolean value of the component's visibility (True, if it is visible)
Chat1.isDisabled	Returns the boolean value of the component's disabled state (True, if it is disabled)

Events

The following events are triggered by user interactions with Chat components. Use event handlers to trigger actions in response to user events.

Property	Description
onMessageSend	Trigger an action when a message is sent

Example Usage:

Power the Chat component with ChatGPT

info

To create a Chat component that streams messages in real time, follow the guide

here.

1. Set up the OpenAI integration
2. Add a Chat component to the canvas
3. Create a new backend API with an OpenAI step
   • Set Action to "Generate ChatGPT Response"
   • Set Prompt to {{Chat1.userMessageText}}
   • Set Message History to {{Chat1.messageHistory}}
4. Set the Message History Data field in the Chat component to {{API1.response.messageHistory}}
5. Add an event handler onMessageSend to run the API

Now, when you type in the Chat component, you can interact directly with ChatGPT in your Superblocks application.