@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/gallery-thread/private-work-step.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import type { ToolCallMessagePartStatus } from "@assistant-ui/react";
+import { DotMatrix } from "../DotMatrix";
+import { toolRowTitle } from "../stock/tool-display";
+import {
+  resolveToolStatus,
+  ToolFallbackDuration,
+  toolTriggerLabel,
+} from "../stock/tool-fallback.aui";
+import { useTurnOutcome } from "../turn-outcome";
+import { cn } from "./cn";
+import { EN_TRACE_T, useTraceT, type TraceT } from "../trace-i18n";
+
+/**
+ * One work step in a private session, drawn exactly like the normal row —
+ * the same slots, classes, icon, wording and running/done state, so the skin
+ * styles it the same — but it is not a disclosure. There is no button, no
+ * chevron, no body and no hover change: in a private session the server
+ * never sends the arguments, results or reasoning text a body would show
+ * (apps/digichat/src/lib/private-stream.ts), so the row has nothing to open.
+ *
+ * `pointer-events: none` keeps the skin's `:hover` / `:active` rules off it
+ * and makes a click on the row land on nothing.
+ */
+export type PrivateWorkStepProps = {
+  kind: "tool" | "reasoning";
+  /** Tool name for a tool step; ignored for reasoning. */
+  toolName?: string;
+  /** assistant-ui part status type: running | complete | incomplete | requires-action. */
+  statusType?: string;
+  /** incomplete reason: error | cancelled | … */
+  reason?: string;
+  isError?: boolean;
+  /** Trailing meta on a tool row (the elapsed time), same as the normal row. */
+  trailing?: ReactNode;
+};
+
+/** A failed call reads as failed even when its part says complete (see `resolveToolStatus`). */
+function toolStatus(
+  statusType: string | undefined,
+  reason: string | undefined,
+  isError: boolean | undefined,
+): ToolCallMessagePartStatus | undefined {
+  if (isError && statusType !== "incomplete") {
+    return { type: "incomplete", reason: "error" } as ToolCallMessagePartStatus;
+  }
+  if (!statusType) return undefined;
+  return { type: statusType, ...(reason ? { reason } : {}) } as ToolCallMessagePartStatus;
+}
+
+/** The normal rows' words: "Reasoning" for a reasoning row, the upstream tool wording for a tool row. */
+export function privateWorkStepLabel(
+  {
+  kind,
+  statusType,
+  reason,
+  isError,
+}: Pick<PrivateWorkStepProps, "kind" | "statusType" | "reason" | "isError">,
+  tr: TraceT = EN_TRACE_T,
+): {
+  label: string;
+  state: string;
+} {
+  const running = statusType === "running";
+  if (kind === "reasoning") {
+    return { label: tr.t("reasoning"), state: running ? "thinking" : "thought" };
+  }
+  const { label, matrixState } = toolTriggerLabel(toolStatus(statusType, reason, isError), tr);
+  return { label, state: matrixState };
+}
+
+const INERT = "pointer-events-none cursor-default select-none";
+
+export const PrivateWorkStep: FC<PrivateWorkStepProps> = ({
+  kind,
+  toolName,
+  statusType,
+  reason,
+  isError,
+  trailing,
+}) => {
+  const tr = useTraceT();
+  const running = statusType === "running";
+  if (kind === "reasoning") {
+    return (
+      <div
+        data-slot="aui_private-work-step"
+        data-kind="reasoning"
+        data-state={running ? "thinking" : "thought"}
+        className="aui-reasoning-root w-full"
+      >
+        <div
+          data-slot="reasoning-trigger"
+          data-private=""
+          className={cn(
+            "aui-reasoning-trigger text-ink-mute flex w-full items-center gap-2 py-1.5 text-sm",
+            INERT,
+          )}
+        >
+          <span
+            data-slot="reasoning-trigger-icon"
+            className="aui-reasoning-trigger-icon inline-flex size-3.5 shrink-0 items-center justify-center"
+          >
+            <DotMatrix state={running ? "thinking" : "thought"} decorative className="size-3.5" />
+          </span>
+          <span
+            data-slot="reasoning-trigger-label"
+            className={cn(
+              "aui-reasoning-trigger-label-wrapper min-w-0 flex-1 truncate text-start leading-none tabular-nums",
+              running && "shimmer motion-reduce:animate-none",
+            )}
+          >
+            {tr.t("reasoning")}
+          </span>
+        </div>
+      </div>
+    );
+  }
+  const { label, matrixState, isRunning, isCancelled } = toolTriggerLabel(
+    toolStatus(statusType, reason, isError),
+    tr,
+  );
+  return (
+    <div
+      data-slot="aui_private-work-step"
+      data-kind="tool"
+      data-state={matrixState}
+      className="aui-tool-fallback-root w-full"
+    >
+      <div
+        data-slot="tool-fallback-trigger"
+        data-private=""
+        className={cn(
+          "aui-tool-fallback-trigger text-ink-mute flex w-fit origin-left items-center gap-2 py-1.5 text-sm",
+          INERT,
+        )}
+      >
+        <DotMatrix
+          state={matrixState}
+          decorative
+          className="aui-tool-fallback-trigger-icon size-4 shrink-0"
+        />
+        <span
+          data-slot="tool-fallback-trigger-label"
+          className={cn(
+            "aui-tool-fallback-trigger-label-wrapper inline-block text-start leading-none text-ink",
+            isCancelled && "text-ink-mute line-through",
+            isRunning && "shimmer motion-reduce:animate-none",
+          )}
+        >
+          {label}: <b>{toolRowTitle(toolName ?? "")}</b>
+        </span>
+        {trailing}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * A tool-call part in a private session, with the status rules of the normal
+ * row (`ToolFallback`): a failed call reads as failed, a call left waiting
+ * when the turn was stopped reads as cancelled, and the elapsed time trails
+ * the label. Never the part's custom renderer and never a body.
+ */
+export const PrivateToolCallStep: FC<{
+  toolName: string;
+  status?: ToolCallMessagePartStatus | undefined;
+  isError?: boolean | undefined;
+  result?: unknown;
+}> = ({ toolName, status, isError, result }) => {
+  const outcome = useTurnOutcome();
+  const resolved = resolveToolStatus(status, isError, result);
+  const effective =
+    outcome === "stopped" && resolved?.type === "requires-action"
+      ? ({ type: "incomplete", reason: "cancelled" } as const)
+      : resolved;
+  return (
+    <PrivateWorkStep
+      kind="tool"
+      toolName={toolName}
+      statusType={effective?.type}
+      reason={(effective as { reason?: string } | undefined)?.reason}
+      trailing={<ToolFallbackDuration />}
+    />
+  );
+};

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

@@ -0,0 +1,332 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { DisclosureChevron } from "../disclosure-chevron";
+import { DotMatrix } from "../DotMatrix";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../ui/collapsible";
+import { cn } from "./cn";
+import { useExportKeepMounted } from "../../../replay/export-mount";
+import { useTraceT } from "../trace-i18n";
+
+export const ANIMATION_DURATION = 200;
+
+const ReasoningPreviewContext = createContext(false);
+
+const reasoningVariants = cva("aui-reasoning-root w-full", {
+  variants: {
+    variant: {
+      outline: "rounded-none border px-3 py-2",
+      ghost: "",
+      muted: "bg-surface-2/50 rounded-none px-3 py-2",
+    },
+  },
+  defaultVariants: {
+    variant: "outline",
+  },
+});
+
+export type ReasoningRootProps = Omit<
+  React.ComponentProps<typeof Collapsible>,
+  "open" | "onOpenChange"
+> &
+  VariantProps<typeof reasoningVariants> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /**
+     * Whether the reasoning is currently streaming. While `true` the
+     * disclosure is held open with a bottom-pinned live preview; when
+     * streaming ends it returns to `defaultOpen`, and the first manual
+     * toggle takes over the open/close state permanently. The live preview
+     * keeps following the newest tokens while the disclosure is open during
+     * streaming, even after a manual toggle, and pauses while the reader is
+     * scrolled up.
+     */
+    streaming?: boolean;
+    /** Called right before the disclosure animates, on toggle and on streaming transitions. */
+    onAnimationStart?: () => void;
+  };
+
+function ReasoningRoot({
+  className,
+  variant,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  defaultOpen = false,
+  streaming,
+  onAnimationStart,
+  children,
+  ...props
+}: ReasoningRootProps) {
+  const [initialOpen] = useState(defaultOpen);
+  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled
+    ? controlledOpen
+    : (userOpen ?? (streaming || initialOpen));
+  const isPreview = streaming === true && isOpen;
+
+  const prevStreamingRef = useRef(streaming);
+  useLayoutEffect(() => {
+    if (prevStreamingRef.current === streaming) return;
+    prevStreamingRef.current = streaming;
+    // A streaming transition only animates the panel when the resting state
+    // is collapsed; with `defaultOpen` the disclosure stays open across it.
+    if (!isControlled && userOpen === null && !initialOpen) {
+      onAnimationStart?.();
+    }
+  }, [streaming, isControlled, userOpen, initialOpen, onAnimationStart]);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      onAnimationStart?.();
+      if (!isControlled) {
+        setUserOpen(open);
+      }
+      controlledOnOpenChange?.(open);
+    },
+    [onAnimationStart, isControlled, controlledOnOpenChange],
+  );
+
+  return (
+    <Collapsible
+      data-slot="reasoning-root"
+      data-variant={variant}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      className={cn(
+        "group/reasoning-root",
+        reasoningVariants({ variant, className }),
+      )}
+      style={
+        {
+          "--animation-duration": `${ANIMATION_DURATION}ms`,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <ReasoningPreviewContext.Provider value={isPreview}>
+        {children}
+      </ReasoningPreviewContext.Provider>
+    </Collapsible>
+  );
+}
+
+function ReasoningFade({
+  side = "bottom",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { side?: "top" | "bottom" }) {
+  if (side === "top") {
+    return (
+      <div
+        data-slot="reasoning-fade"
+        className={cn(
+          "aui-reasoning-fade pointer-events-none absolute inset-x-0 top-0 z-10 h-8",
+          "bg-[linear-gradient(to_bottom,var(--color-background),transparent)]",
+          "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_bottom,color-mix(in_oklab,var(--color-muted)_50%,var(--color-background)),transparent)]",
+          "fade-in-0 animate-in",
+          "animation-duration-(--animation-duration)",
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <div
+      data-slot="reasoning-fade"
+      className={cn(
+        "aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8",
+        "bg-[linear-gradient(to_top,var(--color-background),transparent)]",
+        "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_top,color-mix(in_oklab,var(--color-muted)_50%,var(--color-background)),transparent)]",
+        "fade-in-0 animate-in",
+        "animation-duration-(--animation-duration)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ReasoningTrigger({
+  active,
+  duration,
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger> & {
+  active?: boolean;
+  duration?: number;
+}) {
+  const reasoningLabel = useTraceT().t("reasoning");
+  const durationText = duration ? ` (${duration}s)` : "";
+
+  return (
+    <CollapsibleTrigger
+      data-slot="reasoning-trigger"
+      className={cn(
+        "aui-reasoning-trigger group/trigger text-ink-mute hover:text-ink flex w-full items-center gap-2 py-1.5 text-sm transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="reasoning-trigger-icon"
+        className="aui-reasoning-trigger-icon inline-flex size-3.5 shrink-0 items-center justify-center"
+      >
+        <DotMatrix
+          state={active ? "thinking" : "thought"}
+          decorative
+          className="size-3.5"
+        />
+      </span>
+      <span
+        data-slot="reasoning-trigger-label"
+        className={cn(
+          "aui-reasoning-trigger-label-wrapper min-w-0 flex-1 truncate text-start leading-none tabular-nums",
+          active && "shimmer motion-reduce:animate-none",
+        )}
+      >
+        {reasoningLabel}{durationText}
+      </span>
+      <DisclosureChevron />
+    </CollapsibleTrigger>
+  );
+}
+
+function ReasoningContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  const isPreview = useContext(ReasoningPreviewContext);
+  const keepMounted = useExportKeepMounted();
+
+  return (
+    <CollapsibleContent
+      keepMounted={keepMounted}
+      data-slot="reasoning-content"
+      className={cn(
+        "aui-reasoning-content text-ink-mute relative overflow-hidden text-sm outline-none",
+        "group/collapsible-content 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)]",
+        className,
+      )}
+      {...props}
+    >
+      <ReasoningFade side="top" />
+      {children}
+      {isPreview ? <ReasoningFade /> : null}
+    </CollapsibleContent>
+  );
+}
+
+function ReasoningText({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  const isPreview = useContext(ReasoningPreviewContext);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isPreview) return;
+    const scrollEl = scrollRef.current;
+    const contentEl = contentRef.current;
+    if (!scrollEl || !contentEl) return;
+
+    let pinned = true;
+    let lastScrollTop = scrollEl.scrollTop;
+    let lastScrollHeight = scrollEl.scrollHeight;
+    const isAtBottom = () =>
+      Math.abs(
+        scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight,
+      ) <= 1 || scrollEl.scrollHeight <= scrollEl.clientHeight;
+
+    const pin = () => {
+      if (!pinned) return;
+      scrollEl.scrollTop = scrollEl.scrollHeight;
+    };
+    // A pin's own scroll event can arrive after new content grew the scroll
+    // height and read as "not at bottom"; only an upward move at unchanged
+    // scroll height is user intent.
+    const onScroll = () => {
+      if (isAtBottom()) {
+        pinned = true;
+      } else if (
+        scrollEl.scrollTop < lastScrollTop &&
+        scrollEl.scrollHeight === lastScrollHeight
+      ) {
+        pinned = false;
+      }
+      lastScrollTop = scrollEl.scrollTop;
+      lastScrollHeight = scrollEl.scrollHeight;
+    };
+
+    pin();
+    scrollEl.addEventListener("scroll", onScroll);
+    const observer = new ResizeObserver(pin);
+    observer.observe(contentEl);
+    return () => {
+      scrollEl.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+    };
+  }, [isPreview]);
+
+  return (
+    <div
+      ref={scrollRef}
+      data-slot="reasoning-text"
+      className={cn(
+        "aui-reasoning-text relative z-0 max-h-64 overflow-y-auto ps-6 pt-2 pb-2 leading-relaxed text-pretty",
+        "transform-gpu transition-[transform,opacity] ease-[cubic-bezier(0.32,0.72,0,1)]",
+        "motion-reduce:animate-none",
+        "group-data-open/collapsible-content:animate-in",
+        "group-data-closed/collapsible-content:animate-out",
+        "group-data-open/collapsible-content:fade-in-0",
+        "group-data-closed/collapsible-content:fade-out-0",
+        "group-data-open/collapsible-content:slide-in-from-top-4",
+        "group-data-closed/collapsible-content:slide-out-to-top-4",
+        "group-data-open/collapsible-content:blur-in-[2px]",
+        "group-data-closed/collapsible-content:blur-out-[2px]",
+        "group-data-open/collapsible-content:animation-duration-(--animation-duration)",
+        "group-data-closed/collapsible-content:animation-duration-(--animation-duration)",
+        className,
+      )}
+      {...props}
+    >
+      <div ref={contentRef} className="aui-reasoning-text-content">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export {
+  ReasoningRoot,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+  reasoningVariants,
+};

package/src/components/chat/gallery-thread/scroll-mode.ts

@@ -0,0 +1,174 @@
+"use client";
+
+/**
+ * Whether the thread follows the answer, or leaves the scroll to the reader.
+ *
+ * `follow` (the default) anchors the submitted question at the top of the
+ * viewport and then chases the bottom of the stream, so the answer is being
+ * read as it is written. `free` never moves the viewport — not when a message
+ * is sent, not while it streams — and is for readers who scroll back through
+ * the transcript while a long answer arrives.
+ *
+ * `ThreadPrimitive.Viewport` can express both, but its defaults are the
+ * half-configured state this module replaces: `autoScroll` defaults to false
+ * under `turnAnchor="top"`, and while a top anchor is active during a run the
+ * library deliberately stops following. So `follow` is the anchor plus our own
+ * chase, and one value here fans out to the explicit prop set the viewport
+ * gets.
+ */
+
+import { useEffect } from "react";
+
+export type ScrollMode = "follow" | "free";
+
+export const SCROLL_MODES = ["follow", "free"] as const;
+export const DEFAULT_SCROLL_MODE: ScrollMode = "follow";
+export const SCROLL_STORAGE_KEY = "dt-scroll";
+
+/**
+ * How close to the bottom counts as "still following". A reader who scrolls
+ * up past this is reading something older, and the chase stops until they
+ * come back down.
+ */
+const FOLLOW_BOTTOM_SLACK_PX = 24;
+
+export function normalizeScrollMode(value: unknown): ScrollMode | undefined {
+  if (value === "follow" || value === "free") return value;
+  return undefined;
+}
+
+/**
+ * A stored choice beats the deployment default, which beats `follow`. An
+ * unknown value from either side is ignored rather than treated as a mode.
+ */
+export function resolveScrollMode(stored: unknown, deploy: unknown): ScrollMode {
+  return (
+    normalizeScrollMode(stored) ??
+    normalizeScrollMode(deploy) ??
+    DEFAULT_SCROLL_MODE
+  );
+}
+
+export type ScrollViewportProps = {
+  turnAnchor: "top" | "bottom";
+  autoScroll: boolean;
+  scrollToBottomOnRunStart: boolean;
+  scrollToBottomOnInitialize: boolean;
+  scrollToBottomOnThreadSwitch: boolean;
+};
+
+/**
+ * The exact viewport prop set for a mode.
+ *
+ * `free` turns every trigger off explicitly. Leaving one to its default is
+ * how the mode silently starts moving again — the library defaults
+ * `scrollToBottomOnRunStart` and the other two to true.
+ */
+export function scrollModeProps(mode: ScrollMode | undefined): ScrollViewportProps {
+  if (mode === "free") {
+    return {
+      turnAnchor: "bottom",
+      autoScroll: false,
+      scrollToBottomOnRunStart: false,
+      scrollToBottomOnInitialize: false,
+      scrollToBottomOnThreadSwitch: false,
+    };
+  }
+  return {
+    turnAnchor: "top",
+    autoScroll: true,
+    scrollToBottomOnRunStart: true,
+    scrollToBottomOnInitialize: true,
+    scrollToBottomOnThreadSwitch: true,
+  };
+}
+
+export function readStoredScrollMode(
+  storage?: { getItem(key: string): string | null } | null,
+): ScrollMode | undefined {
+  const store =
+    storage === undefined
+      ? typeof window === "undefined"
+        ? null
+        : window.localStorage
+      : storage;
+  if (!store) return undefined;
+  try {
+    return normalizeScrollMode(store.getItem(SCROLL_STORAGE_KEY));
+  } catch {
+    return undefined;
+  }
+}
+
+export function writeStoredScrollMode(mode: ScrollMode): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(SCROLL_STORAGE_KEY, mode);
+  } catch {
+    /* private mode or blocked storage — the session still follows the pref */
+  }
+}
+
+/**
+ * Chase the bottom of the stream while the reader is at the bottom.
+ *
+ * The library stops following as soon as a top anchor is active and a run is
+ * underway, which is why a submitted question pins and the answer then grows
+ * below the fold. This reads as one rule: keep the newest line in view unless
+ * the reader has taken the scroll back.
+ *
+ * Smoothness comes from the viewport's own `scroll-behavior: smooth`; the
+ * assignments here are targets, not animations, so a stream that lands many
+ * targets a second retargets the same smooth scroll instead of stacking.
+ */
+export function useFollowStream(
+  viewport: HTMLElement | null,
+  enabled: boolean,
+  /**
+   * Changes when a new turn starts (the message count). A send is an explicit
+   * intent to read the answer, so it clears a pause the reader had taken.
+   */
+  resumeKey: number = 0,
+): void {
+  useEffect(() => {
+    if (!viewport || !enabled) return;
+    let paused = false;
+    let lastTop = viewport.scrollTop;
+    let frame = 0;
+
+    const atBottom = () =>
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <=
+      FOLLOW_BOTTOM_SLACK_PX;
+
+    const chase = () => {
+      frame = 0;
+      if (paused) return;
+      if (!atBottom()) viewport.scrollTop = viewport.scrollHeight;
+    };
+    const schedule = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(chase);
+    };
+    const onScroll = () => {
+      const top = viewport.scrollTop;
+      if (atBottom()) paused = false;
+      else if (top < lastTop) paused = true;
+      lastTop = top;
+    };
+
+    const observer = new ResizeObserver(schedule);
+    const inner = viewport.firstElementChild;
+    if (inner) observer.observe(inner);
+    observer.observe(viewport);
+    viewport.addEventListener("scroll", onScroll, { passive: true });
+    // A question sent while the reader is parked mid-transcript pins to the
+    // top and then follows: sending is an explicit intent to read the answer.
+    schedule();
+
+    return () => {
+      observer.disconnect();
+      viewport.removeEventListener("scroll", onScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [viewport, enabled, resumeKey]);
+}