@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/chat/MessageAttachments.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Download, FileText, LinkIcon, Maximize2, X } from "lucide-react";
+import { Box, Code2, Download, ExternalLink, FileText, LinkIcon, Maximize2, ScrollText, X, } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Z_SHELL_OVERLAY } from "../../lib/floating-layers.js";
 import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { resolveApiUrl } from "../../utils/asset-url.js";
+import { isSafeAttachmentUrl } from "../../utils/attachment-url.js";
+import { CodeBlock } from "../ui/code-block.js";
+import { TranscriptViewerOverlay } from "./TranscriptViewerOverlay.js";
 const ABSOLUTE_URL = /^(?:https?:|data:|blob:|[a-z][a-z0-9+.-]*:\/\/)/i;
 /**
  * Resolve an attachment URL for rendering. Absolute URLs (http(s), data:,
@@ -54,6 +58,141 @@ function resolveKind(att) {
         return "document";
     return "link";
 }
+/** A `.pdf` URL (ignoring any `?query` / `#hash`). */
+const PDF_EXT = /\.pdf(?:[?#]|$)/i;
+/**
+ * Text/code extensions we can preview inline with {@link CodeBlock}, mapped to a
+ * coarse language hint. Keep this list aligned with the regex used for kind
+ * derivation; the hint is best-effort and only used for display.
+ */
+const CODE_EXT_LANGUAGE = {
+    txt: "text",
+    log: "text",
+    text: "text",
+    md: "markdown",
+    markdown: "markdown",
+    mdx: "markdown",
+    json: "json",
+    jsonc: "json",
+    json5: "json",
+    csv: "csv",
+    tsv: "csv",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    ini: "ini",
+    env: "ini",
+    xml: "xml",
+    html: "html",
+    htm: "html",
+    css: "css",
+    scss: "scss",
+    ts: "typescript",
+    tsx: "typescript",
+    mts: "typescript",
+    cts: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    mjs: "javascript",
+    cjs: "javascript",
+    py: "python",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    java: "java",
+    kt: "kotlin",
+    c: "c",
+    h: "c",
+    cpp: "cpp",
+    cc: "cpp",
+    cxx: "cpp",
+    hpp: "cpp",
+    cs: "csharp",
+    php: "php",
+    swift: "swift",
+    sh: "shell",
+    bash: "shell",
+    zsh: "shell",
+    sql: "sql",
+};
+const CODE_EXT = new RegExp(`\\.(?:${Object.keys(CODE_EXT_LANGUAGE).join("|")})(?:[?#]|$)`, "i");
+/** glTF binary/text 3D model extensions. */
+const MODEL3D_EXT = /\.(?:glb|gltf)(?:[?#]|$)/i;
+/** The lower-cased path of an attachment URL (no query/hash), or "" for data: URLs. */
+function attachmentPath(url) {
+    const u = url.trim().toLowerCase();
+    if (!u || u.startsWith("data:"))
+        return "";
+    try {
+        return new URL(u, "http://x").pathname;
+    }
+    catch {
+        // Strip query/hash manually for malformed-but-extension-bearing strings.
+        return u.split(/[?#]/)[0] ?? u;
+    }
+}
+/**
+ * Derive the inline-preview kind for a document/link attachment. Only called
+ * once an attachment has resolved to a non-media kind (not image/audio/video);
+ * media keeps its dedicated players. Pure + render-safe — inspects metadata
+ * only, never fetches.
+ */
+export function attachmentPreviewKind(att) {
+    const mime = (att.mimeType ?? "").toLowerCase();
+    const url = att.url ?? "";
+    const path = attachmentPath(url);
+    // PDF: explicit MIME, a .pdf URL, or a data:application/pdf payload.
+    if (mime === "application/pdf" ||
+        PDF_EXT.test(path) ||
+        url.trim().toLowerCase().startsWith("data:application/pdf")) {
+        return "pdf";
+    }
+    // 3D model: a model/* MIME, a .glb/.gltf URL, or a data:model/* payload.
+    // Checked before text/code so a .gltf (JSON) with extracted text still
+    // previews as a model, not as code.
+    if (mime.startsWith("model/") ||
+        MODEL3D_EXT.test(path) ||
+        url.trim().toLowerCase().startsWith("data:model/")) {
+        return "model3d";
+    }
+    // Text/code: a text-* MIME, a known code/text extension, an inline
+    // text data: URL, or an attachment that already carries extracted text.
+    if (mime.startsWith("text/") ||
+        CODE_EXT.test(path) ||
+        url.trim().toLowerCase().startsWith("data:text/") ||
+        (typeof att.text === "string" && att.text.trim().length > 0)) {
+        return "code";
+    }
+    return "file";
+}
+/** Best-effort language hint for {@link CodeBlock}, from MIME then extension. */
+function codeLanguageHint(att) {
+    const mime = (att.mimeType ?? "").toLowerCase();
+    if (mime === "application/json" || mime === "text/json")
+        return "json";
+    if (mime === "text/markdown")
+        return "markdown";
+    if (mime === "text/csv")
+        return "csv";
+    if (mime === "text/html")
+        return "html";
+    const path = attachmentPath(att.url ?? "");
+    const ext = path.split(".").at(-1) ?? "";
+    return CODE_EXT_LANGUAGE[ext] ?? "text";
+}
+/**
+ * A transcript attachment: a saved transcript record (carries `transcriptId`)
+ * or, for older attachments produced before the link existed, a markdown
+ * attachment whose title reads as a transcript. These open the maximized,
+ * editable {@link TranscriptViewerOverlay} instead of downloading.
+ */
+function isTranscriptAttachment(att) {
+    if (att.transcriptId)
+        return true;
+    const mime = att.mimeType ?? "";
+    const title = att.title?.trim() ?? "";
+    return mime === "text/markdown" && /transcript/i.test(title);
+}
 function attachmentLabel(att) {
     if (att.title?.trim())
         return att.title.trim();
@@ -80,12 +219,18 @@ function downloadName(att, kind) {
             ? "mp3"
             : kind === "video"
                 ? "mp4"
-                : "bin";
+                : kind === "pdf"
+                    ? "pdf"
+                    : kind === "code"
+                        ? "txt"
+                        : kind === "model3d"
+                            ? "glb"
+                            : "bin";
     return `${att.id || "attachment"}.${ext}`;
 }
 /** A neutral circular control button (download / expand). Orange-free per brand. */
 function TileButton({ label, onClick, href, download, children, }) {
-    const cls = cn("inline-flex h-7 w-7 items-center justify-center rounded-full", "bg-black/45 text-white/90 backdrop-blur-sm transition-colors", "hover:bg-black/65 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60");
+    const cls = cn("inline-flex h-7 w-7 items-center justify-center rounded-full", "bg-black/70 text-white/90 transition-colors", "hover:bg-black/85   ");
     if (href) {
         return (_jsx("a", { href: href, download: download, target: "_blank", rel: "noreferrer", "aria-label": label, title: label, className: cls, onClick: (e) => e.stopPropagation(), children: children }));
     }
@@ -96,12 +241,197 @@ function TileButton({ label, onClick, href, download, children, }) {
 }
 function ImageTile({ att, src, thumbSrc, onExpand, }) {
     const label = attachmentLabel(att);
-    return (_jsxs("div", { className: "group relative inline-block max-w-[min(20rem,100%)] overflow-hidden rounded-xl border border-white/12", children: [_jsx("button", { type: "button", onClick: onExpand, className: "block w-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60", "aria-label": `Expand image ${label}`, children: _jsx("img", { src: thumbSrc, alt: att.description?.trim() || label, loading: "lazy", className: "block h-auto max-h-80 w-full object-cover" }) }), _jsxs("div", { className: "pointer-events-none absolute right-1.5 top-1.5 flex gap-1.5 opacity-0 transition-opacity group-hover:opacity-100", children: [_jsx("span", { className: "pointer-events-auto", children: _jsx(TileButton, { label: "Expand image", onClick: onExpand, children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) }) }), _jsx("span", { className: "pointer-events-auto", children: _jsx(TileButton, { label: "Download image", href: src, download: downloadName(att, "image"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) }) })] })] }));
+    return (_jsxs("div", { className: "group relative inline-block max-w-[min(20rem,100%)] overflow-hidden rounded-xl border border-white/12", children: [_jsx("button", { type: "button", onClick: onExpand, className: "block w-full cursor-zoom-in   ", "aria-label": `Expand image ${label}`, children: _jsx("img", { src: thumbSrc, alt: att.description?.trim() || label, loading: "lazy", 
+                    // Reserve a stable box via aspect-ratio so the row height is fixed
+                    // before the image loads — avoids layout shift / scroll-anchor yank.
+                    // The type carries no intrinsic dimensions, so a 4:3 default is used.
+                    // `object-contain` letterboxes the full image inside that reserved box
+                    // (mirrors the video branch + lightbox) so non-4:3 content isn't cropped.
+                    className: "block aspect-[4/3] max-h-80 w-full object-contain" }) }), _jsxs("div", { className: "pointer-events-none absolute right-1.5 top-1.5 flex gap-1.5 opacity-0 transition-opacity group-hover:opacity-100", children: [_jsx("span", { className: "pointer-events-auto", children: _jsx(TileButton, { label: "Expand image", onClick: onExpand, children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) }) }), _jsx("span", { className: "pointer-events-auto", children: _jsx(TileButton, { label: "Download image", href: src, download: downloadName(att, "image"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) }) })] })] }));
 }
 function FileTile({ att, src, kind, }) {
     const label = attachmentLabel(att);
     const Icon = kind === "link" ? LinkIcon : FileText;
-    return (_jsxs("a", { href: src, target: "_blank", rel: "noreferrer", download: kind === "link" ? undefined : downloadName(att, kind), className: cn("flex max-w-[min(20rem,100%)] items-center gap-2.5 rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", "text-white/90 transition-colors hover:bg-white/[0.12] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"), children: [_jsx(Icon, { className: "h-5 w-5 shrink-0 text-white/70" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: label }), att.description?.trim() ? (_jsx("span", { className: "block truncate text-[11px] text-white/55", children: att.description.trim() })) : (_jsx("span", { className: "block text-[11px] uppercase tracking-wide text-white/45", children: kind === "link" ? "link" : kind }))] }), kind === "link" ? (_jsx(LinkIcon, { className: "h-4 w-4 shrink-0 text-white/55" })) : (_jsx(Download, { className: "h-4 w-4 shrink-0 text-white/55" }))] }));
+    return (_jsxs("a", { href: src, target: "_blank", rel: "noreferrer", download: kind === "link" ? undefined : downloadName(att, kind), className: cn("flex max-w-[min(20rem,100%)] items-center gap-2.5 rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", "text-white/90 transition-colors hover:bg-white/[0.12]   "), children: [_jsx(Icon, { className: "h-5 w-5 shrink-0 text-white/70" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: label }), att.description?.trim() ? (_jsx("span", { className: "block truncate text-[11px] text-white/55", children: att.description.trim() })) : (_jsx("span", { className: "block text-[11px] uppercase tracking-wide text-white/45", children: kind === "link" ? "link" : kind }))] }), kind === "link" ? (_jsx(LinkIcon, { className: "h-4 w-4 shrink-0 text-white/55" })) : (_jsx(Download, { className: "h-4 w-4 shrink-0 text-white/55" }))] }));
+}
+/**
+ * Whether a (scheme-safe) URL can be inlined in an `<iframe>`. We only inline a
+ * served same-origin / app URL (`/api/...`, http(s), blob:); a `data:` URL is
+ * NOT inlined (browsers sandbox/refuse `data:` PDFs inconsistently and it can be
+ * huge), so it falls back to a download-only card.
+ */
+function isInlineablePdfUrl(rawUrl) {
+    const u = rawUrl.trim().toLowerCase();
+    if (!u)
+        return false;
+    if (u.startsWith("data:"))
+        return false;
+    return true;
+}
+/**
+ * Inline PDF preview. When the served URL is inlinable, render the browser's
+ * native PDF viewer inside a sandboxed `<iframe>` under a header with the
+ * filename and an open/download affordance. For a `data:` URL (or otherwise
+ * non-inlinable safe URL) it degrades to a download-only card — no iframe.
+ */
+function PdfTile({ att, src, t, }) {
+    const label = attachmentLabel(att);
+    const inlineable = isInlineablePdfUrl(att.url);
+    const openLabel = t("messageattachments.openPdf");
+    const downloadLabel = t("messageattachments.download");
+    const frameTitle = t("messageattachments.pdfPreviewTitle", { name: label });
+    if (!inlineable) {
+        // data: / non-inlinable safe URL → download card, no iframe.
+        return (_jsxs("a", { href: src, target: "_blank", rel: "noreferrer", download: downloadName(att, "pdf"), "data-testid": "pdf-attachment-fallback", className: cn("flex max-w-[min(20rem,100%)] items-center gap-2.5 rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", "text-white/90 transition-colors hover:bg-white/[0.12]   "), children: [_jsx(FileText, { className: "h-5 w-5 shrink-0 text-white/70" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: label }), _jsx("span", { className: "block text-[11px] uppercase tracking-wide text-white/45", children: t("messageattachments.pdfLabel") })] }), _jsx(Download, { className: "h-4 w-4 shrink-0 text-white/55" })] }));
+    }
+    return (_jsxs("figure", { "data-testid": "pdf-attachment", "aria-label": frameTitle, className: "m-0 w-full max-w-[min(36rem,100%)] overflow-hidden rounded-xl border border-white/12 bg-white/[0.04]", children: [_jsxs("figcaption", { className: "flex items-center gap-2 border-b border-white/10 px-3 py-2", children: [_jsx(FileText, { className: "h-4 w-4 shrink-0 text-white/70" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-medium text-white/90", children: label }), _jsxs("span", { className: "flex shrink-0 gap-1.5", children: [_jsx(TileButton, { label: openLabel, href: src, children: _jsx(ExternalLink, { className: "h-3.5 w-3.5" }) }), _jsx(TileButton, { label: downloadLabel, href: src, download: downloadName(att, "pdf"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("iframe", { src: src, title: frameTitle, 
+                // Sandbox the embedded document: allow it to be treated as same-origin
+                // so the native viewer's resources load, but grant no script/forms/etc.
+                sandbox: "allow-same-origin", className: "block h-[28rem] w-full border-0 bg-white" })] }));
+}
+/** Whether a (scheme-safe) model URL can be inlined in the WebGL viewer. */
+function isInlineableModelUrl(rawUrl) {
+    const u = rawUrl.trim().toLowerCase();
+    if (!u)
+        return false;
+    // data: URLs are not inlined (can be huge; keep parity with the PDF tile) —
+    // they degrade to a download card.
+    if (u.startsWith("data:"))
+        return false;
+    return true;
+}
+/**
+ * Inline 3D model preview (#8876). For an inlinable, scheme-safe `.glb`/`.gltf`
+ * URL, lazily loads three.js + GLTFLoader, auto-frames the model to its bounding
+ * box, and renders it in an auto-rotating WebGL canvas. Every failure mode —
+ * no WebGL (jsdom / headless without GL), a `data:` URL, a load/parse error —
+ * degrades to the same download card, so the bytes are never walled off. three
+ * is imported on demand so it never ships in the always-loaded chat bundle.
+ */
+function Model3dTile({ att, src, t, }) {
+    const label = attachmentLabel(att);
+    const inlineable = isInlineableModelUrl(att.url);
+    const mountRef = React.useRef(null);
+    const [status, setStatus] = React.useState(inlineable ? "loading" : "unsupported");
+    React.useEffect(() => {
+        if (!inlineable)
+            return;
+        const mount = mountRef.current;
+        if (!mount)
+            return;
+        // WebGL capability probe — bail to the download fallback when unavailable
+        // (jsdom, headless without GL) rather than throwing.
+        const probe = document.createElement("canvas");
+        const gl = probe.getContext("webgl2") ?? probe.getContext("webgl") ?? null;
+        if (!gl) {
+            setStatus("unsupported");
+            return;
+        }
+        let disposed = false;
+        let frame = 0;
+        let renderer = null;
+        (async () => {
+            try {
+                const THREE = await import("three");
+                const { GLTFLoader } = await import("three/addons/loaders/GLTFLoader.js");
+                if (disposed || !mountRef.current)
+                    return;
+                const host = mountRef.current;
+                const width = host.clientWidth || 320;
+                const height = 288;
+                const scene = new THREE.Scene();
+                const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+                const activeRenderer = new THREE.WebGLRenderer({
+                    antialias: true,
+                    alpha: true,
+                });
+                renderer = activeRenderer;
+                activeRenderer.setSize(width, height);
+                activeRenderer.setPixelRatio(Math.min(globalThis.devicePixelRatio || 1, 2));
+                host.appendChild(activeRenderer.domElement);
+                scene.add(new THREE.AmbientLight(0xffffff, 0.9));
+                const key = new THREE.DirectionalLight(0xffffff, 1.1);
+                key.position.set(3, 5, 4);
+                scene.add(key);
+                const gltf = await new GLTFLoader().loadAsync(src);
+                if (disposed) {
+                    activeRenderer.dispose?.();
+                    return;
+                }
+                const model = gltf.scene;
+                // Auto-frame: center the model and pull the camera back to fit it.
+                const box = new THREE.Box3().setFromObject(model);
+                const center = box.getCenter(new THREE.Vector3());
+                const size = box.getSize(new THREE.Vector3());
+                model.position.sub(center);
+                const radius = Math.max(size.x, size.y, size.z, 0.001) / 2;
+                const dist = radius / Math.sin((camera.fov * Math.PI) / 360);
+                camera.position.set(0, radius * 0.4, dist * 1.5);
+                camera.lookAt(0, 0, 0);
+                scene.add(model);
+                const animate = () => {
+                    if (disposed)
+                        return;
+                    model.rotation.y += 0.01;
+                    activeRenderer.render(scene, camera);
+                    frame = requestAnimationFrame(animate);
+                };
+                setStatus("ready");
+                animate();
+            }
+            catch {
+                if (!disposed)
+                    setStatus("error");
+            }
+        })();
+        return () => {
+            disposed = true;
+            if (frame)
+                cancelAnimationFrame(frame);
+            try {
+                renderer?.domElement?.remove();
+                renderer?.dispose?.();
+            }
+            catch {
+                // best-effort teardown
+            }
+        };
+    }, [inlineable, src]);
+    const downloadLabel = t("messageattachments.download");
+    const showFallbackBody = status === "unsupported" || status === "error";
+    return (_jsxs("figure", { "data-testid": "model3d-attachment", "aria-label": label, className: "m-0 w-full max-w-[min(28rem,100%)] overflow-hidden rounded-xl border border-white/12 bg-white/[0.04]", children: [_jsxs("figcaption", { className: "flex items-center gap-2 border-b border-white/10 px-3 py-2", children: [_jsx(Box, { className: "h-4 w-4 shrink-0 text-white/70" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-medium text-white/90", children: label }), _jsx("span", { className: "flex shrink-0 gap-1.5", children: _jsx(TileButton, { label: downloadLabel, href: src, download: downloadName(att, "model3d"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) }) })] }), showFallbackBody ? (_jsxs("a", { href: src, target: "_blank", rel: "noreferrer", download: downloadName(att, "model3d"), "data-testid": "model3d-attachment-fallback", className: "flex items-center gap-2.5 px-3 py-3 text-white/85 transition-colors hover:bg-white/[0.08]", children: [_jsx(Box, { className: "h-5 w-5 shrink-0 text-white/60" }), _jsx("span", { className: "min-w-0 flex-1 text-[12px] text-white/60", children: t("messageattachments.model3dDownloadToView") }), _jsx(Download, { className: "h-4 w-4 shrink-0 text-white/55" })] })) : (_jsx("div", { ref: mountRef, "data-testid": "model3d-canvas", className: "relative h-72 w-full bg-black/40", children: status === "loading" ? (_jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[12px] text-white/60", children: t("messageattachments.model3dLoading") })) : null }))] }));
+}
+/**
+ * Inline text/code preview using the {@link CodeBlock} primitive. Renders the
+ * attachment's extracted `att.text` (scrollable, capped height, with a copy
+ * button) when present; otherwise degrades to a download/open card — v1 does
+ * NOT fetch the URL.
+ */
+function CodeTile({ att, src, t, }) {
+    const label = attachmentLabel(att);
+    const text = typeof att.text === "string" ? att.text : "";
+    if (!text.trim()) {
+        // No inline content available → download/open card (no fetch in v1).
+        return (_jsxs("a", { href: src, target: "_blank", rel: "noreferrer", download: downloadName(att, "code"), "data-testid": "code-attachment-fallback", className: cn("flex max-w-[min(20rem,100%)] items-center gap-2.5 rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", "text-white/90 transition-colors hover:bg-white/[0.12]   "), children: [_jsx(Code2, { className: "h-5 w-5 shrink-0 text-white/70" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: label }), _jsx("span", { className: "block text-[11px] uppercase tracking-wide text-white/45", children: t("messageattachments.textLabel") })] }), _jsx(Download, { className: "h-4 w-4 shrink-0 text-white/55" })] }));
+    }
+    const language = codeLanguageHint(att);
+    return (_jsxs("figure", { "data-testid": "code-attachment", "aria-label": t("messageattachments.codePreviewTitle", { name: label }), className: "m-0 w-full max-w-[min(36rem,100%)] overflow-hidden rounded-xl border border-white/12 bg-white/[0.04]", children: [_jsxs("figcaption", { className: "flex items-center gap-2 border-b border-white/10 px-3 py-2", children: [_jsx(Code2, { className: "h-4 w-4 shrink-0 text-white/70" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-medium text-white/90", children: label }), _jsx("span", { className: "shrink-0 text-[11px] uppercase tracking-wide text-white/45", children: language }), _jsx(TileButton, { label: t("messageattachments.download"), href: src, download: downloadName(att, "code"), children: _jsx(Download, { className: "h-3.5 w-3.5" }) })] }), _jsx(CodeBlock, { value: text, copyable: true, "data-language": language, className: "max-h-[24rem] overflow-auto rounded-none border-0 bg-transparent" })] }));
+}
+/**
+ * A non-clickable fallback card for an attachment whose URL fails the scheme
+ * allowlist ({@link isSafeAttachmentUrl}) — e.g. a `javascript:` / `file:` /
+ * `data:text/html` URL injected by an untrusted agent. It shows the same chrome
+ * as {@link FileTile} but renders no `href` / `src`, so the dangerous URL is
+ * never handed to the browser.
+ */
+function UnsafeAttachmentTile({ att, }) {
+    const label = attachmentLabel(att);
+    return (_jsxs("div", { "data-testid": "unsafe-attachment", className: cn("flex max-w-[min(20rem,100%)] items-center gap-2.5 rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", "text-white/90"), children: [_jsx(FileText, { className: "h-5 w-5 shrink-0 text-white/70" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: label }), _jsx("span", { className: "block text-[11px] uppercase tracking-wide text-white/45", children: "unsupported attachment" })] })] }));
+}
+/** A transcript tile — tap to open the maximized, editable transcript viewer. */
+function TranscriptTile({ att, onOpen, }) {
+    const label = attachmentLabel(att);
+    return (_jsxs("button", { type: "button", onClick: onOpen, "data-testid": "transcript-attachment", className: cn("group flex max-w-[min(20rem,100%)] items-center gap-2.5 rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5 text-left", "text-white/90 transition-colors hover:bg-white/[0.12]   "), children: [_jsx(ScrollText, { className: "h-5 w-5 shrink-0 text-white/70" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium", children: label }), _jsx("span", { className: "block text-[11px] uppercase tracking-wide text-white/45", children: "Transcript \u00B7 tap to open" })] }), _jsx(Maximize2, { className: "h-4 w-4 shrink-0 text-white/55 transition-colors group-hover:text-white/80" })] }));
 }
 function Lightbox({ src, alt, downloadAs, onClose, }) {
     React.useEffect(() => {
@@ -114,30 +444,47 @@ function Lightbox({ src, alt, downloadAs, onClose, }) {
     }, [onClose]);
     if (typeof document === "undefined")
         return null;
-    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": alt, "data-testid": "attachment-lightbox", className: "fixed inset-0 flex items-center justify-center p-6", style: { zIndex: Z_SHELL_OVERLAY + 10 }, children: [_jsx("button", { type: "button", "aria-label": "Close preview", onClick: onClose, className: "absolute inset-0 cursor-zoom-out bg-black/85 backdrop-blur-sm" }), _jsx("img", { src: src, alt: alt, 
+    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": alt, "data-testid": "attachment-lightbox", className: "fixed inset-0 flex items-center justify-center p-6", style: { zIndex: Z_SHELL_OVERLAY + 10 }, children: [_jsx("button", { type: "button", "aria-label": "Close preview", onClick: onClose, className: "absolute inset-0 cursor-zoom-out bg-black/85" }), _jsx("img", { src: src, alt: alt, 
                 // pointer-events fall through to the backdrop button, so clicking the
                 // image closes too — standard lightbox behaviour.
-                className: "pointer-events-none relative max-h-full max-w-full rounded-lg object-contain shadow-2xl" }), _jsxs("div", { className: "absolute right-4 top-4 flex gap-2", children: [_jsx(TileButton, { label: "Download image", href: src, download: downloadAs, children: _jsx(Download, { className: "h-4 w-4" }) }), _jsx(TileButton, { label: "Close", onClick: onClose, children: _jsx(X, { className: "h-4 w-4" }) })] })] }), document.body);
+                className: "pointer-events-none relative max-h-full max-w-full rounded-lg object-contain" }), _jsxs("div", { className: "absolute right-4 top-4 flex gap-2", children: [_jsx(TileButton, { label: "Download image", href: src, download: downloadAs, children: _jsx(Download, { className: "h-4 w-4" }) }), _jsx(TileButton, { label: "Close", onClick: onClose, children: _jsx(X, { className: "h-4 w-4" }) })] })] }), document.body);
 }
 /**
  * Renders the media attached to a chat message — both user uploads and
  * agent-generated media. Images open a full-screen lightbox; audio and video
- * get native players; documents/links render as a card with a download/open
- * affordance. Used by the chat overlay bubble and `MessageContent`.
+ * get native players; PDFs render the browser's native viewer inline; text/code
+ * render inline via {@link CodeBlock} when their content is available; other
+ * documents/links render as a card with a download/open affordance. Used by the
+ * chat overlay bubble and `MessageContent`.
  */
 export function MessageAttachments({ attachments, className, }) {
+    const { t } = useTranslation();
     const [lightbox, setLightbox] = React.useState(null);
+    const [transcript, setTranscript] = React.useState(null);
     if (!attachments || attachments.length === 0)
         return null;
     return (_jsxs("div", { "data-testid": "message-attachments", className: cn("mt-1.5 flex flex-col gap-2", className), children: [attachments.map((att) => {
                 const kind = resolveKind(att);
+                // A transcript opens the maximized editor from the attachment record,
+                // not by navigating to its URL — so it needs no URL guard.
+                if (isTranscriptAttachment(att)) {
+                    return (_jsx(TranscriptTile, { att: att, onOpen: () => setTranscript(att) }, att.id));
+                }
+                // Scheme allowlist: never hand an agent-provided URL with a dangerous
+                // scheme (javascript:/vbscript:/file:/data:text/html/...) to the
+                // browser as an href/src. Guard the RAW url before it is resolved.
+                if (!isSafeAttachmentUrl(att.url)) {
+                    return _jsx(UnsafeAttachmentTile, { att: att }, att.id);
+                }
                 const src = resolveAttachmentUrl(att.url);
                 if (!src)
                     return null;
                 const label = attachmentLabel(att);
                 switch (kind) {
                     case "image": {
-                        const thumbSrc = att.thumbnailUrl
+                        // The thumbnail is a separate URL; only use it if it also passes
+                        // the scheme allowlist, otherwise fall back to the safe full src.
+                        const thumbSrc = att.thumbnailUrl && isSafeAttachmentUrl(att.thumbnailUrl)
                             ? resolveAttachmentUrl(att.thumbnailUrl)
                             : src;
                         return (_jsx(ImageTile, { att: att, src: src, thumbSrc: thumbSrc || src, onExpand: () => setLightbox({
@@ -147,11 +494,31 @@ export function MessageAttachments({ attachments, className, }) {
                             }) }, att.id));
                     }
                     case "audio":
-                        return (_jsxs("div", { className: "max-w-[min(22rem,100%)] rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", children: [att.title?.trim() ? (_jsx("div", { className: "mb-1.5 truncate text-[12px] font-medium text-white/80", children: att.title.trim() })) : null, _jsx("audio", { src: src, controls: true, preload: "metadata", className: "w-full", children: _jsx("track", { kind: "captions" }) })] }, att.id));
+                        return (_jsxs("div", { "data-testid": "audio-attachment", className: "max-w-[min(22rem,100%)] rounded-xl border border-white/12 bg-white/[0.06] px-3 py-2.5", children: [att.title?.trim() ? (_jsx("div", { className: "mb-1.5 truncate text-[12px] font-medium text-white/80", children: att.title.trim() })) : null, _jsx("audio", { src: src, controls: true, preload: "metadata", className: "w-full", "data-testid": "audio-attachment-player", children: _jsx("track", { kind: "captions" }) })] }, att.id));
                     case "video":
-                        return (_jsx("video", { src: src, controls: true, preload: "metadata", className: "max-h-80 max-w-[min(22rem,100%)] rounded-xl border border-white/12", children: _jsx("track", { kind: "captions" }) }, att.id));
-                    default:
+                        return (_jsx("video", { src: src, controls: true, preload: "metadata", 
+                            // Reserve a stable 16:9 box so the row height is fixed before
+                            // the video metadata loads — avoids layout shift on load.
+                            className: "aspect-video max-h-80 w-full max-w-[min(22rem,100%)] rounded-xl border border-white/12 object-contain", children: _jsx("track", { kind: "captions" }) }, att.id));
+                    default: {
+                        // `document` attachments get a richer inline preview when we can
+                        // derive one: PDFs render the native viewer; text/code renders via
+                        // CodeBlock. Genuine `link` attachments and anything we cannot
+                        // preview keep the generic download/open card.
+                        if (kind === "document") {
+                            const previewKind = attachmentPreviewKind(att);
+                            if (previewKind === "pdf") {
+                                return _jsx(PdfTile, { att: att, src: src, t: t }, att.id);
+                            }
+                            if (previewKind === "model3d") {
+                                return _jsx(Model3dTile, { att: att, src: src, t: t }, att.id);
+                            }
+                            if (previewKind === "code") {
+                                return _jsx(CodeTile, { att: att, src: src, t: t }, att.id);
+                            }
+                        }
                         return _jsx(FileTile, { att: att, src: src, kind: kind }, att.id);
+                    }
                 }
-            }), lightbox ? (_jsx(Lightbox, { src: lightbox.src, alt: lightbox.alt, downloadAs: lightbox.downloadAs, onClose: () => setLightbox(null) })) : null] }));
+            }), lightbox ? (_jsx(Lightbox, { src: lightbox.src, alt: lightbox.alt, downloadAs: lightbox.downloadAs, onClose: () => setLightbox(null) })) : null, transcript ? (_jsx(TranscriptViewerOverlay, { attachment: transcript, onClose: () => setTranscript(null) })) : null] }));
 }

