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

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

@@ -0,0 +1,1113 @@
+import React, { useEffect } from "react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
+import { z } from "zod";
+import { defineToolCallRenderer, ReactToolCallRenderer } from "../../../types";
+import {
+  MockStepwiseAgent,
+  SuggestionsProviderAgent,
+  renderWithCopilotKit,
+  runStartedEvent,
+  runFinishedEvent,
+  textChunkEvent,
+  toolCallChunkEvent,
+  toolCallResultEvent,
+  testId,
+  emitSuggestionToolCall,
+  emitReasoningSequence,
+  reasoningStartEvent,
+  reasoningMessageStartEvent,
+  reasoningMessageContentEvent,
+  reasoningMessageEndEvent,
+  reasoningEndEvent,
+} from "../../../__tests__/utils/test-helpers";
+import { useConfigureSuggestions } from "../../../hooks/use-configure-suggestions";
+import { CopilotChat } from "../CopilotChat";
+
+describe("CopilotChat E2E - Chat Basics and Streaming Patterns", () => {
+  describe("Chat Basics: text input + run", () => {
+    it("should display user message and start agent run when Enter is pressed", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      // Type a message and press Enter
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Hello AI!" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // User message should appear
+      await waitFor(() => {
+        const userMessage = screen.getByText("Hello AI!");
+        expect(userMessage).toBeDefined();
+      });
+
+      // Agent starts running
+      const messageId = testId("msg");
+      agent.emit(runStartedEvent());
+      agent.emit(textChunkEvent(messageId, "Hello! "));
+      agent.emit(textChunkEvent(messageId, "How can I help you today?"));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // Assistant message should accumulate
+      await waitFor(() => {
+        const assistantMessage = screen.getByText(
+          "Hello! How can I help you today?",
+        );
+        expect(assistantMessage).toBeDefined();
+      });
+    });
+
+    it("should accumulate text chunks progressively", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      // Submit a message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Tell me a story" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("Tell me a story")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      agent.emit(runStartedEvent());
+
+      // Stream text progressively
+      agent.emit(textChunkEvent(messageId, "Once upon"));
+
+      await waitFor(() => {
+        expect(screen.getByText(/Once upon/)).toBeDefined();
+      });
+
+      agent.emit(textChunkEvent(messageId, " a time"));
+
+      await waitFor(() => {
+        expect(screen.getByText(/Once upon a time/)).toBeDefined();
+      });
+
+      agent.emit(textChunkEvent(messageId, " there was a robot."));
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Once upon a time there was a robot\./),
+        ).toBeDefined();
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+  });
+
+  describe("Single Tool Flow", () => {
+    it("should handle complete tool call lifecycle", async () => {
+      const agent = new MockStepwiseAgent();
+      const renderToolCalls = [
+        defineToolCallRenderer({
+          name: "getWeather",
+          args: z.object({
+            location: z.string(),
+            unit: z.string().optional(),
+          }),
+          render: ({ name, args, result, status }) => (
+            <div data-testid="weather-tool">
+              Tool: {name} | Status: {status} | Location: {args.location} |
+              {result && ` Result: ${JSON.stringify(result)}`}
+            </div>
+          ),
+        }),
+      ] as unknown as ReactToolCallRenderer<unknown>[];
+
+      renderWithCopilotKit({ agent, renderToolCalls });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "What's the weather?" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("What's the weather?")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      const toolCallId = testId("tc");
+
+      // Stream: RUN_STARTED → TEXT_MESSAGE_CHUNK → TOOL_CALL_CHUNK → TOOL_CALL_RESULT → RUN_FINISHED
+      agent.emit(runStartedEvent());
+      agent.emit(
+        textChunkEvent(messageId, "Let me check the weather for you."),
+      );
+
+      // Start tool call with partial args
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          toolCallName: "getWeather",
+          parentMessageId: messageId,
+          delta: '{"location":"Paris"',
+        }),
+      );
+
+      // Continue streaming args
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          parentMessageId: messageId,
+          delta: ',"unit":"celsius"}',
+        }),
+      );
+
+      // Wait for tool to render with complete args and verify name is provided
+      await waitFor(() => {
+        const tool = screen.getByTestId("weather-tool");
+        expect(tool.textContent).toContain("Tool: getWeather");
+        expect(tool.textContent).toContain("Location: Paris");
+      });
+
+      // Send tool result
+      agent.emit(
+        toolCallResultEvent({
+          toolCallId,
+          messageId: `${messageId}_result`,
+          content: JSON.stringify({ temperature: 22, condition: "Sunny" }),
+        }),
+      );
+
+      // Check result appears
+      await waitFor(() => {
+        const tool = screen.getByTestId("weather-tool");
+        expect(tool.textContent).toContain("temperature");
+        expect(tool.textContent).toContain("22");
+        expect(tool.textContent).toContain("Sunny");
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+  });
+
+  describe("Multiple Tools Interleaved", () => {
+    it("should handle multiple tool calls in one assistant message", async () => {
+      const agent = new MockStepwiseAgent();
+      const renderToolCalls = [
+        defineToolCallRenderer({
+          name: "getWeather",
+          args: z.object({ location: z.string() }),
+          render: ({ name, args, result }) => (
+            <div data-testid={`weather-${args.location}`}>
+              [{name}] Weather for {args.location}:{" "}
+              {result ? JSON.stringify(result) : "Loading..."}
+            </div>
+          ),
+        }),
+        defineToolCallRenderer({
+          name: "getTime",
+          args: z.object({ timezone: z.string() }),
+          render: ({ name, args, result }) => (
+            <div data-testid={`time-${args.timezone}`}>
+              [{name}] Time in {args.timezone}:{" "}
+              {result ? JSON.stringify(result) : "Loading..."}
+            </div>
+          ),
+        }),
+      ] as unknown as ReactToolCallRenderer<unknown>[];
+
+      renderWithCopilotKit({ agent, renderToolCalls });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Weather and time please" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("Weather and time please")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      const toolCallId1 = testId("tc1");
+      const toolCallId2 = testId("tc2");
+
+      agent.emit(runStartedEvent());
+      agent.emit(textChunkEvent(messageId, "I'll check both for you."));
+
+      // Start first tool call (weather) with complete JSON in one chunk
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId: toolCallId1,
+          toolCallName: "getWeather",
+          parentMessageId: messageId,
+          delta: '{"location":"London"}',
+        }),
+      );
+
+      // Start second tool call (time) with complete JSON in one chunk
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId: toolCallId2,
+          toolCallName: "getTime",
+          parentMessageId: messageId,
+          delta: '{"timezone":"UTC"}',
+        }),
+      );
+
+      // Both tools should render with partial/complete args
+      await waitFor(() => {
+        expect(screen.getByTestId("weather-London")).toBeDefined();
+        expect(screen.getByTestId("time-UTC")).toBeDefined();
+      });
+
+      // Send results in different order
+      agent.emit(
+        toolCallResultEvent({
+          toolCallId: toolCallId2,
+          messageId: `${messageId}_result2`,
+          content: JSON.stringify({ time: "12:00 PM" }),
+        }),
+      );
+
+      agent.emit(
+        toolCallResultEvent({
+          toolCallId: toolCallId1,
+          messageId: `${messageId}_result1`,
+          content: JSON.stringify({ temp: 18, condition: "Cloudy" }),
+        }),
+      );
+
+      // Both results should appear with correct names
+      await waitFor(() => {
+        const weatherTool = screen.getByTestId("weather-London");
+        const timeTool = screen.getByTestId("time-UTC");
+
+        expect(weatherTool.textContent).toContain("[getWeather]");
+        expect(weatherTool.textContent).toContain("18");
+        expect(weatherTool.textContent).toContain("Cloudy");
+        expect(timeTool.textContent).toContain("[getTime]");
+        expect(timeTool.textContent).toContain("12:00 PM");
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+  });
+
+  describe("Wildcard Fallback", () => {
+    it("should use wildcard renderer when no specific renderer exists", async () => {
+      const agent = new MockStepwiseAgent();
+      const renderToolCalls = [
+        defineToolCallRenderer({
+          name: "*",
+          args: z.any(),
+          render: ({ name, args }) => (
+            <div data-testid="wildcard-renderer">
+              Unknown tool: {name} with args: {JSON.stringify(args)}
+            </div>
+          ),
+        }),
+      ] as unknown as ReactToolCallRenderer<unknown>[];
+
+      renderWithCopilotKit({ agent, renderToolCalls });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Do something unknown" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("Do something unknown")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      const toolCallId = testId("tc");
+
+      agent.emit(runStartedEvent());
+
+      // Call an undefined tool
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          toolCallName: "unknownTool",
+          parentMessageId: messageId,
+          delta: '{"param":"value"}',
+        }),
+      );
+
+      // Wildcard renderer should handle it
+      await waitFor(() => {
+        const wildcard = screen.getByTestId("wildcard-renderer");
+        expect(wildcard).toBeDefined();
+        // Check that the wildcard renders with the tool name
+        expect(wildcard.textContent).toContain("Unknown tool: unknownTool");
+        expect(wildcard.textContent).toContain("value");
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should use wildcard renderer without args definition", async () => {
+      const agent = new MockStepwiseAgent();
+      // Test that wildcard tool works without explicit args definition
+      const renderToolCalls = [
+        defineToolCallRenderer({
+          name: "*",
+          // No args field - should default to z.any()
+          render: ({ name, args }) => (
+            <div data-testid="wildcard-no-args">
+              <span data-testid="tool-name">{name}</span>
+              <span data-testid="tool-args">{JSON.stringify(args)}</span>
+            </div>
+          ),
+        }),
+      ] as unknown as ReactToolCallRenderer<unknown>[];
+
+      renderWithCopilotKit({ agent, renderToolCalls });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Do something" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("Do something")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      const toolCallId = testId("tc");
+
+      agent.emit(runStartedEvent());
+
+      // Call an undefined tool with a specific name
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          toolCallName: "myCustomTool",
+          parentMessageId: messageId,
+          delta: '{"param":"test","value":123}',
+        }),
+      );
+
+      // Wildcard renderer should receive the actual tool name, not "*"
+      await waitFor(() => {
+        const wildcard = screen.getByTestId("wildcard-no-args");
+        expect(wildcard).toBeDefined();
+
+        // Verify the actual tool name is passed, not "*"
+        const toolName = screen.getByTestId("tool-name");
+        expect(toolName.textContent).toBe("myCustomTool");
+        expect(toolName.textContent).not.toBe("*");
+
+        // Verify args are passed correctly
+        const toolArgs = screen.getByTestId("tool-args");
+        const parsedArgs = JSON.parse(toolArgs.textContent || "{}");
+        expect(parsedArgs.param).toBe("test");
+        expect(parsedArgs.value).toBe(123);
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should not show toolbar for messages with only tool calls and no content", async () => {
+      const agent = new MockStepwiseAgent();
+      const renderToolCalls = [
+        defineToolCallRenderer({
+          name: "testTool",
+          args: z.object({ value: z.string() }),
+          render: ({ args }) => (
+            <div data-testid="test-tool">Tool: {args.value}</div>
+          ),
+        }),
+      ] as unknown as ReactToolCallRenderer<unknown>[];
+
+      renderWithCopilotKit({ agent, renderToolCalls });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Use test tool" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("Use test tool")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      const toolCallId = testId("tc");
+
+      agent.emit(runStartedEvent());
+
+      // Emit tool call WITHOUT any text content
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId,
+          toolCallName: "testTool",
+          parentMessageId: messageId,
+          delta: '{"value":"test"}',
+        }),
+      );
+
+      // Tool call should be rendered
+      await waitFor(() => {
+        const toolRender = screen.getByTestId("test-tool");
+        expect(toolRender).toBeDefined();
+        expect(toolRender.textContent).toContain("Tool: test");
+      });
+
+      // Toolbar should NOT be visible for assistant message since it has no text content
+      await waitFor(() => {
+        // Find the assistant message container (it should have the tool render)
+        const assistantMessageDiv = screen
+          .getByTestId("test-tool")
+          .closest("[data-message-id]");
+
+        if (assistantMessageDiv) {
+          // Check that within the assistant message, there's no copy button
+          const copyButtonsInAssistant = assistantMessageDiv.querySelectorAll(
+            "button[aria-label*='Copy' i], button[aria-label*='copy' i]",
+          );
+          expect(copyButtonsInAssistant.length).toBe(0);
+        }
+      });
+
+      // Now emit a NEW message WITH text content
+      const messageWithContentId = testId("msg2");
+      agent.emit(
+        textChunkEvent(
+          messageWithContentId,
+          "Here is some actual text content",
+        ),
+      );
+
+      // Toolbar SHOULD be visible now for the message with content
+      await waitFor(() => {
+        const allMessages = screen.getAllByText(
+          /Here is some actual text content/,
+        );
+        expect(allMessages.length).toBeGreaterThan(0);
+
+        // Should now have copy button
+        const toolbarButtons = screen.getAllByRole("button");
+        const copyButton = toolbarButtons.find((btn) =>
+          btn.getAttribute("aria-label")?.toLowerCase().includes("copy"),
+        );
+        expect(copyButton).toBeDefined();
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should prefer specific renderer over wildcard when both exist", async () => {
+      const agent = new MockStepwiseAgent();
+      const renderToolCalls = [
+        defineToolCallRenderer({
+          name: "specificTool",
+          args: z.object({ value: z.string() }),
+          render: ({ args }) => (
+            <div data-testid="specific-renderer">Specific: {args.value}</div>
+          ),
+        }),
+        defineToolCallRenderer({
+          name: "*",
+          args: z.any(),
+          render: ({ name }) => (
+            <div data-testid="wildcard-renderer">Wildcard: {name}</div>
+          ),
+        }),
+      ] as unknown as ReactToolCallRenderer<unknown>[];
+
+      renderWithCopilotKit({ agent, renderToolCalls });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Test specific" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message to appear
+      await waitFor(() => {
+        expect(screen.getByText("Test specific")).toBeDefined();
+      });
+
+      const messageId = testId("msg");
+      const toolCallId1 = testId("tc1");
+      const toolCallId2 = testId("tc2");
+
+      agent.emit(runStartedEvent());
+
+      // Call the specific tool
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId: toolCallId1,
+          toolCallName: "specificTool",
+          parentMessageId: messageId,
+          delta: '{"value":"test123"}',
+        }),
+      );
+
+      // Call an unknown tool
+      agent.emit(
+        toolCallChunkEvent({
+          toolCallId: toolCallId2,
+          toolCallName: "unknownTool",
+          parentMessageId: messageId,
+          delta: '{"data":"xyz"}',
+        }),
+      );
+
+      // Specific renderer should be used for specificTool
+      await waitFor(() => {
+        const specific = screen.getByTestId("specific-renderer");
+        expect(specific).toBeDefined();
+        expect(specific.textContent).toContain("test123");
+      });
+
+      // Wildcard should be used for unknownTool
+      await waitFor(() => {
+        const wildcard = screen.getByTestId("wildcard-renderer");
+        expect(wildcard).toBeDefined();
+        expect(wildcard.textContent).toContain("Wildcard: unknownTool");
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+  });
+
+  describe("Suggestions Flow", () => {
+    // Helper component to configure suggestions
+    const ChatWithSuggestions: React.FC<{
+      consumerAgentId: string;
+      providerAgentId: string;
+      instructions?: string;
+      minSuggestions?: number;
+      maxSuggestions?: number;
+      onReady?: () => void;
+    }> = ({
+      consumerAgentId,
+      providerAgentId,
+      instructions,
+      minSuggestions,
+      maxSuggestions,
+      onReady,
+    }) => {
+      useConfigureSuggestions({
+        instructions: instructions || "Suggest helpful next actions",
+        providerAgentId,
+        consumerAgentId,
+        minSuggestions: minSuggestions || 2,
+        maxSuggestions: maxSuggestions || 4,
+      });
+
+      useEffect(() => {
+        if (onReady) {
+          onReady();
+        }
+      }, [onReady]);
+
+      return <CopilotChat />;
+    };
+
+    it("should display suggestions when configured", async () => {
+      const consumerAgent = new MockStepwiseAgent();
+      const providerAgent = new SuggestionsProviderAgent();
+
+      // Configure provider agent with suggestions
+      providerAgent.setSuggestions([
+        { title: "Option A", message: "Take action A" },
+        { title: "Option B", message: "Take action B" },
+      ]);
+
+      let suggestionsReady = false;
+
+      renderWithCopilotKit({
+        agents: {
+          default: consumerAgent,
+          "suggestions-provider": providerAgent,
+        },
+        agentId: "default",
+        children: (
+          <div style={{ height: 400 }}>
+            <ChatWithSuggestions
+              consumerAgentId="default"
+              providerAgentId="suggestions-provider"
+              onReady={() => {
+                suggestionsReady = true;
+              }}
+            />
+          </div>
+        ),
+      });
+
+      // Wait for suggestions config to be ready
+      await waitFor(() => {
+        expect(suggestionsReady).toBe(true);
+      });
+
+      // Submit a message to trigger suggestions
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Help me" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      // Wait for user message
+      await waitFor(() => {
+        expect(screen.getByText("Help me")).toBeDefined();
+      });
+
+      // Consumer agent responds
+      const messageId = testId("msg");
+      consumerAgent.emit(runStartedEvent());
+      consumerAgent.emit(textChunkEvent(messageId, "I can help with that."));
+      consumerAgent.emit(runFinishedEvent());
+      consumerAgent.complete();
+
+      // Wait for assistant message
+      await waitFor(() => {
+        expect(screen.getByText(/I can help with that/)).toBeDefined();
+      });
+
+      // Verify suggestions appear (provider agent's run() method will be called automatically)
+      await waitFor(
+        () => {
+          expect(screen.getByText("Option A")).toBeDefined();
+          expect(screen.getByText("Option B")).toBeDefined();
+        },
+        { timeout: 5000 },
+      );
+
+      // Click on a suggestion
+      const suggestionA = screen.getByText("Option A");
+      fireEvent.click(suggestionA);
+
+      // Verify the suggestion message is added
+      await waitFor(() => {
+        const messages = screen.getAllByText(/Take action A/);
+        expect(messages.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("should stream suggestion titles token by token", async () => {
+      const consumerAgent = new MockStepwiseAgent();
+      const providerAgent = new SuggestionsProviderAgent();
+
+      // Configure provider agent with suggestions
+      providerAgent.setSuggestions([
+        { title: "First Action", message: "Do first action" },
+        { title: "Second Action", message: "Do second action" },
+      ]);
+
+      let suggestionsReady = false;
+
+      renderWithCopilotKit({
+        agents: {
+          default: consumerAgent,
+          "suggestions-provider": providerAgent,
+        },
+        agentId: "default",
+        children: (
+          <div style={{ height: 400 }}>
+            <ChatWithSuggestions
+              consumerAgentId="default"
+              providerAgentId="suggestions-provider"
+              onReady={() => {
+                suggestionsReady = true;
+              }}
+            />
+          </div>
+        ),
+      });
+
+      await waitFor(() => {
+        expect(suggestionsReady).toBe(true);
+      });
+
+      // Submit a message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "What can I do?" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("What can I do?")).toBeDefined();
+      });
+
+      // Consumer agent responds
+      const messageId = testId("msg");
+      consumerAgent.emit(runStartedEvent());
+      consumerAgent.emit(textChunkEvent(messageId, "Here are some options."));
+      consumerAgent.emit(runFinishedEvent());
+      consumerAgent.complete();
+
+      // Verify both suggestions are visible after streaming completes
+      await waitFor(
+        () => {
+          expect(screen.getByText("First Action")).toBeDefined();
+          expect(screen.getByText("Second Action")).toBeDefined();
+        },
+        { timeout: 5000 },
+      );
+    });
+
+    it("should handle multiple suggestions streaming concurrently", async () => {
+      const consumerAgent = new MockStepwiseAgent();
+      const providerAgent = new SuggestionsProviderAgent();
+
+      // Configure provider agent with suggestions
+      providerAgent.setSuggestions([
+        { title: "Alpha", message: "Do alpha" },
+        { title: "Beta", message: "Do beta" },
+        { title: "Gamma", message: "Do gamma" },
+      ]);
+
+      let suggestionsReady = false;
+
+      renderWithCopilotKit({
+        agents: {
+          default: consumerAgent,
+          "suggestions-provider": providerAgent,
+        },
+        agentId: "default",
+        children: (
+          <div style={{ height: 400 }}>
+            <ChatWithSuggestions
+              consumerAgentId="default"
+              providerAgentId="suggestions-provider"
+              minSuggestions={3}
+              maxSuggestions={5}
+              onReady={() => {
+                suggestionsReady = true;
+              }}
+            />
+          </div>
+        ),
+      });
+
+      await waitFor(() => {
+        expect(suggestionsReady).toBe(true);
+      });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Show me options" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Show me options")).toBeDefined();
+      });
+
+      // Consumer agent responds
+      const messageId = testId("msg");
+      consumerAgent.emit(runStartedEvent());
+      consumerAgent.emit(textChunkEvent(messageId, "Here you go."));
+      consumerAgent.emit(runFinishedEvent());
+      consumerAgent.complete();
+
+      // Verify all suggestions appear
+      await waitFor(
+        () => {
+          expect(screen.getByText("Alpha")).toBeDefined();
+          expect(screen.getByText("Beta")).toBeDefined();
+          expect(screen.getByText("Gamma")).toBeDefined();
+        },
+        { timeout: 5000 },
+      );
+    });
+  });
+
+  describe("Reasoning Message Flow", () => {
+    it("should display reasoning message with 'Thinking...' label while streaming", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      // Submit message
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Think about this" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Think about this")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+
+      agent.emit(runStartedEvent());
+      agent.emit(reasoningStartEvent(reasoningId));
+      agent.emit(reasoningMessageStartEvent(reasoningId));
+      agent.emit(
+        reasoningMessageContentEvent(reasoningId, "Let me analyze..."),
+      );
+
+      // "Thinking..." label should appear while streaming
+      await waitFor(() => {
+        expect(screen.getByText("Thinking…")).toBeDefined();
+      });
+
+      // Clean up
+      agent.emit(reasoningMessageEndEvent(reasoningId));
+      agent.emit(reasoningEndEvent(reasoningId));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should display 'Thought for X seconds' after reasoning completes", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Reason please" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Reason please")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+      const textId = testId("text");
+
+      agent.emit(runStartedEvent());
+      emitReasoningSequence(agent, reasoningId, "Some deep thought");
+      agent.emit(textChunkEvent(textId, "Here is my answer."));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // After reasoning finishes, should show elapsed time label
+      await waitFor(() => {
+        expect(screen.getByText(/Thought for/)).toBeDefined();
+      });
+    });
+
+    it("should accumulate content from multiple delta events", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Elaborate" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Elaborate")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+
+      agent.emit(runStartedEvent());
+      agent.emit(reasoningStartEvent(reasoningId));
+      agent.emit(reasoningMessageStartEvent(reasoningId));
+      agent.emit(reasoningMessageContentEvent(reasoningId, "Part 1"));
+      agent.emit(reasoningMessageContentEvent(reasoningId, " Part 2"));
+      agent.emit(reasoningMessageContentEvent(reasoningId, " Part 3"));
+      agent.emit(reasoningMessageEndEvent(reasoningId));
+      agent.emit(reasoningEndEvent(reasoningId));
+
+      // The accumulated content should be present
+      await waitFor(() => {
+        expect(screen.getByText(/Part 1 Part 2 Part 3/)).toBeDefined();
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should render reasoning before text in a single agent run", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Answer with thought" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Answer with thought")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+      const textId = testId("text");
+
+      agent.emit(runStartedEvent());
+      emitReasoningSequence(agent, reasoningId, "Thinking about the answer");
+      agent.emit(textChunkEvent(textId, "The answer is 42."));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // Both should appear
+      await waitFor(() => {
+        expect(screen.getByText(/Thought for/)).toBeDefined();
+        expect(screen.getByText("The answer is 42.")).toBeDefined();
+      });
+
+      // Reasoning should come before text in the DOM
+      const reasoningEl = screen
+        .getByText(/Thought for/)
+        .closest("[data-message-id]");
+      const textEl = screen
+        .getByText("The answer is 42.")
+        .closest("[data-message-id]");
+
+      if (reasoningEl && textEl) {
+        // Use compareDocumentPosition to verify ordering
+        const position = reasoningEl.compareDocumentPosition(textEl);
+        // DOCUMENT_POSITION_FOLLOWING means textEl comes after reasoningEl
+        expect(position & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+      }
+    });
+
+    it("should handle reasoning-only response (no text output)", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Just think" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Just think")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+
+      agent.emit(runStartedEvent());
+      emitReasoningSequence(agent, reasoningId, "Only reasoning, no text");
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // Reasoning message should appear
+      await waitFor(() => {
+        expect(screen.getByText(/Thought for/)).toBeDefined();
+      });
+    });
+
+    it("should not show cursor when last message is reasoning", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Think deeply" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Think deeply")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+
+      agent.emit(runStartedEvent());
+      agent.emit(reasoningStartEvent(reasoningId));
+      agent.emit(reasoningMessageStartEvent(reasoningId));
+      agent.emit(
+        reasoningMessageContentEvent(reasoningId, "Deep reasoning..."),
+      );
+
+      // "Thinking..." should appear (reasoning is streaming)
+      await waitFor(() => {
+        expect(screen.getByText("Thinking…")).toBeDefined();
+      });
+
+      // Chat-level cursor (pulsing dot) should NOT be visible when last message is reasoning
+      // The cursor has animate-pulse-cursor class
+      const cursors = document.querySelectorAll(".cpk\\:animate-pulse-cursor");
+      // Only the reasoning indicator should be present, not the chat-level cursor
+      // The chat-level cursor is a direct child of the message view container
+      const chatLevelCursor = document.querySelector(
+        ".cpk\\:flex.cpk\\:flex-col > .cpk\\:mt-2 .cpk\\:animate-pulse-cursor",
+      );
+      expect(chatLevelCursor).toBeNull();
+
+      // Clean up
+      agent.emit(reasoningMessageEndEvent(reasoningId));
+      agent.emit(reasoningEndEvent(reasoningId));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should show cursor after reasoning when text message follows", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Think then answer" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Think then answer")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+      const textId = testId("text");
+
+      agent.emit(runStartedEvent());
+      emitReasoningSequence(agent, reasoningId, "Let me think first");
+
+      // Now start streaming text - text is now the last message, cursor should show
+      agent.emit(textChunkEvent(textId, "Starting answer..."));
+
+      await waitFor(() => {
+        expect(screen.getByText(/Starting answer/)).toBeDefined();
+      });
+
+      // Chat-level cursor should now be visible since last message is text (not reasoning)
+      // Note: The cursor shows while isRunning=true and last message is not reasoning
+      await waitFor(() => {
+        const chatLevelCursor = document.querySelector(
+          ".cpk\\:animate-pulse-cursor",
+        );
+        expect(chatLevelCursor).not.toBeNull();
+      });
+
+      agent.emit(runFinishedEvent());
+      agent.complete();
+    });
+
+    it("should expand and collapse reasoning content on click", async () => {
+      const agent = new MockStepwiseAgent();
+      renderWithCopilotKit({ agent });
+
+      const input = await screen.findByRole("textbox");
+      fireEvent.change(input, { target: { value: "Toggle test" } });
+      fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Toggle test")).toBeDefined();
+      });
+
+      const reasoningId = testId("reasoning");
+      const textId = testId("text");
+
+      agent.emit(runStartedEvent());
+      emitReasoningSequence(
+        agent,
+        reasoningId,
+        "This is expandable reasoning content",
+      );
+      agent.emit(textChunkEvent(textId, "Done thinking."));
+      agent.emit(runFinishedEvent());
+      agent.complete();
+
+      // After reasoning finishes, it should auto-collapse
+      await waitFor(() => {
+        const header = screen.getByText(/Thought for/);
+        expect(header).toBeDefined();
+        // The header's button should have aria-expanded="false" after collapsing
+        const button = header.closest("button");
+        expect(button?.getAttribute("aria-expanded")).toBe("false");
+      });
+
+      // Click to expand
+      const header = screen.getByText(/Thought for/);
+      const button = header.closest("button");
+      if (button) {
+        fireEvent.click(button);
+      }
+
+      // Should now be expanded
+      await waitFor(() => {
+        const expandedButton = screen
+          .getByText(/Thought for/)
+          .closest("button");
+        expect(expandedButton?.getAttribute("aria-expanded")).toBe("true");
+      });
+    });
+  });
+});