Chat Ui

作者 inference-sh0aabdc6f47f7無授權條款763 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫2 天前更新

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

僅含說明Software Development Design & Creative

AI 產生的概覽

提供 React/Next.js 聊天介面基礎元件：容器、訊息、輸入框、輸入中指示器與頭像。

功能: 此技能為 React 與 Next.js 專案提供聊天介面基礎元件，包含聊天容器、面向使用者、助理與系統角色的訊息元件、聊天輸入框，以及輸入中指示器。它說明如何透過 shadcn CLI 安裝這些元件，以及如何將它們組合成可用的聊天檢視。它也提到使用 Tailwind CSS 與 shadcn/ui 設計權杖進行樣式設定，並指向相關技能與文件。
適用情境: 適用於在 React 或 Next.js 中建置自訂聊天或訊息介面，例如 AI 助理前端。當你需要現成的訊息清單、輸入處理與輸入中指示器，而不是完整的代理元件時，它很合適。
執行需求: 需要搭配 Tailwind CSS 與 shadcn/ui 的 React 或 Next.js 專案。安裝元件時透過 npx 使用 shadcn CLI，需要網路存取。此技能不附帶指令碼，僅包含說明與程式碼範例。

Install the belt CLI skill: npx skills add belt-sh/cli

Chat UI Components

Chat building blocks from ui.inference.sh.

[Chat UI Components]

Quick Start

Components

Chat Container

tsx

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

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

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}/>

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 />}

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

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

Styling

Components use Tailwind CSS and shadcn/ui design tokens:

Related Skills

bash

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Declarative widgetsnpx skills add inference-sh/skills@widgets-ui
# Markdown renderingnpx skills add inference-sh/skills@markdown-ui

# Full agent component (recommended)npx skills add inference-sh/skills@agent-ui
# Declarative widgetsnpx skills add inference-sh/skills@widgets-ui
# Markdown renderingnpx 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

來源與署名

來源：inference-sh/skills位於ui/chat-ui提交0aabdc6

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

Chat Ui

Chat UI Components

Quick Start

Components

Chat Container

Messages

Chat Input

Typing Indicator

Full Example

Message Variants

Styling

Related Skills

Documentation

來源與署名

更多來自 inference-sh/skills 的技能

Widgets Ui

Tools Ui

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Testing Strategy

Tech Debt

System Design