@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/digichat-context-meter.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useAuiState } from "@assistant-ui/react";
+
+import {
+  CONTEXT_BAR_CELLS,
+  computeContextShares,
+} from "./digichat-context-meter-shares";
+import { meterTone } from "./digichat-meter-tone";
+
+/**
+ * Context used, as the segmented digichat cube bar. The bar is the same
+ * one that used to sit inside the breakdown card: its lit span is the
+ * fraction of the model's window the last turn sent, coloured by
+ * system/tools/user. Hovering (or focusing) the bar opens the legend.
+ *
+ * The provider reports only the prompt total (inputTokens). The system /
+ * tools / user split is therefore an estimate: user text is counted from the
+ * thread, tool schemas get a flat per-tool allowance, and the remainder is
+ * the system prompt. Values carry a `~` so the card never implies precision
+ * the backend does not send.
+ *
+ * The split itself lives in `digichat-context-meter-shares.ts`: the three
+ * quantities are a partition of the reported total, so no share can print
+ * above 100 and the three always describe the same turn.
+ */
+
+export const CONTEXT_WINDOWS: Record<string, number> = {
+  "deepseek/deepseek-v4.1-flash-1017": 1_048_576,
+  "deepseek/deepseek-v4.1-flash": 1_048_576,
+  "openai/gpt-oss-120b": 128_000,
+  "openai/gpt-6-luna": 1_050_000,
+  "google/gemini-3.5-flash-lite": 1_000_000,
+  "z-ai/glm-5.3-flash": 1_048_576,
+  "z-ai/glm-5.3": 1_000_000,
+  "qwen/qwen3.8-flash": 1_000_000,
+  "qwen/qwen3.8-27b": 262_144,
+  "google/gemma-4-31b-it": 262_144,
+  "google/gemini-3.8-flash": 1_048_576,
+  "xiaomi/mimo-v2.6-flash": 1_048_576,
+  "xiaomi/mimo-v2.6-pro": 1_048_576,
+  "minimax/minimax-m3": 200_000,
+  "z-ai/glm-4.7-flash": 200_000,
+  // models.dev context_window for gpt-5.6-terra (bare Foundry id and the openai/ slug).
+  "gpt-5.6-terra": 1_050_000,
+  "openai/gpt-5.6-terra": 1_050_000,
+  // The OpenAI models an Azure AI Foundry agent is usually deployed on. A
+  // deployment whose id is not listed here gets no bar at all (see the
+  // unknown-window rule below).
+  "gpt-4o": 128_000,
+  "gpt-4o-mini": 128_000,
+  "gpt-4.1": 1_047_576,
+  "gpt-4.1-mini": 1_047_576,
+  "gpt-4.1-nano": 1_047_576,
+  "o3": 200_000,
+  "o3-mini": 200_000,
+  "o4-mini": 200_000,
+};
+
+/**
+ * Tokens for a model id that has its own window. A built-in key such as
+ * `constructor` is not one.
+ */
+export function contextWindowFor(modelId: string): number | undefined {
+  const id = modelId.trim();
+  if (!id || !Object.hasOwn(CONTEXT_WINDOWS, id)) return undefined;
+  return CONTEXT_WINDOWS[id];
+}
+
+const format = (n: number): string =>
+  n >= 1_000_000
+    ? `${(n / 1_000_000).toFixed(1)}m`
+    : n >= 1000
+      ? `${(n / 1000).toFixed(1)}k`
+      : String(n);
+
+const textOf = (message: unknown): string => {
+  const parts = (message as { content?: unknown; parts?: unknown })?.parts;
+  if (Array.isArray(parts)) {
+    return parts
+      .filter(
+        (part): part is { type: string; text: string } =>
+          typeof part === "object" &&
+          part !== null &&
+          (part as { type?: unknown }).type === "text" &&
+          typeof (part as { text?: unknown }).text === "string",
+      )
+      .map((part) => part.text)
+      .join("");
+  }
+  const content = (message as { content?: unknown })?.content;
+  return typeof content === "string" ? content : "";
+};
+
+export function DigichatContextMeter({
+  model,
+  toolCount = 0,
+}: {
+  model: string;
+  /** Connected MCP + catalog tool count, used for the schema estimate. */
+  toolCount?: number;
+}) {
+  // Select primitives, never a fresh object: useAuiState compares with
+  // Object.is, and a new `{input, userChars}` every render loops forever.
+  const reportedInput = useAuiState((s) => {
+    const messages = s.thread.messages;
+    for (let index = messages.length - 1; index >= 0; index -= 1) {
+      const custom = (
+        messages[index]?.metadata as {
+          custom?: { usage?: { inputTokens?: unknown } };
+        }
+      )?.custom;
+      if (typeof custom?.usage?.inputTokens === "number") {
+        return custom.usage.inputTokens;
+      }
+    }
+    return undefined;
+  });
+  // The model the backend says it served the turn with. A tenant whose
+  // session model is empty (a Foundry agent) is named here instead.
+  const reportedModel = useAuiState((s) => {
+    const messages = s.thread.messages;
+    for (let index = messages.length - 1; index >= 0; index -= 1) {
+      const custom = (
+        messages[index]?.metadata as {
+          custom?: { usage?: { inputTokens?: unknown }; model?: unknown };
+        }
+      )?.custom;
+      if (
+        typeof custom?.usage?.inputTokens === "number" &&
+        typeof custom.model === "string"
+      ) {
+        return custom.model;
+      }
+    }
+    return undefined;
+  });
+  const userChars = useAuiState((s) => {
+    let total = 0;
+    for (const message of s.thread.messages) {
+      if ((message as { role?: string }).role === "user") {
+        total += textOf(message).length;
+      }
+    }
+    return total;
+  });
+
+  // A report with its own window is the model that served the turn.
+  // A report with no window leaves the session model, so OCC keeps the
+  // bar. The house session is empty until digigraph reports an id.
+  const reported = reportedModel?.trim() || "";
+  const session = model.trim();
+  const activeModel =
+    reported && contextWindowFor(reported) !== undefined ? reported : session;
+  const window = contextWindowFor(activeModel);
+  // No bar without a known window: the fill is a fraction of it.
+  if (window === undefined) return null;
+
+  // No fabricated fill: until a turn reports usage the grid stays empty.
+  const input = reportedInput ?? 0;
+  const label = `${format(input)} / ${format(window)} tokens`;
+  // The same amber/orange/red scale the usage meter uses: a full context is
+  // as much a limit as a spent turn budget. The tone tints the bar only; the
+  // legend keeps the system/tools/user colours that explain the split.
+  const tone = meterTone(window > 0 ? input / window : 0);
+
+  // The three shares are a partition of the reported total, so no share
+  // can print above 100 and the printed numbers describe the same turn.
+  const {
+    systemTokens,
+    toolTokens,
+    userTokens,
+    systemPct: sysPct,
+    toolPct: toolPct,
+    userPct: userPct,
+    systemCells: sysCells,
+    toolCells: toolCells,
+    userCells: userCells,
+  } = computeContextShares({ input, userChars, toolCount, window });
+
+  return (
+    <span className={`aui-context-meter-wrap ${tone}`.trim()}>
+      <span
+        className="aui-context-meter"
+        role="img"
+        tabIndex={0}
+        aria-label={`Context ${label}`}
+      >
+        {Array.from({ length: CONTEXT_BAR_CELLS }, (_, index) => {
+          const tone =
+            index < sysCells
+              ? "is-system"
+              : index < sysCells + toolCells
+                ? "is-tools"
+                : index < sysCells + toolCells + userCells
+                  ? "is-user"
+                  : "";
+          return (
+            <span
+              key={index}
+              className={tone ? `aui-context-bar-cell ${tone}` : "aui-context-bar-cell"}
+            />
+          );
+        })}
+      </span>
+      <span className="aui-context-card" role="tooltip">
+        <span className="aui-context-card-row aui-context-card-total">
+          <span>Context</span>
+          <span>
+            {format(input)} / {format(window)}
+          </span>
+        </span>
+        <span className="aui-context-card-row">
+          <span className="aui-context-legend">
+            <span className="aui-context-swatch is-system" aria-hidden />
+            System
+          </span>
+          <span>
+            ~{format(systemTokens)} · {sysPct}%
+          </span>
+        </span>
+        <span className="aui-context-card-row">
+          <span className="aui-context-legend">
+            <span className="aui-context-swatch is-tools" aria-hidden />
+            Tools
+          </span>
+          <span>
+            ~{format(toolTokens)} · {toolPct}%
+          </span>
+        </span>
+        <span className="aui-context-card-row">
+          <span className="aui-context-legend">
+            <span className="aui-context-swatch is-user" aria-hidden />
+            User
+          </span>
+          <span>
+            ~{format(userTokens)} · {userPct}%
+          </span>
+        </span>
+      </span>
+    </span>
+  );
+}

