@axhub/acp 0.1.0

package/dist/components/assistant-ui/file.d.ts

@@ -0,0 +1,37 @@
+import type { FileMessagePartComponent } from "@assistant-ui/react";
+import { type VariantProps } from "class-variance-authority";
+import { type FC } from "react";
+declare const fileVariants: (props?: ({
+    variant?: "outline" | "ghost" | "muted" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function getMimeTypeIcon(mimeType: string): FC<{
+    className?: string;
+}>;
+declare function getBase64Size(base64: string): number;
+declare function formatFileSize(bytes: number): string;
+export type FileRootProps = React.ComponentProps<"div"> & VariantProps<typeof fileVariants>;
+declare function FileRoot({ className, variant, size, children, ...props }: FileRootProps): import("react/jsx-runtime").JSX.Element;
+type FileIconDisplayProps = React.ComponentProps<"span"> & {
+    mimeType?: string;
+};
+declare function FileIconDisplay({ mimeType, className, children, ...props }: FileIconDisplayProps): import("react/jsx-runtime").JSX.Element;
+declare function FileName({ className, children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+type FileSizeProps = React.ComponentProps<"span"> & {
+    bytes: number;
+};
+declare function FileSize({ bytes, className, ...props }: FileSizeProps): import("react/jsx-runtime").JSX.Element;
+type FileDownloadProps = Omit<React.ComponentProps<"a">, "href"> & {
+    data: string;
+    mimeType: string;
+    filename?: string;
+};
+declare function FileDownload({ data, mimeType, filename, className, children, ...props }: FileDownloadProps): import("react/jsx-runtime").JSX.Element;
+declare const File: FileMessagePartComponent & {
+    Root: typeof FileRoot;
+    Icon: typeof FileIconDisplay;
+    Name: typeof FileName;
+    Size: typeof FileSize;
+    Download: typeof FileDownload;
+};
+export { File, FileDownload, FileIconDisplay, FileName, FileRoot, FileSize, fileVariants, formatFileSize, getBase64Size, getMimeTypeIcon, };

package/dist/components/assistant-ui/file.mjs

@@ -0,0 +1,107 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { BracesIcon, DownloadIcon, FileIcon, FileTextIcon, ImageIcon, MusicIcon, VideoIcon, } from "lucide-react";
+import { memo } from "react";
+import { cn } from "../../lib/utils.mjs";
+const fileVariants = cva("aui-file-root inline-flex items-center gap-3 rounded-lg transition-colors", {
+    variants: {
+        variant: {
+            outline: "border-border border hover:bg-muted/50",
+            ghost: "hover:bg-muted/50",
+            muted: "bg-muted/50 hover:bg-muted/70",
+        },
+        size: {
+            sm: "px-2.5 py-1.5 text-xs",
+            default: "px-3 py-2 text-sm",
+            lg: "px-4 py-3 text-base",
+        },
+    },
+    defaultVariants: {
+        variant: "outline",
+        size: "default",
+    },
+});
+function getMimeTypeIcon(mimeType) {
+    if (mimeType.startsWith("image/")) {
+        return ImageIcon;
+    }
+    if (mimeType === "application/pdf") {
+        return FileTextIcon;
+    }
+    if (mimeType === "application/json") {
+        return BracesIcon;
+    }
+    if (mimeType.startsWith("text/")) {
+        return FileTextIcon;
+    }
+    if (mimeType.startsWith("audio/")) {
+        return MusicIcon;
+    }
+    if (mimeType.startsWith("video/")) {
+        return VideoIcon;
+    }
+    return FileIcon;
+}
+function getBase64Size(base64) {
+    const commaIndex = base64.indexOf(",");
+    const base64Data = commaIndex >= 0 ? base64.slice(commaIndex + 1) : base64;
+    const padding = (base64Data.match(/=/g) || []).length;
+    return Math.floor((base64Data.length * 3) / 4) - padding;
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileRoot(_a) {
+    var { className, variant, size, children } = _a, props = __rest(_a, ["className", "variant", "size", "children"]);
+    return (_jsx("div", Object.assign({ "data-slot": "file-root", "data-variant": variant, "data-size": size, className: cn(fileVariants({ variant, size, className })) }, props, { children: children })));
+}
+function FileIconDisplay(_a) {
+    var { mimeType, className, children } = _a, props = __rest(_a, ["mimeType", "className", "children"]);
+    const IconComponent = mimeType ? getMimeTypeIcon(mimeType) : FileIcon;
+    return (_jsx("span", Object.assign({ "data-slot": "file-icon", className: cn("shrink-0 text-muted-foreground", className) }, props, { children: children !== null && children !== void 0 ? children : _jsx(IconComponent, { className: "size-5" }) })));
+}
+function FileName(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsx("span", Object.assign({ "data-slot": "file-name", className: cn("min-w-0 flex-1 truncate font-medium", className) }, props, { children: children || "Unnamed file" })));
+}
+function FileSize(_a) {
+    var { bytes, className } = _a, props = __rest(_a, ["bytes", "className"]);
+    return (_jsx("span", Object.assign({ "data-slot": "file-size", className: cn("shrink-0 text-muted-foreground", className) }, props, { children: formatFileSize(bytes) })));
+}
+function FileDownload(_a) {
+    var { data, mimeType, filename, className, children } = _a, props = __rest(_a, ["data", "mimeType", "filename", "className", "children"]);
+    const href = data.startsWith("data:")
+        ? data
+        : `data:${mimeType};base64,${data}`;
+    return (_jsx("a", Object.assign({ "data-slot": "file-download", href: href, download: filename || "download", className: cn("shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground", className) }, props, { children: children || _jsx(DownloadIcon, { className: "size-4" }) })));
+}
+const FileImpl = ({ filename, data, mimeType }) => {
+    const bytes = getBase64Size(data);
+    return (_jsxs(FileRoot, { children: [_jsx(FileIconDisplay, { mimeType: mimeType }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(FileName, { children: filename }), _jsx(FileSize, { bytes: bytes, className: "text-xs" })] }), _jsx(FileDownload, Object.assign({ data: data, mimeType: mimeType }, (filename !== undefined && { filename })))] }));
+};
+const File = memo(FileImpl);
+File.displayName = "File";
+File.Root = FileRoot;
+File.Icon = FileIconDisplay;
+File.Name = FileName;
+File.Size = FileSize;
+File.Download = FileDownload;
+export { File, FileDownload, FileIconDisplay, FileName, FileRoot, FileSize, fileVariants, formatFileSize, getBase64Size, getMimeTypeIcon, };

package/dist/components/assistant-ui/image-generation-settings-dialog.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function ImageGenerationSettingsDialog({ trigger, }: {
+    trigger: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/assistant-ui/image-generation-settings-dialog.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "../ui/dialog.mjs";
+import { Input } from "../ui/input.mjs";
+import { Label } from "../ui/label.mjs";
+import { Switch } from "../ui/switch.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.mjs";
+import { useAcpUiRuntimeContext } from "../../lib/acp2aisdk/client-context.mjs";
+import { normalizeImageGenerationToolSettings } from "../../tools/image-generation/client.mjs";
+import { IMAGE_GENERATION_TOOL_ID } from "../../tools/image-generation/shared.mjs";
+import { normalizeUserChoiceToolSettings } from "../../tools/user-choice/client.mjs";
+import { USER_CHOICE_TOOL_ID } from "../../tools/user-choice/shared.mjs";
+export function ImageGenerationSettingsDialog({ trigger, }) {
+    var _a, _b, _c;
+    const { builtinToolSettings, setBuiltinToolSettings } = useAcpUiRuntimeContext();
+    const imageGenerationToolSettings = normalizeImageGenerationToolSettings(builtinToolSettings[IMAGE_GENERATION_TOOL_ID]);
+    const userChoiceToolSettings = normalizeUserChoiceToolSettings(builtinToolSettings[USER_CHOICE_TOOL_ID]);
+    const updateSetting = (key, value) => {
+        setBuiltinToolSettings(IMAGE_GENERATION_TOOL_ID, (current) => (Object.assign(Object.assign({}, normalizeImageGenerationToolSettings(current)), { [key]: value })));
+    };
+    const updateUserChoiceSetting = (key, value) => {
+        setBuiltinToolSettings(USER_CHOICE_TOOL_ID, (current) => (Object.assign(Object.assign({}, normalizeUserChoiceToolSettings(current)), { [key]: value })));
+    };
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: "sm:max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u5DE5\u5177\u8BBE\u7F6E" }), _jsx(DialogDescription, { children: "\u914D\u7F6E\u5185\u7F6E\u5DE5\u5177\u7684\u8FDE\u63A5\u4FE1\u606F\u548C\u4EA4\u4E92\u884C\u4E3A\u3002" })] }), _jsxs(Tabs, { defaultValue: "image-generation", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "image-generation", children: "\u56FE\u7247\u751F\u6210" }), _jsx(TabsTrigger, { value: "user-choice", children: "\u7528\u6237\u9009\u62E9" })] }), _jsxs(TabsContent, { value: "image-generation", className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "image-generation-enabled", children: "\u56FE\u7247\u751F\u6210\u5DE5\u5177" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u5141\u8BB8\u6A21\u578B\u901A\u8FC7 MCP \u8C03\u7528\u56FE\u7247\u751F\u6210\u3002" })] }), _jsx(Switch, { id: "image-generation-enabled", checked: imageGenerationToolSettings.enabled, onCheckedChange: (checked) => updateSetting("enabled", checked) })] }), _jsx(SettingsInput, { id: "image-generation-base-url", label: "API Base URL", placeholder: "https://api.openai.com/v1", value: (_a = imageGenerationToolSettings.baseUrl) !== null && _a !== void 0 ? _a : "", onValueChange: (value) => updateSetting("baseUrl", value) }), _jsx(SettingsInput, { id: "image-generation-api-key", label: "API Key", placeholder: "sk-...", type: "password", value: (_b = imageGenerationToolSettings.apiKey) !== null && _b !== void 0 ? _b : "", onValueChange: (value) => updateSetting("apiKey", value) }), _jsx(SettingsInput, { id: "image-generation-model", label: "\u6A21\u578B", placeholder: "gpt-image-1", value: (_c = imageGenerationToolSettings.model) !== null && _c !== void 0 ? _c : "", onValueChange: (value) => updateSetting("model", value) }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "image-generation-preserve-prompt", children: "\u4FDD\u7559\u539F\u59CB\u63D0\u793A\u8BCD" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u8BF7\u6C42\u56FE\u7247 API \u65F6\u5728 prompt \u524D\u52A0\u5165\u4E0D\u8981\u6539\u5199\u63D0\u793A\uFF0C\u8BB0\u5F55\u4ECD\u663E\u793A\u539F\u59CB\u63D0\u793A\u8BCD\u3002" })] }), _jsx(Switch, { id: "image-generation-preserve-prompt", checked: imageGenerationToolSettings.preservePrompt, onCheckedChange: (checked) => updateSetting("preservePrompt", checked) })] })] }), _jsxs(TabsContent, { value: "user-choice", className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "user-choice-enabled", children: "\u7528\u6237\u9009\u62E9\u5DE5\u5177" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u5141\u8BB8\u6A21\u578B\u901A\u8FC7 MCP \u53D1\u8D77\u5355\u9009\u3001\u591A\u9009\u6216\u591A\u9898\u9009\u62E9\u3002" })] }), _jsx(Switch, { id: "user-choice-enabled", checked: userChoiceToolSettings.enabled, onCheckedChange: (checked) => updateUserChoiceSetting("enabled", checked) })] }), _jsx(SettingsInput, { id: "user-choice-timeout-ms", label: "\u7B49\u5F85\u8D85\u65F6\uFF08\u6BEB\u79D2\uFF09", type: "number", value: String(userChoiceToolSettings.waitTimeoutMs), onValueChange: (value) => updateUserChoiceSetting("waitTimeoutMs", Number.parseInt(value, 10)) }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "user-choice-custom-input", children: "\u5141\u8BB8\u81EA\u5B9A\u4E49\u8F93\u5165" }), _jsx(Switch, { id: "user-choice-custom-input", checked: userChoiceToolSettings.allowCustomInput, onCheckedChange: (checked) => updateUserChoiceSetting("allowCustomInput", checked) })] }), _jsx(SettingsInput, { id: "user-choice-custom-input-label", label: "\u81EA\u5B9A\u4E49\u9009\u9879\u6587\u6848", value: userChoiceToolSettings.customInputLabel, onValueChange: (value) => updateUserChoiceSetting("customInputLabel", value) })] })] }), _jsx(DialogFooter, { showCloseButton: true })] })] }));
+}
+function SettingsInput({ id, label, value, onValueChange, placeholder, type = "text", }) {
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, type: type, value: value, placeholder: placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })] }));
+}

