@copilotkitnext/react 0.0.3 → 0.0.4

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

@@ -1,261 +0,0 @@
-import React from "react";
-import { renderHook } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { CopilotKitProvider, useCopilotKit } from "../CopilotKitProvider";
-import { ReactFrontendTool } from "../../types/frontend-tool";
-import { ReactHumanInTheLoop } from "../../types/human-in-the-loop";
-import { z } from "zod";
-
-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>
-        ),
-      });
-
-      expect(result.current.copilotkit.tools["*"]).toBeDefined();
-      expect(result.current.copilotkit.tools["*"]?.name).toBe("*");
-      expect(result.current.copilotkit.tools["*"]?.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.tools["specific"]).toBeDefined();
-      expect(result.current.copilotkit.tools["*"]).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.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>
-        ),
-      });
-
-      expect(result.current.copilotkit.tools["*"]?.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.tools["*"]).toBeDefined();
-      const wildcardRender = result.current.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>
-        ),
-      });
-
-      expect(result.current.copilotkit.tools["*"]?.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.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.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.tools["specificTool"]).toBeDefined();
-      expect(result.current.copilotkit.tools["*"]).toBeDefined();
-      
-      // Both renders should be registered
-      const specificToolRender = result.current.renderToolCalls.find(rc => rc.name === "specificTool");
-      const wildcardRender = result.current.renderToolCalls.find(rc => rc.name === "*");
-      expect(specificToolRender).toBeDefined();
-      expect(wildcardRender).toBeDefined();
-    });
-  });
-});

package/src/providers/index.ts

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

package/src/styles/globals.css

@@ -1,302 +0,0 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-@source "../../../apps/**/*.{ts,tsx}";
-@source "../../../components/**/*.{ts,tsx}";
-@source "../**/*.{ts,tsx}";
-
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --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 {
-  --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 border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-figure[data-rehype-pretty-code-figure] {
-  background-color: rgb(249, 249, 249);
-  margin-top: 8px;
-  margin-bottom: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  @apply rounded-2xl;
-}
-
-figure[data-rehype-pretty-code-figure] pre {
-  background-color: rgb(249, 249, 249);
-}
-
-html .prose code,
-html .prose code span {
-  color: var(--shiki-light) !important;
-  background-color: rgb(249, 249, 249) !important;
-  /* Optional, if you also want font styles */
-  font-style: var(--shiki-light-font-style) !important;
-  font-weight: var(--shiki-light-font-weight) !important;
-  text-decoration: var(--shiki-light-text-decoration) !important;
-}
-
-html.dark figure[data-rehype-pretty-code-figure],
-html.dark figure[data-rehype-pretty-code-figure] pre {
-  background-color: #171717;
-}
-
-html.dark .prose code,
-html.dark .prose code span {
-  color: var(--shiki-dark) !important;
-  background-color: #171717 !important;
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-.prose {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.prose
-  :where(code):not(
-    :where([class~="not-prose"], [class~="not-prose"] *)
-  )::before {
-  content: none;
-}
-
-.prose
-  :where(code):not(
-    :where([class~="not-prose"], [class~="not-prose"] *)
-  )::after {
-  content: none;
-}
-
-.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  font-weight: 400;
-}
-
-.prose h1 {
-  margin-block-end: 8px;
-  margin-bottom: 8px;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.prose h2 {
-  margin-block-end: 4px;
-  margin-block-start: 16px;
-  margin-top: 16px;
-  margin-bottom: 4px;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.prose h3 {
-  margin-block-end: 4px;
-  margin-block-start: 16px;
-  margin-top: 16px;
-  margin-bottom: 4px;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.prose p {
-  margin-block-start: 8px;
-  margin-block-end: 4px;
-  margin-top: 4px;
-  margin-bottom: 8px;
-}
-
-.prose a {
-  color: #2964aa;
-  text-decoration: none;
-}
-
-.prose a:hover {
-  color: #749ac8;
-}
-
-.prose
-  :where(blockquote p:first-of-type):not(
-    :where([class~="not-prose"], [class~="not-prose"] *)
-  )::before {
-  content: none;
-}
-
-.prose blockquote {
-  font-style: normal;
-  font-weight: 400;
-}
-
-.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;
-}
-
-.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%;
-}
-
-.prose em {
-  @apply text-foreground;
-}
-
-.prose hr {
-  margin-block-start: 0px;
-  margin-block-end: 0px;
-  margin-top: 28px;
-  margin-bottom: 28px;
-  color: rgb(13, 13, 13);
-}
-
-.prose td {
-  @apply text-foreground;
-}

package/src/types/frontend-tool.ts

@@ -1,8 +0,0 @@
-import { FrontendTool } from "@copilotkitnext/core";
-import { ReactToolCallRender } from "./react-tool-call-render";
-
-export type ReactFrontendTool<
-  T extends Record<string, unknown> = Record<string, unknown>,
-> = FrontendTool<T> & {
-  render?: ReactToolCallRender<T>["render"];
-};

package/src/types/human-in-the-loop.ts

@@ -1,33 +0,0 @@
-import { FrontendTool, ToolCallStatus } from "@copilotkitnext/core";
-import React from "react";
-
-export type ReactHumanInTheLoop<
-  T extends Record<string, unknown> = Record<string, unknown>,
-> = Omit<FrontendTool<T>, "handler"> & {
-  render: React.ComponentType<
-    | {
-        name: string;
-        description: string;
-        args: Partial<T>;
-        status: ToolCallStatus.InProgress;
-        result: undefined;
-        respond: undefined;
-      }
-    | {
-        name: string;
-        description: string;
-        args: T;
-        status: ToolCallStatus.Executing;
-        result: undefined;
-        respond: (result: unknown) => Promise<void>;
-      }
-    | {
-        name: string;
-        description: string;
-        args: T;
-        status: ToolCallStatus.Complete;
-        result: string;
-        respond: undefined;
-      }
-  >;
-};

package/src/types/index.ts

@@ -1,3 +0,0 @@
-export * from "./react-tool-call-render";
-export * from "./frontend-tool";
-export * from "./human-in-the-loop";

package/src/types/react-tool-call-render.ts

@@ -1,29 +0,0 @@
-import { z } from "zod";
-import { ToolCallStatus } from "@copilotkitnext/core";
-
-export interface ReactToolCallRender<T> {
-  name: string;
-  args: z.ZodSchema<T>;
-  /**
-   * Optional agent ID to constrain this tool render to a specific agent.
-   * If specified, this render will only be used for the specified agent.
-   */
-  agentId?: string;
-  render: React.ComponentType<
-    | {
-        args: Partial<T>;
-        status: ToolCallStatus.InProgress;
-        result: undefined;
-      }
-    | {
-        args: T;
-        status: ToolCallStatus.Executing;
-        result: undefined;
-      }
-    | {
-        args: T;
-        status: ToolCallStatus.Complete;
-        result: string;
-      }
-  >;
-}

package/tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-// eslint-disable-next-line no-undef
-module.exports = {
-  content: ["./src/**/*.{ts,tsx,js,jsx}", "./stories/**/*.{ts,tsx,js,jsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@copilotkitnext/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@copilotkitnext/core": [
-        "../core/dist/index.d.ts",
-        "../core/src/index.ts"
-      ],
-      "@copilotkitnext/shared": [
-        "../shared/dist/index.d.ts",
-        "../shared/src/index.ts"
-      ]
-    },
-    "types": ["vitest/globals"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["dist", "node_modules"]
-}