chat-ui

--- name: chat-ui description: "Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conversation ui, chat building blocks" --- # 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) // Send to API... setIsLoading( [... prompt truncated for preview ...]