Skip to main content
The Chatbot component displays conversational messages with support for text, images, audio, video, and interactive elements.

Basic usage

Constructor

list[MessageDict | Message] | Callable | None
default:"None"
Default messages in format [{"role": "user", "content": "Hello"}, ...]
int | str | None
default:"400"
Component height in pixels or CSS units
Literal['panel', 'bubble'] | None
default:"None"
  • "panel" - LLM-style layout
  • "bubble" - Message bubbles
Defaults to “bubble”
list[dict] | None
default:"None"
Delimiters for LaTeX rendering. Defaults to $$ for display math
bool
default:"True"
Whether to render markdown in messages
bool
default:"True"
Whether to enable GitHub-flavored line breaks
bool
default:"True"
Whether to auto-scroll to bottom on new messages
tuple[str | Path | None, str | Path | None] | None
default:"None"
Tuple of (user_avatar, bot_avatar) image paths or URLs
list[str] | tuple[str, ...] | None
default:"('Like', 'Dislike')"
Feedback options to display. “Like”/“Dislike” show as thumb icons
str | None
default:"None"
Placeholder message when chatbot is empty. Supports Markdown/HTML
Literal['user', 'all'] | None
default:"None"
  • "user" - Allow editing user messages
  • "all" - Allow editing all messages

Events

  • change - Triggered when messages change
  • select - Triggered when message is selected
  • like - Triggered when message is liked/disliked
  • retry - Triggered when retry is clicked
  • undo - Triggered when undo is clicked
  • clear - Triggered when cleared
  • copy - Triggered when message is copied

Examples

With multimodal messages

With custom avatars

With thoughts/reasoning