@starasia/chat-ui

Themeable chat / AI UI components for the Starasia design system. Presentational and controlled — pair with @starasia/chat-core for state + streaming, or drive them with your own data.

All colors reference --sa-* semantic tokens (with fallbacks), so the components adopt your brand and dark mode automatically when @starasia/css is loaded.

Install

pnpm add @starasia/chat-ui @starasia/chat-core

Peers: react, react-dom. Math rendering additionally needs katex + its CSS.

Components

Shell & conversation

| Component | Purpose | |---|---| | ChatLayout | Shell: optional sidebar / header / scrollable body / pinned composer | | Conversation | Auto-scrolling list with a "jump to latest" button | | Message | Bubble per role + avatar / name / timestamp / actions slots | | Avatar | src / initials / custom node | | Loader | Animated dots + optional label | | Actions | copy / regenerate + custom action buttons | | FeedbackBar | 👍 👎 with an optional inline comment box |

Input cluster

| Component | Purpose | |---|---| | Composer | Auto-grow textarea, Enter=send / Shift+Enter=newline, send/stop | | ComposerRich | Composer + attachments, toolbar, token counter, web-search toggle | | Uploader | Drag-and-drop / click file dropzone with size + type guards | | ModelSelector | Model picker dropdown (no @starasia/dropdown dependency) | | UsageMeter | Context / token usage bar with a warn threshold | | Prompt / Suggestion | Starter prompt cards / follow-up suggestion chips | | Selection | Floating toolbar of actions on selected text |

Content blocks

| Component | Purpose | |---|---| | Markdown | react-markdown + GFM; block code → CodeBlock; math opt-in | | CodeBlock | highlight.js + language label + copy button | | Citation / Source | Inline [N] citation pill / grouped source list | | Callout | info / success / warning / danger / note admonition | | Document | Document / artifact card with inline preview + download | | GeneratedImage | Generated-image card with prompt + loading state | | Attachment | Rendered list of attached / uploaded files | | Transcript | Read-only, data-driven conversation transcript |

These replace the earlier MessageThread / TypingIndicator / MarkdownRenderer / MessageActions names, which are no longer exported.

Quick start

import { useChat, createSSETransport } from "@starasia/chat-core";
import {
  ChatLayout, Conversation, Message, Composer, Markdown,
} from "@starasia/chat-ui";

function Chat() {
  const { messages, input, setInput, send, stop, status } =
    useChat({ transport: createSSETransport({ endpoint: "/api/chat" }) });

  return (
    <ChatLayout
      style={{ height: "100vh" }}
      composer={<Composer value={input} onChange={setInput} onSend={() => send()} onStop={stop} status={status} />}
    >
      <Conversation>
        {messages.map((m) => (
          <Message key={m.id} role={m.role} status={m.status}>
            <Markdown>{m.content}</Markdown>
          </Message>
        ))}
      </Conversation>
    </ChatLayout>
  );
}

Math (KaTeX)

Off by default to keep the bundle lean. To enable:

import "katex/dist/katex.min.css";
<Markdown enableMath>{content}</Markdown>

Notes

• Styles are injected once at runtime (no separate CSS import needed).
• Icons are inline SVG — no @starasia/icon dependency.
• Components are uncontrolled-scroll but controlled-data: you own the message list.

Dev

pnpm dev   # http://localhost:3011 — full ChatLayout demo with mock streaming
pnpm build