@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/pages/ConfigPageView.js

@@ -0,0 +1,297 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Config page — agent-level configuration.
+ *
+ * Sections:
+ *   1. Wallet & RPC providers
+ *   2. Secrets (modal)
+ */
+import { buildWalletRpcUpdateRequest, resolveInitialWalletRpcSelections, } from "@elizaos/shared";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, } from "@elizaos/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useApp } from "../../state/index.js";
+import { preOpenWindow } from "../../utils/index.js";
+import { BSC_RPC_OPTIONS, CloudServicesSection, EVM_RPC_OPTIONS, RpcConfigSection, SOLANA_RPC_OPTIONS, } from "./config-page-sections.js";
+import { SecretsView } from "./SecretsView.js";
+/* ── ConfigPageView ──────────────────────────────────────────────────── */
+const CLOUD_RPC_SELECTIONS = {
+    evm: "eliza-cloud",
+    bsc: "eliza-cloud",
+    solana: "eliza-cloud",
+};
+function areCloudRpcSelections(selections) {
+    return (selections.evm === "eliza-cloud" &&
+        selections.bsc === "eliza-cloud" &&
+        selections.solana === "eliza-cloud");
+}
+function firstCustomRpcProvider(options, fallback) {
+    return options.find((option) => option.id !== "eliza-cloud")?.id ?? fallback;
+}
+function resolveCustomRpcSelections(current) {
+    return {
+        evm: current.evm === "eliza-cloud"
+            ? firstCustomRpcProvider(EVM_RPC_OPTIONS, current.evm)
+            : current.evm,
+        bsc: current.bsc === "eliza-cloud"
+            ? firstCustomRpcProvider(BSC_RPC_OPTIONS, current.bsc)
+            : current.bsc,
+        solana: current.solana === "eliza-cloud"
+            ? firstCustomRpcProvider(SOLANA_RPC_OPTIONS, current.solana)
+            : current.solana,
+    };
+}
+export function ConfigPageView({ embedded = false, onWalletSaveSuccess, }) {
+    const { t, elizaCloudConnected, elizaCloudLoginBusy, walletConfig, walletApiKeySaving, handleWalletApiKeySave, handleCloudLogin, } = useApp();
+    const [secretsOpen, setSecretsOpen] = useState(false);
+    const manualRpcModeSelection = useRef(false);
+    const initialRpc = resolveInitialWalletRpcSelections(walletConfig);
+    const initialEvmRpc = initialRpc.evm;
+    const initialBscRpc = initialRpc.bsc;
+    const initialSolanaRpc = initialRpc.solana;
+    /* ── Mode: "cloud" or "custom" ─────────────────────────────────────── */
+    const allCloud = areCloudRpcSelections(initialRpc) || (!walletConfig && elizaCloudConnected);
+    const [rpcMode, setRpcMode] = useState(allCloud ? "cloud" : "custom");
+    /* ── RPC provider field values ─────────────────────────────────────── */
+    const [rpcFieldValues, setRpcFieldValues] = useState({});
+    const handleRpcFieldChange = useCallback((key, value) => {
+        setRpcFieldValues((prev) => ({ ...prev, [key]: String(value ?? "") }));
+    }, []);
+    /* ── RPC provider selection state ──────────────────────────────────── */
+    const initialSelectedRpc = allCloud ? CLOUD_RPC_SELECTIONS : initialRpc;
+    const [selectedEvmRpc, setSelectedEvmRpc] = useState(initialSelectedRpc.evm);
+    const [selectedBscRpc, setSelectedBscRpc] = useState(initialSelectedRpc.bsc);
+    const [selectedSolanaRpc, setSelectedSolanaRpc] = useState(initialSelectedRpc.solana);
+    useEffect(() => {
+        if (manualRpcModeSelection.current) {
+            return;
+        }
+        const selections = {
+            evm: initialEvmRpc,
+            bsc: initialBscRpc,
+            solana: initialSolanaRpc,
+        };
+        const nextMode = areCloudRpcSelections(selections) ? "cloud" : "custom";
+        setRpcMode(nextMode);
+        if (nextMode === "cloud") {
+            setSelectedEvmRpc(CLOUD_RPC_SELECTIONS.evm);
+            setSelectedBscRpc(CLOUD_RPC_SELECTIONS.bsc);
+            setSelectedSolanaRpc(CLOUD_RPC_SELECTIONS.solana);
+        }
+        else {
+            setSelectedEvmRpc(selections.evm);
+            setSelectedBscRpc(selections.bsc);
+            setSelectedSolanaRpc(selections.solana);
+        }
+    }, [initialBscRpc, initialEvmRpc, initialSolanaRpc]);
+    /* When switching to cloud mode, set all providers to eliza-cloud */
+    const handleModeChange = useCallback((mode) => {
+        manualRpcModeSelection.current = true;
+        setRpcMode(mode);
+        if (mode === "cloud") {
+            setSelectedEvmRpc(CLOUD_RPC_SELECTIONS.evm);
+            setSelectedBscRpc(CLOUD_RPC_SELECTIONS.bsc);
+            setSelectedSolanaRpc(CLOUD_RPC_SELECTIONS.solana);
+        }
+        else {
+            const customSelections = resolveCustomRpcSelections({
+                evm: selectedEvmRpc,
+                bsc: selectedBscRpc,
+                solana: selectedSolanaRpc,
+            });
+            setSelectedEvmRpc(customSelections.evm);
+            setSelectedBscRpc(customSelections.bsc);
+            setSelectedSolanaRpc(customSelections.solana);
+        }
+    }, [selectedBscRpc, selectedEvmRpc, selectedSolanaRpc]);
+    const handleWalletSaveAll = useCallback(async () => {
+        const config = buildWalletRpcUpdateRequest({
+            walletConfig,
+            rpcFieldValues,
+            selectedProviders: {
+                evm: selectedEvmRpc,
+                bsc: selectedBscRpc,
+                solana: selectedSolanaRpc,
+            },
+        });
+        const saved = await handleWalletApiKeySave(config);
+        if (saved) {
+            onWalletSaveSuccess?.();
+        }
+    }, [
+        handleWalletApiKeySave,
+        onWalletSaveSuccess,
+        rpcFieldValues,
+        selectedBscRpc,
+        selectedEvmRpc,
+        selectedSolanaRpc,
+        walletConfig,
+    ]);
+    const evmRpcConfigs = {
+        alchemy: [
+            {
+                configKey: "ALCHEMY_API_KEY",
+                label: t("onboarding.rpcAlchemyKey", {
+                    defaultValue: "Alchemy API Key",
+                }),
+                isSet: walletConfig?.alchemyKeySet ?? false,
+            },
+        ],
+        infura: [
+            {
+                configKey: "INFURA_API_KEY",
+                label: t("configpageview.InfuraApiKey", {
+                    defaultValue: "Infura API Key",
+                }),
+                isSet: walletConfig?.infuraKeySet ?? false,
+            },
+        ],
+        ankr: [
+            {
+                configKey: "ANKR_API_KEY",
+                label: t("configpageview.AnkrApiKey", {
+                    defaultValue: "Ankr API Key",
+                }),
+                isSet: walletConfig?.ankrKeySet ?? false,
+            },
+        ],
+    };
+    const bscRpcConfigs = {
+        alchemy: [
+            {
+                configKey: "ALCHEMY_API_KEY",
+                label: t("onboarding.rpcAlchemyKey", {
+                    defaultValue: "Alchemy API Key",
+                }),
+                isSet: walletConfig?.alchemyKeySet ?? false,
+            },
+        ],
+        ankr: [
+            {
+                configKey: "ANKR_API_KEY",
+                label: t("configpageview.AnkrApiKey", {
+                    defaultValue: "Ankr API Key",
+                }),
+                isSet: walletConfig?.ankrKeySet ?? false,
+            },
+        ],
+        nodereal: [
+            {
+                configKey: "NODEREAL_BSC_RPC_URL",
+                label: t("configpageview.NodeRealBscRpcUrl", {
+                    defaultValue: "NodeReal BSC RPC URL",
+                }),
+                isSet: walletConfig?.nodeRealBscRpcSet ?? false,
+            },
+        ],
+        quicknode: [
+            {
+                configKey: "QUICKNODE_BSC_RPC_URL",
+                label: t("configpageview.QuickNodeBscRpcUrl", {
+                    defaultValue: "QuickNode BSC RPC URL",
+                }),
+                isSet: walletConfig?.quickNodeBscRpcSet ?? false,
+            },
+        ],
+    };
+    const solanaRpcConfigs = {
+        "helius-birdeye": [
+            {
+                configKey: "HELIUS_API_KEY",
+                label: t("configpageview.HeliusApiKey", {
+                    defaultValue: "Helius API Key",
+                }),
+                isSet: walletConfig?.heliusKeySet ?? false,
+            },
+            {
+                configKey: "BIRDEYE_API_KEY",
+                label: t("configpageview.BirdeyeApiKey", {
+                    defaultValue: "Birdeye API Key",
+                }),
+                isSet: walletConfig?.birdeyeKeySet ?? false,
+            },
+        ],
+    };
+    const cloudStatusProps = {
+        connected: elizaCloudConnected,
+        loginBusy: elizaCloudLoginBusy,
+        onLogin: () => void handleCloudLogin(preOpenWindow()),
+    };
+    const legacyRpcChains = walletConfig?.legacyCustomChains ?? [];
+    const legacyRpcWarning = legacyRpcChains.length > 0
+        ? t("configpageview.LegacyRawRpcWarning", {
+            defaultValue: "Legacy raw RPC is still active for {{chains}}. Re-save a supported provider selection to migrate fully.",
+            chains: legacyRpcChains.join(", "),
+        })
+        : null;
+    /* Filter out eliza-cloud from per-chain options in custom mode */
+    const filterCloudOption = (options) => options.filter((o) => o.id !== "eliza-cloud");
+    return (_jsxs("div", { children: [!embedded && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-bold mb-1", children: t("configpageview.Config") }), _jsx("p", { className: "text-sm text-muted mb-5", children: t("configpageview.WalletProvidersAnd") })] })), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-5", children: [_jsxs(Button, { variant: "ghost", "data-testid": "wallet-rpc-mode-cloud", onClick: () => handleModeChange("cloud"), className: `relative flex flex-col items-start gap-1.5 rounded-xl border-2 p-4 text-left transition-all h-auto !whitespace-normal ${rpcMode === "cloud"
+                            ? "border-accent bg-accent/8 shadow-[0_0_20px_rgba(var(--accent-rgb),0.1)]"
+                            : "border-border/40 bg-card/30 opacity-50 grayscale hover:opacity-70 hover:grayscale-0"}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: rpcMode === "cloud" ? "text-accent" : "text-muted", children: [_jsx("title", { children: t("configpageview.CloudModeSvgTitle", {
+                                                    defaultValue: "Eliza Cloud managed RPC",
+                                                }) }), _jsx("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" })] }), _jsx("span", { className: "text-sm font-bold", children: t("common.elizaCloud", {
+                                            defaultValue: "Eliza Cloud",
+                                        }) })] }), _jsx("span", { className: "text-xs-tight text-muted leading-snug", children: t("configpageview.CloudModeDesc", {
+                                    defaultValue: "Managed RPC for EVM, BSC, and Solana via Eliza Cloud, with Helius on Solana.",
+                                }) }), rpcMode === "cloud" && (_jsx("span", { className: "absolute top-3 right-3 flex h-5 w-5 items-center justify-center rounded-full bg-accent text-2xs font-bold text-accent-fg", children: "\u2713" }))] }), _jsxs(Button, { variant: "ghost", onClick: () => handleModeChange("custom"), className: `relative flex flex-col items-start gap-1.5 rounded-xl border-2 p-4 text-left transition-all h-auto !whitespace-normal ${rpcMode === "custom"
+                            ? "border-accent bg-accent/8 shadow-[0_0_20px_rgba(var(--accent-rgb),0.1)]"
+                            : "border-border/40 bg-card/30 opacity-50 grayscale hover:opacity-70 hover:grayscale-0"}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: rpcMode === "custom" ? "text-accent" : "text-muted", children: [_jsx("title", { children: t("configpageview.CustomModeSvgTitle", {
+                                                    defaultValue: "Custom RPC configuration",
+                                                }) }), _jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })] }), _jsx("span", { className: "text-sm font-bold", children: t("configpageview.CustomModeTitle", {
+                                            defaultValue: "Custom RPC",
+                                        }) })] }), _jsx("span", { className: "text-xs-tight text-muted leading-snug", children: t("configpageview.CustomModeDesc", {
+                                    defaultValue: "Bring your own API keys. Configure per chain.",
+                                }) }), rpcMode === "custom" && (_jsx("span", { className: "absolute top-3 right-3 flex h-5 w-5 items-center justify-center rounded-full bg-accent text-2xs font-bold text-accent-fg", children: "\u2713" }))] })] }), rpcMode === "cloud" && (_jsxs("div", { children: [elizaCloudConnected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-2", children: [
+                                    {
+                                        label: "EVM",
+                                        desc: t("configpageview.EVMDesc", {
+                                            defaultValue: "Ethereum, Base, Arbitrum",
+                                        }),
+                                    },
+                                    {
+                                        label: "BSC",
+                                        desc: t("configpageview.BSCDesc", {
+                                            defaultValue: "BNB Smart Chain",
+                                        }),
+                                    },
+                                    {
+                                        label: "Solana",
+                                        desc: t("configpageview.SolanaDesc", {
+                                            defaultValue: "Solana mainnet",
+                                        }),
+                                    },
+                                ].map((chain) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2.5 rounded-lg bg-bg/50", children: [_jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-ok shrink-0" }), _jsx("span", { className: "text-xs font-semibold text-txt", children: chain.label }), _jsx("span", { className: "text-xs-tight text-muted", children: chain.desc }), _jsx("span", { className: "text-2xs text-accent ml-auto font-medium", children: t("common.elizaCloud", {
+                                                defaultValue: "Eliza Cloud",
+                                            }) })] }, chain.label))) }), !embedded ? _jsx(CloudServicesSection, {}) : null] })) : (_jsxs("div", { className: "flex flex-col items-center gap-4 py-8 text-center", children: [_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted", children: [_jsx("title", { children: t("configpageview.CloudLoginRequiredSvgTitle", {
+                                            defaultValue: "Eliza Cloud login required",
+                                        }) }), _jsx("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" })] }), _jsx("div", { children: _jsx("p", { className: "text-sm font-semibold text-txt mb-1", children: t("elizaclouddashboard.ConnectElizaCloud", {
+                                        defaultValue: "Connect to Eliza Cloud",
+                                    }) }) }), _jsx(Button, { variant: "default", size: "sm", className: "text-xs font-bold", onClick: () => void handleCloudLogin(preOpenWindow()), disabled: elizaCloudLoginBusy, children: elizaCloudLoginBusy
+                                    ? t("game.connecting", {
+                                        defaultValue: "Connecting...",
+                                    })
+                                    : t("elizaclouddashboard.ConnectElizaCloud", {
+                                        defaultValue: "Connect to Eliza Cloud",
+                                    }) })] })), _jsx("div", { className: "flex justify-end mt-4", children: _jsx(Button, { variant: "default", size: "sm", "data-testid": "wallet-rpc-save", className: "text-xs-tight", onClick: () => {
+                                void handleWalletSaveAll();
+                            }, disabled: walletApiKeySaving, children: walletApiKeySaving ? t("common.saving") : t("common.save") }) })] })), rpcMode === "custom" && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("div", { className: "font-bold text-sm", children: t("configpageview.CustomRpcProviders", {
+                                    defaultValue: "Custom RPC Providers",
+                                }) }), _jsxs(Button, { variant: "outline", className: "min-h-[2.625rem] px-4 rounded-[calc(var(--radius-lg)_+_2px)] flex items-center gap-1.5 text-xs text-muted hover:text-txt", onClick: () => setSecretsOpen(true), children: [_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("configpageview.Secrets", { defaultValue: "Secrets" }) }), _jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), t("configpageview.Secrets", { defaultValue: "Secrets" })] })] }), _jsxs("div", { className: "space-y-5", children: [_jsx(RpcConfigSection, { title: t("configpageview.EVM", { defaultValue: "EVM" }), description: t("configpageview.EVMDesc", {
+                                    defaultValue: "Ethereum, Base, Arbitrum",
+                                }), options: filterCloudOption(EVM_RPC_OPTIONS), selectedProvider: selectedEvmRpc === "eliza-cloud"
+                                    ? (EVM_RPC_OPTIONS.find((o) => o.id !== "eliza-cloud")?.id ??
+                                        selectedEvmRpc)
+                                    : selectedEvmRpc, onSelect: (provider) => setSelectedEvmRpc(provider), providerConfigs: evmRpcConfigs, rpcFieldValues: rpcFieldValues, onRpcFieldChange: handleRpcFieldChange, cloud: cloudStatusProps, containerClassName: "flex flex-wrap gap-1.5", t: t }), _jsx("div", { className: "py-1" }), _jsx(RpcConfigSection, { title: t("configpageview.BSC", { defaultValue: "BSC" }), description: t("configpageview.BSCDesc", {
+                                    defaultValue: "BNB Smart Chain",
+                                }), options: filterCloudOption(BSC_RPC_OPTIONS), selectedProvider: selectedBscRpc === "eliza-cloud"
+                                    ? (BSC_RPC_OPTIONS.find((o) => o.id !== "eliza-cloud")?.id ??
+                                        selectedBscRpc)
+                                    : selectedBscRpc, onSelect: (provider) => setSelectedBscRpc(provider), providerConfigs: bscRpcConfigs, rpcFieldValues: rpcFieldValues, onRpcFieldChange: handleRpcFieldChange, cloud: cloudStatusProps, containerClassName: "flex flex-wrap gap-1.5", t: t }), _jsx("div", { className: "py-1" }), _jsx(RpcConfigSection, { title: t("configpageview.Solana", { defaultValue: "Solana" }), description: t("configpageview.SolanaDesc", {
+                                    defaultValue: "Solana mainnet",
+                                }), options: filterCloudOption(SOLANA_RPC_OPTIONS), selectedProvider: selectedSolanaRpc === "eliza-cloud"
+                                    ? (SOLANA_RPC_OPTIONS.find((o) => o.id !== "eliza-cloud")
+                                        ?.id ?? selectedSolanaRpc)
+                                    : selectedSolanaRpc, onSelect: (provider) => setSelectedSolanaRpc(provider), providerConfigs: solanaRpcConfigs, rpcFieldValues: rpcFieldValues, onRpcFieldChange: handleRpcFieldChange, cloud: cloudStatusProps, containerClassName: "flex flex-wrap gap-1.5", t: t })] }), legacyRpcWarning && (_jsx("div", { className: "mt-4 rounded-lg border border-warn bg-warn-subtle px-3 py-2 text-xs-tight text-txt", children: legacyRpcWarning })), _jsx("div", { className: "flex justify-end mt-4", children: _jsx(Button, { variant: "default", size: "sm", "data-testid": "wallet-rpc-save", className: "text-xs-tight", onClick: () => {
+                                void handleWalletSaveAll();
+                            }, disabled: walletApiKeySaving, children: walletApiKeySaving ? t("common.saving") : t("common.save") }) })] })), _jsx(Dialog, { open: secretsOpen, onOpenChange: setSecretsOpen, children: _jsx(DialogContent, { showCloseButton: false, className: "w-[min(calc(100%_-_2rem),42rem)] max-h-[min(88vh,48rem)] overflow-hidden rounded-2xl border border-border/70 bg-card/96 p-0 shadow-2xl", children: _jsxs("div", { className: "flex max-h-[min(88vh,48rem)] flex-col", children: [_jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-5 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-accent", children: [_jsx("title", { children: t("configpageview.SecretsVault") }), _jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), _jsx(DialogTitle, { className: "text-sm font-bold", children: t("configpageview.SecretsVault1") })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-muted hover:text-txt text-lg leading-none", onClick: () => setSecretsOpen(false), "aria-label": t("common.close"), children: t("bugreportmodal.Times") })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-5", children: _jsx(SecretsView, {}) })] }) }) })] }));
+}

package/components/pages/ConnectorsPageView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Connectors page — curated connector view.
+ */
+export declare function ConnectorsPageView({ inModal, connectorDesktopPlacement, }?: {
+    inModal?: boolean;
+    connectorDesktopPlacement?: "left" | "right";
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConnectorsPageView.d.ts.map

package/components/pages/ConnectorsPageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectorsPageView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ConnectorsPageView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,yBAAyB,GAC1B,GAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzC,2CAQL"}

package/components/pages/ConnectorsPageView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Connectors page — curated connector view.
+ */
+import { PluginsView } from "./PluginsView.js";
+export function ConnectorsPageView({ inModal, connectorDesktopPlacement, } = {}) {
+    return (_jsx(PluginsView, { mode: "social", inModal: inModal ?? false, connectorDesktopPlacement: connectorDesktopPlacement }));
+}

package/components/pages/DatabasePageView.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function DatabasePageView({ contentHeader, }?: {
+    contentHeader?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatabasePageView.d.ts.map

package/components/pages/DatabasePageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatabasePageView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/DatabasePageView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAsCL"}

package/components/pages/DatabasePageView.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentedControl } from "@elizaos/ui";
+import { useApp } from "../../state/index.js";
+import { DatabaseView } from "./DatabaseView.js";
+import { MediaGalleryView } from "./MediaGalleryView.js";
+import { VectorBrowserView } from "./VectorBrowserView.js";
+export function DatabasePageView({ contentHeader, } = {}) {
+    const { t, databaseSubTab, setState } = useApp();
+    const dbTabs = [
+        {
+            id: "tables",
+            label: t("databaseview.Tables"),
+        },
+        {
+            id: "media",
+            label: t("mediagalleryview.Media"),
+        },
+        {
+            id: "vectors",
+            label: t("common.vectors"),
+        },
+    ];
+    const leftNav = (_jsx(SegmentedControl, { value: databaseSubTab, onValueChange: (v) => setState("databaseSubTab", v), items: dbTabs.map((tab) => ({ value: tab.id, label: tab.label })), role: "tablist", "aria-label": t("aria.databaseViews") }));
+    // Each sub-view owns its own PageLayout + Sidebar.
+    // contentHeader and leftNav are passed through so the layout is uniform.
+    if (databaseSubTab === "media") {
+        return _jsx(MediaGalleryView, { leftNav: leftNav, contentHeader: contentHeader });
+    }
+    if (databaseSubTab === "vectors") {
+        return (_jsx(VectorBrowserView, { leftNav: leftNav, contentHeader: contentHeader }));
+    }
+    return _jsx(DatabaseView, { leftNav: leftNav, contentHeader: contentHeader });
+}

package/components/pages/DatabaseView.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export declare function DatabaseView({ leftNav, contentHeader, }: {
+    leftNav?: ReactNode;
+    contentHeader?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatabaseView.d.ts.map

package/components/pages/DatabaseView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatabaseView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/DatabaseView.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,2CAw4BA"}