@elizaos/app-core 2.0.0-alpha.10

package/src/components/MessageContent.tsx

@@ -0,0 +1,815 @@
+/**
+ * MessageContent — Renders a chat message's content.
+ *
+ * Follows the json-render pattern: specs are rendered client-side from JSON
+ * in the agent's text response. No server-side block extraction needed.
+ *
+ * Client-side detection:
+ *   1. [CONFIG:pluginId] markers → inline plugin config form (ConfigRenderer)
+ *   2. Fenced UiSpec JSON → interactive UI (UiRenderer)
+ *   3. Everything else → plain text
+ */
+
+import type { ConversationMessage, PluginInfo } from "@elizaos/app-core/api";
+import { client } from "@elizaos/app-core/api";
+import { paramsToSchema } from "@elizaos/app-core/components";
+import {
+  ConfigRenderer,
+  defaultRegistry,
+  type JsonSchemaObject,
+  type PatchOp,
+  UiRenderer,
+  type UiSpec,
+} from "@elizaos/app-core/config";
+import { useApp } from "@elizaos/app-core/state";
+import type { ConfigUiHint } from "@elizaos/app-core/types";
+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(): Record<string, unknown> {
+  return Object.create(null) as Record<string, unknown>;
+}
+
+function sanitizePatchValue(value: unknown): unknown {
+  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 as Record<string, unknown>,
+  )) {
+    if (BLOCKED_IDS.has(key)) continue;
+    safe[key] = sanitizePatchValue(nestedValue);
+  }
+  return safe;
+}
+
+function isSafeNormalizedPluginId(id: string): boolean {
+  return !BLOCKED_IDS.has(id) && SAFE_PLUGIN_ID_RE.test(id);
+}
+
+interface MessageContentProps {
+  message: ConversationMessage;
+}
+
+// ── Segment types ───────────────────────────────────────────────────
+
+type Segment =
+  | { kind: "text"; text: string }
+  | { kind: "config"; pluginId: string }
+  | { kind: "ui-spec"; spec: UiSpec; raw: string };
+
+// ── 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: string,
+  tag: string,
+  opts?: { allowPartial?: boolean },
+): string | null {
+  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: string): string {
+  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: string): unknown {
+  try {
+    return JSON.parse(s);
+  } catch {
+    return null;
+  }
+}
+
+function isUiSpec(obj: unknown): obj is UiSpec {
+  if (!obj || typeof obj !== "object") return false;
+  const c = obj as Record<string, unknown>;
+  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: string): boolean {
+  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: string): PatchOp | null {
+  const t = line.trim();
+  if (!looksLikePatch(t)) return null;
+  try {
+    const obj = JSON.parse(t) as Record<string, unknown>;
+    if (typeof obj.op === "string" && typeof obj.path === "string")
+      return obj as PatchOp;
+    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: PatchOp[]): UiSpec | null {
+  const spec: {
+    root?: string;
+    elements: Record<string, unknown>;
+    state: Record<string, unknown>;
+  } = { elements: {}, state: createSafeRecord() };
+
+  for (const patch of patches) {
+    if (patch.op !== "add" && patch.op !== "replace") continue;
+    const { path, value } = patch as {
+      op: string;
+      path: string;
+      value: unknown;
+    };
+    const parts = path.split("/").filter(Boolean);
+    if (parts.length === 0) continue;
+
+    if (parts[0] === "root" && parts.length === 1) {
+      spec.root = value as string;
+    } 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 as Record<string, unknown>)
+          : 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] as Record<string, unknown>;
+      }
+      if (blockedPath) continue;
+      const leaf = parts[parts.length - 1];
+      if (BLOCKED_IDS.has(leaf)) continue;
+      cursor[leaf] = sanitizePatchValue(value);
+    }
+  }
+
+  return isUiSpec(spec) ? (spec as unknown as 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 function findPatchRegions(
+  text: string,
+): Array<{ start: number; end: number; spec: UiSpec; raw: string }> {
+  const results: Array<{
+    start: number;
+    end: number;
+    spec: UiSpec;
+    raw: string;
+  }> = [];
+  const lines = text.split("\n");
+
+  let blockStart = -1;
+  let blockEnd = 0;
+  let patches: PatchOp[] = [];
+  let rawLines: string[] = [];
+  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: string): Segment[] {
+  const cleaned = normalizeDisplayText(text);
+  if (!cleaned) return [{ kind: "text", text: "" }];
+
+  // Build a unified list of match regions sorted by position
+  const regions: Array<{ start: number; end: number; segment: Segment }> = [];
+
+  // 1. Find [CONFIG:pluginId] markers
+  CONFIG_RE.lastIndex = 0;
+  let m: RegExpExecArray | null = 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: Segment[] = [];
+  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: string): string {
+  return id.replace(/^@[^/]+\/plugin-/, "");
+}
+
+function buildInlinePluginConfigModel(
+  plugin: PluginInfo | null,
+  values: Record<string, unknown>,
+): {
+  hasConfigurableParams: boolean;
+  hints: Record<string, ConfigUiHint>;
+  mergedValues: Record<string, unknown>;
+  schema: JsonSchemaObject | null;
+  setKeys: Set<string>;
+} {
+  const pluginParams = plugin?.parameters ?? [];
+  const hasConfigurableParams = pluginParams.length > 0;
+  if (!hasConfigurableParams || !plugin?.id) {
+    return {
+      hasConfigurableParams: false,
+      hints: {},
+      mergedValues: values,
+      schema: null,
+      setKeys: new Set<string>(),
+    };
+  }
+
+  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: Record<string, unknown> = {};
+  const setKeys = new Set<string>();
+  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 as JsonSchemaObject,
+    setKeys,
+  };
+}
+
+function InlinePluginConfig({ pluginId: rawPluginId }: { pluginId: string }) {
+  const pluginId = normalizePluginId(rawPluginId);
+  const [plugin, setPlugin] = useState<PluginInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [enabling, setEnabling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+  const mountedRef = useRef(true);
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(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: string, value: unknown) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    setSaved(false);
+    setError(null);
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const patch: Record<string, string> = {};
+      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: boolean) => {
+      setEnabling(true);
+      setError(null);
+      try {
+        // Save pending config first, then toggle — same as the Plugins page
+        if (enable) {
+          const patch: Record<string, string> = {};
+          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 (
+      <div className="my-2 px-3 py-2 border border-ok/30 bg-ok/5 text-xs text-ok">
+        {plugin?.name ?? pluginId} {t("messagecontent.Enabled")}
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="my-2 px-3 py-2 border border-border bg-card text-xs text-muted italic">
+        {t("common.loading")} {pluginId} {t("messagecontent.configuration")}
+      </div>
+    );
+  }
+
+  if (!plugin) {
+    return (
+      <div className="my-2 px-3 py-2 border border-border bg-card text-xs text-muted italic">
+        {t("messagecontent.Plugin")}
+        {pluginId}
+        {t("messagecontent.NotFound")}
+      </div>
+    );
+  }
+
+  const isEnabled = plugin.enabled;
+
+  return (
+    <div className="my-2 border border-border bg-card overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 bg-bg-hover border-b border-border">
+        <div className="flex items-center gap-2 text-xs font-bold text-txt">
+          {plugin.icon ? (
+            <span className="text-[13px]">{plugin.icon}</span>
+          ) : (
+            <span className="text-[13px] opacity-60">{"\u2699\uFE0F"}</span>
+          )}
+          <span>
+            {plugin.name} {t("messagecontent.Configuration")}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          {plugin.configured && (
+            <span className="text-[10px] text-ok font-medium">
+              {t("messagecontent.Configured")}
+            </span>
+          )}
+          <span
+            className={`text-[10px] font-medium ${isEnabled ? "text-ok" : "text-muted"}`}
+          >
+            {isEnabled ? "Active" : "Inactive"}
+          </span>
+        </div>
+      </div>
+
+      {/* Form — always shown so user can configure before enabling */}
+      {schema && hasConfigurableParams ? (
+        <div className="p-3">
+          <ConfigRenderer
+            schema={schema}
+            hints={hints}
+            values={mergedValues}
+            setKeys={setKeys}
+            registry={defaultRegistry}
+            pluginId={plugin.id}
+            onChange={handleChange}
+          />
+        </div>
+      ) : (
+        <div className="px-3 py-2 text-xs text-muted italic">
+          {t("messagecontent.NoConfigurablePara")}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center gap-2 px-3 py-2 border-t border-border flex-wrap">
+        {schema && hasConfigurableParams && (
+          <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}
+          >
+            {saving ? "Saving..." : "Save"}
+          </Button>
+        )}
+
+        {!isEnabled ? (
+          <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}
+          >
+            {enabling ? "Enabling..." : "Enable Plugin"}
+          </Button>
+        ) : (
+          <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}
+          >
+            {enabling ? "Disabling..." : "Disable"}
+          </Button>
+        )}
+
+        {saved && (
+          <span className="text-xs text-ok">{t("messagecontent.Saved")}</span>
+        )}
+        {error && <span className="text-xs text-danger">{error}</span>}
+      </div>
+    </div>
+  );
+}
+
+// ── UiSpec block ────────────────────────────────────────────────────
+
+function UiSpecBlock({ spec, raw }: { spec: UiSpec; raw: string }) {
+  const { t } = useApp();
+  const { sendActionMessage } = useApp();
+  const [showRaw, setShowRaw] = useState(false);
+
+  const handleAction = useCallback(
+    (action: string, params?: Record<string, unknown>) => {
+      const paramsStr = params ? ` ${JSON.stringify(params)}` : "";
+      void sendActionMessage(`[action:${action}]${paramsStr}`);
+    },
+    [sendActionMessage],
+  );
+
+  return (
+    <div className="my-2 border border-border overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-bg-hover border-b border-border">
+        <span className="text-[10px] font-semibold text-muted uppercase tracking-wider">
+          {t("messagecontent.InteractiveUI")}
+        </span>
+        <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)}
+        >
+          {showRaw ? "Hide JSON" : "View JSON"}
+        </Button>
+      </div>
+      {showRaw && (
+        <div className="px-3 py-2 bg-card border-b border-border overflow-x-auto">
+          <pre className="text-[10px] text-muted font-mono whitespace-pre-wrap break-words m-0">
+            {raw}
+          </pre>
+        </div>
+      )}
+      <div className="p-3">
+        <UiRenderer spec={spec} onAction={handleAction} />
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ──────────────────────────────────────────────────
+
+export function MessageContent({ message }: MessageContentProps) {
+  // 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" as const, text: message.text }];
+    }
+  }, [message.text]);
+
+  // Fast path: single plain-text segment (most messages)
+  if (segments.length === 1 && segments[0].kind === "text") {
+    return <div className="whitespace-pre-wrap">{segments[0].text}</div>;
+  }
+
+  return (
+    <div>
+      {(() => {
+        const keyCounts = new Map<string, number>();
+        const nextKey = (base: string) => {
+          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 (
+                <div key={segmentKey} className="whitespace-pre-wrap">
+                  {seg.text}
+                </div>
+              );
+            case "config":
+              if (!isSafeNormalizedPluginId(normalizePluginId(seg.pluginId))) {
+                return null;
+              }
+              return (
+                <InlinePluginConfig key={segmentKey} pluginId={seg.pluginId} />
+              );
+            case "ui-spec":
+              return (
+                <UiSpecBlock key={segmentKey} spec={seg.spec} raw={seg.raw} />
+              );
+            default:
+              return null;
+          }
+        });
+      })()}
+    </div>
+  );
+}