Chat
Chat
thread
This thread will open immediately after chat initialization if it’s in the thread list.
If it isn’t in the thread list or if the parameter is not provided, an empty thread will open.
If it isn’t in the thread list or if the parameter is not provided, an empty thread will open.
Type:
object | undefined
threads
required
Threads list.
Type:
object[]
onUserMessageSent
required
Callback fired when the user sends a message to the thread.
Type:
function(params: MessageSentParams) => void | Promise
See more information about parameters on the MessageSentParams page
assistantActions
Action buttons for the assistant’s message.
Type:
React.JSXElementConstructor[]
processAssistantText
Runtime processing of the assistant’s message.
Type:
function(text: string) => string
onChangeCurrentThread
Callback fired when the current thread changes.
Type:
function(params: { thread: object }) => void
onChangeMessageBranch
Callback fired when message branch changes.
Type:
function(params: { message: object }) => void
onAssistantMessageTypingFinish
Callback fired after message streaming is complete.
Type:
function(params: { message: object, thread: object }) => void
handleCreateNewThread
Called when a user starts a new thread.
Type:
function() => object
handleStopMessageStreaming
Invoked when the user clicks the stop streaming button.
Type:
function() => void
onFirstMessageSent
Callback fired when the first message is sent.
Type:
function(params: { thread: object }) => void
onThreadDeleted
Callback fired when a thread is deleted.
Type:
function(params: { thread: object }) => void
defaultTextFieldValue
Prefill text field with a default value.
Type:
string
enableBranches
Branching of the conversation after editing the user’s message or updating the assistant’s answer.
Unlocks the “edit message” function for the user.
Unlocks the “change model” or “reply again” function for the assistant.
More information on the Branching page
Type:
boolean
onSendRating
Callback fired when a message rating is sent.
Type:
function(params: { message: object, rating: RatingType | undefined }) => void
onSendFeedback
Callback fired when message feedback is sent.
Type:
function(params: { message: object, feedback: string, tags: string[] }) => void
disableMessageCopying
A flag indicating whether message copying is disabled.
Type:
boolean
slots
The components used for each slot inside. Can be instantiated with
useChatSlots.
Type:
object
slotProps
The props used for each slot inside. Can be instantiated with
useChatSlots.
Type:
object
coreSlots
The components used for each core slot include Button, IconButton, etc. Can be instantiated with
useChatSlots or useChatCoreSlots.
Type:
object
apiRef
The ref object that allows ChatUI manipulation. Can be instantiated with
useChatContext.
Type:
React.MutableRefObject<ApiRefType>
scrollerRef
ChatUI defaults to using the window for automatic conversation scrolling.
If you have embedded the chat within your own component, supply the container’s ref to allow for proper scroll management.
If you have embedded the chat within your own component, supply the container’s ref to allow for proper scroll management.
Type:
React.RefObject<HTMLDivElement | null>
helloMessage
Show a welcome message at the beginning of the thread.
Type:
string
enableFileAttachments
Enable user’s ability to add files in messages.
Type:
boolean
onFileAttached
Callback fired after file attach to message.
Type:
(params: FileAttachedParams) => void | Promise
See more information about parameters on the FileAttachedParams page.
onFileDetached
Callback fired after file detached from message.
Type:
(fileId: string | number) => void | Promise
acceptableFileFormat
Acceptable file formats for attaching to a message. Check MDN Docs for more information.
Example Array: ['image', 'text'] | ['.png', '.txt'] | ['image/*', 'text/*']
Example String: 'image/*, text/*' | '.png, .txt'
Type:
string | string[]