package/src/components/chat/skins/digichat-meter-tone.ts

@@ -0,0 +1,26 @@
+/**
+ * Fill thresholds shared by the usage meter and the context meter.
+ *
+ * One scale for both bars: amber once more than half is spent, orange past
+ * four fifths, red past nine tenths. The colours themselves live in
+ * `chat-digichat.css` (`--warn` / `--danger`, mixed for the middle band), so
+ * a theme restyle never has to touch this module.
+ */
+export const METER_WARN_AT = 0.6;
+export const METER_HOT_AT = 0.8;
+export const METER_CRITICAL_AT = 0.9;
+
+export type MeterTone = "" | "is-warn" | "is-hot" | "is-critical";
+
+/**
+ * The tone class for a fill ratio. Zero and anything non-finite stay
+ * untoned: an empty bar is not "nearly full", and a bar with no denominator
+ * must not borrow a warning colour.
+ */
+export function meterTone(ratio: number): MeterTone {
+  if (!Number.isFinite(ratio) || ratio <= 0) return "";
+  if (ratio >= METER_CRITICAL_AT) return "is-critical";
+  if (ratio >= METER_HOT_AT) return "is-hot";
+  if (ratio >= METER_WARN_AT) return "is-warn";
+  return "";
+}

package/src/components/chat/skins/digichat-usage-meter.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { CONTEXT_BAR_CELLS } from "./digichat-context-meter-shares";
+import { meterTone } from "./digichat-meter-tone";
+
+export type UsageMeterValue = {
+  /** Turns the visitor has spent. */
+  used: number;
+  /** Turns the gate currently allows: the free budget, or the unlocked one. */
+  limit: number;
+};
+
+/**
+ * The trial gate's turn budget as the segmented digichat cube bar.
+ *
+ * The bar sits in the composer toolbar where the context meter would be. It
+ * is a gate number, not a token estimate: a tenant whose backend reports no
+ * usage (a Foundry agent) still has a budget to show, and one that does
+ * report usage still has turns that matter more than tokens.
+ *
+ * Shape: a small budget (the three free turns) gets one cell per turn, so
+ * each turn is visible as a cell. A large one (the unlocked hundred) fills
+ * the same 25-cell grid the context bar uses, proportionally. Both occupy the
+ * same toolbar slot, so unlocking does not move the row.
+ *
+ * The fill is deliberately the used fraction: the bar starts empty and grows
+ * as turns are spent, the way the context bar grows. Unlocking resets the
+ * fraction because the denominator changes, which is the point of the
+ * unlock, not a regression.
+ */
+export function usageBarShape(
+  used: number,
+  limit: number,
+): { cells: number; lit: number } {
+  // A non-finite count has no place on the bar; treat it as unspent rather
+  // than letting NaN reach the aria-label or the cell count.
+  const finite = (value: number): number =>
+    Number.isFinite(value) ? value : 0;
+  const safeLimit = Math.max(0, Math.floor(finite(limit)));
+  const safeUsed = Math.max(0, Math.min(safeLimit, Math.floor(finite(used))));
+  if (safeLimit === 0) return { cells: 0, lit: 0 };
+  if (safeLimit <= CONTEXT_BAR_CELLS) {
+    return { cells: safeLimit, lit: safeUsed };
+  }
+  // Never zero-lit while a turn has been spent: a proportional fill that
+  // rounds to nothing would read as "no turns used". Never full until the
+  // budget is: at 99/100 one cell stays dark, so a full bar always means
+  // "no turns left".
+  if (safeUsed === 0) return { cells: CONTEXT_BAR_CELLS, lit: 0 };
+  if (safeUsed >= safeLimit) {
+    return { cells: CONTEXT_BAR_CELLS, lit: CONTEXT_BAR_CELLS };
+  }
+  const proportional = Math.round((safeUsed / safeLimit) * CONTEXT_BAR_CELLS);
+  return {
+    cells: CONTEXT_BAR_CELLS,
+    lit: Math.max(1, Math.min(CONTEXT_BAR_CELLS - 1, proportional)),
+  };
+}
+
+export function DigichatUsageMeter({ usage }: { usage: UsageMeterValue }) {
+  const { cells, lit } = usageBarShape(usage.used, usage.limit);
+  if (cells === 0) return null;
+
+  const finite = (value: number): number =>
+    Number.isFinite(value) ? value : 0;
+  const limit = Math.max(0, Math.floor(finite(usage.limit)));
+  const used = Math.max(0, Math.min(limit, Math.floor(finite(usage.used))));
+  const left = Math.max(0, limit - used);
+  const tone = meterTone(limit > 0 ? used / limit : 0);
+
+  return (
+    <span className={`aui-context-meter-wrap aui-usage-meter-wrap ${tone}`.trim()}>
+      <span
+        className={`aui-context-meter aui-usage-meter ${tone}`.trim()}
+        role="img"
+        tabIndex={0}
+        aria-label={`Turns: ${left} of ${limit} left`}
+        data-testid="embed-usage-meter"
+      >
+        {Array.from({ length: cells }, (_, index) => (
+          <span
+            key={index}
+            className={
+              index < lit ? "aui-context-bar-cell is-usage" : "aui-context-bar-cell"
+            }
+          />
+        ))}
+      </span>
+      <span className="aui-context-card" role="tooltip">
+        <span className="aui-context-card-row aui-context-card-total">
+          <span>Turns left</span>
+          <span>{left}</span>
+        </span>
+        <span className="aui-context-card-row">
+          <span>Used</span>
+          <span>
+            {used} / {limit}
+          </span>
+        </span>
+      </span>
+    </span>
+  );
+}

