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

package/components/chat/MessageAttachments.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download, FileText, LinkIcon, Maximize2, 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 { resolveApiUrl } from "../../utils/asset-url.js";
+const ABSOLUTE_URL = /^(?:https?:|data:|blob:|[a-z][a-z0-9+.-]*:\/\/)/i;
+/**
+ * Resolve an attachment URL for rendering. Absolute URLs (http(s), data:,
+ * blob:, custom schemes) pass through untouched; an app-relative `/api/...`
+ * path (a served `/api/media/<hash>`) is joined to the active API base so it
+ * loads across the dev proxy, prod same-origin, and desktop/native shells.
+ */
+export function resolveAttachmentUrl(url) {
+    const trimmed = url.trim();
+    if (!trimmed)
+        return trimmed;
+    if (ABSOLUTE_URL.test(trimmed))
+        return trimmed;
+    if (trimmed.startsWith("/"))
+        return resolveApiUrl(trimmed);
+    return trimmed;
+}
+const IMAGE_EXT = /\.(?:png|jpe?g|gif|webp|avif|bmp|svg)(?:[?#]|$)/i;
+const VIDEO_EXT = /\.(?:mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i;
+const AUDIO_EXT = /\.(?:mp3|wav|ogg|oga|m4a|aac|flac|opus)(?:[?#]|$)/i;
+const DOC_EXT = /\.(?:pdf|docx?|pptx?|xlsx?|txt|csv|md|json)(?:[?#]|$)/i;
+/**
+ * Resolve the effective media kind. Prefer the explicit `contentType`, then the
+ * MIME type, then fall back to extension / data-URL sniffing so attachments
+ * from connectors that omit `contentType` still render with the right player.
+ */
+function resolveKind(att) {
+    if (att.contentType)
+        return att.contentType;
+    const mime = att.mimeType ?? "";
+    if (mime.startsWith("image/"))
+        return "image";
+    if (mime.startsWith("video/"))
+        return "video";
+    if (mime.startsWith("audio/"))
+        return "audio";
+    if (mime === "application/pdf" || mime.startsWith("text/"))
+        return "document";
+    const u = att.url.toLowerCase();
+    if (IMAGE_EXT.test(u) || u.startsWith("data:image/"))
+        return "image";
+    if (VIDEO_EXT.test(u) || u.startsWith("data:video/"))
+        return "video";
+    if (AUDIO_EXT.test(u) || u.startsWith("data:audio/"))
+        return "audio";
+    if (DOC_EXT.test(u) || u.startsWith("data:application/"))
+        return "document";
+    return "link";
+}
+function attachmentLabel(att) {
+    if (att.title?.trim())
+        return att.title.trim();
+    try {
+        const u = att.url.startsWith("data:")
+            ? ""
+            : new URL(att.url, "http://x").pathname;
+        const base = u.split("/").filter(Boolean).at(-1);
+        if (base)
+            return decodeURIComponent(base);
+    }
+    catch {
+        // fall through
+    }
+    return "attachment";
+}
+function downloadName(att, kind) {
+    const label = attachmentLabel(att);
+    if (label !== "attachment")
+        return label;
+    const ext = kind === "image"
+        ? "png"
+        : kind === "audio"
+            ? "mp3"
+            : kind === "video"
+                ? "mp4"
+                : "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");
+    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 }));
+    }
+    return (_jsx("button", { type: "button", "aria-label": label, title: label, className: cls, onClick: (e) => {
+            e.stopPropagation();
+            onClick?.();
+        }, children: 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" }) }) })] })] }));
+}
+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" }))] }));
+}
+function Lightbox({ src, alt, downloadAs, onClose, }) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [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, 
+                // 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);
+}
+/**
+ * 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`.
+ */
+export function MessageAttachments({ attachments, className, }) {
+    const [lightbox, setLightbox] = 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);
+                const src = resolveAttachmentUrl(att.url);
+                if (!src)
+                    return null;
+                const label = attachmentLabel(att);
+                switch (kind) {
+                    case "image": {
+                        const thumbSrc = att.thumbnailUrl
+                            ? resolveAttachmentUrl(att.thumbnailUrl)
+                            : src;
+                        return (_jsx(ImageTile, { att: att, src: src, thumbSrc: thumbSrc || src, onExpand: () => setLightbox({
+                                src,
+                                alt: att.description?.trim() || label,
+                                downloadAs: downloadName(att, "image"),
+                            }) }, 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));
+                    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(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] }));
+}

package/components/chat/MessageContent.d.ts

@@ -1,42 +1,9 @@
 import type { ConversationMessage } from "../../api/client-types-chat";
-import type { PatchOp, UiSpec } from "../../config/ui-spec";
+import "./widgets/inline-builtins";
 interface MessageContentProps {
     message: ConversationMessage;
     analysisMode?: boolean;
 }
-export declare function normalizeDisplayText(text: string): string;
-/**
- * Quick pre-check: does this line look like a JSON patch object?
- * Handles both compact `{"op":` and spaced `{ "op":` formats.
- */
-export declare function looksLikePatch(trimmed: string): boolean;
-/** Try to parse a single line as an RFC 6902 JSON Patch operation. */
-export declare function tryParsePatch(line: string): PatchOp | null;
-/**
- * Apply a list of RFC 6902 patches to build a UiSpec.
- *
- * Only handles the paths the catalog emits:
- *   /root              → spec.root
- *   /elements/<id>     → spec.elements[id]
- *   /state/<key>       → spec.state[key]
- *   /state             → spec.state (whole object)
- */
-export declare function compilePatches(patches: PatchOp[]): UiSpec | null;
-/**
- * Scan `text` for blocks of consecutive JSONL patch lines and return
- * their character regions plus the compiled UiSpec.
- *
- * A patch block is a run of lines where each non-empty line parses as a
- * valid PatchOp. A single empty line between patch lines is allowed.
- */
-export declare function findPatchRegions(text: string): Array<{
-    start: number;
-    end: number;
-    spec: UiSpec;
-    raw: string;
-}>;
-/** Normalize plugin ID: strip @scope/plugin- prefix so both "discord" and "@elizaos/plugin-discord" resolve. */
-export declare function normalizePluginId(id: string): string;
 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;AAGvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA8C5D,UAAU,mBAAmB;IAC3B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAkCD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAgBzD;AAsBD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAGvD;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAW1D;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM,GAAG,IAAI,CAsDhE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,GACX,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAmElE;AAoID,gHAAgH;AAChH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEpD;AAqlBD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,YAAoB,GACrB,EAAE,mBAAmB,2CA4RrB"}
+{"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"}

package/components/chat/MessageContent.js

@@ -1,15 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@elizaos/ui";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { stripAssistantStageDirections } from "@elizaos/shared";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { client } from "../../api/client.js";
+import { splitLeadingSlashCommand } from "../../chat/slash-menu.js";
+import { useRenderGuard } from "../../hooks/useRenderGuard.js";
+import { isDesktopPlatform, isNative } from "../../platform/index.js";
+import { createMobileSignalsPermissionsRegistry, openMobilePermissionSettings, } from "../../platform/mobile-permissions-client.js";
+import { useChatComposer } from "../../state/ChatComposerContext.hooks.js";
 import { useApp } from "../../state/useApp.js";
-import { stripAssistantStageDirections } from "../../utils/assistant-text.js";
-import { createClientPermissionsRegistry, PermissionCard, parsePermissionRequestFromText, } from "../composites/chat/permission-card.js";
-import { ConfigRenderer, defaultRegistry } from "../config-ui/config-renderer.js";
+import { PermissionCard } from "../composites/chat/permission-card.js";
+import { createClientPermissionsRegistry, parsePermissionRequestFromText, } from "../composites/chat/permission-card.helpers.js";
+import { ConfigRenderer } from "../config-ui/config-renderer.js";
+import { defaultRegistry } from "../config-ui/config-renderer.helpers.js";
 import { UiRenderer } from "../config-ui/ui-renderer.js";
 import { paramsToSchema } from "../pages/plugin-list-utils.js";
-import { findChoiceRegions } from "./message-choice-parser.js";
-import { ChoiceWidget } from "./widgets/ChoiceWidget.js";
+import { Button } from "../ui/button.js";
+import { MessageAttachments } from "./MessageAttachments.js";
+import { ThinkingBlock } from "./ThinkingBlock.js";
+// Side effect: registers the built-in inline widgets (choice/followups/form/task).
+import "./widgets/inline-builtins.js";
+import { getInlineWidget, getInlineWidgets, } from "./widgets/inline-registry.js";
 /** Reject prototype-pollution keys that should never be traversed or rendered. */
 const BLOCKED_IDS = new Set(["__proto__", "constructor", "prototype"]);
 const SAFE_PLUGIN_ID_RE = /^[\w-]+$/;
@@ -34,26 +44,36 @@ function sanitizePatchValue(value) {
 function isSafeNormalizedPluginId(id) {
     return !BLOCKED_IDS.has(id) && SAFE_PLUGIN_ID_RE.test(id);
 }
+/**
+ * Render a plain-text message body. When the message is a user-typed slash
+ * command (e.g. `/imagine a cat`), the leading `/command` token is rendered in
+ * bold so it reads as a command in the transcript — matching the inline
+ * autocomplete the composer shows while typing.
+ */
+function MessageTextBody({ text, boldSlashCommand, }) {
+    const slash = boldSlashCommand ? splitLeadingSlashCommand(text) : null;
+    return (_jsx("div", { className: "whitespace-pre-wrap", children: slash ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-bold text-txt", "data-testid": "slash-command-token", children: slash.command }), slash.rest] })) : (text) }));
+}
 // ── Detection ───────────────────────────────────────────────────────
 const CONFIG_RE = /\[CONFIG:([@\w][\w@./:-]*)\]/g;
 const FENCED_JSON_RE = /```(?:json)?\s*\n([\s\S]*?)```/g;
 const HIDDEN_TAG_BLOCK_RE = /<(think|analysis|reasoning|tool_calls?|tools?)\b[^>]*>[\s\S]*?(?:<\/\1>|$)/gi;
 /**
- * Strip partial/incomplete hidden tags at the end of a streaming text chunk.
+ * Strip trailing partial hidden tags at the end of a streaming text chunk.
  * During streaming, the buffer may end mid-tag (e.g. `"Hello<thi"`,
  * `"Hello</respon"`, or just `"Hello<"`).  These fragments are not
  * user-facing content and must be hidden from both the display and voice
  * pipelines.
  */
 const TRAILING_PARTIAL_TAG_RE = /<\/?[a-zA-Z][^>]*$|<\/?$/s;
-export function normalizeDisplayText(text) {
+function normalizeDisplayText(text) {
     // Bound input length to keep the regex passes linear in adversarial cases.
     const MAX_DISPLAY_LEN = 200_000;
     let normalized = text.length > MAX_DISPLAY_LEN ? text.slice(0, MAX_DISPLAY_LEN) : text;
     // Hide hidden reasoning/tool blocks from chat bubbles.
     normalized = normalized.replace(HIDDEN_TAG_BLOCK_RE, " ");
     // During streaming, a chunk may end mid-tag (e.g. "<thi").
-    // Strip any incomplete opening or closing tag at the very end so the
+    // Strip any unterminated opening or closing tag at the very end so the
     // user never sees hidden-tag fragments while tokens arrive.
     normalized = normalized.replace(TRAILING_PARTIAL_TAG_RE, "");
     normalized = stripAssistantStageDirections(normalized);
@@ -80,13 +100,13 @@ function isUiSpec(obj) {
  * Quick pre-check: does this line look like a JSON patch object?
  * Handles both compact `{"op":` and spaced `{ "op":` formats.
  */
-export function looksLikePatch(trimmed) {
+function looksLikePatch(trimmed) {
     if (!trimmed.startsWith("{"))
         return false;
     return trimmed.includes('"op"') && trimmed.includes('"path"');
 }
 /** Try to parse a single line as an RFC 6902 JSON Patch operation. */
-export function tryParsePatch(line) {
+function tryParsePatch(line) {
     const t = line.trim();
     if (!looksLikePatch(t))
         return null;
@@ -109,7 +129,7 @@ export function tryParsePatch(line) {
  *   /state/<key>       → spec.state[key]
  *   /state             → spec.state (whole object)
  */
-export function compilePatches(patches) {
+function compilePatches(patches) {
     const spec = { elements: {}, state: createSafeRecord() };
     for (const patch of patches) {
         if (patch.op !== "add" && patch.op !== "replace")
@@ -165,7 +185,7 @@ export function compilePatches(patches) {
  * A patch block is a run of lines where each non-empty line parses as a
  * valid PatchOp. A single empty line between patch lines is allowed.
  */
-export function findPatchRegions(text) {
+function findPatchRegions(text) {
     const results = [];
     const lines = text.split("\n");
     let blockStart = -1;
@@ -270,18 +290,21 @@ function parseSegments(text, analysisMode) {
         });
         m = CONFIG_RE.exec(targetText);
     }
-    // 1b. Find [CHOICE:scope id=...] ... [/CHOICE] blocks
-    for (const choice of findChoiceRegions(targetText)) {
-        regions.push({
-            start: choice.start,
-            end: choice.end,
-            segment: {
-                kind: "choice",
-                id: choice.id,
-                scope: choice.scope,
-                options: choice.options,
-            },
-        });
+    // 1b. Registry-driven inline widgets (choice/followups/form/task and any
+    // plugin-registered marker). Each widget owns its parsing semantics; we only
+    // collect the regions and tag them with the widget kind for render dispatch.
+    for (const widget of getInlineWidgets()) {
+        for (const match of widget.parse(targetText)) {
+            regions.push({
+                start: match.start,
+                end: match.end,
+                segment: {
+                    kind: "widget",
+                    widgetKind: widget.kind,
+                    data: match.data,
+                },
+            });
+        }
     }
     // 2. Find fenced JSON that is a UiSpec (Generate Mode / legacy format)
     FENCED_JSON_RE.lastIndex = 0;
@@ -341,7 +364,7 @@ function parseSegments(text, analysisMode) {
 }
 // ── InlinePluginConfig ──────────────────────────────────────────────
 /** Normalize plugin ID: strip @scope/plugin- prefix so both "discord" and "@elizaos/plugin-discord" resolve. */
-export function normalizePluginId(id) {
+function normalizePluginId(id) {
     return id.replace(/^@[^/]+\/plugin-/, "");
 }
 function buildInlinePluginConfigModel(plugin, values) {
@@ -553,7 +576,7 @@ function InlinePluginConfig({ pluginId: rawPluginId }) {
                                     })
                                     : t("common.inactive", {
                                         defaultValue: "Inactive",
-                                    }) })] })] }), schema && hasConfigurableParams ? (_jsx("div", { className: "p-3", children: _jsx(ConfigRenderer, { schema: schema, hints: hints, values: mergedValues, setKeys: setKeys, registry: defaultRegistry, pluginId: plugin.id, onChange: handleChange }) })) : (_jsx("div", { className: "px-3 py-2 text-xs text-muted italic", children: t("messagecontent.NoConfigurablePara") })), _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-wrap", children: [schema && hasConfigurableParams && (_jsx(Button, { variant: "default", size: "sm", className: "px-4 py-1.5 h-7 text-xs shadow-sm bg-accent text-accent-fg hover:opacity-90 disabled:opacity-40", onClick: handleSave, disabled: saving || enabling || Object.keys(values).length === 0, children: saving
+                                    }) })] })] }), schema && hasConfigurableParams ? (_jsx("div", { className: "p-3", children: _jsx(ConfigRenderer, { schema: schema, hints: hints, values: mergedValues, setKeys: setKeys, registry: defaultRegistry, pluginId: plugin.id, onChange: handleChange }) })) : (_jsx("div", { className: "px-3 py-2 text-xs text-muted italic", children: t("messagecontent.NoConfigurablePara") })), _jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-wrap", children: [schema && hasConfigurableParams && (_jsx(Button, { variant: "default", size: "sm", className: "px-4 py-1.5 h-7 text-xs bg-accent text-accent-fg hover:opacity-90 disabled:opacity-40", onClick: handleSave, disabled: saving || enabling || Object.keys(values).length === 0, children: saving
                             ? t("common.saving", {
                                 defaultValue: "Saving...",
                             })
@@ -644,11 +667,13 @@ function SensitiveRequestBlock({ request, }) {
     const [status, setStatus] = useState(request.status);
     const [values, setValues] = useState({});
     const [saving, setSaving] = useState(false);
+    const [authorizing, setAuthorizing] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
         setStatus(request.status);
         setValues({});
         setSaving(false);
+        setAuthorizing(false);
         setError(null);
     }, [request]);
     const fields = request.form?.fields ?? [];
