Chat

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

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.

Chat Properties

Component Properties

Property	Description
Header	Set the chat title
Header Text Style	Changes the style (font, size, etc.) of the chat's header text. Configure styles in the Typography settings
Header Text Color	Changes the color of the chat's header text
Placeholder Text	Sets the placeholder text for the chat input
Message History Data	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
Timestamp Format	Sets the format of the timestamp
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
Enable Search	Allow users to search for messages, values are a boolean
Enable 'Enter' to Send	Hitting enter will send the message, values are a boolean
Allow Emojis	Show emoji menu in editor, values are a boolean
Allow Images	Allow users to add images to their messages, values are a boolean
Visible	Controls the visibility of the component, values are a boolean
Disabled	Disables user interaction with this component, 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