@abstractframework/panel-chat

Chat UI primitives for AbstractFramework-style UIs: thread rendering, message cards, a composer, and lightweight Markdown/JSON rendering.

Peer dependencies

Declared in panel-chat/package.json:

• react@^18, react-dom@^18
• @abstractframework/ui-kit (icons used by ChatMessageCard)

Install

• Workspace: add a dependency on @abstractframework/panel-chat
• npm (once published): npm i @abstractframework/panel-chat

Exported API

See panel-chat/src/index.ts for the authoritative export list. Common entry points:

• Components: ChatThread, ChatComposer, ChatMessageCard, ChatMessageContent
• Renderers: Markdown, JsonViewer
• Types: PanelChatMessage, ChatMessage, ChatAttachment, ChatStat
• Utils: chatToMarkdown, copyText, downloadTextFile, tryParseJson

Usage (typical)

import React, { useState } from "react";
import { ChatThread, ChatComposer, type ChatMessage } from "@abstractframework/panel-chat";

export function ChatView() {
  const [value, setValue] = useState("");
  const [messages, setMessages] = useState<ChatMessage[]>([]);

  return (
    <>
      <ChatThread messages={messages} autoScroll />
      <ChatComposer value={value} onChange={setValue} onSubmit={() => setMessages((m) => [...m, { role: "user", content: value }])} />
    </>
  );
}

Rendering rules

ChatMessageContent auto-detects JSON (via tryParseJson in panel-chat/src/utils.ts) and renders:

• JSON ⇒ JsonViewer
• otherwise ⇒ Markdown (or your renderMarkdown override)

Markdown is intentionally minimal and implemented in panel-chat/src/markdown.tsx (headings 1–5, code fences, lists, tables, blockquotes, hr, emphasis, and optional highlighting).

Styling & theming

• Import CSS in your app entrypoint (recommended):
  • import "@abstractframework/panel-chat/panel_chat.css";
  • import "@abstractframework/ui-kit/theme.css"; (shared tokens)

Related docs

• Getting started: docs/getting-started.md
• API reference: docs/api.md
• Architecture: docs/architecture.md