@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/attachment.aui.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+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 "./use-attachment-src";
+import { useSkinChrome } from "./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-sm 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-ink/60 [&>button]:hover:bg-ink/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-surface relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden rounded-sm">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC = () => {
+  const src = useAttachmentSrc();
+
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none after:hidden">
+      <AvatarImage
+        src={src}
+        alt="Attachment preview"
+        className="aui-attachment-tile-image rounded-none object-cover"
+      />
+      <AvatarFallback>
+        <FileText className="aui-attachment-tile-fallback-icon text-ink-mute 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-surface-2 hover:after:bg-ink/10 focus-visible:ring-accent/50 relative size-14 cursor-pointer overflow-hidden rounded-[calc(var(--composer-radius,1rem)-var(--composer-padding,8px))] 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-danger/60 dark:after:ring-danger/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-surface/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-ink-mute size-4" />
+                </div>
+              )}
+              {isError && (
+                <div
+                  aria-hidden="true"
+                  className="aui-attachment-tile-error bg-surface/70 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none"
+                >
+                  <AlertCircleIcon className="text-danger 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-ink/60! text-bg after:absolute after:-inset-1.5 hover:bg-ink/80! hover:text-bg! 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-ink-mute hover:text-ink hover:bg-ink-mute/15 dark:border-hair dark:hover:bg-ink-mute/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/stock/chat-notice.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { DotMatrix } from "../DotMatrix";
+// Relative, not `@/lib/utils`: host apps (digithings-web) import this file
+// through `@digithings-ai/ui/chat/notice`, where `@/` is their own root.
+import { cn } from "../../../lib/utils";
+import { stockRadius, useStockShape } from "./stock-shape";
+
+/**
+ * One boxed notice for everything the backend tells the reader outside the
+ * answer itself (DIG-4459 chat transparency): a failed turn, a failed tool
+ * call, a status line. Error notices are red-tinted, status notices are
+ * neutral. The message error banner puts these props on assistant-ui's
+ * ErrorPrimitive.Root; tool errors and status lines use a plain div.
+ */
+export type ChatNoticeTone = "error" | "status";
+
+const TONE_CLASS: Record<ChatNoticeTone, string> = {
+  error:
+    "border-danger/20 bg-danger/[0.04] text-ink [&_.aui-chat-notice-title]:text-danger",
+  status: "border-hair bg-surface-2/40 text-ink",
+};
+
+export function chatNoticeRootProps(
+  tone: ChatNoticeTone,
+  className?: string,
+  /** Inside the stock Thread (useStockShape): assistant-ui's rounded-md box. */
+  stock = false,
+): {
+  className: string;
+  "data-slot": "chat-notice";
+  "data-tone": ChatNoticeTone;
+  role: "alert" | "status";
+} {
+  return {
+    className: cn(
+      "aui-chat-notice flex w-full items-start gap-2 border px-3 py-2 text-xs leading-snug",
+      stockRadius(stock, "rounded-md"),
+      TONE_CLASS[tone],
+      className,
+    ),
+    "data-slot": "chat-notice",
+    "data-tone": tone,
+    role: tone === "error" ? "alert" : "status",
+  };
+}
+
+/**
+ * The full detail (error text, traceback, JSON payload). Never cut and never
+ * folded: it sits in a max-height scroll area (Chris, 21 Oct).
+ */
+export const ChatNoticeDetail: FC<{ text: string }> = ({ text }) => (
+  <pre
+    data-slot="chat-notice-detail"
+    className="aui-chat-notice-detail mt-1 max-h-72 overflow-auto overscroll-contain whitespace-pre-wrap break-words font-mono text-[0.68rem] leading-relaxed"
+  >
+    {text}
+  </pre>
+);
+
+/** Marker + title + optional detail + optional action, inside a notice root. */
+export const ChatNoticeContent: FC<{
+  tone: ChatNoticeTone;
+  title: ReactNode;
+  detail?: string;
+  extra?: ReactNode;
+  action?: ReactNode;
+}> = ({ tone, title, detail, extra, action }) => (
+  <>
+    <DotMatrix
+      state={tone === "error" ? "error" : "idle"}
+      label={tone === "error" ? "Error" : "Status"}
+      className={cn(
+        "aui-chat-notice-marker !size-3 mt-0.5 shrink-0",
+        tone === "error" ? "text-danger/60" : "text-ink-mute",
+      )}
+    />
+    <div className="min-w-0 flex-1">
+      <div
+        data-slot="chat-notice-title"
+        className="aui-chat-notice-title whitespace-pre-wrap break-words font-medium"
+      >
+        {title}
+      </div>
+      {detail ? <ChatNoticeDetail text={detail} /> : null}
+      {extra}
+    </div>
+    {action}
+  </>
+);
+
+/** A neutral status line from the backend ("Waiting for model capacity…"). */
+export const ChatStatusNotice: FC<{
+  message: string;
+  detail?: string;
+  className?: string;
+}> = ({ message, detail, className }) => {
+  const stock = useStockShape();
+  return (
+    <div {...chatNoticeRootProps("status", cn("my-1", className), stock)}>
+      <ChatNoticeContent tone="status" title={message} detail={detail} />
+    </div>
+  );
+};
+
+/**
+ * A backend notice carried as a data part: `data-notice` with
+ * `{ message, detail?, tone? }`, or a `data-status` that carries a `message`.
+ * Returns null for every other data part (connection state, conversation id,
+ * usage…), which have their own renderers or none.
+ */
+export function backendNoticeOf(part: {
+  readonly type: string;
+  readonly name?: string;
+  readonly data?: unknown;
+}): { tone: ChatNoticeTone; message: string; detail?: string } | null {
+  if (part.type !== "data") return null;
+  if (part.name !== "notice" && part.name !== "status") return null;
+  const data = (part.data ?? {}) as { message?: unknown; detail?: unknown; tone?: unknown };
+  const message = typeof data.message === "string" ? data.message.trim() : "";
+  if (!message) return null;
+  const detail = typeof data.detail === "string" && data.detail.trim() ? data.detail : undefined;
+  const tone: ChatNoticeTone = data.tone === "error" ? "error" : "status";
+  return { tone, message, ...(detail ? { detail } : {}) };
+}
+
+/** Renders a backend notice part, or nothing. */
+export const BackendNotice: FC<{
+  part: { readonly type: string; readonly name?: string; readonly data?: unknown };
+}> = ({ part }) => {
+  const notice = backendNoticeOf(part);
+  const stock = useStockShape();
+  if (!notice) return null;
+  if (notice.tone === "status") {
+    return <ChatStatusNotice message={notice.message} detail={notice.detail} />;
+  }
+  return (
+    <div {...chatNoticeRootProps("error", "my-1", stock)}>
+      <ChatNoticeContent tone="error" title={notice.message} detail={notice.detail} />
+    </div>
+  );
+};

package/src/components/chat/stock/chat-private-mode.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { createContext, useContext, useEffect, useSyncExternalStore, type ReactNode } from "react";
+
+/**
+ * The one private-session flag every skin's export reads.
+ *
+ * Private mode keeps the typed text out of files: the stored messages still
+ * hold it, and an export (its file name carries a slug of the question)
+ * would hand it over. The host owns the session flag and passes it to
+ * `ThreadSkinView`, which wraps every skin in `ChatPrivateModeProvider`.
+ *
+ * Two readers:
+ * - React (`useChatPrivateMode`) for the menus, which render nothing.
+ * - Plain code (`isChatPrivateMode`) for the export runners, which refuse.
+ *   A mounted private scope counts until it unmounts or turns the mode off.
+ */
+let privateScopes = 0;
+const listeners = new Set<() => void>();
+
+function emit(): void {
+  for (const listener of listeners) listener();
+}
+
+/** True while any mounted chat is in a private session. */
+export function isChatPrivateMode(): boolean {
+  return privateScopes > 0;
+}
+
+export function subscribeChatPrivateMode(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+const ChatPrivateModeContext = createContext(false);
+
+export function ChatPrivateModeProvider({
+  privateMode,
+  children,
+}: {
+  privateMode?: boolean | undefined;
+  children: ReactNode;
+}) {
+  const on = privateMode === true;
+  useEffect(() => {
+    if (!on) return;
+    privateScopes += 1;
+    emit();
+    return () => {
+      privateScopes -= 1;
+      emit();
+    };
+  }, [on]);
+  return <ChatPrivateModeContext.Provider value={on}>{children}</ChatPrivateModeContext.Provider>;
+}
+
+/** The private flag for this chat (its provider) or any mounted private chat. */
+export function useChatPrivateMode(): boolean {
+  const scoped = useContext(ChatPrivateModeContext);
+  const anywhere = useSyncExternalStore(subscribeChatPrivateMode, isChatPrivateMode, () => false);
+  return scoped || anywhere;
+}

package/src/components/chat/stock/deploy-ui-context.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+/**
+ * Deploy-driven UI knobs for the stock (baseline) Thread.
+ * Provided by ProductStockShell — never imports Ink / CLI packages.
+ */
+
+import { createContext, useContext } from "react";
+import type {
+  ChainDisclosureMode,
+  ThinkingMode,
+  UserAlign,
+  ViewMode,
+} from "./skin-types";
+
+export type DeployUiValue = {
+  /** Effective reasoning disclosure (view mode + thinking override). */
+  reasoning: ChainDisclosureMode;
+  /** Effective tool-call disclosure (view mode only). */
+  toolCalls: ChainDisclosureMode;
+  /**
+   * The raw view level, before it is folded into a disclosure mode. The
+   * distinction matters: `quiet` is not "closed", it is "one summary line".
+   */
+  view: ViewMode;
+  /** The raw thinking override, before folding. */
+  thinking: ThinkingMode;
+  userAlign: UserAlign;
+};
+
+export const DEFAULT_DEPLOY_UI: DeployUiValue = {
+  reasoning: "collapsed",
+  toolCalls: "collapsed",
+  view: "balanced",
+  thinking: "auto",
+  userAlign: "right",
+};
+
+const DeployUiContext = createContext<DeployUiValue>(DEFAULT_DEPLOY_UI);
+
+export const DeployUiProvider = DeployUiContext.Provider;
+
+export function useDeployUi(): DeployUiValue {
+  return useContext(DeployUiContext);
+}
+
+export function useDisclosureUi(kind: "reasoning" | "toolCalls") {
+  const ui = useDeployUi();
+  const mode = ui[kind];
+  return {
+    mode,
+    visible: mode !== "off",
+    defaultOpen: mode === "expanded",
+    locked: false,
+  };
+}
+
+/**
+ * How the /view level folds the chain in skins that render it with plain
+ * collapsibles (base, chatgpt). Collapsibles only read `defaultOpen` on mount,
+ * so `key` changes with the level and a /view switch remounts them in the new
+ * state. quiet: tool calls fold into the group's one summary line and thinking
+ * stays folded even while it streams. balanced: today's layout (folded group
+ * and cards; thinking opens while it streams). verbose: everything open.
+ */
+export type ViewDisclosure = {
+  key: string;
+  toolGroupOpen: boolean;
+  toolCardOpen: boolean;
+  reasoningOpen: (running: boolean) => boolean;
+};
+
+export function viewDisclosure(
+  ui: Pick<DeployUiValue, "view" | "toolCalls" | "reasoning">,
+): ViewDisclosure {
+  const { view, toolCalls, reasoning } = ui;
+  const verbose = toolCalls === "expanded";
+  return {
+    key: `${view}:${toolCalls}:${reasoning}`,
+    toolGroupOpen: verbose,
+    toolCardOpen: verbose,
+    reasoningOpen: (running) =>
+      reasoning === "expanded" || (running && view !== "quiet" && reasoning !== "collapsed"),
+  };
+}
+
+export function useViewDisclosure(): ViewDisclosure {
+  return viewDisclosure(useDeployUi());
+}