@elizaos/ui 2.0.3-beta.4 → 2.0.3-beta.5

package/components/pages/SpringboardSurface.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isViewVisible } from "@elizaos/core";
 import * as React from "react";
+import { getElectrobunRendererRpc, registerDynamicView, unregisterDynamicView, } from "../../bridge/electrobun-rpc.js";
 import { useRoutableViews } from "../../hooks/useAvailableViews.js";
 import { useViewCatalog } from "../../hooks/useViewCatalog.js";
 import { viewToEntry } from "../../hooks/view-catalog.js";
 import { getActiveViewModality, } from "../../platform/platform-guards.js";
 import { setSpringboardEditing, setSpringboardPage, setSpringboardPageCount, useShellSurface, } from "../../state/shell-surface-store.js";
+import { useIsDeveloperMode } from "../../state/useDeveloperMode.js";
 import { useEnabledViewKinds } from "../../state/useViewKinds.js";
 import { recordRecentViewId } from "../../view-recents.js";
 import { Springboard } from "./Springboard.js";
@@ -17,8 +19,14 @@ const HIDDEN_SPRINGBOARD_VIEW_IDS = new Set([
     "character",
     "character-select",
     "voice",
+    "background",
+]);
+const HIDDEN_SPRINGBOARD_PATHS = new Set([
+    "/chat",
+    "/views",
+    "/apps",
+    "/background",
 ]);
