@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/tool-group.aui.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState,
+  type FC,
+  type PropsWithChildren,
+} from "react";
+import { DisclosureChevron } from "../disclosure-chevron";
+import { DotMatrix } from "../DotMatrix";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useScrollLock } from "@assistant-ui/react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./ui/collapsible";
+import { cn } from "../../../lib/utils";
+import { useExportKeepMounted } from "../../../replay/export-mount";
+import { useTraceT } from "../trace-i18n";
+import { stockRadius, useStockShape } from "./stock-shape";
+
+const ANIMATION_DURATION = 200;
+
+const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
+  variants: {
+    variant: {
+      outline: "border py-3",
+      ghost: "",
+      muted: "border-hair-2 bg-surface-2/30 border py-3",
+    },
+  },
+  defaultVariants: { variant: "outline" },
+});
+
+export type ToolGroupRootProps = Omit<
+  React.ComponentProps<typeof Collapsible>,
+  "open" | "onOpenChange"
+> &
+  VariantProps<typeof toolGroupVariants> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /** Open while this group is still streaming, auto-close on completion. */
+    streamingOpen?: boolean;
+  };
+
+function ToolGroupRoot({
+  className,
+  variant,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  defaultOpen = false,
+  streamingOpen = false,
+  children,
+  ...props
+}: ToolGroupRootProps) {
+  const stock = useStockShape();
+  const collapsibleRef = useRef<HTMLDivElement>(null);
+  const [initialOpen] = useState(defaultOpen);
+  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled
+    ? controlledOpen
+    : (userOpen ?? (streamingOpen || initialOpen));
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      lockScroll();
+      if (!isControlled) {
+        setUserOpen(open);
+      }
+      controlledOnOpenChange?.(open);
+    },
+    [lockScroll, isControlled, controlledOnOpenChange],
+  );
+
+  return (
+    <Collapsible
+      ref={collapsibleRef}
+      data-slot="tool-group-root"
+      data-variant={variant ?? "outline"}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      className={cn(
+        toolGroupVariants({ variant }),
+        // assistant-ui's outline/muted tool group is rounded-lg.
+        (variant ?? "outline") !== "ghost" && stockRadius(stock, "rounded-lg"),
+        "group/tool-group-root",
+        className,
+      )}
+      style={
+        {
+          "--animation-duration": `${ANIMATION_DURATION}ms`,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      {children}
+    </Collapsible>
+  );
+}
+
+function ToolGroupTrigger({
+  count,
+  active = false,
+  label,
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+  active?: boolean;
+  label?: string;
+}) {
+  const tr = useTraceT();
+  const text = label ?? tr.plural("toolCalls", count);
+
+  return (
+    <CollapsibleTrigger
+      data-slot="tool-group-trigger"
+      className={cn(
+        "aui-tool-group-trigger group/trigger flex origin-left items-center gap-2 text-sm transition-[color,scale] active:scale-[0.98]",
+        "group-data-[variant=ghost]/tool-group-root:text-ink-mute group-data-[variant=ghost]/tool-group-root:hover:text-ink group-data-[variant=ghost]/tool-group-root:py-1.5",
+        "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4",
+        "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4",
+        className,
+      )}
+      // The group is collapsed while the tools run, so the trigger is the only
+      // thing on screen that knows about it. The state is on the control, not
+      // in a second copy of its name.
+      aria-busy={active || undefined}
+      {...props}
+    >
+      {/* Pixel braces, the same 5×5 grid and the same box as the reasoning
+          bulb, still in both states so the label does not shift. */}
+      <span data-slot="tool-group-trigger-loader" className="aui-tool-group-trigger-loader inline-flex shrink-0">
+        {/* The chain header carries the running state. The trigger is named
+            by its text, so the glyph carries no name of its own, and the
+            running state is exposed on the trigger as aria-busy. */}
+        <DotMatrix state="tools" decorative className="!size-3 shrink-0" />
+      </span>
+      <span
+        data-slot="tool-group-trigger-label"
+        className={cn(
+          "aui-tool-group-trigger-label-wrapper inline-block min-w-[4rem] text-start text-xs leading-none font-medium",
+          "group-data-[variant=ghost]/tool-group-root:font-normal",
+          "group-data-[variant=outline]/tool-group-root:grow",
+          "group-data-[variant=muted]/tool-group-root:grow",
+        )}
+      >
+        {text}
+      </span>
+      <DisclosureChevron />
+    </CollapsibleTrigger>
+  );
+}
+
+function ToolGroupContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  const keepMounted = useExportKeepMounted();
+  return (
+    <CollapsibleContent
+      keepMounted={keepMounted}
+      data-slot="tool-group-content"
+      className={cn(
+        "aui-tool-group-content 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}
+    >
+      <div
+        className={cn(
+          "mt-2 flex flex-col gap-2",
+          "group-data-[variant=ghost]/tool-group-root:mt-1 group-data-[variant=ghost]/tool-group-root:gap-1",
+          "group-data-[variant=outline]/tool-group-root:mt-3 group-data-[variant=outline]/tool-group-root:border-t group-data-[variant=outline]/tool-group-root:px-4 group-data-[variant=outline]/tool-group-root:pt-3",
+          "group-data-[variant=muted]/tool-group-root:mt-3 group-data-[variant=muted]/tool-group-root:border-t group-data-[variant=muted]/tool-group-root:px-4 group-data-[variant=muted]/tool-group-root:pt-3",
+          "[&>*]:animate-in [&>*]:fade-in-0 [&>*]:blur-in-[2px] [&>*]:slide-in-from-top-1 [&>*]:animation-duration-(--animation-duration) [&>*]:ease-[cubic-bezier(0.32,0.72,0,1)]",
+          "[&>*]:motion-reduce:animate-none",
+          "[&>*:nth-child(2)]:[animation-delay:40ms]",
+          "[&>*:nth-child(3)]:[animation-delay:80ms]",
+          "[&>*:nth-child(4)]:[animation-delay:120ms]",
+          "[&>*:nth-child(n+5)]:[animation-delay:160ms]",
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+type ToolGroupComponent = FC<
+  PropsWithChildren<{ startIndex: number; endIndex: number }>
+> & {
+  Root: typeof ToolGroupRoot;
+  Trigger: typeof ToolGroupTrigger;
+  Content: typeof ToolGroupContent;
+};
+
+const ToolGroupImpl: FC<
+  PropsWithChildren<{ startIndex: number; endIndex: number }>
+> = ({ children, startIndex, endIndex }) => {
+  const toolCount = endIndex - startIndex + 1;
+
+  return (
+    <ToolGroupRoot>
+      <ToolGroupTrigger count={toolCount} />
+      <ToolGroupContent>{children}</ToolGroupContent>
+    </ToolGroupRoot>
+  );
+};
+
+/**
+ * @deprecated This wrapper targets the legacy `components.ToolGroup` prop
+ * on `<MessagePrimitive.Parts>`. Use `<MessagePrimitive.GroupedParts>` with
+ * a `groupBy` returning `"group-tool"` and compose `ToolGroupRoot` /
+ * `ToolGroupTrigger` / `ToolGroupContent` directly. See `thread.tsx`.
+ */
+const ToolGroup = memo(ToolGroupImpl) as unknown as ToolGroupComponent;
+
+ToolGroup.displayName = "ToolGroup";
+ToolGroup.Root = ToolGroupRoot;
+ToolGroup.Trigger = ToolGroupTrigger;
+ToolGroup.Content = ToolGroupContent;
+
+export {
+  ToolGroup,
+  ToolGroupRoot,
+  ToolGroupTrigger,
+  ToolGroupContent,
+  toolGroupVariants,
+};

package/src/components/chat/stock/tool-surface.ts

@@ -0,0 +1,120 @@
+/**
+ * The tool set, expanded once (#tool-contract).
+ *
+ * The composer toolbar prints a tool count and `/tools` prints the rows behind
+ * it. They used to compute that set separately — the toolbar over
+ * `prefs.mcpServers` with its own formula, the menu over `allowedTools` plus a
+ * built-in substitution — and disagreed on the same deployment. This module is
+ * the only expansion: raw backend ids in, one row per server with its
+ * effective tools out, plus the count derived from the same rows.
+ *
+ * Every id here is a backend id. Nothing in this file humanises a name.
+ */
+
+/** A row that can carry per-tool entries, as the host projects it. */
+export type ToolSurfaceRowInput = {
+  id: string;
+  /** Individual tools under this row, raw backend ids. */
+  tools?: ReadonlyArray<{ id: string }>;
+};
+
+export type ToolSurfaceRow = {
+  id: string;
+  /** Effective tool ids under this row. Raw backend ids, never labels. */
+  tools: readonly string[];
+  /**
+   * True when `tools` is the house built-in set rather than a list the
+   * deployment named. A deployment that names no tools for a house service
+   * leaves the row governed by that service's switch, so its two built-ins
+   * are what the switch actually turns on and off
+   * (digigraph/src/digigraph/tool_policy.py).
+   */
+  builtin: boolean;
+};
+
+/**
+ * The tools a house switch carries, by backend id. Kept in step with
+ * digigraph's `_DISABLE_TOOL_ALIASES` (digigraph/src/digigraph/tool_policy.py):
+ * disabling `digisearch` strips both of its pair, disabling `digivault` strips
+ * both of its pair.
+ */
+export const HOUSE_BUILTIN_TOOL_IDS: Readonly<Record<string, readonly string[]>> = {
+  digisearch: ["digisearch", "digisearch_fetch_all"],
+  digivault: ["digivault_search_notes", "digivault_get_note"],
+};
+
+/** The house service ids that carry a built-in pair. */
+export const HOUSE_SERVER_IDS: ReadonlySet<string> = new Set(Object.keys(HOUSE_BUILTIN_TOOL_IDS));
+
+/**
+ * One row per server, with the tools a deployment actually gets under it:
+ * the declared `tools` when the row names any, else the house built-in pair
+ * for that service id, else nothing.
+ */
+export function expandToolRows(
+  rows: readonly ToolSurfaceRowInput[],
+): ToolSurfaceRow[] {
+  return rows.map((row) => {
+    const declared = (row.tools ?? []).map((tool) => tool.id.trim()).filter(Boolean);
+    if (declared.length) return { id: row.id.trim(), tools: declared, builtin: false };
+    const builtin = HOUSE_BUILTIN_TOOL_IDS[row.id.trim()] ?? [];
+    return {
+      id: row.id.trim(),
+      tools: builtin,
+      builtin: builtin.length > 0,
+    };
+  });
+}
+
+export type ToolSurfaceCount = {
+  servers: number;
+  tools: number;
+};
+
+/**
+ * The count the toolbar prints, derived from the rows `/tools` renders.
+ *
+ * A row counts once while it is on and carries at least one tool; a row with
+ * no tools is one tool, because a server nobody has broken down is still one
+ * thing the assistant can call.
+ */
+export function countToolSurface(
+  rows: readonly ToolSurfaceRowInput[],
+  input: {
+    isOn: (rowId: string) => boolean;
+    isToolOn: (toolId: string) => boolean;
+  },
+): ToolSurfaceCount {
+  const counts: ToolSurfaceCount = { servers: 0, tools: 0 };
+  for (const row of expandToolRows(rows)) {
+    if (!input.isOn(row.id)) continue;
+    const enabled = row.tools.length
+      ? row.tools.filter((id) => input.isToolOn(id)).length
+      : 1;
+    if (enabled === 0) continue;
+    counts.servers += 1;
+    counts.tools += enabled;
+  }
+  return counts;
+}
+
+/**
+ * Whether a row is on. Kept here, not in the host, so the toolbar and the menu
+ * answer with the same rule: a house service follows its own switch, web
+ * search follows the tenant's, everything else falls back to the session
+ * toggle.
+ */
+export function connectedToolIsOn(
+  id: string,
+  input: {
+    digisearch: boolean;
+    vault: boolean;
+    webSearch: boolean;
+    extraToolOn: (id: string) => boolean;
+  },
+): boolean {
+  if (id === "digisearch") return input.digisearch;
+  if (id === "digivault") return input.vault;
+  if (id === "websearch" || id === "web_search") return input.webSearch;
+  return input.extraToolOn(id);
+}

package/src/components/chat/stock/tooltip-icon-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { type ComponentPropsWithRef, forwardRef } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
+import { Button } from "./ui/button";
+import { cn } from "../../../lib/utils";
+
+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>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              {...rest}
+              className={cn(
+                "aui-button-icon size-6 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/stock/ui/avatar.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "../../../../lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-hair after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-surface-2 text-sm text-ink-mute group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-accent text-on-accent bg-blend-color ring-2 ring-surface select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-surface",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-2 text-sm text-ink-mute ring-2 ring-surface group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/src/components/chat/stock/ui/button.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../../../lib/utils"
+import { useStockShape } from "../stock-shape"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-accent/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-accent text-on-accent hover:bg-accent/80",
+        outline:
+          "border-hair bg-surface hover:bg-surface-2 hover:text-ink aria-expanded:bg-surface-2 aria-expanded:text-ink dark:border-input dark:bg-surface-2/30 dark:hover:bg-surface-2/50",
+        secondary:
+          "bg-surface-2 text-ink hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-surface-2 aria-expanded:text-ink",
+        ghost:
+          "hover:bg-surface-2 hover:text-ink aria-expanded:bg-surface-2 aria-expanded:text-ink dark:hover:bg-surface-2/50",
+        destructive:
+          "bg-danger/10 text-danger hover:bg-danger/20 focus-visible:border-danger/40 focus-visible:ring-danger/20 dark:bg-danger/20 dark:hover:bg-danger/30 dark:focus-visible:ring-danger/40",
+        link: "text-accent underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs in-data-[slot=button-group]:rounded-none has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-none has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-none in-data-[slot=button-group]:rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-none in-data-[slot=button-group]:rounded-none",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+// assistant-ui's shadcn base-nova radii, applied only inside the stock Thread
+// (see ../stock-shape.tsx). Other skins that reuse this button keep the square
+// house radius from buttonVariants above.
+const STOCK_BUTTON_RADIUS = {
+  default: "rounded-lg",
+  xs: "rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+  sm: "rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+  lg: "rounded-lg",
+  icon: "rounded-lg",
+  "icon-xs":
+    "rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+  "icon-sm":
+    "rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+  "icon-lg": "rounded-lg",
+} as const
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  const stock = useStockShape()
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(
+        buttonVariants({ variant, size }),
+        stock && STOCK_BUTTON_RADIUS[size ?? "default"],
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/chat/stock/ui/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }