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

package/src/v2/providers/__tests__/CopilotKitProvider.wildcard.test.tsx

@@ -0,0 +1,294 @@
+import { renderHook } from "@testing-library/react";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { z } from "zod";
+import type { ReactFrontendTool } from "../../types/frontend-tool";
+import type { ReactHumanInTheLoop } from "../../types/human-in-the-loop";
+import { CopilotKitProvider, useCopilotKit } from "../CopilotKitProvider";
+
+describe("CopilotKitProvider - Wildcard Tool", () => {
+  describe("Wildcard Frontend Tool", () => {
+    it("should register wildcard frontend tool", () => {
+      const wildcardHandler = vi.fn();
+      const wildcardTool: ReactFrontendTool = {
+        name: "*",
+        description: "Fallback for undefined tools",
+        handler: wildcardHandler,
+      };
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider frontendTools={[wildcardTool]}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      const retrievedTool = result.current.copilotkit.getTool({
+        toolName: "*",
+      });
+      expect(retrievedTool).toBeDefined();
+      expect(retrievedTool?.name).toBe("*");
+      expect(retrievedTool?.handler).toBe(wildcardHandler);
+    });
+
+    it("should register wildcard alongside specific tools", () => {
+      const specificHandler = vi.fn();
+      const wildcardHandler = vi.fn();
+
+      const specificTool: ReactFrontendTool = {
+        name: "specific",
+        handler: specificHandler,
+      };
+
+      const wildcardTool: ReactFrontendTool = {
+        name: "*",
+        handler: wildcardHandler,
+      };
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider frontendTools={[specificTool, wildcardTool]}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      expect(
+        result.current.copilotkit.getTool({ toolName: "specific" }),
+      ).toBeDefined();
+      expect(
+        result.current.copilotkit.getTool({ toolName: "*" }),
+      ).toBeDefined();
+    });
+
+    it("should register wildcard with render component", () => {
+      const WildcardRender: React.FC<any> = ({ args }) => (
+        <div>Unknown tool: {args.toolName}</div>
+      );
+
+      const wildcardTool: ReactFrontendTool = {
+        name: "*",
+        description: "Fallback with render",
+        parameters: z.object({
+          toolName: z.string(),
+          args: z.unknown(),
+        }),
+        render: WildcardRender,
+      };
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider frontendTools={[wildcardTool]}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      const wildcardRender = result.current.copilotkit.renderToolCalls.find(
+        (rc) => rc.name === "*",
+      );
+      expect(wildcardRender).toBeDefined();
+      expect(wildcardRender?.render).toBe(WildcardRender);
+    });
+
+    it("should support wildcard with agentId", () => {
+      const wildcardHandler = vi.fn();
+      const wildcardTool: ReactFrontendTool = {
+        name: "*",
+        handler: wildcardHandler,
+        agentId: "specificAgent",
+      };
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider frontendTools={[wildcardTool]}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      const retrievedTool = result.current.copilotkit.getTool({
+        toolName: "*",
+        agentId: "specificAgent",
+      });
+      expect(retrievedTool?.agentId).toBe("specificAgent");
+    });
+  });
+
+  describe("Wildcard Human-in-the-Loop", () => {
+    it("should register wildcard human-in-the-loop tool", () => {
+      const WildcardComponent: React.FC<any> = ({ args }) => (
+        <div>Unknown interaction: {args.toolName}</div>
+      );
+
+      const wildcardHitl: ReactHumanInTheLoop = {
+        name: "*",
+        description: "Fallback interaction",
+        parameters: z.object({
+          toolName: z.string(),
+          args: z.unknown(),
+        }),
+        render: WildcardComponent,
+      };
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider humanInTheLoop={[wildcardHitl]}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      expect(
+        result.current.copilotkit.getTool({ toolName: "*" }),
+      ).toBeDefined();
+      const wildcardRender = result.current.copilotkit.renderToolCalls.find(
+        (rc) => rc.name === "*",
+      );
+      expect(wildcardRender).toBeDefined();
+      expect(wildcardRender?.render).toBe(WildcardComponent);
+    });
+
+    it("should support wildcard human-in-the-loop with agentId", () => {
+      const WildcardComponent: React.FC<any> = () => <div>Wildcard</div>;
+
+      const wildcardHitl: ReactHumanInTheLoop = {
+        name: "*",
+        parameters: z.object({
+          toolName: z.string(),
+          args: z.unknown(),
+        }),
+        render: WildcardComponent,
+        agentId: "agent1",
+      };
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider humanInTheLoop={[wildcardHitl]}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      const retrievedTool = result.current.copilotkit.getTool({
+        toolName: "*",
+        agentId: "agent1",
+      });
+      expect(retrievedTool?.agentId).toBe("agent1");
+    });
+  });
+
+  describe("Wildcard Render Tool Calls", () => {
+    it("should register wildcard in renderToolCalls", () => {
+      const WildcardRender: React.FC<any> = ({ args }) => (
+        <div>Fallback render</div>
+      );
+
+      const renderToolCalls = [
+        {
+          name: "*",
+          args: z.object({
+            toolName: z.string(),
+            args: z.unknown(),
+          }),
+          render: WildcardRender,
+        },
+      ];
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider renderToolCalls={renderToolCalls}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      const wildcardRender = result.current.copilotkit.renderToolCalls.find(
+        (rc) => rc.name === "*",
+      );
+      expect(wildcardRender).toBeDefined();
+      expect(wildcardRender?.render).toBe(WildcardRender);
+    });
+
+    it("should support wildcard render with agentId", () => {
+      const WildcardRender: React.FC<any> = () => <div>Agent wildcard</div>;
+
+      const renderToolCalls = [
+        {
+          name: "*",
+          args: z.object({
+            toolName: z.string(),
+            args: z.unknown(),
+          }),
+          render: WildcardRender,
+          agentId: "agent1",
+        },
+      ];
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider renderToolCalls={renderToolCalls}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      const wildcardRender = result.current.copilotkit.renderToolCalls.find(
+        (rc) => rc.name === "*",
+      );
+      expect(wildcardRender?.agentId).toBe("agent1");
+    });
+  });
+
+  describe("Combined wildcard and specific tools", () => {
+    it("should handle both wildcard and specific tools together", () => {
+      const SpecificRender: React.FC<any> = () => <div>Specific</div>;
+      const WildcardRender: React.FC<any> = () => <div>Wildcard</div>;
+
+      const frontendTools: ReactFrontendTool[] = [
+        {
+          name: "specificTool",
+          handler: vi.fn(),
+          parameters: z.object({ value: z.string() }),
+          render: SpecificRender,
+        },
+        {
+          name: "*",
+          handler: vi.fn(),
+          parameters: z.object({
+            toolName: z.string(),
+            args: z.unknown(),
+          }),
+          render: WildcardRender,
+        },
+      ];
+
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider frontendTools={frontendTools}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+
+      // Both tools should be registered
+      expect(
+        result.current.copilotkit.getTool({ toolName: "specificTool" }),
+      ).toBeDefined();
+      expect(
+        result.current.copilotkit.getTool({ toolName: "*" }),
+      ).toBeDefined();
+
+      // Both renders should be registered
+      const specificToolRender = result.current.copilotkit.renderToolCalls.find(
+        (rc) => rc.name === "specificTool",
+      );
+      const wildcardRender = result.current.copilotkit.renderToolCalls.find(
+        (rc) => rc.name === "*",
+      );
+      expect(specificToolRender).toBeDefined();
+      expect(wildcardRender).toBeDefined();
+    });
+  });
+});

