@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/ChatToolCall.tsx

@@ -0,0 +1,190 @@
+"use client";
+/**
+ * ChatToolCall — the collapsible tool-call block promoted from the chatbot
+ * reference family (#1418): one mono line — tool(args) · status mark ·
+ * timing — that folds its output away, the Claude Code / opencode chain
+ * pattern. The tool name takes the surface accent; ok/error wear the
+ * money-adjacent up/down reads; a running call breathes its mark. Sits on the
+ * terminal palette (term-* tokens), so it expects a term-bg transcript around
+ * it. Uncontrolled by default (`defaultOpen`) or controlled via
+ * `open`/`onOpenChange`. Output arrives as `lines` (string, or
+ * `{ text, tone }` for up/down reads) and/or arbitrary `children` rendered
+ * after them — enough surface for digichat’s assistant-ui tool part UI (and
+ * any other chat surface) to rebuild tool_call / tool_result / trace kinds. A call with no
+ * body renders its head as a plain row (no button). The left rail, color-mix
+ * borders, and the running pulse live in styles/chat-widgets.css (import it
+ * once app-wide; see the wiring note there). Click the head to expand —
+ * a caret glyph plus `aria-expanded` carry the disclosure state.
+ */
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+export type ChatToolCallStatus = "running" | "ok" | "error";
+
+export type ChatToolCallLine = string | { text: string; tone?: "up" | "down" };
+
+export type ChatToolCallProps = {
+  /** Tool name, e.g. `digiquant.backtest` — rendered in the accent. */
+  name: string;
+  /** Argument summary, rendered `(args)` and truncated when long. */
+  args?: string;
+  /** ok → up ✓, error → down ✕, running → pulsing ellipsis. */
+  status?: ChatToolCallStatus;
+  /** Right-aligned mono timing, e.g. `412ms`. */
+  duration?: string;
+  /** Output lines; a tone gives a line the up/down read. */
+  lines?: ChatToolCallLine[];
+  /** Custom output body (hit lists, rich results) rendered after `lines`. */
+  children?: ReactNode;
+  defaultOpen?: boolean;
+  /** Controlled open state; omit to let the block own it. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+};
+
+const MARKS: Record<ChatToolCallStatus, { glyph: string; cls: string }> = {
+  running: { glyph: "…", cls: "tc-run text-term-mute" },
+  ok: { glyph: "✓", cls: "text-up" },
+  error: { glyph: "✕", cls: "text-danger" },
+};
+
+const HEAD_CLS =
+  "tc-head flex w-full items-center gap-[0.5rem] border-0 bg-transparent px-0 py-[0.2rem] text-start font-mono text-[0.78rem] text-term-ink";
+
+function HeadContent({
+  name,
+  args,
+  status,
+  duration,
+  showCaret,
+  isOpen,
+}: {
+  name: string;
+  args?: string;
+  status: ChatToolCallStatus;
+  duration?: string;
+  showCaret: boolean;
+  isOpen: boolean;
+}) {
+  const mark = MARKS[status];
+  return (
+    <>
+      {showCaret ? (
+        <span className={`tc-caret${isOpen ? " open" : ""}`} aria-hidden="true" />
+      ) : null}
+      {/* `shrink-0 whitespace-nowrap`: the name is the one thing on this line
+          that must never break. Without them a flex row under width pressure
+          (a narrow embed, a long args string) shrinks every item somewhat
+          evenly, and a shrunk name span with the default `white-space: normal`
+          wraps mid-word — "file_search" split "file_ / searc / h" across three
+          lines, observed live. `args` carries `min-w-0 flex-1 truncate` so it
+          is the one thing that absorbs the missing space, ellipsised, never
+          the name. */}
+      <span className="shrink-0 whitespace-nowrap text-accent">{name}</span>
+      {args ? (
+        <span className="min-w-0 flex-1 truncate text-term-mute">({args})</span>
+      ) : null}
+      <span className={`ms-auto shrink-0 ${mark.cls}`}>{mark.glyph}</span>
+      {duration ? (
+        <span className="min-w-[3rem] shrink-0 text-end text-[0.7rem] text-term-mute">
+          {duration}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+export function ChatToolCall({
+  name,
+  args,
+  status = "ok",
+  duration,
+  lines,
+  children,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  className,
+}: ChatToolCallProps) {
+  const [ownOpen, setOwnOpen] = useState(defaultOpen);
+  // Tracks a real user toggle. Streaming rows keep a stable React key across
+  // tool_call → tool_result (see digichat-ui activity-view identityKey), so
+  // `defaultOpen` can flip true on settle without a remount — and useState
+  // only reads its initial argument. Adopt the new default until the reader
+  // has touched the control; after that, their choice wins.
+  const touched = useRef(false);
+  const isOpen = open !== undefined ? open : ownOpen;
+  const hasBody = Boolean(lines?.length) || (children !== undefined && children !== null);
+
+  useEffect(() => {
+    if (open !== undefined) return;
+    if (touched.current) return;
+    if (defaultOpen) setOwnOpen(true);
+  }, [defaultOpen, open]);
+
+  const toggle = () => {
+    const next = !isOpen;
+    touched.current = true;
+    if (open === undefined) setOwnOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <div
+      className={`tc${status === "error" ? " tc--err" : ""}${
+        className ? ` ${className}` : ""
+      }`}
+    >
+      {hasBody ? (
+        <button
+          type="button"
+          className={`${HEAD_CLS} cursor-pointer`}
+          aria-expanded={isOpen}
+          onClick={toggle}
+        >
+          <HeadContent
+            name={name}
+            args={args}
+            status={status}
+            duration={duration}
+            showCaret
+            isOpen={isOpen}
+          />
+        </button>
+      ) : (
+        <div className={HEAD_CLS}>
+          <HeadContent
+            name={name}
+            args={args}
+            status={status}
+            duration={duration}
+            showCaret={false}
+            isOpen={false}
+          />
+        </div>
+      )}
+      {hasBody && isOpen ? (
+        <div className="pb-[0.4rem] ps-[0.75rem] pt-[0.15rem]">
+          {lines?.map((l) => {
+            const line = typeof l === "string" ? { text: l, tone: undefined } : l;
+            const tone =
+              line.tone === "down"
+                ? "text-down"
+                : line.tone === "up"
+                  ? "text-up"
+                  : "text-term-mute";
+            return (
+              <p
+                key={line.text}
+                className={`my-[0.12rem] font-mono text-[0.74rem] leading-[1.5] ${tone}`}
+              >
+                {line.text}
+              </p>
+            );
+          })}
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/chat/ChatTranscript.tsx

@@ -0,0 +1,60 @@
+/**
+ * Chat transcript — the term-surface scrollback pane behind the chatbot
+ * family (#1418): a rounded terminal wash (bg-term-bg / term-hair, mono)
+ * framing a column of <ChatMessage> turns. `session` draws the faint
+ * "digichat — session" header as ::before chrome; `flat` drops the floating
+ * shadow (the stream-transcript read); `scroll`/`live` turn the pane into a
+ * live thread (digichat-ui's .dc-thread rebuilds on this: overflow-y auto,
+ * thin scrollbar, contained overscroll, polite live region — the consumer
+ * owns scroll position). The pane deliberately sets no row gap, text size,
+ * or max-width: density is the consumer's call via className (the reference
+ * uses gap-[0.7rem] for turn stacks, leading-[2.1] for dense scrollback).
+ * Shadow, light-theme surface override, and the session ::before live in
+ * styles/chat-core.css (import it once app-wide).
+ */
+import type { ReactNode } from "react";
+
+export type ChatTranscriptProps = {
+  children?: ReactNode;
+  /** Faint session header line, e.g. `digichat — session`; omit for none. */
+  session?: string;
+  /** Drop the pane's floating shadow (flush embeds, dense scrollback). */
+  flat?: boolean;
+  /** Scrollable live-thread behavior (overflow-y auto, thin scrollbar). */
+  scroll?: boolean;
+  /** Announce streamed-in turns politely (aria-live region). */
+  live?: boolean;
+  className?: string;
+  "aria-label"?: string;
+};
+
+export function ChatTranscript({
+  children,
+  session,
+  flat,
+  scroll,
+  live,
+  className,
+  "aria-label": ariaLabel,
+}: ChatTranscriptProps) {
+  const cls = [
+    "chat-transcript",
+    flat ? "chat-transcript--flat" : "",
+    scroll ? "chat-transcript--scroll min-h-0 overflow-y-auto overscroll-contain" : "",
+    "flex flex-col rounded-none border border-term-hair bg-term-bg px-[1.15rem] pt-[1rem] pb-[1.2rem] font-mono",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      className={cls}
+      data-session={session}
+      aria-label={ariaLabel}
+      aria-live={live ? "polite" : undefined}
+      aria-atomic={live ? false : undefined}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/chat/ChatWidgetFrame.tsx

@@ -0,0 +1,107 @@
+/**
+ * ChatWidgetFrame — the framed-embed grammar promoted from the chatbot
+ * reference family (#1418): the container for any object the assistant drops
+ * into a turn. Two variants:
+ *   - "card" (default): a surface card — optional head row (micro-caps accent
+ *     eyebrow, mono title, right-side badge), unpadded body (children carry
+ *     their own padding, so grids can run edge-to-edge), and an optional
+ *     bordered actions footer. The result cards and approval gates.
+ *   - "embed": a bare hairline media frame (radius 0, overflow clipped) for
+ *     inline charts/graphs — the frame is promoted, the chart/graph internals
+ *     stay with the consumer.
+ * Server component — no state, no effects. Action buttons come from
+ * ChatWidgetButton (primary / ghost / danger tones); their transitions and
+ * color-mix hovers live in styles/chat-widgets.css (import it once app-wide;
+ * see the wiring note there). digichat 2.0 maps tool/status cards via
+ * assistant-ui part components onto these primitives (ChatActivities removed).
+ */
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type ChatWidgetFrameVariant = "card" | "embed";
+
+export type ChatWidgetFrameProps = {
+  /** Micro-caps accent line above the title, e.g. `backtest complete`. */
+  eyebrow?: string;
+  /** Mono head title, e.g. `trend_xsec · ETH-USD · 8y`. */
+  title?: ReactNode;
+  /** Right side of the head row — a status badge, an icon. */
+  badge?: ReactNode;
+  /** Footer action row (compose ChatWidgetButton here). Card variant only. */
+  actions?: ReactNode;
+  variant?: ChatWidgetFrameVariant;
+  /** Unpadded body — children own their padding. */
+  children?: ReactNode;
+  className?: string;
+  "aria-label"?: string;
+};
+
+export function ChatWidgetFrame({
+  eyebrow,
+  title,
+  badge,
+  actions,
+  variant = "card",
+  children,
+  className,
+  "aria-label": ariaLabel,
+}: ChatWidgetFrameProps) {
+  const frame =
+    variant === "embed"
+      ? "overflow-hidden rounded-none border border-hair"
+      : "overflow-hidden rounded-none border border-hair bg-surface";
+  const hasHead = Boolean(eyebrow || title || badge);
+
+  return (
+    <article className={`${frame}${className ? ` ${className}` : ""}`} aria-label={ariaLabel}>
+      {hasHead ? (
+        <header className="flex items-start justify-between gap-[1rem] border-b border-hair px-[1rem] py-[0.85rem]">
+          <div>
+            {eyebrow ? (
+              <p className="m-0 mb-[0.2rem] font-mono text-[0.58rem] uppercase tracking-[0.1em] text-accent">
+                {eyebrow}
+              </p>
+            ) : null}
+            {title ? <h3 className="m-0 font-mono text-[0.86rem] text-ink">{title}</h3> : null}
+          </div>
+          {badge ? <span className="shrink-0">{badge}</span> : null}
+        </header>
+      ) : null}
+      {children}
+      {actions ? (
+        <footer className="flex gap-[0.6rem] border-t border-hair px-[1rem] py-[0.8rem]">
+          {actions}
+        </footer>
+      ) : null}
+    </article>
+  );
+}
+
+export type ChatWidgetButtonTone = "primary" | "ghost" | "danger";
+
+export type ChatWidgetButtonProps = ComponentPropsWithoutRef<"button"> & {
+  /** primary = ink/paper fill, ghost = hairline, danger = danger-toned hairline. */
+  tone?: ChatWidgetButtonTone;
+};
+
+const TONES: Record<ChatWidgetButtonTone, string> = {
+  primary: "cw-btn--primary border-transparent bg-ink text-bg",
+  ghost: "cw-btn--ghost border-hair bg-transparent text-ink",
+  danger: "cw-btn--danger bg-transparent text-danger",
+};
+
+export function ChatWidgetButton({
+  tone = "ghost",
+  className,
+  type,
+  ...rest
+}: ChatWidgetButtonProps) {
+  return (
+    <button
+      type={type ?? "button"}
+      className={`cw-btn cursor-pointer rounded-none border px-[1rem] py-[0.5rem] font-mono text-[0.72rem] ${TONES[tone]}${
+        className ? ` ${className}` : ""
+      }`}
+      {...rest}
+    />
+  );
+}