@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/gallery-thread/tooltip-icon-button.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { type ComponentPropsWithRef, forwardRef } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
+import { Button } from "../../../ui/button";
+import { cn } from "./cn";
+
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+export const TooltipIconButton = forwardRef<
+  HTMLButtonElement,
+  TooltipIconButtonProps
+>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+  return (
+    <TooltipProvider delay={0}>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              dress="chat"
+              variant="ghost"
+              size="icon"
+              {...rest}
+              className={cn(
+                // `inline-flex` + centring keeps the glyph in the middle of the
+                // box; without it the button falls back to `display: block` and
+                // the icon drifts below the baseline of the composer row.
+                "aui-button-icon inline-flex size-6 items-center justify-center p-1 active:scale-90",
+                className,
+              )}
+              ref={ref}
+            />
+          }
+        >
+          {children}
+          <span className="aui-sr-only sr-only">{tooltip}</span>
+        </TooltipTrigger>
+        <TooltipContent side={side}>{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+});
+
+TooltipIconButton.displayName = "TooltipIconButton";

package/src/components/chat/gallery-thread/typed-welcome-copy.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+/**
+ * The welcomeBody lines under the headline. Rendered statically: the picked
+ * handoff has no typing, so the copy appears with the hero and nothing
+ * reflows (no caret, no ghost spans, no per-character reveal).
+ */
+export function TypedWelcomeCopy({ lines }: { lines: readonly string[] }) {
+  return (
+    <>
+      {lines.map((line, index) => (
+        <p key={`${index}:${line}`} className="aui-thread-welcome-copy">
+          {line}
+        </p>
+      ))}
+    </>
+  );
+}

package/src/components/chat/gallery-thread/ui/tooltip.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+/**
+ * Product tooltip for the gallery Thread: the canonical kit Tooltip
+ * (`@digithings-ai/ui/ui/tooltip`, Base UI) with the chat's long-standing
+ * no-arrow ruling (#3818) via the kit's `hideArrow` prop, and a zero
+ * `sideOffset` default. Behaviour (hover + focus open, Escape dismiss, aria
+ * wiring) is the kit's; only the arrow is suppressed, which keeps the
+ * product's rendered look and `gallery-thread.source.test.ts` intact.
+ */
+import type { ComponentProps } from "react";
+
+import { TooltipContent as KitTooltipContent } from "../../../../ui/tooltip";
+
+export { Tooltip, TooltipTrigger, TooltipProvider } from "../../../../ui/tooltip";
+
+export function TooltipContent({
+  sideOffset = 0,
+  ...props
+}: ComponentProps<typeof KitTooltipContent>) {
+  return <KitTooltipContent hideArrow sideOffset={sideOffset} {...props} />;
+}

package/src/components/chat/gallery-thread/work-chain-summary.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useAuiState } from "@assistant-ui/react";
+import { DotMatrix } from "../DotMatrix";
+import { cn } from "./cn";
+import { workStatusText } from "./work-status";
+
+/**
+ * The one line that replaces the whole chain.
+ *
+ * This is the retired "hidden" view level: the chain collapsed into a single
+ * status row. The level is gone — a client folds the chain to its titles
+ * instead — so nothing in the product renders this any more; the thread
+ * renderer still holds the branch that would, and it draws from the same
+ * `workStatusText` the chain header uses so the two can never disagree.
+ */
+export function WorkChainSummary({
+  indices,
+  className,
+}: {
+  indices: readonly number[];
+  className?: string;
+}) {
+  const parts = useAuiState((s) => s.message.parts);
+  const status = workStatusText(parts, indices);
+
+  return (
+    <div
+      data-slot="aui_work-chain-summary"
+      className={cn(
+        "aui-work-chain-summary text-ink-mute flex items-center gap-2 py-1.5 text-sm",
+        className,
+      )}
+    >
+      <DotMatrix
+        state={status.running ? "loading" : "success"}
+        decorative
+        className="size-4 shrink-0"
+      />
+      <span
+        data-slot="aui_work-chain-summary-label"
+        className="inline-block leading-none"
+      >
+        {status.label}
+      </span>
+    </div>
+  );
+}

