feat(chat): add composer action menu

src/app/chat/components/__tests__/chat-input-bar.test.tsx

@@ -0,0 +1,174 @@
+/* @vitest-environment jsdom */
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  dispatch: vi.fn(),
+}));
+
+vi.mock("@/stores/chat/chat-context", () => ({
+  useChatDispatch: () => mocks.dispatch,
+}));
+vi.mock("@/providers/character-provider", () => ({
+  useActiveCharacter: () => ({ id: "maya-tan" }),
+  useActiveCharacterRoutes: () => ({
+    tip: "/characters/maya/tip",
+  }),
+}));
+vi.mock("../../hooks/use-chat-keyboard-avoidance", () => ({
+  useChatKeyboardAvoidance: () => undefined,
+}));
+vi.mock("../../hooks/use-chat-keyboard-diagnostics", () => ({
+  useChatKeyboardDiagnostics: () => undefined,
+}));
+
+import { ChatInputBar } from "../chat-input-bar";
+
+describe("ChatInputBar", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
+      .IS_REACT_ACT_ENVIRONMENT = true;
+    mocks.dispatch.mockReset();
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it("opens the ordered action menu, blurs input, and links to Tip", () => {
+    renderBar();
+    const textarea = getTextarea();
+    act(() => textarea.focus());
+    expect(document.activeElement).toBe(textarea);
+
+    act(() => getButton("Open chat actions").click());
+
+    expect(document.activeElement).not.toBe(textarea);
+    const menu = container.querySelector('[aria-label="Chat actions"]');
+    expect(menu).not.toBeNull();
+    expect(
+      Array.from(menu?.children ?? []).map((item) => item.textContent?.trim()),
+    ).toEqual(["Image", "Voice", "Tip"]);
+    expect(getButton("Close chat actions").getAttribute("aria-expanded")).toBe(
+      "true",
+    );
+    expect(
+      menu
+        ?.querySelector<HTMLAnchorElement>('[data-analytics-key="chat.open_tip"]')
+        ?.getAttribute("href"),
+    ).toBe("/characters/maya/tip");
+
+    act(() => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })));
+    expect(container.querySelector('[aria-label="Chat actions"]')).toBeNull();
+  });
+
+  it("injects image and voice promotions without persisting UI state", () => {
+    renderBar();
+
+    act(() => getButton("Open chat actions").click());
+    act(() => getButton("Image").click());
+    const imageEvent = mocks.dispatch.mock.calls[0]?.[0];
+    expect(imageEvent).toMatchObject({
+      type: "ChatPromotionInjected",
+      promotion: {
+        characterId: "maya-tan",
+        promotionType: "image",
+        lockType: "image_paywall",
+      },
+    });
+    expect(imageEvent.promotion.clientLockId).toMatch(/^promotion_/);
+    expect(container.querySelector('[aria-label="Chat actions"]')).toBeNull();
+
+    act(() => getButton("Open chat actions").click());
+    act(() => getButton("Voice").click());
+    const voiceEvent = mocks.dispatch.mock.calls[1]?.[0];
+    expect(voiceEvent).toMatchObject({
+      type: "ChatPromotionInjected",
+      promotion: {
+        characterId: "maya-tan",
+        promotionType: "voice",
+        lockType: "voice_message",
+      },
+    });
+    expect(voiceEvent.promotion.clientLockId).not.toBe(
+      imageEvent.promotion.clientLockId,
+    );
+  });
+
+  it("switches from actions to Send for non-whitespace input", () => {
+    renderBar();
+    act(() => getButton("Open chat actions").click());
+
+    setTextareaValue(getTextarea(), "Hello Maya");
+    expect(container.querySelector('[aria-label="Chat actions"]')).toBeNull();
+    expect(getButton("Send message")).not.toBeNull();
+
+    act(() => getButton("Send message").click());
+    expect(mocks.dispatch).toHaveBeenCalledWith({
+      type: "ChatSendMessage",
+      content: "Hello Maya",
+    });
+    expect(getTextarea().value).toBe("");
+    expect(document.activeElement).toBe(getTextarea());
+
+    setTextareaValue(getTextarea(), "   ");
+    expect(getButton("Open chat actions")).not.toBeNull();
+  });
+
+  it("closes the menu on outside interaction and when disabled", () => {
+    renderBar();
+    act(() => getButton("Open chat actions").click());
+    act(() => document.body.dispatchEvent(new Event("pointerdown", { bubbles: true })));
+    expect(container.querySelector('[aria-label="Chat actions"]')).toBeNull();
+
+    act(() => getButton("Open chat actions").click());
+    renderBar(true);
+    expect(container.querySelector('[aria-label="Chat actions"]')).toBeNull();
+    expect(getButton("Open chat actions").disabled).toBe(true);
+  });
+
+  function renderBar(disabled = false): void {
+    act(() => root.render(<ChatInputBar disabled={disabled} />));
+  }
+
+  function getTextarea(): HTMLTextAreaElement {
+    const textarea = container.querySelector("textarea");
+    if (!textarea) throw new Error("Missing chat textarea");
+    return textarea;
+  }
+
+  function getButton(label: string): HTMLButtonElement {
+    const button = Array.from(
+      container.querySelectorAll<HTMLButtonElement>("button"),
+    ).find(
+      (item) =>
+        item.getAttribute("aria-label") === label ||
+        item.textContent?.trim() === label,
+    );
+    if (!button) throw new Error(`Missing button: ${label}`);
+    return button;
+  }
+});
+
+function setTextareaValue(
+  textarea: HTMLTextAreaElement,
+  value: string,
+): void {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLTextAreaElement.prototype,
+    "value",
+  )?.set;
+  act(() => {
+    setter?.call(textarea, value);
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}

src/app/chat/components/__tests__/tailwind-components.test.tsx

@@ -91,7 +91,10 @@ describe("chat Tailwind components", () => {
       <ChatSendButton
         disabled={false}
         hasContent={true}
+        isMenuOpen={false}
+        menuId="chat-actions"
         onClick={() => undefined}
+        onMenuToggle={() => undefined}
         onPointerDownSend={() => undefined}
       />,
     );
@@ -99,7 +102,21 @@ describe("chat Tailwind components", () => {
       <ChatSendButton
         disabled={false}
         hasContent={false}
+        isMenuOpen={false}
+        menuId="chat-actions"
         onClick={() => undefined}
+        onMenuToggle={() => undefined}
+        onPointerDownSend={() => undefined}
+      />,
+    );
+    const openHtml = renderToStaticMarkup(
+      <ChatSendButton
+        disabled={false}
+        hasContent={false}
+        isMenuOpen={true}
+        menuId="chat-actions"
+        onClick={() => undefined}
+        onMenuToggle={() => undefined}
         onPointerDownSend={() => undefined}
       />,
     );
@@ -107,7 +124,10 @@ describe("chat Tailwind components", () => {
       <ChatSendButton
         disabled={true}
         hasContent={true}
+        isMenuOpen={false}
+        menuId="chat-actions"
         onClick={() => undefined}
+        onMenuToggle={() => undefined}
         onPointerDownSend={() => undefined}
       />,
     );
@@ -115,12 +135,17 @@ describe("chat Tailwind components", () => {
     expect(activeHtml).toContain('aria-label="Send message"');
     expect(activeHtml).toContain('data-analytics-ignore="true"');
     expect(activeHtml).not.toContain("data-analytics-key");
-    expect(activeHtml).toContain("size-(--chat-send-button-size,40px)");
+    expect(activeHtml).toContain("size-(--chat-send-button-size,42px)");
     expect(activeHtml).toContain(
       "bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]",
     );
-    expect(emptyHtml).toContain("bg-[#f8a8ce]");
-    expect(emptyHtml).toContain("text-[rgba(255,255,255,0.88)]");
+    expect(emptyHtml).toContain('aria-label="Open chat actions"');
+    expect(emptyHtml).toContain('aria-expanded="false"');
+    expect(emptyHtml).toContain('aria-controls="chat-actions"');
+    expect(emptyHtml).toContain('data-analytics-key="chat.toggle_actions"');
+    expect(openHtml).toContain('aria-label="Close chat actions"');
+    expect(openHtml).toContain('aria-expanded="true"');
+    expect(openHtml).toContain("bg-[#38262d]");
     expect(disabledHtml).toContain("disabled");
   });