# ChatThread

> A conversation, drawn: your messages on the right on the brand tint, replies in full width with a ◆, tool results in a card, a caret while text streams. It follows the bottom only if you are there; scrolled up to read, you stay put and a button offers the latest. Screen readers hear each reply once, when it is done, and never the history. No model and no network: messages in, the thread out.

Section: Chat. Docs: https://entrepta.vercel.app/docs/components/chat-thread

## Install

```bash
npx @entrepta/cli@latest add chat-thread
```

Files: `content/chat-thread.tsx`, `primitives/button.tsx`, `primitives/button-variants.ts`, `content/diamond.tsx`, `lib/icon.tsx`, `primitives/card.tsx`, `lib/overlay.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`, `@radix-ui/react-slot`.
Comes with: `button`, `diamond`, `icon-lib`, `card`, `overlay-lib`.

## Usage

```tsx
import { ChatThread } from "@/components/entrepta/chat-thread"

<ChatThread
  className="h-[560px]"
  messages={[
    { id: "1", role: "user", content: "Where did the money go?" },
    { id: "2", role: "assistant", content: text, ...(busy && { status: "streaming" }) },
    { id: "3", role: "tool", name: "spending_by_category", content: <BarList items={rows} /> },
  ]}
  empty={<EmptyState title="Ask about your money" />}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `messages` | `{ id, role, content, name?, time?, status?, error? }[]` | - | role is "user", "assistant", "tool" or "system"; status "streaming" or "error" |
| `empty` | `ReactNode` | - | Before the first message |
| `labels` | `{ thread?, you?, assistant?, latest?, failed? }` | - | Every word |
| `className` | `string` | - | Give it a height: it scrolls inside |