package/src/components/chat/gallery-thread/work-chain.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../ui/collapsible";
+import { DisclosureChevron } from "../disclosure-chevron";
+import { WorkStatusLead } from "../work-status-lead";
+import { cn } from "./cn";
+import { useWorkChain } from "../trace-grouping/use-work-chain";
+
+/** The upstream disclosure duration. */
+const ANIMATION_DURATION = 200;
+
+/**
+ * The whole chain of reasoning and tool calls under one header.
+ *
+ * assistant-ui keeps the reasoning disclosure and the tool-group disclosure
+ * independent. We put them under a single "Working" header so the chain
+ * collapses as one unit, and the header stays open for the whole turn (not
+ * only while a group happens to be running) so the block never flickers shut
+ * between two tool calls.
+ *
+ * The first manual toggle wins, as it does upstream.
+ *
+ * Folded, the header is a live status line: it names the tool that is
+ * running, or counts what the chain did once it is done. Expanded, it goes
+ * back to the plain "Working" / "Worked" title, because the reasoning and the
+ * tool calls are right there underneath — the header no longer has to
+ * describe them.
+ */
+export function WorkChain({
+  children,
+  indices,
+  openAtRest = false,
+  foldOnAnswer = false,
+  followedByText = false,
+  className,
+}: {
+  children: ReactNode;
+  /**
+   * The message-part indices this chain holds. The folded header describes
+   * them ("Working — digisearch", "Used 3 tools"); without them the header
+   * has nothing to describe and keeps the plain title.
+   */
+  indices?: readonly number[];
+  /**
+   * The chain stays open for good: nothing ever folds (the verbose level).
+   * The balanced level instead opens the chain while the turn runs and folds
+   * it away when the turn ends.
+   */
+  openAtRest?: boolean;
+  /**
+   * Fold as soon as the answer starts streaming, rather than when the turn
+   * ends (the quiet level: the titles are there while the agent works, then
+   * they get out of the way of the answer).
+   */
+  foldOnAnswer?: boolean;
+  /** The chain group is running (a tool or the reasoning is streaming). */
+  running?: boolean;
+  /**
+   * A text part follows this chain in the message: the agent wrote
+   * something, so the work that came before it is finished. Only the answer
+   * ends a work run — a second run of tool calls and reasoning without text
+   * in between belongs to the same block.
+   */
+  followedByText?: boolean;
+  className?: string;
+}) {
+  // The fold, the header title and the marker are the shared trace rules
+  // (`trace-grouping`), which the base skins render too.
+  const { open, onOpenChange, title, marker, outcome } = useWorkChain({
+    indices,
+    openAtRest,
+    foldOnAnswer,
+    followedByText,
+  });
+
+  return (
+    <Collapsible
+      data-slot="aui_work-chain"
+      data-outcome={outcome}
+      open={open}
+      onOpenChange={onOpenChange}
+      className={cn("aui-work-chain", className)}
+      style={{ "--animation-duration": `${ANIMATION_DURATION}ms` } as React.CSSProperties}
+    >
+      <CollapsibleTrigger
+        data-slot="aui_work-chain-trigger"
+        className="aui-work-chain-trigger aui-work-status group/trigger"
+      >
+        {/* Same lead as the pre-response loader: the marker and the label
+            keep their slots, so the handoff reads as the words changing. */}
+        <WorkStatusLead marker={marker} label={title} />
+        <DisclosureChevron />
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        // Kept mounted: the rows inside keep their own state (and the DOM
+        // stays stable) while the chain is folded away.
+        keepMounted
+        data-slot="aui_work-chain-content"
+        className="aui-work-chain-content overflow-hidden ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none data-closed:animate-collapsible-up data-open:animate-collapsible-down data-closed:fill-mode-forwards data-closed:pointer-events-none [--tw-duration:var(--animation-duration)]"
+      >
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/chat/gallery-thread/work-status.ts

@@ -0,0 +1,66 @@
+/**
+ * The live one-line status of a work chain.
+ *
+ * The same chain is described in two places: the collapsed header (which
+ * reads as a status line — "Working — digisearch", "Used 3 tools") and the
+ * retired summary row. Both must say exactly the same thing, so the sentence
+ * is computed once here, from the message parts and the chain's own indices.
+ */
+
+/**
+ * The part fields the status needs. Kept structural so the function stays a
+ * pure module: no React, no runtime import, and callable from a test with
+ * plain objects.
+ */
+type WorkStatusPart = {
+  readonly type: string;
+  readonly toolName?: string | undefined;
+  readonly status?: { readonly type?: string | undefined } | undefined;
+};
+
+import { EN_TRACE_T, type TraceT } from "../trace-i18n/core";
+
+export type { WorkStatusPart };
+
+export type WorkStatus = {
+  /**
+   * The status sentence: what is running now, or what the chain did once it
+   * is done.
+   */
+  label: string;
+  /** A tool call or the reasoning is still streaming. */
+  running: boolean;
+};
+
+/**
+ * Describe a chain of reasoning and tool calls.
+ *
+ * While something runs the line names it; once the chain is done it counts
+ * the tools it ran. A chain that only reasoned says so — there is no tool to
+ * count, so "Thought" is the honest answer.
+ */
+export function workStatusText(
+  parts: readonly WorkStatusPart[],
+  indices: readonly number[],
+  tr: TraceT = EN_TRACE_T,
+): WorkStatus {
+  const chain = indices
+    .map((index) => parts[index])
+    .filter((part): part is WorkStatusPart => part !== undefined);
+
+  const tools = chain.filter((part) => part.type === "tool-call");
+  const running = tools.find((part) => part.status?.type === "running");
+  const thinking = chain.some(
+    (part) => part.type === "reasoning" && part.status?.type === "running",
+  );
+
+  const label = running
+    ? tr.t("workingOn", { tool: running.toolName ?? tr.t("toolFallbackName") })
+    : thinking
+      ? tr.t("thinking")
+      : tools.length > 0
+        ? tr.plural("usedTools", tools.length)
+        : tr.t("thought");
+
+  return { label, running: running !== undefined || thinking };
+}

package/src/components/chat/overlay-scrollbar.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+/**
+ * Square overlay scrollbar for scroll containers whose native bar is hidden.
+ *
+ * Safari draws its overlay scrollbar as an OS capsule and ignores
+ * `::-webkit-scrollbar` shape rules, so the native bar is hidden and this
+ * square track/thumb is painted instead. It follows scroll position, keyboard
+ * scrolling and size changes, and can be dragged. `width` sets the depth tier:
+ * the thread viewport is widest, menus next, tool-call dumps narrowest.
+ */
+
+import { useEffect, useState, type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+
+import { cn } from "../../lib/utils";
+
+export function OverlayScrollbar({
+  targetRef,
+  width = 6,
+  className,
+}: {
+  targetRef: RefObject<HTMLElement | null>;
+  width?: number;
+  className?: string;
+}) {
+  const [thumb, setThumb] = useState<{ top: number; height: number } | null>(null);
+
+  useEffect(() => {
+    const el = targetRef.current;
+    if (!el) return;
+    const update = () => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      if (scrollHeight <= clientHeight + 1) {
+        setThumb(null);
+        return;
+      }
+      const height = Math.max(12, Math.round((clientHeight / scrollHeight) * clientHeight));
+      const maxTop = clientHeight - height;
+      const maxScroll = scrollHeight - clientHeight;
+      setThumb({
+        top: maxScroll > 0 ? Math.round((scrollTop / maxScroll) * maxTop) : 0,
+        height,
+      });
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [targetRef]);
+
+  if (!thumb) return null;
+
+  const startDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const el = targetRef.current;
+    if (!el) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const startScroll = el.scrollTop;
+    const maxScroll = el.scrollHeight - el.clientHeight;
+    const track = el.clientHeight - thumb.height;
+    const move = (e: PointerEvent) => {
+      if (track <= 0) return;
+      el.scrollTop = startScroll + ((e.clientY - startY) / track) * maxScroll;
+    };
+    const end = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end, { once: true });
+  };
+
+  return (
+    <div className={cn("aui-overlay-scroll", className)} style={{ width }} aria-hidden>
+      <div
+        className="aui-overlay-thumb"
+        style={{ top: thumb.top, height: thumb.height }}
+        onPointerDown={startDrag}
+      />
+    </div>
+  );
+}

package/src/components/chat/sanitize-mermaid-svg.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import DOMPurify, { type Config } from "dompurify";
+
+/**
+ * One sanitizer for every mermaid render path in this package.
+ *
+ * `mermaid-diagram.tsx` renders through `beautiful-mermaid`, a third-party
+ * renderer, and injects the returned string with `dangerouslySetInnerHTML`
+ * (inline diagram + zoom overlay). The diagram source is model-authored and
+ * therefore attacker-influenceable, so the renderer's output must not reach
+ * the DOM unfiltered — a future escapeXml regression upstream should not be
+ * able to become XSS here.
+ *
+ * The other mermaid surface, `ChatMermaidBlock`, renders through mermaid under
+ * `securityLevel: "strict"`, whose bundled DOMPurify copy strips scripts,
+ * event handlers and `javascript:` URLs before returning. This applies the
+ * equivalent policy to the `beautiful-mermaid` path so the two agree: DOMPurify
+ * restricted to the SVG namespace, plus `dominant-baseline` (which mermaid's
+ * strict config also lets through). The one deliberate divergence is
+ * `<foreignObject>`, which mermaid strict admits and this forbids — the
+ * HTML-integration escape hatch is not needed by `beautiful-mermaid`, which
+ * emits none, and this path runs without HTML labels by design.
+ *
+ * Fails closed: when there is no DOM (SSR / plain Node) DOMPurify reports
+ * `isSupported === false` and cannot sanitize, so this returns "" rather than
+ * passing the raw string through. The client render, where a DOM exists, fills
+ * the diagram in.
+ */
+const SANITIZE_CONFIG: Config = {
+  USE_PROFILES: { svg: true, svgFilters: true },
+  ADD_ATTR: ["dominant-baseline"],
+};
+
+export function sanitizeMermaidSvg(svg: string): string {
+  if (!DOMPurify.isSupported) return "";
+  return DOMPurify.sanitize(svg, SANITIZE_CONFIG);
+}

package/src/components/chat/skins/SOURCE.md

@@ -0,0 +1,36 @@
+# Official assistant-ui templates (11) + first-party `digichat`
+
+Ids 1–11 match assistant-ui `list_templates`. `digichat` is the first-party
+Thread (`@digithings-ai/ui/chat/thread`). Client containers pick one with
+`chrome.skin` / `DIGICHAT_CHROME_SKIN` (fail closed). Baked YAML for each id
+lives at `apps/digichat/config/examples/skins/<id>.yaml` and is copied into
+the image at `/app/config/examples/skins/`. Point `DIGICHAT_CONFIG_PATH` at
+that file (or overlay `DIGICHAT_CHROME_SKIN`) and `/embed` + `POST /api/chat`
+use it — `DIGICHAT_EMBED_TENANTS` is not required. Do not fetch
+assistant-ui.com at request time.
+
+| id | What mounts in the Next.js web container |
+|---|---|
+| `base` | Fixed Base demo Thread (`skins/base/thread.tsx`) |
+| `chatgpt` | Vendored ChatGPT clone Thread |
+| `claude` | Vendored Claude clone Thread |
+| `grok` | Vendored Grok clone Thread |
+| `gemini` | Vendored Gemini clone Thread |
+| `perplexity` | Vendored Perplexity clone Thread |
+| `react-ink` | Web facsimile of the Ink TTY demo. Original: `reference/.../react-ink` + `cli/` |
+| `expo-react-native` | Phone-frame facsimile. Original: `reference/.../expo-react-native` |
+| `base-assistant-ui` | Configurable Base: same Thread plus official `brandTheme` / labels shell |
+| `webpage-assistant` | Docs layout + sidebar/modal Thread |
+| `product-page-assistant` | Product dashboard + floating modal Thread |
+| `digichat` | Gallery `/chatbot` Thread via `@digithings-ai/ui/chat/thread` (not a LAYOUT_SKINS owner). |
+
+Downloads (fixed demos): `https://www.assistant-ui.com/api/xulux/demo-download?slug=<id>`
+Expo: `https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-expo`
+
+Edits vs upstream for in-app mounts:
+
+- import paths rewritten into this tree / stock markdown + tool fallback
+- `CloneThreadShell` stripped (digichat owns thread-list via persistence)
+- webpage / product-page use the parent `AssistantRuntimeProvider` (no nested demo runtime)
+- Ink / Expo originals are not imported by Next.js
+- `digichat` is the gallery `/chatbot` Thread (`@digithings-ai/ui/chat/thread`), not a downloaded catalog template