# 聊天界面组件来自 [ui.inference.sh]() 的聊天构建块。 ## 快速入门 # 安装聊天组件 npx shadcn@latest 添加 https://ui.inference.sh/r/chat.json ## 组件 ### 聊天容器从“@/registry/blocks/chat/chat-container”导入 { ChatContainer } <聊天容器> {/* 消息放在这里 */} ### 消息从“@/registry/blocks/chat/chat-message”导入 { ChatMessage } <聊天消息角色=“用户” content="您好，您能帮我什么忙吗？" /> <聊天消息角色=“助理” content="我可以帮助你做很多事情！" /> ### 聊天输入从“@/registry/blocks/chat/chat-input”导入 { ChatInput } <聊天输入 onSubmit={(消息)=>handleSend(消息)} placeholder=“输入消息...” 禁用={正在加载} /> ### 打字指示器从“@/registry/blocks/chat/typing-indicator”导入 { TypingIndicator } {isTyping && } ## 完整示例导入{ 聊天容器，聊天消息，聊天输入，打字指示器， } 来自“@/registry/blocks/chat” 导出函数 Chat() { const [消息，setMessages] = useState([]) const [isLoading, setIsLoading] = useState(false) const handleSend = async (内容: 字符串) => { setMessages(prev => [...prev, { 角色: '用户', 内容 }]) 设置正在加载（true） // 发送到API... setIsLoading(假) } 返回（ <聊天容器> {messages.map((msg, i) => ( ))} {isLoading && } ） } ## 消息变体角色 |描述 ---|--- `用户` |用户消息（右对齐） `助理` | AI 响应（左对齐） `系统` |系统消息（居中） ## 造型组件使用 Tailwind CSS 和 shadcn/ui 设计令牌： <聊天消息角色=“助理” 内容=“你好！” 类名=“bg-静音” /> ## 相关技能 # 完整代理组件（推荐） npx 技能添加 inference-sh/skills@agent-ui # 声明式小部件 npx 技能添加 inference-sh/skills@widgets-ui # Markdown 渲染 npx 技能添加 inference-sh/skills@markdown-ui ## 文档 * [与 Agent 聊天]() \- 构建聊天界面 * [代理用户体验模式]() \- 聊天用户体验最佳实践 * [实时流媒体]() \- 流媒体响应组件文档：[ui.inference.sh/blocks/chat]()

猫用户界面

包含技能