package/src/components/chat/skins/digichat.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import "../../../styles/chat-core.css";
+import "../../../styles/chat-widgets.css";
+import "../../../styles/chat-aui.css";
+import "../../../styles/chat-digichat.css";
+import "../../../styles/digichat-boot-loader.css";
+
+import { useCallback, type FormEvent } from "react";
+import {
+  DigichatThread,
+  type ComposerLayout,
+} from "../DigichatThread";
+
+import {
+  useComposerCopy,
+  useSkinChrome,
+} from "../stock/skin-chrome";
+import {
+  useDeployUi,
+  useDisclosureUi,
+} from "../stock/deploy-ui-context";
+import { workVisibilityForView } from "../stock/skin-types";
+import { useStockComposerGateSubmit } from "../stock/stock-send-gate";
+import { useEmbedChatPrefsOptional } from "../stock/embed-chat-prefs";
+import {
+  useSkinSlashPalette,
+  type DigichatSkinSlash,
+} from "../stock/skin-slash-palette";
+import { DigichatComposerToolbar } from "./digichat-composer-toolbar";
+
+// The slash wiring types moved to the skin-agnostic palette module; the
+// re-export keeps `@digithings-ai/ui/chat/skins` imports unchanged.
+export type {
+  DigichatSkinSlash,
+  SkinPaletteApply,
+  SkinPaletteFrame,
+  SkinPaletteKind,
+  SkinSlashAction,
+  SkinSlashAdapterLike,
+  SkinSlashCommand,
+  SkinSlashExtraDef,
+} from "../stock/skin-slash-palette";
+
+export type DigichatSkinCopy = {
+  welcome?: string;
+  placeholder?: string;
+  suggestions?: readonly string[];
+};
+
+export type DigichatSkinOptions = {
+  /**
+   * Explicit override — a deployment can still force compact regardless of
+   * chrome mode. Omitted means the expanded composer everywhere.
+   */
+  composerLayout?: ComposerLayout;
+  /** Welcome/placeholder/suggestion copy (host: BASELINE_EMBED_* constants). */
+  copy?: DigichatSkinCopy;
+  /**
+   * Page-context attachment name (host: PAGE_CONTEXT_ATTACHMENT_NAME).
+   * Protocol default mirrors the app literal ("page-context.html").
+   */
+  hiddenAttachmentName?: string;
+  /** Product slash wiring; absent = slash/mention adapters stay disabled. */
+  slash?: DigichatSkinSlash;
+  /**
+   * Private session, set per session by the host. Hides reasoning text and
+   * tool-call output and shows the mode badge. Display-only: the model still
+   * produces the work, and the stores still hold the real text.
+   */
+  privateMode?: boolean;
+};
+
+/**
+ * First-party digichat Thread. Explicit ThreadSkinView branch — never fall
+ * through to product-page-assistant. Always left-aligned regardless of YAML.
+ */
+/** Module-scope so it is a stable component reference, not recreated per render. */
+
+
+export function DigichatSkin({
+  composerLayout,
+  copy,
+  // Protocol default mirrors the app's PAGE_CONTEXT_ATTACHMENT_NAME
+  // ("page-context.html"); hosts pass it explicitly.
+  hiddenAttachmentName = "page-context.html",
+  slash: slashWiring,
+  privateMode,
+}: DigichatSkinOptions) {
+  const { welcome, welcomeBody, placeholder, suggestions } = useComposerCopy(
+    copy?.welcome ?? "",
+    copy?.placeholder ?? "",
+  );
+  const skinChrome = useSkinChrome();
+  const { pageContext } = skinChrome;
+  const reasoningUi = useDisclosureUi("reasoning");
+  const toolCallsUi = useDisclosureUi("toolCalls");
+  // The raw view level is what decides how much of the work is shown.
+  const deployUi = useDeployUi();
+  const workVisibility = workVisibilityForView(deployUi.view);
+  const gateSubmit = useStockComposerGateSubmit();
+  const prefs = useEmbedChatPrefsOptional();
+  // The `/` palette logic is shared with every other skin (SkinPaletteBridge).
+  const palette = useSkinSlashPalette({ slash: slashWiring, privateMode });
+  const paletteSubmit = palette.handleSubmit;
+
+  const onComposerSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      if (paletteSubmit(event)) return;
+      gateSubmit?.(event);
+    },
+    [paletteSubmit, gateSubmit],
+  );
+
+  return (
+    <DigichatThread
+      welcome={welcome}
+      welcomeBody={welcomeBody}
+      suggestions={
+        suggestions.length > 0 ? suggestions : (copy?.suggestions ?? [])
+      }
+      placeholder={placeholder}
+      onComposerSubmit={onComposerSubmit}
+      composerLayout={composerLayout ?? "expanded"}
+      slash={palette.slash}
+      mention={palette.mention}
+      hiddenAttachmentNames={
+        pageContext === "silent" ? [hiddenAttachmentName] : undefined
+      }
+      reasoningMode={reasoningUi.mode}
+      toolCallsMode={toolCallsUi.mode}
+      workVisibility={workVisibility}
+      privateMode={privateMode}
+      composerToolbar={
+        prefs && prefs.prefs.toolbar !== false ? (
+          <DigichatComposerToolbar prefs={prefs} />
+        ) : undefined
+      }
+      scrollbars={prefs?.prefs.scrollbars ?? "always"}
+      scrollMode={prefs?.prefs.scroll}
+      density={prefs?.prefs.density ?? "default"}
+    />
+  );
+}

package/src/components/chat/skins/expo-react-native.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Thread } from "../stock/thread.aui";
+import { useComposerCopy } from "../stock";
+
+/**
+ * Web facsimile of the official Expo React Native Assistant.
+ * The native starter is vendored at
+ * `reference/assistant-ui-templates/expo-react-native` and is not imported
+ * by Next.js (`react-native` / Expo stay out of the web bundle).
+ */
+export function ExpoReactNative() {
+  const { title } = useComposerCopy("How can I help you today?", "Send a message...");
+  return (
+    <div className="flex h-full items-center justify-center bg-zinc-200 p-4">
+      <div className="flex h-[min(740px,100%)] w-[min(390px,100%)] flex-col overflow-hidden rounded-[2rem] border border-zinc-300 bg-white shadow-2xl">
+        <header className="flex shrink-0 items-center justify-between border-b border-zinc-200 px-4 py-3">
+          <div className="text-sm font-semibold tracking-tight">
+            {title || "assistant-ui"}
+          </div>
+          <div className="text-xs text-zinc-500">Expo</div>
+        </header>
+        <div className="min-h-0 flex-1 bg-white">
+          <Thread />
+        </div>
+      </div>
+    </div>
+  );
+}