> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Chatbot

> Create conversational chat interfaces in Gradio

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

## Basic usage

```python theme={null}
import gradio as gr

def respond(message, history):
    return f"You said: {message}"

gr.ChatInterface(fn=respond).launch()
```

## Constructor

<ParamField path="value" type="list[MessageDict | Message] | Callable | None" default="None">
  Default messages in format `[{"role": "user", "content": "Hello"}, ...]`
</ParamField>

<ParamField path="height" type="int | str | None" default="400">
  Component height in pixels or CSS units
</ParamField>

<ParamField path="layout" type="Literal['panel', 'bubble'] | None" default="None">
  * `"panel"` - LLM-style layout
  * `"bubble"` - Message bubbles

  Defaults to "bubble"
</ParamField>

<ParamField path="latex_delimiters" type="list[dict] | None" default="None">
  Delimiters for LaTeX rendering. Defaults to `$$` for display math
</ParamField>

<ParamField path="render_markdown" type="bool" default="True">
  Whether to render markdown in messages
</ParamField>

<ParamField path="line_breaks" type="bool" default="True">
  Whether to enable GitHub-flavored line breaks
</ParamField>

<ParamField path="autoscroll" type="bool" default="True">
  Whether to auto-scroll to bottom on new messages
</ParamField>

<ParamField path="avatar_images" type="tuple[str | Path | None, str | Path | None] | None" default="None">
  Tuple of (user\_avatar, bot\_avatar) image paths or URLs
</ParamField>

<ParamField path="feedback_options" type="list[str] | tuple[str, ...] | None" default="('Like', 'Dislike')">
  Feedback options to display. "Like"/"Dislike" show as thumb icons
</ParamField>

<ParamField path="placeholder" type="str | None" default="None">
  Placeholder message when chatbot is empty. Supports Markdown/HTML
</ParamField>

<ParamField path="editable" type="Literal['user', 'all'] | None" default="None">
  * `"user"` - Allow editing user messages
  * `"all"` - Allow editing all messages
</ParamField>

## 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

```python theme={null}
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

```python theme={null}
import gradio as gr

chatbot = gr.Chatbot(
    avatar_images=(
        "user_avatar.png",
        "bot_avatar.png"
    )
)
```

### With thoughts/reasoning

```python theme={null}
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)
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.