Chat Ui

# Chat UI Components

Chat building blocks from ui.inference.sh.

!Chat UI Components

Quick Start

```bash # Install chat components npx shadcn@latest add https://ui.inference.sh/r/chat.json ```

Components

Chat Container

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

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

Messages

```tsx 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!" /> ```

Chat Input

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

<ChatInput onSubmit={(message) => handleSend(message)} placeholder="Type a message..." disabled={isLoading} /> ```

Typing Indicator

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

{isTyping && <TypingIndicator />} ```

Full Example

```tsx 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> ) } ```

Message Variants

| Role | Description | |------|-------------| | `user` | User messages (right-aligned) | | `assistant` | AI responses (left-aligned) | | `system` | System messages (centered) |

Styling

Components use Tailwind CSS and shadcn/ui design tokens:

```tsx <ChatMessage role="assistant" content="Hello!" className="bg-muted" /> ```

Related Skills

```bash # 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 ```

Documentation

• 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