@elizaos/app-core 2.0.0-alpha.52 → 2.0.0-alpha.53

package/src/components/MessageContent.tsx

@@ -1,815 +0,0 @@
-/**
- * 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>
-  );
-}