Team chat framePro

A generic team chat window showing an agent replying in a channel: channels, grouped messages, an app label, reactions, threads, a streaming reply and a composer.

Markdown

On this page

ProAn agent replying in a channel

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/team-chat-frame

Usage

tsx

import { TeamChatFrame } from "@/components/ui/chatcn/pro/team-chat-frame"

<TeamChatFrame
  channel={{ name: "launch-room", members: 14 }}
  messages={messages}
  replying="Ledger"
  onSend={post}
/>

Consecutive messages from one author group under one name, with the time on hover. Agents get a rounded square avatar and an App label. A message with status: "streaming" shows a caret; error shows the fix and a retry. The list sticks to the bottom only while the reader is there. No brand and no logo: it reads as any team chat.

Examples

Every state

ProEmpty, failed reply, long content

Props

Prop	Type	Notes
`channel`	`{ name, topic?, members?, private? }`	The open channel
`messages`	`TeamChatMessage[]`	Author, time, body, reactions, replies, status
`channels`, `activeChannel`, `onChannelChange`		Shows the sidebar
`workspace`	`string`	Sidebar title
`replying`	`string`	Who is replying, above the composer
`composer`	`string \| false`	Placeholder, or hide it
`onSend`	`(text) => void`	Enter sends, Shift Enter adds a line
`width`, `height`	`number \| string`	Height default 520

Keyboard

Key	Action
`Enter`	Send, never during IME composition
`Shift Enter`	New line
`Tab`	Move through channels, retry and the composer

Accessibility

Messages are a log, each an article named with its author and time.
Reactions are read with their label and count; unread counts are read as unread.
The replying line is a polite live region.

Motion

Streaming text appends with no per word effect; the caret blinks and stops under reduced motion.