express.ui.Chat

express.ui.Chat(self, id, *, messages=(), on_error='auto', tokenizer=None)

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny.express import ui

# Set some Shiny page options
ui.page_opts(
    title="Hello Shiny Chat",
    fillable=True,
    fillable_mobile=True,
)

# Create a welcome message
welcome = """
Hi! This is a simple Shiny `Chat` UI. Enter a message below and I will
simply repeat it back to you. For more examples, see this
[folder of examples](https://github.com/posit-dev/py-shiny/tree/main/shiny/templates/chat).
"""

# Create a chat instance
chat = ui.Chat(
    id="chat",
    messages=[welcome],
)

# Display it
chat.ui()


# Define a callback to run when the user submits a message
@chat.on_user_submit
async def handle_user_input(user_input: str):
    # Append a response to the chat
    await chat.append_message(f"You said: {user_input}")


## file: requirements.txt
shiny


## file: _template.json
{
  "type": "app",
  "id": "chat-hello",
  "title": "Hello Shiny Chat",
  "next_steps": [
    "Run the app with `shiny run app.py`."
  ]
}

Methods

Name	Description
ui	Create a UI element for this Chat.

ui

express.ui.Chat.ui(
    messages=None,
    placeholder='Enter a message...',
    width='min(680px, 100%)',
    height='auto',
    fill=True,
    icon_assistant=None,
    **kwargs,
)

Create a UI element for this Chat.

Parameters

messages : Optional[Sequence[str | ChatMessageDict]] = None

A sequence of messages to display in the chat. Each message can be either a string or a dictionary with content and role keys. The content key should contain the message text, and the role key can be “assistant” or “user”.

placeholder : str = 'Enter a message…'

Placeholder text for the chat input.

width : CssUnit = 'min(680px, 100%)'

The width of the UI element.

height : CssUnit = 'auto'

The height of the UI element.

fill : bool = True

Whether the chat should vertically take available space inside a fillable container.

icon_assistant : HTML | Tag | TagList | None = None

The icon to use for the assistant chat messages. Can be a HTML or a tag in the form of HTML or Tag. If None, a default robot icon is used.

kwargs : TagAttrValue = {}

Additional attributes for the chat container element.