@copilotkitnext/react 1.52.0-next.5 → 1.52.0-next.7

package/dist/components/ui/dropdown-menu.mjs

@@ -21,9 +21,10 @@ function DropdownMenuTrigger({ ...props }) {
 }
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+		"data-copilotkit": true,
 		"data-slot": "dropdown-menu-content",
 		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),
+		className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md", className),
 		...props
 	}) });
 }
@@ -32,14 +33,14 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"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),
+		className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("bg-border -mx-1 my-1 h-px", className),
+		className: cn("cpk:bg-border cpk:-mx-1 cpk:my-1 cpk:h-px", className),
 		...props
 	});
 }
@@ -53,15 +54,15 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(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),
+		className: cn("cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[state=open]:bg-accent cpk:data-[state=open]:text-accent-foreground cpk:flex cpk:cursor-default cpk:items-center cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[inset]:pl-8", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cpk:ml-auto cpk:size-4" })]
 	});
 }
 function DropdownMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(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),
+		className: cn("cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-hidden cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-lg", className),
 		...props
 	});
 }

package/dist/components/ui/dropdown-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.mjs","names":[],"sources":["../../../src/components/ui/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"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\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"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\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":";;;;;;;;;AAQA,SAAS,aAAa,EACpB,GAAG,SACuD;AAC1D,QAAO,oBAAC,sBAAsB;EAAK,aAAU;EAAgB,GAAI;GAAS;;AAW5E,SAAS,oBAAoB,EAC3B,GAAG,SAC0D;AAC7D,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,GAAI;GACJ;;AAIN,SAAS,oBAAoB,EAC3B,WACA,aAAa,GACb,GAAG,SAC0D;AAC7D,QACE,oBAAC,sBAAsB,oBACrB,oBAAC,sBAAsB;EACrB,aAAU;EACE;EACZ,WAAW,GACT,0jBACA,UACD;EACD,GAAI;GACJ,GAC2B;;AAYnC,SAAS,iBAAiB,EACxB,WACA,OACA,UAAU,WACV,GAAG,SAIF;AACD,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,+mBACA,UACD;EACD,GAAI;GACJ;;AAqFN,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;AAC/D,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EACrD,GAAI;GACJ;;AAoBN,SAAS,gBAAgB,EACvB,GAAG,SACsD;AACzD,QAAO,oBAAC,sBAAsB;EAAI,aAAU;EAAoB,GAAI;GAAS;;AAG/E,SAAS,uBAAuB,EAC9B,WACA,OACA,UACA,GAAG,SAGF;AACD,QACE,qBAAC,sBAAsB;EACrB,aAAU;EACV,cAAY;EACZ,WAAW,GACT,kOACA,UACD;EACD,GAAI;aAEH,UACD,oBAAC,oBAAiB,WAAU,mBAAmB;GACd;;AAIvC,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;AAChE,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,WAAW,GACT,ifACA,UACD;EACD,GAAI;GACJ"}
+{"version":3,"file":"dropdown-menu.mjs","names":[],"sources":["../../../src/components/ui/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-copilotkit\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:max-h-(--radix-dropdown-menu-content-available-height) cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-x-hidden cpk:overflow-y-auto cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-md\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[variant=destructive]:text-destructive cpk:data-[variant=destructive]:focus:bg-destructive/10 cpk:dark:data-[variant=destructive]:focus:bg-destructive/20 cpk:data-[variant=destructive]:focus:text-destructive cpk:data-[variant=destructive]:*:[svg]:!text-destructive cpk:[&_svg:not([class*='text-'])]:text-muted-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:data-[inset]:pl-8 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:py-1.5 cpk:pr-2 cpk:pl-8 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"cpk:pointer-events-none cpk:absolute cpk:left-2 cpk:flex cpk:size-3.5 cpk:items-center cpk:justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"cpk:size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:relative cpk:flex cpk:cursor-default cpk:items-center cpk:gap-2 cpk:rounded-sm cpk:py-1.5 cpk:pr-2 cpk:pl-8 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[disabled]:pointer-events-none cpk:data-[disabled]:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg]:shrink-0 cpk:[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"cpk:pointer-events-none cpk:absolute cpk:left-2 cpk:flex cpk:size-3.5 cpk:items-center cpk:justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"cpk:size-2 cpk:fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:font-medium cpk:data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"cpk:bg-border cpk:-mx-1 cpk:my-1 cpk:h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"cpk:text-muted-foreground cpk:ml-auto cpk:text-xs cpk:tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"cpk:focus:bg-accent cpk:focus:text-accent-foreground cpk:data-[state=open]:bg-accent cpk:data-[state=open]:text-accent-foreground cpk:flex cpk:cursor-default cpk:items-center cpk:rounded-sm cpk:px-2 cpk:py-1.5 cpk:text-sm cpk:outline-hidden cpk:select-none cpk:data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cpk:ml-auto cpk:size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cpk:bg-popover cpk:text-popover-foreground cpk:data-[state=open]:animate-in cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=open]:fade-in-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[state=open]:zoom-in-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:min-w-[8rem] cpk:origin-(--radix-dropdown-menu-content-transform-origin) cpk:overflow-hidden cpk:rounded-md cpk:border cpk:p-1 cpk:shadow-lg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n"],"mappings":";;;;;;;;;AAQA,SAAS,aAAa,EACpB,GAAG,SACuD;AAC1D,QAAO,oBAAC,sBAAsB;EAAK,aAAU;EAAgB,GAAI;GAAS;;AAW5E,SAAS,oBAAoB,EAC3B,GAAG,SAC0D;AAC7D,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,GAAI;GACJ;;AAIN,SAAS,oBAAoB,EAC3B,WACA,aAAa,GACb,GAAG,SAC0D;AAC7D,QACE,oBAAC,sBAAsB,oBACrB,oBAAC,sBAAsB;EACrB;EACA,aAAU;EACE;EACZ,WAAW,GACT,kpBACA,UACD;EACD,GAAI;GACJ,GAC2B;;AAYnC,SAAS,iBAAiB,EACxB,WACA,OACA,UAAU,WACV,GAAG,SAIF;AACD,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,mtBACA,UACD;EACD,GAAI;GACJ;;AAqFN,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;AAC/D,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,WAAW,GAAG,6CAA6C,UAAU;EACrE,GAAI;GACJ;;AAoBN,SAAS,gBAAgB,EACvB,GAAG,SACsD;AACzD,QAAO,oBAAC,sBAAsB;EAAI,aAAU;EAAoB,GAAI;GAAS;;AAG/E,SAAS,uBAAuB,EAC9B,WACA,OACA,UACA,GAAG,SAGF;AACD,QACE,qBAAC,sBAAsB;EACrB,aAAU;EACV,cAAY;EACZ,WAAW,GACT,0RACA,UACD;EACD,GAAI;aAEH,UACD,oBAAC,oBAAiB,WAAU,2BAA2B;GACtB;;AAIvC,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;AAChE,QACE,oBAAC,sBAAsB;EACrB,aAAU;EACV,WAAW,GACT,ikBACA,UACD;EACD,GAAI;GACJ"}

package/dist/components/ui/tooltip.cjs

@@ -28,11 +28,12 @@ function TooltipTrigger({ ...props }) {
 }
 function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_tooltip.Content, {
+		"data-copilotkit": true,
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: require_utils.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),
+		className: require_utils.cn("cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Arrow, { className: "cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]" })]
 	}) });
 }
 

