@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/image.tsx

@@ -0,0 +1,531 @@
+"use client";
+
+import {
+  memo,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  type PropsWithChildren,
+} from "react";
+import { createPortal } from "react-dom";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  CopyIcon,
+  DownloadIcon,
+  ImageOffIcon,
+  RefreshCwIcon,
+  ShieldAlertIcon,
+  XIcon,
+} from "lucide-react";
+import type {
+  ImageMessagePart,
+  ImageMessagePartComponent,
+} from "@assistant-ui/react";
+import { cn } from "../../../lib/utils";
+import { DotMatrix } from "../DotMatrix";
+
+const extensionForMimeType = (mimeType?: string): string => {
+  switch (mimeType) {
+    case "image/png":
+      return "png";
+    case "image/jpeg":
+    case "image/jpg":
+      return "jpg";
+    case "image/webp":
+      return "webp";
+    case "image/gif":
+      return "gif";
+    case "image/svg+xml":
+      return "svg";
+    default:
+      return "png";
+  }
+};
+
+const dataUriToBlob = (dataUri: string): Blob => {
+  const commaIndex = dataUri.indexOf(",");
+  const meta = commaIndex >= 0 ? dataUri.slice(0, commaIndex) : dataUri;
+  const data = commaIndex >= 0 ? dataUri.slice(commaIndex + 1) : "";
+  const mime =
+    meta.match(/data:([^;]+)/i)?.[1]?.toLowerCase() ??
+    "application/octet-stream";
+  if (!/;base64/i.test(meta)) {
+    const text = data.replace(/(?:%[0-9A-Fa-f]{2})+/g, (seq) => {
+      try {
+        return decodeURIComponent(seq);
+      } catch {
+        return seq;
+      }
+    });
+    return new Blob([text], { type: mime });
+  }
+  const bytes = atob(data);
+  const arr = new Uint8Array(bytes.length);
+  for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
+  return new Blob([arr], { type: mime });
+};
+
+const mimeFromImage = (image: string): string | undefined =>
+  image.match(/^data:([^;,]+)/i)?.[1]?.toLowerCase();
+
+const downloadImagePart = (
+  part: Pick<ImageMessagePart, "image" | "filename">,
+): void => {
+  if (typeof document === "undefined") return;
+  const ext = extensionForMimeType(mimeFromImage(part.image));
+  const filename = part.filename ?? `image.${ext}`;
+  const isDataUri = /^data:/i.test(part.image);
+  const objectUrl = isDataUri
+    ? URL.createObjectURL(dataUriToBlob(part.image))
+    : null;
+  const href = objectUrl ?? part.image;
+  const a = document.createElement("a");
+  a.href = href;
+  a.download = filename;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), 40_000);
+};
+
+const copyImagePart = async (
+  part: Pick<ImageMessagePart, "image">,
+): Promise<void> => {
+  if (
+    typeof navigator === "undefined" ||
+    !navigator.clipboard ||
+    typeof ClipboardItem === "undefined"
+  ) {
+    throw new Error("Clipboard API is not available in this environment.");
+  }
+  const blob = /^data:/i.test(part.image)
+    ? dataUriToBlob(part.image)
+    : await fetch(part.image).then((r) => r.blob());
+  const mime = mimeFromImage(part.image) ?? blob.type ?? "image/png";
+  await navigator.clipboard.write([new ClipboardItem({ [mime]: blob })]);
+};
+
+const imageVariants = cva(
+  "aui-image-root relative overflow-hidden rounded-lg",
+  {
+    variants: {
+      variant: {
+        outline: "border-hair border",
+        ghost: "",
+        muted: "bg-surface-2/50",
+      },
+      size: {
+        sm: "max-w-64",
+        default: "max-w-96",
+        lg: "max-w-[512px]",
+        full: "w-full",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default",
+    },
+  },
+);
+
+export type ImageRootProps = React.ComponentProps<"div"> &
+  VariantProps<typeof imageVariants>;
+
+function ImageRoot({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ImageRootProps) {
+  return (
+    <div
+      data-slot="image-root"
+      data-variant={variant}
+      data-size={size}
+      className={cn(imageVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+type ImagePreviewProps = Omit<React.ComponentProps<"img">, "children"> & {
+  containerClassName?: string;
+};
+
+function ImagePreview({
+  className,
+  containerClassName,
+  onLoad,
+  onError,
+  alt = "Image content",
+  src,
+  ...props
+}: ImagePreviewProps) {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [loadedSrc, setLoadedSrc] = useState<string | undefined>(undefined);
+  const [errorSrc, setErrorSrc] = useState<string | undefined>(undefined);
+
+  const loaded = loadedSrc === src;
+  const error = errorSrc === src;
+
+  useEffect(() => {
+    const image = imgRef.current;
+    if (typeof src !== "string" || !image?.complete) return;
+    if (image.naturalWidth > 0) setLoadedSrc(src);
+    else setErrorSrc(src);
+  }, [src]);
+
+  return (
+    <div
+      data-slot="image-preview"
+      className={cn("relative min-h-32", containerClassName)}
+    >
+      {!loaded && !error && (
+        <div
+          data-slot="image-preview-loading"
+          className="bg-surface-2/50 absolute inset-0 flex items-center justify-center"
+        >
+          <DotMatrix state="loading" decorative className="text-ink-mute size-8" />
+        </div>
+      )}
+      {error ? (
+        <div
+          data-slot="image-preview-error"
+          className="bg-surface-2/50 flex min-h-32 items-center justify-center p-4"
+        >
+          <ImageOffIcon className="text-ink-mute size-8" />
+        </div>
+      ) : (
+        <img
+          ref={imgRef}
+          src={src}
+          alt={alt}
+          className={cn(
+            "block h-auto w-full object-contain",
+            !loaded && "invisible",
+            className,
+          )}
+          onLoad={(e) => {
+            if (typeof src === "string") setLoadedSrc(src);
+            onLoad?.(e);
+          }}
+          onError={(e) => {
+            if (typeof src === "string") setErrorSrc(src);
+            onError?.(e);
+          }}
+          {...props}
+        />
+      )}
+    </div>
+  );
+}
+
+function ImageFilename({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  if (!children) return null;
+
+  return (
+    <span
+      data-slot="image-filename"
+      className={cn(
+        "text-ink-mute block truncate px-2 py-1.5 text-xs",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+type ImageZoomProps = PropsWithChildren<{
+  src: string;
+  alt?: string;
+}>;
+
+function ImageZoom({ src, alt = "Image preview", children }: ImageZoomProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const handleOpen = useCallback(() => setIsOpen(true), []);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        handleClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const focusables = overlayRef.current?.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      const first = focusables?.[0];
+      const last = focusables?.[focusables.length - 1];
+      if (!first || !last) return;
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleClose]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) closeRef.current?.focus();
+  }, [isOpen]);
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onClick={handleOpen}
+        onKeyDown={(e) => e.key === "Enter" && handleOpen()}
+        role="button"
+        tabIndex={0}
+        className="aui-image-zoom-trigger cursor-zoom-in"
+        aria-label="Click to zoom image"
+      >
+        {children}
+      </div>
+      {isMounted &&
+        isOpen &&
+        createPortal(
+          <div
+            ref={overlayRef}
+            data-slot="image-zoom-overlay"
+            role="dialog"
+            aria-modal="true"
+            className="aui-image-zoom-overlay fade-in animate-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 duration-(--duration-hover)"
+            onClick={handleClose}
+            aria-label="Zoomed image"
+          >
+            <img
+              data-slot="image-zoom-content"
+              src={src}
+              alt={alt}
+              className="aui-image-zoom-content fade-in zoom-in-95 animate-in max-h-[90vh] max-w-[90vw] cursor-zoom-out object-contain duration-(--duration-hover)"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClose();
+              }}
+            />
+            <button
+              ref={closeRef}
+              type="button"
+              aria-label="Close zoomed image"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClose();
+              }}
+              className="text-ink-mute hover:text-ink bg-surface/80 absolute end-4 top-4 cursor-pointer rounded-md p-2"
+            >
+              <XIcon className="size-5" />
+            </button>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+function ImageGenerating({ className }: { className?: string }) {
+  return (
+    <div
+      data-slot="image-generating"
+      className={cn(
+        "bg-surface-2/50 flex min-h-32 items-center justify-center p-4",
+        className,
+      )}
+    >
+      <DotMatrix state="loading" decorative className="text-ink-mute size-8" />
+      <span className="sr-only">Generating image…</span>
+    </div>
+  );
+}
+
+function ImageContentFilterError({
+  className,
+  reason,
+}: {
+  className?: string;
+  reason?: string;
+}) {
+  return (
+    <div
+      data-slot="image-content-filter-error"
+      className={cn(
+        "bg-surface-2/50 flex min-h-32 flex-col items-center justify-center gap-2 p-4 text-center",
+        className,
+      )}
+    >
+      <ShieldAlertIcon className="text-ink-mute size-8" />
+      <p className="text-sm font-medium">Image could not be generated</p>
+      {reason && <p className="text-ink-mute text-xs">{reason}</p>}
+    </div>
+  );
+}
+
+export type ImageActionsProps = {
+  part: ImageMessagePart;
+  /**
+   * Wire to your own generation call to show a regenerate button. The button
+   * renders only when this is set and the part carries a `prompt`.
+   */
+  onRegenerate?: () => void | Promise<void>;
+  className?: string;
+};
+
+function RegenerateButton({
+  onRegenerate,
+}: {
+  onRegenerate: () => void | Promise<void>;
+}) {
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        setIsRegenerating(true);
+        try {
+          await onRegenerate();
+        } catch {
+        } finally {
+          setIsRegenerating(false);
+        }
+      }}
+      disabled={isRegenerating}
+      data-slot="image-regenerate"
+      aria-label="Regenerate image"
+      className="hover:bg-surface-2 inline-flex size-7 items-center justify-center rounded disabled:opacity-50"
+    >
+      <RefreshCwIcon
+        className={cn("size-4", isRegenerating && "animate-spin")}
+      />
+    </button>
+  );
+}
+
+function ImageActions({ part, onRegenerate, className }: ImageActionsProps) {
+  return (
+    <div
+      data-slot="image-actions"
+      className={cn("flex items-center gap-1 p-1", className)}
+    >
+      <button
+        type="button"
+        onClick={() => downloadImagePart(part)}
+        data-slot="image-download"
+        aria-label="Download image"
+        className="hover:bg-surface-2 inline-flex size-7 items-center justify-center rounded"
+      >
+        <DownloadIcon className="size-4" />
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          copyImagePart(part).catch(() => {});
+        }}
+        data-slot="image-copy"
+        aria-label="Copy image"
+        className="hover:bg-surface-2 inline-flex size-7 items-center justify-center rounded"
+      >
+        <CopyIcon className="size-4" />
+      </button>
+      {onRegenerate && <RegenerateButton onRegenerate={onRegenerate} />}
+    </div>
+  );
+}
+
+const ImageImpl: ImageMessagePartComponent = (props) => {
+  const { image, filename, status } = props;
+
+  if (status?.type === "running") {
+    return (
+      <ImageRoot>
+        <ImageGenerating />
+        <ImageFilename>{filename}</ImageFilename>
+      </ImageRoot>
+    );
+  }
+
+  if (status?.type === "incomplete" && status.reason === "content-filter") {
+    return (
+      <ImageRoot>
+        <ImageContentFilterError reason="The provider blocked this image." />
+      </ImageRoot>
+    );
+  }
+
+  return (
+    <ImageRoot>
+      <ImageZoom src={image} alt={filename || "Image content"}>
+        <ImagePreview src={image} alt={filename || "Image content"} />
+      </ImageZoom>
+      <ImageFilename>{filename}</ImageFilename>
+    </ImageRoot>
+  );
+};
+
+const Image = memo(ImageImpl) as unknown as ImageMessagePartComponent & {
+  Root: typeof ImageRoot;
+  Preview: typeof ImagePreview;
+  Filename: typeof ImageFilename;
+  Zoom: typeof ImageZoom;
+  Actions: typeof ImageActions;
+  Generating: typeof ImageGenerating;
+  ContentFilterError: typeof ImageContentFilterError;
+};
+
+Image.displayName = "Image";
+Image.Root = ImageRoot;
+Image.Preview = ImagePreview;
+Image.Filename = ImageFilename;
+Image.Zoom = ImageZoom;
+Image.Actions = ImageActions;
+Image.Generating = ImageGenerating;
+Image.ContentFilterError = ImageContentFilterError;
+
+export {
+  Image,
+  ImageRoot,
+  ImagePreview,
+  ImageFilename,
+  ImageZoom,
+  ImageActions,
+  ImageGenerating,
+  ImageContentFilterError,
+  imageVariants,
+};

package/src/components/chat/stock/index.ts

@@ -0,0 +1,129 @@
+/**
+ * Skin-support primitives (WS4): catalog primitives, prefs shell, skin
+ * chrome, Thread and tool UI. Hosts import ThreadSkinView from
+ * `@digithings-ai/ui/chat/skins` and the prefs host from here.
+ */
+
+export {
+  DEFAULT_DEPLOY_UI,
+  DeployUiProvider,
+  useDeployUi,
+  useDisclosureUi,
+  type DeployUiValue,
+} from "./deploy-ui-context";
+export {
+  DEFAULT_SKIN_CHROME,
+  SkinChromeProvider,
+  useAttribution,
+  useComposerCopy,
+  useSkinChrome,
+  type SkinChromeValue,
+} from "./skin-chrome";
+export {
+  StockSendGateProvider,
+  useStockComposerGateSubmit,
+  useStockSendGate,
+  type StockSendGateHandlers,
+} from "./stock-send-gate";
+// The prefs twin of the view ids. Hosts keep their own id contract
+// (`apps/digichat/src/lib/view-modes.ts`) and this normaliser is the other
+// half of it, so a host can check that both name the same levels instead of
+// trusting that they do. The alias map is exported under a name of its own:
+// it is the twin's map to compare against the host's, not the host's.
+export {
+  LEGACY_VIEW_MODE_ALIASES as PREFS_LEGACY_VIEW_MODE_ALIASES,
+  normalizeViewPref,
+  type ChainDisclosureMode,
+  type ChromeMode,
+  type PageContextMode,
+  type UserAlign,
+  type ViewMode,
+  isStockComposerMenuKind,
+  type StockComposerMenuKind,
+} from "./skin-types";
+export {
+  SkinRuntime,
+  SkinRuntimeProvider,
+  useSkinRuntime,
+  type ParsedSkinError,
+  type SkinErrorParsers,
+  type SkinRuntimeValue,
+} from "./skin-runtime";
+// WS4: catalog primitives + prefs shell moved from the app. Hosts import
+// ThreadSkinView from `@digithings-ai/ui/chat/skins` and the prefs host from here.
+export { MessageError } from "./message-error.aui";
+export {
+  EmbedChatPrefsProvider,
+  useEmbedChatPrefs,
+  useEmbedChatPrefsOptional,
+  DEFAULT_EMBED_CHAT_PREFS,
+  createDefaultEmbedChatPrefs,
+  chromePrefsFromDeploy,
+  resetChromePrefsFromDeploy,
+  persistDensity,
+  useStoredDensityAfterMount,
+  persistScroll,
+  useStoredScrollAfterMount,
+  disabledCatalogIds,
+  catalogToolsFromClient,
+  extraOffFromCatalog,
+  committedChatPrefs,
+  slashRowPreview,
+  type EmbedChatPrefs,
+  type EmbedChatPrefsApi,
+  type EmbedChatPrefsPreview,
+  type CatalogToolRow,
+} from "./embed-chat-prefs";
+export {
+  useStockChatPrefs,
+  StockChatPrefsHost,
+  type StockChatPrefsConfig,
+  type StockChatPrefsDeps,
+} from "./stock-chat-prefs-host";
+// DIG-2882: the session artifact panel and the artifact `a:` override.
+export {
+  ArtifactsPanel,
+  ArtifactLink,
+  artifactListPath,
+  artifactBlobPath,
+  isArtifactBlobHref,
+  formatArtifactSize,
+  formatArtifactDate,
+  type ArtifactRow,
+  type ArtifactIo,
+} from "./artifacts-panel";
+export { SkinCredit, SKIN_CREDIT_TEXT } from "./skin-credit";
+export { Thread } from "./thread.aui";
+export {
+  ToolFallback,
+  ToolFallbackArgs,
+  ToolFallbackAttribution,
+  ToolFallbackContent,
+  ToolFallbackResult,
+  ToolFallbackRoot,
+  ToolFallbackTrigger,
+  formatToolDuration,
+  type ToolFallbackRootProps,
+} from "./tool-fallback.aui";
+export { toolRowTitle } from "./tool-display";
+
+export {
+  HOUSE_BUILTIN_TOOL_IDS,
+  HOUSE_SERVER_IDS,
+  connectedToolIsOn,
+  countToolSurface,
+  expandToolRows,
+  type ToolSurfaceCount,
+  type ToolSurfaceRow,
+  type ToolSurfaceRowInput,
+} from "./tool-surface";
+
+export {
+  DEFAULT_SCROLL_MODE,
+  SCROLL_MODES,
+  normalizeScrollMode,
+  resolveScrollMode,
+  scrollModeProps,
+  type ScrollMode,
+  type ScrollViewportProps,
+} from "../gallery-thread/scroll-mode";