@liveblocks/react-ui 3.9.1 → 3.9.2-tiptap1

package/dist/components/AiTool.cjs

@@ -19,27 +19,20 @@ var MinusCircle = require('../icons/MinusCircle.cjs');
 var Spinner = require('../icons/Spinner.cjs');
 
 function AiToolIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cn.cn("lb-ai-tool-icon", className),
-    ...props
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn("lb-ai-tool-icon", className), ...props });
 }
 function AiToolInspector({ className, ...props }) {
   const { args, partialArgs, result } = contexts.useAiToolInvocationContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: cn.cn("lb-ai-tool-inspector", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("lb-ai-tool-inspector", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CodeBlock.CodeBlock,
+      {
         title: "Arguments",
         code: JSON.stringify(args ?? partialArgs, null, 2)
-      }),
-      result !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
-        title: "Result",
-        code: JSON.stringify(result, null, 2)
-      }) : null
-    ]
-  });
+      }
+    ),
+    result !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { title: "Result", code: JSON.stringify(result, null, 2) }) : null
+  ] });
 }
 function AiToolConfirmation({
   children,
@@ -73,36 +66,29 @@ function AiToolConfirmation({
   if (stage === "executed" && !children) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: cn.cn("lb-ai-tool-confirmation", className),
-    ...props,
-    children: [
-      children ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-ai-tool-confirmation-content",
-        children
-      }) : null,
-      stage !== "executed" && /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: "lb-ai-tool-confirmation-footer",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: "lb-ai-tool-confirmation-actions",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-              disabled: !enabled,
-              onClick: onCancelClick,
-              variant: "secondary",
-              children: $.AI_TOOL_CONFIRMATION_CANCEL
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-              disabled: !enabled,
-              onClick: onConfirmClick,
-              variant: variant === "destructive" ? "destructive" : "primary",
-              children: $.AI_TOOL_CONFIRMATION_CONFIRM
-            })
-          ]
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("lb-ai-tool-confirmation", className), ...props, children: [
+    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-ai-tool-confirmation-content", children }) : null,
+    stage !== "executed" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-ai-tool-confirmation-footer", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lb-ai-tool-confirmation-actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          disabled: !enabled,
+          onClick: onCancelClick,
+          variant: "secondary",
+          children: $.AI_TOOL_CONFIRMATION_CANCEL
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          disabled: !enabled,
+          onClick: onConfirmClick,
+          variant: variant === "destructive" ? "destructive" : "primary",
+          children: $.AI_TOOL_CONFIRMATION_CONFIRM
+        }
+      )
+    ] }) })
+  ] });
 }
 function prettifyString(string) {
   return string.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().toLowerCase().replace(/^\w/, (character) => character.toUpperCase());
@@ -126,7 +112,8 @@ const AiTool = Object.assign(
         name,
         [core.kInternal]: { execute, messageStatus }
       } = contexts.useAiToolInvocationContext();
-      const isVisuallyPending = execute !== void 0 && stage !== "executed" && (stage === "receiving" ? messageStatus === "generating" : true);
+      const isVisuallyPending = execute !== void 0 && stage !== "executed" && // If it's in the "receiving" stage, we also check that the outer message is still generating.
+      (stage === "receiving" ? messageStatus === "generating" : true);
       const [semiControlledCollapsed, onSemiControlledCollapsed] = useControllableState.useSemiControllableState(collapsed ?? false, onCollapsedChange);
       const hasContent = react.Children.count(children) > 0;
       const isCollapsible = hasContent ? collapsible ?? true : false;
@@ -139,58 +126,98 @@ const AiTool = Object.assign(
         },
         [onSemiControlledCollapsed]
       );
