@elizaos/app-core 2.0.0-alpha.37

package/test/app/chat-composer.test.tsx

@@ -0,0 +1,181 @@
+// @vitest-environment jsdom
+
+import React, { createRef } from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ChatComposer } from "../../src/components/ChatComposer";
+
+function createVoiceState(
+  overrides?: Partial<React.ComponentProps<typeof ChatComposer>["voice"]>,
+) {
+  return {
+    supported: true,
+    isListening: false,
+    captureMode: "idle" as const,
+    interimTranscript: "",
+    isSpeaking: false,
+    toggleListening: vi.fn(),
+    startListening: vi.fn(),
+    stopListening: vi.fn(),
+    ...overrides,
+  };
+}
+
+function renderComposer(
+  overrides?: Partial<React.ComponentProps<typeof ChatComposer>>,
+) {
+  const voice = createVoiceState(overrides?.voice);
+  const { voice: _voiceOverride, ...restOverrides } = overrides ?? {};
+  const props: React.ComponentProps<typeof ChatComposer> = {
+    variant: "default",
+    textareaRef: createRef<HTMLTextAreaElement>(),
+    chatInput: "",
+    chatPendingImagesCount: 0,
+    isComposerLocked: false,
+    isAgentStarting: false,
+    chatSending: false,
+    agentVoiceEnabled: true,
+    t: (key) => key,
+    onAttachImage: vi.fn(),
+    onChatInputChange: vi.fn(),
+    onKeyDown: vi.fn(),
+    onSend: vi.fn(),
+    onStop: vi.fn(),
+    onStopSpeaking: vi.fn(),
+    onToggleAgentVoice: vi.fn(),
+    ...restOverrides,
+    voice,
+  };
+
+  let renderer!: TestRenderer.ReactTestRenderer;
+  act(() => {
+    renderer = TestRenderer.create(React.createElement(ChatComposer, props));
+  });
+  const buttons = renderer.root.findAllByType("button" as React.ElementType);
+  const micButton = buttons.find(
+    (button) =>
+      typeof button.props.onPointerDown === "function" &&
+      typeof button.props.onPointerUp === "function",
+  );
+  const speakerButton = buttons.find(
+    (button) => button.props["aria-label"] === "Agent voice on",
+  );
+
+  if (!micButton) {
+    throw new Error("Expected mic button to be present");
+  }
+
+  return { renderer, props, voice, micButton, speakerButton };
+}
+
+function findTextarea(renderer: TestRenderer.ReactTestRenderer) {
+  return renderer.root.findByProps({
+    "data-testid": "chat-composer-textarea",
+  });
+}
+
+describe("ChatComposer mic controls", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("starts compose dictation on a quick click", async () => {
+    const { voice, micButton } = renderComposer();
+
+    await act(async () => {
+      micButton.props.onClick();
+    });
+
+    expect(voice.startListening).toHaveBeenCalledWith("compose");
+  });
+
+  it("starts push-to-talk on hold and sends on release", async () => {
+    vi.useFakeTimers();
+    const { voice, micButton } = renderComposer();
+
+    await act(async () => {
+      micButton.props.onPointerDown({});
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(voice.startListening).toHaveBeenCalledWith("push-to-talk");
+
+    await act(async () => {
+      micButton.props.onPointerUp();
+      vi.runAllTimers();
+    });
+
+    expect(voice.stopListening).toHaveBeenCalledWith({ submit: true });
+  });
+
+  it("toggles agent voice from the speaker button", async () => {
+    const { props, speakerButton } = renderComposer();
+    if (!speakerButton) {
+      throw new Error("Expected speaker button to be present");
+    }
+
+    await act(async () => {
+      speakerButton.props.onClick();
+    });
+
+    expect(props.onToggleAgentVoice).toHaveBeenCalledOnce();
+  });
+
+  it("can hide the agent voice toggle for desktop chat", () => {
+    const { speakerButton } = renderComposer({
+      showAgentVoiceToggle: false,
+    });
+
+    expect(speakerButton).toBeUndefined();
+  });
+
+  it("renders the default mic button like the paperclip button when idle", () => {
+    const { micButton } = renderComposer();
+    const icon = micButton.findByType("svg" as React.ElementType);
+
+    expect(String(micButton.props.className)).not.toContain("border");
+    expect(String(micButton.props.className)).toContain("text-muted");
+    expect(String(micButton.props.className)).toContain("hover:bg-black/5");
+    expect(String(icon.props.className)).toContain("w-4 h-4");
+  });
+
+  it("turns the default mic button solid red when active", () => {
+    const { micButton } = renderComposer({
+      voice: {
+        isListening: true,
+      },
+    });
+
+    expect(String(micButton.props.className)).toContain("bg-[#ff6b70]");
+    expect(String(micButton.props.className)).toContain("text-white");
+    expect(String(micButton.props.className)).not.toContain("shadow-[0_0_");
+  });
+
+  it("keeps the default chat input neutral while listening", () => {
+    const { renderer } = renderComposer({
+      voice: {
+        isListening: true,
+      },
+    });
+    const textarea = findTextarea(renderer);
+    const container = textarea.parent;
+
+    expect(String(container.props.className)).toContain("border-border/40");
+    expect(String(container.props.className)).toContain("bg-card/60");
+    expect(String(container.props.className)).not.toContain("border-[#ff5a5f]");
+    expect(String(container.props.className)).not.toContain("bg-[#2a0f13]");
+  });
+
+  it("shows Listening... in an empty default chat input while listening", () => {
+    const { renderer } = renderComposer({
+      chatInput: "",
+      voice: {
+        isListening: true,
+        captureMode: "compose",
+      },
+    });
+    const textarea = findTextarea(renderer);
+
+    expect(textarea.props.placeholder).toBe("Listening...");
+  });
+});

package/test/app/chat-language-header.test.ts

@@ -0,0 +1,64 @@
+import { MiladyClient } from "@elizaos/app-core/api";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+function buildSseDoneResponse(): Response {
+  const encoder = new TextEncoder();
+  const body = new ReadableStream<Uint8Array>({
+    start(controller) {
+      controller.enqueue(
+        encoder.encode(
+          'data: {"type":"done","fullText":"ok","agentName":"Milady"}\n\n',
+        ),
+      );
+      controller.close();
+    },
+  });
+  return new Response(body, {
+    status: 200,
+    headers: { "Content-Type": "text/event-stream" },
+  });
+}
+
+describe("MiladyClient language header propagation", () => {
+  const originalFetch = globalThis.fetch;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    globalThis.fetch = fetchMock as typeof globalThis.fetch;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it("adds X-Milady-UI-Language to normal chat requests", async () => {
+    fetchMock.mockResolvedValueOnce(
+      new Response(JSON.stringify({ text: "ok", agentName: "Milady" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    const client = new MiladyClient("http://localhost:2138", "token");
+    client.setUiLanguage("zh-CN");
+    await client.sendChatRest("hello");
+
+    const init = fetchMock.mock.calls[0][1] as RequestInit;
+    const headers = new Headers(init.headers as HeadersInit);
+    expect(headers.get("X-Milady-UI-Language")).toBe("zh-CN");
+  });
+
+  it("adds X-Milady-UI-Language to streaming chat requests", async () => {
+    fetchMock.mockResolvedValueOnce(buildSseDoneResponse());
+
+    const client = new MiladyClient("http://localhost:2138");
+    client.setUiLanguage("zh-CN");
+    await client.sendConversationMessageStream("conv-1", "hello", () => {});
+
+    const init = fetchMock.mock.calls[0][1] as RequestInit;
+    const headers = new Headers(init.headers as HeadersInit);
+    expect(headers.get("X-Milady-UI-Language")).toBe("zh-CN");
+    expect(headers.get("Accept")).toBe("text/event-stream");
+  });
+});

package/test/app/chat-message.test.tsx

@@ -0,0 +1,222 @@
+// @vitest-environment jsdom
+
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { describe, expect, it, vi } from "vitest";
+
+const { mockUseApp } = vi.hoisted(() => ({
+  mockUseApp: vi.fn(),
+}));
+
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => mockUseApp(),
+}));
+
+vi.mock("../../src/components/MessageContent", () => ({
+  MessageContent: ({ message }: { message: { text: string } }) =>
+    React.createElement("span", null, message.text),
+}));
+
+import { ChatMessage } from "../../src/components/ChatMessage";
+
+describe("ChatMessage actions", () => {
+  it("reveals assistant actions on tap when hover is unavailable", async () => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      configurable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      })),
+    });
+    mockUseApp.mockReturnValue({
+      copyToClipboard: vi.fn(),
+      t: (key: string) => key,
+    });
+
+    let tree!: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(ChatMessage, {
+          message: {
+            id: "assistant-1",
+            role: "assistant",
+            text: "hello there",
+            timestamp: 1,
+          },
+          onSpeak: vi.fn(),
+        }),
+      );
+    });
+
+    const actionButtonsBeforeTap = tree.root.findAll(
+      (node) =>
+        node.type === "button" && node.props["aria-label"] === "Copy message",
+    );
+    expect(actionButtonsBeforeTap).toHaveLength(1);
+    expect(
+      tree.root.findAll(
+        (node) =>
+          typeof node.props.className === "string" &&
+          node.props.className.includes("pointer-events-none opacity-0"),
+      ),
+    ).toHaveLength(1);
+
+    await act(async () => {
+      tree.root
+        .findByProps({ "data-testid": "chat-message" })
+        .props.onTouchEnd({
+          target: {
+            closest: () => null,
+          },
+        });
+    });
+
+    tree.root.findByProps({ "aria-label": "Copy message" });
+    expect(
+      tree.root.findAll(
+        (node) =>
+          typeof node.props.className === "string" &&
+          node.props.className.includes("opacity-100"),
+      ).length,
+    ).toBeGreaterThan(0);
+    expect(
+      tree.root.findByProps({ "aria-label": "Play message" }),
+    ).toBeDefined();
+  });
+
+  it("renders copy and play actions for assistant messages", async () => {
+    mockUseApp.mockReturnValue({
+      copyToClipboard: vi.fn(),
+      t: (key: string) => key,
+    });
+
+    let tree!: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(ChatMessage, {
+          message: {
+            id: "assistant-1",
+            role: "assistant",
+            text: "hello there",
+            timestamp: 1,
+          },
+          onSpeak: vi.fn(),
+        }),
+      );
+    });
+
+    expect(
+      tree.root.findByProps({ "aria-label": "Copy message" }),
+    ).toBeDefined();
+    expect(
+      tree.root.findByProps({ "aria-label": "Play message" }),
+    ).toBeDefined();
+  });
+
+  it("plays assistant messages from the message action button", async () => {
+    mockUseApp.mockReturnValue({
+      copyToClipboard: vi.fn(),
+      t: (key: string) => key,
+    });
+    const onSpeak = vi.fn();
+
+    let tree!: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(ChatMessage, {
+          message: {
+            id: "assistant-1",
+            role: "assistant",
+            text: "hello there",
+            timestamp: 1,
+          },
+          onSpeak,
+        }),
+      );
+    });
+
+    const playButton = tree.root.findByProps({ "aria-label": "Play message" });
+    await act(async () => {
+      playButton.props.onClick();
+    });
+
+    expect(onSpeak).toHaveBeenCalledWith("assistant-1", "hello there");
+  });
+
+  it("edits and resends user messages from the inline editor", async () => {
+    mockUseApp.mockReturnValue({
+      copyToClipboard: vi.fn(),
+      t: (key: string) => key,
+    });
+    const onEdit = vi.fn(async () => true);
+
+    let tree!: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(ChatMessage, {
+          message: {
+            id: "user-1",
+            role: "user",
+            text: "old text",
+            timestamp: 1,
+          },
+          onEdit,
+        }),
+      );
+    });
+
+    const editButton = tree.root.findByProps({ "aria-label": "Edit message" });
+    await act(async () => {
+      editButton.props.onClick();
+    });
+
+    const textarea = tree.root.findByProps({ "aria-label": "Edit message" });
+    await act(async () => {
+      textarea.props.onChange({ target: { value: "edited text" } });
+    });
+
+    const saveButton = tree.root
+      .findAllByType("button")
+      .find((button) =>
+        button.children.some((child) => child === "Save and resend"),
+      );
+    expect(saveButton).toBeDefined();
+
+    await act(async () => {
+      saveButton?.props.onClick();
+    });
+
+    expect(onEdit).toHaveBeenCalledWith("user-1", "edited text");
+  });
+
+  it("does not render a retry action for interrupted assistant messages", async () => {
+    mockUseApp.mockReturnValue({
+      copyToClipboard: vi.fn(),
+      t: (key: string) => key,
+    });
+
+    let tree!: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(ChatMessage, {
+          message: {
+            id: "assistant-1",
+            role: "assistant",
+            text: "partial",
+            interrupted: true,
+            timestamp: 1,
+          },
+          onSpeak: vi.fn(),
+        }),
+      );
+    });
+
+    expect(
+      tree.root.findAllByProps({ "aria-label": "Retry message" }),
+    ).toHaveLength(0);
+  });
+});

