Skip to main content

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.

Interact with ChatGPT via a Chat component

Chat Properties

Component Properties

PropertyDescription
HeaderSet the chat title
Header Text StyleChanges the style (font, size, etc.) of the chat's header text. Configure styles in the Typography settings
Header Text ColorChanges the color of the chat's header text
Placeholder TextSets the placeholder text for the chat input
Message History DataArray containing the message history. Each object in the array represents a message
MessageField name to use to access the message
NameField 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 FormatSets the format of the timestamp
Enable Pending StateEnables the pending state for the chat widget after a message has been sent
Pending State TextSets the text for the pending state
Pending State TimeoutLength of time between sending the message and showing the pending state in seconds
Enable SearchAllow users to search for messages, values are a boolean
Enable 'Enter' to SendHitting enter will send the message, values are a boolean
Allow EmojisShow emoji menu in editor, values are a boolean
Allow ImagesAllow users to add images to their messages, values are a boolean
VisibleControls the visibility of the component, values are a boolean
DisabledDisables 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:

PropertyDescription
Chat1.userMessageTextReturns a string of the current text in the message field in plain text
Chat1.messageHistoryReturns an array of objects containing the message history
Chat1.userMessageRichTextReturns a string of the current text in the message field in HTML format
Chat1.userMessageImagesReturns an array of image URLs currently in the message field
Chat1.lastMessageReturns an object of the last message in the message history
Chat1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
Chat1.isDisabledReturns 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.

PropertyDescription
onMessageSendTrigger an action when a message is sent