ChatThread

Business conversation between a customer, a bot and staff: incoming messages on the start side, outgoing ones (bot, staff) on the end side with distinct tones, day separators, optional delivery status, system notes and a composer slot. It is a live log that stays at the bottom while new items arrive and you are already there. Colors come from the kit tokens in both schemes. The ai/ chat parts model user and assistant only; this one models the three authors of a shop chat.

Import

import { ChatThread } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/chat-thread.

Usage

<ChatThread items={items} now={now} locale="es" timeZone="America/Lima" />

Props

Prop	Type	Default	Description
items *	readonly ChatThreadItem[]
composer	ReactNode		Slot under the thread, usually a Textarea or PromptInput with a send button.
labels	Partial<ChatThreadLabels>		Texts of the thread (name, day labels, authors, delivery states). English by default; see chatThreadLabels.
label	string		Accessible name of the thread. Defaults to labels.conversation.
onRetry	((id: string) => void)		Called by the retry button of a failed message. Without it the button is not shown.
empty	ReactNode		Shown instead of the log while there are no items.
locale	string		Intl locale for times and day labels.
timeZone	string		Time zone for times and day breaks; the local one when omitted.
now	ChatTimestamp		The instant “Today” refers to. Pass a fixed value for stable output. Defaults to the current time.
className	string
classNames	Partial<Record<ChatThreadPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

Storybook stories

• Default
• With Composer
• Empty

Source

packages/ui/src/containers/chat-thread/chat-thread.tsx