101-skills/superpowers

安裝 belt CLI 技能： npx skills add belt-sh/cli

聊天 UI 元件

來自 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 設計 Token：

<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

文件

• 與代理聊天 - 建立聊天介面
• 代理 UX 模式 - 聊天 UX 最佳實務
• 即時串流 - 串流回應

元件文件：ui.inference.sh/blocks/chat