@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/gallery-thread/composer-trigger-popover.aui.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { memo, useEffect, useRef, type ComponentPropsWithoutRef, type FC } from "react";
+import {
+  ComposerPrimitive,
+  unstable_defaultDirectiveFormatter,
+  unstable_useTriggerPopoverScopeContext,
+  type Unstable_DirectiveFormatter,
+  type Unstable_TriggerItem,
+} from "@assistant-ui/react";
+import { cn } from "./cn";
+import { OverlayScrollbar } from "../overlay-scrollbar";
+import { PaletteRowPreview } from "../stock/palette-row-preview";
+
+type IconComponent = FC<{ className?: string }>;
+
+type DirectiveBehaviorProps = {
+  /** Formatter used to serialize the selected item into composer text. */
+  formatter?: Unstable_DirectiveFormatter | undefined;
+  /** Called after the directive text has been inserted into the composer. */
+  onInserted?: ((item: Unstable_TriggerItem) => void) | undefined;
+};
+
+type ActionBehaviorProps = {
+  /** Formatter used to serialize the audit-trail chip (when `removeOnExecute` is false). */
+  formatter?: Unstable_DirectiveFormatter | undefined;
+  /** Invoked with the selected item at the moment of selection. */
+  onExecute: (item: Unstable_TriggerItem) => void;
+  /** If `true`, strip the trigger text from the composer after executing. @default false */
+  removeOnExecute?: boolean | undefined;
+};
+
+type ComposerTriggerPopoverBaseProps = Omit<
+  ComponentPropsWithoutRef<typeof ComposerPrimitive.Unstable_TriggerPopover>,
+  "children"
+> & {
+  /**
+   * Maps icon keys to components. Unused on the digichat skin (flat command
+   * + description rows). Kept so adapter bundles can still pass `iconMap`.
+   */
+  iconMap?: Record<string, IconComponent>;
+  fallbackIcon?: IconComponent;
+  backLabel?: string;
+  emptyCategoriesLabel?: string;
+  /** Label shown when no items match. @default "No matching items" */
+  emptyItemsLabel?: string;
+  /** Label shown while an async adapter is resolving items. @default "Loading…" */
+  loadingLabel?: string;
+};
+
+type ComposerTriggerPopoverProps = ComposerTriggerPopoverBaseProps &
+  (
+    | {
+        directive: DirectiveBehaviorProps;
+        action?: never;
+      }
+    | {
+        action: ActionBehaviorProps;
+        directive?: never;
+      }
+  );
+
+type ItemsProps = {
+  emptyLabel: string;
+  loadingLabel: string;
+};
+
+const Items: FC<ItemsProps> = ({ emptyLabel, loadingLabel }) => {
+  const { isLoading } = unstable_useTriggerPopoverScopeContext();
+  const listRef = useRef<HTMLDivElement | null>(null);
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopoverItems>
+      {(items) => (
+        <div className="relative min-h-0">
+        <div
+          data-slot="composer-trigger-popover-items"
+          className="flex max-h-[min(50vh,22rem)] flex-col overflow-y-auto py-1"
+          ref={(node) => {
+            listRef.current = node;
+            node
+              ?.querySelector<HTMLElement>("[data-highlighted]")
+              ?.scrollIntoView({ block: "nearest" });
+          }}
+        >
+          {items.map((item, index) => {
+            const direct = (item as unknown as { value?: unknown }).value;
+            const value =
+              typeof direct === "string"
+                ? direct
+                : typeof item.metadata?.value === "string"
+                  ? item.metadata.value
+                  : "";
+            const detailId = item.description ? `slash-desc-${item.id}` : undefined;
+            return (
+            <ComposerPrimitive.Unstable_TriggerPopoverItem
+              key={item.id}
+              item={item}
+              index={index}
+              aria-describedby={detailId}
+              className="group flex w-full cursor-pointer flex-col items-stretch px-2 py-1 text-start text-sm outline-none"
+            >
+              <span className="flex w-full items-center gap-2">
+              <span className="shrink-0 font-medium">{item.label}</span>
+              {value ? (
+                <span
+                  data-slot="palette-value"
+                  className="text-ink-mute ml-auto min-w-0 truncate text-end text-xs leading-tight"
+                >
+                  {value}
+                </span>
+              ) : null}
+              </span>
+              {item.description ? (
+                <span
+                  id={detailId}
+                  data-slot="palette-detail"
+                  className="text-ink-mute hidden truncate text-xs leading-tight group-data-[highlighted]:block"
+                >
+                  {item.description}
+                </span>
+              ) : null}
+            </ComposerPrimitive.Unstable_TriggerPopoverItem>
+            );
+          })}
+          {items.length === 0 && (
+            <div className="text-ink-mute px-3 py-2 text-sm">
+              {isLoading ? loadingLabel : emptyLabel}
+            </div>
+          )}
+        </div>
+        <OverlayScrollbar targetRef={listRef} width={6} />
+        </div>
+      )}
+    </ComposerPrimitive.Unstable_TriggerPopoverItems>
+  );
+};
+
+/**
+ * Arrow-key handling for the picker.
+ *
+ * The composer textarea keeps focus while the picker is open, so the keys are
+ * caught at document level (capture) rather than on the popover.
+ *
+ * It lives inside `Unstable_TriggerPopover` because the popover scope is the
+ * only place that exposes the picker's own `close()`. A synthetic Escape
+ * dispatched on `document` has `document` as its target, so it never reaches
+ * the composer's own keydown handler and the picker stayed open (DIG-4599).
+ */
+const TriggerPopoverArrowKeys: FC = () => {
+  const { open, close } = unstable_useTriggerPopoverScopeContext();
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+      const popover = document.querySelector<HTMLElement>(
+        '[data-slot="composer-trigger-popover"]',
+      );
+      if (!popover) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.key === "ArrowRight") {
+        // Same as Enter: submit the highlighted row.
+        popover.querySelector<HTMLElement>("[data-highlighted]")?.click();
+        return;
+      }
+      // Same as Escape: go back / close the picker, through the picker's own
+      // scope. Upstream's Escape handler closes the popover the same way.
+      close();
+    };
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, [open, close]);
+  return null;
+};
+
+/**
+ * Pre-built popover UI for a trigger-driven picker (mentions, slash commands).
+ * digichat: flat list, no category drill-down, no per-row icons, composer width.
+ */
+const ComposerTriggerPopoverImpl: FC<ComposerTriggerPopoverProps> = ({
+  emptyItemsLabel = "No matching items",
+  loadingLabel = "Loading…",
+  className,
+  directive,
+  action,
+  iconMap: _iconMap,
+  fallbackIcon: _fallbackIcon,
+  backLabel: _backLabel,
+  emptyCategoriesLabel: _emptyCategoriesLabel,
+  ...props
+}) => {
+  const warnedRef = useRef(false);
+  if (
+    process.env.NODE_ENV !== "production" &&
+    !warnedRef.current &&
+    Boolean(directive) === Boolean(action)
+  ) {
+    warnedRef.current = true;
+    console.warn(
+      "[assistant-ui] ComposerTriggerPopover requires exactly one of `directive` or `action` props.",
+    );
+  }
+
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopover
+      data-slot="composer-trigger-popover"
+      className={cn(
+        "aui-composer-trigger-popover bg-surface-2 text-ink absolute inset-x-0 bottom-full z-50 mb-1 w-full overflow-hidden rounded-none border",
+        className,
+      )}
+      {...props}
+    >
+      {directive ? (
+        <ComposerPrimitive.Unstable_TriggerPopover.Directive
+          formatter={directive.formatter ?? unstable_defaultDirectiveFormatter}
+          onInserted={directive.onInserted}
+        />
+      ) : action ? (
+        <ComposerPrimitive.Unstable_TriggerPopover.Action
+          formatter={action.formatter ?? unstable_defaultDirectiveFormatter}
+          onExecute={action.onExecute}
+          removeOnExecute={action.removeOnExecute}
+        />
+      ) : null}
+      <TriggerPopoverArrowKeys />
+      <PaletteRowPreview />
+      <Items emptyLabel={emptyItemsLabel} loadingLabel={loadingLabel} />
+    </ComposerPrimitive.Unstable_TriggerPopover>
+  );
+};
+ComposerTriggerPopoverImpl.displayName = "ComposerTriggerPopover";
+
+export const ComposerTriggerPopover = memo(
+  ComposerTriggerPopoverImpl,
+) as FC<ComposerTriggerPopoverProps>;

