<Chatbot> Props Reference

Every prop supported by the <Chatbot> component from @asgard-js/react.

Required

Prop	Type	Description
config	ClientConfig	Client config; must include botProviderEndpoint
customChannelId	string	Unique channel id on your side (user id / session id)

Display

Prop	Type	Default	Description
title	string	—	Header title
avatar	string	—	Bot avatar URL
botTypingPlaceholder	string	正在輸入訊息	Placeholder shown while bot is typing
inputPlaceholder	string	—	Input box placeholder
fullScreen	boolean	false	Render in full-screen mode
className	string	—	Outer className
style	CSSProperties	—	Outer inline style
loadingComponent	ReactNode	—	Custom loading UI

Feature Toggles

Prop	Type	Description
enableUpload	boolean	Enable the image upload button
enableDocumentUpload	boolean	Enable the document upload button
enableExport	boolean	Enable conversation export
enableLoadConfigFromService	boolean	Load remote config (e.g. embedConfig) from bot provider
maintainConnectionWhenClosed	boolean	Keep the SSE connection alive when the window is closed
autoResetChannel	boolean	Default true. Set to false to preserve initMessages

See the Feature Toggles demo.

Init Messages & Events

Prop	Type	Description
initMessages	ConversationMessage[]	Initial messages loaded on mount
onSseMessage	(response, { conversation }) => void	Callback fired on every SSE event
onSseError	(error: unknown) => void	SSE error callback
onBeforeSendMessage	(params) => params	Modify params before sending. See before-send-message
onMessageSent	() => void	Fired after a message has been sent
onReset	() => void	Fired when the channel is reset
onClose	() => void	Fired when the chatbot is closed

Custom Rendering

Prop	Type	Description
theme	Partial<AsgardThemeContextValue>	Theme overrides — see Theme demo
renderHeader	() => ReactNode	Replace the default header — see Custom Header
renderMenu	() => ReactNode	Insert a menu between body and footer — see Render Menu
renderMessageContent	(props) => ReactNode	Replace message content rendering — see Custom Renderer
errorMessageRenderer	(message) => ReactNode	Custom error message renderer
customActions	ReactNode[]	Custom buttons rendered on the right of the header
messageActions	(message) => MessageActionConfig[]	Action buttons under each bot message
onMessageAction	(actionId, message) => void	Callback when a message action is clicked
onTemplateBtnClick	(payload, eventName, raw) => void	Callback for button-template emit actions
onErrorClick	(message) => void	Callback when an error message is clicked
defaultLinkTarget	'_blank' | '_self' | '_parent' | '_top'	Default target for links in messages

Auth

Prop	Type	Description
authState	'authenticated' | 'requireAuth' | 'requireApiKey' | ...	Current auth state — see Auth demo
onApiKeySubmit	(apiKey: string) => Promise<void>	Fired when the user submits an API key
onAuthError	(error: { isAuthError, isBotProviderError, errorDetail }) => void	Auth error callback

ClientConfig Fields

The config prop is of type ClientConfig:

Field	Type	Description
botProviderEndpoint	string	Required. Bot provider base URL
endpoint	string	@deprecated — use botProviderEndpoint
apiKey	string	Static API key
customHeaders	Record<string, string>	Custom HTTP headers (e.g. Authorization: Bearer ...)
transformSsePayload	(payload) => payload	Mutate the SSE payload before sending
debugMode	boolean	Enable debug logs
onRunInit / onMessage / onToolCall / onProcess / onRunDone / onRunError	EventHandler	Per-SSE-event handlers

Setting botProviderEndpoint to the literal string "skip" enables preview mode: no connection is established, only initMessages are rendered. Many demos on this site use preview mode.

See Also

• useChannel hook — build your own UI without <Chatbot>
• ConversationMessage type — the message union shape