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