@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/skin-chrome.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+/**
+ * Deploy chrome copy that official assistant-ui templates read at runtime.
+ * ProductStockShell provides it. /baseline preview has no provider — skins
+ * keep their catalog demo strings.
+ */
+
+import { createContext, useContext } from "react";
+import { DEFAULT_THREAD_SKIN, type ThreadSkin } from "../skins/thread-skins";
+import type { ChromeMode, PageContextMode } from "./skin-types";
+
+export type SkinChromeValue = {
+  skin: ThreadSkin;
+  theme: "dark" | "light";
+  /** Deploy `chrome.mode`. Compact composer on embed / modal / sidebar. */
+  mode: ChromeMode;
+  title?: string;
+  welcome?: string;
+  welcomeBody?: readonly string[];
+  placeholder?: string;
+  suggestions: readonly string[];
+  accent: { color: string; foreground: string } | null;
+  modelPicker: boolean;
+  /**
+   * Deploy `features.pageContext`. `silent` keeps the system
+   * `page-context.html` attachment out of the composer and sent-message chips.
+   */
+  pageContext: PageContextMode;
+  /**
+   * Whether the "powered by digichat" credit may render on this surface.
+   *
+   * Resolved by the host from the deployment / embed tenant
+   * (`chrome.attribution` / `tenantCfg.attribution`), so an explicit
+   * `attribution: false` opt-out suppresses the skin's credit. Without this the
+   * embed's opt-out was ignored (the skins mounted the credit unconditionally),
+   * and a titled opted-out tenant rendered two credits — the header
+   * parenthetical *and* the skin footer (m2502 review, M2).
+   */
+  attribution: boolean;
+};
+
+export const DEFAULT_SKIN_CHROME: SkinChromeValue = {
+  skin: DEFAULT_THREAD_SKIN,
+  theme: "light",
+  mode: "embed",
+  suggestions: [],
+  accent: null,
+  modelPicker: false,
+  pageContext: "visible",
+  attribution: true,
+};
+
+const SkinChromeContext = createContext<SkinChromeValue>(DEFAULT_SKIN_CHROME);
+
+export const SkinChromeProvider = SkinChromeContext.Provider;
+
+export function useSkinChrome(): SkinChromeValue {
+  return useContext(SkinChromeContext);
+}
+
+/**
+ * Whether the surface may render the credit. Defaults to `true` off the
+ * provider (`/baseline` preview, catalog demos) so the credit appears by
+ * default; a host that resolved `attribution: false` from config turns it off.
+ */
+export function useAttribution(): boolean {
+  return useContext(SkinChromeContext).attribution;
+}
+
+/** Catalog fallback when deploy YAML omits welcome / placeholder. */
+export function useComposerCopy(fallbackWelcome: string, fallbackPlaceholder: string) {
+  const chrome = useSkinChrome();
+  return {
+    title: chrome.title?.trim() || undefined,
+    welcome: chrome.welcome?.trim() || fallbackWelcome,
+    welcomeBody: chrome.welcomeBody ?? [],
+    placeholder: chrome.placeholder?.trim() || fallbackPlaceholder,
+    suggestions: chrome.suggestions,
+  };
+}

