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

package/src/v2/components/chat/__tests__/CopilotChat.onError.test.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import {
+  MockStepwiseAgent,
+  renderWithCopilotKit,
+} from "../../../__tests__/utils/test-helpers";
+import { CopilotChat } from "../CopilotChat";
+import { CopilotKitCoreErrorCode } from "@copilotkit/core";
+import { type BaseEvent, type RunAgentInput } from "@ag-ui/client";
+import { Observable, EMPTY } from "rxjs";
+
+/**
+ * Mock agent whose connect() always fails
+ */
+class FailingConnectAgent extends MockStepwiseAgent {
+  run(input: RunAgentInput): Observable<BaseEvent> {
+    return super.run(input);
+  }
+
+  connect(_input: RunAgentInput): Observable<BaseEvent> {
+    return new Observable((subscriber) => {
+      subscriber.error(new Error("connect failed"));
+    });
+  }
+}
+
+/**
+ * Mock agent whose connect() succeeds (returns empty observable)
+ */
+class HealthyConnectAgent extends MockStepwiseAgent {
+  run(input: RunAgentInput): Observable<BaseEvent> {
+    return super.run(input);
+  }
+
+  connect(_input: RunAgentInput): Observable<BaseEvent> {
+    return EMPTY;
+  }
+}
+
+describe("CopilotChat onError", () => {
+  it("connectAgent failure fires onError on CopilotChat and does not crash", async () => {
+    const agent = new FailingConnectAgent();
+    const chatOnError = vi.fn();
+
+    renderWithCopilotKit({
+      agent,
+      children: <CopilotChat welcomeScreen={false} onError={chatOnError} />,
+    });
+
+    // Wait for the connectAgent error to propagate
+    await vi.waitFor(() => {
+      expect(chatOnError).toHaveBeenCalled();
+    });
+
+    // Check that AGENT_CONNECT_FAILED is among the errors
+    const allCodes = chatOnError.mock.calls.map((c: any) => c[0].code);
+    expect(allCodes).toContain(CopilotKitCoreErrorCode.AGENT_CONNECT_FAILED);
+  });
+
+  it("onError on CopilotChat does not fire for a healthy agent", async () => {
+    const agent = new HealthyConnectAgent();
+    const chatOnError = vi.fn();
+
+    renderWithCopilotKit({
+      agent,
+      children: <CopilotChat welcomeScreen={false} onError={chatOnError} />,
+    });
+
+    // No errors should fire for a healthy agent
+    await new Promise((r) => setTimeout(r, 50));
+    expect(chatOnError).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,432 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { CopilotChat } from "../CopilotChat";
+import { CopilotChatView } from "../CopilotChatView";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { MockStepwiseAgent } from "../../../__tests__/utils/test-helpers";
+
+// Create a mock agent for testing
+const createMockAgent = () => new MockStepwiseAgent();
+
+// Wrapper to provide required context with mock agent
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const mockAgent = createMockAgent();
+  return (
+    <CopilotKitProvider agents__unsafe_dev_only={{ default: mockAgent }}>
+      <CopilotChatConfigurationProvider threadId="test-thread">
+        {children}
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>
+  );
+};
+
+describe("CopilotChat Slot System E2E Tests", () => {
+  // ============================================================================
+  // 1. TAILWIND CLASS TESTS - CHATVIEW SLOT
+  // ============================================================================
+  describe("1. Tailwind Class Slot Override - chatView Slot", () => {
+    describe("chatView slot", () => {
+      it("should apply tailwind class string to chatView", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChat chatView="bg-gradient-to-b from-white to-gray-50 rounded-xl shadow-2xl" />
+          </TestWrapper>,
+        );
+
+        const chatView = container.querySelector(".bg-gradient-to-b");
+        expect(chatView).toBeDefined();
+        expect(chatView?.classList.contains("rounded-xl")).toBe(true);
+        expect(chatView?.classList.contains("shadow-2xl")).toBe(true);
+      });
+
+      it("should apply custom background color via tailwind class", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChat chatView="bg-blue-50" />
+          </TestWrapper>,
+        );
+
+        const chatView = container.querySelector(".bg-blue-50");
+        expect(chatView).toBeDefined();
+      });
+    });
+  });
+
+  // ============================================================================
+  // 2. PROPERTY PASSING TESTS - CHATVIEW SLOT
+  // ============================================================================
+  describe("2. Property Passing - chatView Slot", () => {
+    describe("chatView slot", () => {
+      it("should pass custom props to chatView", () => {
+        render(
+          <TestWrapper>
+            <CopilotChat chatView={{ "data-testid": "custom-chat-view" }} />
+          </TestWrapper>,
+        );
+
+        const chatView = screen.queryByTestId("custom-chat-view");
+        expect(chatView).toBeDefined();
+      });
+
+      it("should pass className through props object", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotChat chatView={{ className: "custom-class-from-props" }} />
+          </TestWrapper>,
+        );
+
+        const chatView = container.querySelector(".custom-class-from-props");
+        expect(chatView).toBeDefined();
+      });
+    });
+  });
+
+  // ============================================================================
+  // 3. CUSTOM COMPONENT TESTS - CHATVIEW SLOT
+  // ============================================================================
+  describe("3. Custom Component - chatView Slot", () => {
+    it("should allow custom component for chatView", () => {
+      const CustomChatView: React.FC<any> = ({
+        messages,
+        isRunning,
+        ...props
+      }) => (
+        <div data-testid="custom-chat-view-component" {...props}>
+          <div className="custom-header">Custom Chat Interface</div>
+          <div className="messages-area">
+            {messages?.map((m: any) => (
+              <div key={m.id} className="message">
+                {m.content}
+              </div>
+            ))}
+          </div>
+          <div className="custom-footer">
+            {isRunning ? "Processing..." : "Ready"}
+          </div>
+        </div>
+      );
+
+      render(
+        <TestWrapper>
+          <CopilotChat chatView={CustomChatView as any} />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-chat-view-component");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toContain("Custom Chat Interface");
+    });
+
+    it("should pass messages to custom chatView component", () => {
+      const receivedProps: any[] = [];
+      const CustomChatView: React.FC<any> = (props) => {
+        receivedProps.push(props);
+        return (
+          <div data-testid="custom-view">
+            Messages: {props.messages?.length ?? 0}
+          </div>
+        );
+      };
+
+      render(
+        <TestWrapper>
+          <CopilotChat chatView={CustomChatView as any} />
+        </TestWrapper>,
+      );
+
+      expect(receivedProps.length).toBeGreaterThan(0);
+      expect(receivedProps[0]).toHaveProperty("messages");
+      expect(receivedProps[0]).toHaveProperty("isRunning");
+    });
+
+    it("should pass all CopilotChatView props to custom component", () => {
+      const receivedProps: any[] = [];
+      const CustomChatView: React.FC<any> = (props) => {
+        receivedProps.push(props);
+        return <div data-testid="custom-view" />;
+      };
+
+      render(
+        <TestWrapper>
+          <CopilotChat chatView={CustomChatView as any} />
+        </TestWrapper>,
+      );
+
+      expect(receivedProps.length).toBeGreaterThan(0);
+      const props = receivedProps[0];
+      // Check that standard CopilotChatViewProps are passed
+      expect(props).toHaveProperty("messages");
+      expect(props).toHaveProperty("isRunning");
+      expect(props).toHaveProperty("onSubmitMessage");
+    });
+  });
+
+  // ============================================================================
+  // 4. DRILL-DOWN INTO CHATVIEW SUB-SLOTS VIA PROPS OBJECT
+  // ============================================================================
+  describe("4. Drill-down into CopilotChatView Sub-slots via Props Object", () => {
+    it("should allow customizing nested messageView slot via props", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat
+            chatView={{
+              messageView: "custom-message-view-class",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      const messageView = container.querySelector(".custom-message-view-class");
+      expect(messageView).toBeDefined();
+    });
+
+    it("should allow customizing nested input slot via props", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat
+            chatView={{
+              input: "custom-input-class border-2 border-green-400",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      const input = container.querySelector(".custom-input-class");
+      expect(input).toBeDefined();
+    });
+
+    it("should allow customizing nested scrollView slot via props", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat
+            chatView={{
+              scrollView: "custom-scroll-view",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      const scrollView = container.querySelector(".custom-scroll-view");
+      expect(scrollView).toBeDefined();
+    });
+
+    it("should allow customizing nested input slot via props", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat
+            chatView={{
+              input: "custom-input bg-slate-100",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      const input = container.querySelector(".custom-input");
+      expect(input).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 5. CUSTOM CHATVIEW COMPONENT
+  // ============================================================================
+  describe("5. Custom ChatView Component for Complex Customization", () => {
+    it("should allow custom chatView component with full control", () => {
+      const CustomChatView: React.FC<any> = (props) => (
+        <div data-testid="fully-custom-chat" className="custom-chat-layout">
+          <CopilotChatView
+            {...props}
+            messageView="custom-message-from-wrapper"
+            input="custom-input-from-wrapper"
+          />
+        </div>
+      );
+
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat chatView={CustomChatView as any} />
+        </TestWrapper>,
+      );
+
+      expect(screen.queryByTestId("fully-custom-chat")).toBeDefined();
+      expect(container.querySelector(".custom-chat-layout")).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 6. CLASSNAME OVERRIDE TESTS
+  // ============================================================================
+  describe("6. className Override with Tailwind Strings", () => {
+    it("should apply tailwind string to chatView as className", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat chatView="h-full min-h-0 flex flex-col" />
+        </TestWrapper>,
+      );
+
+      const chatView = container.querySelector(".h-full");
+      expect(chatView).toBeDefined();
+      expect(chatView?.classList.contains("min-h-0")).toBe(true);
+      expect(chatView?.classList.contains("flex-col")).toBe(true);
+    });
+
+    it("should merge chatView tailwind classes with CopilotChatView defaults", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat chatView="custom-override-class" />
+        </TestWrapper>,
+      );
+
+      const chatView = container.querySelector(".custom-override-class");
+      expect(chatView).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 7. COPILOTCHAT-SPECIFIC PROPS
+  // ============================================================================
+  describe("7. CopilotChat-specific Props", () => {
+    it("should support agentId prop", () => {
+      // Create wrapper with the custom-agent registered
+      const customAgent = createMockAgent();
+      const { container } = render(
+        <CopilotKitProvider
+          agents__unsafe_dev_only={{
+            default: createMockAgent(),
+            "custom-agent": customAgent,
+          }}
+        >
+          <CopilotChatConfigurationProvider threadId="test-thread">
+            <CopilotChat agentId="custom-agent" />
+          </CopilotChatConfigurationProvider>
+        </CopilotKitProvider>,
+      );
+
+      // Component should render without errors
+      expect(container.firstChild).toBeDefined();
+    });
+
+    it("should support threadId prop", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat threadId="custom-thread-123" />
+        </TestWrapper>,
+      );
+
+      expect(container.firstChild).toBeDefined();
+    });
+
+    it("should support labels prop for customization", () => {
+      render(
+        <TestWrapper>
+          <CopilotChat
+            labels={{
+              chatInputPlaceholder: "Custom placeholder text...",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      const input = screen.queryByPlaceholderText("Custom placeholder text...");
+      expect(input).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 8. INTEGRATION TESTS
+  // ============================================================================
+  describe("8. Integration Tests", () => {
+    it("should render CopilotChat with all default components", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat />
+        </TestWrapper>,
+      );
+
+      // Should render the chat interface
+      expect(container.firstChild).toBeDefined();
+    });
+
+    it("should combine chatView customization with nested slot customization via props", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat
+            chatView={{
+              className: "root-chat-view",
+              messageView: "custom-messages",
+              input: "custom-input",
+              scrollView: "custom-scroll",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".root-chat-view")).toBeDefined();
+      expect(container.querySelector(".custom-messages")).toBeDefined();
+      expect(container.querySelector(".custom-input")).toBeDefined();
+      expect(container.querySelector(".custom-scroll")).toBeDefined();
+    });
+
+    it("should work with mixed props and tailwind classes", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat
+            chatView={{
+              className: "mixed-class",
+            }}
+          />
+        </TestWrapper>,
+      );
+
+      const chatView = container.querySelector(".mixed-class");
+      expect(chatView).toBeDefined();
+    });
+
+    it("should handle transcription-related props", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotChat />
+        </TestWrapper>,
+      );
+
+      // Component should render without errors even with transcription features
+      expect(container.firstChild).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 9. CALLBACK AND HANDLER TESTS
+  // ============================================================================
+  describe("9. Callback and Handler Tests", () => {
+    it("should render CopilotChat and allow callback customization via custom component", () => {
+      const onSubmitMessage = vi.fn();
+      const CustomChatView: React.FC<any> = (props) => {
+        // Use the provided onSubmitMessage or our custom one
+        return <CopilotChatView {...props} onSubmitMessage={onSubmitMessage} />;
+      };
+
+      render(
+        <TestWrapper>
+          <CopilotChat chatView={CustomChatView as any} />
+        </TestWrapper>,
+      );
+
+      // The component should render without errors
+      expect(onSubmitMessage).not.toHaveBeenCalled();
+    });
+
+    it("should support suggestions rendering", () => {
+      // Note: CopilotChat manages suggestions internally via useAutoSuggestions
+      // We test that the chatView slot receives and renders suggestions
+      render(
+        <TestWrapper>
+          <CopilotChat />
+        </TestWrapper>,
+      );
+
+      // CopilotChat should render without errors
+      // Actual suggestion rendering depends on agent state
+    });
+  });
+});

package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { z } from "zod";
+import {
+  MockStepwiseAgent,
+  activitySnapshotEvent,
+  renderWithCopilotKit,
+  runFinishedEvent,
+  runStartedEvent,
+  testId,
+} from "../../../__tests__/utils/test-helpers";
+import { ReactActivityMessageRenderer } from "../../../types";
+import { useCopilotKit } from "../../../providers";
+
+describe("CopilotChat activity message rendering", () => {
+  it("renders custom components for activity snapshots", async () => {
+    const agent = new MockStepwiseAgent();
+    const agentId = "search-agent";
+    agent.agentId = agentId;
+
+    const activityRenderer: ReactActivityMessageRenderer<{
+      status: string;
+      percent: number;
+    }> = {
+      activityType: "search-progress",
+      content: z.object({ status: z.string(), percent: z.number() }),
+      render: ({ content, agent }) => (
+        <div data-testid="activity-card">
+          {content.status} · {content.percent}% · {agent?.agentId}
+        </div>
+      ),
+    };
+
+    renderWithCopilotKit({
+      agents: { [agentId]: agent },
+      agentId,
+      renderActivityMessages: [activityRenderer],
+    });
+
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "Start search" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("Start search")).toBeDefined();
+    });
+
+    const activityMessageId = testId("activity");
+    agent.emit(runStartedEvent());
+    agent.emit(
+      activitySnapshotEvent({
+        messageId: activityMessageId,
+        activityType: "search-progress",
+        content: { status: "Fetching", percent: 30 },
+      }),
+    );
+    agent.emit(runFinishedEvent());
+
+    await waitFor(() => {
+      const textContent = screen.getByTestId("activity-card").textContent ?? "";
+      expect(textContent).toContain("Fetching");
+      expect(textContent).toContain(agentId);
+    });
+  });
+
+  it("skips unmatched activity types when no renderer exists", async () => {
+    const agent = new MockStepwiseAgent();
+
+    renderWithCopilotKit({
+      agent,
+      renderActivityMessages: [],
+    });
+
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "Start search" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("Start search")).toBeDefined();
+    });
+
+    const activityMessageId = testId("activity-unmatched");
+    agent.emit(runStartedEvent());
+    agent.emit(
+      activitySnapshotEvent({
+        messageId: activityMessageId,
+        activityType: "unknown",
+        content: { note: "no-op" },
+      }),
+    );
+    agent.emit(runFinishedEvent());
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("activity-card")).toBeNull();
+    });
+  });
+
+  it("useCopilotKit provides valid copilotkit instance inside activity message renderer", async () => {
+    const agent = new MockStepwiseAgent();
+    const agentId = "test-agent";
+    agent.agentId = agentId;
+
+    let capturedCopilotkit: any = "not-called";
+
+    // Matches real-world pattern: inline arrow function with hooks
+    const activityRenderer: ReactActivityMessageRenderer<{ message: string }> =
+      {
+        activityType: "test-activity",
+        content: z.object({ message: z.string() }),
+        render: ({ content }) => {
+          const { copilotkit } = useCopilotKit();
+          capturedCopilotkit = copilotkit;
+          return <div data-testid="activity-render">{content.message}</div>;
+        },
+      };
+
+    renderWithCopilotKit({
+      agents: { [agentId]: agent },
+      agentId,
+      renderActivityMessages: [activityRenderer],
+    });
+
+    // Trigger user message and activity event
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "Test message" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    await waitFor(() => {
+      expect(screen.getByText("Test message")).toBeDefined();
+    });
+
+    agent.emit(runStartedEvent());
+    agent.emit(
+      activitySnapshotEvent({
+        messageId: testId("activity"),
+        activityType: "test-activity",
+        content: { message: "Rendered content" },
+      }),
+    );
+    agent.emit(runFinishedEvent());
+
+    await waitFor(() => {
+      expect(screen.getByTestId("activity-render")).toBeDefined();
+    });
+
+    // Verify context is properly propagated - copilotkit should NOT be null
+    expect(capturedCopilotkit).not.toBeNull();
+    expect(capturedCopilotkit).toBeDefined();
+  });
+});