JantonioFC/skillsbank

Composants d'interface de chat

Blocs de construction de chat provenant de ui.inference.sh.

Démarrage rapide

# Installer les composants de chat
npx shadcn@latest add https://ui.inference.sh/r/chat.json

Composants

Conteneur de chat

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

<ChatContainer>
  {/* messages ici */}
</ChatContainer>

Messages

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

<ChatMessage
  role="user"
  content="Bonjour, comment pouvez-vous m'aider ?"
/>

<ChatMessage
  role="assistant"
  content="Je peux vous aider pour beaucoup de choses !"
/>

Saisie de chat

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

<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="Tapez un message..."
  disabled={isLoading}
/>

Indicateur de frappe

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

{isTyping && <TypingIndicator />}

Exemple complet

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)
    // Envoyer à l'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 message

Rôle	Description
user	Messages utilisateur (alignés à droite)
assistant	Réponses IA (alignées à gauche)
system	Messages système (centrés)

Style

Les composants utilisent Tailwind CSS et les jetons de design de shadcn/ui :

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

Compétences associées

# Composant agent complet (recommandé)
npx skills add inference-sh/skills@agent-ui

# Widgets déclaratifs
npx skills add inference-sh/skills@widgets-ui

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

Documentation

• Discuter avec des agents - Créer des interfaces de chat
• Motifs UX d'agent - Bonnes pratiques UX pour le chat
• Streaming en temps réel - Réponses en streaming

Documentation des composants : ui.inference.sh/blocks/chat