package/dist/components/ui/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","cn"],"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"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\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;;;;AAKA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACsD;AACzD,QACE,2CAACA,wBAAiB;EAChB,aAAU;EACK;EACf,GAAI;GACJ;;AAIN,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QACE,2CAAC,6BACC,2CAACA,wBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,2CAACA,wBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;AACxD,QACE,2CAACA,wBAAiB,oBAChB,4CAACA,wBAAiB;EAChB,aAAU;EACE;EACZ,WAAWC,iBACT,0aACA,UACD;EACD,GAAI;aAEH,UACD,2CAACD,wBAAiB,SAAM,WAAU,iGAAiG;GAC1G,GACH"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","cn"],"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-copilotkit\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;;;;AAKA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACsD;AACzD,QACE,2CAACA,wBAAiB;EAChB,aAAU;EACK;EACf,GAAI;GACJ;;AAIN,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QACE,2CAAC,6BACC,2CAACA,wBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,2CAACA,wBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;AACxD,QACE,2CAACA,wBAAiB,oBAChB,4CAACA,wBAAiB;EAChB;EACA,aAAU;EACE;EACZ,WAAWC,iBACT,0fACA,UACD;EACD,GAAI;aAEH,UACD,2CAACD,wBAAiB,SAAM,WAAU,6HAA6H;GACtI,GACH"}

package/dist/components/ui/tooltip.mjs

@@ -25,11 +25,12 @@ function TooltipTrigger({ ...props }) {
 }
 function TooltipContent({ className, sideOffset = 0, children, ...props }) {
 	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
+		"data-copilotkit": true,
 		"data-slot": "tooltip-content",
 		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),
+		className: cn("cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
+		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]" })]
 	}) });
 }
 

package/dist/components/ui/tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.mjs","names":[],"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"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\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;AAKA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACsD;AACzD,QACE,oBAAC,iBAAiB;EAChB,aAAU;EACK;EACf,GAAI;GACJ;;AAIN,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QACE,oBAAC,6BACC,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB,oBAChB,qBAAC,iBAAiB;EAChB,aAAU;EACE;EACZ,WAAW,GACT,0aACA,UACD;EACD,GAAI;aAEH,UACD,oBAAC,iBAAiB,SAAM,WAAU,iGAAiG;GAC1G,GACH"}
+{"version":3,"file":"tooltip.mjs","names":[],"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-copilotkit\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"cpk:bg-primary cpk:text-primary-foreground cpk:animate-in cpk:fade-in-0 cpk:zoom-in-95 cpk:data-[state=closed]:animate-out cpk:data-[state=closed]:fade-out-0 cpk:data-[state=closed]:zoom-out-95 cpk:data-[side=bottom]:slide-in-from-top-2 cpk:data-[side=left]:slide-in-from-right-2 cpk:data-[side=right]:slide-in-from-left-2 cpk:data-[side=top]:slide-in-from-bottom-2 cpk:z-50 cpk:w-fit cpk:origin-(--radix-tooltip-content-transform-origin) cpk:rounded-md cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:text-balance\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"cpk:bg-primary cpk:fill-primary cpk:z-50 cpk:size-2.5 cpk:translate-y-[calc(-50%_-_2px)] cpk:rotate-45 cpk:rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;AAKA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACsD;AACzD,QACE,oBAAC,iBAAiB;EAChB,aAAU;EACK;EACf,GAAI;GACJ;;AAIN,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QACE,oBAAC,6BACC,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB,oBAChB,qBAAC,iBAAiB;EAChB;EACA,aAAU;EACE;EACZ,WAAW,GACT,0fACA,UACD;EACD,GAAI;aAEH,UACD,oBAAC,iBAAiB,SAAM,WAAU,6HAA6H;GACtI,GACH"}

package/dist/hooks/index.cjs

@@ -10,3 +10,4 @@ const require_use_agent = require('./use-agent.cjs');
 const require_use_agent_context = require('./use-agent-context.cjs');
 const require_use_suggestions = require('./use-suggestions.cjs');
 const require_use_configure_suggestions = require('./use-configure-suggestions.cjs');
+const require_use_interrupt = require('./use-interrupt.cjs');

package/dist/hooks/index.d.cts

@@ -9,4 +9,5 @@ import { useHumanInTheLoop } from "./use-human-in-the-loop.cjs";
 import { UseAgentUpdate, useAgent } from "./use-agent.cjs";
 import { AgentContextInput, JsonSerializable, useAgentContext } from "./use-agent-context.cjs";
 import { useSuggestions } from "./use-suggestions.cjs";
-import { useConfigureSuggestions } from "./use-configure-suggestions.cjs";
+import { useConfigureSuggestions } from "./use-configure-suggestions.cjs";
+import { UseInterruptConfig, useInterrupt } from "./use-interrupt.cjs";

package/dist/hooks/index.d.mts

@@ -9,4 +9,5 @@ import { useHumanInTheLoop } from "./use-human-in-the-loop.mjs";
 import { UseAgentUpdate, useAgent } from "./use-agent.mjs";
 import { AgentContextInput, JsonSerializable, useAgentContext } from "./use-agent-context.mjs";
 import { useSuggestions } from "./use-suggestions.mjs";
-import { useConfigureSuggestions } from "./use-configure-suggestions.mjs";
+import { useConfigureSuggestions } from "./use-configure-suggestions.mjs";
+import { UseInterruptConfig, useInterrupt } from "./use-interrupt.mjs";

