4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T47e5,"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, ImageIcon, ImageOffIcon, Loader2Icon, RefreshCwIcon, ShieldAlertIcon, XIcon, } from "lucide-react"; import type { ImageMessagePart, ImageMessagePartComponent, } from "@assistant-ui/react"; import { cn } from "@/lib/utils"; import { hostOf, safeHref } from "../utils/href"; 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 | null => { 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 parts: BlobPart[] = []; let last = 0; for (const match of data.matchAll(/(?:%[\da-f]{2})+/gi)) { if (match.index > last) parts.push(data.slice(last, match.index)); const run = match[0]; const escaped = new Uint8Array(run.length / 3); for (let index = 0; index < escaped.length; index++) { escaped[index] = Number.parseInt( run.slice(index * 3 + 1, index * 3 + 3), 16, ); } parts.push(escaped); last = match.index + run.length; } parts.push(data.slice(last)); return new Blob(parts, { type: mime }); } let bytes: string; try { const base64 = data.replace(/%([\da-f]{2})/gi, (_match, hex: string) => String.fromCharCode(Number.parseInt(hex, 16)), ); bytes = atob(base64); } catch { return null; } 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 defaultFilenameFromImage = (image: string): string => { const mime = mimeFromImage(image); if (mime) return `image.${extensionForMimeType(mime)}`; try { const path = new URL(image, document.baseURI).pathname; const encodedBasename = path.split("/").pop() ?? ""; let basename = encodedBasename; try { basename = decodeURIComponent(encodedBasename); } catch {} if (/\.(png|jpe?g|webp|gif|svg)$/i.test(basename)) return basename; } catch {} return "image.png"; }; const safeImageDownloadHref = (image: string): string | null => { try { const url = new URL(image, document.baseURI); return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "blob:" ? image : null; } catch { return null; } }; const downloadImagePart = ( part: Pick, ): void => { if (typeof document === "undefined") return; const filename = part.filename ?? defaultFilenameFromImage(part.image); const isDataUri = /^data:/i.test(part.image); const blob = isDataUri ? dataUriToBlob(part.image) : null; if (isDataUri && !blob) return; const objectUrl = blob ? URL.createObjectURL(blob) : null; const href = objectUrl ?? safeImageDownloadHref(part.image); if (!href) return; 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, ): Promise => { 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()); if (!blob) return; 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-border border", ghost: "", muted: "bg-muted/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; function ImageRoot({ className, variant, size, children, ...props }: ImageRootProps) { return (

{children}

); } type ImagePreviewProps = Omit, "children"> & { containerClassName?: string | undefined; ratio?: "auto" | "1:1" | "4:3" | "16:9" | "9:16" | undefined; fit?: "cover" | "contain" | undefined; }; function ImagePreview({ className, containerClassName, ratio = "auto", fit = "contain", onLoad, onError, alt = "Image content", src, ...props }: ImagePreviewProps) { const imgRef = useRef(null); const [loadedSrc, setLoadedSrc] = useState(undefined); const [errorSrc, setErrorSrc] = useState(undefined); const loaded = loadedSrc === src; const error = errorSrc === src; const fixedRatio = ratio !== "auto"; const ratioClassName = ratio === "1:1" ? "aspect-square" : ratio === "4:3" ? "aspect-[4/3]" : ratio === "16:9" ? "aspect-video" : ratio === "9:16" ? "aspect-[9/16]" : undefined; useEffect(() => { const image = imgRef.current; if (typeof src !== "string" || !image?.complete) return; if (image.naturalWidth > 0) setLoadedSrc(src); else setErrorSrc(src); }, [src]); return (

{!loaded && !error && (

)} {error ? (

) : (

{ if (typeof src === "string") setLoadedSrc(src); onLoad?.(e); }} onError={(e) => { if (typeof src === "string") setErrorSrc(src); onError?.(e); }} {...props} /> )}

); } export type ImageSourceProps = { label?: string | undefined; url?: string | undefined; iconUrl?: string | undefined; } & React.ComponentProps<"div">; function ImageSource({ className, label, url, iconUrl, ...props }: ImageSourceProps) { const href = safeHref(url); const host = hostOf(url); const displayLabel = label || host; const [failedIconUrl, setFailedIconUrl] = useState(); if (!displayLabel) return null; const showIcon = iconUrl !== undefined && failedIconUrl !== iconUrl; return (

{showIcon ? (

setFailedIconUrl(iconUrl)} /> ) : ( )} {href ? ( {displayLabel} (opens in a new tab) ) : ( {displayLabel} )}

); } function ImageFilename({ className, children, ...props }: React.ComponentProps<"span">) { if (!children) return null; return ( {children} ); } type ImageZoomProps = PropsWithChildren<{ src: string; alt?: string; }>; function ImageZoom({ src, alt = "Image preview", children }: ImageZoomProps) { const [isOpen, setIsOpen] = useState(false); const triggerRef = useRef(null); const closeRef = useRef(null); const overlayRef = useRef(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( '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 ( <>

{ if (e.key === "Enter") { e.preventDefault(); e.currentTarget.click(); } else if (e.key === " ") { e.preventDefault(); } }} onKeyUp={(e) => { if (e.key === " ") e.currentTarget.click(); }} role="button" tabIndex={0} className="aui-image-zoom-trigger cursor-zoom-in" aria-label="Click to zoom image" > {children}

{isOpen && createPortal( , document.body, )} ); } function ImageGenerating({ className }: { className?: string }) { return (

Generating image…

); } function ImageContentFilterError({ className, reason, }: { className?: string; reason?: string; }) { return (

Image could not be generated

{reason &&

{reason}

}

); } 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; className?: string; }; function RegenerateButton({ onRegenerate, }: { onRegenerate: () => void | Promise; }) { const [isRegenerating, setIsRegenerating] = useState(false); return ( ); } function ImageActions({ part, onRegenerate, className }: ImageActionsProps) { return (

{onRegenerate && }

); } const ImageImpl: ImageMessagePartComponent = (props) => { const { image, filename, status } = props; if (status?.type === "running") { return ( {filename} ); } if (status?.type === "incomplete" && status.reason === "content-filter") { return ( ); } return ( {filename} ); }; const Image = memo(ImageImpl) as unknown as ImageMessagePartComponent & { Root: typeof ImageRoot; Preview: typeof ImagePreview; Source: typeof ImageSource; 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.Source = ImageSource; Image.Filename = ImageFilename; Image.Zoom = ImageZoom; Image.Actions = ImageActions; Image.Generating = ImageGenerating; Image.ContentFilterError = ImageContentFilterError; export { Image, ImageRoot, ImagePreview, ImageSource, ImageFilename, ImageZoom, ImageActions, ImageGenerating, ImageContentFilterError, imageVariants, }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@assistant-ui/react@^0.15.29",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40assistant-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@assistant-ui/react@^0.15.29"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4f",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-href.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/assistant-ui/elements/image.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]