101-skills/superpowers

Instale o skill via belt CLI: npx skills add belt-sh/cli

Componentes de Chat UI

Blocos de construção de chat do ui.inference.sh.

Início Rápido

# Instalar componentes de chat
npx shadcn@latest add https://ui.inference.sh/r/chat.json

Componentes

Container de Chat

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

<ChatContainer>
  {/* mensagens vão aqui */}
</ChatContainer>

Mensagens

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

<ChatMessage
  role="user"
  content="Olá, como você pode me ajudar?"
/>

<ChatMessage
  role="assistant"
  content="Posso ajudar com muitas coisas!"
/>

Input de Chat

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

<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="Digite uma mensagem..."
  disabled={isLoading}
/>

Indicador de Digitação

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

{isTyping && <TypingIndicator />}

Exemplo Completo

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)
    // Enviar para a 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>
  )
}

Variantes de Mensagem

Papel	Descrição
user	Mensagens do usuário (alinhadas à direita)
assistant	Respostas da IA (alinhadas à esquerda)
system	Mensagens do sistema (centralizadas)

Estilização

Os componentes usam Tailwind CSS e tokens de design do shadcn/ui:

<ChatMessage
  role="assistant"
  content="Olá!"
  className="bg-muted"
/>

Habilidades Relacionadas

# Componente completo de agente (recomendado)
npx skills add inference-sh/skills@agent-ui

# Widgets declarativos
npx skills add inference-sh/skills@widgets-ui

# Renderização de Markdown
npx skills add inference-sh/skills@markdown-ui

Documentação

• Conversando com Agentes - Construindo interfaces de chat
• Padrões de UX de Agentes - Melhores práticas de UX de chat
• Streaming em Tempo Real - Respostas em streaming

Documentação dos componentes: ui.inference.sh/blocks/chat