聊天UI组件Skill chat-ui

---

名称: chat-ui 描述: “来自 ui.inference.sh 的 React/Next.js 聊天用户界面构建块。组件：容器、消息、输入、打字指示器、头像。功能：聊天界面、消息列表、输入处理、流式传输。用途：构建自定义聊天用户界面、消息接口、AI助手。触发词：聊天用户界面、聊天组件、消息列表、聊天输入、shadcn 聊天,” react 聊天、聊天界面、消息用户界面、对话用户界面、聊天构建块

聊天用户界面组件

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

快速入门

# 安装聊天组件
npx shadcn@latest add https://ui.inference.sh/r/chat.json

组件

聊天容器

import { ChatContainer } from "/registry/blocks/chat/chat-container"

<ChatContainer>
  {/* 消息放在这里 */}
</ChatContainer>

消息

import { ChatMessage } from "/registry/blocks/chat/chat-message"

<ChatMessage
  role="user"
  content="你好，你能帮助我什么？"
/>

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

聊天输入

import { ChatInput } from "/registry/blocks/chat/chat-input"

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

打字指示器

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

{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)
    // 发送到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>
  )
}

消息变体

角色	描述
user	用户消息（右对齐）
assistant	AI 响应（左对齐）
system	系统消息（居中）

样式

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

<ChatMessage
  role="assistant"
  content="你好！"
  className="bg-muted"
/>

相关技能

# 完整代理组件（推荐）
npx skills add inference-sh/skills@agent-ui

# 声明式小部件
npx skills add inference-sh/skills@widgets-ui

# Markdown 渲染
npx skills add inference-sh/skills@markdown-ui

文档

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

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