@agent-native/core 0.110.3 → 0.111.0

package/dist/client/composer/ComposerPlusMenu.js

@@ -1,501 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useComposerRuntime } from "@assistant-ui/react";
-import { IconPlus, IconUpload, IconBulb, IconClock, IconBolt, IconTool, IconPlugConnected, IconPhotoPlus, IconLoader2, IconArrowLeft, IconX, } from "@tabler/icons-react";
-import { useState, useRef, useEffect, useMemo, useCallback, } from "react";
-import { createPortal } from "react-dom";
-import { setAgentChatContextItem } from "../agent-chat.js";
-import { agentNativePath } from "../api-path.js";
-import { Popover, PopoverTrigger, PopoverContent, } from "../components/ui/popover.js";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
-import { useT } from "../i18n.js";
-import { useOrg } from "../org/hooks.js";
-import { isMcpIntegrationCatalogAvailable } from "../resources/mcp-integration-catalog.js";
-import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
-import { useCreateMcpServer, } from "../resources/use-mcp-servers.js";
-import { cn } from "../utils.js";
-import { createAssetPickerHandoffId, isExternalAssetPickerUrl, standaloneAssetPickerUrl, } from "./asset-picker-url.js";
-const DEFAULT_ASSETS_PICKER_URL = "https://assets.agent-native.com/picker";
-const EMBED_PROTOCOL = "agent-native.embed";
-const EMBED_VERSION = 1;
-function assetPickerUrl() {
-    const env = import.meta.env ?? {};
-    return env.VITE_AGENT_NATIVE_ASSETS_PICKER_URL || DEFAULT_ASSETS_PICKER_URL;
-}
-function withEmbeddedParams(url) {
-    try {
-        const parsed = new URL(url, window.location.href);
-        parsed.searchParams.set("embedded", "1");
-        parsed.searchParams.set("mediaType", "image");
-        return parsed.toString();
-    }
-    catch {
-        const separator = url.includes("?") ? "&" : "?";
-        return `${url}${separator}embedded=1&mediaType=image`;
-    }
-}
-function assetPickerOrigin(url) {
-    try {
-        return new URL(url, window.location.href).origin;
-    }
-    catch {
-        return null;
-    }
-}
-function embedEnvelope(type, options = {}) {
-    return {
-        protocol: EMBED_PROTOCOL,
-        version: EMBED_VERSION,
-        type,
-        ...options,
-    };
-}
-function isEmbedEnvelope(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value))
-        return false;
-    const candidate = value;
-    return (candidate.protocol === EMBED_PROTOCOL &&
-        candidate.version === EMBED_VERSION &&
-        typeof candidate.type === "string");
-}
-function assetString(value) {
-    return typeof value === "string" && value.trim() ? value.trim() : null;
-}
-function assetImageSource(payload) {
-    if (!payload || typeof payload !== "object")
-        return null;
-    const asset = payload;
-    return (assetString(asset.url) ??
-        assetString(asset.previewUrl) ??
-        assetString(asset.downloadUrl) ??
-        assetString(asset.embedUrl));
-}
-function assetTitle(payload, url) {
-    if (payload && typeof payload === "object") {
-        const title = assetString(payload.title);
-        if (title)
-            return title;
-        const prompt = assetString(payload.prompt);
-        if (prompt)
-            return prompt.slice(0, 80);
-    }
-    try {
-        const name = new URL(url).pathname.split("/").filter(Boolean).pop();
-        return name ? decodeURIComponent(name) : "Generated image";
-    }
-    catch {
-        return "Generated image";
-    }
-}
-function assetContext(payload, url) {
-    const lines = [`Image URL: ${url}`];
-    if (payload && typeof payload === "object") {
-        const asset = payload;
-        const assetId = assetString(asset.assetId);
-        const libraryId = assetString(asset.libraryId);
-        const prompt = assetString(asset.prompt);
-        const altText = assetString(asset.altText);
-        if (assetId)
-            lines.push(`Asset ID: ${assetId}`);
-        if (libraryId)
-            lines.push(`Library ID: ${libraryId}`);
-        if (prompt)
-            lines.push(`Prompt: ${prompt}`);
-        if (altText)
-            lines.push(`Alt text: ${altText}`);
-    }
-    return lines.join("\n");
-}
-function slugifyName(value) {
-    return (value
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "") || "uploaded-skill");
-}
-function formatAttachmentError(error, fallback) {
-    return error instanceof Error ? error.message : fallback;
-}
-function UploadOnlyAttachButton({ onAttachmentError, }) {
-    const composerRuntime = useComposerRuntime();
-    const inputRef = useRef(null);
-    const handleFilesSelected = async (files) => {
-        if (!files || files.length === 0)
-            return;
-        try {
-            await Promise.all(Array.from(files).map((file) => composerRuntime.addAttachment(file)));
-        }
-        catch (error) {
-            onAttachmentError?.(formatAttachmentError(error, "Could not upload the selected file."));
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "file", multiple: true, className: "hidden", onChange: (event) => {
-                    void handleFilesSelected(event.target.files);
-                    event.target.value = "";
-                } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex shrink-0", children: _jsx("button", { type: "button", className: "shrink-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50", "aria-label": "Upload", onClick: () => inputRef.current?.click(), children: _jsx(IconPlus, { className: "h-4 w-4" }) }) }) }), _jsx(TooltipContent, { children: "Upload" })] })] }));
-}
-export function ComposerPlusMenu({ onSelectMode, onAttachmentError, mode = "full", }) {
-    if (mode === "upload-only") {
-        return _jsx(UploadOnlyAttachButton, { onAttachmentError: onAttachmentError });
-    }
-    return (_jsx(ComposerPlusMenuFull, { onSelectMode: onSelectMode, onAttachmentError: onAttachmentError }));
-}
-function ComposerPlusMenuFull({ onSelectMode, onAttachmentError, }) {
-    const t = useT();
-    const composerRuntime = useComposerRuntime();
-    const [open, setOpen] = useState(false);
-    const [assetsPickerOpen, setAssetsPickerOpen] = useState(false);
-    const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
-    const [view, setView] = useState("menu");
-    const showMcpIntegrations = useMemo(() => isMcpIntegrationCatalogAvailable(), []);
-    const { data: org } = useOrg();
-    const canCreateOrgMcp = !org?.orgId || org.role === "owner" || org.role === "admin";
-    const hasOrg = !!org?.orgId;
-    const defaultMcpScope = hasOrg && canCreateOrgMcp ? "org" : "user";
-    const createMcp = useCreateMcpServer();
-    const fileUploadRef = useRef(null);
-    const skillFileInputRef = useRef(null);
-    const skillHoverTimerRef = useRef(null);
-    const [skillUploadSlug, setSkillUploadSlug] = useState("");
-    const [skillUploadContent, setSkillUploadContent] = useState("");
-    const [skillUploadFileName, setSkillUploadFileName] = useState("");
-    const [skillUploadStatus, setSkillUploadStatus] = useState(null);
-    const [skillUploadBusy, setSkillUploadBusy] = useState(false);
-    const [skillFlyoutOpen, setSkillFlyoutOpen] = useState(false);
-    const [skillFlyoutSide, setSkillFlyoutSide] = useState("right");
-    const skillFlyoutCloseTimerRef = useRef(null);
-    const openSkillFlyout = (rowEl) => {
-        if (skillFlyoutCloseTimerRef.current) {
-            window.clearTimeout(skillFlyoutCloseTimerRef.current);
-            skillFlyoutCloseTimerRef.current = null;
-        }
-        if (rowEl && typeof window !== "undefined") {
-            const rect = rowEl.getBoundingClientRect();
-            const FLYOUT_WIDTH = 248;
-            setSkillFlyoutSide(window.innerWidth - rect.right < FLYOUT_WIDTH ? "left" : "right");
-        }
-        setSkillFlyoutOpen(true);
-    };
-    const scheduleSkillFlyoutClose = () => {
-        if (skillFlyoutCloseTimerRef.current)
-            window.clearTimeout(skillFlyoutCloseTimerRef.current);
-        skillFlyoutCloseTimerRef.current = window.setTimeout(() => {
-            setSkillFlyoutOpen(false);
-        }, 160);
-    };
-    useEffect(() => {
-        if (open) {
-            setView("menu");
-            setSkillUploadSlug("");
-            setSkillUploadContent("");
-            setSkillUploadFileName("");
-            setSkillUploadStatus(null);
-            setSkillUploadBusy(false);
-            setSkillFlyoutOpen(false);
-        }
-    }, [open]);
-    const handleSkillFileSelected = async (files) => {
-        if (!files || files.length === 0)
-            return;
-        const file = files[0];
-        const text = await file.text();
-        const baseName = file.name.replace(/\.[^./]+$/, "");
-        const slug = slugifyName(baseName.toLowerCase() === "skill" ? "uploaded-skill" : baseName);
-        setSkillUploadSlug(slug);
-        setSkillUploadContent(text);
-        setSkillUploadFileName(file.name);
-        setSkillUploadStatus(null);
-        setView("skill-upload");
-    };
-    const handleFilesSelected = async (files) => {
-        if (!files || files.length === 0)
-            return;
-        try {
-            await Promise.all(Array.from(files).map((file) => composerRuntime.addAttachment(file)));
-        }
-        catch (error) {
-            onAttachmentError?.(formatAttachmentError(error, "Could not upload the selected file."));
-        }
-    };
-    const submitSkillUpload = async () => {
-        if (skillUploadBusy)
-            return;
-        const slug = slugifyName(skillUploadSlug || "uploaded-skill");
-        const path = `skills/${slug}/SKILL.md`;
-        setSkillUploadBusy(true);
-        setSkillUploadStatus(null);
-        try {
-            const res = await fetch(agentNativePath("/_agent-native/resources"), {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    path,
-                    content: skillUploadContent,
-                    mimeType: "text/markdown",
-                    shared: false,
-                }),
-            });
-            if (!res.ok) {
-                const body = await res.text().catch(() => "");
-                throw new Error(body || `Upload failed (${res.status})`);
-            }
-            setSkillUploadStatus({
-                kind: "ok",
-                message: `Skill "${skillUploadFileName || `${slug}/SKILL.md`}" added`,
-            });
-            window.setTimeout(() => setOpen(false), 1200);
-        }
-        catch (err) {
-            setSkillUploadStatus({
-                kind: "err",
-                message: err?.message || "Failed to save skill file",
-            });
-        }
-        finally {
-            setSkillUploadBusy(false);
-        }
-    };
-    const menuItems = [
-        {
-            icon: _jsx(IconUpload, { className: "h-3.5 w-3.5" }),
-            label: "Upload File",
-            desc: "Images, PDFs, text/code, JSON, CSV",
-            action: () => {
-                setOpen(false);
-                setTimeout(() => fileUploadRef.current?.click(), 0);
-            },
-        },
-        {
-            icon: _jsx(IconPhotoPlus, { className: "h-3.5 w-3.5" }),
-            label: "Generate Image",
-            desc: "Open the Assets image picker",
-            action: () => {
-                setOpen(false);
-                setAssetsPickerOpen(true);
-            },
-        },
-        {
-            icon: _jsx(IconClock, { className: "h-3.5 w-3.5" }),
-            label: "Schedule Task",
-            desc: "Run something on a schedule",
-            action: () => {
-                onSelectMode?.("job");
-                setOpen(false);
-            },
-        },
-        {
-            icon: _jsx(IconBolt, { className: "h-3.5 w-3.5" }),
-            label: "Create Automation",
-            desc: "Set up a when-X-do-Y rule",
-            action: () => {
-                onSelectMode?.("automation");
-                setOpen(false);
-            },
-        },
-        {
-            icon: _jsx(IconTool, { className: "h-3.5 w-3.5" }),
-            label: "Create Extension",
-            desc: "Build a mini app extension",
-            action: () => {
-                onSelectMode?.("extension");
-                setOpen(false);
-            },
-        },
-        ...(showMcpIntegrations
-            ? [
-                {
-                    icon: _jsx(IconPlugConnected, { className: "h-3.5 w-3.5" }),
-                    label: t("mcpIntegrations.menuLabel"),
-                    desc: t("mcpIntegrations.menuDescription"),
-                    action: () => {
-                        setOpen(false);
-                        setMcpDialogOpen(true);
-                    },
-                },
-            ]
-            : []),
-        {
-            icon: _jsx(IconBulb, { className: "h-3.5 w-3.5" }),
-            label: "Create Skill",
-            desc: "Teach the agent a new ability",
-            action: openSkillFlyout,
-            hoverAction: openSkillFlyout,
-        },
-    ];
-    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileUploadRef, type: "file", multiple: true, className: "hidden", onChange: (event) => {
-                    void handleFilesSelected(event.target.files);
-                    event.target.value = "";
-                } }), _jsx("input", { ref: skillFileInputRef, type: "file", accept: ".md,text/markdown", className: "hidden", onChange: (e) => {
-                    void handleSkillFileSelected(e.target.files);
-                    e.target.value = "";
-                } }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconPlus, { className: "h-4 w-4" }) }) }) }), _jsx(TooltipContent, { children: "Add..." })] }), _jsxs(PopoverContent, { side: "top", align: "start", sideOffset: 8, className: cn("p-0 rounded-lg", view === "skill-upload"
-                            ? "max-h-[70vh] w-[calc(100vw-24px)] max-w-[380px] overflow-y-auto"
-                            : "w-[260px]"), style: { fontSize: 13, lineHeight: "normal" }, onOpenAutoFocus: (e) => e.preventDefault(), children: [view === "menu" && (_jsx("div", { className: "py-1", children: menuItems.map((item) => {
-                                    const isSkill = item.label === "Create Skill";
-                                    return (_jsxs("div", { className: cn("relative", isSkill && "group/skill"), onMouseEnter: (e) => {
-                                            if (isSkill) {
-                                                openSkillFlyout(e.currentTarget);
-                                                return;
-                                            }
-                                            if (!item.hoverAction)
-                                                return;
-                                            if (skillHoverTimerRef.current)
-                                                window.clearTimeout(skillHoverTimerRef.current);
-                                            skillHoverTimerRef.current = window.setTimeout(() => {
-                                                item.hoverAction?.();
-                                            }, 180);
-                                        }, onMouseLeave: () => {
-                                            if (isSkill) {
-                                                scheduleSkillFlyoutClose();
-                                                return;
-                                            }
-                                            if (skillHoverTimerRef.current) {
-                                                window.clearTimeout(skillHoverTimerRef.current);
-                                                skillHoverTimerRef.current = null;
-                                            }
-                                        }, children: [_jsxs("button", { type: "button", onClick: item.action, className: cn("flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50", isSkill && skillFlyoutOpen && "bg-accent/50"), children: [_jsx("span", { className: "text-muted-foreground", children: item.icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: item.label }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: item.desc })] }), isSkill && (_jsx("span", { className: "ms-auto text-muted-foreground/60", children: "\u203A" }))] }), isSkill && skillFlyoutOpen && (_jsxs("div", { role: "menu", onMouseEnter: () => openSkillFlyout(), onMouseLeave: scheduleSkillFlyoutClose, className: cn("absolute top-0 z-20 w-[240px] rounded-lg border border-border bg-popover py-1 shadow-md", skillFlyoutSide === "right"
-                                                    ? "left-full ml-1"
-                                                    : "right-full mr-1"), children: [_jsxs("button", { type: "button", onClick: () => {
-                                                            onSelectMode?.("skill");
-                                                            setSkillFlyoutOpen(false);
-                                                            setOpen(false);
-                                                        }, className: "flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconBulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Create new skill" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: "Describe a skill and let the agent draft it" })] })] }), _jsxs("button", { type: "button", onClick: () => {
-                                                            setSkillFlyoutOpen(false);
-                                                            skillFileInputRef.current?.click();
-                                                        }, className: "flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50", children: [_jsx("span", { className: "text-muted-foreground", children: _jsx(IconUpload, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12px] font-medium text-foreground", children: "Upload skill file" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/60", children: "Import an existing SKILL.md file" })] })] })] }))] }, item.label));
-                                }) })), view === "skill-upload" && (_jsxs("div", { className: "p-3", children: [_jsxs("button", { type: "button", onClick: () => setView("menu"), className: "mb-1.5 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground", children: [_jsx(IconArrowLeft, { className: "h-3 w-3 rtl:-scale-x-100" }), "Back"] }), _jsx("label", { className: "mb-1 block text-[11px] font-semibold text-foreground", children: "Upload skill file" }), _jsxs("p", { className: "mb-2 text-[10px] leading-relaxed text-muted-foreground/60", children: ["Review the content from", " ", _jsx("span", { className: "font-mono", children: skillUploadFileName || "the selected file" }), " ", "before saving."] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: "Skill name" }), _jsx("input", { value: skillUploadSlug, onChange: (e) => setSkillUploadSlug(e.target.value), className: "mb-2 w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[12px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent", placeholder: "my-skill" }), _jsxs("p", { className: "mb-2 text-[10px] text-muted-foreground/60", children: ["Saved at", " ", _jsxs("span", { className: "font-mono", children: ["skills/", slugifyName(skillUploadSlug || "uploaded-skill"), "/SKILL.md"] })] }), _jsx("label", { className: "mb-1 block text-[10px] font-medium text-muted-foreground", children: "Content" }), _jsx("textarea", { value: skillUploadContent, onChange: (e) => setSkillUploadContent(e.target.value), rows: 10, className: "w-full rounded-md border border-border bg-background px-2.5 py-1.5 font-mono text-[11px] leading-relaxed text-foreground outline-none focus:ring-1 focus:ring-accent" }), skillUploadStatus && (_jsx("div", { className: cn("mt-2 text-[11px] leading-snug", skillUploadStatus.kind === "ok"
-                                            ? "text-green-600 dark:text-green-400"
-                                            : "text-red-600 dark:text-red-400"), children: skillUploadStatus.message })), _jsxs("div", { className: "mt-2.5 flex justify-end gap-2", children: [_jsx("button", { type: "button", onClick: () => setView("menu"), className: "rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-accent/40", children: "Cancel" }), _jsx("button", { type: "button", onClick: submitSkillUpload, disabled: skillUploadBusy ||
-                                                    !skillUploadContent.trim() ||
-                                                    !skillUploadSlug.trim(), className: "rounded-md bg-accent px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40 disabled:pointer-events-none", children: skillUploadBusy ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : ("Save") })] })] }))] })] }), _jsx(McpIntegrationDialog, { open: mcpDialogOpen, onOpenChange: setMcpDialogOpen, defaultScope: defaultMcpScope, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createMcp.mutateAsync(args) }), _jsx(AssetsPickerModal, { open: assetsPickerOpen, onOpenChange: setAssetsPickerOpen })] }));
-}
-function AssetsPickerModal({ open, onOpenChange, }) {
-    const iframeRef = useRef(null);
-    const standaloneWindowRef = useRef(null);
-    const [pickerReady, setPickerReady] = useState(false);
-    const [standaloneHandoffId, setStandaloneHandoffId] = useState(null);
-    const sourceUrl = useMemo(() => assetPickerUrl(), []);
-    const externalPicker = useMemo(() => typeof window !== "undefined" &&
-        isExternalAssetPickerUrl(sourceUrl, window.location.origin), [sourceUrl]);
-    const standaloneUrl = useMemo(() => standaloneAssetPickerUrl(sourceUrl, typeof window !== "undefined" ? window.location.href : undefined, {
-        handoffId: standaloneHandoffId ?? undefined,
-        returnOrigin: typeof window !== "undefined" ? window.location.origin : undefined,
-    }), [sourceUrl, standaloneHandoffId]);
-    const iframeUrl = useMemo(() => withEmbeddedParams(sourceUrl), [sourceUrl]);
-    const targetOrigin = useMemo(() => assetPickerOrigin(iframeUrl), [iframeUrl]);
-    const configurePicker = useCallback(() => {
-        if (!targetOrigin)
-            return;
-        iframeRef.current?.contentWindow?.postMessage(embedEnvelope("message", {
-            name: "configure",
-            payload: { mediaType: "image", count: 3 },
-        }), targetOrigin);
-    }, [targetOrigin]);
-    useEffect(() => {
-        if (open) {
-            setPickerReady(false);
-            if (externalPicker) {
-                standaloneWindowRef.current = null;
-                setStandaloneHandoffId(createAssetPickerHandoffId());
-            }
-            else {
-                setStandaloneHandoffId(null);
-            }
-            return;
-        }
-        if (!standaloneWindowRef.current)
-            setStandaloneHandoffId(null);
-    }, [externalPicker, iframeUrl, open]);
-    useEffect(() => {
-        if (!targetOrigin ||
-            (!open && !standaloneWindowRef.current) ||
-            (externalPicker && !standaloneHandoffId))
-            return;
-        const handleMessage = (event) => {
-            const expectedSource = externalPicker
-                ? standaloneWindowRef.current
-                : iframeRef.current?.contentWindow;
-            if (!expectedSource || event.source !== expectedSource)
-                return;
-            if (event.origin !== targetOrigin)
-                return;
-            if (!isEmbedEnvelope(event.data))
-                return;
-            if (event.data.type === "ready") {
-                setPickerReady(true);
-                configurePicker();
-                return;
-            }
-            if (event.data.type !== "message")
-                return;
-            if (externalPicker) {
-                const payload = event.data.payload;
-                const handoffId = payload && typeof payload === "object"
-                    ? assetString(payload.handoffId)
-                    : null;
-                if (handoffId !== standaloneHandoffId)
-                    return;
-            }
-            if (event.data.name === "close") {
-                onOpenChange(false);
-                return;
-            }
-            if (event.data.name !== "chooseImage" &&
-                event.data.name !== "chooseAsset")
-                return;
-            const url = assetImageSource(event.data.payload);
-            if (!url)
-                return;
-            const title = assetTitle(event.data.payload, url);
-            const assetId = event.data.payload && typeof event.data.payload === "object"
-                ? assetString(event.data.payload.assetId)
-                : null;
-            setAgentChatContextItem({
-                key: `asset-image:${assetId ?? url}`,
-                title: `Image: ${title}`,
-                context: assetContext(event.data.payload, url),
-            });
-            standaloneWindowRef.current = null;
-            setStandaloneHandoffId(null);
-            onOpenChange(false);
-        };
-        const handleKey = (event) => {
-            if (event.key === "Escape")
-                onOpenChange(false);
-        };
-        window.addEventListener("message", handleMessage);
-        window.addEventListener("keydown", handleKey);
-        return () => {
-            window.removeEventListener("message", handleMessage);
-            window.removeEventListener("keydown", handleKey);
-        };
-    }, [
-        configurePicker,
-        externalPicker,
-        onOpenChange,
-        open,
-        standaloneHandoffId,
-        targetOrigin,
-    ]);
-    const openStandalonePicker = useCallback((event) => {
-        if (!standaloneHandoffId)
-            return;
-        event.preventDefault();
-        const pickerWindow = window.open(standaloneUrl, "_blank");
-        if (!pickerWindow)
-            return;
-        standaloneWindowRef.current = pickerWindow;
-        onOpenChange(false);
-    }, [onOpenChange, standaloneHandoffId, standaloneUrl]);
-    if (!open || typeof document === "undefined")
-        return null;
-    return createPortal(_jsx("div", { className: "fixed inset-0 z-[280] flex items-center justify-center bg-black/50 p-3", role: "dialog", "aria-modal": "true", "aria-labelledby": "composer-assets-picker-title", onMouseDown: (event) => {
-            if (event.target === event.currentTarget)
-                onOpenChange(false);
-        }, children: _jsxs("div", { className: "flex h-[min(86vh,760px)] w-[min(96vw,1040px)] flex-col overflow-hidden rounded-xl border border-border bg-background shadow-2xl", children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("div", { id: "composer-assets-picker-title", className: "text-sm font-medium text-foreground", children: "Generate image" }), _jsx("button", { type: "button", onClick: () => onOpenChange(false), className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", "aria-label": "Close image picker", children: _jsx(IconX, { className: "h-4 w-4" }) })] }), externalPicker ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-3 p-8 text-center", children: [_jsx("div", { className: "max-w-md text-sm text-muted-foreground", children: "Open Assets in a new tab to sign in and choose an image securely." }), _jsx("a", { href: standaloneUrl, target: "_blank", onClick: openStandalonePicker, className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90", children: "Open Assets image picker" })] })) : targetOrigin ? (_jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-background", children: [!pickerReady && _jsx(AssetsPickerLoadingSkeleton, {}), _jsx("iframe", { ref: iframeRef, src: iframeUrl, title: "Assets image picker", className: cn("absolute inset-0 h-full w-full border-0 bg-background transition-opacity duration-150", pickerReady ? "opacity-100" : "pointer-events-none opacity-0"), sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-downloads", allow: "clipboard-read; clipboard-write; microphone; fullscreen", referrerPolicy: "strict-origin-when-cross-origin", onLoad: () => {
-                                configurePicker();
-                                setPickerReady(true);
-                            } })] })) : (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center p-8 text-center text-sm text-muted-foreground", children: "The configured image picker URL is not valid." }))] }) }), document.body);
-}
-function AssetsPickerLoadingSkeleton() {
-    return (_jsxs("div", { className: "absolute inset-0 flex flex-col gap-5 p-5", role: "status", "aria-label": "Loading Assets picker", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-9 flex-1 animate-pulse rounded-md bg-muted" }), _jsx("div", { className: "h-9 w-24 animate-pulse rounded-md bg-muted" })] }), _jsx("div", { className: "grid min-h-0 flex-1 grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: 8 }).map((_, index) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("div", { className: "aspect-square w-full animate-pulse rounded-lg bg-muted" }), _jsx("div", { className: "h-3 w-3/4 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-muted" })] }, index))) })] }));
-}
-//# sourceMappingURL=ComposerPlusMenu.js.map