Chat

The chat pattern is a set of presentational, slot-based building blocks for AI chat UIs: a message row, a smart-scrolling message list, an auto-growing composer, and a translucent header shell. It carries no data or model types and binds no i18n — you feed content through children (pair it with @yuhuanowo/yunui/content to render markdown message bodies) and inject app specifics through slots. It lives on its own subpath, @yuhuanowo/yunui/chat.

Install

The chat subpath ships with YunUI — there are no extra peer dependencies beyond what YunUI already bundles (framer-motion, lucide-react):

1pnpm add @yuhuanowo/yunui

Import

1import {
2  ChatMessage,
3  ChatMessageList,
4  ChatComposer,
5  ChatHeader,
6} from "@yuhuanowo/yunui/chat";

Everything together

A ChatHeader, a ChatMessageList holding ChatMessage rows (the assistant's body rendered with MarkdownRenderer from @yuhuanowo/yunui/content), and a controlled ChatComposer. Type a message and press Enter — the list sticks to the bottom as it grows.

<ChatMessageList>
  <ChatMessage role="user">Hi!</ChatMessage>
</ChatMessageList>

The pieces

Each block is exported standalone so you can assemble your own layout:

• Chat Message — a single row: avatar, header, body, footer and hover actions.
• Chat Message List — the scroll container with smart stick-to-bottom.
• Chat Composer — the auto-growing input with Enter-to-send.
• Chat Header — the translucent header shell with slots.