package/src/v2/providers/index.ts

@@ -0,0 +1,14 @@
+export {
+  CopilotChatConfigurationProvider,
+  useCopilotChatConfiguration,
+  type CopilotChatLabels,
+  type CopilotChatConfigurationValue,
+  type CopilotChatConfigurationProviderProps,
+} from "./CopilotChatConfigurationProvider";
+
+export {
+  CopilotKitProvider,
+  useCopilotKit,
+  type CopilotKitProviderProps,
+  type CopilotKitContextValue,
+} from "./CopilotKitProvider";

package/src/v2/styles/globals.css

@@ -0,0 +1,230 @@
+@import "tailwindcss" prefix(cpk);
+@plugin "@tailwindcss/typography";
+@source "../**/*.{ts,tsx}";
+@source "../../../../node_modules/streamdown/dist/index.js";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+[data-copilotkit] {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark [data-copilotkit],
+[data-copilotkit].dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@theme {
+  --animate-pulse-cursor: pulse-cursor 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  @keyframes pulse-cursor {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.5);
+      opacity: 0.8;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply cpk:border-border cpk:outline-ring/50;
+  }
+  /* Apply foreground/background on CopilotKit roots (replaces body rule) */
+  [data-copilotkit] {
+    color: var(--foreground);
+    background-color: var(--background);
+  }
+
+  /* Mobile viewport support */
+  @supports (height: 100dvh) {
+    [data-copilot-sidebar] {
+      height: 100dvh;
+    }
+  }
+
+  /* Responsive sidebar width */
+  @media (min-width: 768px) {
+    [data-copilot-sidebar] {
+      width: var(--sidebar-width, 480px) !important;
+    }
+  }
+
+  /* Mobile optimizations */
+  @media (max-width: 767px) {
+    [data-copilot-sidebar] {
+      width: 100% !important;
+    }
+
+    /* Improve touch scrolling on iOS */
+    [data-copilot-sidebar] {
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Better scrolling performance */
+    [data-sidebar-chat] {
+      touch-action: pan-y;
+    }
+  }
+}
+
+[data-copilotkit] div[data-streamdown="code-block"] > pre {
+  @apply cpk:mt-0 cpk:mb-0;
+}
+
+/* Minimal scrollbar for WebKit browsers (Chrome, Safari, Edge) */
+[data-copilotkit] ::-webkit-scrollbar {
+  width: 6px;
+}
+[data-copilotkit] ::-webkit-scrollbar-track {
+  background: transparent;
+}
+[data-copilotkit] ::-webkit-scrollbar-thumb {
+  background: oklch(0.5 0 0);
+  border-radius: 9999px;
+}
+[data-copilotkit] ::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.4 0 0);
+}
+
+/* Firefox */
+[data-copilotkit] * {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.5 0 0) transparent;
+}
+
+[data-copilotkit] .prose input[type="checkbox"] {
+  appearance: none;
+  background-color: #fff;
+  background-origin: border-box;
+  border-color: #9b9b9b;
+  border-width: 1px;
+  color: #004f99;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 1rem;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  -webkit-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  width: 1rem;
+  border-radius: 2px;
+}
+
+[data-copilotkit] .prose input[type="checkbox"]:checked {
+  background-color: #004f99;
+  border-color: #004f99;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}