package/dist/hooks/index.mjs

@@ -10,5 +10,6 @@ import { UseAgentUpdate, useAgent } from "./use-agent.mjs";
 import { useAgentContext } from "./use-agent-context.mjs";
 import { useSuggestions } from "./use-suggestions.mjs";
 import { useConfigureSuggestions } from "./use-configure-suggestions.mjs";
+import { useInterrupt } from "./use-interrupt.mjs";
 
 export {  };

package/dist/hooks/use-component.cjs

@@ -9,21 +9,34 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * This hook is a convenience wrapper around `useFrontendTool` that:
 * - builds a model-facing tool description,
 * - forwards optional Zod parameters,
-* - renders your component with tool call args.
+* - renders your component with tool call parameters.
 *
 * Use this when you want to display a typed visual component for a tool call
 * without manually wiring a full frontend tool object.
 *
-* @typeParam T - Shape of tool args expected by the component.
+* When `parameters` is provided, render props are inferred from the schema
+* via `z.infer`. When omitted, the render component may accept any props.
+*
+* @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
 * @param config - Tool registration config.
 * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
 *
 * @example
 * ```tsx
+* // Without parameters — render accepts any props
+* useComponent({
+*   name: "showGreeting",
+*   render: ({ message }: { message: string }) => <div>{message}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* // With parameters — render props inferred from schema
 * useComponent({
 *   name: "showWeatherCard",
 *   parameters: z.object({ city: z.string() }),
-*   component: ({ city }: { city: string }) => <div>{city}</div>,
+*   render: ({ city }) => <div>{city}</div>,
 * });
 * ```
 *
@@ -33,7 +46,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   {
 *     name: "renderProfile",
 *     parameters: z.object({ userId: z.string() }),
-*     component: ProfileCard,
+*     render: ProfileCard,
 *     agentId: "support-agent",
 *   },
 *   [selectedAgentId],
