Chat

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.

view .md

Preview

today

Installation

terminal

bash

npx @entrepta/cli@latest add chat-thread

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

chat-thread.tsx

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