package/src/components/chat/stock/skin-credit.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+/**
+ * Shared "powered by digichat" branding line.
+ *
+ * Every skin renders this same component at the bottom of the page at all
+ * times — empty thread included. It is branding, not a disclaimer: the
+ * watermark stays visible from the very beginning. (Catalog products gate
+ * their own "can make mistakes" line on the first message; ours never
+ * gates.) Parents do the pinning: an absolute bottom wrapper in empty
+ * states, the sticky viewport footer once messages exist. One component
+ * (not per-skin copies) keeps the branding identical on every skin we
+ * ship.
+ *
+ * It paints no canvas of its own: tiny centered text inheriting the surface
+ * color at reduced opacity, no border or separator. It returns null when the
+ * host opted out (`chrome.attribution: false` / embed `attribution: false`),
+ * read from `SkinChromeProvider` (default on without a provider).
+ */
+
+import type { FC } from "react";
+import { cn } from "../../../lib/utils";
+import { useAttribution } from "./skin-chrome";
+import { useEmbedChatPrefsOptional } from "./embed-chat-prefs";
+
+export const SKIN_CREDIT_TEXT = "powered by digichat, a digithings product.";
+
+export const SkinCredit: FC<{
+  className?: string;
+  /**
+   * Explicit override for surfaces with no SkinChromeProvider — the embed's
+   * gate/paywall branch, which resolved placement itself. Omit everywhere
+   * else to read the host's resolved `attribution` from context.
+   */
+  attribution?: boolean;
+}> = ({ className, attribution }) => {
+  const fromContext = useAttribution();
+  // A tenant chat language may translate the words around the link.
+  const credit = useEmbedChatPrefsOptional()?.credit;
+  if (attribution !== undefined ? !attribution : !fromContext) return null;
+
+  return (
+    <p
+      data-testid="skin-credit"
+      data-slot="aui_credit"
+      className={cn(
+        "aui-skin-credit pt-0.5 text-center text-[0.6875rem] leading-3.5",
+        className,
+      )}
+    >
+      {credit?.lead ?? "powered by digichat, a"}{" "}
+      <a
+        href="https://digithings.ai"
+        target="_blank"
+        rel="noreferrer noopener"
+        className="pointer-events-auto font-medium text-inherit underline-offset-2 hover:underline"
+      >
+        digithings
+      </a>
+      {credit ? (/^[.,;:!?]/.test(credit.tail) ? "" : " ") + credit.tail : " product."}
+    </p>
+  );
+};

