@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/base/attachment.aui.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+/**
+ * Base skin attachment: the stock twin re-expressed on theme tokens only
+ * (foreground, background, muted, border, destructive, ring), so the active
+ * tenant or brand theme styles it. Kept in step with `stock/attachment.aui.tsx`; the
+ * stock copy keeps the digichat square look.
+ */
+
+import {
+  type PropsWithChildren,
+  useState,
+  type FC,
+  isValidElement,
+} from "react";
+import {
+  XIcon,
+  PlusIcon,
+  FileText,
+  AlertCircleIcon,
+} from "lucide-react";
+import {
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  useAuiState,
+  useAui,
+} from "@assistant-ui/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogTrigger,
+} from "./ui/dialog";
+import { Avatar, AvatarImage, AvatarFallback } from "./ui/avatar";
+import { TooltipIconButton } from "./tooltip-icon-button";
+import { useAttachmentSrc } from "../../stock/use-attachment-src";
+import { useSkinChrome } from "../../stock/skin-chrome";
+import { cn } from "../../../../lib/utils";
+import { DotMatrix } from "../../DotMatrix";
+
+// Protocol literal mirrored from the app's embed-page-context-messages
+// (`PAGE_CONTEXT_ATTACHMENT_NAME = "page-context.html"`). The sending side
+// names the page-context attachment; silent skins suppress its chip by this
+// name. Kept as a literal so the package never imports app code (WS4).
+const PAGE_CONTEXT_ATTACHMENT_NAME = "page-context.html";
+
+type AttachmentPreviewProps = {
+  src: string;
+};
+
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return (
+    <img
+      src={src}
+      alt="Attachment preview"
+      className={cn(
+        "block h-auto max-h-[80vh] w-auto max-w-full rounded-md object-contain transition-opacity duration-(--dur) motion-reduce:transition-none",
+        isLoaded
+          ? "aui-attachment-preview-image-loaded opacity-100"
+          : "aui-attachment-preview-image-loading opacity-0",
+      )}
+      onLoad={() => setIsLoaded(true)}
+    />
+  );
+};
+
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc();
+
+  if (!src) return children;
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        nativeButton={false}
+        className="aui-attachment-preview-trigger cursor-zoom-in"
+        render={
+          isValidElement(children) ? (
+            children
+          ) : (
+            <button type="button">{children}</button>
+          )
+        }
+      />
+      <DialogContent className="aui-attachment-preview-dialog-content [&>button]:bg-foreground/60 [&>button]:hover:bg-foreground/80 [&_svg]:text-background p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0!">
+        <DialogTitle className="aui-sr-only sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <div className="aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden rounded-md">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC = () => {
+  const src = useAttachmentSrc();
+
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-lg after:hidden">
+      <AvatarImage
+        src={src}
+        alt="Attachment preview"
+        className="aui-attachment-tile-image rounded-lg object-cover"
+      />
+      <AvatarFallback>
+        <FileText className="aui-attachment-tile-fallback-icon text-muted-foreground size-6 stroke-[1.5]" />
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+
+const AttachmentUI: FC = () => {
+  const aui = useAui();
+  const isComposer = aui.attachment.source !== "message";
+
+  const { pageContext } = useSkinChrome();
+  const attachmentName = useAuiState((s) => s.attachment.name);
+
+  const isImage = useAuiState((s) => s.attachment.type === "image");
+  const typeLabel = useAuiState((s) => {
+    const type = s.attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        return type;
+    }
+  });
+
+  const uploadState = useAuiState((s) =>
+    s.attachment.status.type === "running"
+      ? "uploading"
+      : s.attachment.status.type === "incomplete" &&
+          s.attachment.status.reason === "error"
+        ? "error"
+        : undefined,
+  );
+  const isUploading = uploadState === "uploading";
+  const isError = uploadState === "error";
+
+  const errorMessage = useAuiState((s) =>
+    s.attachment.status.type === "incomplete" &&
+    s.attachment.status.reason === "error"
+      ? (s.attachment.status.message ?? "Upload failed")
+      : undefined,
+  );
+
+  // Hooks above — safe to bail. The attachment stays on the runtime so its
+  // file part still reaches the model; only the chip is suppressed.
+  if (pageContext === "silent" && attachmentName === PAGE_CONTEXT_ATTACHMENT_NAME) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <AttachmentPrimitive.Root
+          className={cn(
+            "aui-attachment-root relative",
+            isComposer &&
+              "animate-in fade-in-0 zoom-in-95 duration-(--duration-hover) motion-reduce:animate-none",
+            isImage &&
+              !isComposer &&
+              "aui-attachment-root-message only:*:first:size-24",
+          )}
+        >
+          <AttachmentPreviewDialog>
+            <TooltipTrigger
+              render={
+                <div
+                  className={cn(
+                    "aui-attachment-tile bg-muted hover:after:bg-foreground/10 focus-visible:ring-ring/50 relative size-14 cursor-pointer overflow-hidden rounded-lg transition-transform outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-black/10 after:transition-colors after:ring-inset focus-visible:ring-1 active:scale-[0.96] motion-reduce:transition-none dark:after:ring-white/10",
+                    isError &&
+                      "after:ring-destructive/60 dark:after:ring-destructive/60",
+                  )}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`${typeLabel} attachment${
+                    isError
+                      ? ", upload failed"
+                      : isUploading
+                        ? ", uploading"
+                        : ""
+                  }`}
+                />
+              }
+            >
+              <AttachmentThumb />
+              {isUploading && (
+                <div
+                  aria-hidden="true"
+                  className="aui-attachment-tile-uploading bg-background/60 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none"
+                >
+                  <DotMatrix state="loading" decorative className="text-muted-foreground size-4" />
+                </div>
+              )}
+              {isError && (
+                <div
+                  aria-hidden="true"
+                  className="aui-attachment-tile-error bg-background/70 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none"
+                >
+                  <AlertCircleIcon className="text-destructive size-4" />
+                </div>
+              )}
+            </TooltipTrigger>
+          </AttachmentPreviewDialog>
+          {isComposer && <AttachmentRemove />}
+        </AttachmentPrimitive.Root>
+        <TooltipContent side="top">
+          <AttachmentPrimitive.Name />
+          {errorMessage && (
+            <p className="aui-attachment-error-message">{errorMessage}</p>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+const AttachmentRemove: FC = () => {
+  return (
+    <AttachmentPrimitive.Remove
+      render={
+        <TooltipIconButton
+          tooltip="Remove file"
+          className="aui-attachment-tile-remove absolute end-1 top-1 size-5 rounded-full bg-foreground/60! text-background after:absolute after:-inset-1.5 hover:bg-foreground/80! hover:text-background! active:scale-[0.96] motion-reduce:transition-none"
+          side="top"
+        />
+      }
+    >
+      <XIcon className="aui-attachment-remove-icon size-3 stroke-[2.5]" />
+    </AttachmentPrimitive.Remove>
+  );
+};
+
+export const UserMessageAttachments: FC = () => {
+  return (
+    <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
+      <MessagePrimitive.Attachments>
+        {() => <AttachmentUI />}
+      </MessagePrimitive.Attachments>
+    </div>
+  );
+};
+
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="aui-composer-attachments flex w-full flex-row items-center gap-2 overflow-x-auto empty:hidden">
+      <ComposerPrimitive.Attachments>
+        {() => <AttachmentUI />}
+      </ComposerPrimitive.Attachments>
+    </div>
+  );
+};
+
+export const ComposerAddAttachment: FC = () => {
+  return (
+    <ComposerPrimitive.AddAttachment
+      render={
+        <TooltipIconButton
+          tooltip="Add Attachment"
+          side="bottom"
+          variant="ghost"
+          size="icon"
+          className="aui-composer-add-attachment text-muted-foreground hover:text-foreground hover:bg-muted-foreground/15 dark:border-border dark:hover:bg-muted-foreground/30 size-7 rounded-full active:scale-[0.96] motion-reduce:transition-none"
+          aria-label="Add Attachment"
+        />
+      }
+    >
+      <PlusIcon className="aui-attachment-add-icon size-4" />
+    </ComposerPrimitive.AddAttachment>
+  );
+};