-      return /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
-        ref: forwardedRef,
-        className: cn.cn(
-          "lb-collapsible lb-ai-tool",
-          `lb-ai-tool:variant-${variant}`,
-          className
-        ),
-        ...props,
-        open: hasContent ? !semiControlledCollapsed : false,
-        onOpenChange: handleCollapsibleOpenChange,
-        disabled: !isCollapsible,
-        "data-result": result?.type,
-        "data-stage": stage,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(index.Trigger, {
-            className: cn.cn(
-              "lb-collapsible-trigger lb-ai-tool-header",
-              variant === "minimal" && isVisuallyPending && "lb-ai-chat-pending"
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        index.Root,
+        {
+          ref: forwardedRef,
+          className: cn.cn(
+            "lb-collapsible lb-ai-tool",
+            `lb-ai-tool:variant-${variant}`,
+            className
+          ),
+          ...props,
+          open: hasContent ? !semiControlledCollapsed : false,
+          onOpenChange: handleCollapsibleOpenChange,
+          disabled: !isCollapsible,
+          "data-result": result?.type,
+          "data-stage": stage,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              index.Trigger,
+              {
+                className: cn.cn(
+                  "lb-collapsible-trigger lb-ai-tool-header",
+                  variant === "minimal" && isVisuallyPending && "lb-ai-chat-pending"
+                ),
+                children: [
+                  icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-ai-tool-header-icon-container", children: icon }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-ai-tool-header-title", children: resolvedTitle }),
+                  isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lb-collapsible-chevron lb-icon-container", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {}) }) : null,
+                  variant !== "minimal" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-ai-tool-header-status", children: stage === "executed" ? result.type === "success" ? /* @__PURE__ */ jsxRuntime.jsx(CheckCircleFill.CheckCircleFillIcon, {}) : result.type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(CrossCircleFill.CrossCircleFillIcon, {}) : result.type === "cancelled" ? /* @__PURE__ */ jsxRuntime.jsx(MinusCircle.MinusCircleIcon, {}) : null : isVisuallyPending ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : null }) : null
+                ]
+              }
             ),
-            children: [
-              icon ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-                className: "lb-ai-tool-header-icon-container",
-                children: icon
-              }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: "lb-ai-tool-header-title",
-                children: resolvedTitle
-              }),
-              isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: "lb-collapsible-chevron lb-icon-container",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
-              }) : null,
-              variant !== "minimal" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-                className: "lb-ai-tool-header-status",
-                children: stage === "executed" ? result.type === "success" ? /* @__PURE__ */ jsxRuntime.jsx(CheckCircleFill.CheckCircleFillIcon, {}) : result.type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(CrossCircleFill.CrossCircleFillIcon, {}) : result.type === "cancelled" ? /* @__PURE__ */ jsxRuntime.jsx(MinusCircle.MinusCircleIcon, {}) : null : isVisuallyPending ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : null
-              }) : null
-            ]
-          }),
-          hasContent ? /* @__PURE__ */ jsxRuntime.jsx(index.Content, {
-            className: "lb-collapsible-content lb-ai-tool-content-container",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-              className: "lb-ai-tool-content",
-              children
-            })
-          }) : null
-        ]
-      });
+            hasContent ? /* @__PURE__ */ jsxRuntime.jsx(index.Content, { className: "lb-collapsible-content lb-ai-tool-content-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lb-ai-tool-content", children }) }) : null
+          ]
+        }
+      );
     }
   ),
   {
+    /**
+     * Display an icon in a container.
+     *
+     * @example
+     * <AiTool
+     *   icon={
+     *     <AiTool.Icon>🔍</AiTool.Icon>
+     *   }
+     * />
+     */
     Icon: AiToolIcon,
+    /**
+     * Display the tool's arguments and result, which can be useful during
+     * development.
+     *
+     * @example
+     * <AiTool>
+     *   <AiTool.Inspector />
+     * </AiTool>
+     */
     Inspector: AiToolInspector,
+    /**
+     * Display a human-in-the-loop confirmation step which can be accepted
+     * or cancelled by the user.
+     *
+     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can
+     * perform side-effects, be async if needed, and return a result. The tool call will stay
+     * pending until either `confirm` or `cancel` is called.
+     *
+     * @example
+     * <AiTool>
+     *   <AiTool.Confirmation
+     *     // Use a destructive visual appearance
+     *     variant="destructive"
+     *
+     *     // The tool's arguments can be directly accessed like in `execute`
+     *     confirm={({ pageIds }) => {
+     *       const deletedPageTitles = pages
+     *         .filter((p) => pageIds.includes(p.id))
+     *         .map((page) => page.title);
+     *
+     *       deletePages(pageIds);
+     *
+     *       // This result will be available as `result` in the tool's `render` props
+     *       return { data: { deletedPageTitles } };
+     *     }}
+     *
+     *     // If needed, `cancel={() => ...}` would work similarly
+     *   >
+     *     Do you want to delete these pages?
+     *     <PagesPreviews />
+     *   </AiTool.Confirmation>
+     * </AiTool>
+     */
     Confirmation: AiToolConfirmation
   }
 );