package/components/chat/MessageContent.d.ts

@@ -1,9 +1,24 @@
-import type { ConversationMessage } from "../../api/client-types-chat";
-import "./widgets/inline-builtins";
+import type { ConversationMessage } from "../../api/client-types-chat.js";
+import type { UiSpec } from "../../config/ui-spec.js";
+import { type PermissionCardPayload } from "../composites/chat/permission-card.helpers.js";
+import "./widgets/inline-builtins.js";
 interface MessageContentProps {
     message: ConversationMessage;
     analysisMode?: boolean;
 }
+export declare function InlinePluginConfig({ pluginId: rawPluginId, }: {
+    pluginId: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MessageUiSpecBlock({ spec, raw, }: {
+    spec: UiSpec;
+    raw: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SensitiveRequestBlock({ request, }: {
+    request: NonNullable<ConversationMessage["secretRequest"]>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MessagePermissionCard({ payload, }: {
+    payload: PermissionCardPayload;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 export declare function MessageContent({ message, analysisMode, }: MessageContentProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MessageContent.d.ts.map

package/components/chat/MessageContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/MessageContent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AA6BvE,OAAO,2BAA2B,CAAC;AAqCnC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAokCD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,YAAoB,GACrB,EAAE,mBAAmB,2CA4VrB"}
+{"version":3,"file":"MessageContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/MessageContent.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AASnD,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,4CAA4C,CAAC;AAkBpD,OAAO,2BAA2B,CAAC;AAInC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAmFD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EAAE,WAAW,GACtB,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;CAClB,2CAgTA;AAID,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,GAAG,GACJ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb,2CAoGA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,GACR,EAAE;IACD,OAAO,EAAE,WAAW,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC,CAAC;CAC5D,2CAoOA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,GACR,EAAE;IACD,OAAO,EAAE,qBAAqB,CAAC;CAChC,qGA6CA;AAuCD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,YAAoB,GACrB,EAAE,mBAAmB,2CAmTrB"}