@elizaos/app-core 2.0.0-alpha.52 → 2.0.0-alpha.53

package/src/hooks/useCanvasWindow.ts

@@ -1,372 +0,0 @@
-/**
- * useCanvasWindow
- *
- * Creates a floating BrowserWindow (via the Electrobun canvas RPC) that is
- * positioned and sized to match a DOM placeholder div.  The BrowserWindow
- * appears to be "embedded" because it is always kept aligned with the div.
- *
- * Works in:
- *   - Electrobun — calls via the preload-exposed renderer RPC
- *   - Legacy Electron — falls back to the historical Electron bridge
- *
- * Falls back gracefully (isReady=false, no window created) when neither
- * runtime is detected (web / Capacitor / SSR).
- */
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { invokeDesktopBridgeRequest } from "../bridge";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface UseCanvasWindowOptions {
-  /** URL to load inside the floating BrowserWindow. */
-  url: string;
-  /** When false the window is not created (and any existing one is destroyed). */
-  enabled: boolean;
-  /** Window title passed to canvasCreateWindow. */
-  title?: string;
-}
-
-export interface UseCanvasWindowResult {
-  /** Attach to the placeholder <div> that the BrowserWindow should cover. */
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  /** The canvas window ID returned by canvasCreateWindow, or null before ready. */
-  windowId: string | null;
-  /** True once the window has been created and positioned. */
-  isReady: boolean;
-  /** Navigate the canvas window to a new URL. */
-  navigate: (url: string) => void;
-  /** Show the canvas window (if it was hidden). */
-  show: () => void;
-  /** Hide the canvas window. */
-  hide: () => void;
-}
-
-// ---------------------------------------------------------------------------
-// Geometry helpers
-// ---------------------------------------------------------------------------
-
-function getScreenRect(el: HTMLElement): {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-} {
-  const rect = el.getBoundingClientRect();
-  return {
-    x: Math.round(rect.left + window.scrollX),
-    y: Math.round(rect.top + window.scrollY),
-    width: Math.round(rect.width),
-    height: Math.round(rect.height),
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-
-export function useCanvasWindow(
-  options: UseCanvasWindowOptions,
-): UseCanvasWindowResult {
-  const { url, enabled, title } = options;
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const windowIdRef = useRef<string | null>(null);
-  const [windowId, setWindowId] = useState<string | null>(null);
-  const [isReady, setIsReady] = useState(false);
-
-  // Stable refs so callbacks don't need to re-bind.
-  const urlRef = useRef(url);
-  urlRef.current = url;
-  const titleRef = useRef(title);
-  titleRef.current = title;
-
-  // Track last-synced bounds to avoid redundant bridge calls.
-  const lastBoundsRef = useRef<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const syncFrameRef = useRef<number | null>(null);
-  const trackingFrameRef = useRef<number | null>(null);
-  const animationTrackerCountRef = useRef(0);
-
-  // ---------------------------------------------------------------------------
-  // Sync position/size to the placeholder div
-  // ---------------------------------------------------------------------------
-
-  const syncBounds = useCallback(() => {
-    const el = containerRef.current;
-    const id = windowIdRef.current;
-    if (!el || !id) return;
-
-    const bounds = getScreenRect(el);
-
-    const last = lastBoundsRef.current;
-    if (
-      last &&
-      last.x === bounds.x &&
-      last.y === bounds.y &&
-      last.width === bounds.width &&
-      last.height === bounds.height
-    ) {
-      return; // Nothing changed — skip the bridge call.
-    }
-
-    lastBoundsRef.current = bounds;
-
-    void invokeDesktopBridgeRequest({
-      rpcMethod: "canvasSetBounds",
-      ipcChannel: "canvas:setBounds",
-      params: { id, ...bounds },
-    }).catch((err: unknown) => {
-      console.warn("[useCanvasWindow] canvas:setBounds failed", err);
-    });
-  }, []);
-
-  const scheduleSyncBounds = useCallback(() => {
-    if (trackingFrameRef.current !== null || syncFrameRef.current !== null) {
-      return;
-    }
-    syncFrameRef.current = requestAnimationFrame(() => {
-      syncFrameRef.current = null;
-      syncBounds();
-    });
-  }, [syncBounds]);
-
-  const startTrackingBounds = useCallback(() => {
-    if (trackingFrameRef.current !== null) {
-      return;
-    }
-    const loop = () => {
-      syncBounds();
-      trackingFrameRef.current = requestAnimationFrame(loop);
-    };
-    trackingFrameRef.current = requestAnimationFrame(loop);
-  }, [syncBounds]);
-
-  const stopTrackingBounds = useCallback(() => {
-    if (trackingFrameRef.current !== null) {
-      cancelAnimationFrame(trackingFrameRef.current);
-      trackingFrameRef.current = null;
-    }
-    if (syncFrameRef.current !== null) {
-      cancelAnimationFrame(syncFrameRef.current);
-      syncFrameRef.current = null;
-    }
-  }, []);
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle: create / destroy window
-  // ---------------------------------------------------------------------------
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    let destroyed = false;
-    let createdId: string | null = null;
-
-    // Determine initial position from the container div (if already mounted).
-    const el = containerRef.current;
-    const initial = el
-      ? getScreenRect(el)
-      : { x: 100, y: 100, width: 800, height: 600 };
-
-    void invokeDesktopBridgeRequest<{ id?: string }>({
-      rpcMethod: "canvasCreateWindow",
-      ipcChannel: "canvas:createWindow",
-      params: {
-        url: urlRef.current,
-        title: titleRef.current ?? "Canvas",
-        x: initial.x,
-        y: initial.y,
-        width: initial.width,
-        height: initial.height,
-      },
-    })
-      .then((result) => {
-        if (!result) {
-          return;
-        }
-        if (destroyed) {
-          // Component unmounted before the promise resolved — clean up.
-          const id = result.id;
-          if (id) {
-            void invokeDesktopBridgeRequest({
-              rpcMethod: "canvasDestroyWindow",
-              ipcChannel: "canvas:destroyWindow",
-              params: { id },
-            }).catch(() => {});
-          }
-          return;
-        }
-
-        const id = result.id;
-        if (!id) {
-          console.warn("[useCanvasWindow] canvasCreateWindow returned no id");
-          return;
-        }
-
-        createdId = id;
-        windowIdRef.current = id;
-        setWindowId(id);
-        lastBoundsRef.current = null; // Force a setBounds on next sync.
-        setIsReady(true);
-        scheduleSyncBounds();
-      })
-      .catch((err: unknown) => {
-        console.warn("[useCanvasWindow] canvas:createWindow failed", err);
-      });
-
-    const isTrackedTarget = (target: EventTarget | null) => {
-      const trackedElement = containerRef.current;
-      return (
-        trackedElement !== null &&
-        target instanceof Node &&
-        trackedElement.contains(target)
-      );
-    };
-    const handleViewportChange = () => {
-      scheduleSyncBounds();
-    };
-    const startAnimationTracking = (event: Event) => {
-      if (!isTrackedTarget(event.target)) {
-        return;
-      }
-      animationTrackerCountRef.current += 1;
-      startTrackingBounds();
-    };
-    const stopAnimationTracking = (event: Event) => {
-      if (!isTrackedTarget(event.target)) {
-        return;
-      }
-      animationTrackerCountRef.current = Math.max(
-        0,
-        animationTrackerCountRef.current - 1,
-      );
-      if (animationTrackerCountRef.current === 0) {
-        stopTrackingBounds();
-        scheduleSyncBounds();
-      }
-    };
-
-    window.addEventListener("resize", handleViewportChange);
-    window.addEventListener("scroll", handleViewportChange, true);
-    window.addEventListener("transitionstart", startAnimationTracking, true);
-    window.addEventListener("transitionend", stopAnimationTracking, true);
-    window.addEventListener("transitioncancel", stopAnimationTracking, true);
-    window.addEventListener("animationstart", startAnimationTracking, true);
-    window.addEventListener("animationend", stopAnimationTracking, true);
-    window.addEventListener("animationcancel", stopAnimationTracking, true);
-    window.visualViewport?.addEventListener("resize", handleViewportChange);
-    window.visualViewport?.addEventListener("scroll", handleViewportChange);
-
-    // ResizeObserver: pick up size changes from layout shifts.
-    let ro: ResizeObserver | null = null;
-    if (el && typeof ResizeObserver !== "undefined") {
-      ro = new ResizeObserver(() => {
-        scheduleSyncBounds();
-      });
-      ro.observe(el);
-    }
-
-    return () => {
-      destroyed = true;
-      animationTrackerCountRef.current = 0;
-      stopTrackingBounds();
-      ro?.disconnect();
-      window.removeEventListener("resize", handleViewportChange);
-      window.removeEventListener("scroll", handleViewportChange, true);
-      window.removeEventListener(
-        "transitionstart",
-        startAnimationTracking,
-        true,
-      );
-      window.removeEventListener("transitionend", stopAnimationTracking, true);
-      window.removeEventListener(
-        "transitioncancel",
-        stopAnimationTracking,
-        true,
-      );
-      window.removeEventListener(
-        "animationstart",
-        startAnimationTracking,
-        true,
-      );
-      window.removeEventListener("animationend", stopAnimationTracking, true);
-      window.removeEventListener(
-        "animationcancel",
-        stopAnimationTracking,
-        true,
-      );
-      window.visualViewport?.removeEventListener(
-        "resize",
-        handleViewportChange,
-      );
-      window.visualViewport?.removeEventListener(
-        "scroll",
-        handleViewportChange,
-      );
-
-      const id = createdId ?? windowIdRef.current;
-      if (id) {
-        windowIdRef.current = null;
-        setWindowId(null);
-        setIsReady(false);
-        lastBoundsRef.current = null;
-        void invokeDesktopBridgeRequest({
-          rpcMethod: "canvasDestroyWindow",
-          ipcChannel: "canvas:destroyWindow",
-          params: { id },
-        }).catch(() => {});
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, scheduleSyncBounds, startTrackingBounds, stopTrackingBounds]);
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  const navigate = useCallback((newUrl: string) => {
-    const id = windowIdRef.current;
-    if (!id) return;
-    void invokeDesktopBridgeRequest({
-      rpcMethod: "canvasNavigate",
-      ipcChannel: "canvas:navigate",
-      params: { id, url: newUrl },
-    }).catch((err: unknown) => {
-      console.warn("[useCanvasWindow] canvas:navigate failed", err);
-    });
-  }, []);
-
-  const show = useCallback(() => {
-    const id = windowIdRef.current;
-    if (!id) return;
-    void invokeDesktopBridgeRequest({
-      rpcMethod: "canvasShow",
-      ipcChannel: "canvas:show",
-      params: { id },
-    }).catch((err: unknown) => {
-      console.warn("[useCanvasWindow] canvas:show failed", err);
-    });
-  }, []);
-
-  const hide = useCallback(() => {
-    const id = windowIdRef.current;
-    if (!id) return;
-    void invokeDesktopBridgeRequest({
-      rpcMethod: "canvasHide",
-      ipcChannel: "canvas:hide",
-      params: { id },
-    }).catch((err: unknown) => {
-      console.warn("[useCanvasWindow] canvas:hide failed", err);
-    });
-  }, []);
-
-  return { containerRef, windowId, isReady, navigate, show, hide };
-}

package/src/hooks/useChatAvatarVoice.ts

@@ -1,111 +0,0 @@
-import { useEffect, useEffectEvent, useRef, useState } from "react";
-import {
-  CHAT_AVATAR_VOICE_EVENT,
-  type ChatAvatarVoiceEventDetail,
-  dispatchWindowEvent,
-} from "../events";
-
-const CHAT_AVATAR_MOUTH_STEP = 0.02;
-const CHAT_AVATAR_SILENCE: ChatAvatarVoiceEventDetail = {
-  mouthOpen: 0,
-  isSpeaking: false,
-};
-
-function normalizeMouthOpen(value: number | undefined): number {
-  const clamped = Math.max(0, Math.min(1, value ?? 0));
-  const stepped =
-    Math.round(clamped / CHAT_AVATAR_MOUTH_STEP) * CHAT_AVATAR_MOUTH_STEP;
-  return stepped < CHAT_AVATAR_MOUTH_STEP ? 0 : Math.min(1, stepped);
-}
-
-function normalizeChatAvatarVoice(
-  value: Partial<ChatAvatarVoiceEventDetail> | null | undefined,
-): ChatAvatarVoiceEventDetail {
-  return {
-    mouthOpen: normalizeMouthOpen(value?.mouthOpen),
-    isSpeaking: value?.isSpeaking === true,
-  };
-}
-
-function isSameChatAvatarVoice(
-  left: ChatAvatarVoiceEventDetail,
-  right: ChatAvatarVoiceEventDetail,
-): boolean {
-  return (
-    left.isSpeaking === right.isSpeaking && left.mouthOpen === right.mouthOpen
-  );
-}
-
-export interface ChatAvatarVoiceBridgeOptions {
-  mouthOpen: number;
-  isSpeaking: boolean;
-  usingAudioAnalysis?: boolean;
-  onSpeakingChange?: (isSpeaking: boolean) => void;
-}
-
-export function useChatAvatarVoiceBridge({
-  mouthOpen,
-  isSpeaking,
-  usingAudioAnalysis = false,
-  onSpeakingChange,
-}: ChatAvatarVoiceBridgeOptions): void {
-  const voice = normalizeChatAvatarVoice({
-    mouthOpen,
-    isSpeaking: isSpeaking && !usingAudioAnalysis,
-  });
-  const lastVoiceRef = useRef<ChatAvatarVoiceEventDetail>(CHAT_AVATAR_SILENCE);
-  const emitSpeakingChange = useEffectEvent((nextIsSpeaking: boolean) => {
-    onSpeakingChange?.(nextIsSpeaking);
-  });
-
-  useEffect(() => {
-    if (lastVoiceRef.current.isSpeaking !== voice.isSpeaking) {
-      emitSpeakingChange(voice.isSpeaking);
-    }
-    if (isSameChatAvatarVoice(lastVoiceRef.current, voice)) {
-      return;
-    }
-    lastVoiceRef.current = voice;
-    dispatchWindowEvent(CHAT_AVATAR_VOICE_EVENT, voice);
-  }, [voice]);
-
-  useEffect(() => {
-    return () => {
-      if (lastVoiceRef.current.isSpeaking) {
-        emitSpeakingChange(false);
-      }
-      if (isSameChatAvatarVoice(lastVoiceRef.current, CHAT_AVATAR_SILENCE)) {
-        return;
-      }
-      lastVoiceRef.current = CHAT_AVATAR_SILENCE;
-      dispatchWindowEvent(CHAT_AVATAR_VOICE_EVENT, CHAT_AVATAR_SILENCE);
-    };
-  }, []);
-}
-
-export function useChatAvatarVoiceState(): ChatAvatarVoiceEventDetail {
-  const [voice, setVoice] =
-    useState<ChatAvatarVoiceEventDetail>(CHAT_AVATAR_SILENCE);
-
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    const handleVoiceEvent = (event: Event) => {
-      const detail = (event as CustomEvent<ChatAvatarVoiceEventDetail>).detail;
-      const nextVoice = normalizeChatAvatarVoice(detail);
-      setVoice((previousVoice) =>
-        isSameChatAvatarVoice(previousVoice, nextVoice)
-          ? previousVoice
-          : nextVoice,
-      );
-    };
-
-    window.addEventListener(CHAT_AVATAR_VOICE_EVENT, handleVoiceEvent);
-    return () =>
-      window.removeEventListener(CHAT_AVATAR_VOICE_EVENT, handleVoiceEvent);
-  }, []);
-
-  return voice;
-}

