AI/Chat

Chat

A production-ready conversational chat UI with streaming support, typing indicators, and a clean message layout for user and assistant roles. Wire it up to any LLM API.

import { Chat } from "@animui/ui"

Basic usage

Live demo below — type a message and press Enter or click Send.

AI Assistant

Hello! I'm your AI assistant. How can I help you today?

You

Can you show me an example of the Chat component?

AI Assistant

Of course! This is the Chat component from Steal Shadow. It supports user and assistant messages, a textarea input, streaming responses, and is styled for both light and dark mode.

Streaming mode

Set streaming: true on a message to render it with the StreamingText component. Append tokens to content as they arrive from your ReadableStream, then set streaming: false when done.

Streaming mode renders tokens as they arrive — no additional state management needed beyond appending to content.

Props

Prop	Type	Default	Description
`messages`	`ChatMessage[]`	—	Controlled list of messages. Each message has id, role ('user' \| 'assistant' \| 'system' \| 'tool'), and content.
`onSend`	`(message: string) => void`	—	Called when the user submits a message. Update messages state in this callback.
`loading`	`boolean`	`false`	When true, shows an animated typing-dots indicator as the last message.
`disabled`	`boolean`	`false`	Disables the input and send button.
`placeholder`	`string`	`"Send a message…"`	Placeholder text for the message textarea.
`assistantName`	`string`	`"Assistant"`	Display name shown next to assistant messages.
`assistantAvatar`	`React.ReactNode`	—	Custom avatar element rendered next to assistant messages.
`userAvatar`	`React.ReactNode`	—	Custom avatar element rendered next to user messages.
`renderMessage`	`(msg: ChatMessage) => React.ReactNode`	—	Override the default message renderer for custom markdown, code blocks, etc.
`suggestions`	`string[]`	`[]`	Suggestion chips shown when there are no messages yet.
`inputFooter`	`React.ReactNode`	—	Extra content rendered below the input (e.g. model selector, disclaimer).
`className`	`string`	—	Additional classes applied to the outer chat container.

Accessibility

✓Message list uses role="log" and aria-live="polite" — screen readers announce new messages.
✓Send button has aria-label="Send message".
✓Fully keyboard-navigable: Tab to textarea, Enter to send, Shift+Enter for newline.