@@ -656,6 +681,10 @@ function SensitiveRequestBlock({ request, }) {
         request.form?.kind === "secret" &&
         request.delivery?.canCollectValueInCurrentChannel === true &&
         fields.length > 0;
+    const canStartOAuth = status === "pending" &&
+        request.form?.kind === "oauth" &&
+        typeof request.form.authorizationUrl === "string" &&
+        request.form.authorizationUrl.length > 0;
     const canSubmit = fields.every((field) => {
         if (!field.required)
             return true;
@@ -696,12 +725,58 @@ function SensitiveRequestBlock({ request, }) {
                                             [field.name]: nextValue,
                                         }));
                                     }, required: field.required })] }, field.name));
-                    }), _jsx("div", { className: "text-xs text-muted", children: "The value will not be sent as a chat message." }), _jsx(Button, { type: "submit", size: "sm", disabled: saving || !canSubmit, children: saving ? "Saving..." : (request.form?.submitLabel ?? "Save") })] })), error && _jsx("div", { className: "text-xs text-danger", children: error })] }));
+                    }), _jsx(Button, { type: "submit", size: "sm", disabled: saving || !canSubmit, "data-testid": "sensitive-request-submit", children: saving ? "Saving..." : (request.form?.submitLabel ?? "Save") })] })), canStartOAuth && request.form?.kind === "oauth" && (_jsx(OAuthRequestPanel, { form: request.form, authorizing: authorizing, onStart: () => {
+                    const url = request.form?.authorizationUrl;
+                    if (!url)
+                        return;
+                    try {
+                        // SECURITY: we never embed the authorizationUrl in chat text.
+                        // It is only opened in a popup. We deliberately do NOT pass
+                        // `noopener` in the features string: per the HTML spec, when
+                        // `noopener` is set `window.open` always returns null, so we
+                        // would lose our popup-blocked signal and have to fall back to
+                        // a guess-and-check heuristic. The consent page is to a
+                        // trusted provider on a separate origin; `noreferrer` is kept,
+                        // and we set `popup.opener = null` ourselves immediately after
+                        // open as a belt-and-suspenders measure. If `window.open`
+                        // returns null after this, that genuinely is a blocked popup.
+                        if (typeof window === "undefined")
+                            return;
+                        const popup = window.open(url, "eliza-oauth", "width=520,height=720,noreferrer");
+                        if (!popup) {
+                            setError("Pop-up blocked. Allow pop-ups for this site to continue.");
+                            return;
+                        }
+                        try {
+                            popup.opener = null;
+                        }
+                        catch {
+                            // Some browsers throw when reassigning opener cross-origin;
+                            // `noreferrer` already mitigates this. Swallow.
+                        }
+                        setAuthorizing(true);
+                        setError(null);
+                    }
+                    catch (caught) {
+                        setError(caught instanceof Error
+                            ? caught.message
+                            : "Could not start authorization.");
+                    }
+                } })), error && _jsx("div", { className: "text-xs text-danger", children: error })] }));
+}
+function OAuthRequestPanel({ form, authorizing, onStart, }) {
+    const provider = form.provider ?? "provider";
+    const label = form.submitLabel ?? `Connect ${provider}`;
+    return (_jsxs("div", { "data-testid": "sensitive-request-oauth", className: "space-y-2", children: [form.scopes && form.scopes.length > 0 && (_jsxs("div", { className: "text-xs text-muted", children: ["Scopes: ", form.scopes.join(", ")] })), _jsx(Button, { type: "button", size: "sm", onClick: onStart, disabled: authorizing, "data-testid": "sensitive-request-oauth-start", children: authorizing ? "Authorizing..." : label }), _jsx("div", { className: "text-xs text-muted", children: "Authorization happens in a separate window. The token is stored securely and is never shown in chat." })] }));
 }
 // ── Main component ──────────────────────────────────────────────────
 export function MessageContent({ message, analysisMode = false, }) {
+    useRenderGuard(`MessageContent:${message.id ?? "unknown"}`);
     const app = useApp();
     const { sendActionMessage } = app;
+    // Composer prefill for followup `prompt` chips. Outside the chat provider,
+    // `useChatComposer` returns an inert setter, so this is safe everywhere.
+    const { setChatInput } = useChatComposer();
     const [localDownloadState, setLocalDownloadState] = useState("idle");
     const [localDownloadError, setLocalDownloadError] = useState(null);
     // Parse segments — memoize to avoid re-parsing on every render
@@ -717,7 +792,38 @@ export function MessageContent({ message, analysisMode = false, }) {
     const handleChoice = useCallback((value) => {
         void sendActionMessage(value);
     }, [sendActionMessage]);
-    const permissionRegistry = useMemo(() => createClientPermissionsRegistry(client), []);
+    // Followup `navigate` chip: deliver the passive view-switch SUGGESTION as the
+    // same `eliza:navigate:view` event the VIEWS action uses. A `/`-prefixed
+    // payload is a viewPath; anything else is treated as a viewId.
+    const handleNavigate = useCallback((payload) => {
+        if (typeof window === "undefined")
+            return;
+        const detail = payload.startsWith("/")
+            ? { viewPath: payload }
+            : { viewId: payload };
+        window.dispatchEvent(new CustomEvent("eliza:navigate:view", { detail }));
+    }, []);
+    // Followup `prompt` chip: prefill the composer (falls back to send inside the
+    // widget when no composer is mounted).
+    const handlePrompt = useCallback((payload) => {
+        setChatInput(payload);
+    }, [setChatInput]);
+    // Generic in-chat form submit: send the structured result back as a message
+    // through the existing action-message pipeline.
+    const handleFormSubmit = useCallback((formId, values) => {
+        void sendActionMessage(`[form:submit ${formId}] ${JSON.stringify(values)}`);
+    }, [sendActionMessage]);
+    // Handlers handed to every inline widget at render. Self-contained widgets
+    // (the task card) ignore them; interactive ones drive the chat surface.
+    const inlineWidgetCtx = useMemo(() => ({
+        sendAction: handleChoice,
+        navigate: handleNavigate,
+        prefillComposer: handlePrompt,
+        submitForm: handleFormSubmit,
+    }), [handleChoice, handleNavigate, handlePrompt, handleFormSubmit]);
+    const permissionRegistry = useMemo(() => isNative && !isDesktopPlatform()
+        ? createMobileSignalsPermissionsRegistry(undefined, client)
+        : createClientPermissionsRegistry(client), []);
     const handlePermissionFallback = useCallback((feature, permission) => {
         void sendActionMessage(`__permission_card__:use_fallback feature=${feature} permission=${permission}`);
     }, [sendActionMessage]);
@@ -753,7 +859,7 @@ export function MessageContent({ message, analysisMode = false, }) {
         const status = message.localInference.status;
         const downloading = status === "downloading" || status === "loading";
         const canStartDownload = Boolean(message.localInference.modelId);
-        return (_jsxs("div", { className: "rounded-md border border-warn/30 bg-warn/5 p-3 text-sm", children: [_jsx("div", { className: "mb-1 font-medium", children: downloading
+        return (_jsxs("div", { className: "rounded-sm border border-warn/30 bg-warn/5 p-3 text-sm", children: [_jsx("div", { className: "mb-1 font-medium", children: downloading
                         ? "Local model download in progress"
                         : "Local model required" }), _jsx("div", { className: "mb-2 whitespace-pre-wrap text-muted", children: message.text }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", size: "sm", onClick: handleDownloadDefaultLocalModel, disabled: downloading || localDownloadState === "busy", children: downloading
                                 ? "Downloading"
@@ -772,13 +878,13 @@ export function MessageContent({ message, analysisMode = false, }) {
     // separate, clearer in-product affordances for those (Cloud billing
     // banner, retry).
     if (message.failureKind === "no_provider") {
-        return (_jsxs("div", { className: "border border-warn/30 bg-warn/5 rounded-md p-3 text-sm", children: [_jsx("div", { className: "font-medium mb-1", children: "Connect a provider to chat" }), _jsx("div", { className: "text-muted whitespace-pre-wrap mb-2", children: message.text }), _jsx(Button, { type: "button", size: "sm", onClick: handleOpenSettings, children: "Open Settings" })] }));
+        return (_jsxs("div", { className: "border border-warn/30 bg-warn/5 rounded-sm p-3 text-sm", children: [_jsx("div", { className: "font-medium mb-1", children: "Connect a provider to chat" }), _jsx("div", { className: "text-muted whitespace-pre-wrap mb-2", children: message.text }), _jsx(Button, { type: "button", size: "sm", onClick: handleOpenSettings, children: "Open Settings" })] }));
     }
     // Fast path: single plain-text segment (most messages)
     if (segments.length === 1 && segments[0].kind === "text") {
-        return _jsx("div", { className: "whitespace-pre-wrap", children: segments[0].text });
+        return (_jsx(MessageTextBody, { text: segments[0].text, boldSlashCommand: message.role === "user" }));
     }
-    return (_jsxs("div", { children: [(() => {
+    return (_jsxs("div", { children: [message.role === "assistant" && message.reasoning?.trim() ? (_jsx(ThinkingBlock, { reasoning: message.reasoning })) : null, (() => {
                 const keyCounts = new Map();
                 const nextKey = (base) => {
                     const nextCount = (keyCounts.get(base) ?? 0) + 1;
@@ -790,8 +896,9 @@ export function MessageContent({ message, analysisMode = false, }) {
                         ? `text:${seg.text.slice(0, 80)}`
                         : seg.kind === "config"
                             ? `config:${seg.pluginId}`
-                            : seg.kind === "choice"
-                                ? `choice:${seg.id}`
+                            : seg.kind === "widget"
+                                ? (getInlineWidget(seg.widgetKind)?.keyFor?.(seg.data) ??
+                                    `widget:${seg.widgetKind}`)
                                 : seg.kind === "permission"
                                     ? `permission:${seg.payload.feature}`
                                     : seg.kind === "analysis-xml"
@@ -800,9 +907,9 @@ export function MessageContent({ message, analysisMode = false, }) {
                     const segmentKey = nextKey(baseKey);
                     switch (seg.kind) {
                         case "text":
-                            return (_jsx("div", { className: "whitespace-pre-wrap", children: seg.text }, segmentKey));
+                            return (_jsx(MessageTextBody, { text: seg.text, boldSlashCommand: message.role === "user" }, segmentKey));
                         case "analysis-xml":
-                            return (_jsxs("div", { className: "my-2 border border-accent/20 rounded bg-accent/5 overflow-hidden", children: [_jsxs("div", { className: "bg-accent/10 px-3 py-1 text-xs font-mono font-bold text-accent uppercase tracking-wider", children: ["<", seg.tag, ">"] }), _jsx("pre", { className: "px-3 py-2 text-xs font-mono whitespace-pre-wrap break-words text-muted m-0 overflow-x-auto", children: seg.content.trim() })] }, segmentKey));
+                            return (_jsxs("div", { className: "my-2 border border-accent/20 rounded-sm bg-accent/5 overflow-hidden", children: [_jsxs("div", { className: "bg-accent/10 px-3 py-1 text-xs font-mono font-bold text-accent uppercase tracking-wider", children: ["<", seg.tag, ">"] }), _jsx("pre", { className: "px-3 py-2 text-xs font-mono whitespace-pre-wrap break-words text-muted m-0 overflow-x-auto", children: seg.content.trim() })] }, segmentKey));
                         case "config":
                             if (!isSafeNormalizedPluginId(normalizePluginId(seg.pluginId))) {
                                 return null;
@@ -810,17 +917,27 @@ export function MessageContent({ message, analysisMode = false, }) {
                             return (_jsx(InlinePluginConfig, { pluginId: seg.pluginId }, segmentKey));
                         case "ui-spec":
                             return (_jsx(UiSpecBlock, { spec: seg.spec, raw: seg.raw }, segmentKey));
-                        case "choice":
-                            return (_jsx(ChoiceWidget, { id: seg.id, scope: seg.scope, options: seg.options, onChoose: handleChoice }, segmentKey));
+                        case "widget": {
+                            const widget = getInlineWidget(seg.widgetKind);
+                            return widget
+                                ? widget.render(seg.data, inlineWidgetCtx, segmentKey)
+                                : null;
+                        }
                         case "permission":
-                            return (_jsx(PermissionCard, { permission: seg.payload.permission, reason: seg.payload.reason, feature: seg.payload.feature, fallbackOffered: seg.payload.fallbackOffered, fallbackLabel: seg.payload.fallbackLabel, registry: permissionRegistry, onOpenSettings: (permission) => client.openPermissionSettings(permission), onFallback: ({ feature, permission }) => handlePermissionFallback(feature, permission), onGranted: () => handlePermissionGranted(seg.payload.feature, seg.payload.permission) }, segmentKey));
+                            return (_jsx(PermissionCard, { permission: seg.payload.permission, reason: seg.payload.reason, feature: seg.payload.feature, fallbackOffered: seg.payload.fallbackOffered, fallbackLabel: seg.payload.fallbackLabel, registry: permissionRegistry, onOpenSettings: async (permission) => {
+                                    if (isNative && !isDesktopPlatform()) {
+                                        await openMobilePermissionSettings(permission);
+                                        return;
+                                    }
+                                    await client.openPermissionSettings(permission);
+                                }, onFallback: ({ feature, permission }) => handlePermissionFallback(feature, permission), onGranted: () => handlePermissionGranted(seg.payload.feature, seg.payload.permission) }, segmentKey));
                         default:
                             return null;
                     }
                 });
-            })(), analysisMode && message.actionName && (_jsxs("div", { className: "my-2 border border-purple-500/20 rounded bg-purple-500/5 overflow-hidden", children: [_jsx("div", { className: "bg-purple-500/10 px-3 py-1 text-xs font-mono font-bold text-purple-500 uppercase tracking-wider", children: "ACTION TAKEN" }), _jsx("div", { className: "px-3 py-2 text-xs font-mono text-muted space-y-1", children: message.actionName })] })), analysisMode &&
+            })(), message.attachments?.length ? (_jsx(MessageAttachments, { attachments: message.attachments })) : null, analysisMode && message.actionName && (_jsxs("div", { className: "my-2 border border-purple-500/20 rounded-sm bg-purple-500/5 overflow-hidden", children: [_jsx("div", { className: "bg-purple-500/10 px-3 py-1 text-xs font-mono font-bold text-purple-500 uppercase tracking-wider", children: "ACTION TAKEN" }), _jsx("div", { className: "px-3 py-2 text-xs font-mono text-muted space-y-1", children: message.actionName })] })), analysisMode &&
                 message.actionCallbackHistory &&
-                message.actionCallbackHistory.length > 0 && (_jsxs("div", { className: "my-2 border border-blue-500/20 rounded bg-blue-500/5 overflow-hidden", children: [_jsx("div", { className: "bg-blue-500/10 px-3 py-1 text-xs font-mono font-bold text-blue-500 uppercase tracking-wider", children: "ACTION CALLBACK HISTORY" }), _jsx("div", { className: "px-3 py-2 text-xs font-mono text-muted space-y-1", children: (() => {
+                message.actionCallbackHistory.length > 0 && (_jsxs("div", { className: "my-2 border border-blue-500/20 rounded-sm bg-blue-500/5 overflow-hidden", children: [_jsx("div", { className: "bg-blue-500/10 px-3 py-1 text-xs font-mono font-bold text-blue-500 uppercase tracking-wider", children: "ACTION CALLBACK HISTORY" }), _jsx("div", { className: "px-3 py-2 text-xs font-mono text-muted space-y-1", children: (() => {
                             const occurrence = new Map();
                             return message.actionCallbackHistory.map((log) => {
                                 const n = occurrence.get(log) ?? 0;

package/components/chat/SaveCommandModal.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, } from "@elizaos/ui";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useApp } from "../../state/index.js";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
+import { Input } from "../ui/input.js";
 const NAME_PATTERN = /^[a-zA-Z][a-zA-Z0-9-]*$/;
 export function SaveCommandModal({ open, text, onSave, onClose, }) {
     const { t } = useApp();
@@ -44,14 +46,14 @@ export function SaveCommandModal({ open, text, onSave, onClose, }) {
     return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => {
             if (!isOpen)
                 onClose();
-        }, children: _jsxs(DialogContent, { className: "w-full max-w-md p-0 overflow-hidden rounded-xl", children: [_jsxs(DialogHeader, { className: "px-5 py-3 shrink-0", children: [_jsx(DialogTitle, { className: "font-bold text-sm", children: t("savecommandmodal.SaveAsCommand") }), _jsx(DialogDescription, { className: "sr-only", children: t("savecommandmodal.CommandName") })] }), _jsxs("div", { className: "px-5 py-4 flex flex-col gap-3", children: [_jsx("label", { id: inputLabelId, htmlFor: inputId, className: "text-xs text-muted", children: t("savecommandmodal.CommandName") }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm text-muted", children: "/" }), _jsx(Input, { id: inputId, ref: inputRef, type: "text", value: name, onChange: (e) => {
+        }, children: _jsxs(DialogContent, { className: "w-full max-w-md p-0 overflow-hidden rounded-sm", children: [_jsxs(DialogHeader, { className: "px-5 py-3 shrink-0", children: [_jsx(DialogTitle, { className: "font-bold text-sm", children: t("savecommandmodal.SaveAsCommand") }), _jsx(DialogDescription, { className: "sr-only", children: t("savecommandmodal.CommandName") })] }), _jsxs("div", { className: "px-5 py-4 flex flex-col gap-3", children: [_jsx("label", { id: inputLabelId, htmlFor: inputId, className: "text-xs text-muted", children: t("savecommandmodal.CommandName") }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-sm text-muted", children: "/" }), _jsx(Input, { id: inputId, ref: inputRef, type: "text", value: name, onChange: (e) => {
                                         setName(e.target.value);
                                         setError("");
-                                    }, onKeyDown: handleKeyDown, placeholder: t("savecommandmodal.myCommand"), "aria-labelledby": inputLabelId, "aria-describedby": error ? inputErrorId : undefined, "aria-invalid": error ? "true" : undefined, className: "flex-1 h-8 text-sm shadow-sm", style: {
+                                    }, onKeyDown: handleKeyDown, placeholder: t("savecommandmodal.myCommand"), "aria-labelledby": inputLabelId, "aria-describedby": error ? inputErrorId : undefined, "aria-invalid": error ? "true" : undefined, className: "flex-1 h-8 text-sm ", style: {
                                         background: "var(--bg-hover)",
                                         border: "1px solid var(--border)",
                                         color: "var(--text)",
-                                    } })] }), error && (_jsx("p", { id: inputErrorId, className: "text-xs", style: { color: "#ef4444" }, children: error })), _jsx("span", { className: "text-xs mt-1 text-muted", children: t("common.preview") }), _jsx("pre", { className: "text-xs px-3 py-2 whitespace-pre-wrap break-words max-h-24 overflow-y-auto rounded-lg", style: {
+                                    } })] }), error && (_jsx("p", { id: inputErrorId, className: "text-xs", style: { color: "#ef4444" }, children: error })), _jsx("span", { className: "text-xs mt-1 text-muted", children: t("common.preview") }), _jsx("pre", { className: "text-xs px-3 py-2 whitespace-pre-wrap break-words max-h-24 overflow-y-auto rounded-sm", style: {
                                 color: "var(--muted)",
                                 background: "var(--bg-hover)",
                                 border: "1px solid var(--border)",