@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

package/src/v2/components/chat/__tests__/CopilotChatAssistantMessage.learningFeedback.test.ts

@@ -10,12 +10,12 @@ import { useCopilotKit } from "../../../providers/useCopilotKit";
 import CopilotChatMessageView from "../CopilotChatMessageView.vue";
 import CopilotChatAssistantMessage from "../CopilotChatAssistantMessage.vue";
 import {
-  MESSAGE_FEEDBACK_EVENT_NAME,
-  getMessageFeedback,
-  setMessageFeedback,
+  ɵFEEDBACK_COMMENT_CLOSE_DELAY_MS as FEEDBACK_COMMENT_CLOSE_DELAY_MS,
+  ɵMESSAGE_FEEDBACK_EVENT_NAME as MESSAGE_FEEDBACK_EVENT_NAME,
+  ɵgetMessageFeedback as getMessageFeedback,
+  ɵsetMessageFeedback as setMessageFeedback,
   ɵresetMessageFeedbackCache,
-} from "../../../lib/message-feedback";
-import { FEEDBACK_COMMENT_CLOSE_DELAY_MS } from "../message-feedback";
+} from "@copilotkit/core";
 
 const THREAD_ID = "thread-1";
 const AGENT_ID = "agent-1";

package/src/v2/components/chat/__tests__/CopilotChatAttachmentQueue.test.ts

@@ -186,6 +186,34 @@ describe("CopilotChatAttachmentQueue", () => {
     ).toContain("hello attachment preview");
   });
 
+  it("decodes a text document as UTF-8", async () => {
+    const { getByTestId } = render(CopilotChatAttachmentQueue, {
+      props: {
+        attachments: [
+          createAttachment({
+            id: "doc-utf8",
+            type: "document",
+            status: "ready",
+            // "héllo ✓" in UTF-8, base64-encoded.
+            source: {
+              type: "data",
+              value: "aMOpbGxvIOKckw==",
+              mimeType: "text/plain",
+            },
+          }),
+        ],
+      },
+    });
+
+    await fireEvent.click(
+      getByTestId("copilot-chat-attachment-document-button"),
+    );
+    expect(
+      screen.getByTestId("copilot-chat-attachment-lightbox-document-text")
+        .textContent,
+    ).toContain("héllo ✓");
+  });
+
   it("non-previewable document remains inert", async () => {
     const { getByTestId, queryByTestId } = render(CopilotChatAttachmentQueue, {
       props: {

package/src/v2/components/chat/__tests__/CopilotChatInput.test.ts

@@ -128,9 +128,14 @@ beforeEach(() => {
   mockOnSubmitMessage.mockClear();
   vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(
     () =>
+      // A partial 2D context: the input measures text, and the recorder's
+      // waveform scales, clears, and fills.
       ({
         measureText: (text: string) => ({ width: text.length * 8 }),
         font: "",
+        scale: () => {},
+        clearRect: () => {},
+        fillRect: () => {},
       }) as unknown as CanvasRenderingContext2D,
   );
 });
@@ -397,6 +402,32 @@ describe("CopilotChatInput", () => {
     });
   });
 
+  it("does not empty the textarea to re-measure it on each keystroke on a phone", async () => {
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: query === "(max-width: 767px)",
+    }));
+    const valueSetter = vi.spyOn(HTMLTextAreaElement.prototype, "value", "set");
+    try {
+      renderWithProvider({
+        listeners: { onSubmitMessage: mockOnSubmitMessage },
+      });
+      const textarea = screen.getByRole("textbox");
+      await fireEvent.input(textarea, { target: { value: "ABCD" } });
+      const grid = textarea.closest("[data-layout]");
+      await waitFor(() => {
+        expect(grid?.getAttribute("data-layout")).toBe("expanded");
+      });
+
+      valueSetter.mockClear();
+      await fireEvent.input(textarea, { target: { value: "AEBCD" } });
+
+      expect(valueSetter).not.toHaveBeenCalledWith("");
+    } finally {
+      valueSetter.mockRestore();
+      vi.unstubAllGlobals();
+    }
+  });
+
   it("executes slash commands via keyboard selection", async () => {
     const handleFirst = vi.fn();
     const handleSecond = vi.fn();
@@ -477,6 +508,31 @@ describe("CopilotChatInput", () => {
     });
   });
 