package/src/components/chat/stock/skin-palette-bridge.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import "../../../styles/chat-skin-palette.css";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { ComposerPrimitive } from "@assistant-ui/react";
+import { ComposerTriggerPopover } from "../gallery-thread/composer-trigger-popover.aui";
+import {
+  useSkinSlashPalette,
+  type DigichatSkinSlash,
+  type SkinSlashPalette,
+} from "./skin-slash-palette";
+import { SkinPaletteContext } from "./skin-palette-context";
+import { useEmbedChatPrefsOptional } from "./embed-chat-prefs";
+
+/** Marks the thread composer form the shared palette is anchored to. */
+export const SKIN_PALETTE_COMPOSER_ATTR = "data-skin-palette-composer";
+
+function composerForms(root: ParentNode): HTMLFormElement[] {
+  return Array.from(root.querySelectorAll("form")).filter(
+    (form) =>
+      !form.closest("[data-message-id]") &&
+      Boolean(form.querySelector('textarea, [contenteditable="true"]')),
+  );
+}
+
+/** Laid out (not `display: none` or inside a hidden layout branch). */
+function isRendered(form: HTMLFormElement): boolean {
+  return form.getClientRects().length > 0;
+}
+
+/**
+ * The thread composer of the skin inside `scope`: a form holding a text
+ * input that is not an edit composer inside a message. Layout skins that
+ * open the thread in a popover (the assistant modal) portal it out of the
+ * scope, and some keep a hidden desktop thread next to the mobile popover
+ * one, so the pick is: the composer being typed in, else the last one on
+ * screen (in the scope first, then in a popover), else the last in the
+ * scope, else the last in a popover.
+ */
+export function findThreadComposer(scope: HTMLElement): HTMLFormElement | null {
+  const inScope = composerForms(scope);
+  const portaled = composerForms(scope.ownerDocument).filter(
+    (form) =>
+      !scope.contains(form) &&
+      Boolean(form.closest("[data-radix-popper-content-wrapper]")),
+  );
+  const active = scope.ownerDocument.activeElement;
+  const focused = active
+    ? [...inScope, ...portaled].find((form) => form.contains(active))
+    : undefined;
+  return (
+    focused ??
+    inScope.filter(isRendered).at(-1) ??
+    portaled.filter(isRendered).at(-1) ??
+    inScope.at(-1) ??
+    portaled.at(-1) ??
+    null
+  );
+}
+
+export type SkinPaletteBridgeProps = {
+  /** Product slash wiring from the host. Absent = the skin renders as is. */
+  slash?: DigichatSkinSlash | undefined;
+  privateMode?: boolean | undefined;
+  children: ReactNode;
+};
+
+/**
+ * Gives any skin the product `/` palette (and `@` tools) without the skin
+ * knowing about it. Same commands and submit behaviour as the digichat skin,
+ * which wires the palette into its own composer instead.
+ *
+ * - One `Unstable_TriggerPopoverRoot` around the skin, so whichever
+ *   `ComposerPrimitive.Input` the skin renders registers with it.
+ * - The popovers portal into the thread composer form, which the stylesheet
+ *   makes the positioning box, so they sit right above it like the digichat
+ *   palette.
+ * - Slash submits (block, pane, force, run) are caught in the capture phase
+ *   and never reach the skin's own send handler.
+ */
+/**
+ * The visual prefs a skin that is not digichat reads from its scope:
+ * `/density` respaces the messages and `/scrollbar` shows or hides the bars
+ * of the skin's scroll surfaces (chat-skin-palette.css). Prefs come through
+ * the provider overlay, so a hovered row in the `/` menu previews here too.
+ */
+function useSkinLook(): { density: string; scrollbars: "always" | "auto" } {
+  const chatPrefs = useEmbedChatPrefsOptional()?.prefs;
+  return {
+    density: chatPrefs?.density ?? "default",
+    scrollbars: chatPrefs?.scrollbars ?? "always",
+  };
+}
+
+/** The look attributes alone, for a skin mounted without the palette. */
+function SkinLookScope({ children }: { children: ReactNode }) {
+  const { density, scrollbars } = useSkinLook();
+  return (
+    <div
+      data-skin-look-scope=""
+      data-skin-density={density}
+      data-skin-scrollbars={scrollbars}
+      style={{ display: "contents" }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SkinPaletteBridge({
+  slash,
+  privateMode,
+  children,
+}: SkinPaletteBridgeProps) {
+  const palette = useSkinSlashPalette({ slash, privateMode });
+  if (!palette.enabled) return <SkinLookScope>{children}</SkinLookScope>;
+  return <SkinPaletteScope palette={palette}>{children}</SkinPaletteScope>;
+}
+
+function SkinPaletteScope({
+  palette,
+  children,
+}: {
+  palette: SkinSlashPalette;
+  children: ReactNode;
+}) {
+  const scopeRef = useRef<HTMLDivElement | null>(null);
+  // `/density` for skins that are not digichat: the scope carries the choice
+  // and chat-skin-palette.css respaces the messages under it.
+  const { density, scrollbars } = useSkinLook();
+  const [anchor, setAnchor] = useState<HTMLFormElement | null>(null);
+  const submitRef = useRef(palette.handleSubmit);
+  submitRef.current = palette.handleSubmit;
+  const anchorRef = useRef<HTMLFormElement | null>(null);
+  anchorRef.current = anchor;
+
+  // Skins mount the composer lazily and swap it (welcome vs. thread), so the
+  // anchor is re-found after DOM changes, at most once per frame.
+  useEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope) return;
+    let frame = 0;
+    const find = () => {
+      frame = 0;
+      const next = findThreadComposer(scope);
+      setAnchor((prev) => (prev === next ? prev : next));
+    };
+    find();
+    const observer = new MutationObserver(() => {
+      if (!frame) frame = requestAnimationFrame(find);
+    });
+    // The body, not the scope: a popover-hosted thread mounts in a portal.
+    observer.observe(scope.ownerDocument.body, { childList: true, subtree: true });
+    // Focus moving between composers (or a breakpoint hiding one) changes
+    // which one is live without touching the DOM tree.
+    const refind = () => {
+      if (!frame) frame = requestAnimationFrame(find);
+    };
+    scope.ownerDocument.addEventListener("focusin", refind);
+    window.addEventListener("resize", refind);
+    return () => {
+      observer.disconnect();
+      scope.ownerDocument.removeEventListener("focusin", refind);
+      window.removeEventListener("resize", refind);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!anchor) return;
+    anchor.setAttribute(SKIN_PALETTE_COMPOSER_ATTR, "");
+    return () => anchor.removeAttribute(SKIN_PALETTE_COMPOSER_ATTR);
+  }, [anchor]);
+
+  // Capture phase on the document, so it runs before the skin's own submit
+  // handler (React listens at the root) even for a portaled composer.
+  useEffect(() => {
+    const onSubmit = (event: Event) => {
+      if (!anchorRef.current || event.target !== anchorRef.current) return;
+      if (submitRef.current(event)) event.stopPropagation();
+    };
+    document.addEventListener("submit", onSubmit, true);
+    return () => document.removeEventListener("submit", onSubmit, true);
+  }, []);
+
+  return (
+    <SkinPaletteContext.Provider value={palette}>
+      <ComposerPrimitive.Unstable_TriggerPopoverRoot>
+        <div
+          ref={scopeRef}
+          data-skin-palette-scope=""
+          data-skin-density={density}
+          data-skin-scrollbars={scrollbars}
+          style={{ display: "contents" }}
+        >
+          {children}
+        </div>
+        {anchor ? createPortal(<SkinPalettePopovers palette={palette} />, anchor) : null}
+      </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+    </SkinPaletteContext.Provider>
+  );
+}
+
+function SkinPalettePopovers({ palette }: { palette: SkinSlashPalette }) {
+  return (
+    <>
+      {palette.slash ? (
+        <ComposerTriggerPopover
+          char="/"
+          className="skin-palette"
+          adapter={palette.slash.adapter}
+          action={palette.slash.action}
+          matcher={palette.slash.matcher}
+          emptyItemsLabel="No matching commands"
+        />
+      ) : null}
+      {palette.mention ? (
+        <ComposerTriggerPopover
+          char="@"
+          className="skin-palette"
+          adapter={palette.mention.adapter}
+          directive={palette.mention.directive}
+          emptyItemsLabel="No matching tools"
+        />
+      ) : null}
+    </>
+  );
+}

