@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/CompanionSceneHost.js

@@ -0,0 +1,360 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRenderGuard } from "@elizaos/app-core/hooks";
+import { getVrmPreviewUrl, getVrmUrl, useApp, VRM_COUNT, } from "@elizaos/app-core/state";
+import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
+import { memo, useCallback, useEffect, useMemo, useRef, } from "react";
+import { SharedCompanionSceneContext } from "./shared-companion-scene-context";
+import { VrmStage } from "./VrmStage";
+const COMPANION_ZOOM_WHEEL_SENSITIVITY = 1 / 720;
+const COMPANION_ZOOM_PINCH_SENSITIVITY = 2.35;
+const COMPANION_ZOOM_STORAGE_KEY = "milady.companion.zoom.v1";
+const DEFAULT_COMPANION_ZOOM = 0.95;
+const CAMERA_DRAG_IGNORE_SELECTOR = 'button, input, textarea, select, option, [role="button"], [role="listbox"], [aria-expanded], [aria-haspopup], [contenteditable="true"], [data-no-camera-drag="true"]';
+const NON_TEXT_INPUT_TYPES = new Set([
+    "button",
+    "checkbox",
+    "color",
+    "file",
+    "hidden",
+    "image",
+    "radio",
+    "range",
+    "reset",
+    "submit",
+]);
+function getTouchDistance(points) {
+    const touchPoints = [...points.values()];
+    if (touchPoints.length < 2)
+        return 0;
+    const [firstPoint, secondPoint] = touchPoints;
+    if (!firstPoint || !secondPoint)
+        return 0;
+    return Math.hypot(secondPoint.x - firstPoint.x, secondPoint.y - firstPoint.y);
+}
+function getWheelPixels(event) {
+    if (event.deltaMode === 1)
+        return event.deltaY * 16;
+    if (event.deltaMode === 2) {
+        return event.deltaY * (window.innerHeight || 1);
+    }
+    return event.deltaY;
+}
+function hasFocusedTextEntry() {
+    if (typeof document === "undefined")
+        return false;
+    const activeElement = document.activeElement;
+    if (activeElement instanceof HTMLTextAreaElement) {
+        return true;
+    }
+    if (activeElement instanceof HTMLInputElement) {
+        return !NON_TEXT_INPUT_TYPES.has(activeElement.type.toLowerCase());
+    }
+    return activeElement instanceof HTMLElement
+        ? activeElement.isContentEditable
+        : false;
+}
+function shouldIgnoreCameraDrag(target) {
+    return target instanceof Element
+        ? Boolean(target.closest(CAMERA_DRAG_IGNORE_SELECTOR))
+        : false;
+}
+function clampCompanionZoom(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function loadStoredCompanionZoom() {
+    if (typeof localStorage === "undefined")
+        return DEFAULT_COMPANION_ZOOM;
+    try {
+        const raw = localStorage.getItem(COMPANION_ZOOM_STORAGE_KEY);
+        if (raw === null)
+            return DEFAULT_COMPANION_ZOOM;
+        const parsed = Number(raw);
+        return Number.isFinite(parsed)
+            ? clampCompanionZoom(parsed)
+            : DEFAULT_COMPANION_ZOOM;
+    }
+    catch {
+        return DEFAULT_COMPANION_ZOOM;
+    }
+}
+function persistCompanionZoom(value) {
+    if (typeof localStorage === "undefined")
+        return;
+    try {
+        localStorage.setItem(COMPANION_ZOOM_STORAGE_KEY, String(clampCompanionZoom(value)));
+    }
+    catch {
+        // Ignore persistence failures so camera controls remain responsive.
+    }
+}
+function CompanionSceneSurface({ active, interactive = true, children, }) {
+    useRenderGuard("CompanionSceneHost");
+    const { selectedVrmIndex, customVrmUrl, uiTheme, t, tab } = useApp();
+    const rootRef = useRef(null);
+    const stageEnginesRef = useRef(new Set());
+    const companionZoomRef = useRef(DEFAULT_COMPANION_ZOOM);
+    const companionZoomHydratedRef = useRef(false);
+    const dragOrbitRef = useRef({ yaw: 0, pitch: 0 });
+    const dragStateRef = useRef({
+        active: false,
+        pointerId: null,
+        startX: 0,
+        startY: 0,
+    });
+    const touchPointsRef = useRef(new Map());
+    const pinchStateRef = useRef({
+        active: false,
+        startDistance: 0,
+        startZoom: 0,
+    });
+    if (!companionZoomHydratedRef.current) {
+        companionZoomRef.current = loadStoredCompanionZoom();
+        companionZoomHydratedRef.current = true;
+    }
+    // Lazy-mount VrmStage: only initialize the 3D engine once the scene is
+    // actually needed (first time active becomes true). This prevents the WebGL
+    // context and asset loads from firing in native/chat mode on startup.
+    const hasEverBeenActiveRef = useRef(active);
+    if (active)
+        hasEverBeenActiveRef.current = true;
+    const shouldMountVrm = hasEverBeenActiveRef.current;
+    const setCompanionZoom = useCallback((value) => {
+        const nextZoom = clampCompanionZoom(value);
+        companionZoomRef.current = nextZoom;
+        persistCompanionZoom(nextZoom);
+        for (const engine of stageEnginesRef.current) {
+            engine.setCompanionZoomNormalized(nextZoom);
+        }
+    }, []);
+    const handleStageEngineReady = useCallback((engine) => {
+        engine.setCompanionZoomNormalized(companionZoomRef.current);
+    }, []);
+    const handleStageLayerEngineReady = useCallback((_vrmPath, engine) => {
+        stageEnginesRef.current.add(engine);
+        engine.setCompanionZoomNormalized(companionZoomRef.current);
+        engine.setDragOrbitTarget(dragOrbitRef.current.yaw, dragOrbitRef.current.pitch);
+    }, []);
+    const handlePointerDownCapture = useCallback((event) => {
+        if (!active || !interactive || shouldIgnoreCameraDrag(event.target)) {
+            return;
+        }
+        if (typeof window.getSelection === "function") {
+            window.getSelection()?.removeAllRanges();
+        }
+        if (event.pointerType === "touch") {
+            touchPointsRef.current.set(event.pointerId, {
+                x: event.clientX,
+                y: event.clientY,
+            });
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        if (event.pointerType === "touch" && touchPointsRef.current.size >= 2) {
+            pinchStateRef.current = {
+                active: true,
+                startDistance: getTouchDistance(touchPointsRef.current),
+                startZoom: companionZoomRef.current,
+            };
+            dragStateRef.current = {
+                active: false,
+                pointerId: null,
+                startX: 0,
+                startY: 0,
+            };
+            dragOrbitRef.current = { yaw: 0, pitch: 0 };
+            for (const engine of stageEnginesRef.current) {
+                engine.resetDragOrbit();
+            }
+            event.preventDefault?.();
+            return;
+        }
+        dragStateRef.current = {
+            active: true,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+        };
+        event.preventDefault?.();
+    }, [active, interactive]);
+    const handlePointerMoveCapture = useCallback((event) => {
+        if (!active || !interactive)
+            return;
+        if (event.pointerType === "touch" &&
+            touchPointsRef.current.has(event.pointerId)) {
+            touchPointsRef.current.set(event.pointerId, {
+                x: event.clientX,
+                y: event.clientY,
+            });
+            if (pinchStateRef.current.active &&
+                touchPointsRef.current.size >= 2 &&
+                pinchStateRef.current.startDistance > 0) {
+                const viewportSpan = Math.max(1, Math.min(window.innerWidth || event.currentTarget.clientWidth || 1, window.innerHeight || event.currentTarget.clientHeight || 1));
+                const pinchDistance = getTouchDistance(touchPointsRef.current);
+                const zoomDelta = ((pinchDistance - pinchStateRef.current.startDistance) /
+                    viewportSpan) *
+                    COMPANION_ZOOM_PINCH_SENSITIVITY;
+                setCompanionZoom(pinchStateRef.current.startZoom + zoomDelta);
+                event.preventDefault();
+                return;
+            }
+        }
+        const dragState = dragStateRef.current;
+        if (!dragState.active || dragState.pointerId !== event.pointerId) {
+            return;
+        }
+        const width = window.innerWidth || event.currentTarget.clientWidth || 1;
+        const height = window.innerHeight || event.currentTarget.clientHeight || 1;
+        const deltaX = event.clientX - dragState.startX;
+        const deltaY = event.clientY - dragState.startY;
+        const yaw = (deltaX / width) * 1.35;
+        const pitch = (-deltaY / height) * 0.85;
+        dragOrbitRef.current = { yaw, pitch };
+        for (const engine of stageEnginesRef.current) {
+            engine.setDragOrbitTarget(yaw, pitch);
+        }
+        event.preventDefault();
+    }, [active, interactive, setCompanionZoom]);
+    const handleWheelCapture = useCallback((event) => {
+        if (!active || !interactive)
+            return;
+        const wheelPixels = getWheelPixels(event);
+        if (Math.abs(wheelPixels) < 0.01)
+            return;
+        setCompanionZoom(companionZoomRef.current -
+            wheelPixels * COMPANION_ZOOM_WHEEL_SENSITIVITY);
+        event.preventDefault();
+    }, [active, interactive, setCompanionZoom]);
+    const handleRootWheelCapture = useCallback((event) => {
+        if (!active || !interactive)
+            return;
+        if (hasFocusedTextEntry()) {
+            if (event.ctrlKey) {
+                event.preventDefault();
+            }
+            return;
+        }
+        handleWheelCapture(event);
+    }, [active, interactive, handleWheelCapture]);
+    const releaseCameraDrag = useCallback((event) => {
+        if (event.pointerType === "touch") {
+            touchPointsRef.current.delete(event.pointerId);
+            if (touchPointsRef.current.size < 2) {
+                pinchStateRef.current = {
+                    active: false,
+                    startDistance: 0,
+                    startZoom: companionZoomRef.current,
+                };
+            }
+        }
+        const dragState = dragStateRef.current;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        if (dragState.pointerId !== event.pointerId)
+            return;
+        dragStateRef.current = {
+            active: false,
+            pointerId: null,
+            startX: 0,
+            startY: 0,
+        };
+        dragOrbitRef.current = { yaw: 0, pitch: 0 };
+        for (const engine of stageEnginesRef.current) {
+            engine.resetDragOrbit();
+        }
+    }, []);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const preventGestureZoom = (event) => {
+            event.preventDefault();
+        };
+        root.addEventListener("gesturestart", preventGestureZoom, {
+            passive: false,
+        });
+        root.addEventListener("gesturechange", preventGestureZoom, {
+            passive: false,
+        });
+        root.addEventListener("gestureend", preventGestureZoom, {
+            passive: false,
+        });
+        return () => {
+            root.removeEventListener("gesturestart", preventGestureZoom);
+            root.removeEventListener("gesturechange", preventGestureZoom);
+            root.removeEventListener("gestureend", preventGestureZoom);
+        };
+    }, []);
+    useEffect(() => {
+        if (active && interactive)
+            return;
+        touchPointsRef.current.clear();
+        pinchStateRef.current = {
+            active: false,
+            startDistance: 0,
+            startZoom: companionZoomRef.current,
+        };
+        dragStateRef.current = {
+            active: false,
+            pointerId: null,
+            startX: 0,
+            startY: 0,
+        };
+        dragOrbitRef.current = { yaw: 0, pitch: 0 };
+        for (const engine of stageEnginesRef.current) {
+            engine.resetDragOrbit();
+        }
+    }, [active, interactive]);
+    useEffect(() => {
+        return () => {
+            stageEnginesRef.current.clear();
+        };
+    }, []);
+    const safeSelectedVrmIndex = selectedVrmIndex > 0 ? selectedVrmIndex : 1;
+    const vrmPath = selectedVrmIndex === 0 && customVrmUrl
+        ? customVrmUrl
+        : getVrmUrl(safeSelectedVrmIndex);
+    const fallbackPreviewUrl = selectedVrmIndex > 0
+        ? getVrmPreviewUrl(safeSelectedVrmIndex)
+        : getVrmPreviewUrl(1);
+    const worldUrl = uiTheme === "dark"
+        ? resolveAppAssetUrl("worlds/companion-night.spz")
+        : resolveAppAssetUrl("worlds/companion-day.spz");
+    const preloadAvatars = useMemo(() => {
+        if (tab !== "character" && tab !== "character-select") {
+            return [];
+        }
+        return Array.from({ length: VRM_COUNT }, (_, index) => {
+            const avatarIndex = index + 1;
+            return {
+                vrmPath: getVrmUrl(avatarIndex),
+                fallbackPreviewUrl: getVrmPreviewUrl(avatarIndex),
+            };
+        });
+    }, [tab]);
+    /* ── Preload all VRM files into browser cache for instant character swaps ── */
+    const preloadedRef = useRef(false);
+    useEffect(() => {
+        if (preloadedRef.current || preloadAvatars.length === 0)
+            return;
+        preloadedRef.current = true;
+        for (const entry of preloadAvatars) {
+            // Fire-and-forget fetch to warm browser cache; low priority.
+            void fetch(entry.vrmPath, { priority: "low" }).catch(() => { });
+        }
+    }, [preloadAvatars]);
+    return (_jsxs("div", { ref: rootRef, "data-testid": "companion-root", className: "relative flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden text-white font-display", style: {
+            overscrollBehavior: "none",
+        }, children: [_jsxs("div", { "aria-hidden": !active, className: `fixed inset-0 z-0 overflow-hidden rounded-2xl bg-[radial-gradient(circle_at_50%_120%,#212942_0%,#12151e_80%)] transition-opacity duration-200 ${active ? "opacity-100" : "pointer-events-none opacity-0"}`, style: {
+                    visibility: active ? "visible" : "hidden",
+                }, children: [_jsx("div", { className: "absolute inset-0 z-0 bg-cover opacity-60 bg-[radial-gradient(circle_at_10%_20%,rgba(255,255,255,0.03)_0%,transparent_40%),radial-gradient(circle_at_80%_80%,rgba(0,225,255,0.05)_0%,transparent_40%)] pointer-events-none" }), shouldMountVrm && (_jsx(VrmStage, { active: active, vrmPath: vrmPath, worldUrl: worldUrl, fallbackPreviewUrl: fallbackPreviewUrl, preloadAvatars: preloadAvatars, cameraProfile: "companion", onEngineReady: handleStageEngineReady, onLayerEngineReady: handleStageLayerEngineReady, playWaveOnAvatarChange: true, t: t })), _jsx("div", { "aria-hidden": "true", "data-testid": "companion-camera-drag-surface", className: `absolute inset-0 z-[1] select-none ${interactive ? "cursor-grab" : "pointer-events-none cursor-default"}`, onWheelCapture: handleRootWheelCapture, onPointerDownCapture: handlePointerDownCapture, onPointerMoveCapture: handlePointerMoveCapture, onPointerUpCapture: releaseCameraDrag, onPointerCancelCapture: releaseCameraDrag, onLostPointerCaptureCapture: releaseCameraDrag, style: {
+                            touchAction: "none",
+                            userSelect: "none",
+                            WebkitUserSelect: "none",
+                        } })] }), children] }));
+}
+export const CompanionSceneHost = memo(CompanionSceneSurface);
+// Re-export the hook so existing imports from this module keep working.
+export { useSharedCompanionScene } from "./shared-companion-scene-context";
+export function SharedCompanionScene({ active, interactive = true, children, }) {
+    return (_jsx(SharedCompanionSceneContext.Provider, { value: true, children: _jsx(CompanionSceneHost, { active: active, interactive: interactive, children: children }) }));
+}

