Chat Ui

Name: Chat Ui
Author: inferen-sh

146

This skill provides a set of React-based components for building chat user interfaces, including chat containers, message displays, input fields, and typing indicators. It is designed for developers seeking to implement customizable and styled chat functionalities in their applications, leveraging Tailwind CSS and shadcn/ui design tokens. Key capabilities include managing messages, supporting different message roles, and creating real-time chat experiences with an easy-to-integrate, modular structure.

npx skills add https://github.com/inferen-sh/skills --skill chat-ui

Chat UI Components

Chat building blocks from ui.inference.sh. Chat UI Components

Quick Start

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

Components

Chat Container

import { ChatContainer } from "@/registry/blocks/chat/chat-container"
<ChatContainer>
  {/* messages go here */}
</ChatContainer>

Messages

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

import { ChatInput } from "@/registry/blocks/chat/chat-input"
<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="Type a message..."
  disabled={isLoading}
/>

Typing Indicator

import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"
{isTyping && <TypingIndicator />}

Full Example

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:

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

# 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

GitHub Owner

Owner: inferen-sh