package/src/components/chat/skins/base/aui-default/README.md

@@ -0,0 +1,45 @@
+# assistant-ui default trace parts (base skin)
+
+Copies of assistant-ui's own Reasoning, ToolGroup and ToolFallback components
+at the pinned `@assistant-ui/react@0.15.18` tag
+(`assistant-ui/assistant-ui@d511ff49`, `packages/ui/src/components/react/assistant-ui/elements/`,
+the source of the `https://r.assistant-ui.com/base/*` registry items), so the
+`base` / `base-assistant-ui` skins render reasoning, tool calls and tool
+groups exactly as assistant-ui ships them (no digichat trace styling).
+
+| file | upstream file at the tag |
+|---|---|
+| `reasoning.tsx`, `reasoning.aui.tsx` | `elements/reasoning.tsx`, `elements/reasoning.aui.tsx` |
+| `tool-group.aui.tsx` | `elements/tool-group.aui.tsx` |
+| `tool-fallback.aui.tsx` | `elements/tool-fallback.aui.tsx` (name, arguments, result, approval controls, duration) |
+| `collapsible.tsx` | shadcn base-nova `ui/collapsible.tsx` (base-ui) |
+| `collapsible-root.tsx` | `elements/collapsible-root.tsx` at `assistant-ui/assistant-ui@1f41f916` (the `@assistant-ui/elements-run-activity` registry item, newer than the tag above; it uses only primitives the pinned package already has) |
+| `surfaces.ts` | the `collapsePanel` class from `elements/surfaces.tsx` at the same commit |
+
+Import paths are rewritten. Local changes:
+
+- `tool-fallback.aui.tsx`: the argument and result blocks cap at `max-h-72`
+  and scroll inside the card, so a long payload does not stretch the thread;
+  `/view verbose` opens the cards (initial open state from
+  `useViewDisclosure`); the row's words and status come from the shared trace
+  rules (`../../../trace-grouping/tool-row.ts`), and a running call's card
+  shows its arguments, folding again once the call completes;
+- `tool-group.aui.tsx`: `streamingOpen` (open while the group streams, folded
+  on completion), as in the digichat skin's tool group.
+
+The trace itself (`../elements/assistant-trace.aui.tsx`) is shared: the base
+Thread and the stock Thread (`../../../stock/thread.aui.tsx`) both render it.
+
+The base thread (`../thread.tsx`) also uses assistant-ui's own working
+indicator (the pulsing dot) and MessageError markup from the upstream
+`elements/thread.aui.tsx`. The `digichat` skin keeps `../../stock/*`.
+
+The trace follows the digichat skin's grouping exactly
+(`../../../trace-grouping`, shared with `gallery-thread/thread.aui.tsx`):
+`MessagePrimitive.GroupedParts` puts consecutive reasoning and tool calls
+under one work chain (`../elements/work-chain.tsx`), whose header is open
+while the agent works and folds shortly after the answer starts (folded it
+reads as the status line: "Working — web_search", "Used 3 tools"). Inside
+it, adjacent reasoning is one reasoning box that opens and streams while it
+runs, and adjacent tool calls are one `N tool calls` group that opens while
+the tools run. Only the look differs from the digichat skin.