package/components/CompanionShell.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Companion shell — renders CompanionView (VRM + chat dock).
+ *
+ * Used when `uiShellMode === "companion"`. Settings, character, skills, etc.
+ * require switching to native (advanced) mode via the header toggle.
+ */
+import type { Tab } from "@elizaos/app-core/navigation";
+export { COMPANION_OVERLAY_TABS } from "./companion-shell-styles";
+export interface CompanionShellProps {
+    tab: Tab;
+    actionNotice: {
+        text: string;
+        tone: string;
+    } | null;
+}
+export declare const CompanionShell: import("react").NamedExoticComponent<CompanionShellProps>;
+//# sourceMappingURL=CompanionShell.d.ts.map

package/components/CompanionShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompanionShell.d.ts","sourceRoot":"","sources":["../../src/components/CompanionShell.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAIxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAIlE,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,GAAG,CAAC;IACT,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,cAAc,2DASzB,CAAC"}

package/components/CompanionShell.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Companion shell — renders CompanionView (VRM + chat dock).
+ *
+ * Used when `uiShellMode === "companion"`. Settings, character, skills, etc.
+ * require switching to native (advanced) mode via the header toggle.
+ */
+import { useRenderGuard } from "@elizaos/app-core/hooks";
+import { memo } from "react";
+import { CompanionView } from "./CompanionView";
+export { COMPANION_OVERLAY_TABS } from "./companion-shell-styles";
+export const CompanionShell = memo(function CompanionShell(_props) {
+    useRenderGuard("CompanionShell");
+    return (_jsx("div", { className: "relative w-full h-[100vh] overflow-hidden", children: _jsx(CompanionView, {}) }));
+});

