The Chatbot component displays conversational messages with support for text, images, audio, video, and interactive elements.
Basic usage
import gradio as gr
def respond(message, history):
return f"You said: {message}"
gr.ChatInterface(fn=respond).launch()
Constructor
value
list[MessageDict | Message] | Callable | None
default:"None"
Default messages in format [{"role": "user", "content": "Hello"}, ...]
height
int | str | None
default:"400"
Component height in pixels or CSS units
layout
Literal['panel', 'bubble'] | None
default:"None"
"panel" - LLM-style layout"bubble" - Message bubbles
Defaults to “bubble”latex_delimiters
list[dict] | None
default:"None"
Delimiters for LaTeX rendering. Defaults to $$ for display math
Whether to render markdown in messages
Whether to enable GitHub-flavored line breaks
Whether to auto-scroll to bottom on new messages
avatar_images
tuple[str | Path | None, str | Path | None] | None
default:"None"
Tuple of (user_avatar, bot_avatar) image paths or URLs
feedback_options
list[str] | tuple[str, ...] | None
default:"('Like', 'Dislike')"
Feedback options to display. “Like”/“Dislike” show as thumb icons
Placeholder message when chatbot is empty. Supports Markdown/HTML
editable
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
import gradio as gr
def chat(message, history):
return {
"role": "assistant",
"content": ["Here's an image:", gr.Image("cat.jpg")]
}
gr.ChatInterface(fn=chat).launch()
With custom avatars
import gradio as gr
chatbot = gr.Chatbot(
avatar_images=(
"user_avatar.png",
"bot_avatar.png"
)
)
With thoughts/reasoning
import gradio as gr
messages = [
{
"role": "assistant",
"content": "Let me think about this...",
"metadata": {"title": "Reasoning", "status": "done"}
},
{
"role": "assistant",
"content": "Here's my answer!"
}
]
chatbot = gr.Chatbot(value=messages)