package/src/components/chat/stock/skin-palette-context.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { SkinSlashPalette } from "./skin-slash-palette";
+
+/** Set by `SkinPaletteBridge` when the host wired the product palette. */
+export const SkinPaletteContext = createContext<SkinSlashPalette | null>(null);
+
+/**
+ * The shared palette, when the host wired one. A skin that mounts its own
+ * `Unstable_TriggerPopoverRoot` reads this to drop that root (a nested root
+ * shadows the shared one) and leave the `/` menu to the bridge.
+ */
+export function useSkinPaletteOptional(): SkinSlashPalette | null {
+  return useContext(SkinPaletteContext);
+}

package/src/components/chat/stock/skin-runtime.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+// Host-injected runtime for the catalog skins (WS4 Step 3).
+//
+// Skins render inside many hosts (product shell, /baseline catalog, embeds).
+// Anything a skin needs that lives in the host app — error copy, session
+// config, menu panes — enters through this context, never through an `@/`
+// import (packages cannot import app code). Hosts provide values at their
+// ThreadSkinView mount points; fields stay optional so a host that does not
+// care keeps today's rendering.
+
+// String-compatible mirror of the app's ParsedEmbedChatError. The app's
+// parse/format fns assign directly to SkinErrorParsers.
+export type ParsedSkinError = {
+  code?: string;
+  message?: string;
+  detail?: string;
+  raw: string;
+};
+
+export type SkinErrorParsers = {
+  parseError: (error: Error | undefined) => ParsedSkinError | null;
+  formatError: (error: Error | undefined) => string | null;
+};
+
+export type SkinRuntimeValue = {
+  errorParsers?: SkinErrorParsers;
+};
+
+const SkinRuntimeContext = createContext<SkinRuntimeValue>({});
+
+export const SkinRuntimeProvider = SkinRuntimeContext.Provider;
+
+export function useSkinRuntime(): SkinRuntimeValue {
+  return useContext(SkinRuntimeContext);
+}
+
+export function SkinRuntime({
+  value,
+  children,
+}: {
+  value: SkinRuntimeValue;
+  children: ReactNode;
+}) {
+  return (
+    <SkinRuntimeContext.Provider value={value}>
+      {children}
+    </SkinRuntimeContext.Provider>
+  );
+}