@elizaos/app-core 2.0.0-alpha.37

package/dist/components/MediaGalleryView.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Media Gallery — browse photos, videos, and audio stored in agent databases.
+ *
+ * Queries known tables for records containing media URLs (image/video/audio
+ * file extensions or data URIs). All data flows through the generic database
+ * APIs (getDatabaseTables, executeDatabaseQuery).
+ */
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import { client } from "../api";
+import { useApp } from "../state";
+import { resolveAppAssetUrl } from "../utils";
+const IMAGE_EXTS = /\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)(\?|$)/i;
+const VIDEO_EXTS = /\.(mp4|webm|mov|avi|mkv|ogv)(\?|$)/i;
+const AUDIO_EXTS = /\.(mp3|wav|ogg|flac|aac|m4a|opus)(\?|$)/i;
+const DATA_URI_IMG = /^data:image\//i;
+const DATA_URI_VID = /^data:video\//i;
+const DATA_URI_AUD = /^data:audio\//i;
+const MEDIA_URL_PREFIX = /^(https?:|data:|blob:|file:|capacitor:|capacitor-electron:|app:|\/|\.\/|\.\.\/)/i;
+function classifyUrl(url) {
+    if (IMAGE_EXTS.test(url) || DATA_URI_IMG.test(url))
+        return "image";
+    if (VIDEO_EXTS.test(url) || DATA_URI_VID.test(url))
+        return "video";
+    if (AUDIO_EXTS.test(url) || DATA_URI_AUD.test(url))
+        return "audio";
+    return null;
+}
+function filenameFromUrl(url) {
+    try {
+        const path = new URL(url, "https://placeholder").pathname;
+        const segments = path.split("/").filter(Boolean);
+        return segments[segments.length - 1] || "media";
+    }
+    catch {
+        return "media";
+    }
+}
+function looksLikePotentialMediaUrl(value) {
+    const candidate = value.trim();
+    if (!candidate)
+        return false;
+    if (classifyUrl(candidate))
+        return true;
+    return MEDIA_URL_PREFIX.test(candidate);
+}
+function normalizeMediaUrl(url) {
+    const candidate = url.trim();
+    if (!candidate)
+        return candidate;
+    return MEDIA_URL_PREFIX.test(candidate)
+        ? resolveAppAssetUrl(candidate)
+        : candidate;
+}
+const FILTER_CHIPS = [
+    { id: "all", label: "All" },
+    { id: "image", label: "Images" },
+    { id: "video", label: "Video" },
+    { id: "audio", label: "Audio" },
+];
+/** Extract media URLs from arbitrary row data by scanning all string values. */
+function extractMediaFromRows(rows, tableName) {
+    const items = [];
+    const seen = new Set();
+    for (const row of rows) {
+        const createdAt = String(row.createdAt ?? row.created_at ?? row.timestamp ?? "");
+        for (const val of Object.values(row)) {
+            if (typeof val !== "string")
+                continue;
+            // Try parsing as JSON content field (elizaOS memories store JSON in content)
+            const urls = extractUrlsFromValue(val);
+            for (const url of urls) {
+                const mediaType = classifyUrl(url);
+                if (mediaType && !seen.has(url)) {
+                    seen.add(url);
+                    items.push({
+                        url,
+                        type: mediaType,
+                        filename: filenameFromUrl(url),
+                        source: tableName,
+                        createdAt,
+                    });
+                }
+            }
+        }
+    }
+    return items;
+}
+/** Pull URLs out of a string value — handles plain URLs and JSON blobs. */
+function extractUrlsFromValue(val) {
+    const urls = new Set();
+    // If it looks like JSON, parse it and search recursively
+    if (val.startsWith("{") || val.startsWith("[")) {
+        try {
+            const parsed = JSON.parse(val);
+            collectStrings(parsed, urls);
+            return Array.from(urls);
+        }
+        catch {
+            // not JSON, fall through to regex
+        }
+    }
+    // Absolute URL/scheme match
+    const urlRegex = /(?:https?:\/\/|file:\/\/|blob:|capacitor(?:-electron)?:\/\/|app:\/\/)[^\s"'<>]+/gi;
+    const matches = val.match(urlRegex);
+    if (matches) {
+        for (const match of matches)
+            urls.add(match);
+    }
+    // Relative/path-like token match
+    const tokens = val
+        .split(/[\s"'<>]+/)
+        .map((token) => token.replace(/^[([{]+/, "").replace(/[)\]},;.!?]+$/, ""));
+    for (const token of tokens) {
+        if (looksLikePotentialMediaUrl(token))
+            urls.add(token);
+    }
+    // Data URI match
+    if (val.startsWith("data:"))
+        urls.add(val);
+    return Array.from(urls);
+}
+function collectStrings(obj, out) {
+    if (typeof obj === "string") {
+        if (looksLikePotentialMediaUrl(obj))
+            out.add(obj.trim());
+        return;
+    }
+    if (Array.isArray(obj)) {
+        for (const item of obj)
+            collectStrings(item, out);
+        return;
+    }
+    if (obj && typeof obj === "object") {
+        for (const v of Object.values(obj))
+            collectStrings(v, out);
+    }
+}
+export function MediaGalleryView() {
+    const { t } = useApp();
+    const [media, setMedia] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState("");
+    const [filter, setFilter] = useState("all");
+    const [search, setSearch] = useState("");
+    const [lightboxItem, setLightboxItem] = useState(null);
+    const loadMedia = useCallback(async () => {
+        setLoading(true);
+        setError("");
+        try {
+            // Discover tables
+            const { tables } = await client.getDatabaseTables();
+            const allMedia = [];
+            // Scan tables likely to contain media: memories, messages, media, attachments, files
+            const mediaTableNames = tables
+                .map((t) => t.name)
+                .filter((name) => {
+                const n = name.toLowerCase();
+                return (n.includes("memor") ||
+                    n.includes("message") ||
+                    n.includes("media") ||
+                    n.includes("attach") ||
+                    n.includes("file") ||
+                    n.includes("asset") ||
+                    n.includes("document"));
+            });
+            // If no likely tables found, scan all tables with modest limits
+            const tablesToScan = mediaTableNames.length > 0
+                ? mediaTableNames
+                : tables.map((t) => t.name);
+            const scanLimit = mediaTableNames.length > 0 ? 500 : 100;
+            for (const tableName of tablesToScan.slice(0, 10)) {
+                try {
+                    const result = await client.executeDatabaseQuery(`SELECT * FROM "${tableName}" LIMIT ${scanLimit}`);
+                    const items = extractMediaFromRows(result.rows, tableName);
+                    allMedia.push(...items);
+                }
+                catch {
+                    // skip tables that fail
+                }
+            }
+            // Sort by date descending
+            allMedia.sort((a, b) => {
+                if (!a.createdAt && !b.createdAt)
+                    return 0;
+                if (!a.createdAt)
+                    return 1;
+                if (!b.createdAt)
+                    return -1;
+                return b.createdAt.localeCompare(a.createdAt);
+            });
+            setMedia(allMedia);
+        }
+        catch (err) {
+            setError(`Failed to load media: ${err instanceof Error ? err.message : "error"}`);
+        }
+        setLoading(false);
+    }, []);
+    useEffect(() => {
+        loadMedia();
+    }, [loadMedia]);
+    const filtered = media.filter((m) => {
+        if (filter !== "all" && m.type !== filter)
+            return false;
+        if (search &&
+            !m.filename.toLowerCase().includes(search.toLowerCase()) &&
+            !m.url.toLowerCase().includes(search.toLowerCase()))
+            return false;
+        return true;
+    });
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 mb-4", children: [_jsx(Input, { type: "text", placeholder: t("mediagalleryview.SearchMedia"), value: search, onChange: (e) => setSearch(e.target.value), className: "px-2.5 py-1.5 h-8 text-xs w-[200px] shadow-sm bg-[var(--card)]" }), _jsx("div", { className: "flex gap-1", children: FILTER_CHIPS.map((chip) => (_jsx(Button, { variant: filter === chip.id ? "default" : "outline", size: "sm", className: `px-3 py-1 h-7 text-xs shadow-sm transition-colors ${filter === chip.id
+                                ? ""
+                                : "bg-transparent text-[var(--muted)] hover:text-[var(--txt)] border-[var(--border)]"}`, onClick: () => setFilter(chip.id), children: chip.label }, chip.id))) }), _jsxs("span", { className: "text-[11px] text-[var(--muted)] ml-auto", children: [filtered.length, " ", t("mediagalleryview.item"), filtered.length !== 1 ? "s" : ""] })] }), error && (_jsx("div", { className: "p-2.5 border border-[var(--danger)] text-[var(--danger)] text-xs mb-3", children: error })), loading ? (_jsx("div", { className: "text-center py-16 text-[var(--muted)] text-sm italic", children: t("mediagalleryview.ScanningForMedia") })) : filtered.length === 0 ? (_jsxs("div", { className: "text-center py-16", children: [_jsx("div", { className: "text-[var(--muted)] text-sm mb-2", children: t("mediagalleryview.NoMediaFound") }), _jsx("div", { className: "text-[var(--muted)] text-xs", children: media.length === 0
+                            ? "No images, videos, or audio files were detected in the database."
+                            : "No items match the current filter." })] })) : (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3", children: filtered.map((item, i) => (_jsxs("button", { type: "button", className: "bg-[var(--card)] border border-[var(--border)] p-0 cursor-pointer text-left hover:border-[var(--accent)] transition-colors group", onClick: () => setLightboxItem(item), children: [_jsx("div", { className: "w-full aspect-square bg-[var(--bg)] flex items-center justify-center overflow-hidden", children: item.type === "image" ? (_jsx("img", { src: normalizeMediaUrl(item.url), alt: item.filename, className: "w-full h-full object-cover", loading: "lazy", onError: (e) => {
+                                    const image = e.target;
+                                    image.style.display = "none";
+                                    if (image.parentElement) {
+                                        image.parentElement.innerHTML =
+                                            '<span style="font-size:24px">🖼</span>';
+                                    }
+                                } })) : item.type === "video" ? (_jsx("span", { className: "text-2xl opacity-50", children: "\uD83C\uDFAC" })) : (_jsx("span", { className: "text-2xl opacity-50", children: "\uD83C\uDFB5" })) }), _jsxs("div", { className: "p-2", children: [_jsx("div", { className: "text-[11px] text-[var(--txt)] truncate", children: item.filename }), _jsxs("div", { className: "flex items-center gap-1 mt-1", children: [_jsx("span", { className: `text-[9px] px-1.5 py-0.5 uppercase font-bold ${item.type === "image"
+                                                ? "bg-blue-500/20 text-blue-400"
+                                                : item.type === "video"
+                                                    ? "bg-purple-500/20 text-purple-400"
+                                                    : "bg-green-500/20 text-green-400"}`, children: item.type }), _jsx("span", { className: "text-[9px] text-[var(--muted)] truncate", children: item.source })] })] })] }, `${item.url}-${i}`))) })), lightboxItem && (_jsx("div", { className: "fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-8", onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        setLightboxItem(null);
+                }, onKeyDown: (e) => {
+                    if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setLightboxItem(null);
+                    }
+                }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "bg-[var(--card)] border border-[var(--border)] max-w-[90vw] max-h-[90vh] overflow-auto", children: [_jsxs("div", { className: "flex items-center justify-between p-3 border-b border-[var(--border)]", children: [_jsx("div", { className: "text-xs text-[var(--txt)] font-medium truncate mr-4", children: lightboxItem.filename }), _jsx("button", { type: "button", className: "text-[var(--muted)] hover:text-[var(--txt)] bg-transparent border-0 cursor-pointer text-lg px-2", onClick: () => setLightboxItem(null), children: "\u00D7" })] }), _jsx("div", { className: "p-4 flex items-center justify-center min-h-[200px]", children: lightboxItem.type === "image" ? (_jsx("img", { src: normalizeMediaUrl(lightboxItem.url), alt: lightboxItem.filename, className: "max-w-full max-h-[70vh] object-contain" })) : lightboxItem.type === "video" ? (_jsx("video", { src: normalizeMediaUrl(lightboxItem.url), controls: true, className: "max-w-full max-h-[70vh]", children: _jsx("track", { kind: "captions" }) })) : (_jsx("audio", { src: normalizeMediaUrl(lightboxItem.url), controls: true, className: "w-full max-w-[400px]", children: _jsx("track", { kind: "captions" }) })) }), _jsxs("div", { className: "p-3 border-t border-[var(--border)] text-[11px] text-[var(--muted)] flex gap-4", children: [_jsxs("span", { children: [t("mediagalleryview.Type"), " ", lightboxItem.type] }), _jsxs("span", { children: [t("mediagalleryview.Source"), " ", lightboxItem.source] }), lightboxItem.createdAt && (_jsxs("span", { children: [t("mediagalleryview.Date"), " ", lightboxItem.createdAt] }))] })] }) }))] }));
+}

package/dist/components/MediaSettingsSection.d.ts

@@ -0,0 +1,11 @@
+/**
+ * MediaSettingsSection — provider selection + config for media generation.
+ *
+ * Follows the TTS pattern from CharacterView:
+ *   - "cloud" vs "own-key" mode toggle
+ *   - Provider button grid
+ *   - Conditional API key inputs
+ *   - Status badges (Configured / Needs Setup)
+ */
+export declare function MediaSettingsSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaSettingsSection.d.ts.map

package/dist/components/MediaSettingsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaSettingsSection.d.ts","sourceRoot":"","sources":["../../src/components/MediaSettingsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+OH,wBAAgB,oBAAoB,4CAqoBnC"}

package/dist/components/MediaSettingsSection.js

@@ -0,0 +1,329 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MediaSettingsSection — provider selection + config for media generation.
+ *
+ * Follows the TTS pattern from CharacterView:
+ *   - "cloud" vs "own-key" mode toggle
+ *   - Provider button grid
+ *   - Conditional API key inputs
+ *   - Status badges (Configured / Needs Setup)
+ */
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import { client, } from "../api";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+import { CloudConnectionStatus, CloudSourceModeToggle, } from "./CloudSourceControls";
+import { ConfigSaveFooter } from "./ConfigSaveFooter";
+const IMAGE_PROVIDERS = [
+    {
+        id: "cloud",
+        label: "Eliza Cloud",
+        hint: "mediasettingssection.ProviderHintNoSetup",
+    },
+    {
+        id: "fal",
+        label: "FAL.ai",
+        hint: "mediasettingssection.ProviderHintFalImage",
+    },
+    {
+        id: "openai",
+        label: "OpenAI",
+        hint: "mediasettingssection.ProviderHintOpenAIImage",
+    },
+    {
+        id: "google",
+        label: "Google",
+        hint: "mediasettingssection.ProviderHintGoogleImage",
+    },
+    {
+        id: "xai",
+        label: "xAI",
+        hint: "mediasettingssection.ProviderHintXAIAurora",
+    },
+];
+const VIDEO_PROVIDERS = [
+    {
+        id: "cloud",
+        label: "Eliza Cloud",
+        hint: "mediasettingssection.ProviderHintNoSetup",
+    },
+    {
+        id: "fal",
+        label: "FAL.ai",
+        hint: "mediasettingssection.ProviderHintFalVideo",
+    },
+    {
+        id: "openai",
+        label: "OpenAI",
+        hint: "mediasettingssection.ProviderHintOpenAIVideo",
+    },
+    {
+        id: "google",
+        label: "Google",
+        hint: "mediasettingssection.ProviderHintGoogleVideo",
+    },
+];
+const AUDIO_PROVIDERS = [
+    {
+        id: "cloud",
+        label: "Eliza Cloud",
+        hint: "mediasettingssection.ProviderHintNoSetup",
+    },
+    { id: "suno", label: "Suno", hint: "mediasettingssection.ProviderHintSuno" },
+    {
+        id: "elevenlabs",
+        label: "ElevenLabs",
+        hint: "mediasettingssection.ProviderHintElevenLabs",
+    },
+];
+const VISION_PROVIDERS = [
+    {
+        id: "cloud",
+        label: "Eliza Cloud",
+        hint: "mediasettingssection.ProviderHintNoSetup",
+    },
+    {
+        id: "openai",
+        label: "OpenAI",
+        hint: "mediasettingssection.ProviderHintOpenAIVision",
+    },
+    {
+        id: "google",
+        label: "Google",
+        hint: "mediasettingssection.ProviderHintGoogleVision",
+    },
+    {
+        id: "anthropic",
+        label: "Anthropic",
+        hint: "mediasettingssection.ProviderHintAnthropicVision",
+    },
+    {
+        id: "xai",
+        label: "xAI",
+        hint: "mediasettingssection.ProviderHintXAIVision",
+    },
+];
+const CATEGORY_LABELS = {
+    image: "mediasettingssection.ImageGeneration",
+    video: "mediasettingssection.VideoGeneration",
+    audio: "mediasettingssection.AudioMusic",
+    vision: "mediasettingssection.VisionAnalysis",
+};
+function getProvidersForCategory(category) {
+    switch (category) {
+        case "image":
+            return IMAGE_PROVIDERS;
+        case "video":
+            return VIDEO_PROVIDERS;
+        case "audio":
+            return AUDIO_PROVIDERS;
+        case "vision":
+            return VISION_PROVIDERS;
+    }
+}
+function getApiKeyField(category, provider) {
+    if (provider === "cloud")
+        return null;
+    switch (category) {
+        case "image":
+        case "video":
+            if (provider === "fal")
+                return {
+                    path: `${category}.fal.apiKey`,
+                    labelKey: "mediasettingssection.FalApiKey",
+                };
+            if (provider === "openai")
+                return {
+                    path: `${category}.openai.apiKey`,
+                    labelKey: "mediasettingssection.OpenAIApiKey",
+                };
+            if (provider === "google")
+                return {
+                    path: `${category}.google.apiKey`,
+                    labelKey: "mediasettingssection.GoogleApiKey",
+                };
+            if (provider === "xai")
+                return {
+                    path: `${category}.xai.apiKey`,
+                    labelKey: "mediasettingssection.XAIApiKey",
+                };
+            break;
+        case "audio":
+            if (provider === "suno")
+                return {
+                    path: "audio.suno.apiKey",
+                    labelKey: "mediasettingssection.SunoApiKey",
+                };
+            if (provider === "elevenlabs")
+                return {
+                    path: "audio.elevenlabs.apiKey",
+                    labelKey: "mediasettingssection.ElevenLabsApiKey",
+                };
+            break;
+        case "vision":
+            if (provider === "openai")
+                return {
+                    path: "vision.openai.apiKey",
+                    labelKey: "mediasettingssection.OpenAIApiKey",
+                };
+            if (provider === "google")
+                return {
+                    path: "vision.google.apiKey",
+                    labelKey: "mediasettingssection.GoogleApiKey",
+                };
+            if (provider === "anthropic")
+                return {
+                    path: "vision.anthropic.apiKey",
+                    labelKey: "mediasettingssection.AnthropicApiKey",
+                };
+            if (provider === "xai")
+                return {
+                    path: "vision.xai.apiKey",
+                    labelKey: "mediasettingssection.XAIApiKey",
+                };
+            break;
+    }
+    return null;
+}
+function getNestedValue(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts) {
+        if (current == null || typeof current !== "object")
+            return undefined;
+        current = current[part];
+    }
+    return current;
+}
+function setNestedValue(obj, path, value) {
+    const parts = path.split(".");
+    const result = structuredClone(obj);
+    let current = result;
+    for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        if (current[part] == null || typeof current[part] !== "object") {
+            current[part] = {};
+        }
+        current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+    return result;
+}
+export function MediaSettingsSection() {
+    const { setTimeout } = useTimeout();
+    const { t } = useApp();
+    const { elizaCloudConnected } = useApp();
+    const [mediaConfig, setMediaConfig] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [activeTab, setActiveTab] = useState("image");
+    const [dirty, setDirty] = useState(false);
+    // Load config on mount
+    useEffect(() => {
+        void (async () => {
+            setLoading(true);
+            const cfg = await client.getConfig();
+            setMediaConfig(cfg.media ?? {});
+            setLoading(false);
+        })();
+    }, []);
+    // Get current category config
+    const getCategoryConfig = useCallback((category) => {
+        return (mediaConfig[category] ?? {});
+    }, [mediaConfig]);
+    // Get mode for category
+    const getMode = useCallback((category) => {
+        const cfg = getCategoryConfig(category);
+        return cfg.mode ?? "cloud";
+    }, [getCategoryConfig]);
+    // Get provider for category
+    const getProvider = useCallback((category) => {
+        const cfg = getCategoryConfig(category);
+        return cfg.provider ?? "cloud";
+    }, [getCategoryConfig]);
+    // Update category config
+    const updateCategoryConfig = useCallback((category, updates) => {
+        setMediaConfig((prev) => ({
+            ...prev,
+            [category]: {
+                ...(prev[category] ?? {}),
+                ...updates,
+            },
+        }));
+        setDirty(true);
+    }, []);
+    // Update nested value in config
+    const updateNestedValue = useCallback((path, value) => {
+        setMediaConfig((prev) => setNestedValue(prev, path, value));
+        setDirty(true);
+    }, []);
+    // Save handler
+    const handleSave = useCallback(async () => {
+        setSaving(true);
+        setSaveError(null);
+        setSaveSuccess(false);
+        await client.updateConfig({ media: mediaConfig });
+        setSaveSuccess(true);
+        setDirty(false);
+        setTimeout(() => setSaveSuccess(false), 2500);
+        setSaving(false);
+    }, [mediaConfig, setTimeout]);
+    // Check if provider is configured
+    const isProviderConfigured = useCallback((category) => {
+        const mode = getMode(category);
+        if (mode === "cloud")
+            return elizaCloudConnected;
+        const provider = getProvider(category);
+        const apiKeyField = getApiKeyField(category, provider);
+        if (!apiKeyField)
+            return true;
+        const value = getNestedValue(mediaConfig, apiKeyField.path);
+        return typeof value === "string" && value.length > 0;
+    }, [getMode, getProvider, mediaConfig, elizaCloudConnected]);
+    if (loading) {
+        return (_jsx("div", { className: "py-8 text-center text-[var(--muted)] text-xs", children: t("mediasettingssection.LoadingMediaConfig") }));
+    }
+    const currentMode = getMode(activeTab);
+    const currentProvider = getProvider(activeTab);
+    const providers = getProvidersForCategory(activeTab);
+    const apiKeyField = getApiKeyField(activeTab, currentProvider);
+    const configured = isProviderConfigured(activeTab);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex gap-1 rounded-xl border border-border bg-card/50 p-1 shrink-0", children: ["image", "video", "audio", "vision"].map((cat) => {
+                    const active = activeTab === cat;
+                    const catConfigured = isProviderConfigured(cat);
+                    return (_jsxs(Button, { variant: active ? "default" : "ghost", size: "sm", className: `flex-1 h-9 rounded-lg border border-transparent px-3 py-2 text-xs font-semibold ${active
+                            ? "bg-accent text-accent-foreground shadow-sm"
+                            : "text-muted hover:bg-bg-hover hover:text-txt"}`, onClick: () => setActiveTab(cat), children: [_jsx("span", { children: t(CATEGORY_LABELS[cat]) }), _jsx("span", { className: `ml-1.5 inline-block w-1.5 h-1.5 rounded-full ${catConfigured ? "bg-green-500" : "bg-border-strong"}` })] }, cat));
+                }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-xs font-semibold text-[var(--muted)]", children: t("mediasettingssection.APISource") }), _jsx(CloudSourceModeToggle, { mode: currentMode, onChange: (mode) => {
+                            if (mode === "cloud") {
+                                updateCategoryConfig(activeTab, {
+                                    mode: "cloud",
+                                    provider: "cloud",
+                                });
+                                return;
+                            }
+                            updateCategoryConfig(activeTab, { mode: "own-key" });
+                        } }), _jsx("span", { className: `ml-auto rounded-full border px-2 py-0.5 text-[10px] ${configured
+                            ? "border-green-600 bg-green-600/10 text-[var(--text)]"
+                            : "border-[var(--warn)] bg-[var(--warn-subtle)] text-[var(--text)]"}`, children: configured
+                            ? t("mediasettingssection.Configured")
+                            : t("mediasettingssection.NeedsSetup") })] }), currentMode === "cloud" && (_jsx(CloudConnectionStatus, { connected: elizaCloudConnected, disconnectedText: t("elizaclouddashboard.ElizaCloudNotConnectedSettings") })), currentMode === "own-key" && (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "text-xs font-semibold text-[var(--muted)]", children: t("mediasettingssection.Provider") }), _jsx("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${providers.length}, 1fr)` }, children: providers
+                            .filter((p) => p.id !== "cloud")
+                            .map((p) => {
+                            const active = currentProvider === p.id;
+                            return (_jsxs(Button, { variant: "outline", size: "sm", className: `h-auto px-3 py-2 text-xs font-normal rounded-lg border border-border ${active
+                                    ? "bg-accent/10 border-accent text-txt"
+                                    : "bg-card text-txt hover:bg-bg-hover"}`, onClick: () => updateCategoryConfig(activeTab, {
+                                    provider: p.id,
+                                }), children: [_jsx("div", { className: "font-semibold", children: p.id === "cloud"
+                                            ? t("elizaclouddashboard.ElizaCloud")
+                                            : p.label }), _jsx("div", { className: "text-[10px] text-muted mt-0.5", children: p.id === "cloud"
+                                            ? t("elizaclouddashboard.NoSetupNeeded")
+                                            : t(p.hint) })] }, p.id));
+                        }) }), apiKeyField && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-semibold", children: t(apiKeyField.labelKey) }), _jsx(Input, { type: "password", className: "h-9 px-3 py-2 bg-card border-border text-xs rounded-lg shadow-sm focus-visible:ring-1 focus-visible:ring-accent", placeholder: getNestedValue(mediaConfig, apiKeyField.path)
+                                    ? t("mediasettingssection.ApiKeySetLeaveBlank")
+                                    : t("mediasettingssection.EnterApiKey"), onChange: (e) => updateNestedValue(apiKeyField.path, e.target.value || undefined) })] })), activeTab === "image" && currentProvider === "fal" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "image.fal.model") ?? "fal-ai/flux-pro", onChange: (e) => updateNestedValue("image.fal.model", e.target.value), children: [_jsxs("optgroup", { label: t("mediasettingssection.Flux"), children: [_jsx("option", { value: "fal-ai/flux-pro", children: t("mediasettingssection.FluxPro") }), _jsx("option", { value: "fal-ai/flux-pro/v1.1", children: t("mediasettingssection.FluxProV11") }), _jsx("option", { value: "fal-ai/flux-pro/kontext", children: t("mediasettingssection.FluxKontextPro") }), _jsx("option", { value: "fal-ai/flux-2-flex", children: t("mediasettingssection.Flux2Flex") }), _jsx("option", { value: "fal-ai/flux/dev", children: t("mediasettingssection.FluxDev") }), _jsx("option", { value: "fal-ai/flux/schnell", children: t("mediasettingssection.FluxSchnell") }), _jsx("option", { value: "fal-ai/fast-flux", children: t("mediasettingssection.FastFlux") })] }), _jsxs("optgroup", { label: t("mediasettingssection.OtherModels"), children: [_jsx("option", { value: "fal-ai/nano-banana-pro", children: t("mediasettingssection.NanoBananaProGoo") }), _jsx("option", { value: "fal-ai/recraft/v3/text-to-image", children: t("mediasettingssection.RecraftV3") }), _jsx("option", { value: "fal-ai/kling-image/v3/text-to-image", children: t("mediasettingssection.KlingImageV3") }), _jsx("option", { value: "fal-ai/kling-image/o3/text-to-image", children: t("mediasettingssection.KlingImageO3") }), _jsx("option", { value: "xai/grok-imagine-image", children: t("mediasettingssection.GrokImagineXAI") }), _jsx("option", { value: "fal-ai/stable-diffusion-3", children: t("mediasettingssection.StableDiffusion3") })] })] })] })), activeTab === "image" && currentProvider === "openai" && (_jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "image.openai.model") ?? "dall-e-3", onChange: (e) => updateNestedValue("image.openai.model", e.target.value), children: [_jsx("option", { value: "dall-e-3", children: t("mediasettingssection.DALLE3") }), _jsx("option", { value: "dall-e-2", children: t("mediasettingssection.DALLE2") })] })] }), _jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Quality") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "image.openai.quality") ?? "standard", onChange: (e) => updateNestedValue("image.openai.quality", e.target.value), children: [_jsx("option", { value: "standard", children: t("mediasettingssection.Standard") }), _jsx("option", { value: "hd", children: "HD" })] })] })] })), activeTab === "video" && currentProvider === "fal" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "video.fal.model") ?? "fal-ai/kling-video/v3/pro/text-to-video", onChange: (e) => updateNestedValue("video.fal.model", e.target.value), children: [_jsxs("optgroup", { label: t("mediasettingssection.TextToVideo"), children: [_jsx("option", { value: "fal-ai/veo3.1", children: t("mediasettingssection.Veo31Google") }), _jsx("option", { value: "fal-ai/veo3.1/fast", children: t("mediasettingssection.Veo31Fast") }), _jsx("option", { value: "fal-ai/sora-2/text-to-video", children: t("mediasettingssection.Sora2") }), _jsx("option", { value: "fal-ai/sora-2/text-to-video/pro", children: t("mediasettingssection.Sora2Pro") }), _jsx("option", { value: "fal-ai/kling-video/v3/pro/text-to-video", children: t("mediasettingssection.Kling30Pro") }), _jsx("option", { value: "fal-ai/kling-video/v3/standard/text-to-video", children: t("mediasettingssection.Kling30") }), _jsx("option", { value: "fal-ai/kling-video/o3/pro/text-to-video", children: t("mediasettingssection.KlingO3Pro") }), _jsx("option", { value: "fal-ai/kling-video/o3/standard/text-to-video", children: t("mediasettingssection.KlingO3") }), _jsx("option", { value: "xai/grok-imagine-video/text-to-video", children: t("mediasettingssection.GrokVideoXAI") }), _jsx("option", { value: "fal-ai/minimax/video-01-live", children: t("mediasettingssection.MinimaxHailuo") }), _jsx("option", { value: "fal-ai/hunyuan-video", children: t("mediasettingssection.HunyuanVideo") }), _jsx("option", { value: "fal-ai/mochi-v1", children: t("mediasettingssection.Mochi1") }), _jsx("option", { value: "fal-ai/wan/v2.2-a14b/text-to-video", children: t("mediasettingssection.Wan22") })] }), _jsxs("optgroup", { label: t("mediasettingssection.ImageToVideo"), children: [_jsx("option", { value: "fal-ai/kling-video/v3/pro/image-to-video", children: t("mediasettingssection.Kling30Pro") }), _jsx("option", { value: "fal-ai/kling-video/o3/standard/image-to-video", children: t("mediasettingssection.KlingO3") }), _jsx("option", { value: "fal-ai/veo3.1/image-to-video", children: t("mediasettingssection.Veo31") }), _jsx("option", { value: "fal-ai/veo3.1/fast/image-to-video", children: t("mediasettingssection.Veo31Fast") }), _jsx("option", { value: "fal-ai/sora-2/image-to-video", children: t("mediasettingssection.Sora2") }), _jsx("option", { value: "fal-ai/sora-2/image-to-video/pro", children: t("mediasettingssection.Sora2Pro") }), _jsx("option", { value: "xai/grok-imagine-video/image-to-video", children: t("mediasettingssection.GrokXAI") }), _jsx("option", { value: "fal-ai/minimax/video-01-live/image-to-video", children: t("mediasettingssection.MinimaxHailuo") }), _jsx("option", { value: "fal-ai/luma-dream-machine/image-to-video", children: t("mediasettingssection.LumaDreamMachine") }), _jsx("option", { value: "fal-ai/pixverse/v4.5/image-to-video", children: t("mediasettingssection.PixverseV45") }), _jsx("option", { value: "fal-ai/ltx-2-19b/image-to-video", children: t("mediasettingssection.LTX219B") })] })] })] })), activeTab === "audio" && currentProvider === "suno" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "audio.suno.model") ?? "chirp-v3.5", onChange: (e) => updateNestedValue("audio.suno.model", e.target.value), children: [_jsx("option", { value: "chirp-v3.5", children: t("mediasettingssection.ChirpV35") }), _jsx("option", { value: "chirp-v3", children: t("mediasettingssection.ChirpV3") })] })] })), activeTab === "audio" && currentProvider === "elevenlabs" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.MaxDurationSecond") }), _jsx(Input, { type: "number", min: 0.5, max: 22, step: 0.5, className: "h-9 px-3 py-2 bg-card border-border text-xs rounded-lg shadow-sm focus-visible:ring-1 focus-visible:ring-accent w-24", value: getNestedValue(mediaConfig, "audio.elevenlabs.duration") ?? 5, onChange: (e) => updateNestedValue("audio.elevenlabs.duration", parseFloat(e.target.value)) })] })), activeTab === "vision" && currentProvider === "openai" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "vision.openai.model") ?? "gpt-4o", onChange: (e) => updateNestedValue("vision.openai.model", e.target.value), children: [_jsx("option", { value: "gpt-4o", children: t("mediasettingssection.GPT4o") }), _jsx("option", { value: "gpt-4o-mini", children: t("mediasettingssection.GPT4oMini") }), _jsx("option", { value: "gpt-4-turbo", children: t("mediasettingssection.GPT4Turbo") })] })] })), activeTab === "vision" && currentProvider === "google" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "vision.google.model") ?? "gemini-2.0-flash", onChange: (e) => updateNestedValue("vision.google.model", e.target.value), children: [_jsx("option", { value: "gemini-2.0-flash", children: t("mediasettingssection.Gemini20Flash") }), _jsx("option", { value: "gemini-1.5-pro", children: t("mediasettingssection.Gemini15Pro") }), _jsx("option", { value: "gemini-1.5-flash", children: t("mediasettingssection.Gemini15Flash") })] })] })), activeTab === "vision" && currentProvider === "anthropic" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-semibold", children: t("mediasettingssection.Model") }), _jsxs("select", { className: "px-2.5 py-1.5 border border-[var(--border)] bg-[var(--card)] text-xs focus:border-[var(--accent)] focus:outline-none rounded-lg", value: getNestedValue(mediaConfig, "vision.anthropic.model") ?? "claude-sonnet-4-20250514", onChange: (e) => updateNestedValue("vision.anthropic.model", e.target.value), children: [_jsx("option", { value: "claude-sonnet-4-20250514", children: t("mediasettingssection.ClaudeSonnet4") }), _jsx("option", { value: "claude-3-5-sonnet-20241022", children: t("mediasettingssection.Claude35Sonnet") }), _jsx("option", { value: "claude-3-haiku-20240307", children: t("mediasettingssection.Claude3Haiku") })] })] }))] })), _jsx(ConfigSaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }));
+}

package/dist/components/MessageContent.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 } from "@elizaos/app-core/api";
+import { type PatchOp, type UiSpec } from "@elizaos/app-core/config";
+interface MessageContentProps {
+    message: ConversationMessage;
+}
+/**
+ * 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 }: MessageContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MessageContent.d.ts.map