package/src/hooks/useContextMenu.ts

@@ -1,127 +0,0 @@
-/**
- * Listens for native desktop context-menu events
- * and dispatches actions into the app state.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import { subscribeDesktopBridgeEvent } from "../bridge";
-import {
-  appendSavedCustomCommand,
-  loadSavedCustomCommands,
-  type SavedCustomCommand,
-} from "../chat";
-import { useApp } from "../state/useApp";
-
-export type CustomCommand = SavedCustomCommand;
-
-/** Read saved custom commands from localStorage. */
-export function loadCustomCommands(): CustomCommand[] {
-  return loadSavedCustomCommands();
-}
-
-export interface ContextMenuState {
-  saveCommandModalOpen: boolean;
-  saveCommandText: string;
-  customCommands: CustomCommand[];
-  closeSaveCommandModal: () => void;
-  confirmSaveCommand: (name: string) => void;
-}
-
-export function useContextMenu(): ContextMenuState {
-  const { setState, chatInput, handleChatSend, setActionNotice } = useApp();
-
-  const [saveCommandModalOpen, setSaveCommandModalOpen] = useState(false);
-  const [saveCommandText, setSaveCommandText] = useState("");
-  const [customCommands, setCustomCommands] =
-    useState<CustomCommand[]>(loadCustomCommands);
-
-  useEffect(() => {
-    const onSaveAsCommand = (payload: unknown) => {
-      const command = payload as { text: string } | undefined;
-      if (!command?.text) return;
-      setSaveCommandText(command.text);
-      setSaveCommandModalOpen(true);
-    };
-
-    const onAskAgent = (payload: unknown) => {
-      const command = payload as { text: string } | undefined;
-      if (!command?.text) return;
-      setState("chatInput", command.text);
-      // Defer send to next tick so chatInput state propagates
-      setTimeout(() => handleChatSend(), 0);
-    };
-
-    const onCreateSkill = (payload: unknown) => {
-      const command = payload as { text: string } | undefined;
-      if (!command?.text) return;
-      const prompt = `Create a skill from the following content:\n\n"""${command.text}"""\n\nAnalyze this and create a reusable skill.`;
-      setState("chatInput", prompt);
-      setTimeout(() => handleChatSend(), 0);
-    };
-
-    const onQuoteInChat = (payload: unknown) => {
-      const command = payload as { text: string } | undefined;
-      if (!command?.text) return;
-      const quoted = `> ${command.text}\n\n`;
-      setState("chatInput", quoted + chatInput);
-    };
-
-    const unsubscribers = [
-      subscribeDesktopBridgeEvent({
-        rpcMessage: "contextMenuSaveAsCommand",
-        ipcChannel: "contextMenu:saveAsCommand",
-        listener: onSaveAsCommand,
-      }),
-      subscribeDesktopBridgeEvent({
-        rpcMessage: "contextMenuAskAgent",
-        ipcChannel: "contextMenu:askAgent",
-        listener: onAskAgent,
-      }),
-      subscribeDesktopBridgeEvent({
-        rpcMessage: "contextMenuCreateSkill",
-        ipcChannel: "contextMenu:createSkill",
-        listener: onCreateSkill,
-      }),
-      subscribeDesktopBridgeEvent({
-        rpcMessage: "contextMenuQuoteInChat",
-        ipcChannel: "contextMenu:quoteInChat",
-        listener: onQuoteInChat,
-      }),
-    ];
-
-    return () => {
-      for (const unsubscribe of unsubscribers) {
-        unsubscribe();
-      }
-    };
-  }, [setState, chatInput, handleChatSend]);
-
-  const closeSaveCommandModal = useCallback(() => {
-    setSaveCommandModalOpen(false);
-    setSaveCommandText("");
-  }, []);
-
-  const confirmSaveCommand = useCallback(
-    (name: string) => {
-      const cmd: CustomCommand = {
-        name,
-        text: saveCommandText,
-        createdAt: Date.now(),
-      };
-      appendSavedCustomCommand(cmd);
-      setCustomCommands(loadCustomCommands());
-      setSaveCommandModalOpen(false);
-      setSaveCommandText("");
-      setActionNotice(`Saved /${name} command`, "success");
-    },
-    [saveCommandText, setActionNotice],
-  );
-
-  return {
-    saveCommandModalOpen,
-    saveCommandText,
-    customCommands,
-    closeSaveCommandModal,
-    confirmSaveCommand,
-  };
-}

