@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/gallery-thread/hooks/use-attachment-src.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { useShallow } from "zustand/react/shallow";
+
+const useFileSrc = (file: File | undefined) => {
+  const [entry, setEntry] = useState<{ file: File; url: string } | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    // The object URL is a browser resource whose lifetime has to straddle
+    // commit, so allocation, revocation, and clearing the entry that names a
+    // revoked URL all belong to the effect.
+    if (!file) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setEntry(undefined);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setEntry({ file, url: objectUrl });
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+
+  return entry !== undefined && entry.file === file ? entry.url : undefined;
+};
+
+export const useAttachmentSrc = () => {
+  const { file, src } = useAuiState(
+    useShallow((s): { file?: File; src?: string } => {
+      if (s.attachment.type !== "image") return {};
+      if (s.attachment.file) return { file: s.attachment.file };
+      const src = s.attachment.content?.filter((c) => c.type === "image")[0]
+        ?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};

package/src/components/chat/gallery-thread/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,9 @@
+"use client";
+
+// Single source of truth lives in `../../stock/use-copy-to-clipboard`
+// (byte-identical fork removed, S24 review). This shim preserves the
+// gallery-thread import path.
+export {
+  useCopyToClipboard,
+  type UseCopyToClipboardOptions,
+} from "../../stock/use-copy-to-clipboard";

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

@@ -0,0 +1,519 @@
+"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 { DotMatrix } from "../DotMatrix";
+import type {
+  ImageMessagePart,
+  ImageMessagePartComponent,
+} from "@assistant-ui/react";
+import { cn } from "./cn";
+
+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-none",
+  {
+    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" label="Loading image" className="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"
+        >
+          <DotMatrix state="error" label="Image failed" className="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 [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  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>
+      {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-none p-2"
+            >
+              <DotMatrix state="remove" label="Close" 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="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,
+      )}
+    >
+      <DotMatrix state="warning" label="Image blocked" className="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-none disabled:opacity-50"
+    >
+      <DotMatrix
+        state={isRegenerating ? "loading" : "refresh"}
+        decorative
+        className="size-4"
+      />
+    </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-none"
+      >
+        <DotMatrix state="download" decorative 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-none"
+      >
+        <DotMatrix state="copy" decorative 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,
+};