-const HIDDEN_SPRINGBOARD_PATHS = new Set(["/chat", "/views", "/apps"]);
 const SPRINGBOARD_SYSTEM_ENTRY_IDS = new Set([
     "settings",
     "tasks",
@@ -37,7 +45,6 @@ const SPRINGBOARD_SYSTEM_ENTRY_IDS = new Set([
     "runtime",
     "database",
     "logs",
-    "background",
     "stream",
     "desktop",
 ]);
@@ -74,15 +81,36 @@ function dedupeEntries(entries) {
     }
     return out;
 }
+const EMPTY_DYNAMIC_VIEW_FORM = {
+    id: "",
+    title: "",
+    entrypoint: "",
+    description: "",
+};
+function dynamicViewBridgeAvailable() {
+    const request = getElectrobunRendererRpc()?.request;
+    return (typeof request?.dynamicViewRegister === "function" &&
+        typeof request?.dynamicViewUnregister === "function");
+}
+function editableEntrypointFor(entry) {
+    return (entry.view?.bundleUrl ??
+        entry.view?.path ??
+        entry.path ??
+        `/apps/${entry.id}`);
+}
 export const SpringboardSurface = React.memo(function SpringboardSurface({ onNavigateHomeFromEdge, }) {
-    const { views, loading } = useRoutableViews();
-    const { entries: catalogEntries, get: getCatalogEntry } = useViewCatalog();
+    const { views, loading, refresh: refreshViews } = useRoutableViews();
+    const { entries: catalogEntries, get: getCatalogEntry, refresh: refreshCatalog, } = useViewCatalog();
     const enabledKinds = useEnabledViewKinds();
+    const developerMode = useIsDeveloperMode();
     const activeModality = React.useMemo(() => getActiveViewModality(), []);
+    const [dynamicViewForm, setDynamicViewForm] = React.useState(EMPTY_DYNAMIC_VIEW_FORM);
+    const [dynamicViewStatus, setDynamicViewStatus] = React.useState(null);
     // Page index + edit mode come from the single shell-surface store, so the
     // springboard, the rail, and its one indicator can never disagree (and edit
     // mode is auto-reset by the store when the user leaves the springboard).
     const { springboardPage, springboardEditing } = useShellSurface();
+    const showDynamicViewControls = developerMode && dynamicViewBridgeAvailable();
     const loadedEntries = React.useMemo(() => views
         .filter((view) => isVisibleSpringboardView(view, enabledKinds, activeModality))
         .map(viewToEntry), [activeModality, enabledKinds, views]);
@@ -92,6 +120,10 @@ export const SpringboardSurface = React.memo(function SpringboardSurface({ onNav
         .sort(compareEntryLabels), [activeModality, catalogEntries]);
     const entries = React.useMemo(() => dedupeEntries([...loadedEntries, ...availableEntries]), [availableEntries, loadedEntries]);
     const entryById = React.useMemo(() => new Map(entries.map((entry) => [entry.id, entry])), [entries]);
+    const refreshDynamicViews = React.useCallback(() => {
+        refreshViews();
+        refreshCatalog();
+    }, [refreshCatalog, refreshViews]);
     const handleLaunch = React.useCallback((entry) => {
         if (entry.state !== "loaded") {
             void getCatalogEntry(entry).catch(() => {
@@ -116,5 +148,83 @@ export const SpringboardSurface = React.memo(function SpringboardSurface({ onNav
             // Sandboxed navigation is best-effort.
         }
     }, [getCatalogEntry]);
-    return (_jsx("div", { className: "absolute inset-0 flex min-h-0 flex-col px-0 pt-2 pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem)+1.75rem)]", children: _jsx(Springboard, { entries: entries, loading: loading, onLaunch: (entry) => handleLaunch(entryById.get(entry.id) ?? entry), onEdgeSwipeRight: onNavigateHomeFromEdge, page: springboardPage, onPageChange: setSpringboardPage, onPageCountChange: setSpringboardPageCount, editing: springboardEditing, onEditingChange: setSpringboardEditing, showPageDots: false }) }));
+    const canManageView = React.useCallback((id) => {
+        if (!showDynamicViewControls)
+            return false;
+        const entry = entryById.get(id);
+        return (entry?.state === "loaded" && entry.kind === "view" && !entry.builtin);
+    }, [entryById, showDynamicViewControls]);
+    const updateDynamicField = React.useCallback((field, value) => {
+        setDynamicViewForm((current) => ({ ...current, [field]: value }));
+    }, []);
+    const handleEditDynamicView = React.useCallback((id) => {
+        const entry = entryById.get(id);
+        if (!entry)
+            return;
+        setDynamicViewForm({
+            id: entry.id,
+            title: entry.label,
+            entrypoint: editableEntrypointFor(entry),
+            description: entry.description ?? "",
+        });
+        setDynamicViewStatus(null);
+    }, [entryById]);
+    const handleSaveDynamicView = React.useCallback(async (event) => {
+        event.preventDefault();
+        const id = dynamicViewForm.id.trim();
+        const title = dynamicViewForm.title.trim();
+        const entrypoint = dynamicViewForm.entrypoint.trim();
+        const description = dynamicViewForm.description.trim();
+        if (!id || !title || !entrypoint) {
+            setDynamicViewStatus("Dynamic view ID, title, and entrypoint are required.");
+            return;
+        }
+        const manifest = {
+            id,
+            title,
+            source: "developer",
+            entrypoint,
+            placement: "canvas",
+        };
+        if (description)
+            manifest.description = description;
+        try {
+            const saved = await registerDynamicView(manifest, { update: true });
+            if (!saved) {
+                setDynamicViewStatus("Dynamic view bridge is unavailable.");
+                return;
+            }
+            setDynamicViewStatus(`Saved ${saved.title}.`);
+            refreshDynamicViews();
+        }
+        catch (error) {
+            setDynamicViewStatus(error instanceof Error ? error.message : String(error));
+        }
+    }, [dynamicViewForm, refreshDynamicViews]);
+    const handleDeleteDynamicView = React.useCallback(async (id) => {
+        const entry = entryById.get(id);
+        if (!entry)
+            return;
+        try {
+            const result = await unregisterDynamicView(id);
+            if (!result) {
+                setDynamicViewStatus("Dynamic view bridge is unavailable.");
+                return;
+            }
+            if (!result.removed) {
+                setDynamicViewStatus(`${entry.label} was not registered.`);
+                return;
+            }
+            setDynamicViewStatus(`Deleted ${entry.label}.`);
+            setDynamicViewForm((current) => current.id === id ? { ...EMPTY_DYNAMIC_VIEW_FORM } : current);
+            refreshDynamicViews();
+        }
+        catch (error) {
+            setDynamicViewStatus(error instanceof Error ? error.message : String(error));
+        }
+    }, [entryById, refreshDynamicViews]);
+    return (_jsxs("div", { className: "absolute inset-0 flex min-h-0 flex-col px-0 pb-[calc(var(--eliza-mobile-nav-offset,0px)+var(--safe-area-bottom,0px)+var(--eliza-continuous-chat-clearance,5.25rem)+1.75rem)]", children: [showDynamicViewControls ? (_jsxs("form", { "aria-label": "Dynamic view management", onSubmit: handleSaveDynamicView, className: "mx-3 mb-2 grid flex-none gap-2 rounded-lg border border-white/10 bg-black/55 p-3 text-white sm:mx-4", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs("label", { className: "grid gap-1 text-xs font-medium", children: ["Dynamic view ID", _jsx("input", { className: "h-9 rounded-md border border-white/15 bg-black/40 px-2 text-sm text-white outline-none", value: dynamicViewForm.id, onChange: (event) => updateDynamicField("id", event.currentTarget.value) })] }), _jsxs("label", { className: "grid gap-1 text-xs font-medium", children: ["Dynamic view title", _jsx("input", { className: "h-9 rounded-md border border-white/15 bg-black/40 px-2 text-sm text-white outline-none", value: dynamicViewForm.title, onChange: (event) => updateDynamicField("title", event.currentTarget.value) })] }), _jsxs("label", { className: "grid gap-1 text-xs font-medium", children: ["Dynamic view entrypoint", _jsx("input", { className: "h-9 rounded-md border border-white/15 bg-black/40 px-2 text-sm text-white outline-none", value: dynamicViewForm.entrypoint, onChange: (event) => updateDynamicField("entrypoint", event.currentTarget.value) })] }), _jsxs("label", { className: "grid gap-1 text-xs font-medium", children: ["Dynamic view description", _jsx("input", { className: "h-9 rounded-md border border-white/15 bg-black/40 px-2 text-sm text-white outline-none", value: dynamicViewForm.description, onChange: (event) => updateDynamicField("description", event.currentTarget.value) })] })] }), _jsxs("div", { className: "flex min-h-9 flex-wrap items-center gap-2", children: [_jsx("button", { type: "submit", className: "h-8 rounded-md bg-accent px-3 text-sm font-semibold text-white hover:bg-accent/85", children: "Save" }), _jsx("button", { type: "button", className: "h-8 rounded-md border border-white/15 px-3 text-sm font-semibold text-white hover:bg-white/10", onClick: () => {
+                                    setDynamicViewForm({ ...EMPTY_DYNAMIC_VIEW_FORM });
+                                    setDynamicViewStatus(null);
+                                }, children: "Clear" }), dynamicViewStatus ? (_jsx("p", { role: "status", className: "text-sm text-white/80", children: dynamicViewStatus })) : null] })] })) : null, _jsx(Springboard, { entries: entries, loading: loading, onLaunch: (entry) => handleLaunch(entryById.get(entry.id) ?? entry), onEdgeSwipeRight: onNavigateHomeFromEdge, canManageView: showDynamicViewControls ? canManageView : undefined, onEditView: showDynamicViewControls ? handleEditDynamicView : undefined, onDeleteView: showDynamicViewControls ? handleDeleteDynamicView : undefined, page: springboardPage, onPageChange: setSpringboardPage, onPageCountChange: setSpringboardPageCount, editing: springboardEditing, onEditingChange: setSpringboardEditing, showPageDots: false })] }));
 });

package/components/shell/ContinuousChatOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContinuousChatOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ContinuousChatOverlay.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAgCnF,OAAO,KAAK,EAAmB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA8D7E;;+CAE+C;AAC/C,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,OAAO,GACP,iBAAiB,GACjB,mBAAmB,GACnB,WAAW,CAAC;AAEhB;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAu0B1D,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,SAAmB,EACnB,KAAK,EAAE,SAAS,GACjB,EAAE;IACD,UAAU,EAAE,eAAe,CAAC;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqjFpB"}
+{"version":3,"file":"ContinuousChatOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/ContinuousChatOverlay.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAqCnF,OAAO,KAAK,EAAmB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AA8D7E;;+CAE+C;AAC/C,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,OAAO,GACP,iBAAiB,GACjB,mBAAmB,GACnB,WAAW,CAAC;AAEhB;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAw0B1D,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,SAAmB,EACnB,KAAK,EAAE,SAAS,GACjB,EAAE;IACD,UAAU,EAAE,eAAe,CAAC;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,sBAAsB,CAAC;CAChC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAknFpB"}