@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/GlobalEmoteOverlay.tsx

@@ -1,152 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { APP_EMOTE_EVENT, type AppEmoteEventDetail } from "../events";
-
-const OVERLAY_LIFETIME_MS = 2400;
-
-const EMOTE_EMOJIS: Record<string, string> = {
-  wave: "\u{1F44B}",
-  kiss: "\u{1F48B}",
-  crying: "\u{1F62D}",
-  sorrow: "\u{1F614}",
-  "rude-gesture": "\u{1F595}",
-  "looking-around": "\u{1F440}",
-  "dance-happy": "\u{1F483}",
-  "dance-breaking": "\u{1F938}",
-  "dance-hiphop": "\u{1F57A}",
-  "dance-popping": "\u{1FAA9}",
-  "hook-punch": "\u{1F44A}",
-  punching: "\u{1F94A}",
-  "firing-gun": "\u{1F52B}",
-  "sword-swing": "\u{2694}",
-  chopping: "\u{1FA93}",
-  "spell-cast": "\u{1FA84}",
-  range: "\u{1F3F9}",
-  death: "\u{1F480}",
-  talk: "\u{1F5E3}",
-  squat: "\u{1F9CE}",
-  fishing: "\u{1F3A3}",
-  float: "\u{2728}",
-  jump: "\u{1F4A8}",
-  flip: "\u{1F938}",
-  crawling: "\u{1F43E}",
-  fall: "\u{1F4A5}",
-};
-
-function getOverlayEmoji(emoteId: string): string {
-  return EMOTE_EMOJIS[emoteId] ?? "\u2728";
-}
-
-export function GlobalEmoteOverlay() {
-  const [activeEmote, setActiveEmote] = useState<{
-    key: number;
-    emoteId: string;
-    emoji: string;
-  } | null>(null);
-  const hideTimerRef = useRef<number | null>(null);
-  const nextKeyRef = useRef(1);
-
-  useEffect(() => {
-    const handler = (event: Event) => {
-      const detail = (event as CustomEvent<AppEmoteEventDetail>).detail;
-      if (!detail?.emoteId) return;
-      if (detail.showOverlay === false) return;
-      if (hideTimerRef.current != null) {
-        window.clearTimeout(hideTimerRef.current);
-      }
-      const nextOverlay = {
-        key: nextKeyRef.current,
-        emoteId: detail.emoteId,
-        emoji: getOverlayEmoji(detail.emoteId),
-      };
-      nextKeyRef.current += 1;
-      setActiveEmote(nextOverlay);
-      hideTimerRef.current = window.setTimeout(() => {
-        setActiveEmote((current) =>
-          current?.key === nextOverlay.key ? null : current,
-        );
-        hideTimerRef.current = null;
-      }, OVERLAY_LIFETIME_MS);
-    };
-
-    window.addEventListener(APP_EMOTE_EVENT, handler);
-    return () => {
-      window.removeEventListener(APP_EMOTE_EVENT, handler);
-      if (hideTimerRef.current != null) {
-        window.clearTimeout(hideTimerRef.current);
-        hideTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      <style>{`
-        @keyframes eliza-emote-burst {
-          0% {
-            opacity: 0;
-            transform: translateY(32px) scale(0.42) rotate(-10deg);
-          }
-          16% {
-            opacity: 1;
-            transform: translateY(-10px) scale(1.12) rotate(5deg);
-          }
-          48% {
-            opacity: 1;
-            transform: translateY(-24px) scale(1) rotate(-2deg);
-          }
-          100% {
-            opacity: 0;
-            transform: translateY(-72px) scale(0.84) rotate(6deg);
-          }
-        }
-
-        @keyframes eliza-emote-aura {
-          0% {
-            opacity: 0;
-            transform: scale(0.5);
-          }
-          24% {
-            opacity: 0.7;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(1.35);
-          }
-        }
-      `}</style>
-      {activeEmote && (
-        <div
-          aria-hidden="true"
-          data-testid="global-emote-overlay"
-          data-emote-id={activeEmote.emoteId}
-          className="pointer-events-none fixed inset-0 z-[11000] flex items-start justify-center overflow-hidden"
-        >
-          <div className="relative mt-[18vh] flex items-center justify-center">
-            <div
-              className="absolute h-36 w-36 rounded-full"
-              style={{
-                background:
-                  "radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,214,102,0.18) 34%, rgba(255,214,102,0) 72%)",
-                filter: "blur(6px)",
-                animation: "eliza-emote-aura 2400ms ease-out forwards",
-              }}
-            />
-            <div
-              key={activeEmote.key}
-              className="relative flex h-32 w-32 items-center justify-center rounded-full border border-white/18 bg-black/18 text-[88px] shadow-[0_20px_54px_rgba(0,0,0,0.24)] backdrop-blur-md"
-              style={{
-                animation:
-                  "eliza-emote-burst 2400ms cubic-bezier(.2,.8,.2,1) forwards",
-              }}
-            >
-              <span className="select-none leading-none">
-                {activeEmote.emoji}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/Header.test.tsx

@@ -1,413 +0,0 @@
-// @vitest-environment jsdom
-
-import * as AppContext from "@elizaos/app-core/state";
-import React from "react";
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
-import { describe, expect, it, vi } from "vitest";
-import { Header } from "./Header";
-
-// Mock the AppContext
-vi.mock("@elizaos/app-core/state", () => ({
-  useApp: vi.fn(),
-}));
-
-vi.mock("@elizaos/app-core/hooks", () => ({
-  useBugReport: () => ({ isOpen: false, open: vi.fn(), close: vi.fn() }),
-}));
-
-vi.mock("@elizaos/app-core/navigation", () => ({
-  getTabGroups: () => [
-    {
-      label: "Chat",
-      tabs: ["chat"],
-      icon: () => React.createElement("span", null, "💬"),
-      description: "Chat",
-    },
-  ],
-}));
-
-vi.mock("@elizaos/app-core/components", () => ({
-  LanguageDropdown: () => React.createElement("div", null, "LanguageDropdown"),
-  ThemeToggle: () => React.createElement("div", null, "ThemeToggle"),
-}));
-
-vi.mock("@elizaos/ui", () => ({
-  IconTooltip: ({
-    children,
-  }: {
-    children: React.ReactNode;
-    content?: string;
-    side?: string;
-  }) => React.createElement("div", null, children),
-}));
-
-vi.mock("lucide-react", () => ({
-  AlertTriangle: () => React.createElement("span", null, "⚠"),
-  CircleUserRound: () => React.createElement("span", null, "👤"),
-  Bug: () => React.createElement("span", null, "🐛"),
-  CircleDollarSign: () => React.createElement("span", null, "💰"),
-  Menu: () => React.createElement("span", null, "☰"),
-  Monitor: () => React.createElement("span", null, "🖥"),
-  Smartphone: () => React.createElement("span", null, "📱"),
-  UserRound: () => React.createElement("span", null, "👤"),
-  Users: () => React.createElement("span", null, "👥"),
-  X: () => React.createElement("span", null, "✕"),
-}));
-
-describe("Header", () => {
-  it("renders agent name and shell toggle", async () => {
-    // Mock the useApp hook return value
-    const mockUseApp = {
-      t: (k: string) => k,
-      agentStatus: { state: "running", agentName: "Eliza" },
-      elizaCloudEnabled: false,
-      elizaCloudConnected: false,
-      elizaCloudCredits: null,
-      elizaCloudCreditsCritical: false,
-      elizaCloudCreditsLow: false,
-      elizaCloudTopUpUrl: "",
-      lifecycleBusy: false,
-      lifecycleAction: null,
-      handleRestart: vi.fn(),
-      handleStart: vi.fn(),
-      loadDropStatus: vi.fn().mockResolvedValue(undefined),
-      tab: "chat",
-      setTab: vi.fn(),
-      setState: vi.fn(),
-      plugins: [],
-      uiLanguage: "en",
-      setUiLanguage: vi.fn(),
-      uiTheme: "dark",
-      setUiTheme: vi.fn(),
-      uiShellMode: "native",
-      switchShellView: vi.fn(),
-    };
-
-    // @ts-expect-error - test uses a narrowed subset of the full app context type.
-    vi.spyOn(AppContext, "useApp").mockReturnValue(mockUseApp);
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(<Header />);
-    });
-    if (!testRenderer) {
-      throw new Error("Failed to render Header");
-    }
-    const root = (testRenderer as ReactTestRenderer).root;
-
-    // Check shell toggle button
-    const shellToggle = root.findByProps({ "data-testid": "ui-shell-toggle" });
-    const activeDesktopToggle = root.findByProps({
-      "data-testid": "ui-shell-toggle-desktop",
-    });
-    const inactiveCharacterToggle = root.findByProps({
-      "data-testid": "ui-shell-toggle-character",
-    });
-    const inactiveCompanionToggle = root.findByProps({
-      "data-testid": "ui-shell-toggle-companion",
-    });
-    expect(shellToggle).toBeDefined();
-    expect(String(shellToggle.props.className)).toContain("border-border/60");
-    expect(String(shellToggle.props.className)).toContain("bg-transparent");
-    expect(String(activeDesktopToggle.props.className)).toContain(
-      "text-[#8a6500]",
-    );
-    expect(String(activeDesktopToggle.props.className)).toContain("bg-bg/55");
-    expect(String(activeDesktopToggle.props.className)).toContain(
-      "dark:text-[#f0b232]",
-    );
-    expect(String(inactiveCharacterToggle.props.className)).toContain(
-      "text-muted-strong",
-    );
-    expect(String(inactiveCompanionToggle.props.className)).toContain(
-      "text-muted-strong",
-    );
-    expect(mockUseApp.setState).toHaveBeenCalledWith("chatMode", "power");
-  });
-
-  it("uses minimal chrome for the character view and hides cloud pricing", async () => {
-    const mockUseApp = {
-      t: (k: string) => k,
-      agentStatus: { state: "running", agentName: "Eliza" },
-      elizaCloudEnabled: true,
-      elizaCloudConnected: true,
-      elizaCloudCredits: 12.34,
-      elizaCloudCreditsCritical: false,
-      elizaCloudCreditsLow: false,
-      elizaCloudTopUpUrl: "https://example.com/topup",
-      lifecycleBusy: false,
-      lifecycleAction: null,
-      handleRestart: vi.fn(),
-      handleStart: vi.fn(),
-      loadDropStatus: vi.fn().mockResolvedValue(undefined),
-      tab: "character",
-      setTab: vi.fn(),
-      setState: vi.fn(),
-      plugins: [],
-      uiLanguage: "en",
-      setUiLanguage: vi.fn(),
-      uiTheme: "dark",
-      setUiTheme: vi.fn(),
-      uiShellMode: "native",
-      switchShellView: vi.fn(),
-    };
-
-    // @ts-expect-error - test uses a narrowed subset of the full app context type.
-    vi.spyOn(AppContext, "useApp").mockReturnValue(mockUseApp);
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(<Header transparent />);
-    });
-    if (!testRenderer) {
-      throw new Error("Failed to render Header");
-    }
-
-    const header = (testRenderer as ReactTestRenderer).root.findByType(
-      "header",
-    );
-    expect(String(header.props.className)).toContain("bg-transparent");
-    expect(String(header.props.className)).toContain("border-transparent");
-    expect(
-      (testRenderer as ReactTestRenderer).root.findAll(
-        (node) => node.props.title === "Chat",
-      ),
-    ).toHaveLength(0);
-    expect(
-      (testRenderer as ReactTestRenderer).root.findAll(
-        (node) => node.props["aria-label"] === "Open navigation menu",
-      ),
-    ).toHaveLength(0);
-    expect(
-      (testRenderer as ReactTestRenderer).root.findAll(
-        (node) => node.props.title === "header.CloudCreditsBalanc",
-      ),
-    ).toHaveLength(0);
-  });
-
-  it("uses minimal chrome in companion mode", async () => {
-    const mockUseApp = {
-      t: (k: string) => k,
-      agentStatus: { state: "running", agentName: "Eliza" },
-      elizaCloudEnabled: false,
-      elizaCloudConnected: false,
-      elizaCloudCredits: null,
-      elizaCloudCreditsCritical: false,
-      elizaCloudCreditsLow: false,
-      elizaCloudTopUpUrl: "",
-      lifecycleBusy: false,
-      lifecycleAction: null,
-      handleRestart: vi.fn(),
-      handleStart: vi.fn(),
-      loadDropStatus: vi.fn().mockResolvedValue(undefined),
-      tab: "character",
-      setTab: vi.fn(),
-      setState: vi.fn(),
-      plugins: [],
-      uiLanguage: "en",
-      setUiLanguage: vi.fn(),
-      uiTheme: "dark",
-      setUiTheme: vi.fn(),
-      uiShellMode: "companion",
-      switchShellView: vi.fn(),
-    };
-
-    // @ts-expect-error - test uses a narrowed subset of the full app context type.
-    vi.spyOn(AppContext, "useApp").mockReturnValue(mockUseApp);
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(<Header transparent />);
-    });
-    if (!testRenderer) {
-      throw new Error("Failed to render Header");
-    }
-
-    const header = (testRenderer as ReactTestRenderer).root.findByType(
-      "header",
-    );
-    expect(String(header.props.className)).toContain("bg-transparent");
-    expect(String(header.props.className)).toContain("border-transparent");
-    expect(
-      (testRenderer as ReactTestRenderer).root.findAll(
-        (node) => node.props.title === "Chat",
-      ),
-    ).toHaveLength(0);
-    expect(
-      (testRenderer as ReactTestRenderer).root.findAll(
-        (node) => node.props["aria-label"] === "Open navigation menu",
-      ),
-    ).toHaveLength(0);
-  });
-
-  it("routes cloud credits to settings billing instead of an external link", async () => {
-    const setTab = vi.fn();
-    const setState = vi.fn();
-    const mockUseApp = {
-      t: (k: string) => k,
-      agentStatus: { state: "running", agentName: "Eliza" },
-      elizaCloudEnabled: true,
-      elizaCloudConnected: true,
-      elizaCloudCredits: 12.34,
-      elizaCloudCreditsCritical: false,
-      elizaCloudCreditsLow: false,
-      elizaCloudTopUpUrl: "https://example.com/topup",
-      lifecycleBusy: false,
-      lifecycleAction: null,
-      handleRestart: vi.fn(),
-      handleStart: vi.fn(),
-      loadDropStatus: vi.fn().mockResolvedValue(undefined),
-      tab: "chat",
-      setTab,
-      setState,
-      plugins: [],
-      uiLanguage: "en",
-      setUiLanguage: vi.fn(),
-      uiTheme: "dark",
-      setUiTheme: vi.fn(),
-      uiShellMode: "native",
-      switchShellView: vi.fn(),
-    };
-
-    // @ts-expect-error - test uses a narrowed subset of the full app context type.
-    vi.spyOn(AppContext, "useApp").mockReturnValue(mockUseApp);
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(<Header />);
-    });
-    if (!testRenderer) {
-      throw new Error("Failed to render Header");
-    }
-
-    const creditButton = (testRenderer as ReactTestRenderer).root.find(
-      (node) =>
-        node.type === "button" &&
-        node.props.title === "header.CloudCreditsBalanc",
-    );
-
-    await act(async () => {
-      creditButton.props.onClick();
-    });
-
-    expect(setState).toHaveBeenCalledWith("cloudDashboardView", "billing");
-    expect(setTab).toHaveBeenCalledWith("settings");
-  });
-
-  it("keeps cloud credits in the mobile menu instead of the small header", async () => {
-    const setTab = vi.fn();
-    const setState = vi.fn();
-    const mockUseApp = {
-      t: (k: string) => k,
-      agentStatus: { state: "running", agentName: "Eliza" },
-      elizaCloudEnabled: true,
-      elizaCloudConnected: true,
-      elizaCloudCredits: 12.34,
-      elizaCloudCreditsCritical: false,
-      elizaCloudCreditsLow: false,
-      elizaCloudTopUpUrl: "https://example.com/topup",
-      lifecycleBusy: false,
-      lifecycleAction: null,
-      handleRestart: vi.fn(),
-      handleStart: vi.fn(),
-      loadDropStatus: vi.fn().mockResolvedValue(undefined),
-      tab: "chat",
-      setTab,
-      setState,
-      plugins: [],
-      uiLanguage: "en",
-      setUiLanguage: vi.fn(),
-      uiTheme: "dark",
-      setUiTheme: vi.fn(),
-      uiShellMode: "native",
-      switchShellView: vi.fn(),
-    };
-
-    // @ts-expect-error - test uses a narrowed subset of the full app context type.
-    vi.spyOn(AppContext, "useApp").mockReturnValue(mockUseApp);
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(<Header />);
-    });
-    if (!testRenderer) {
-      throw new Error("Failed to render Header");
-    }
-
-    const root = (testRenderer as ReactTestRenderer).root;
-    const nav = root.findByType("nav");
-    expect(String(nav.props.className)).toContain("hidden sm:flex");
-    expect(
-      String(
-        root.findByProps({ "data-testid": "header-nav-icon-chat" }).props
-          .className,
-      ),
-    ).toContain("inline-flex md:hidden xl:inline-flex");
-    expect(
-      String(
-        root.findByProps({ "data-testid": "header-nav-label-chat" }).props
-          .className,
-      ),
-    ).toContain("hidden md:inline");
-    const desktopCreditButton = root.findByProps({
-      "data-testid": "header-cloud-credits-desktop",
-    });
-    expect(String(desktopCreditButton.props.className)).toContain("hidden");
-    expect(String(desktopCreditButton.props.className)).toContain(
-      "sm:inline-flex",
-    );
-    const desktopLanguageDropdown = root.findByProps({
-      "data-testid": "header-language-dropdown-desktop",
-    });
-    expect(String(desktopLanguageDropdown.props.className)).toContain("hidden");
-    expect(String(desktopLanguageDropdown.props.className)).toContain(
-      "sm:inline-flex",
-    );
-    const desktopThemeToggle = root.findByProps({
-      "data-testid": "header-theme-toggle-desktop",
-    });
-    expect(String(desktopThemeToggle.props.className)).toContain("hidden");
-    expect(String(desktopThemeToggle.props.className)).toContain("sm:flex");
-    const rightControls = root.findByProps({
-      "data-testid": "shell-header-right-controls",
-    });
-    const rightControlChildren = rightControls.findAll(
-      (node) => node.parent === rightControls,
-    );
-    expect(
-      rightControlChildren[rightControlChildren.length - 1]?.props[
-        "aria-label"
-      ],
-    ).toBe("Open navigation menu");
-
-    const menuButton = root.findByProps({
-      "aria-label": "Open navigation menu",
-    });
-    expect(String(menuButton.props.className)).toContain("sm:hidden");
-
-    await act(async () => {
-      menuButton.props.onClick();
-    });
-
-    const mobileCreditButton = root.findByProps({
-      "data-testid": "header-cloud-credits-mobile",
-    });
-    expect(mobileCreditButton.props.title).toBe("header.CloudCreditsBalanc");
-    expect(
-      root.findByProps({ "data-testid": "header-language-dropdown-mobile" }),
-    ).toBeDefined();
-    expect(
-      root.findByProps({ "data-testid": "header-theme-toggle-mobile" }),
-    ).toBeDefined();
-
-    await act(async () => {
-      mobileCreditButton.props.onClick();
-    });
-
-    expect(setState).toHaveBeenCalledWith("cloudDashboardView", "billing");
-    expect(setTab).toHaveBeenCalledWith("settings");
-    expect(
-      root.findAll((node) => node.props["aria-label"] === "Navigation menu"),
-    ).toHaveLength(0);
-  });
-});