chat-ui

用途

chat-ui 是一套面向 React/Next.js 的聊天界面构建组件，来自 ui.inference.sh。它提供搭建 AI 对话界面所需的基础模块，帮助开发者快速组装聊天 UI，而不必从零编写消息列表、输入框等常见元素。

主要能力

组件包括：

• Chat Container（聊天容器）：包裹整个聊天区域。
• Chat Message（消息）：支持 user、assistant、system 三种角色，分别对应右对齐、左对齐和居中显示。
• Chat Input（输入框）：接收用户输入，支持 onSubmit 回调、placeholder 占位文本和 disabled 禁用状态。
• Typing Indicator（打字指示器）：在等待响应时显示。
• Avatars（头像）：资料中列为组件之一，但未提供具体用法示例。

组件使用 Tailwind CSS 和 shadcn/ui 设计令牌，可通过 className 自定义样式，例如为消息设置 bg-muted。

使用方式

安装聊天组件：

npx shadcn@latest add https://ui.inference.sh/r/chat.json

安装 belt CLI 技能：

npx skills add belt-sh/cli

引入并使用组件：

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

<ChatContainer>
  {/* messages go here */}
</ChatContainer>

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

<ChatMessage
  role="user"
  content="Hello, how can you help me?"
/>

<ChatMessage
  role="assistant"
  content="I can help you with many things!"
/>

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

<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="Type a message..."
  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)
    // 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>
  )
}

相关技能

# Full agent component (recommended)
npx skills add inference-sh/skills@agent-ui

# Declarative widgets
npx skills add inference-sh/skills@widgets-ui

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

文档

• Chatting with Agents - Building chat interfaces
• Agent UX Patterns - Chat UX best practices
• Real-Time Streaming - Streaming responses
• Component docs: ui.inference.sh/blocks/chat

适用场景

需要在 React/Next.js 项目中快速搭建 AI 对话界面、消息列表、输入交互和等待状态提示的开发者。

限制

资料未说明该组件的收费方式、价格、浏览器兼容性、具体平台支持范围及头像组件的详细用法，这些信息暂未提供。