@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

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

@@ -1,73 +0,0 @@
-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

@@ -1,432 +0,0 @@
-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__/CopilotChat.suggestionsAlways.test.tsx

@@ -1,183 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { beforeEach, vi } from "vitest";
-import { useConfigureSuggestions } from "../../../hooks/use-configure-suggestions";
-import { CopilotChat } from "../CopilotChat";
-import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
-import {
-  MockStepwiseAgent,
-  runStartedEvent,
-  runFinishedEvent,
-  textChunkEvent,
-  testId,
-} from "../../../__tests__/utils/test-helpers";
-import type { AutoScrollMode } from "../normalize-auto-scroll";
-
-// jsdom doesn't implement scrollTo; pin-to-send mode calls it from a rAF
-// callback, so without this stub the cleanup throws an unhandled error.
-beforeEach(() => {
-  HTMLElement.prototype.scrollTo = vi.fn();
-});
-
-const STATIC_SUGGESTIONS = [
-  { title: "Say hello", message: "Hello there!" },
-  { title: "Get help", message: "Can you help me?" },
-];
-
-const ChatWithStaticAlwaysSuggestions: React.FC<{
-  autoScroll?: AutoScrollMode | boolean;
-  consumerAgentId?: string;
-}> = ({ autoScroll, consumerAgentId }) => {
-  useConfigureSuggestions({
-    suggestions: STATIC_SUGGESTIONS,
-    available: "always",
-    ...(consumerAgentId ? { consumerAgentId } : {}),
-  });
-
-  return <CopilotChat autoScroll={autoScroll} />;
-};
-
-function renderChat({
-  agent,
-  autoScroll,
-  consumerAgentId,
-}: {
-  agent: MockStepwiseAgent;
-  autoScroll?: AutoScrollMode | boolean;
-  consumerAgentId?: string;
-}) {
-  return render(
-    <CopilotKitProvider agents__unsafe_dev_only={{ default: agent }}>
-      <div style={{ height: 400 }}>
-        <ChatWithStaticAlwaysSuggestions
-          autoScroll={autoScroll}
-          consumerAgentId={consumerAgentId}
-        />
-      </div>
-    </CopilotKitProvider>,
-  );
-}
-
-describe("CopilotChat - static suggestions with available:'always'", () => {
-  it("should show suggestions on the welcome screen", async () => {
-    const agent = new MockStepwiseAgent();
-    renderChat({ agent, consumerAgentId: "default" });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("copilot-welcome-screen")).toBeDefined();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText("Say hello")).toBeDefined();
-      expect(screen.getByText("Get help")).toBeDefined();
-    });
-  });
-
-  it("should show suggestions on the welcome screen with global config (no consumerAgentId)", async () => {
-    const agent = new MockStepwiseAgent();
-    renderChat({ agent });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("copilot-welcome-screen")).toBeDefined();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText("Say hello")).toBeDefined();
-      expect(screen.getByText("Get help")).toBeDefined();
-    });
-  });
-
-  it("should hide suggestions during a run and restore them after", async () => {
-    const agent = new MockStepwiseAgent();
-    renderChat({ agent, consumerAgentId: "default" });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("copilot-welcome-screen")).toBeDefined();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText("Say hello")).toBeDefined();
-    });
-
-    const input = await screen.findByRole("textbox");
-    fireEvent.change(input, { target: { value: "Hi!" } });
-    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-    await waitFor(() => {
-      expect(screen.getByText("Hi!")).toBeDefined();
-    });
-
-    const messageId = testId("msg");
-    agent.emit(runStartedEvent());
-    agent.emit(textChunkEvent(messageId, "Hello! How can I help?"));
-
-    // While the run is in flight, suggestions should be hidden — every run
-    // changes the conversation context, so we wait for the end-of-run reload
-    // before showing them again.
-    await waitFor(() => {
-      expect(screen.queryByText("Say hello")).toBeNull();
-      expect(screen.queryByText("Get help")).toBeNull();
-    });
-
-    agent.emit(runFinishedEvent());
-    agent.complete();
-
-    await waitFor(() => {
-      expect(screen.getByText("Hello! How can I help?")).toBeDefined();
-    });
-
-    // After the run, the static "always" config repopulates them.
-    await waitFor(
-      () => {
-        expect(screen.getByText("Say hello")).toBeDefined();
-        expect(screen.getByText("Get help")).toBeDefined();
-      },
-      { timeout: 3000 },
-    );
-  });
-
-  it("should hide suggestions during a run in pin-to-send mode", async () => {
-    const agent = new MockStepwiseAgent();
-    renderChat({ agent, autoScroll: "pin-to-send" });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("copilot-welcome-screen")).toBeDefined();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText("Say hello")).toBeDefined();
-    });
-
-    const input = await screen.findByRole("textbox");
-    fireEvent.change(input, { target: { value: "Hi!" } });
-    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
-
-    await waitFor(() => {
-      expect(screen.getByText("Hi!")).toBeDefined();
-    });
-
-    const messageId = testId("msg");
-    agent.emit(runStartedEvent());
-    agent.emit(textChunkEvent(messageId, "Hello! How can I help?"));
-
-    await waitFor(() => {
-      expect(screen.queryByText("Say hello")).toBeNull();
-      expect(screen.queryByText("Get help")).toBeNull();
-    });
-
-    agent.emit(runFinishedEvent());
-    agent.complete();
-
-    await waitFor(() => {
-      expect(screen.getByText("Hello! How can I help?")).toBeDefined();
-    });
-
-    await waitFor(
-      () => {
-        expect(screen.getByText("Say hello")).toBeDefined();
-        expect(screen.getByText("Get help")).toBeDefined();
-      },
-      { timeout: 3000 },
-    );
-  });
-});