@elizaos/app-core 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/MediaGalleryView.js

@@ -1,236 +0,0 @@
-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:|electrobun:|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:\/\/|electrobun:\/\/|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/components/MediaSettingsSection.d.ts

@@ -1,11 +0,0 @@
-/**
- * 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/components/MediaSettingsSection.d.ts.map

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

package/components/MediaSettingsSection.js

@@ -1,329 +0,0 @@
-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-[var(--ok)]" : "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-[var(--ok)] bg-[var(--ok)]/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/components/MessageContent.d.ts

@@ -1,51 +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 } 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