技能名称: chat-ui
详细描述:

聊天UI组件

来自 ui.inference.sh 的聊天构建模块。

快速开始

bash

安装聊天组件

组件

聊天容器

tsx
import { ChatContainer } from @/registry/blocks/chat/chat-container

{/ 消息放在这里 /}

消息

tsx
import { ChatMessage } from @/registry/blocks/chat/chat-message

role=user
content=你好，你能帮我什么？
/>

role=assistant
content=我可以帮你做很多事情！
/>

聊天输入框

tsx
import { ChatInput } from @/registry/blocks/chat/chat-input

onSubmit={(message) => handleSend(message)}
placeholder=输入消息...
disabled={isLoading}
/>

输入指示器

tsx
import { TypingIndicator } from @/registry/blocks/chat/typing-indicator

{isTyping && }

完整示例

tsx
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)
// 发送到API...
setIsLoading(false)
}

return (

{messages.map((msg, i) => (

))}
{isLoading && }


)
}

消息变体

样式

组件使用Tailwind CSS和shadcn/ui设计令牌：

tsx
role=assistant
content=你好！
className=bg-muted
/>

相关技能

bash

完整代理组件（推荐）

声明式小部件

Markdown渲染

文档

• - 与代理聊天 - 构建聊天界面
• 代理用户体验模式 - 聊天用户体验最佳实践
• 实时流式传输 - 流式响应

组件文档：ui.inference.sh/blocks/chat