chat-uilisted
Install: claude install-skill aiskillstore/marketplace
# Chat UI Components
Chat building blocks from [ui.inference.sh](https://ui.inference.sh).
## 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)
// Se