package/test/app/chat-modal-view.test.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockUseApp } = vi.hoisted(() => ({
+  mockUseApp: vi.fn(),
+}));
+
+const {
+  mockGetAgentAutomationMode,
+  mockSetAgentAutomationMode,
+  mockGetTradePermissionMode,
+  mockSetTradePermissionMode,
+} = vi.hoisted(() => ({
+  mockGetAgentAutomationMode: vi.fn(),
+  mockSetAgentAutomationMode: vi.fn(),
+  mockGetTradePermissionMode: vi.fn(),
+  mockSetTradePermissionMode: vi.fn(),
+}));
+
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => mockUseApp(),
+}));
+
+vi.mock("../../src/components/ChatView.js", () => ({
+  ChatView: () => React.createElement("section", null, "ChatView Ready"),
+}));
+
+vi.mock("../../src/components/ConversationsSidebar.js", () => ({
+  ConversationsSidebar: () =>
+    React.createElement("aside", null, "ConversationsSidebar Ready"),
+}));
+
+vi.mock("@elizaos/app-core/api", () => ({
+  client: {
+    getAgentAutomationMode: mockGetAgentAutomationMode,
+    setAgentAutomationMode: mockSetAgentAutomationMode,
+    getTradePermissionMode: mockGetTradePermissionMode,
+    setTradePermissionMode: mockSetTradePermissionMode,
+  },
+}));
+
+import { ChatModalView } from "../../src/components/ChatModalView";
+
+function createContext() {
+  return {
+    t: (k: string) => k,
+    conversations: [
+      {
+        id: "conv-1",
+        title: "General",
+        roomId: "room-1",
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+    ],
+    activeConversationId: "conv-1",
+    onboardingLoading: false,
+    startupPhase: "ready",
+    conversationMessages: [],
+    chatSending: false,
+    handleNewConversation: vi.fn(async () => {}),
+    handleChatClear: vi.fn(async () => {}),
+    setActionNotice: vi.fn(),
+    setTab: vi.fn(),
+    uiLanguage: "en",
+  };
+}
+
+function textOf(node: TestRenderer.ReactTestInstance): string {
+  return node.children
+    .map((child) => (typeof child === "string" ? child : textOf(child)))
+    .join("");
+}
+
+describe("ChatModalView", () => {
+  beforeEach(() => {
+    mockUseApp.mockReset();
+    mockGetAgentAutomationMode.mockReset();
+    mockSetAgentAutomationMode.mockReset();
+    mockGetTradePermissionMode.mockReset();
+    mockSetTradePermissionMode.mockReset();
+    mockGetAgentAutomationMode.mockResolvedValue({
+      mode: "connectors-only",
+      options: ["connectors-only", "full"],
+    });
+    mockSetAgentAutomationMode.mockImplementation(async (mode) => ({
+      mode,
+      options: ["connectors-only", "full"],
+    }));
+    mockGetTradePermissionMode.mockResolvedValue({
+      mode: "user-sign-only",
+      options: ["user-sign-only", "manual-local-key", "agent-auto"],
+    });
+    mockSetTradePermissionMode.mockImplementation(async (mode) => ({
+      mode,
+      options: ["user-sign-only", "manual-local-key", "agent-auto"],
+    }));
+    mockUseApp.mockReturnValue(createContext());
+  });
+
+  it("renders full overlay layout by default", async () => {
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(ChatModalView));
+    });
+
+    const overlays = tree?.root.findAll(
+      (node) => node.props["data-chat-game-overlay"] === true,
+    );
+    expect(overlays.length).toBe(1);
+
+    const shells = tree?.root.findAll(
+      (node) => node.props["data-chat-game-shell"] === true,
+    );
+    expect(shells.length).toBe(1);
+
+    const content = textOf(tree?.root);
+    expect(content).toContain("ChatView Ready");
+    expect(content).toContain("ConversationsSidebar Ready");
+  });
+
+  it("renders companion dock layout", async () => {
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(ChatModalView, {
+          variant: "companion-dock",
+        }),
+      );
+    });
+
+    const docks = tree?.root.findAll(
+      (node) => node.props["data-chat-game-dock"] === true,
+    );
+    expect(docks.length).toBe(1);
+
+    const overlays = tree?.root.findAll(
+      (node) => node.props["data-chat-game-overlay"] === true,
+    );
+    expect(overlays.length).toBe(0);
+
+    const shell = tree?.root.find(
+      (node) => node.props["data-chat-game-shell"] === true,
+    );
+    const thread = tree?.root.find(
+      (node) => node.props["data-chat-game-thread"] === true,
+    );
+    expect(String(shell.props.className)).toContain("overflow-visible");
+    expect(String(thread.props.className)).toContain("overflow-visible");
+  });
+
+  it("does not boot a new conversation in companion dock when none is active", async () => {
+    const handleNewConversation = vi.fn(async () => {});
+    mockUseApp.mockReturnValue({
+      ...createContext(),
+      activeConversationId: null,
+      handleNewConversation,
+    });
+
+    await act(async () => {
+      TestRenderer.create(
+        React.createElement(ChatModalView, {
+          variant: "companion-dock",
+        }),
+      );
+    });
+
+    expect(handleNewConversation).not.toHaveBeenCalled();
+  });
+
+  it("does not boot a new conversation before startup restore finishes", async () => {
+    const handleNewConversation = vi.fn(async () => {});
+    mockUseApp.mockReturnValue({
+      ...createContext(),
+      activeConversationId: null,
+      onboardingLoading: true,
+      handleNewConversation,
+    });
+
+    await act(async () => {
+      TestRenderer.create(
+        React.createElement(ChatModalView, {
+          variant: "companion-dock",
+        }),
+      );
+    });
+
+    expect(handleNewConversation).not.toHaveBeenCalled();
+  });
+});