package/dist/components/AiTool.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiTool.cjs","sources":["../../src/components/AiTool.tsx"],"sourcesContent":["import type {\n  AiToolExecuteCallback,\n  AiToolTypePack,\n  JsonObject,\n  NoInfr,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, forwardRef, useCallback, useMemo } from \"react\";\n\nimport { Button } from \"../_private\";\nimport {\n  CheckCircleFillIcon,\n  ChevronRightIcon,\n  CrossCircleFillIcon,\n  MinusCircleIcon,\n  SpinnerIcon,\n} from \"../icons\";\nimport {\n  type AiToolConfirmationOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { useAiToolInvocationContext } from \"../primitives/AiMessage/contexts\";\nimport * as Collapsible from \"../primitives/Collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { useSemiControllableState } from \"../utils/use-controllable-state\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\n\nexport interface AiToolProps\n  extends Omit<ComponentProps<\"div\">, \"title\" | \"children\"> {\n  /**\n   * The tool's title.\n   *\n   * By default, a human-readable version of the tool's name is used:\n   * - `\"showTodo\"` → \"Show todo\"\n   * - `\"get_weather\"` → \"Get weather\"\n   */\n  title?: ReactNode;\n\n  /**\n   * An optional icon displayed next to the title.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The content shown in the tool.\n   */\n  children?: ReactNode;\n\n  /**\n   * The visual appearance of the tool.\n   */\n  variant?: \"block\" | \"minimal\";\n\n  /**\n   * Whether the content is currently collapsed.\n   * It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.\n   * Instead, it is \"semi-controlled\", meaning that setting it to `true` will expand it, but it\n   * can still be collapsed/expanded by clicking on it.\n   */\n  collapsed?: boolean;\n\n  /**\n   * The event handler called when the content is collapsed or expanded by clicking on it.\n   */\n  onCollapsedChange?: (collapsed: boolean) => void;\n\n  /**\n   * Whether the content can be collapsed/expanded.\n   * If set to `false`, clicking on it will have no effect.\n   * If there's no content, this prop has no effect.\n   */\n  collapsible?: boolean;\n}\n\nexport type AiToolIconProps = ComponentProps<\"div\">;\n\nexport type AiToolInspectorProps = ComponentProps<\"div\">;\n\nexport interface AiToolConfirmationProps<\n  A extends JsonObject,\n  R extends JsonObject,\n> extends ComponentProps<\"div\"> {\n  /**\n   * The callback invoked when the user clicks the confirm button.\n   */\n  confirm: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The callback invoked when the user clicks the cancel button.\n   */\n  cancel?: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The visual appearance.\n   */\n  variant?: \"default\" | \"destructive\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiToolConfirmationOverrides>;\n\n  /**\n   * The tool's result type, to be used with the `types` prop in the `render` method.\n   *\n   * @example\n   * defineAiTool<{ value: number }>()({\n   *   // ...\n   *   render: ({ types }) => (\n   *     <AiTool.Confirmation\n   *       types={types}\n   *       confirm={() => {\n   *         return {\n   *           // Using `types` makes the result type-safe\n   *           // based on the tool's definition\n   *           data: { value: 123 },\n   *         };\n   *       }}\n   *     />\n   *   ),\n   * })\n   */\n  types?: NoInfr<AiToolTypePack<A, R>>;\n}\n\nfunction AiToolIcon({ className, ...props }: AiToolIconProps) {\n  return <div className={cn(\"lb-ai-tool-icon\", className)} {...props} />;\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={cn(\"lb-ai-tool-inspector\", className)} {...props}>\n      <CodeBlock\n        title=\"Arguments\"\n        code={JSON.stringify(args ?? partialArgs, null, 2)}\n      />\n      {result !== undefined ? (\n        <CodeBlock title=\"Result\" code={JSON.stringify(result, null, 2)} />\n      ) : null}\n    </div>\n  );\n}\n\nfunction AiToolConfirmation<\n  TPack extends AiToolTypePack,\n  A extends JsonObject = TPack[\"A\"],\n  R extends JsonObject = TPack[\"R\"],\n>({\n  children,\n  variant = \"default\",\n  confirm,\n  cancel,\n  overrides,\n  className,\n  ...props\n}: AiToolConfirmationProps<A, R>) {\n  const { stage, args, respond, name, invocationId } =\n    useAiToolInvocationContext();\n  const $ = useOverrides(overrides);\n\n  const enabled = stage === \"executing\";\n\n  const context = useMemo(() => ({ name, invocationId }), [name, invocationId]);\n\n  const onConfirmClick = useCallback(async () => {\n    if (enabled) {\n      const result = await confirm(args as A, context);\n      respond(result ?? undefined);\n    }\n  }, [enabled, args, confirm, respond, context]);\n\n  const onCancelClick = useCallback(async () => {\n    if (enabled) {\n      if (cancel === undefined) {\n        respond({ cancel: true });\n      } else {\n        const result = await cancel(args as A, context);\n        respond(result ?? undefined);\n      }\n    }\n  }, [enabled, args, cancel, respond, context]);\n\n  // If there's no content and the tool has been executed (so there's no\n  // confirmation UI displayed either), don't render anything.\n  if (stage === \"executed\" && !children) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-ai-tool-confirmation\", className)} {...props}>\n      {children ? (\n        <div className=\"lb-ai-tool-confirmation-content\">{children}</div>\n      ) : null}\n      {stage !== \"executed\" && (\n        <div className=\"lb-ai-tool-confirmation-footer\">\n          <div className=\"lb-ai-tool-confirmation-actions\">\n            <Button\n              disabled={!enabled}\n              onClick={onCancelClick}\n              variant=\"secondary\"\n            >\n              {$.AI_TOOL_CONFIRMATION_CANCEL}\n            </Button>\n            <Button\n              disabled={!enabled}\n              onClick={onConfirmClick}\n              variant={variant === \"destructive\" ? \"destructive\" : \"primary\"}\n            >\n              {$.AI_TOOL_CONFIRMATION_CONFIRM}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction prettifyString(string: string) {\n  return (\n    string\n      // Convert camelCase to spaces\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Convert snake_case and kebab-case to spaces\n      .replace(/[_-]+/g, \" \")\n      // Collapse multiple following spaces\n      .replace(/\\s+/g, \" \")\n      // Trim leading and trailing spaces\n      .trim()\n      // Capitalize first word\n      .toLowerCase()\n      .replace(/^\\w/, (character) => character.toUpperCase())\n  );\n}\n\n/**\n * A pre-built component which displays a tool call.\n *\n * By default, a human-readable version of the tool's name is used as a title:\n * - `\"showTodo\"` → \"Show todo\"\n * - `\"get_weather\"` → \"Get weather\"\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool />\n *   ),\n * })\n *\n * It can be customized in various ways:\n * - adding an icon\n * - customizing the title (even dynamically)\n * - adding custom content inside it\n * - collapsing it conditionally\n * - etc.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: ({ stage, result }) => (\n *     <AiTool\n *       icon=\"🔍\"\n *\n *       // Override the default title based on the tool's stage\n *       title={stage === \"executing\" ? \"Searching…\" : \"Search results\"}\n *\n *       // Start open and automatically collapse after it is executed\n *       // The user can still expand/collapse it manually at any time\n *       collapsed={stage === \"executed\"}\n *     >\n *       <SearchResults data={result.data} />\n *     </AiTool>\n *   ),\n * })\n *\n * It also comes with a few built-in sub-components:\n * - `AiTool.Confirmation` to display a human-in-the-loop confirmation step\n *   which can be accepted or cancelled by the user.\n * - `AiTool.Inspector` to display the tool's arguments and result which can\n *   be useful during development.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Confirmation\n *         // Use a destructive visual appearance\n *         variant=\"destructive\"\n *\n *         // The tool's arguments can be directly accessed like in `execute`\n *         confirm={({ pageIds }) => {\n *           const deletedPageTitles = pages\n *             .filter((p) => pageIds.includes(p.id))\n *             .map((page) => page.title);\n *\n *           deletePages(pageIds);\n *\n *           // This result will be available as `result` in the tool's `render` props\n *           return { data: { deletedPageTitles } };\n *         }}\n *\n *         // If needed, `cancel={() => ...}` would work similarly\n *       >\n *         Do you want to delete these pages?\n *         <PagesPreviews />\n *       </AiTool.Confirmation>\n *     </AiTool>\n *   ),\n * })\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Inspector />\n *     </AiTool>\n *   ),\n * })\n */\nexport const AiTool = Object.assign(\n  forwardRef<HTMLDivElement, AiToolProps>(\n    (\n      {\n        children,\n        title,\n        icon,\n        collapsible,\n        collapsed,\n        onCollapsedChange,\n        variant = \"block\",\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute, messageStatus },\n      } = useAiToolInvocationContext();\n      // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)\n      // if it has an `execute` method and it isn't in the \"executed\" stage.\n      const isVisuallyPending =\n        execute !== undefined &&\n        stage !== \"executed\" &&\n        // If it's in the \"receiving\" stage, we also check that the outer message is still generating.\n        (stage === \"receiving\" ? messageStatus === \"generating\" : true);\n      const [semiControlledCollapsed, onSemiControlledCollapsed] =\n        useSemiControllableState(collapsed ?? false, onCollapsedChange);\n      // TODO: This check won't work for cases like:\n      //         <AiTool>\n      //           <ComponentThatRendersNull />\n      //           <ComponentThatAlsoRendersNull />\n      //         </AiTool>\n      //       One solution could be to check the DOM on every render with `useLayoutEffect`\n      //       to see if there's any actual content.\n      //       For now we're limiting the visual issues caused by the above by using CSS's\n      //       `:empty` pseudo-class to make the content 0px high if it's actually empty.\n      const hasContent = Children.count(children) > 0;\n      // If there's no content, the tool is never collapsible.\n      const isCollapsible = hasContent ? (collapsible ?? true) : false;\n      const resolvedTitle = useMemo(() => {\n        return title ?? prettifyString(name);\n      }, [title, name]);\n\n      // `AiTool` uses \"collapsed\" instead of \"open\" (like the `Composer` component) because \"open\"\n      // makes sense next to something called \"Collapsible\" but less so for something called \"AiTool\".\n      const handleCollapsibleOpenChange = useCallback(\n        (open: boolean) => {\n          onSemiControlledCollapsed(!open);\n        },\n        [onSemiControlledCollapsed]\n      );\n\n      return (\n        <Collapsible.Root\n          ref={forwardedRef}\n          className={cn(\n            \"lb-collapsible lb-ai-tool\",\n            `lb-ai-tool:variant-${variant}`,\n            className\n          )}\n          {...props}\n          // Regardless of `semiControlledCollapsed`, the collapsible is closed if there's no content.\n          open={hasContent ? !semiControlledCollapsed : false}\n          onOpenChange={handleCollapsibleOpenChange}\n          disabled={!isCollapsible}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger\n            className={cn(\n              \"lb-collapsible-trigger lb-ai-tool-header\",\n              variant === \"minimal\" && isVisuallyPending && \"lb-ai-chat-pending\"\n            )}\n          >\n            {icon ? (\n              <div className=\"lb-ai-tool-header-icon-container\">{icon}</div>\n            ) : null}\n            <span className=\"lb-ai-tool-header-title\">{resolvedTitle}</span>\n            {isCollapsible ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\n            {variant !== \"minimal\" ? (\n              <div className=\"lb-ai-tool-header-status\">\n                {stage === \"executed\" ? (\n                  result.type === \"success\" ? (\n                    <CheckCircleFillIcon />\n                  ) : result.type === \"error\" ? (\n                    <CrossCircleFillIcon />\n                  ) : result.type === \"cancelled\" ? (\n                    <MinusCircleIcon />\n                  ) : null\n                ) : isVisuallyPending ? (\n                  <SpinnerIcon />\n                ) : null}\n              </div>\n            ) : null}\n          </Collapsible.Trigger>\n\n          {hasContent ? (\n            <Collapsible.Content className=\"lb-collapsible-content lb-ai-tool-content-container\">\n              <div className=\"lb-ai-tool-content\">{children}</div>\n            </Collapsible.Content>\n          ) : null}\n        </Collapsible.Root>\n      );\n    }\n  ),\n  {\n    /**\n     * Display an icon in a container.\n     *\n     * @example\n     * <AiTool\n     *   icon={\n     *     <AiTool.Icon>🔍</AiTool.Icon>\n     *   }\n     * />\n     */\n    Icon: AiToolIcon,\n\n    /**\n     * Display the tool's arguments and result, which can be useful during\n     * development.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Inspector />\n     * </AiTool>\n     */\n    Inspector: AiToolInspector,\n\n    /**\n     * Display a human-in-the-loop confirmation step which can be accepted\n     * or cancelled by the user.\n     *\n     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can\n     * perform side-effects, be async if needed, and return a result. The tool call will stay\n     * pending until either `confirm` or `cancel` is called.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Confirmation\n     *     // Use a destructive visual appearance\n     *     variant=\"destructive\"\n     *\n     *     // The tool's arguments can be directly accessed like in `execute`\n     *     confirm={({ pageIds }) => {\n     *       const deletedPageTitles = pages\n     *         .filter((p) => pageIds.includes(p.id))\n     *         .map((page) => page.title);\n     *\n     *       deletePages(pageIds);\n     *\n     *       // This result will be available as `result` in the tool's `render` props\n     *       return { data: { deletedPageTitles } };\n     *     }}\n     *\n     *     // If needed, `cancel={() => ...}` would work similarly\n     *   >\n     *     Do you want to delete these pages?\n     *     <PagesPreviews />\n     *   </AiTool.Confirmation>\n     * </AiTool>\n     */\n    Confirmation: AiToolConfirmation,\n  }\n);\n"],"names":["jsx","cn","useAiToolInvocationContext","jsxs","CodeBlock","overrides","useOverrides","useMemo","useCallback","Button","forwardRef","kInternal","useSemiControllableState","Children","Collapsible.Root","Collapsible.Trigger","ChevronRightIcon","CheckCircleFillIcon","CrossCircleFillIcon","MinusCircleIcon","SpinnerIcon","Collapsible.Content"],"mappings":"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"}
+{"version":3,"file":"AiTool.cjs","sources":["../../src/components/AiTool.tsx"],"sourcesContent":["import type {\n  AiToolExecuteCallback,\n  AiToolTypePack,\n  JsonObject,\n  NoInfr,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, forwardRef, useCallback, useMemo } from \"react\";\n\nimport { Button } from \"../_private\";\nimport {\n  CheckCircleFillIcon,\n  ChevronRightIcon,\n  CrossCircleFillIcon,\n  MinusCircleIcon,\n  SpinnerIcon,\n} from \"../icons\";\nimport {\n  type AiToolConfirmationOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { useAiToolInvocationContext } from \"../primitives/AiMessage/contexts\";\nimport * as Collapsible from \"../primitives/Collapsible\";\nimport { cn } from \"../utils/cn\";\nimport { useSemiControllableState } from \"../utils/use-controllable-state\";\nimport { CodeBlock } from \"./internal/CodeBlock\";\n\nexport interface AiToolProps\n  extends Omit<ComponentProps<\"div\">, \"title\" | \"children\"> {\n  /**\n   * The tool's title.\n   *\n   * By default, a human-readable version of the tool's name is used:\n   * - `\"showTodo\"` → \"Show todo\"\n   * - `\"get_weather\"` → \"Get weather\"\n   */\n  title?: ReactNode;\n\n  /**\n   * An optional icon displayed next to the title.\n   */\n  icon?: ReactNode;\n\n  /**\n   * The content shown in the tool.\n   */\n  children?: ReactNode;\n\n  /**\n   * The visual appearance of the tool.\n   */\n  variant?: \"block\" | \"minimal\";\n\n  /**\n   * Whether the content is currently collapsed.\n   * It is not a traditional controlled value, as in if you set it to `true` it would only stay expanded.\n   * Instead, it is \"semi-controlled\", meaning that setting it to `true` will expand it, but it\n   * can still be collapsed/expanded by clicking on it.\n   */\n  collapsed?: boolean;\n\n  /**\n   * The event handler called when the content is collapsed or expanded by clicking on it.\n   */\n  onCollapsedChange?: (collapsed: boolean) => void;\n\n  /**\n   * Whether the content can be collapsed/expanded.\n   * If set to `false`, clicking on it will have no effect.\n   * If there's no content, this prop has no effect.\n   */\n  collapsible?: boolean;\n}\n\nexport type AiToolIconProps = ComponentProps<\"div\">;\n\nexport type AiToolInspectorProps = ComponentProps<\"div\">;\n\nexport interface AiToolConfirmationProps<\n  A extends JsonObject,\n  R extends JsonObject,\n> extends ComponentProps<\"div\"> {\n  /**\n   * The callback invoked when the user clicks the confirm button.\n   */\n  confirm: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The callback invoked when the user clicks the cancel button.\n   */\n  cancel?: AiToolExecuteCallback<A, R>;\n\n  /**\n   * The visual appearance.\n   */\n  variant?: \"default\" | \"destructive\";\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides & AiToolConfirmationOverrides>;\n\n  /**\n   * The tool's result type, to be used with the `types` prop in the `render` method.\n   *\n   * @example\n   * defineAiTool<{ value: number }>()({\n   *   // ...\n   *   render: ({ types }) => (\n   *     <AiTool.Confirmation\n   *       types={types}\n   *       confirm={() => {\n   *         return {\n   *           // Using `types` makes the result type-safe\n   *           // based on the tool's definition\n   *           data: { value: 123 },\n   *         };\n   *       }}\n   *     />\n   *   ),\n   * })\n   */\n  types?: NoInfr<AiToolTypePack<A, R>>;\n}\n\nfunction AiToolIcon({ className, ...props }: AiToolIconProps) {\n  return <div className={cn(\"lb-ai-tool-icon\", className)} {...props} />;\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={cn(\"lb-ai-tool-inspector\", className)} {...props}>\n      <CodeBlock\n        title=\"Arguments\"\n        code={JSON.stringify(args ?? partialArgs, null, 2)}\n      />\n      {result !== undefined ? (\n        <CodeBlock title=\"Result\" code={JSON.stringify(result, null, 2)} />\n      ) : null}\n    </div>\n  );\n}\n\nfunction AiToolConfirmation<\n  TPack extends AiToolTypePack,\n  A extends JsonObject = TPack[\"A\"],\n  R extends JsonObject = TPack[\"R\"],\n>({\n  children,\n  variant = \"default\",\n  confirm,\n  cancel,\n  overrides,\n  className,\n  ...props\n}: AiToolConfirmationProps<A, R>) {\n  const { stage, args, respond, name, invocationId } =\n    useAiToolInvocationContext();\n  const $ = useOverrides(overrides);\n\n  const enabled = stage === \"executing\";\n\n  const context = useMemo(() => ({ name, invocationId }), [name, invocationId]);\n\n  const onConfirmClick = useCallback(async () => {\n    if (enabled) {\n      const result = await confirm(args as A, context);\n      respond(result ?? undefined);\n    }\n  }, [enabled, args, confirm, respond, context]);\n\n  const onCancelClick = useCallback(async () => {\n    if (enabled) {\n      if (cancel === undefined) {\n        respond({ cancel: true });\n      } else {\n        const result = await cancel(args as A, context);\n        respond(result ?? undefined);\n      }\n    }\n  }, [enabled, args, cancel, respond, context]);\n\n  // If there's no content and the tool has been executed (so there's no\n  // confirmation UI displayed either), don't render anything.\n  if (stage === \"executed\" && !children) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"lb-ai-tool-confirmation\", className)} {...props}>\n      {children ? (\n        <div className=\"lb-ai-tool-confirmation-content\">{children}</div>\n      ) : null}\n      {stage !== \"executed\" && (\n        <div className=\"lb-ai-tool-confirmation-footer\">\n          <div className=\"lb-ai-tool-confirmation-actions\">\n            <Button\n              disabled={!enabled}\n              onClick={onCancelClick}\n              variant=\"secondary\"\n            >\n              {$.AI_TOOL_CONFIRMATION_CANCEL}\n            </Button>\n            <Button\n              disabled={!enabled}\n              onClick={onConfirmClick}\n              variant={variant === \"destructive\" ? \"destructive\" : \"primary\"}\n            >\n              {$.AI_TOOL_CONFIRMATION_CONFIRM}\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction prettifyString(string: string) {\n  return (\n    string\n      // Convert camelCase to spaces\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Convert snake_case and kebab-case to spaces\n      .replace(/[_-]+/g, \" \")\n      // Collapse multiple following spaces\n      .replace(/\\s+/g, \" \")\n      // Trim leading and trailing spaces\n      .trim()\n      // Capitalize first word\n      .toLowerCase()\n      .replace(/^\\w/, (character) => character.toUpperCase())\n  );\n}\n\n/**\n * A pre-built component which displays a tool call.\n *\n * By default, a human-readable version of the tool's name is used as a title:\n * - `\"showTodo\"` → \"Show todo\"\n * - `\"get_weather\"` → \"Get weather\"\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool />\n *   ),\n * })\n *\n * It can be customized in various ways:\n * - adding an icon\n * - customizing the title (even dynamically)\n * - adding custom content inside it\n * - collapsing it conditionally\n * - etc.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: ({ stage, result }) => (\n *     <AiTool\n *       icon=\"🔍\"\n *\n *       // Override the default title based on the tool's stage\n *       title={stage === \"executing\" ? \"Searching…\" : \"Search results\"}\n *\n *       // Start open and automatically collapse after it is executed\n *       // The user can still expand/collapse it manually at any time\n *       collapsed={stage === \"executed\"}\n *     >\n *       <SearchResults data={result.data} />\n *     </AiTool>\n *   ),\n * })\n *\n * It also comes with a few built-in sub-components:\n * - `AiTool.Confirmation` to display a human-in-the-loop confirmation step\n *   which can be accepted or cancelled by the user.\n * - `AiTool.Inspector` to display the tool's arguments and result which can\n *   be useful during development.\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Confirmation\n *         // Use a destructive visual appearance\n *         variant=\"destructive\"\n *\n *         // The tool's arguments can be directly accessed like in `execute`\n *         confirm={({ pageIds }) => {\n *           const deletedPageTitles = pages\n *             .filter((p) => pageIds.includes(p.id))\n *             .map((page) => page.title);\n *\n *           deletePages(pageIds);\n *\n *           // This result will be available as `result` in the tool's `render` props\n *           return { data: { deletedPageTitles } };\n *         }}\n *\n *         // If needed, `cancel={() => ...}` would work similarly\n *       >\n *         Do you want to delete these pages?\n *         <PagesPreviews />\n *       </AiTool.Confirmation>\n *     </AiTool>\n *   ),\n * })\n *\n * @example\n * defineAiTool()({\n *   // ...\n *   render: () => (\n *     <AiTool>\n *       <AiTool.Inspector />\n *     </AiTool>\n *   ),\n * })\n */\nexport const AiTool = Object.assign(\n  forwardRef<HTMLDivElement, AiToolProps>(\n    (\n      {\n        children,\n        title,\n        icon,\n        collapsible,\n        collapsed,\n        onCollapsedChange,\n        variant = \"block\",\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute, messageStatus },\n      } = useAiToolInvocationContext();\n      // Only mark the tool as pending visually (e.g. show a spinner, add a shimmer animation, etc.)\n      // if it has an `execute` method and it isn't in the \"executed\" stage.\n      const isVisuallyPending =\n        execute !== undefined &&\n        stage !== \"executed\" &&\n        // If it's in the \"receiving\" stage, we also check that the outer message is still generating.\n        (stage === \"receiving\" ? messageStatus === \"generating\" : true);\n      const [semiControlledCollapsed, onSemiControlledCollapsed] =\n        useSemiControllableState(collapsed ?? false, onCollapsedChange);\n      // TODO: This check won't work for cases like:\n      //         <AiTool>\n      //           <ComponentThatRendersNull />\n      //           <ComponentThatAlsoRendersNull />\n      //         </AiTool>\n      //       One solution could be to check the DOM on every render with `useLayoutEffect`\n      //       to see if there's any actual content.\n      //       For now we're limiting the visual issues caused by the above by using CSS's\n      //       `:empty` pseudo-class to make the content 0px high if it's actually empty.\n      const hasContent = Children.count(children) > 0;\n      // If there's no content, the tool is never collapsible.\n      const isCollapsible = hasContent ? (collapsible ?? true) : false;\n      const resolvedTitle = useMemo(() => {\n        return title ?? prettifyString(name);\n      }, [title, name]);\n\n      // `AiTool` uses \"collapsed\" instead of \"open\" (like the `Composer` component) because \"open\"\n      // makes sense next to something called \"Collapsible\" but less so for something called \"AiTool\".\n      const handleCollapsibleOpenChange = useCallback(\n        (open: boolean) => {\n          onSemiControlledCollapsed(!open);\n        },\n        [onSemiControlledCollapsed]\n      );\n\n      return (\n        <Collapsible.Root\n          ref={forwardedRef}\n          className={cn(\n            \"lb-collapsible lb-ai-tool\",\n            `lb-ai-tool:variant-${variant}`,\n            className\n          )}\n          {...props}\n          // Regardless of `semiControlledCollapsed`, the collapsible is closed if there's no content.\n          open={hasContent ? !semiControlledCollapsed : false}\n          onOpenChange={handleCollapsibleOpenChange}\n          disabled={!isCollapsible}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger\n            className={cn(\n              \"lb-collapsible-trigger lb-ai-tool-header\",\n              variant === \"minimal\" && isVisuallyPending && \"lb-ai-chat-pending\"\n            )}\n          >\n            {icon ? (\n              <div className=\"lb-ai-tool-header-icon-container\">{icon}</div>\n            ) : null}\n            <span className=\"lb-ai-tool-header-title\">{resolvedTitle}</span>\n            {isCollapsible ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\n            {variant !== \"minimal\" ? (\n              <div className=\"lb-ai-tool-header-status\">\n                {stage === \"executed\" ? (\n                  result.type === \"success\" ? (\n                    <CheckCircleFillIcon />\n                  ) : result.type === \"error\" ? (\n                    <CrossCircleFillIcon />\n                  ) : result.type === \"cancelled\" ? (\n                    <MinusCircleIcon />\n                  ) : null\n                ) : isVisuallyPending ? (\n                  <SpinnerIcon />\n                ) : null}\n              </div>\n            ) : null}\n          </Collapsible.Trigger>\n\n          {hasContent ? (\n            <Collapsible.Content className=\"lb-collapsible-content lb-ai-tool-content-container\">\n              <div className=\"lb-ai-tool-content\">{children}</div>\n            </Collapsible.Content>\n          ) : null}\n        </Collapsible.Root>\n      );\n    }\n  ),\n  {\n    /**\n     * Display an icon in a container.\n     *\n     * @example\n     * <AiTool\n     *   icon={\n     *     <AiTool.Icon>🔍</AiTool.Icon>\n     *   }\n     * />\n     */\n    Icon: AiToolIcon,\n\n    /**\n     * Display the tool's arguments and result, which can be useful during\n     * development.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Inspector />\n     * </AiTool>\n     */\n    Inspector: AiToolInspector,\n\n    /**\n     * Display a human-in-the-loop confirmation step which can be accepted\n     * or cancelled by the user.\n     *\n     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can\n     * perform side-effects, be async if needed, and return a result. The tool call will stay\n     * pending until either `confirm` or `cancel` is called.\n     *\n     * @example\n     * <AiTool>\n     *   <AiTool.Confirmation\n     *     // Use a destructive visual appearance\n     *     variant=\"destructive\"\n     *\n     *     // The tool's arguments can be directly accessed like in `execute`\n     *     confirm={({ pageIds }) => {\n     *       const deletedPageTitles = pages\n     *         .filter((p) => pageIds.includes(p.id))\n     *         .map((page) => page.title);\n     *\n     *       deletePages(pageIds);\n     *\n     *       // This result will be available as `result` in the tool's `render` props\n     *       return { data: { deletedPageTitles } };\n     *     }}\n     *\n     *     // If needed, `cancel={() => ...}` would work similarly\n     *   >\n     *     Do you want to delete these pages?\n     *     <PagesPreviews />\n     *   </AiTool.Confirmation>\n     * </AiTool>\n     */\n    Confirmation: AiToolConfirmation,\n  }\n);\n"],"names":["jsx","cn","useAiToolInvocationContext","jsxs","CodeBlock","overrides","useOverrides","useMemo","useCallback","Button","forwardRef","kInternal","useSemiControllableState","Children","Collapsible.Root","Collapsible.Trigger","ChevronRightIcon","CheckCircleFillIcon","CrossCircleFillIcon","MinusCircleIcon","SpinnerIcon","Collapsible.Content"],"mappings":"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"}

