用途
chat-ui 是一套面向 React/Next.js 的聊天界面构建组件，来自 ui.inference.sh。它把搭建对话界面所需的常见元素拆分为可复用组件，帮助开发者快速组装出聊天 UI，而不必从零编写消息列表、输入框等基础结构。
主要能力
组件包括：
- ChatContainer：聊天容器，用于包裹消息区域。
- ChatMessage：消息组件，支持 role 属性区分消息类型。
- ChatInput：聊天输入框，支持 onSubmit 回调、placeholder 占位文本和 disabled 禁用状态。
- TypingIndicator：打字指示器，用于展示对方正在输入的状态。
- 头像（avatars）：资料中列为组件之一，但未提供具体用法示例。
消息变体（Message Variants）按 role 区分：
- user：用户消息，右对齐。
- assistant：AI 回复，左对齐。
- system：系统消息，居中显示。
样式方面，组件使用 Tailwind CSS 和 shadcn/ui 设计令牌，可通过 className 自定义样式，例如为 ChatMessage 传入 className="bg-muted"。
使用方式
安装聊天组件：
npx shadcn@latest add https://ui.inference.sh/r/chat.json
安装 belt CLI skill：
npx skills add belt-sh/cli
组件导入示例：
import { ChatContainer } from "@/registry/blocks/chat/chat-container" import { ChatMessage } from "@/registry/blocks/chat/chat-message" import { ChatInput } from "@/registry/blocks/chat/chat-input" import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"
也可从统一入口导入：
import { ChatContainer, ChatMessage, ChatInput, TypingIndicator } from "@/registry/blocks/chat"
基本用法示例：
<ChatContainer> {/* messages go here */} </ChatContainer>
<ChatMessage role="user" content="Hello, how can you help me?" /> <ChatMessage role="assistant" content="I can help you with many things!" />
<ChatInput onSubmit={(message) => handleSend(message)} placeholder="Type a message..." disabled={isLoading} />
{isTyping && <TypingIndicator />}
完整示例（含状态管理）：
import { ChatContainer, ChatMessage, ChatInput, TypingIndicator } from "@/registry/blocks/chat"
export function Chat() { const [messages, setMessages] = useState([]) const [isLoading, setIsLoading] = useState(false)
const handleSend = async (content: string) => { setMessages(prev => [...prev, { role: 'user', content }]) setIsLoading(true) // Send to API... setIsLoading(false) }
return ( <ChatContainer> {messages.map((msg, i) => ( <ChatMessage key={i} role={msg.role} content={msg.content} /> ))} {isLoading && <TypingIndicator />} <ChatInput onSubmit={handleSend} disabled={isLoading} /> </ChatContainer> ) }
相关技能
- 完整 agent 组件（推荐）：npx skills add inference-sh/skills@agent-ui
- 声明式 widgets：npx skills add inference-sh/skills@widgets-ui
- Markdown 渲染：npx skills add inference-sh/skills@markdown-ui
文档
- Chatting with Agents：构建聊天界面
- Agent UX Patterns：聊天 UX 最佳实践
- Real-Time Streaming：流式响应
- 组件文档：ui.inference.sh/blocks/chat
适用场景
适合需要在 React/Next.js 项目中快速搭建 AI 对话、客服聊天或助手交互界面的开发者，尤其是已使用 shadcn/ui 与 Tailwind CSS 技术栈的项目。
限制
资料未提供收费、价格、平台兼容范围、性能表现等信息。头像组件的具体用法、流式响应的实现细节以及各文档链接的完整内容暂未提供。