@elizaos/app-core 2.0.0-alpha.37

package/src/components/GlobalEmoteOverlay.tsx

@@ -0,0 +1,152 @@
+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 milady-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 milady-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: "milady-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:
+                  "milady-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

@@ -0,0 +1,413 @@
+// @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: "Milady" },
+      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: "Milady" },
+      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: "Milady" },
+      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: "Milady" },
+      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: "Milady" },
+      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);
+  });
+});