package/src/components/chat/skins/base/aui-default/collapsible-root.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Collapsible } from "@base-ui/react/collapsible";
+import { forwardRef } from "react";
+
+export const CollapsibleRoot = forwardRef<
+  React.ComponentRef<typeof Collapsible.Root>,
+  React.ComponentPropsWithoutRef<typeof Collapsible.Root>
+>(function CollapsibleRoot(props, ref) {
+  return <Collapsible.Root ref={ref} data-slot="collapsible" {...props} />;
+});
+
+export function CollapsibleTrigger({ ...props }: Collapsible.Trigger.Props) {
+  return <Collapsible.Trigger data-slot="collapsible-trigger" {...props} />;
+}
+
+export function CollapsibleContent({ ...props }: Collapsible.Panel.Props) {
+  return <Collapsible.Panel data-slot="collapsible-content" {...props} />;
+}

package/src/components/chat/skins/base/aui-default/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 };

package/src/components/chat/skins/base/aui-default/reasoning.aui.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { memo, useCallback, useRef } from "react";
+import {
+  useScrollLock,
+  useAuiState,
+  type ReasoningMessagePartComponent,
+  type ReasoningGroupComponent,
+} from "@assistant-ui/react";
+import { MarkdownText } from "../markdown-text";
+import {
+  ANIMATION_DURATION,
+  ReasoningRoot as ReasoningRootBase,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+  reasoningVariants,
+  type ReasoningRootProps,
+} from "./reasoning";
+
+export type { ReasoningRootProps } from "./reasoning";
+
+/** `ReasoningRoot` with the thread viewport scroll locked during disclosure animations. */
+function ReasoningRoot({
+  ref,
+  onAnimationStart,
+  ...props
+}: ReasoningRootProps) {
+  const collapsibleRef = useRef<HTMLDivElement | null>(null);
+  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+
+  const handleAnimationStart = useCallback(() => {
+    lockScroll();
+    onAnimationStart?.();
+  }, [lockScroll, onAnimationStart]);
+
+  const composedRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      collapsibleRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  return (
+    <ReasoningRootBase
+      ref={composedRef}
+      onAnimationStart={handleAnimationStart}
+      {...props}
+    />
+  );
+}
+
+const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;
+
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  children,
+  startIndex,
+  endIndex,
+}) => {
+  const isReasoningStreaming = useAuiState((s) => {
+    if (s.message.status?.type !== "running") return false;
+    for (let index = startIndex; index <= endIndex; index++) {
+      if (s.message.parts[index]?.status.type === "running") return true;
+    }
+    return false;
+  });
+
+  return (
+    <ReasoningRoot streaming={isReasoningStreaming}>
+      <ReasoningTrigger active={isReasoningStreaming} />
+      <ReasoningContent aria-busy={isReasoningStreaming}>
+        <ReasoningText>{children}</ReasoningText>
+      </ReasoningContent>
+    </ReasoningRoot>
+  );
+};
+
+const Reasoning = memo(
+  ReasoningImpl,
+) as unknown as ReasoningMessagePartComponent & {
+  Root: typeof ReasoningRoot;
+  Trigger: typeof ReasoningTrigger;
+  Content: typeof ReasoningContent;
+  Text: typeof ReasoningText;
+  Fade: typeof ReasoningFade;
+};
+
+Reasoning.displayName = "Reasoning";
+Reasoning.Root = ReasoningRoot;
+Reasoning.Trigger = ReasoningTrigger;
+Reasoning.Content = ReasoningContent;
+Reasoning.Text = ReasoningText;
+Reasoning.Fade = ReasoningFade;
+
+/**
+ * @deprecated This wrapper targets the legacy `components.ReasoningGroup`
+ * prop on `<MessagePrimitive.Parts>`. Use `<MessagePrimitive.GroupedParts>`
+ * with a `groupBy` returning `"group-reasoning"` and compose `ReasoningRoot`
+ * / `ReasoningTrigger` / `ReasoningContent` / `ReasoningText` directly.
+ * See `thread.aui.tsx` for an example.
+ */
+const ReasoningGroup = memo(ReasoningGroupImpl);
+ReasoningGroup.displayName = "ReasoningGroup";
+
+export {
+  Reasoning,
+  ReasoningGroup,
+  ReasoningRoot,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+  reasoningVariants,
+};