@copilotkit/react-core 1.54.1 → 1.55.0-next.7

package/src/v2/components/chat/__tests__/CopilotChatMessageView.test.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { z } from "zod";
+import { vi } from "vitest";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import CopilotChatMessageView from "../CopilotChatMessageView";
+import {
+  ActivityMessage,
+  AssistantMessage,
+  Message,
+  UserMessage,
+} from "@ag-ui/core";
+import { ReactActivityMessageRenderer } from "../../../types";
+
+describe("CopilotChatMessageView activity rendering", () => {
+  const agentId = "default";
+  const threadId = "thread-test";
+
+  function renderMessageView({
+    messages,
+    renderActivityMessages,
+  }: {
+    messages: Message[];
+    renderActivityMessages?: ReactActivityMessageRenderer<any>[];
+  }) {
+    return render(
+      <CopilotKitProvider renderActivityMessages={renderActivityMessages}>
+        <CopilotChatConfigurationProvider agentId={agentId} threadId={threadId}>
+          <CopilotChatMessageView messages={messages} />
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>,
+    );
+  }
+
+  it("renders activity messages via matching custom renderer", () => {
+    const messages: Message[] = [
+      {
+        id: "act-1",
+        role: "activity",
+        activityType: "search-progress",
+        content: { percent: 42 },
+      } as ActivityMessage,
+    ];
+
+    const renderers: ReactActivityMessageRenderer<{ percent: number }>[] = [
+      {
+        activityType: "search-progress",
+        content: z.object({ percent: z.number() }),
+        render: ({ content }) => (
+          <div data-testid="activity-renderer">
+            Progress: {content.percent}%
+          </div>
+        ),
+      },
+    ];
+
+    renderMessageView({ messages, renderActivityMessages: renderers });
+
+    expect(screen.getByTestId("activity-renderer").textContent).toContain("42");
+  });
+
+  it("skips rendering when no activity renderer matches", () => {
+    const messages: Message[] = [
+      {
+        id: "act-2",
+        role: "activity",
+        activityType: "unknown-type",
+        content: { message: "should not render" },
+      } as ActivityMessage,
+    ];
+
+    renderMessageView({ messages, renderActivityMessages: [] });
+
+    expect(screen.queryByTestId("activity-renderer")).toBeNull();
+  });
+});
+
+describe("CopilotChatMessageView duplicate message deduplication", () => {
+  const agentId = "default";
+  const threadId = "thread-test";
+
+  function renderMessageView({ messages }: { messages: Message[] }) {
+    return render(
+      <CopilotKitProvider>
+        <CopilotChatConfigurationProvider agentId={agentId} threadId={threadId}>
+          <CopilotChatMessageView messages={messages} />
+        </CopilotChatConfigurationProvider>
+      </CopilotKitProvider>,
+    );
+  }
+
+  it("deduplicates messages with the same id, keeping the last occurrence", () => {
+    const messages: Message[] = [
+      {
+        id: "user-1",
+        role: "user",
+        content: "Hello",
+      } as UserMessage,
+      {
+        id: "assistant-1",
+        role: "assistant",
+        content: "Partial response...",
+      } as AssistantMessage,
+      {
+        id: "assistant-1",
+        role: "assistant",
+        content: "Full response from the assistant.",
+      } as AssistantMessage,
+    ];
+
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    renderMessageView({ messages });
+
+    // Should render only the last occurrence of assistant-1 (the complete one)
+    const assistantMessages = screen.getAllByTestId(
+      "copilot-assistant-message",
+    );
+    expect(assistantMessages).toHaveLength(1);
+
+    // Should render the user message too
+    const userMessages = screen.getAllByTestId("copilot-user-message");
+    expect(userMessages).toHaveLength(1);
+
+    // Should NOT produce React duplicate key warnings
+    const duplicateKeyWarnings = consoleSpy.mock.calls.filter(
+      (call) =>
+        typeof call[0] === "string" && call[0].includes("duplicate key"),
+    );
+    expect(duplicateKeyWarnings).toHaveLength(0);
+
+    consoleSpy.mockRestore();
+  });
+
+  it("preserves order of unique messages", () => {
+    const messages: Message[] = [
+      {
+        id: "user-1",
+        role: "user",
+        content: "First question",
+      } as UserMessage,
+      {
+        id: "assistant-1",
+        role: "assistant",
+        content: "First answer",
+      } as AssistantMessage,
+      {
+        id: "user-2",
+        role: "user",
+        content: "Second question",
+      } as UserMessage,
+      {
+        id: "assistant-2",
+        role: "assistant",
+        content: "Second answer",
+      } as AssistantMessage,
+    ];
+
+    renderMessageView({ messages });
+
+    const userMessages = screen.getAllByTestId("copilot-user-message");
+    const assistantMessages = screen.getAllByTestId(
+      "copilot-assistant-message",
+    );
+    expect(userMessages).toHaveLength(2);
+    expect(assistantMessages).toHaveLength(2);
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatSuggestionView.slots.e2e.test.tsx

@@ -0,0 +1,530 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { CopilotChatSuggestionView } from "../CopilotChatSuggestionView";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { Suggestion } from "@copilotkit/core";
+
+// Wrapper to provide required context
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      {children}
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+const createSuggestions = (): Suggestion[] => [
+  { title: "Suggestion 1", message: "Message 1", isLoading: false },
+  { title: "Suggestion 2", message: "Message 2", isLoading: false },
+  { title: "Suggestion 3", message: "Message 3", isLoading: false },
+];
+
+describe("CopilotChatSuggestionView Slot System E2E Tests", () => {
+  // ============================================================================
+  // 1. TAILWIND CLASS TESTS
+  // ============================================================================
+  describe("1. Tailwind Class Slot Override", () => {
+    describe("container slot", () => {
+      it("should apply tailwind class string to container", () => {
+        const suggestions = createSuggestions();
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              container="flex gap-4 bg-blue-50 p-4"
+            />
+          </TestWrapper>,
+        );
+
+        const containerEl = container.querySelector(".bg-blue-50");
+        expect(containerEl).toBeDefined();
+        expect(containerEl?.classList.contains("gap-4")).toBe(true);
+        expect(containerEl?.classList.contains("p-4")).toBe(true);
+      });
+
+      it("should merge container classes with default flex-wrap", () => {
+        const suggestions = createSuggestions();
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              container="custom-container-class"
+            />
+          </TestWrapper>,
+        );
+
+        const containerEl = container.querySelector(".custom-container-class");
+        expect(containerEl).toBeDefined();
+      });
+    });
+
+    describe("suggestion slot", () => {
+      it("should apply tailwind class string to all suggestion pills", () => {
+        const suggestions = createSuggestions();
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              suggestion="bg-green-100 hover:bg-green-200 rounded-full"
+            />
+          </TestWrapper>,
+        );
+
+        const pills = container.querySelectorAll(".bg-green-100");
+        expect(pills.length).toBe(3);
+        pills.forEach((pill) => {
+          expect(pill.classList.contains("rounded-full")).toBe(true);
+        });
+      });
+    });
+  });
+
+  // ============================================================================
+  // 2. PROPERTY PASSING TESTS
+  // ============================================================================
+  describe("2. Property Passing (onClick, disabled, etc.)", () => {
+    describe("container slot", () => {
+      it("should pass custom props to container", () => {
+        const suggestions = createSuggestions();
+        render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              container={{ "data-testid": "custom-container" }}
+            />
+          </TestWrapper>,
+        );
+
+        const containerEl = screen.queryByTestId("custom-container");
+        expect(containerEl).toBeDefined();
+      });
+
+      it("should pass custom onClick to container", () => {
+        const onClick = vi.fn();
+        const suggestions = createSuggestions();
+        render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              container={{ onClick, "data-testid": "clickable-container" }}
+            />
+          </TestWrapper>,
+        );
+
+        const containerEl = screen.queryByTestId("clickable-container");
+        if (containerEl) {
+          fireEvent.click(containerEl);
+          expect(onClick).toHaveBeenCalled();
+        }
+      });
+    });
+
+    describe("suggestion slot", () => {
+      it("should apply custom type to suggestion buttons", () => {
+        const suggestions = createSuggestions();
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              suggestion={{ type: "submit" }}
+            />
+          </TestWrapper>,
+        );
+
+        const buttons = container.querySelectorAll('button[type="submit"]');
+        // Each suggestion should have type="submit"
+        expect(buttons.length).toBeGreaterThan(0);
+      });
+
+      it("should apply disabled state to all suggestion pills", () => {
+        const suggestions = createSuggestions();
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              suggestion={{ disabled: true }}
+            />
+          </TestWrapper>,
+        );
+
+        const buttons = container.querySelectorAll("button[disabled]");
+        expect(buttons.length).toBe(3);
+      });
+    });
+
+    describe("onSelectSuggestion callback", () => {
+      it("should call onSelectSuggestion when suggestion is clicked", () => {
+        const onSelectSuggestion = vi.fn();
+        const suggestions = createSuggestions();
+        render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          </TestWrapper>,
+        );
+
+        const firstSuggestion = screen.getByText("Suggestion 1");
+        fireEvent.click(firstSuggestion);
+        expect(onSelectSuggestion).toHaveBeenCalledWith(suggestions[0], 0);
+      });
+
+      it("should call onSelectSuggestion with correct index for each suggestion", () => {
+        const onSelectSuggestion = vi.fn();
+        const suggestions = createSuggestions();
+        render(
+          <TestWrapper>
+            <CopilotChatSuggestionView
+              suggestions={suggestions}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          </TestWrapper>,
+        );
+
+        const secondSuggestion = screen.getByText("Suggestion 2");
+        fireEvent.click(secondSuggestion);
+        expect(onSelectSuggestion).toHaveBeenCalledWith(suggestions[1], 1);
+
+        const thirdSuggestion = screen.getByText("Suggestion 3");
+        fireEvent.click(thirdSuggestion);
+        expect(onSelectSuggestion).toHaveBeenCalledWith(suggestions[2], 2);
+      });
+    });
+  });
+
+  // ============================================================================
+  // 3. CUSTOM COMPONENT TESTS
+  // ============================================================================
+  describe("3. Custom Component Receiving Sub-components", () => {
+    it("should allow custom component for container", () => {
+      const CustomContainer = React.forwardRef<
+        HTMLDivElement,
+        React.HTMLAttributes<HTMLDivElement>
+      >(({ children, ...props }, ref) => (
+        <div ref={ref} data-testid="custom-container-component" {...props}>
+          <span>Suggestions:</span>
+          {children}
+        </div>
+      ));
+
+      const suggestions = createSuggestions();
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            container={CustomContainer as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-container-component");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toContain("Suggestions:");
+    });
+
+    it("should allow custom component for suggestion pills", () => {
+      const CustomSuggestionPill: React.FC<{
+        children: React.ReactNode;
+        onClick?: () => void;
+        isLoading?: boolean;
+      }> = ({ children, onClick, isLoading }) => (
+        <button
+          data-testid="custom-pill"
+          onClick={onClick}
+          disabled={isLoading}
+        >
+          [{children}]
+        </button>
+      );
+
+      const suggestions = createSuggestions();
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            suggestion={CustomSuggestionPill as any}
+          />
+        </TestWrapper>,
+      );
+
+      const customPills = screen.queryAllByTestId("custom-pill");
+      expect(customPills.length).toBe(3);
+      expect(customPills[0].textContent).toBe("[Suggestion 1]");
+    });
+
+    it("should pass isLoading to custom suggestion component", () => {
+      const CustomSuggestionPill: React.FC<{
+        children: React.ReactNode;
+        isLoading?: boolean;
+      }> = ({ children, isLoading }) => (
+        <button data-testid="custom-pill" data-loading={isLoading}>
+          {isLoading ? "Loading..." : children}
+        </button>
+      );
+
+      const suggestions: Suggestion[] = [
+        { title: "Suggestion 1", message: "Message 1", isLoading: true },
+        { title: "Suggestion 2", message: "Message 2", isLoading: false },
+      ];
+
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            suggestion={CustomSuggestionPill as any}
+          />
+        </TestWrapper>,
+      );
+
+      const pills = screen.queryAllByTestId("custom-pill");
+      expect(pills[0].getAttribute("data-loading")).toBe("true");
+      expect(pills[0].textContent).toBe("Loading...");
+      expect(pills[1].getAttribute("data-loading")).toBe("false");
+    });
+  });
+
+  // ============================================================================
+  // 4. CHILDREN RENDER FUNCTION (DRILL-DOWN) TESTS
+  // ============================================================================
+  describe("4. Children Render Function for Drill-down", () => {
+    it("should provide bound container and suggestion via children render function", () => {
+      const suggestions = createSuggestions();
+      const childrenFn = vi.fn((props) => (
+        <div data-testid="children-render">
+          <div data-testid="received-container">{props.container}</div>
+          <div data-testid="received-suggestion">{props.suggestion}</div>
+        </div>
+      ));
+
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView suggestions={suggestions}>
+            {childrenFn}
+          </CopilotChatSuggestionView>
+        </TestWrapper>,
+      );
+
+      expect(childrenFn).toHaveBeenCalled();
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs).toHaveProperty("container");
+      expect(callArgs).toHaveProperty("suggestion");
+      expect(callArgs).toHaveProperty("suggestions");
+      expect(callArgs).toHaveProperty("onSelectSuggestion");
+
+      expect(screen.queryByTestId("children-render")).toBeDefined();
+    });
+
+    it("should pass suggestions array through children render function", () => {
+      const suggestions = createSuggestions();
+      const childrenFn = vi.fn(() => <div />);
+
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView suggestions={suggestions}>
+            {childrenFn}
+          </CopilotChatSuggestionView>
+        </TestWrapper>,
+      );
+
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs.suggestions).toBe(suggestions);
+      expect(callArgs.suggestions.length).toBe(3);
+    });
+
+    it("should pass loadingIndexes through children render function", () => {
+      const suggestions = createSuggestions();
+      const loadingIndexes = [0, 2];
+      const childrenFn = vi.fn(() => <div />);
+
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            loadingIndexes={loadingIndexes}
+          >
+            {childrenFn}
+          </CopilotChatSuggestionView>
+        </TestWrapper>,
+      );
+
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs.loadingIndexes).toBe(loadingIndexes);
+    });
+
+    it("should allow custom layout via children render function", () => {
+      const suggestions = createSuggestions();
+      const onSelectSuggestion = vi.fn();
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            onSelectSuggestion={onSelectSuggestion}
+          >
+            {({ container: boundContainer, suggestions: suggestionsArr }) => (
+              <div data-testid="custom-layout">
+                <h3>Quick Actions</h3>
+                {boundContainer}
+                <p>Total: {suggestionsArr.length}</p>
+              </div>
+            )}
+          </CopilotChatSuggestionView>
+        </TestWrapper>,
+      );
+
+      const customLayout = screen.queryByTestId("custom-layout");
+      expect(customLayout).toBeDefined();
+      expect(customLayout?.textContent).toContain("Quick Actions");
+      expect(customLayout?.textContent).toContain("Total: 3");
+    });
+  });
+
+  // ============================================================================
+  // 5. CLASSNAME OVERRIDE TESTS
+  // ============================================================================
+  describe("5. className Override with Tailwind Strings", () => {
+    it("should apply className to container", () => {
+      const suggestions = createSuggestions();
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            className="custom-root-class mt-4"
+          />
+        </TestWrapper>,
+      );
+
+      const containerEl = container.querySelector(".custom-root-class");
+      expect(containerEl).toBeDefined();
+      expect(containerEl?.classList.contains("mt-4")).toBe(true);
+    });
+
+    it("should merge className with container slot class", () => {
+      const suggestions = createSuggestions();
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            className="root-class"
+            container="container-class"
+          />
+        </TestWrapper>,
+      );
+
+      // Both classes should be present
+      const containerEl = container.querySelector(".container-class");
+      expect(containerEl).toBeDefined();
+      // root className is passed to container
+      expect(containerEl?.classList.contains("root-class")).toBe(true);
+    });
+
+    it("should allow overriding default pointer-events-none", () => {
+      const suggestions = createSuggestions();
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            container="pointer-events-auto"
+          />
+        </TestWrapper>,
+      );
+
+      const containerEl = container.querySelector(".pointer-events-auto");
+      expect(containerEl).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 6. INTEGRATION / LOADING STATE TESTS
+  // ============================================================================
+  describe("6. Integration and Loading State Tests", () => {
+    it("should correctly render all slots with mixed customization", () => {
+      const onSelectSuggestion = vi.fn();
+      const suggestions = createSuggestions();
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            onSelectSuggestion={onSelectSuggestion}
+            container="container-style"
+            suggestion="suggestion-style"
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".container-style")).toBeDefined();
+      expect(container.querySelectorAll(".suggestion-style").length).toBe(3);
+    });
+
+    it("should show loading state for specific indexes", () => {
+      const suggestions = createSuggestions();
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            loadingIndexes={[1]}
+          />
+        </TestWrapper>,
+      );
+
+      // The second suggestion should show loading state
+      const buttons = screen.getAllByRole("button");
+      // Check for loading indicator or disabled state on second button
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it("should handle empty suggestions array", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView suggestions={[]} />
+        </TestWrapper>,
+      );
+
+      // Container should exist but have no suggestion pills
+      const buttons = container.querySelectorAll("button");
+      expect(buttons.length).toBe(0);
+    });
+
+    it("should handle single suggestion", () => {
+      const suggestions: Suggestion[] = [
+        { title: "Only One", message: "Single message", isLoading: false },
+      ];
+
+      render(
+        <TestWrapper>
+          <CopilotChatSuggestionView suggestions={suggestions} />
+        </TestWrapper>,
+      );
+
+      expect(screen.getByText("Only One")).toBeDefined();
+    });
+
+    it("should work with property objects and class strings mixed", () => {
+      const onClick = vi.fn();
+      const suggestions = createSuggestions();
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChatSuggestionView
+            suggestions={suggestions}
+            container={{ onClick, className: "flex gap-2" }}
+            suggestion="pill-style"
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".flex.gap-2")).toBeDefined();
+      expect(container.querySelectorAll(".pill-style").length).toBe(3);
+
+      const containerEl = container.querySelector(".flex.gap-2");
+      if (containerEl) {
+        fireEvent.click(containerEl);
+        expect(onClick).toHaveBeenCalled();
+      }
+    });
+  });
+});