package/dist/components/assistant-ui/image.d.ts

@@ -0,0 +1,51 @@
+import type { ImageMessagePart, ImageMessagePartComponent } from "@assistant-ui/react";
+import { type VariantProps } from "class-variance-authority";
+import { type PropsWithChildren } from "react";
+declare const imageVariants: (props?: ({
+    variant?: "outline" | "ghost" | "muted" | null | undefined;
+    size?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ImageRootProps = React.ComponentProps<"div"> & VariantProps<typeof imageVariants>;
+declare function ImageRoot({ className, variant, size, children, ...props }: ImageRootProps): import("react/jsx-runtime").JSX.Element;
+type ImagePreviewProps = Omit<React.ComponentProps<"img">, "children"> & {
+    containerClassName?: string;
+};
+declare function ImagePreview({ className, containerClassName, onLoad, onError, alt, src, ...props }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+declare function ImageFilename({ className, children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element | null;
+type ImageZoomProps = PropsWithChildren<{
+    src: string;
+    alt?: string;
+}>;
+declare function ImageZoom({ src, alt, children }: ImageZoomProps): import("react/jsx-runtime").JSX.Element;
+declare function ImageGenerating({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ImageContentFilterError({ className, reason, }: {
+    className?: string;
+    reason?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export type ImageActionsProps = {
+    part: ImageMessagePart;
+    onRegenerate?: () => void | Promise<void>;
+    className?: string;
+};
+declare function ImageActions({ part, onRegenerate, className }: ImageActionsProps): import("react/jsx-runtime").JSX.Element;
+declare const Image: ImageMessagePartComponent & {
+    Root: typeof ImageRoot;
+    Preview: typeof ImagePreview;
+    Filename: typeof ImageFilename;
+    Zoom: typeof ImageZoom;
+    Actions: typeof ImageActions;
+    Generating: typeof ImageGenerating;
+    ContentFilterError: typeof ImageContentFilterError;
+};
+export { Image, ImageActions, ImageContentFilterError, ImageFilename, ImageGenerating, ImagePreview, ImageRoot, ImageZoom, imageVariants, };
+export declare const ImageMessage: ImageMessagePartComponent & {
+    Root: typeof ImageRoot;
+    Preview: typeof ImagePreview;
+    Filename: typeof ImageFilename;
+    Zoom: typeof ImageZoom;
+    Actions: typeof ImageActions;
+    Generating: typeof ImageGenerating;
+    ContentFilterError: typeof ImageContentFilterError;
+};

package/dist/components/assistant-ui/image.mjs

@@ -0,0 +1,215 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { CopyIcon, DownloadIcon, ImageIcon, ImageOffIcon, Loader2Icon, RefreshCwIcon, ShieldAlertIcon, } from "lucide-react";
+import { memo, useEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../lib/utils.mjs";
+const extensionForMimeType = (mimeType) => {
+    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) => {
+    var _a, _b;
+    const [meta, data] = dataUri.split(",");
+    const mime = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.match(/data:([^;]+)/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "application/octet-stream";
+    if (!/;base64/i.test(meta !== null && meta !== void 0 ? meta : "")) {
+        return new Blob([decodeURIComponent(data !== null && data !== void 0 ? data : "")], { type: mime });
+    }
+    const bytes = atob(data !== null && data !== void 0 ? 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) => { var _a; return (_a = image.match(/^data:([^;,]+)/)) === null || _a === void 0 ? void 0 : _a[1]; };
+const downloadImagePart = (part) => {
+    var _a;
+    if (typeof document === "undefined")
+        return;
+    const ext = extensionForMimeType(mimeFromImage(part.image));
+    const filename = (_a = part.filename) !== null && _a !== void 0 ? _a : `image.${ext}`;
+    const isDataUri = part.image.startsWith("data:");
+    const objectUrl = isDataUri
+        ? URL.createObjectURL(dataUriToBlob(part.image))
+        : null;
+    const href = objectUrl !== null && objectUrl !== void 0 ? 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)
+        URL.revokeObjectURL(objectUrl);
+};
+const copyImagePart = async (part) => {
+    var _a, _b;
+    if (typeof navigator === "undefined" ||
+        !navigator.clipboard ||
+        typeof ClipboardItem === "undefined") {
+        throw new Error("Clipboard API is not available in this environment.");
+    }
+    const blob = part.image.startsWith("data:")
+        ? dataUriToBlob(part.image)
+        : await fetch(part.image).then((r) => r.blob());
+    const mime = (_b = (_a = mimeFromImage(part.image)) !== null && _a !== void 0 ? _a : blob.type) !== null && _b !== void 0 ? _b : "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: "inline-block max-w-[30vw] max-md:max-w-full",
+            lg: "max-w-[512px]",
+            full: "w-full",
+        },
+    },
+    defaultVariants: {
+        variant: "outline",
+        size: "default",
+    },
+});
+function ImageRoot(_a) {
+    var { className, variant, size, children } = _a, props = __rest(_a, ["className", "variant", "size", "children"]);
+    return (_jsx("div", Object.assign({ "data-slot": "image-root", "data-variant": variant, "data-size": size, className: cn(imageVariants({ variant, size, className })) }, props, { children: children })));
+}
+function ImagePreview(_a) {
+    var { className, containerClassName, onLoad, onError, alt = "Image content", src } = _a, props = __rest(_a, ["className", "containerClassName", "onLoad", "onError", "alt", "src"]);
+    const imgRef = useRef(null);
+    const [loadedSrc, setLoadedSrc] = useState(undefined);
+    const [errorSrc, setErrorSrc] = useState(undefined);
+    const loaded = loadedSrc === src;
+    const error = errorSrc === src;
+    useEffect(() => {
+        var _a;
+        if (typeof src === "string" &&
+            ((_a = imgRef.current) === null || _a === void 0 ? void 0 : _a.complete) &&
+            imgRef.current.naturalWidth > 0) {
+            setLoadedSrc(src);
+        }
+    }, [src]);
+    return (_jsxs("div", { "data-slot": "image-preview", className: cn("relative min-h-32", containerClassName), children: [!loaded && !error && (_jsx("div", { "data-slot": "image-preview-loading", className: "absolute inset-0 flex items-center justify-center bg-muted/50", children: _jsx(ImageIcon, { className: "size-8 animate-pulse text-muted-foreground" }) })), error ? (_jsx("div", { "data-slot": "image-preview-error", className: "flex min-h-32 items-center justify-center bg-muted/50 p-4", children: _jsx(ImageOffIcon, { className: "size-8 text-muted-foreground" }) })) : (_jsx("img", Object.assign({ ref: imgRef, src: src, alt: alt, className: cn("block h-auto w-auto max-h-[30vh] max-w-[30vw] object-contain max-md:max-w-full", !loaded && "invisible", className), onLoad: (e) => {
+                    if (typeof src === "string")
+                        setLoadedSrc(src);
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                }, onError: (e) => {
+                    if (typeof src === "string")
+                        setErrorSrc(src);
+                    onError === null || onError === void 0 ? void 0 : onError(e);
+                } }, props)))] }));
+}
+function ImageFilename(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    if (!children)
+        return null;
+    return (_jsx("span", Object.assign({ "data-slot": "image-filename", className: cn("block w-full min-w-0 truncate px-2 py-1.5 text-muted-foreground text-xs [contain:inline-size]", className) }, props, { children: children })));
+}
+function ImageZoom({ src, alt = "Image preview", children }) {
+    const [isMounted, setIsMounted] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    const handleOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                setIsOpen(false);
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = originalOverflow;
+        };
+    }, [isOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleOpen, onKeyDown: (e) => e.key === "Enter" && handleOpen(), className: "aui-image-zoom-trigger cursor-zoom-in border-0 bg-transparent p-0 text-left", "aria-label": "Click to zoom image", children: children }), isMounted &&
+                isOpen &&
+                createPortal(_jsx("button", { type: "button", "data-slot": "image-zoom-overlay", className: "aui-image-zoom-overlay fade-in fixed inset-0 z-50 flex animate-in items-center justify-center bg-black/80 duration-200", onClick: handleClose, onKeyDown: (e) => e.key === "Enter" && handleClose(), "aria-label": "Close zoomed image", children: _jsx("img", { "data-slot": "image-zoom-content", src: src, alt: alt, className: "aui-image-zoom-content fade-in zoom-in-95 max-h-[90vh] max-w-[90vw] animate-in cursor-zoom-out object-contain duration-200", onClick: (e) => {
+                            e.stopPropagation();
+                            handleClose();
+                        } }) }), document.body)] }));
+}
+function ImageGenerating({ className }) {
+    return (_jsxs("div", { "data-slot": "image-generating", className: cn("flex min-h-32 items-center justify-center bg-muted/50 p-4", className), children: [_jsx(Loader2Icon, { className: "size-8 animate-spin text-muted-foreground" }), _jsx("span", { className: "sr-only", children: "Generating image..." })] }));
+}
+function ImageContentFilterError({ className, reason, }) {
+    return (_jsxs("div", { "data-slot": "image-content-filter-error", className: cn("flex min-h-32 flex-col items-center justify-center gap-2 bg-muted/50 p-4 text-center", className), children: [_jsx(ShieldAlertIcon, { className: "size-8 text-muted-foreground" }), _jsx("p", { className: "font-medium text-sm", children: "Image could not be generated" }), reason && _jsx("p", { className: "text-muted-foreground text-xs", children: reason })] }));
+}
+function RegenerateButton({ onRegenerate, }) {
+    const [isRegenerating, setIsRegenerating] = useState(false);
+    return (_jsx("button", { type: "button", onClick: async () => {
+            setIsRegenerating(true);
+            try {
+                await onRegenerate();
+            }
+            finally {
+                setIsRegenerating(false);
+            }
+        }, disabled: isRegenerating, "data-slot": "image-regenerate", "aria-label": "Regenerate image", className: "inline-flex size-7 items-center justify-center rounded hover:bg-muted disabled:opacity-50", children: _jsx(RefreshCwIcon, { className: cn("size-4", isRegenerating && "animate-spin") }) }));
+}
+function ImageActions({ part, onRegenerate, className }) {
+    return (_jsxs("div", { "data-slot": "image-actions", className: cn("flex items-center gap-1 p-1", className), children: [_jsx("button", { type: "button", onClick: () => downloadImagePart(part), "data-slot": "image-download", "aria-label": "Download image", className: "inline-flex size-7 items-center justify-center rounded hover:bg-muted", children: _jsx(DownloadIcon, { className: "size-4" }) }), _jsx("button", { type: "button", onClick: () => {
+                    copyImagePart(part).catch(() => { });
+                }, "data-slot": "image-copy", "aria-label": "Copy image", className: "inline-flex size-7 items-center justify-center rounded hover:bg-muted", children: _jsx(CopyIcon, { className: "size-4" }) }), onRegenerate && _jsx(RegenerateButton, { onRegenerate: onRegenerate })] }));
+}
+const ImageImpl = (props) => {
+    const { image, filename, status } = props;
+    if ((status === null || status === void 0 ? void 0 : status.type) === "running") {
+        return (_jsxs(ImageRoot, { children: [_jsx(ImageGenerating, {}), _jsx(ImageFilename, { children: filename })] }));
+    }
+    if ((status === null || status === void 0 ? void 0 : status.type) === "incomplete" && status.reason === "content-filter") {
+        return (_jsx(ImageRoot, { children: _jsx(ImageContentFilterError, { reason: "The provider blocked this image." }) }));
+    }
+    return (_jsxs(ImageRoot, { children: [_jsx(ImageZoom, { src: image, alt: filename || "Image content", children: _jsx(ImagePreview, { src: image, alt: filename || "Image content" }) }), _jsx(ImageFilename, { children: filename })] }));
+};
+const Image = memo(ImageImpl);
+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, ImageActions, ImageContentFilterError, ImageFilename, ImageGenerating, ImagePreview, ImageRoot, ImageZoom, imageVariants, };
+export const ImageMessage = Image;

package/dist/components/assistant-ui/markdown-text.d.ts

@@ -0,0 +1,2 @@
+import "@assistant-ui/react-markdown/styles/dot.css";
+export declare const MarkdownText: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;