# 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, opt…

Source: https://ui.jcsoftdev.com/docs/components/chat-thread

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-chatthread--default)
- [With Composer](/storybook/?path=/story/containers-chatthread--with-composer)
- [Empty](/storybook/?path=/story/containers-chatthread--empty)

## Source

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