@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/MessageContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContent.d.ts","sourceRoot":"","sources":["../../src/components/MessageContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAc,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAIL,KAAK,OAAO,EAEZ,KAAK,MAAM,EACZ,MAAM,0BAA0B,CAAC;AAqClC,UAAU,mBAAmB;IAC3B,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAyFD;;;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;AA2FD,gHAAgH;AAChH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEpD;AA0VD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CA4D9D"}

package/components/MessageContent.js

@@ -0,0 +1,553 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+import { paramsToSchema } from "@elizaos/app-core/components";
+import { ConfigRenderer, defaultRegistry, UiRenderer, } from "@elizaos/app-core/config";
+import { useApp } from "@elizaos/app-core/state";
+import { stripAssistantStageDirections } from "@elizaos/app-core/utils";
+import { Button } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/** 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-]+$/;
+function createSafeRecord() {
+    return Object.create(null);
+}
+function sanitizePatchValue(value) {
+    if (Array.isArray(value)) {
+        return value.map((item) => sanitizePatchValue(item));
+    }
+    if (!value || typeof value !== "object") {
+        return value;
+    }
+    const safe = createSafeRecord();
+    for (const [key, nestedValue] of Object.entries(value)) {
+        if (BLOCKED_IDS.has(key))
+            continue;
+        safe[key] = sanitizePatchValue(nestedValue);
+    }
+    return safe;
+}
+function isSafeNormalizedPluginId(id) {
+    return !BLOCKED_IDS.has(id) && SAFE_PLUGIN_ID_RE.test(id);
+}
+// ── Detection ───────────────────────────────────────────────────────
+const CONFIG_RE = /\[CONFIG:([@\w][\w@./:-]*)\]/g;
+const FENCED_JSON_RE = /```(?:json)?\s*\n([\s\S]*?)```/g;
+/**
+ * Strip ElizaOS action XML blocks (`<actions>...</actions>` and
+ * `<params>...</params>`) from displayed text. These are framework
+ * metadata, not user-facing content.
+ */
+const ACTION_XML_RE = /\s*<actions>[\s\S]*?<\/actions>\s*|\s*<params>[\s\S]*?<\/params>\s*/g;
+const HIDDEN_XML_BLOCK_RE = /<(think|analysis|reasoning|scratchpad|tool_calls?|tools?)\b[^>]*>[\s\S]*?(?:<\/\1>|$)/gi;
+function extractXmlTag(raw, tag, opts) {
+    const open = `<${tag}>`;
+    const close = `</${tag}>`;
+    const start = raw.indexOf(open);
+    if (start < 0)
+        return null;
+    const contentStart = start + open.length;
+    const end = raw.indexOf(close, contentStart);
+    if (end < 0) {
+        return opts?.allowPartial ? raw.slice(contentStart) : null;
+    }
+    return raw.slice(contentStart, end);
+}
+function normalizeDisplayText(text) {
+    let normalized = text;
+    // Hide framework-selected actions and tool params from chat bubbles.
+    normalized = normalized.replace(ACTION_XML_RE, "");
+    normalized = normalized.replace(HIDDEN_XML_BLOCK_RE, " ");
+    // Some prompts emit structured XML wrappers like:
+    // <response><thought>...</thought><text>...</text></response>
+    // Show only the user-facing <text>, even while it is still streaming.
+    if (normalized.includes("<response>")) {
+        const wrappedText = extractXmlTag(normalized, "text", {
+            allowPartial: true,
+        });
+        if (wrappedText !== null) {
+            normalized = wrappedText;
+        }
+        else {
+            return "";
+        }
+    }
+    // Drop any leftover wrapper tags without disturbing plain text.
+    normalized = normalized.replace(/<\/?(response|text|thought)\b[^>]*>/gi, "");
+    normalized = stripAssistantStageDirections(normalized);
+    return normalized.trim();
+}
+function tryParse(s) {
+    try {
+        return JSON.parse(s);
+    }
+    catch {
+        return null;
+    }
+}
+function isUiSpec(obj) {
+    if (!obj || typeof obj !== "object")
+        return false;
+    const c = obj;
+    return (typeof c.root === "string" &&
+        typeof c.elements === "object" &&
+        c.elements !== null);
+}
+// ── JSONL patch support (Chat Mode) ─────────────────────────────────
+/**
+ * Quick pre-check: does this line look like a JSON patch object?
+ * Handles both compact `{"op":` and spaced `{ "op":` formats.
+ */
+export 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) {
+    const t = line.trim();
+    if (!looksLikePatch(t))
+        return null;
+    try {
+        const obj = JSON.parse(t);
+        if (typeof obj.op === "string" && typeof obj.path === "string")
+            return obj;
+        return null;
+    }
+    catch {
+        return 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 function compilePatches(patches) {
+    const spec = { elements: {}, state: createSafeRecord() };
+    for (const patch of patches) {
+        if (patch.op !== "add" && patch.op !== "replace")
+            continue;
+        const { path, value } = patch;
+        const parts = path.split("/").filter(Boolean);
+        if (parts.length === 0)
+            continue;
+        if (parts[0] === "root" && parts.length === 1) {
+            spec.root = value;
+        }
+        else if (parts[0] === "elements" && parts.length === 2) {
+            spec.elements[parts[1]] = value;
+        }
+        else if (parts[0] === "state" && parts.length === 1) {
+            const nextState = sanitizePatchValue(value);
+            spec.state =
+                nextState && typeof nextState === "object" && !Array.isArray(nextState)
+                    ? nextState
+                    : createSafeRecord();
+        }
+        else if (parts[0] === "state" && parts.length >= 2) {
+            // Nested state path: /state/key or /state/key/subkey
+            let cursor = spec.state;
+            let blockedPath = false;
+            for (let i = 1; i < parts.length - 1; i++) {
+                const k = parts[i];
+                if (BLOCKED_IDS.has(k)) {
+                    blockedPath = true;
+                    break;
+                }
+                if (!cursor[k] ||
+                    typeof cursor[k] !== "object" ||
+                    Array.isArray(cursor[k])) {
+                    cursor[k] = createSafeRecord();
+                }
+                cursor = cursor[k];
+            }
+            if (blockedPath)
+                continue;
+            const leaf = parts[parts.length - 1];
+            if (BLOCKED_IDS.has(leaf))
+                continue;
+            cursor[leaf] = sanitizePatchValue(value);
+        }
+    }
+    return isUiSpec(spec) ? spec : 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 function findPatchRegions(text) {
+    const results = [];
+    const lines = text.split("\n");
+    let blockStart = -1;
+    let blockEnd = 0;
+    let patches = [];
+    let rawLines = [];
+    let pos = 0;
+    const flush = () => {
+        if (patches.length >= 1) {
+            const spec = compilePatches(patches);
+            if (spec) {
+                results.push({
+                    start: blockStart,
+                    end: blockEnd,
+                    spec,
+                    raw: rawLines.join("\n"),
+                });
+            }
+        }
+        blockStart = -1;
+        patches = [];
+        rawLines = [];
+    };
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // +1 for the newline that split() consumed (except the very last line)
+        const lineLen = line.length + (i < lines.length - 1 ? 1 : 0);
+        const trimmed = line.trim();
+        if (looksLikePatch(trimmed)) {
+            const patch = tryParsePatch(trimmed);
+            if (patch) {
+                if (blockStart === -1)
+                    blockStart = pos;
+                patches.push(patch);
+                rawLines.push(line);
+                blockEnd = pos + lineLen;
+                pos += lineLen;
+                continue;
+            }
+        }
+        // Empty line: peek ahead to see if the next non-empty line is a patch
+        if (trimmed.length === 0 && blockStart !== -1) {
+            const nextPatch = lines.slice(i + 1).find((l) => l.trim().length > 0);
+            if (nextPatch && tryParsePatch(nextPatch) !== null) {
+                // Allow the gap and keep going
+                pos += lineLen;
+                continue;
+            }
+        }
+        // Non-patch content — flush any open block
+        if (blockStart !== -1)
+            flush();
+        pos += lineLen;
+    }
+    if (blockStart !== -1)
+        flush();
+    return results;
+}
+/**
+ * Parse message text for [CONFIG:id] markers, fenced UiSpec JSON, and
+ * inline JSONL patch blocks (Chat Mode).
+ * Returns an array of segments for rendering.
+ */
+function parseSegments(text) {
+    const cleaned = normalizeDisplayText(text);
+    if (!cleaned)
+        return [{ kind: "text", text: "" }];
+    // Build a unified list of match regions sorted by position
+    const regions = [];
+    // 1. Find [CONFIG:pluginId] markers
+    CONFIG_RE.lastIndex = 0;
+    let m = CONFIG_RE.exec(cleaned);
+    while (m !== null) {
+        regions.push({
+            start: m.index,
+            end: m.index + m[0].length,
+            segment: { kind: "config", pluginId: m[1] },
+        });
+        m = CONFIG_RE.exec(cleaned);
+    }
+    // 2. Find fenced JSON that is a UiSpec (Generate Mode / legacy format)
+    FENCED_JSON_RE.lastIndex = 0;
+    m = FENCED_JSON_RE.exec(cleaned);
+    while (m !== null) {
+        const json = m[1].trim();
+        const parsed = tryParse(json);
+        if (parsed && isUiSpec(parsed)) {
+            regions.push({
+                start: m.index,
+                end: m.index + m[0].length,
+                segment: { kind: "ui-spec", spec: parsed, raw: json },
+            });
+        }
+        m = FENCED_JSON_RE.exec(cleaned);
+    }
+    // 3. Find inline JSONL patch blocks (Chat Mode)
+    for (const patch of findPatchRegions(cleaned)) {
+        // Skip if this region overlaps with an already-found fenced block
+        const overlaps = regions.some((r) => patch.start < r.end && patch.end > r.start);
+        if (!overlaps) {
+            regions.push({
+                start: patch.start,
+                end: patch.end,
+                segment: { kind: "ui-spec", spec: patch.spec, raw: patch.raw },
+            });
+        }
+    }
+    // No special content found — return plain text
+    if (regions.length === 0) {
+        return [{ kind: "text", text: cleaned }];
+    }
+    // Sort by start position, then interleave with text segments
+    regions.sort((a, b) => a.start - b.start);
+    const segments = [];
+    let cursor = 0;
+    for (const r of regions) {
+        // Skip overlapping regions
+        if (r.start < cursor)
+            continue;
+        // Push preceding text
+        if (r.start > cursor) {
+            const t = cleaned.slice(cursor, r.start);
+            if (t.trim())
+                segments.push({ kind: "text", text: t });
+        }
+        segments.push(r.segment);
+        cursor = r.end;
+    }
+    // Trailing text
+    if (cursor < cleaned.length) {
+        const t = cleaned.slice(cursor);
+        if (t.trim())
+            segments.push({ kind: "text", text: t });
+    }
+    return segments;
+}
+// ── InlinePluginConfig ──────────────────────────────────────────────
+/** Normalize plugin ID: strip @scope/plugin- prefix so both "discord" and "@elizaos/plugin-discord" resolve. */
+export function normalizePluginId(id) {
+    return id.replace(/^@[^/]+\/plugin-/, "");
+}
+function buildInlinePluginConfigModel(plugin, values) {
+    const pluginParams = plugin?.parameters ?? [];
+    const hasConfigurableParams = pluginParams.length > 0;
+    if (!hasConfigurableParams || !plugin?.id) {
+        return {
+            hasConfigurableParams: false,
+            hints: {},
+            mergedValues: values,
+            schema: null,
+            setKeys: new Set(),
+        };
+    }
+    const auto = paramsToSchema(pluginParams, plugin.id);
+    if (plugin.configUiHints) {
+        for (const [key, serverHint] of Object.entries(plugin.configUiHints)) {
+            auto.hints[key] = { ...auto.hints[key], ...serverHint };
+        }
+    }
+    const initialValues = {};
+    const setKeys = new Set();
+    for (const param of pluginParams) {
+        if (param.isSet) {
+            setKeys.add(param.key);
+        }
+        if (param.isSet && !param.sensitive && param.currentValue != null) {
+            initialValues[param.key] = param.currentValue;
+        }
+    }
+    for (const [key, value] of Object.entries(values)) {
+        if (value != null && value !== "") {
+            setKeys.add(key);
+        }
+    }
+    return {
+        hasConfigurableParams: true,
+        hints: auto.hints,
+        mergedValues: { ...initialValues, ...values },
+        schema: auto.schema,
+        setKeys,
+    };
+}
+function InlinePluginConfig({ pluginId: rawPluginId }) {
+    const pluginId = normalizePluginId(rawPluginId);
+    const [plugin, setPlugin] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [values, setValues] = useState({});
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [enabling, setEnabling] = useState(false);
+    const [error, setError] = useState(null);
+    const [dismissed, setDismissed] = useState(false);
+    const mountedRef = useRef(true);
+    const refreshTimerRef = useRef(null);
+    const { setActionNotice, loadPlugins, t } = useApp();
+    // Track mount state — reset to true on each mount (needed for StrictMode
+    // which unmounts/remounts and would leave the ref false otherwise).
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            if (refreshTimerRef.current)
+                clearTimeout(refreshTimerRef.current);
+        };
+    }, []);
+    // Self-contained: fetch plugin data directly from API
+    const fetchPlugin = useCallback(async () => {
+        try {
+            const { plugins } = await client.getPlugins();
+            if (!mountedRef.current)
+                return;
+            const found = plugins.find((p) => p.id === pluginId);
+            setPlugin(found ?? null);
+        }
+        catch {
+            if (mountedRef.current)
+                setError("Failed to load plugin info.");
+        }
+        finally {
+            if (mountedRef.current)
+                setLoading(false);
+        }
+    }, [pluginId]);
+    useEffect(() => {
+        void fetchPlugin();
+    }, [fetchPlugin]);
+    const { hasConfigurableParams, hints, mergedValues, schema, setKeys } = useMemo(() => buildInlinePluginConfigModel(plugin, values), [plugin, values]);
+    const handleChange = useCallback((key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+        setSaved(false);
+        setError(null);
+    }, []);
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            const patch = {};
+            for (const [k, v] of Object.entries(values)) {
+                if (v != null && v !== "")
+                    patch[k] = String(v);
+            }
+            await client.updatePlugin(pluginId, { config: patch });
+            if (mountedRef.current)
+                setSaved(true);
+            await fetchPlugin();
+        }
+        catch (e) {
+            if (mountedRef.current)
+                setError(e instanceof Error ? e.message : "Failed to save.");
+        }
+        finally {
+            if (mountedRef.current)
+                setSaving(false);
+        }
+    }, [pluginId, values, fetchPlugin]);
+    const handleToggle = useCallback(async (enable) => {
+        setEnabling(true);
+        setError(null);
+        try {
+            // Save pending config first, then toggle — same as the Plugins page
+            if (enable) {
+                const patch = {};
+                for (const [k, v] of Object.entries(values)) {
+                    if (v != null && v !== "")
+                        patch[k] = String(v);
+                }
+                if (Object.keys(patch).length > 0) {
+                    await client.updatePlugin(pluginId, { config: patch });
+                }
+            }
+            // Exact same call as the ON button in PluginsView
+            await client.updatePlugin(pluginId, { enabled: enable });
+            // Refresh shared plugin state so Plugins page shows updated status
+            await loadPlugins();
+            if (enable && mountedRef.current) {
+                const tabLabel = plugin?.category === "feature"
+                    ? "Plugins > Features"
+                    : plugin?.category === "connector"
+                        ? "Plugins > Connectors"
+                        : "Plugins > System";
+                setActionNotice(`${plugin?.name ?? pluginId} enabled! Find it in ${tabLabel}.`, "success", 4000);
+                setDismissed(true);
+            }
+            // Wait for agent restart then refresh (with cleanup on unmount)
+            refreshTimerRef.current = setTimeout(() => void fetchPlugin(), 3000);
+        }
+        catch (e) {
+            if (mountedRef.current) {
+                setError(e instanceof Error
+                    ? e.message
+                    : `Failed to ${enable ? "enable" : "disable"} plugin.`);
+            }
+        }
+        finally {
+            if (mountedRef.current)
+                setEnabling(false);
+        }
+    }, [pluginId, plugin, values, fetchPlugin, loadPlugins, setActionNotice]);
+    if (dismissed) {
+        return (_jsxs("div", { className: "my-2 px-3 py-2 border border-ok/30 bg-ok/5 text-xs text-ok", children: [plugin?.name ?? pluginId, " ", t("messagecontent.Enabled")] }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: "my-2 px-3 py-2 border border-border bg-card text-xs text-muted italic", children: [t("common.loading"), " ", pluginId, " ", t("messagecontent.configuration")] }));
+    }
+    if (!plugin) {
+        return (_jsxs("div", { className: "my-2 px-3 py-2 border border-border bg-card text-xs text-muted italic", children: [t("messagecontent.Plugin"), pluginId, t("messagecontent.NotFound")] }));
+    }
+    const isEnabled = plugin.enabled;
+    return (_jsxs("div", { className: "my-2 border border-border bg-card overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2 bg-bg-hover border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-txt", children: [plugin.icon ? (_jsx("span", { className: "text-[13px]", children: plugin.icon })) : (_jsx("span", { className: "text-[13px] opacity-60", children: "\u2699\uFE0F" })), _jsxs("span", { children: [plugin.name, " ", t("messagecontent.Configuration")] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [plugin.configured && (_jsx("span", { className: "text-[10px] text-ok font-medium", children: t("messagecontent.Configured") })), _jsx("span", { className: `text-[10px] font-medium ${isEnabled ? "text-ok" : "text-muted"}`, children: isEnabled ? "Active" : "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 border-t border-border 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 ? "Saving..." : "Save" })), !isEnabled ? (_jsx(Button, { variant: "outline", size: "sm", className: "px-4 py-1.5 h-7 text-xs border-ok/50 text-ok bg-ok/5 hover:bg-ok/10 hover:text-ok disabled:opacity-40", onClick: () => void handleToggle(true), disabled: enabling || saving, children: enabling ? "Enabling..." : "Enable Plugin" })) : (_jsx(Button, { variant: "outline", size: "sm", className: "px-4 py-1.5 h-7 text-xs text-muted hover:border-danger hover:text-danger disabled:opacity-40", onClick: () => void handleToggle(false), disabled: enabling || saving, children: enabling ? "Disabling..." : "Disable" })), saved && (_jsx("span", { className: "text-xs text-ok", children: t("messagecontent.Saved") })), error && _jsx("span", { className: "text-xs text-danger", children: error })] })] }));
+}
+// ── UiSpec block ────────────────────────────────────────────────────
+function UiSpecBlock({ spec, raw }) {
+    const { t } = useApp();
+    const { sendActionMessage } = useApp();
+    const [showRaw, setShowRaw] = useState(false);
+    const handleAction = useCallback((action, params) => {
+        const paramsStr = params ? ` ${JSON.stringify(params)}` : "";
+        void sendActionMessage(`[action:${action}]${paramsStr}`);
+    }, [sendActionMessage]);
+    return (_jsxs("div", { className: "my-2 border border-border overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 bg-bg-hover border-b border-border", children: [_jsx("span", { className: "text-[10px] font-semibold text-muted uppercase tracking-wider", children: t("messagecontent.InteractiveUI") }), _jsx(Button, { variant: "link", size: "sm", className: "h-auto p-0 text-[10px] text-txt hover:underline decoration-accent/50 underline-offset-2", onClick: () => setShowRaw((v) => !v), children: showRaw ? "Hide JSON" : "View JSON" })] }), showRaw && (_jsx("div", { className: "px-3 py-2 bg-card border-b border-border overflow-x-auto", children: _jsx("pre", { className: "text-[10px] text-muted font-mono whitespace-pre-wrap break-words m-0", children: raw }) })), _jsx("div", { className: "p-3", children: _jsx(UiRenderer, { spec: spec, onAction: handleAction }) })] }));
+}
+// ── Main component ──────────────────────────────────────────────────
+export function MessageContent({ message }) {
+    // Parse segments — memoize to avoid re-parsing on every render
+    const segments = useMemo(() => {
+        try {
+            return parseSegments(message.text);
+        }
+        catch {
+            // If parsing fails, just show plain text
+            return [{ kind: "text", text: message.text }];
+        }
+    }, [message.text]);
+    // 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("div", { children: (() => {
+            const keyCounts = new Map();
+            const nextKey = (base) => {
+                const nextCount = (keyCounts.get(base) ?? 0) + 1;
+                keyCounts.set(base, nextCount);
+                return `${base}:${nextCount}`;
+            };
+            return segments.map((seg) => {
+                const baseKey = seg.kind === "text"
+                    ? `text:${seg.text.slice(0, 80)}`
+                    : seg.kind === "config"
+                        ? `config:${seg.pluginId}`
+                        : `ui:${seg.raw.slice(0, 80)}`;
+                const segmentKey = nextKey(baseKey);
+                switch (seg.kind) {
+                    case "text":
+                        return (_jsx("div", { className: "whitespace-pre-wrap", children: seg.text }, segmentKey));
+                    case "config":
+                        if (!isSafeNormalizedPluginId(normalizePluginId(seg.pluginId))) {
+                            return null;
+                        }
+                        return (_jsx(InlinePluginConfig, { pluginId: seg.pluginId }, segmentKey));
+                    case "ui-spec":
+                        return (_jsx(UiSpecBlock, { spec: seg.spec, raw: seg.raw }, segmentKey));
+                    default:
+                        return null;
+                }
+            });
+        })() }));
+}