package/components/CompanionView.d.ts

@@ -0,0 +1,2 @@
+export declare const CompanionView: import("react").NamedExoticComponent<object>;
+//# sourceMappingURL=CompanionView.d.ts.map

package/components/CompanionView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompanionView.d.ts","sourceRoot":"","sources":["../../src/components/CompanionView.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,aAAa,8CAiGxB,CAAC"}

package/components/CompanionView.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRenderGuard } from "@elizaos/app-core/hooks";
+import { useApp } from "@elizaos/app-core/state";
+import { Button } from "@elizaos/ui";
+import { MessageCircle, Volume2, VolumeX } from "lucide-react";
+import { memo, useCallback, useEffect } from "react";
+import { ChatModalView } from "./ChatModalView";
+import { CompanionHeader } from "./companion/CompanionHeader";
+import { CompanionSceneHost, useSharedCompanionScene, } from "./companion/CompanionSceneHost";
+export const CompanionView = memo(function CompanionView() {
+    useRenderGuard("CompanionView");
+    const { uiLanguage, setUiLanguage, uiTheme, setUiTheme, chatAgentVoiceMuted, handleStartDraftConversation, setState, switchShellView, t, } = useApp();
+    const hasSharedCompanionScene = useSharedCompanionScene();
+    const handleShellViewChange = useCallback((view) => {
+        switchShellView(view);
+    }, [switchShellView]);
+    useEffect(() => {
+        setState("chatMode", "simple");
+    }, [setState]);
+    const overlay = (_jsxs("div", { className: "absolute inset-0 z-10 flex flex-col pointer-events-none", children: [_jsx(CompanionHeader, { activeShellView: "companion", onShellViewChange: handleShellViewChange, uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, children: _jsx("div", { className: "flex items-center justify-center", children: _jsxs("div", { className: "inline-flex items-center gap-2", "data-testid": "companion-header-chat-controls", "data-no-camera-drag": "true", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-label": chatAgentVoiceMuted ? "Agent voice off" : "Agent voice on", "aria-pressed": !chatAgentVoiceMuted, title: chatAgentVoiceMuted ? "Agent voice off" : "Agent voice on", className: "h-11 min-h-[44px] min-w-[44px] rounded-full border border-white/15 bg-white/10 px-4 text-sm text-white shadow-sm backdrop-blur-sm hover:bg-white/20 hover:text-white", onClick: () => setState("chatAgentVoiceMuted", !chatAgentVoiceMuted), children: [chatAgentVoiceMuted ? (_jsx(VolumeX, { className: "mr-1.5 h-3.5 w-3.5" })) : (_jsx(Volume2, { className: "mr-1.5 h-3.5 w-3.5" })), "Voice"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-label": "New Chat", title: "New Chat", className: "hidden h-11 min-h-[44px] min-w-[44px] rounded-full border border-white/15 bg-white/10 px-4 text-sm text-white shadow-sm backdrop-blur-sm hover:bg-white/20 sm:inline-flex", onClick: () => void handleStartDraftConversation(), children: [_jsx(MessageCircle, { className: "mr-1 h-3.5 w-3.5" }), "New Chat"] })] }) }) }), _jsx("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 w-full max-w-3xl h-[45%] z-20 pointer-events-auto", children: _jsx(ChatModalView, { variant: "companion-dock" }) }), _jsx("div", { className: "flex-1 grid grid-cols-[1fr_auto] gap-6 min-h-0 relative", children: _jsx("div", { className: "w-full h-full" }) })] }));
+    return hasSharedCompanionScene ? (overlay) : (_jsx(CompanionSceneHost, { active: true, children: overlay }));
+});

package/components/ConfigPageView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Config page — agent-level configuration.
+ *
+ * Sections:
+ *   1. Wallet & RPC providers
+ *   2. Secrets (modal)
+ */
+export declare function ConfigPageView({ embedded }: {
+    embedded?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConfigPageView.d.ts.map

package/components/ConfigPageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigPageView.d.ts","sourceRoot":"","sources":["../../src/components/ConfigPageView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAsbH,wBAAgB,cAAc,CAAC,EAAE,QAAgB,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CA8T1E"}