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

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

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

@@ -1,21 +0,0 @@
-export {
-  CopilotChatConfigurationProvider,
-  useCopilotChatConfiguration,
-  type CopilotChatLabels,
-  type CopilotChatConfigurationValue,
-  type CopilotChatConfigurationProviderProps,
-} from "./CopilotChatConfigurationProvider";
-
-export {
-  CopilotKitProvider,
-  useCopilotKit,
-  type CopilotKitProviderProps,
-  type CopilotKitContextValue,
-} from "./CopilotKitProvider";
-
-export type { Anchor as InspectorAnchor } from "@copilotkit/web-inspector";
-
-export {
-  SandboxFunctionsContext,
-  useSandboxFunctions,
-} from "./SandboxFunctionsContext";

package/src/v2/styles/globals.css

@@ -1,349 +0,0 @@
-@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%;
-}
-/*
- * IntelligenceIndicator pill — visual styles ported from
- * CopilotKit/Intelligence #155.
- *
- * Violet/indigo glassmorphism — text #5B21B6, icon #7C3AED, border
- * #9599E0, gradient stop #EEE6FE, soft shadow #5E64AD.
- */
-.cpk-intelligence-pill {
-  display: inline-flex;
-  /* Opt out of the parent flex-column's default `align-items: stretch`
-     (the auto-mount lives inside `CopilotChatMessageView`'s
-     `cpk:flex cpk:flex-col` container). Without this the pill would
-     stretch to the full chat width even though `inline-flex` is
-     supposed to shrink to its content. */
-  align-self: flex-start;
-  align-items: center;
-  gap: 0.55rem;
-  margin: 0.4rem 0;
-  padding: 0.4rem 0.85rem;
-  border: 1px solid rgb(149 153 224 / 0.32);
-  border-radius: 999px;
-  background: linear-gradient(
-    135deg,
-    rgb(255 255 255 / 0.55) 0%,
-    rgb(238 230 254 / 0.55) 100%
-  );
-  -webkit-backdrop-filter: blur(14px) saturate(160%);
-  backdrop-filter: blur(14px) saturate(160%);
-  color: rgb(91 33 182 / 0.92);
-  font-size: 0.78rem;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  box-shadow:
-    0 1px 2px rgb(94 100 173 / 0.06),
-    0 8px 24px rgb(149 153 224 / 0.08),
-    inset 0 1px 0 rgb(255 255 255 / 0.6);
-  opacity: 0;
-  transform: translateY(2px);
-  animation: cpk-intelligence-pill-fade-in 280ms ease-out forwards;
-}
-
-.cpk-intelligence-pill--fading {
-  /* Switching the `animation` property cancels the in-flight fade-in
-     and replaces the held final-value (opacity:1 from `forwards`) with
-     this fade-out keyframe set. Plain `opacity: 0` declarations would
-     otherwise lose to the animation's held value. */
-  animation: cpk-intelligence-pill-fade-out 480ms ease-out forwards;
-  pointer-events: none;
-}
-
-.cpk-intelligence-pill__icon {
-  display: block;
-  flex-shrink: 0;
-  color: rgb(124 58 237);
-}
-
-.cpk-intelligence-pill__ring {
-  stroke: currentColor;
-  stroke-dasharray: 40 16.55;
-  stroke-dashoffset: 0;
-  transform-origin: 12px 12px;
-  animation: cpk-intelligence-pill-spin 0.9s linear infinite;
-  transition: stroke-dasharray 320ms ease-out;
-}
-
-.cpk-intelligence-pill__ring--done {
-  stroke-dasharray: 56.55 0;
-  animation: none;
-}
-
-.cpk-intelligence-pill__check {
-  stroke: currentColor;
-  stroke-dasharray: 12;
-  stroke-dashoffset: 12;
-  /* Opacity zero hides the rounded `stroke-linecap` end-cap that would
-     otherwise leak through as a stationary dot at path end (16, 9.5)
-     during spinner phase. The `dasharray + dashoffset` zeroes the
-     visible stroke length, but the cap is drawn at the dash boundary
-     regardless, so we need opacity to fully hide it. */
-  opacity: 0;
-  transition:
-    stroke-dashoffset 320ms ease-out 200ms,
-    opacity 200ms ease-out 200ms;
-}
-
-.cpk-intelligence-pill__check--shown {
-  stroke-dashoffset: 0;
-  opacity: 1;
-}
-
-@keyframes cpk-intelligence-pill-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes cpk-intelligence-pill-fade-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-2px);
-  }
-}
-
-@keyframes cpk-intelligence-pill-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}