package/src/components/chat/gallery-thread/css.d.ts

@@ -0,0 +1,6 @@
+declare module "@assistant-ui/react-markdown/styles/dot.css";
+
+// WS4: moved skins import the package stylesheets via relative side-effect
+// imports. The app got its `*.css` declarations from Next's global types;
+// the package needs its own.
+declare module "*.css";

package/src/components/chat/gallery-thread/file.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import { memo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { FileMessagePartComponent } from "@assistant-ui/react";
+import { DotMatrix } from "../DotMatrix";
+import { cn } from "./cn";
+
+const fileVariants = cva(
+  "aui-file-root inline-flex items-center gap-3 rounded-none transition-colors",
+  {
+    variants: {
+      variant: {
+        outline: "border-hair hover:bg-surface-2/50 border",
+        ghost: "hover:bg-surface-2/50",
+        muted: "bg-surface-2/50 hover:bg-surface-2",
+      },
+      size: {
+        sm: "px-2.5 py-1.5 text-xs",
+        default: "px-3 py-2 text-sm",
+        lg: "px-4 py-3 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default",
+    },
+  },
+);
+
+
+export type FileDataKind = "data-uri" | "url" | "base64" | "id";
+
+function getFileDataKind(
+  data: string,
+  sourceType?: "url" | "id",
+): FileDataKind {
+  if (sourceType === "url" && /^data:/i.test(data)) return "data-uri";
+  if (sourceType) return sourceType;
+  if (/^data:/i.test(data)) return "data-uri";
+  if (/^https?:\/\//i.test(data)) return "url";
+  return "base64";
+}
+
+function getBase64Size(base64: string): number {
+  const commaIndex = base64.indexOf(",");
+  const base64Data = commaIndex >= 0 ? base64.slice(commaIndex + 1) : base64;
+  const padding = (base64Data.match(/=/g) || []).length;
+  return Math.floor((base64Data.length * 3) / 4) - padding;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export type FileRootProps = React.ComponentProps<"div"> &
+  VariantProps<typeof fileVariants>;
+
+function FileRoot({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: FileRootProps) {
+  return (
+    <div
+      data-slot="file-root"
+      data-variant={variant}
+      data-size={size}
+      className={cn(fileVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+type FileIconDisplayProps = React.ComponentProps<"span"> & {
+  mimeType?: string;
+};
+
+function FileIconDisplay({
+  mimeType,
+  className,
+  children,
+  ...props
+}: FileIconDisplayProps) {
+  return (
+    <span
+      data-slot="file-icon"
+      className={cn("text-ink-mute shrink-0", className)}
+      {...props}
+    >
+      {children ?? (
+        <DotMatrix
+          state="attach"
+          label={mimeType ? `${mimeType} file` : "File"}
+          className="size-3.5"
+        />
+      )}
+    </span>
+  );
+}
+
+function FileName({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="file-name"
+      className={cn("min-w-0 flex-1 truncate font-medium", className)}
+      {...props}
+    >
+      {children || "Unnamed file"}
+    </span>
+  );
+}
+
+type FileSizeProps = React.ComponentProps<"span"> & {
+  bytes: number;
+};
+
+function FileSize({ bytes, className, ...props }: FileSizeProps) {
+  return (
+    <span
+      data-slot="file-size"
+      className={cn("text-ink-mute shrink-0", className)}
+      {...props}
+    >
+      {formatFileSize(bytes)}
+    </span>
+  );
+}
+
+type FileDownloadProps = Omit<React.ComponentProps<"a">, "href"> & {
+  data: string;
+  mimeType: string;
+  filename?: string;
+  sourceType?: "url" | "id";
+};
+
+function FileDownload({
+  data,
+  mimeType,
+  filename,
+  sourceType,
+  className,
+  children,
+  ...props
+}: FileDownloadProps) {
+  if (typeof data !== "string") return null;
+  const kind = getFileDataKind(data, sourceType);
+  if (kind === "id") return null;
+  if (kind === "url" && !/^(https?:\/\/|blob:)/i.test(data)) return null;
+  const href = kind === "base64" ? `data:${mimeType};base64,${data}` : data;
+
+  return (
+    <a
+      data-slot="file-download"
+      href={href}
+      download={filename || "download"}
+      {...(kind === "url" && { target: "_blank", rel: "noopener noreferrer" })}
+      className={cn(
+        "text-ink-mute hover:bg-accent hover:text-accent-foreground shrink-0 rounded-none p-1 transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      {children || <DotMatrix state="download" label="Download" className="size-3.5" />}
+    </a>
+  );
+}
+
+const FileImpl: FileMessagePartComponent = ({
+  filename,
+  data,
+  mimeType,
+  sourceType,
+}) => {
+  const kind = getFileDataKind(data, sourceType);
+  const showSize =
+    typeof data === "string" && (kind === "base64" || kind === "data-uri");
+
+  return (
+    <FileRoot>
+      <FileIconDisplay mimeType={mimeType} />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <FileName>{filename}</FileName>
+        {showSize && (
+          <FileSize bytes={getBase64Size(data)} className="text-xs" />
+        )}
+      </div>
+      <FileDownload
+        data={data}
+        mimeType={mimeType}
+        {...(filename !== undefined && { filename })}
+        {...(sourceType !== undefined && { sourceType })}
+      />
+    </FileRoot>
+  );
+};
+
+const File = memo(FileImpl) as unknown as FileMessagePartComponent & {
+  Root: typeof FileRoot;
+  Icon: typeof FileIconDisplay;
+  Name: typeof FileName;
+  Size: typeof FileSize;
+  Download: typeof FileDownload;
+};
+
+File.displayName = "File";
+File.Root = FileRoot;
+File.Icon = FileIconDisplay;
+File.Name = FileName;
+File.Size = FileSize;
+File.Download = FileDownload;
+
+export {
+  File,
+  FileRoot,
+  FileIconDisplay,
+  FileName,
+  FileSize,
+  FileDownload,
+  fileVariants,
+  getFileDataKind,
+  getBase64Size,
+  formatFileSize,
+};

package/src/components/chat/gallery-thread/follow-up-suggestions.aui.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { AuiIf, useAuiState, ThreadPrimitive } from "@assistant-ui/react";
+import { useCallback, useEffect, useRef, useState, type FC } from "react";
+
+import { DotMatrix } from "../DotMatrix";
+import { dismissKeyboardIfCoarse } from "./composer-keyboard";
+import { SuggestionScrollRow } from "../suggestion-scroll-row";
+
+const FollowupSuggestionsRow: FC = () => {
+  const suggestions = useAuiState((s) => s.thread.suggestions);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const rtlRef = useRef<boolean | null>(null);
+  const [fades, setFades] = useState({ left: false, right: false });
+
+  const updateFades = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    // scrollLeft runs 0..-max in RTL; normalize to hidden width per physical edge.
+    const fromStart = Math.abs(el.scrollLeft);
+    // getComputedStyle forces a style recalc per scroll event; direction is stable, read it once.
+    const rtl = (rtlRef.current ??= getComputedStyle(el).direction === "rtl");
+    const [left, right] = rtl
+      ? [maxScroll - fromStart, fromStart]
+      : [fromStart, maxScroll - fromStart];
+    setFades((prev) => {
+      const next = { left: left > 1, right: right > 1 };
+      return prev.left === next.left && prev.right === next.right ? prev : next;
+    });
+  }, []);
+
+  useEffect(() => {
+    updateFades();
+    const el = scrollRef.current;
+    if (!el?.firstElementChild) return undefined;
+    const observer = new ResizeObserver(updateFades);
+    observer.observe(el);
+    observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  }, [updateFades]);
+
+  const maskImage = `linear-gradient(to right, ${
+    fades.left ? "transparent, black 2rem" : "black"
+  }, ${fades.right ? "black calc(100% - 2rem), transparent" : "black"})`;
+
+  return (
+    <SuggestionScrollRow
+      ref={scrollRef}
+      onScroll={updateFades}
+      // overflow-x clips both axes; py-1/-my-1 gives focus rings vertical room without changing outer height.
+      className="aui-thread-followup-suggestions -my-1 w-full py-1"
+      style={{ maskImage, WebkitMaskImage: maskImage }}
+    >
+      <div className="mx-auto flex min-h-8 w-max items-center gap-2 px-0.5">
+        {suggestions.map((suggestion, idx) => (
+          <ThreadPrimitive.Suggestion
+            key={idx}
+            className="aui-thread-followup-suggestion bg-surface hover:bg-surface-2 rounded-none border px-3 py-1 text-sm whitespace-nowrap transition-colors ease-in"
+            prompt={suggestion.prompt}
+            send
+            onClick={() => dismissKeyboardIfCoarse()}
+          >
+            <DotMatrix
+              state="example"
+              decorative
+              className="aui-thread-followup-suggestion-mark size-3.5"
+            />
+            {suggestion.title ?? suggestion.prompt}
+            {suggestion.label && (
+              <span className="aui-thread-followup-suggestion-label text-ink-mute ms-1">
+                {suggestion.label}
+              </span>
+            )}
+          </ThreadPrimitive.Suggestion>
+        ))}
+      </div>
+    </SuggestionScrollRow>
+  );
+};
+
+export const ThreadFollowupSuggestions: FC = () => (
+  <AuiIf
+    condition={(s) =>
+      !s.thread.isEmpty &&
+      !s.thread.isRunning &&
+      s.thread.suggestions.length > 0
+    }
+  >
+    <FollowupSuggestionsRow />
+  </AuiIf>
+);

package/src/components/chat/gallery-thread/format-json-dump.ts

@@ -0,0 +1,112 @@
+/**
+ * Upper bound on the text repairPartialJson will scan. Tool arguments and
+ * results arrive from the model stream and nothing bounds their length, so
+ * the repair must never see an unbounded string: a long whitespace run used
+ * to cost a quadratic scan and froze the render thread (CodeQL
+ * js/polynomial-redos, alert 196, DIG-4818). Longer text is shown raw, never
+ * cut.
+ *
+ * The cap guards the repair path only. Valid JSON of any size still goes
+ * through JSON.parse and is pretty-printed as before; the one behaviour
+ * change above the cap is that partial (unparsable) JSON longer than the cap
+ * is shown raw instead of repaired and pretty-printed. The cap is defence in
+ * depth: the whitespace strip itself is linear now, but every regex in the
+ * repair stays bounded by this budget.
+ */
+export const MAX_REPAIR_INPUT_CHARS = 64 * 1024;
+
+/** Pretty-print tool args the same way results already use JSON.stringify(..., null, 2). */
+export function formatJsonDump(value: unknown): string {
+  if (value === undefined) return "";
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return value;
+    try {
+      return JSON.stringify(JSON.parse(trimmed), null, 2);
+    } catch {
+      const repaired = repairPartialJson(trimmed);
+      if (repaired !== undefined) {
+        try {
+          return JSON.stringify(JSON.parse(repaired), null, 2);
+        } catch {
+          /* fall through to raw text */
+        }
+      }
+      return value;
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function formatToolDurationMs(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return "0ms";
+  const rounded = Math.round(ms);
+  if (rounded < 100) return `${rounded}ms`;
+  const seconds = rounded / 1000;
+  if (seconds < 10) return `${(Math.round(seconds * 10) / 10).toFixed(1)}s`;
+  if (seconds < 60) return `${Math.floor(seconds)}s`;
+  return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`;
+}
+
+/**
+ * Close a truncated JSON prefix (streaming tool args) so it can be parsed:
+ * closes an open string, drops a dangling key / trailing comma / colon, and
+ * closes open objects and arrays. Returns undefined when the text is not a
+ * JSON object/array prefix.
+ */
+export function repairPartialJson(text: string): string | undefined {
+  const src = text.trim();
+  if (!src || (src[0] !== "{" && src[0] !== "[")) return undefined;
+  // Cap before any scan of the text: the repair below runs regexes over it.
+  // Defence in depth for those regexes, not the fix itself: the quadratic
+  // whitespace strip is gone (trimEnd below).
+  if (src.length > MAX_REPAIR_INPUT_CHARS) return undefined;
+  const stack: string[] = [];
+  let inString = false;
+  let escaped = false;
+  for (const ch of src) {
+    if (inString) {
+      if (escaped) escaped = false;
+      else if (ch === "\\") escaped = true;
+      else if (ch === '"') inString = false;
+      continue;
+    }
+    if (ch === '"') inString = true;
+    else if (ch === "{" || ch === "[") stack.push(ch);
+    else if (ch === "}" || ch === "]") {
+      if (stack.pop() !== (ch === "}" ? "{" : "[")) return undefined;
+    }
+  }
+  let out = src;
+  if (inString) {
+    if (escaped) out = out.slice(0, -1);
+    out += '"';
+  }
+  for (let i = 0; i < 4; i++) {
+    const before = out;
+    // trimEnd, not out.replace(/\s+$/, ""): the regex re-tries the anchor at
+    // every position of a whitespace run and costs quadratic time on a long
+    // run, which froze the render thread (CodeQL js/polynomial-redos, alert
+    // 196). Same result, one linear pass.
+    out = out.trimEnd();
+    out = out.replace(/,$/, "");
+    out = out.replace(/:$/, "");
+    // dangling key with no value inside an object: {"a":1,"b"
+    if (stack[stack.length - 1] === "{") out = out.replace(/([{,])\s*"(?:[^"\\]|\\.)*"$/, "$1");
+    out = out.replace(/,$/, "");
+    // partial literal (tru, fals, nul) or number ending in '-' / '.' / 'e'
+    // No lookbehind here: a lookbehind literal is a parse-time SyntaxError on
+    // Safari below 16.4 and on older embedded WebViews, and this module is
+    // imported by the rendered thread — one unparsable regex would take the
+    // whole thread down. The prefix is captured and written back instead.
+    out = out.replace(/([:\[,]\s*)(t|tr|tru|f|fa|fal|fals|n|nu|nul)$/, "$1");
+    out = out.replace(/(\d)[.eE+-]+$/, "$1").replace(/([:\[,]\s*)-$/, "$1");
+    if (out === before) break;
+  }
+  while (stack.length) out += stack.pop() === "{" ? "}" : "]";
+  return out;
+}