package/components/OnboardingWizard.d.ts

@@ -0,0 +1,2 @@
+export declare function OnboardingWizard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OnboardingWizard.d.ts.map

package/components/OnboardingWizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingWizard.d.ts","sourceRoot":"","sources":["../../src/components/OnboardingWizard.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,gBAAgB,4CAuN/B"}

package/components/OnboardingWizard.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LanguageDropdown } from "@elizaos/app-core/components";
+import { normalizeLanguage } from "@elizaos/app-core/i18n";
+import { applyUiTheme, getVrmPreviewUrl, getVrmUrl, useApp, } from "@elizaos/app-core/state";
+import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
+import { useEffect, useState } from "react";
+import { useBranding } from "../config/branding";
+import { COMPANION_ENABLED } from "../navigation";
+import { VrmStage } from "./companion/VrmStage";
+import { ActivateStep } from "./onboarding/ActivateStep";
+import { ConnectionStep } from "./onboarding/ConnectionStep";
+import { IdentityStep } from "./onboarding/IdentityStep";
+import { OnboardingPanel } from "./onboarding/OnboardingPanel";
+import { OnboardingStepNav } from "./onboarding/OnboardingStepNav";
+import { PermissionsStep } from "./onboarding/PermissionsStep";
+import { RpcStep } from "./onboarding/RpcStep";
+const FORCE_VRM = typeof window !== "undefined" &&
+    new URLSearchParams(window.location.search).get("test_force_vrm") === "1";
+const DISABLE_ONBOARDING_VRM = !FORCE_VRM &&
+    (String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "").toLowerCase() === "true" ||
+        String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "") === "1");
+export function OnboardingWizard() {
+    const branding = useBranding();
+    const isEliza = branding.appName === "Eliza";
+    const disableVrm = !FORCE_VRM && (DISABLE_ONBOARDING_VRM || isEliza || !COMPANION_ENABLED);
+    const [revealStarted, setRevealStarted] = useState(disableVrm);
+    const { onboardingStep, selectedVrmIndex, customVrmUrl, uiLanguage, uiTheme, setState, handleOnboardingNext, t, } = useApp();
+    const setUiLanguage = (lang) => setState("uiLanguage", normalizeLanguage(lang));
+    // Use same VRM resolution logic as CompanionView for character unification
+    const safeSelectedVrmIndex = selectedVrmIndex > 0 ? selectedVrmIndex : 1;
+    const vrmPath = selectedVrmIndex === 0 && customVrmUrl
+        ? customVrmUrl
+        : getVrmUrl(safeSelectedVrmIndex);
+    const fallbackPreview = selectedVrmIndex > 0
+        ? getVrmPreviewUrl(safeSelectedVrmIndex)
+        : getVrmPreviewUrl(1);
+    const worldUrl = resolveAppAssetUrl("worlds/companion-day.spz");
+    useEffect(() => {
+        // Onboarding keeps a fixed "light" chrome; companion mode owns day/night scenes.
+        applyUiTheme("light");
+        return () => {
+            applyUiTheme(uiTheme);
+        };
+    }, [uiTheme]);
+    // Auto-advance past the wakeUp splash once the VRM reveal animation starts,
+    // or after a 4-second timeout to prevent getting stuck when VRM fails to load.
+    useEffect(() => {
+        if (onboardingStep !== "wakeUp")
+            return;
+        if (revealStarted) {
+            handleOnboardingNext();
+            return;
+        }
+        const timer = setTimeout(() => {
+            setRevealStarted(true);
+        }, 4000);
+        return () => clearTimeout(timer);
+    }, [onboardingStep, revealStarted, handleOnboardingNext]);
+    function renderStep() {
+        switch (onboardingStep) {
+            case "identity":
+                // Rendered outside the panel in OnboardingWizard JSX
+                return null;
+            case "connection":
+                return _jsx(ConnectionStep, {});
+            case "rpc":
+                return _jsx(RpcStep, {});
+            case "senses":
+                return _jsx(PermissionsStep, {});
+            case "activate":
+                return _jsx(ActivateStep, {});
+            default:
+                return null;
+        }
+    }
+    return (_jsxs("div", { className: "onboarding-screen", children: [disableVrm ? (_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 z-10 pointer-events-none", style: {
+                    background: "radial-gradient(circle at 50% 25%, rgba(255,255,255,0.16), transparent 34%), linear-gradient(180deg, rgba(17,17,17,0.08), rgba(10,10,10,0.36))",
+                } })) : (_jsx(VrmStage, { vrmPath: vrmPath, worldUrl: worldUrl, fallbackPreviewUrl: fallbackPreview, cameraProfile: "companion_close", initialCompanionZoomNormalized: 1, onRevealStart: () => setRevealStarted(true), t: t })), _jsxs("div", { "data-testid": "onboarding-ui-overlay", style: {
+                    position: "absolute",
+                    inset: 0,
+                    pointerEvents: revealStarted ? "auto" : "none",
+                    opacity: revealStarted ? 1 : 0,
+                    transition: "opacity 1.2s ease-in-out",
+                    zIndex: 40,
+                }, children: [_jsxs("svg", { className: "onboarding-corner onboarding-corner--tl", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsxs("svg", { className: "onboarding-corner onboarding-corner--tr", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsxs("svg", { className: "onboarding-corner onboarding-corner--bl", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsxs("svg", { className: "onboarding-corner onboarding-corner--br", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsx("div", { style: {
+                            position: "absolute",
+                            top: "1rem",
+                            right: "1rem",
+                            zIndex: 50,
+                            display: "flex",
+                            gap: "0.5rem",
+                            alignItems: "center",
+                        }, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: "companion" }) }), _jsxs("div", { className: "onboarding-ui-overlay", children: [_jsx(OnboardingStepNav, {}), onboardingStep === "identity" ? (
+                            /* Identity step renders full-width at the bottom — no glass panel */
+                            _jsx("div", { className: "ob-identity-overlay", children: _jsx(IdentityStep, {}) })) : (_jsx(OnboardingPanel, { step: onboardingStep, children: renderStep() }))] })] })] }));
+}

package/components/PairingView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Pairing view component — simple pairing screen for authentication.
+ */
+export declare function PairingView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PairingView.d.ts.map

package/components/PairingView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PairingView.d.ts","sourceRoot":"","sources":["../../src/components/PairingView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,wBAAgB,WAAW,4CAqG1B"}