package/src/hooks/useKeyboardShortcuts.ts

@@ -1,86 +0,0 @@
-/**
- * Keyboard shortcuts manager for the application.
- */
-
-import { useCallback, useEffect } from "react";
-
-export interface ShortcutConfig {
-  key: string;
-  ctrl?: boolean;
-  shift?: boolean;
-  alt?: boolean;
-  meta?: boolean;
-  handler: () => void;
-  description: string;
-  scope?: "global" | "chat" | "settings";
-}
-
-export function useKeyboardShortcuts(shortcuts: ShortcutConfig[]) {
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      for (const shortcut of shortcuts) {
-        const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();
-        const ctrlMatch = !!shortcut.ctrl === event.ctrlKey;
-        const shiftMatch = !!shortcut.shift === event.shiftKey;
-        const altMatch = !!shortcut.alt === event.altKey;
-        const metaMatch = !!shortcut.meta === event.metaKey;
-
-        if (keyMatch && ctrlMatch && shiftMatch && altMatch && metaMatch) {
-          event.preventDefault();
-          shortcut.handler();
-          break;
-        }
-      }
-    },
-    [shortcuts],
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-}
-
-// Common shortcuts
-export const COMMON_SHORTCUTS: Omit<ShortcutConfig, "handler">[] = [
-  {
-    key: "k",
-    ctrl: true,
-    description: "Open command palette",
-    scope: "global",
-  },
-  { key: "Enter", ctrl: true, description: "Send message", scope: "chat" },
-  { key: "Escape", description: "Close modal / Cancel", scope: "global" },
-  {
-    key: "?",
-    shift: true,
-    description: "Show keyboard shortcuts",
-    scope: "global",
-  },
-  { key: "r", ctrl: true, description: "Restart agent", scope: "global" },
-  { key: " ", description: "Pause/Resume agent", scope: "global" },
-  {
-    key: "t",
-    ctrl: true,
-    shift: true,
-    description: "Toggle terminal",
-    scope: "global",
-  },
-];
-
-// Hook to get shortcuts display
-export function useShortcutsHelp(): string {
-  return COMMON_SHORTCUTS.map(
-    (s) => `${formatShortcut(s)} — ${s.description}`,
-  ).join("\n");
-}
-
-function formatShortcut(s: Omit<ShortcutConfig, "handler">): string {
-  const parts: string[] = [];
-  if (s.ctrl) parts.push("Ctrl");
-  if (s.shift) parts.push("Shift");
-  if (s.alt) parts.push("Alt");
-  if (s.meta) parts.push("Cmd");
-  parts.push(s.key.length === 1 ? s.key.toUpperCase() : s.key);
-  return parts.join("+");
-}