+  it("opens the slash menu for typed text once commands arrive", async () => {
+    const toolsMenu = ref<{ label: string; action: () => void }[]>([]);
+    const Host = defineComponent({
+      setup: () => () =>
+        h(
+          CopilotChatConfigurationProvider,
+          { threadId: TEST_THREAD_ID },
+          {
+            default: () => h(CopilotChatInput, { toolsMenu: toolsMenu.value }),
+          },
+        ),
+    });
+    render(Host);
+
+    await fireEvent.input(screen.getByRole("textbox"), {
+      target: { value: "/sum" },
+    });
+    expect(screen.queryByTestId("copilot-slash-menu")).toBeNull();
+
+    toolsMenu.value = [{ label: "Summarize", action: vi.fn() }];
+
+    const menu = await screen.findByTestId("copilot-slash-menu");
+    expect(within(menu).getByRole("option").textContent).toContain("Summarize");
+  });
+
   it("limits slash menu height when commands exceed five items", async () => {
     const tools = Array.from({ length: 6 }, (_, index) => ({
       label: `Command ${index + 1}`,
@@ -559,6 +615,38 @@ describe("CopilotChatInput", () => {
     expect(screen.getByRole("button", { name: "Stop" })).toBe(getSendButton());
   });
 
+  describe("Enter while the agent runs", () => {
+    async function pressEnterWhileRunning(modelValue: string) {
+      const onStop = vi.fn();
+      renderWithProvider({
+        props: { modelValue, isRunning: true },
+        listeners: { onSubmitMessage: mockOnSubmitMessage, onStop },
+      });
+      await fireEvent.keyDown(
+        screen.getByPlaceholderText("Type a message..."),
+        {
+          key: "Enter",
+          shiftKey: false,
+        },
+      );
+      return onStop;
+    }
+
+    it("sends the typed text and does not stop the run", async () => {
+      const onStop = await pressEnterWhileRunning("  next question  ");
+
+      expect(mockOnSubmitMessage).toHaveBeenCalledWith("next question");
+      expect(onStop).not.toHaveBeenCalled();
+    });
+
+    it("stops the run when the input is empty", async () => {
+      const onStop = await pressEnterWhileRunning("");
+
+      expect(onStop).toHaveBeenCalledOnce();
+      expect(mockOnSubmitMessage).not.toHaveBeenCalled();
+    });
+  });
+
   it("names the send button with the configured labels", () => {
     renderWithProvider({
       template: `
@@ -799,7 +887,7 @@ describe("CopilotChatInput", () => {
 
     await fireEvent.click(addButton);
     const menuItem = await screen.findByRole("menuitem", {
-      name: "Add photos or files",
+      name: "Add attachments",
     });
     await fireEvent.click(menuItem);
     expect(handleAddFile).toHaveBeenCalledTimes(1);
@@ -1130,4 +1218,47 @@ describe("CopilotChatInput", () => {
       expect(input.value).toBe("部分");
     });
   });
+
+  // `onSubmitMessage` is both a declared prop (to detect a listener) and the
+  // `submit-message` emit. A template `@submit-message` listener must enable
+  // sending and fire once per send.
+  describe("@submit-message listener", () => {
+    function renderWithTemplateListener(onSubmit?: (value: string) => void) {
+      const Host = defineComponent({
+        components: { CopilotChatConfigurationProvider, CopilotChatInput },
+        setup() {
+          return { TEST_THREAD_ID, onSubmit };
+        },
+        template: onSubmit
+          ? `
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatInput model-value="hello" @submit-message="onSubmit" />
+            </CopilotChatConfigurationProvider>
+          `
+          : `
+            <CopilotChatConfigurationProvider :thread-id="TEST_THREAD_ID">
+              <CopilotChatInput model-value="hello" />
+            </CopilotChatConfigurationProvider>
+          `,
+      });
+      return render(Host);
+    }
+
+    it("enables the send button and fires the listener once per send", async () => {
+      const onSubmit = vi.fn();
+      renderWithTemplateListener(onSubmit);
+
+      expect(getSendButton().disabled).toBe(false);
+      await fireEvent.click(getSendButton());
+
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+      expect(onSubmit).toHaveBeenCalledWith("hello");
+    });
+
+    it("keeps the send button disabled without a listener", () => {
+      renderWithTemplateListener();
+
+      expect(getSendButton().disabled).toBe(true);
+    });
+  });
 });