@@ -48,7 +61,7 @@ function useComponent(config, deps) {
 		description: fullDescription,
 		parameters: config.parameters,
 		render: ({ args }) => {
-			const Component = config.component;
+			const Component = config.render;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
 		},
 		agentId: config.agentId

package/dist/hooks/use-component.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-component.cjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n/**\n * Registers a React component as a frontend tool renderer in chat.\n *\n * This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call args.\n *\n * Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n *\n * @typeParam T - Shape of tool args expected by the component.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n *\n * @example\n * ```tsx\n * useComponent({\n *   name: \"showWeatherCard\",\n *   parameters: z.object({ city: z.string() }),\n *   component: ({ city }: { city: string }) => <div>{city}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useComponent(\n *   {\n *     name: \"renderProfile\",\n *     parameters: z.object({ userId: z.string() }),\n *     component: ProfileCard,\n *     agentId: \"support-agent\",\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(\n  config: {\n    name: string;\n    description?: string;\n    parameters?: z.ZodType<T>;\n    component: ComponentType<T>;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n  const fullDescription = config.description\n    ? `${prefix}\\n\\n${config.description}`\n    : prefix;\n\n  useFrontendTool(\n    {\n      name: config.name,\n      description: fullDescription,\n      parameters: config.parameters,\n      render: ({ args }) => {\n        const Component = config.component;\n        return <Component {...(args as T)} />;\n      },\n      agentId: config.agentId,\n    },\n    deps,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,2CACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAAW;GACpB,MAAM,YAAY,OAAO;AACzB,UAAO,2CAAC,aAAU,GAAK,OAAc;;EAEvC,SAAS,OAAO;EACjB,EACD,KACD"}
+{"version":3,"file":"use-component.cjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;\n\n/**\n * Registers a React component as a frontend tool renderer in chat.\n *\n * This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call parameters.\n *\n * Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n *\n * When `parameters` is provided, render props are inferred from the schema\n * via `z.infer`. When omitted, the render component may accept any props.\n *\n * @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n *\n * @example\n * ```tsx\n * // Without parameters — render accepts any props\n * useComponent({\n *   name: \"showGreeting\",\n *   render: ({ message }: { message: string }) => <div>{message}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * // With parameters — render props inferred from schema\n * useComponent({\n *   name: \"showWeatherCard\",\n *   parameters: z.object({ city: z.string() }),\n *   render: ({ city }) => <div>{city}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useComponent(\n *   {\n *     name: \"renderProfile\",\n *     parameters: z.object({ userId: z.string() }),\n *     render: ProfileCard,\n *     agentId: \"support-agent\",\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n  TSchema extends z.ZodTypeAny | undefined = undefined,\n>(\n  config: {\n    name: string;\n    description?: string;\n    parameters?: TSchema;\n    render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n  const fullDescription = config.description\n    ? `${prefix}\\n\\n${config.description}`\n    : prefix;\n\n  useFrontendTool(\n    {\n      name: config.name,\n      description: fullDescription,\n      parameters: config.parameters,\n      render: ({ args }: { args: unknown }) => {\n        const Component = config.render;\n        return <Component {...(args as InferRenderProps<TSchema>)} />;\n      },\n      agentId: config.agentId,\n    },\n    deps,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,2CACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAA8B;GACvC,MAAM,YAAY,OAAO;AACzB,UAAO,2CAAC,aAAU,GAAK,OAAsC;;EAE/D,SAAS,OAAO;EACjB,EACD,KACD"}

package/dist/hooks/use-component.d.cts

@@ -2,27 +2,41 @@ import { ComponentType } from "react";
 import { z } from "zod";
 
 //#region src/hooks/use-component.d.ts
+type InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;
 /**
  * Registers a React component as a frontend tool renderer in chat.
  *
  * This hook is a convenience wrapper around `useFrontendTool` that:
  * - builds a model-facing tool description,
  * - forwards optional Zod parameters,
- * - renders your component with tool call args.
+ * - renders your component with tool call parameters.
  *
  * Use this when you want to display a typed visual component for a tool call
  * without manually wiring a full frontend tool object.
  *
- * @typeParam T - Shape of tool args expected by the component.
+ * When `parameters` is provided, render props are inferred from the schema
+ * via `z.infer`. When omitted, the render component may accept any props.
+ *
+ * @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
  * @param config - Tool registration config.
  * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
  *
  * @example
  * ```tsx
+ * // Without parameters — render accepts any props
+ * useComponent({
+ *   name: "showGreeting",
+ *   render: ({ message }: { message: string }) => <div>{message}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parameters — render props inferred from schema
  * useComponent({
  *   name: "showWeatherCard",
  *   parameters: z.object({ city: z.string() }),
- *   component: ({ city }: { city: string }) => <div>{city}</div>,
+ *   render: ({ city }) => <div>{city}</div>,
  * });
  * ```
  *
@@ -32,18 +46,18 @@ import { z } from "zod";
  *   {
  *     name: "renderProfile",
  *     parameters: z.object({ userId: z.string() }),
- *     component: ProfileCard,
+ *     render: ProfileCard,
  *     agentId: "support-agent",
  *   },
  *   [selectedAgentId],
  * );
  * ```
  */
-declare function useComponent<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+declare function useComponent<TSchema extends z.ZodTypeAny | undefined = undefined>(config: {
   name: string;
   description?: string;
-  parameters?: z.ZodType<T>;
-  component: ComponentType<T>;
+  parameters?: TSchema;
+  render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;
   agentId?: string;
 }, deps?: ReadonlyArray<unknown>): void;
 //#endregion

package/dist/hooks/use-component.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-component.d.cts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":";;;;;;AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,YAAA,WACJ,MAAA,oBAA0B,MAAA,kBAAA,CAEpC,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,CAAA,CAAE,OAAA,CAAQ,CAAA;EACvB,SAAA,EAAW,aAAA,CAAc,CAAA;EACzB,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}
+{"version":3,"file":"use-component.d.cts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":";;;;KAKK,gBAAA,MAAsB,CAAA,SAAU,CAAA,CAAE,UAAA,GAAa,CAAA,CAAE,KAAA,CAAM,CAAA;;AAJjB;;;;;;;;;;;;;;;;;;AAwD3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,YAAA,iBACE,CAAA,CAAE,UAAA,yBAAA,CAElB,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,OAAA;EACb,MAAA,EAAQ,aAAA,CAAc,OAAA,CAAQ,gBAAA,CAAiB,OAAA;EAC/C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}

package/dist/hooks/use-component.d.mts

@@ -2,27 +2,41 @@ import { ComponentType } from "react";
 import { z } from "zod";
 
 //#region src/hooks/use-component.d.ts
+type InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;
 /**
  * Registers a React component as a frontend tool renderer in chat.
  *
  * This hook is a convenience wrapper around `useFrontendTool` that:
  * - builds a model-facing tool description,
  * - forwards optional Zod parameters,
- * - renders your component with tool call args.
+ * - renders your component with tool call parameters.
  *
  * Use this when you want to display a typed visual component for a tool call
  * without manually wiring a full frontend tool object.
  *
- * @typeParam T - Shape of tool args expected by the component.
+ * When `parameters` is provided, render props are inferred from the schema
+ * via `z.infer`. When omitted, the render component may accept any props.
+ *
+ * @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
  * @param config - Tool registration config.
  * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
  *
  * @example
  * ```tsx
+ * // Without parameters — render accepts any props
+ * useComponent({
+ *   name: "showGreeting",
+ *   render: ({ message }: { message: string }) => <div>{message}</div>,
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With parameters — render props inferred from schema
  * useComponent({
  *   name: "showWeatherCard",
  *   parameters: z.object({ city: z.string() }),
- *   component: ({ city }: { city: string }) => <div>{city}</div>,
+ *   render: ({ city }) => <div>{city}</div>,
  * });
  * ```
  *
@@ -32,18 +46,18 @@ import { z } from "zod";
  *   {
  *     name: "renderProfile",
  *     parameters: z.object({ userId: z.string() }),
- *     component: ProfileCard,
+ *     render: ProfileCard,
  *     agentId: "support-agent",
  *   },
  *   [selectedAgentId],
  * );
  * ```
  */
-declare function useComponent<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+declare function useComponent<TSchema extends z.ZodTypeAny | undefined = undefined>(config: {
   name: string;
   description?: string;
-  parameters?: z.ZodType<T>;
-  component: ComponentType<T>;
+  parameters?: TSchema;
+  render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;
   agentId?: string;
 }, deps?: ReadonlyArray<unknown>): void;
 //#endregion

package/dist/hooks/use-component.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-component.d.mts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":";;;;;;AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,YAAA,WACJ,MAAA,oBAA0B,MAAA,kBAAA,CAEpC,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,CAAA,CAAE,OAAA,CAAQ,CAAA;EACvB,SAAA,EAAW,aAAA,CAAc,CAAA;EACzB,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}
+{"version":3,"file":"use-component.d.mts","names":[],"sources":["../../src/hooks/use-component.tsx"],"mappings":";;;;KAKK,gBAAA,MAAsB,CAAA,SAAU,CAAA,CAAE,UAAA,GAAa,CAAA,CAAE,KAAA,CAAM,CAAA;;AAJjB;;;;;;;;;;;;;;;;;;AAwD3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,YAAA,iBACE,CAAA,CAAE,UAAA,yBAAA,CAElB,MAAA;EACE,IAAA;EACA,WAAA;EACA,UAAA,GAAa,OAAA;EACb,MAAA,EAAQ,aAAA,CAAc,OAAA,CAAQ,gBAAA,CAAiB,OAAA;EAC/C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}

package/dist/hooks/use-component.mjs

@@ -8,21 +8,34 @@ import { jsx } from "react/jsx-runtime";
 * This hook is a convenience wrapper around `useFrontendTool` that:
 * - builds a model-facing tool description,
 * - forwards optional Zod parameters,
-* - renders your component with tool call args.
+* - renders your component with tool call parameters.
 *
 * Use this when you want to display a typed visual component for a tool call
 * without manually wiring a full frontend tool object.
 *
-* @typeParam T - Shape of tool args expected by the component.
+* When `parameters` is provided, render props are inferred from the schema
+* via `z.infer`. When omitted, the render component may accept any props.
+*
+* @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.
 * @param config - Tool registration config.
 * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
 *
 * @example
 * ```tsx
+* // Without parameters — render accepts any props
+* useComponent({
+*   name: "showGreeting",
+*   render: ({ message }: { message: string }) => <div>{message}</div>,
+* });
+* ```
+*
+* @example
+* ```tsx
+* // With parameters — render props inferred from schema
 * useComponent({
 *   name: "showWeatherCard",
 *   parameters: z.object({ city: z.string() }),
-*   component: ({ city }: { city: string }) => <div>{city}</div>,
+*   render: ({ city }) => <div>{city}</div>,
 * });
 * ```
 *
@@ -32,7 +45,7 @@ import { jsx } from "react/jsx-runtime";
 *   {
 *     name: "renderProfile",
 *     parameters: z.object({ userId: z.string() }),
-*     component: ProfileCard,
+*     render: ProfileCard,
 *     agentId: "support-agent",
 *   },
 *   [selectedAgentId],
@@ -47,7 +60,7 @@ function useComponent(config, deps) {
 		description: fullDescription,
 		parameters: config.parameters,
 		render: ({ args }) => {
-			const Component = config.component;
+			const Component = config.render;
 			return /* @__PURE__ */ jsx(Component, { ...args });
 		},
 		agentId: config.agentId

package/dist/hooks/use-component.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-component.mjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n/**\n * Registers a React component as a frontend tool renderer in chat.\n *\n * This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call args.\n *\n * Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n *\n * @typeParam T - Shape of tool args expected by the component.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n *\n * @example\n * ```tsx\n * useComponent({\n *   name: \"showWeatherCard\",\n *   parameters: z.object({ city: z.string() }),\n *   component: ({ city }: { city: string }) => <div>{city}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useComponent(\n *   {\n *     name: \"renderProfile\",\n *     parameters: z.object({ userId: z.string() }),\n *     component: ProfileCard,\n *     agentId: \"support-agent\",\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>(\n  config: {\n    name: string;\n    description?: string;\n    parameters?: z.ZodType<T>;\n    component: ComponentType<T>;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n  const fullDescription = config.description\n    ? `${prefix}\\n\\n${config.description}`\n    : prefix;\n\n  useFrontendTool(\n    {\n      name: config.name,\n      description: fullDescription,\n      parameters: config.parameters,\n      render: ({ args }) => {\n        const Component = config.component;\n        return <Component {...(args as T)} />;\n      },\n      agentId: config.agentId,\n    },\n    deps,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,iBACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAAW;GACpB,MAAM,YAAY,OAAO;AACzB,UAAO,oBAAC,aAAU,GAAK,OAAc;;EAEvC,SAAS,OAAO;EACjB,EACD,KACD"}
+{"version":3,"file":"use-component.mjs","names":[],"sources":["../../src/hooks/use-component.tsx"],"sourcesContent":["import { z } from \"zod\";\nimport type { ComponentType } from \"react\";\nimport { useFrontendTool } from \"./use-frontend-tool\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype InferRenderProps<T> = T extends z.ZodTypeAny ? z.infer<T> : any;\n\n/**\n * Registers a React component as a frontend tool renderer in chat.\n *\n * This hook is a convenience wrapper around `useFrontendTool` that:\n * - builds a model-facing tool description,\n * - forwards optional Zod parameters,\n * - renders your component with tool call parameters.\n *\n * Use this when you want to display a typed visual component for a tool call\n * without manually wiring a full frontend tool object.\n *\n * When `parameters` is provided, render props are inferred from the schema\n * via `z.infer`. When omitted, the render component may accept any props.\n *\n * @typeParam TSchema - Zod schema describing tool parameters, or `undefined` when no schema is given.\n * @param config - Tool registration config.\n * @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).\n *\n * @example\n * ```tsx\n * // Without parameters — render accepts any props\n * useComponent({\n *   name: \"showGreeting\",\n *   render: ({ message }: { message: string }) => <div>{message}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * // With parameters — render props inferred from schema\n * useComponent({\n *   name: \"showWeatherCard\",\n *   parameters: z.object({ city: z.string() }),\n *   render: ({ city }) => <div>{city}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useComponent(\n *   {\n *     name: \"renderProfile\",\n *     parameters: z.object({ userId: z.string() }),\n *     render: ProfileCard,\n *     agentId: \"support-agent\",\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useComponent<\n  TSchema extends z.ZodTypeAny | undefined = undefined,\n>(\n  config: {\n    name: string;\n    description?: string;\n    parameters?: TSchema;\n    render: ComponentType<NoInfer<InferRenderProps<TSchema>>>;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const prefix = `Use this tool to display the \"${config.name}\" component in the chat. This tool renders a visual UI component for the user.`;\n  const fullDescription = config.description\n    ? `${prefix}\\n\\n${config.description}`\n    : prefix;\n\n  useFrontendTool(\n    {\n      name: config.name,\n      description: fullDescription,\n      parameters: config.parameters,\n      render: ({ args }: { args: unknown }) => {\n        const Component = config.render;\n        return <Component {...(args as InferRenderProps<TSchema>)} />;\n      },\n      agentId: config.agentId,\n    },\n    deps,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,aAGd,QAOA,MACM;CACN,MAAM,SAAS,iCAAiC,OAAO,KAAK;CAC5D,MAAM,kBAAkB,OAAO,cAC3B,GAAG,OAAO,MAAM,OAAO,gBACvB;AAEJ,iBACE;EACE,MAAM,OAAO;EACb,aAAa;EACb,YAAY,OAAO;EACnB,SAAS,EAAE,WAA8B;GACvC,MAAM,YAAY,OAAO;AACzB,UAAO,oBAAC,aAAU,GAAK,OAAsC;;EAE/D,SAAS,OAAO;EACjB,EACD,KACD"}

package/dist/hooks/use-default-render-tool.cjs

@@ -47,7 +47,7 @@ function useDefaultRenderTool(config, deps) {
 		render: config?.render ?? DefaultToolCallRenderer
 	}, deps);
 }
-function DefaultToolCallRenderer({ name, args, status, result }) {
+function DefaultToolCallRenderer({ name, parameters, status, result }) {
 	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
 	const statusString = String(status);
 	const isActive = statusString === "inProgress" || statusString === "executing";
@@ -163,7 +163,7 @@ function DefaultToolCallRenderer({ name, args, status, result }) {
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-word"
 					},
-					children: JSON.stringify(args ?? {}, null, 2)
+					children: JSON.stringify(parameters ?? {}, null, 2)
 				})] }), result !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					style: {
 						fontSize: "10px",

package/dist/hooks/use-default-render-tool.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-default-render-tool.cjs","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useRenderTool } from \"./use-render-tool\";\n\ntype DefaultRenderProps = {\n  name: string;\n  args: any;\n  status: string;\n  result: string | undefined;\n};\n\n/**\n * Registers a wildcard (`\"*\"`) tool-call renderer via `useRenderTool`.\n *\n * - Call with no config to use CopilotKit's built-in default tool-call card.\n * - Pass `config.render` to replace the default UI with your own fallback renderer.\n *\n * This is useful when you want a generic renderer for tools that do not have a\n * dedicated `useRenderTool({ name: \"...\" })` registration.\n *\n * @param config - Optional custom wildcard render function.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useDefaultRenderTool();\n * ```\n *\n * @example\n * ```tsx\n * useDefaultRenderTool({\n *   render: ({ name, status }) => <div>{name}: {status}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useDefaultRenderTool(\n *   {\n *     render: ({ name, result }) => (\n *       <ToolEventRow title={name} payload={result} compact={compactMode} />\n *     ),\n *   },\n *   [compactMode],\n * );\n * ```\n */\nexport function useDefaultRenderTool(\n  config?: {\n    render?: (props: DefaultRenderProps) => React.ReactElement;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  useRenderTool(\n    {\n      name: \"*\",\n      render: config?.render ?? DefaultToolCallRenderer,\n    },\n    deps,\n  );\n}\n\nfunction DefaultToolCallRenderer({\n  name,\n  args,\n  status,\n  result,\n}: DefaultRenderProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const statusString = String(status) as\n    | \"inProgress\"\n    | \"executing\"\n    | \"complete\";\n  const isActive =\n    statusString === \"inProgress\" || statusString === \"executing\";\n  const isComplete = statusString === \"complete\";\n\n  const statusLabel = isActive ? \"Running\" : isComplete ? \"Done\" : status;\n  const dotColor = isActive ? \"#f59e0b\" : isComplete ? \"#10b981\" : \"#a1a1aa\";\n  const badgeBg = isActive ? \"#fef3c7\" : isComplete ? \"#d1fae5\" : \"#f4f4f5\";\n  const badgeColor = isActive ? \"#92400e\" : isComplete ? \"#065f46\" : \"#3f3f46\";\n\n  return (\n    <div\n      style={{\n        marginTop: \"8px\",\n        paddingBottom: \"8px\",\n      }}\n    >\n      <div\n        style={{\n          borderRadius: \"12px\",\n          border: \"1px solid #e4e4e7\",\n          backgroundColor: \"#fafafa\",\n          padding: \"14px 16px\",\n        }}\n      >\n        {/* Header row — always visible */}\n        <div\n          onClick={() => setIsExpanded(!isExpanded)}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            gap: \"10px\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"8px\",\n              minWidth: 0,\n            }}\n          >\n            <svg\n              style={{\n                height: \"14px\",\n                width: \"14px\",\n                color: \"#71717a\",\n                transition: \"transform 0.15s\",\n                transform: isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n                flexShrink: 0,\n              }}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              strokeWidth={2}\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n              />\n            </svg>\n            <span\n              style={{\n                display: \"inline-block\",\n                height: \"8px\",\n                width: \"8px\",\n                borderRadius: \"50%\",\n                backgroundColor: dotColor,\n                flexShrink: 0,\n              }}\n            />\n            <span\n              style={{\n                fontSize: \"13px\",\n                fontWeight: 600,\n                color: \"#18181b\",\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {name}\n            </span>\n          </div>\n\n          <span\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              borderRadius: \"9999px\",\n              padding: \"2px 8px\",\n              fontSize: \"11px\",\n              fontWeight: 500,\n              backgroundColor: badgeBg,\n              color: badgeColor,\n              flexShrink: 0,\n            }}\n          >\n            {statusLabel}\n          </span>\n        </div>\n\n        {/* Expandable details */}\n        {isExpanded && (\n          <div style={{ marginTop: \"12px\", display: \"grid\", gap: \"12px\" }}>\n            <div>\n              <div\n                style={{\n                  fontSize: \"10px\",\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"0.05em\",\n                  color: \"#71717a\",\n                }}\n              >\n                Arguments\n              </div>\n              <pre\n                style={{\n                  marginTop: \"6px\",\n                  maxHeight: \"200px\",\n                  overflow: \"auto\",\n                  borderRadius: \"6px\",\n                  backgroundColor: \"#f4f4f5\",\n                  padding: \"10px\",\n                  fontSize: \"11px\",\n                  lineHeight: 1.6,\n                  color: \"#27272a\",\n                  whiteSpace: \"pre-wrap\",\n                  wordBreak: \"break-word\",\n                }}\n              >\n                {JSON.stringify(args ?? {}, null, 2)}\n              </pre>\n            </div>\n\n            {result !== undefined && (\n              <div>\n                <div\n                  style={{\n                    fontSize: \"10px\",\n                    textTransform: \"uppercase\",\n                    letterSpacing: \"0.05em\",\n                    color: \"#71717a\",\n                  }}\n                >\n                  Result\n                </div>\n                <pre\n                  style={{\n                    marginTop: \"6px\",\n                    maxHeight: \"200px\",\n                    overflow: \"auto\",\n                    borderRadius: \"6px\",\n                    backgroundColor: \"#f4f4f5\",\n                    padding: \"10px\",\n                    fontSize: \"11px\",\n                    lineHeight: 1.6,\n                    color: \"#27272a\",\n                    whiteSpace: \"pre-wrap\",\n                    wordBreak: \"break-word\",\n                  }}\n                >\n                  {typeof result === \"string\"\n                    ? result\n                    : JSON.stringify(result, null, 2)}\n                </pre>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,qBACd,QAGA,MACM;AACN,uCACE;EACE,MAAM;EACN,QAAQ,QAAQ,UAAU;EAC3B,EACD,KACD;;AAGH,SAAS,wBAAwB,EAC/B,MACA,MACA,QACA,UACyC;CACzC,MAAM,CAAC,YAAY,qCAA0B,MAAM;CAEnD,MAAM,eAAe,OAAO,OAAO;CAInC,MAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;CACpD,MAAM,aAAa,iBAAiB;AAOpC,QACE,2CAAC;EACC,OAAO;GACL,WAAW;GACX,eAAe;GAChB;YAED,4CAAC;GACC,OAAO;IACL,cAAc;IACd,QAAQ;IACR,iBAAiB;IACjB,SAAS;IACV;cAGD,4CAAC;IACC,eAAe,cAAc,CAAC,WAAW;IACzC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,QAAQ;KACR,YAAY;KACb;eAED,4CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK;MACL,UAAU;MACX;;MAED,2CAAC;OACC,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,WAAW,aAAa,kBAAkB;QAC1C,YAAY;QACb;OACD,MAAK;OACL,SAAQ;OACR,aAAa;OACb,QAAO;iBAEP,2CAAC;QACC,eAAc;QACd,gBAAe;QACf,GAAE;SACF;QACE;MACN,2CAAC,UACC,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,cAAc;OACd,iBAjEG,WAAW,YAAY,aAAa,YAAY;OAkEnD,YAAY;OACb,GACD;MACF,2CAAC;OACC,OAAO;QACL,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA;QACI;;MACH,EAEN,2CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,cAAc;MACd,SAAS;MACT,UAAU;MACV,YAAY;MACZ,iBA1FI,WAAW,YAAY,aAAa,YAAY;MA2FpD,OA1FO,WAAW,YAAY,aAAa,YAAY;MA2FvD,YAAY;MACb;eA/FS,WAAW,YAAY,aAAa,SAAS;MAkGlD;KACH,EAGL,cACC,4CAAC;IAAI,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAQ,KAAK;KAAQ;eAC7D,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,KAAK,UAAU,QAAQ,EAAE,EAAE,MAAM,EAAE;MAChC,IACF,EAEL,WAAW,UACV,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,OAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,EAAE;MAC/B,IACF;KAEJ;IAEJ;GACF"}
+{"version":3,"file":"use-default-render-tool.cjs","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useRenderTool } from \"./use-render-tool\";\n\ntype DefaultRenderProps = {\n  /** The name of the tool being called. */\n  name: string;\n  /** The parsed parameters passed to the tool call. */\n  parameters: unknown;\n  /** Current execution status of the tool call. */\n  status: \"inProgress\" | \"executing\" | \"complete\";\n  /** The tool call result string, available only when `status` is `\"complete\"`. */\n  result: string | undefined;\n};\n\n/**\n * Registers a wildcard (`\"*\"`) tool-call renderer via `useRenderTool`.\n *\n * - Call with no config to use CopilotKit's built-in default tool-call card.\n * - Pass `config.render` to replace the default UI with your own fallback renderer.\n *\n * This is useful when you want a generic renderer for tools that do not have a\n * dedicated `useRenderTool({ name: \"...\" })` registration.\n *\n * @param config - Optional custom wildcard render function.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useDefaultRenderTool();\n * ```\n *\n * @example\n * ```tsx\n * useDefaultRenderTool({\n *   render: ({ name, status }) => <div>{name}: {status}</div>,\n * });\n * ```\n *\n * @example\n * ```tsx\n * useDefaultRenderTool(\n *   {\n *     render: ({ name, result }) => (\n *       <ToolEventRow title={name} payload={result} compact={compactMode} />\n *     ),\n *   },\n *   [compactMode],\n * );\n * ```\n */\nexport function useDefaultRenderTool(\n  config?: {\n    render?: (props: DefaultRenderProps) => React.ReactElement;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void {\n  useRenderTool(\n    {\n      name: \"*\",\n      render: config?.render ?? DefaultToolCallRenderer,\n    },\n    deps,\n  );\n}\n\nfunction DefaultToolCallRenderer({\n  name,\n  parameters,\n  status,\n  result,\n}: DefaultRenderProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const statusString = String(status) as\n    | \"inProgress\"\n    | \"executing\"\n    | \"complete\";\n  const isActive =\n    statusString === \"inProgress\" || statusString === \"executing\";\n  const isComplete = statusString === \"complete\";\n\n  const statusLabel = isActive ? \"Running\" : isComplete ? \"Done\" : status;\n  const dotColor = isActive ? \"#f59e0b\" : isComplete ? \"#10b981\" : \"#a1a1aa\";\n  const badgeBg = isActive ? \"#fef3c7\" : isComplete ? \"#d1fae5\" : \"#f4f4f5\";\n  const badgeColor = isActive ? \"#92400e\" : isComplete ? \"#065f46\" : \"#3f3f46\";\n\n  return (\n    <div\n      style={{\n        marginTop: \"8px\",\n        paddingBottom: \"8px\",\n      }}\n    >\n      <div\n        style={{\n          borderRadius: \"12px\",\n          border: \"1px solid #e4e4e7\",\n          backgroundColor: \"#fafafa\",\n          padding: \"14px 16px\",\n        }}\n      >\n        {/* Header row — always visible */}\n        <div\n          onClick={() => setIsExpanded(!isExpanded)}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            gap: \"10px\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"8px\",\n              minWidth: 0,\n            }}\n          >\n            <svg\n              style={{\n                height: \"14px\",\n                width: \"14px\",\n                color: \"#71717a\",\n                transition: \"transform 0.15s\",\n                transform: isExpanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n                flexShrink: 0,\n              }}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              strokeWidth={2}\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"\n              />\n            </svg>\n            <span\n              style={{\n                display: \"inline-block\",\n                height: \"8px\",\n                width: \"8px\",\n                borderRadius: \"50%\",\n                backgroundColor: dotColor,\n                flexShrink: 0,\n              }}\n            />\n            <span\n              style={{\n                fontSize: \"13px\",\n                fontWeight: 600,\n                color: \"#18181b\",\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {name}\n            </span>\n          </div>\n\n          <span\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              borderRadius: \"9999px\",\n              padding: \"2px 8px\",\n              fontSize: \"11px\",\n              fontWeight: 500,\n              backgroundColor: badgeBg,\n              color: badgeColor,\n              flexShrink: 0,\n            }}\n          >\n            {statusLabel}\n          </span>\n        </div>\n\n        {/* Expandable details */}\n        {isExpanded && (\n          <div style={{ marginTop: \"12px\", display: \"grid\", gap: \"12px\" }}>\n            <div>\n              <div\n                style={{\n                  fontSize: \"10px\",\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"0.05em\",\n                  color: \"#71717a\",\n                }}\n              >\n                Arguments\n              </div>\n              <pre\n                style={{\n                  marginTop: \"6px\",\n                  maxHeight: \"200px\",\n                  overflow: \"auto\",\n                  borderRadius: \"6px\",\n                  backgroundColor: \"#f4f4f5\",\n                  padding: \"10px\",\n                  fontSize: \"11px\",\n                  lineHeight: 1.6,\n                  color: \"#27272a\",\n                  whiteSpace: \"pre-wrap\",\n                  wordBreak: \"break-word\",\n                }}\n              >\n                {JSON.stringify(parameters ?? {}, null, 2)}\n              </pre>\n            </div>\n\n            {result !== undefined && (\n              <div>\n                <div\n                  style={{\n                    fontSize: \"10px\",\n                    textTransform: \"uppercase\",\n                    letterSpacing: \"0.05em\",\n                    color: \"#71717a\",\n                  }}\n                >\n                  Result\n                </div>\n                <pre\n                  style={{\n                    marginTop: \"6px\",\n                    maxHeight: \"200px\",\n                    overflow: \"auto\",\n                    borderRadius: \"6px\",\n                    backgroundColor: \"#f4f4f5\",\n                    padding: \"10px\",\n                    fontSize: \"11px\",\n                    lineHeight: 1.6,\n                    color: \"#27272a\",\n                    whiteSpace: \"pre-wrap\",\n                    wordBreak: \"break-word\",\n                  }}\n                >\n                  {typeof result === \"string\"\n                    ? result\n                    : JSON.stringify(result, null, 2)}\n                </pre>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,qBACd,QAGA,MACM;AACN,uCACE;EACE,MAAM;EACN,QAAQ,QAAQ,UAAU;EAC3B,EACD,KACD;;AAGH,SAAS,wBAAwB,EAC/B,MACA,YACA,QACA,UACyC;CACzC,MAAM,CAAC,YAAY,qCAA0B,MAAM;CAEnD,MAAM,eAAe,OAAO,OAAO;CAInC,MAAM,WACJ,iBAAiB,gBAAgB,iBAAiB;CACpD,MAAM,aAAa,iBAAiB;AAOpC,QACE,2CAAC;EACC,OAAO;GACL,WAAW;GACX,eAAe;GAChB;YAED,4CAAC;GACC,OAAO;IACL,cAAc;IACd,QAAQ;IACR,iBAAiB;IACjB,SAAS;IACV;cAGD,4CAAC;IACC,eAAe,cAAc,CAAC,WAAW;IACzC,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,QAAQ;KACR,YAAY;KACb;eAED,4CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK;MACL,UAAU;MACX;;MAED,2CAAC;OACC,OAAO;QACL,QAAQ;QACR,OAAO;QACP,OAAO;QACP,YAAY;QACZ,WAAW,aAAa,kBAAkB;QAC1C,YAAY;QACb;OACD,MAAK;OACL,SAAQ;OACR,aAAa;OACb,QAAO;iBAEP,2CAAC;QACC,eAAc;QACd,gBAAe;QACf,GAAE;SACF;QACE;MACN,2CAAC,UACC,OAAO;OACL,SAAS;OACT,QAAQ;OACR,OAAO;OACP,cAAc;OACd,iBAjEG,WAAW,YAAY,aAAa,YAAY;OAkEnD,YAAY;OACb,GACD;MACF,2CAAC;OACC,OAAO;QACL,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,cAAc;QACd,YAAY;QACb;iBAEA;QACI;;MACH,EAEN,2CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,cAAc;MACd,SAAS;MACT,UAAU;MACV,YAAY;MACZ,iBA1FI,WAAW,YAAY,aAAa,YAAY;MA2FpD,OA1FO,WAAW,YAAY,aAAa,YAAY;MA2FvD,YAAY;MACb;eA/FS,WAAW,YAAY,aAAa,SAAS;MAkGlD;KACH,EAGL,cACC,4CAAC;IAAI,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAQ,KAAK;KAAQ;eAC7D,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,KAAK,UAAU,cAAc,EAAE,EAAE,MAAM,EAAE;MACtC,IACF,EAEL,WAAW,UACV,4CAAC,oBACC,2CAAC;KACC,OAAO;MACL,UAAU;MACV,eAAe;MACf,eAAe;MACf,OAAO;MACR;eACF;MAEK,EACN,2CAAC;KACC,OAAO;MACL,WAAW;MACX,WAAW;MACX,UAAU;MACV,cAAc;MACd,iBAAiB;MACjB,SAAS;MACT,UAAU;MACV,YAAY;MACZ,OAAO;MACP,YAAY;MACZ,WAAW;MACZ;eAEA,OAAO,WAAW,WACf,SACA,KAAK,UAAU,QAAQ,MAAM,EAAE;MAC/B,IACF;KAEJ;IAEJ;GACF"}

package/dist/hooks/use-default-render-tool.d.cts

@@ -2,9 +2,9 @@ import React from "react";
 
 //#region src/hooks/use-default-render-tool.d.ts
 type DefaultRenderProps = {
-  name: string;
-  args: any;
-  status: string;
+  /** The name of the tool being called. */name: string; /** The parsed parameters passed to the tool call. */
+  parameters: unknown; /** Current execution status of the tool call. */
+  status: "inProgress" | "executing" | "complete"; /** The tool call result string, available only when `status` is `"complete"`. */
   result: string | undefined;
 };
 /**

package/dist/hooks/use-default-render-tool.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-default-render-tool.d.cts","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"mappings":";;;KAGK,kBAAA;EACH,IAAA;EACA,IAAA;EACA,MAAA;EACA,MAAA;AAAA;;;;;;;AAuCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}
+{"version":3,"file":"use-default-render-tool.d.cts","names":[],"sources":["../../src/hooks/use-default-render-tool.tsx"],"mappings":";;;KAGK,kBAAA;2CAEH,IAAA,UAFqB;EAIrB,UAAA,WAJqB;EAMrB,MAAA,2CAFA;EAIA,MAAA;AAAA;;;AAuCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,oBAAA,CACd,MAAA;EACE,MAAA,IAAU,KAAA,EAAO,kBAAA,KAAuB,KAAA,CAAM,YAAA;AAAA,GAEhD,IAAA,GAAO,aAAA"}

package/dist/hooks/use-default-render-tool.d.mts

@@ -2,9 +2,9 @@ import React from "react";
 
 //#region src/hooks/use-default-render-tool.d.ts
 type DefaultRenderProps = {
-  name: string;
-  args: any;
-  status: string;
+  /** The name of the tool being called. */name: string; /** The parsed parameters passed to the tool call. */
+  parameters: unknown; /** Current execution status of the tool call. */
+  status: "inProgress" | "executing" | "complete"; /** The tool call result string, available only when `status` is `"complete"`. */
   result: string | undefined;
 };
 /**