@copilotkitnext/react 0.0.3 → 0.0.4

package/src/components/ui/dropdown-menu.tsx

@@ -1,257 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}

package/src/components/ui/tooltip.tsx

@@ -1,59 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/hooks/index.ts

@@ -1,6 +0,0 @@
-// React hooks for CopilotKit2
-export { useRenderToolCall } from "./use-render-tool-call";
-export { useFrontendTool } from "./use-frontend-tool";
-export { useHumanInTheLoop } from "./use-human-in-the-loop";
-export { useAgent } from "./use-agent";
-export { useAgentContext } from "./use-agent-context";

package/src/hooks/use-agent-context.tsx

@@ -1,17 +0,0 @@
-import { useCopilotKit } from "../providers/CopilotKitProvider";
-import { Context } from "@ag-ui/client";
-import { useEffect } from "react";
-
-export function useAgentContext(context: Context) {
-  const { description, value } = context;
-  const { copilotkit } = useCopilotKit();
-
-  useEffect(() => {
-    if (!copilotkit) return;
-
-    const id = copilotkit.addContext(context);
-    return () => {
-      copilotkit.removeContext(id);
-    };
-  }, [description, value, copilotkit]);
-}

package/src/hooks/use-agent.tsx

@@ -1,48 +0,0 @@
-import { useCopilotKit } from "@/providers/CopilotKitProvider";
-import { useMemo, useEffect, useReducer, useState } from "react";
-import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
-import { AbstractAgent } from "@ag-ui/client";
-
-export interface UseAgentProps {
-  agentId?: string;
-}
-
-export function useAgent({ agentId }: UseAgentProps = {}) {
-  agentId ??= DEFAULT_AGENT_ID;
-
-  const { copilotkit } = useCopilotKit();
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-  const [isRunning, setIsRunning] = useState(false);
-
-  const agent: AbstractAgent | undefined = useMemo(() => {
-    return copilotkit.getAgent(agentId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [agentId, copilotkit.agents, copilotkit.didLoadRuntime, copilotkit]);
-
-  useEffect(() => {
-    const subscription = agent?.subscribe({
-      onMessagesChanged() {
-        forceUpdate();
-      },
-      onStateChanged() {
-        forceUpdate();
-      },
-      onRunInitialized() {
-        setIsRunning(true);
-      },
-      onRunFinalized() {
-        setIsRunning(false);
-      },
-      onRunFailed() {
-        setIsRunning(false);
-      },
-    });
-
-    return () => subscription?.unsubscribe();
-  }, [agent]);
-
-  return {
-    agent,
-    isRunning,
-  };
-}

package/src/hooks/use-frontend-tool.tsx

@@ -1,46 +0,0 @@
-import { useEffect } from "react";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
-import { ReactFrontendTool } from "../types/frontend-tool";
-import { ReactToolCallRender } from "../types/react-tool-call-render";
-
-export function useFrontendTool<T extends Record<string, unknown> = Record<string, unknown>>(
-  tool: ReactFrontendTool<T>
-) {
-  const { renderToolCalls, copilotkit, setCurrentRenderToolCalls } =
-    useCopilotKit();
-
-  useEffect(() => {
-    // Check if tool already exists
-    if (tool.name in copilotkit.tools) {
-      console.warn(
-        `Tool '${tool.name}' already exists. It will be overridden.`
-      );
-    }
-
-    copilotkit.addTool(tool);
-
-    if (tool.render && tool.name in renderToolCalls) {
-      console.warn(
-        `Render component for tool '${tool.name}' already exists. It will be overridden.`
-      );
-    }
-    
-    if (tool.render && tool.parameters) {
-      setCurrentRenderToolCalls((prev) => [
-        ...prev,
-        {
-          name: tool.name,
-          args: tool.parameters,
-          render: tool.render,
-        } as ReactToolCallRender<unknown>,
-      ]);
-    }
-
-    return () => {
-      copilotkit.removeTool(tool.name);
-      setCurrentRenderToolCalls((prev) => 
-        prev.filter(rc => rc.name !== tool.name)
-      );
-    };
-  }, [tool, copilotkit, renderToolCalls, setCurrentRenderToolCalls]);
-}

package/src/hooks/use-human-in-the-loop.tsx

@@ -1,76 +0,0 @@
-import { ReactToolCallRender } from "@/types/react-tool-call-render";
-import { useFrontendTool } from "./use-frontend-tool";
-import { ReactFrontendTool } from "@/types/frontend-tool";
-import { ReactHumanInTheLoop } from "@/types/human-in-the-loop";
-import { useState, useCallback, useRef } from "react";
-import React from "react";
-
-export function useHumanInTheLoop<T extends Record<string, unknown> = Record<string, unknown>>(
-  tool: ReactHumanInTheLoop<T>
-) {
-  const [status, setStatus] = useState<"inProgress" | "executing" | "complete">(
-    "inProgress"
-  );
-  const resolvePromiseRef = useRef<((result: unknown) => void) | null>(null);
-
-  const respond = useCallback(async (result: unknown) => {
-    if (resolvePromiseRef.current) {
-      resolvePromiseRef.current(result);
-      setStatus("complete");
-      resolvePromiseRef.current = null;
-    }
-  }, []);
-
-  const handler = useCallback(async () => {
-    return new Promise((resolve) => {
-      setStatus("executing");
-      resolvePromiseRef.current = resolve;
-    });
-  }, []);
-
-  const RenderComponent: ReactToolCallRender<T>["render"] = useCallback(
-    (props) => {
-      const ToolComponent = tool.render;
-
-      // Enhance props based on current status
-      if (status === "inProgress" && props.status === "inProgress") {
-        const enhancedProps = {
-          ...props,
-          name: tool.name,
-          description: tool.description || "",
-          respond: undefined,
-        };
-        return React.createElement(ToolComponent, enhancedProps);
-      } else if (status === "executing" && props.status === "executing") {
-        const enhancedProps = {
-          ...props,
-          name: tool.name,
-          description: tool.description || "",
-          respond,
-        };
-        return React.createElement(ToolComponent, enhancedProps);
-      } else if (status === "complete" && props.status === "complete") {
-        const enhancedProps = {
-          ...props,
-          name: tool.name,
-          description: tool.description || "",
-          respond: undefined,
-        };
-        return React.createElement(ToolComponent, enhancedProps);
-      }
-
-      // Fallback - just render with original props
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return React.createElement(ToolComponent, props as any);
-    },
-    [tool.render, tool.name, tool.description, status, respond]
-  );
-
-  const frontendTool: ReactFrontendTool<T> = {
-    ...tool,
-    handler,
-    render: RenderComponent,
-  };
-
-  useFrontendTool(frontendTool);
-}

package/src/hooks/use-render-tool-call.tsx

@@ -1,81 +0,0 @@
-import React, { useCallback } from "react";
-import { ToolCall, ToolMessage } from "@ag-ui/core";
-import { ToolCallStatus } from "@copilotkitnext/core";
-import { useCopilotKit } from "@/providers/CopilotKitProvider";
-import { partialJSONParse } from "@copilotkitnext/shared";
-
-export interface UseRenderToolCallProps {
-  toolCall: ToolCall;
-  toolMessage?: ToolMessage;
-  isLoading: boolean;
-}
-
-/**
- * Hook that returns a function to render tool calls based on the render functions
- * defined in CopilotKitProvider.
- *
- * @returns A function that takes a tool call and optional tool message and returns the rendered component
- */
-export function useRenderToolCall() {
-  const { currentRenderToolCalls } = useCopilotKit();
-
-  const renderToolCall = useCallback(
-    ({
-      toolCall,
-      toolMessage,
-      isLoading,
-    }: UseRenderToolCallProps): React.ReactElement | null => {
-      // Find the render config for this tool call by name
-      // Also check for wildcard (*) renders if no exact match
-      const renderConfig =
-        currentRenderToolCalls.find(
-          (rc) => rc.name === toolCall.function.name
-        ) || currentRenderToolCalls.find((rc) => rc.name === "*");
-
-      if (!renderConfig) {
-        return null;
-      }
-
-      const RenderComponent = renderConfig.render;
-
-      // Parse the arguments if they're a string
-      const args = partialJSONParse(toolCall.function.arguments);
-
-      // Create props based on status with proper typing
-      if (toolMessage) {
-        // Complete status with result
-        return (
-          <RenderComponent
-            key={toolCall.id}
-            args={args}
-            status={ToolCallStatus.Complete}
-            result={toolMessage.content}
-          />
-        );
-      } else if (isLoading) {
-        // In progress status when loading
-        return (
-          <RenderComponent
-            key={toolCall.id}
-            args={args}
-            status={ToolCallStatus.InProgress}
-            result={undefined}
-          />
-        );
-      } else {
-        // Complete status without result (empty result)
-        return (
-          <RenderComponent
-            key={toolCall.id}
-            args={args}
-            status={ToolCallStatus.Complete}
-            result=""
-          />
-        );
-      }
-    },
-    [currentRenderToolCalls]
-  );
-
-  return renderToolCall;
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-// React components and hooks for CopilotKit2
-export * from "./components";
-export * from "./hooks";
-export * from "./providers";