package/dist/components/AiTool.js

@@ -17,27 +17,20 @@ import { MinusCircleIcon } from '../icons/MinusCircle.js';
 import { SpinnerIcon } from '../icons/Spinner.js';
 
 function AiToolIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    className: cn("lb-ai-tool-icon", className),
-    ...props
-  });
+  return /* @__PURE__ */ jsx("div", { className: cn("lb-ai-tool-icon", className), ...props });
 }
 function AiToolInspector({ className, ...props }) {
   const { args, partialArgs, result } = useAiToolInvocationContext();
-  return /* @__PURE__ */ jsxs("div", {
-    className: cn("lb-ai-tool-inspector", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(CodeBlock, {
+  return /* @__PURE__ */ jsxs("div", { className: cn("lb-ai-tool-inspector", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      CodeBlock,
+      {
         title: "Arguments",
         code: JSON.stringify(args ?? partialArgs, null, 2)
-      }),
-      result !== void 0 ? /* @__PURE__ */ jsx(CodeBlock, {
-        title: "Result",
-        code: JSON.stringify(result, null, 2)
-      }) : null
-    ]
-  });
+      }
+    ),
+    result !== void 0 ? /* @__PURE__ */ jsx(CodeBlock, { title: "Result", code: JSON.stringify(result, null, 2) }) : null
+  ] });
 }
 function AiToolConfirmation({
   children,
@@ -71,36 +64,29 @@ function AiToolConfirmation({
   if (stage === "executed" && !children) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", {
-    className: cn("lb-ai-tool-confirmation", className),
-    ...props,
-    children: [
-      children ? /* @__PURE__ */ jsx("div", {
-        className: "lb-ai-tool-confirmation-content",
-        children
-      }) : null,
-      stage !== "executed" && /* @__PURE__ */ jsx("div", {
-        className: "lb-ai-tool-confirmation-footer",
-        children: /* @__PURE__ */ jsxs("div", {
-          className: "lb-ai-tool-confirmation-actions",
-          children: [
-            /* @__PURE__ */ jsx(Button, {
-              disabled: !enabled,
-              onClick: onCancelClick,
-              variant: "secondary",
-              children: $.AI_TOOL_CONFIRMATION_CANCEL
-            }),
-            /* @__PURE__ */ jsx(Button, {
-              disabled: !enabled,
-              onClick: onConfirmClick,
-              variant: variant === "destructive" ? "destructive" : "primary",
-              children: $.AI_TOOL_CONFIRMATION_CONFIRM
-            })
-          ]
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("lb-ai-tool-confirmation", className), ...props, children: [
+    children ? /* @__PURE__ */ jsx("div", { className: "lb-ai-tool-confirmation-content", children }) : null,
+    stage !== "executed" && /* @__PURE__ */ jsx("div", { className: "lb-ai-tool-confirmation-footer", children: /* @__PURE__ */ jsxs("div", { className: "lb-ai-tool-confirmation-actions", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: !enabled,
+          onClick: onCancelClick,
+          variant: "secondary",
+          children: $.AI_TOOL_CONFIRMATION_CANCEL
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: !enabled,
+          onClick: onConfirmClick,
+          variant: variant === "destructive" ? "destructive" : "primary",
+          children: $.AI_TOOL_CONFIRMATION_CONFIRM
+        }
+      )
+    ] }) })
+  ] });
 }
 function prettifyString(string) {
   return string.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().toLowerCase().replace(/^\w/, (character) => character.toUpperCase());
@@ -124,7 +110,8 @@ const AiTool = Object.assign(
         name,
         [kInternal]: { execute, messageStatus }
       } = useAiToolInvocationContext();
-      const isVisuallyPending = execute !== void 0 && stage !== "executed" && (stage === "receiving" ? messageStatus === "generating" : true);
+      const isVisuallyPending = execute !== void 0 && stage !== "executed" && // If it's in the "receiving" stage, we also check that the outer message is still generating.
+      (stage === "receiving" ? messageStatus === "generating" : true);
       const [semiControlledCollapsed, onSemiControlledCollapsed] = useSemiControllableState(collapsed ?? false, onCollapsedChange);
       const hasContent = Children.count(children) > 0;
       const isCollapsible = hasContent ? collapsible ?? true : false;
@@ -137,58 +124,98 @@ const AiTool = Object.assign(
         },
         [onSemiControlledCollapsed]
       );
-      return /* @__PURE__ */ jsxs(CollapsibleRoot, {
-        ref: forwardedRef,
-        className: cn(
-          "lb-collapsible lb-ai-tool",
-          `lb-ai-tool:variant-${variant}`,
-          className
-        ),
-        ...props,
-        open: hasContent ? !semiControlledCollapsed : false,
-        onOpenChange: handleCollapsibleOpenChange,
-        disabled: !isCollapsible,
-        "data-result": result?.type,
-        "data-stage": stage,
-        children: [
-          /* @__PURE__ */ jsxs(CollapsibleTrigger, {
-            className: cn(
-              "lb-collapsible-trigger lb-ai-tool-header",
-              variant === "minimal" && isVisuallyPending && "lb-ai-chat-pending"
+      return /* @__PURE__ */ jsxs(
+        CollapsibleRoot,
+        {
+          ref: forwardedRef,
+          className: cn(
+            "lb-collapsible lb-ai-tool",
+            `lb-ai-tool:variant-${variant}`,
+            className
+          ),
+          ...props,
+          open: hasContent ? !semiControlledCollapsed : false,
+          onOpenChange: handleCollapsibleOpenChange,
+          disabled: !isCollapsible,
+          "data-result": result?.type,
+          "data-stage": stage,
+          children: [
+            /* @__PURE__ */ jsxs(
+              CollapsibleTrigger,
+              {
+                className: cn(
+                  "lb-collapsible-trigger lb-ai-tool-header",
+                  variant === "minimal" && isVisuallyPending && "lb-ai-chat-pending"
+                ),
+                children: [
+                  icon ? /* @__PURE__ */ jsx("div", { className: "lb-ai-tool-header-icon-container", children: icon }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "lb-ai-tool-header-title", children: resolvedTitle }),
+                  isCollapsible ? /* @__PURE__ */ jsx("span", { className: "lb-collapsible-chevron lb-icon-container", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) : null,
+                  variant !== "minimal" ? /* @__PURE__ */ jsx("div", { className: "lb-ai-tool-header-status", children: stage === "executed" ? result.type === "success" ? /* @__PURE__ */ jsx(CheckCircleFillIcon, {}) : result.type === "error" ? /* @__PURE__ */ jsx(CrossCircleFillIcon, {}) : result.type === "cancelled" ? /* @__PURE__ */ jsx(MinusCircleIcon, {}) : null : isVisuallyPending ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null }) : null
+                ]
+              }
             ),
-            children: [
-              icon ? /* @__PURE__ */ jsx("div", {
-                className: "lb-ai-tool-header-icon-container",
-                children: icon
-              }) : null,
-              /* @__PURE__ */ jsx("span", {
-                className: "lb-ai-tool-header-title",
-                children: resolvedTitle
-              }),
-              isCollapsible ? /* @__PURE__ */ jsx("span", {
-                className: "lb-collapsible-chevron lb-icon-container",
-                children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-              }) : null,
-              variant !== "minimal" ? /* @__PURE__ */ jsx("div", {
-                className: "lb-ai-tool-header-status",
-                children: stage === "executed" ? result.type === "success" ? /* @__PURE__ */ jsx(CheckCircleFillIcon, {}) : result.type === "error" ? /* @__PURE__ */ jsx(CrossCircleFillIcon, {}) : result.type === "cancelled" ? /* @__PURE__ */ jsx(MinusCircleIcon, {}) : null : isVisuallyPending ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null
-              }) : null
-            ]
-          }),
-          hasContent ? /* @__PURE__ */ jsx(CollapsibleContent, {
-            className: "lb-collapsible-content lb-ai-tool-content-container",
-            children: /* @__PURE__ */ jsx("div", {
-              className: "lb-ai-tool-content",
-              children
-            })
-          }) : null
-        ]
-      });
+            hasContent ? /* @__PURE__ */ jsx(CollapsibleContent, { className: "lb-collapsible-content lb-ai-tool-content-container", children: /* @__PURE__ */ jsx("div", { className: "lb-ai-tool-content", children }) }) : null
+          ]
+        }
+      );
     }
   ),
   {
+    /**
+     * Display an icon in a container.
+     *
+     * @example
+     * <AiTool
+     *   icon={
+     *     <AiTool.Icon>🔍</AiTool.Icon>
+     *   }
+     * />
+     */
     Icon: AiToolIcon,
+    /**
+     * Display the tool's arguments and result, which can be useful during
+     * development.
+     *
+     * @example
+     * <AiTool>
+     *   <AiTool.Inspector />
+     * </AiTool>
+     */
     Inspector: AiToolInspector,
+    /**
+     * Display a human-in-the-loop confirmation step which can be accepted
+     * or cancelled by the user.
+     *
+     * The `confirm` and `cancel` callbacks work like `execute` in tool definitions: they can
+     * perform side-effects, be async if needed, and return a result. The tool call will stay
+     * pending until either `confirm` or `cancel` is called.
+     *
+     * @example
+     * <AiTool>
+     *   <AiTool.Confirmation
+     *     // Use a destructive visual appearance
+     *     variant="destructive"
+     *
+     *     // The tool's arguments can be directly accessed like in `execute`
+     *     confirm={({ pageIds }) => {
+     *       const deletedPageTitles = pages
+     *         .filter((p) => pageIds.includes(p.id))
+     *         .map((page) => page.title);
+     *
+     *       deletePages(pageIds);
+     *
+     *       // This result will be available as `result` in the tool's `render` props
+     *       return { data: { deletedPageTitles } };
+     *     }}
+     *
+     *     // If needed, `cancel={() => ...}` would work similarly
+     *   >
+     *     Do you want to delete these pages?
+     *     <PagesPreviews />
+     *   </AiTool.Confirmation>
+     * </AiTool>
+     */
     Confirmation: AiToolConfirmation
   }
 );