build69
Sign inGet API key
build69  /  Components  /  Chat & Collab  /  Chat

Chat

v1.0.12Updated 27 Aug 2026

Threaded chat conversation view: bubbles with avatars, timestamps, sender grouping, typing indicator, attachment slots.

View source← Back to catalog

Preview

Live · 16 stories
DefaultOpen ↗
▸Why this is recommendedchatmessagingthreadconversation+2

The default, out-of-the-box Chat.

Recommended for+14
  • ✓DM / team chat surface
  • ✓Customer support thread
  • ✓Agent conversation history
Tags+6
chatmessagingthreadconversationbubblesdefault
Features+4
  • Left / right bubble alignment by sender
  • Per-message avatar + timestamp
  • Sender grouping (consecutive messages collapse)
  • Typing indicator
  • Attachment slot (image / file)
  • System / status messages
  • Day separators
  • Reactions
  • i18n: every built-in string overridable via the labels prop (ChatLabels); counts and attachment file sizes format through LocaleProvider
Not recommended for−2
  • ✕Email-style threads (use EmailThreeColumn)
  • ✕Activity log (use Timeline)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Chat" })

Usage

import { Chat } from '@/components/patterns/chat';

<Chat messages={msgs} currentUserId={me.id} onSend={send} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
messages

Ordered messages

ChatMessage[]yes
currentUserId

ID for "me" alignment

string—
onSend

Send message callback

function—
labels

Override any built-in UI string (i18n); merged over English defaults (DEFAULT_CHAT_LABELS) and provided to every sub-component via context — each sub-component also accepts its own labels override

Partial<ChatLabels>—

Related

Platform docsAll componentsSource files