@liveblocks/react-ui 3.0.0 → 3.1.0-alpha1

package/dist/_private/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var Avatar = require('../components/internal/Avatar.cjs');
 var Button = require('../components/internal/Button.cjs');
 var List = require('../components/internal/List.cjs');
 var Prose = require('../components/internal/Prose.cjs');
@@ -7,6 +8,7 @@ var Tooltip = require('../components/internal/Tooltip.cjs');
 var User = require('../components/internal/User.cjs');
 require('../icons/index.cjs');
 var capitalize = require('../utils/capitalize.cjs');
+var cn = require('../utils/cn.cjs');
 var useInitial = require('../utils/use-initial.cjs');
 var useRefs = require('../utils/use-refs.cjs');
 var index = require('../primitives/AiChatComposer/index.cjs');
@@ -69,6 +71,7 @@ var Warning = require('../icons/Warning.cjs');
 
 
 
+exports.Avatar = Avatar.Avatar;
 exports.Button = Button.Button;
 exports.SelectButton = Button.SelectButton;
 exports.List = List.List;
@@ -77,6 +80,7 @@ exports.ShortcutTooltip = Tooltip.ShortcutTooltip;
 exports.Tooltip = Tooltip.Tooltip;
 exports.User = User.User;
 exports.capitalize = capitalize.capitalize;
+exports.cn = cn.cn;
 exports.useInitial = useInitial.useInitial;
 exports.useRefs = useRefs.useRefs;
 exports.AiChatComposer = index;

package/dist/_private/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/_private/index.d.cts

@@ -1,10 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback, FormEvent, ComponentType } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export { TooltipProvider } from '@radix-ui/react-tooltip';
 import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 
+interface AvatarProps extends ComponentProps<"div"> {
+    /**
+     * The user ID to display the avatar for.
+     */
+    userId: string;
+}
+declare function Avatar({ userId, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
 interface ButtonProps extends ComponentProps<"button"> {
     variant?: "default" | "toolbar" | "outline" | "primary" | "secondary" | "destructive";
     size?: "default" | "large";
@@ -167,6 +175,11 @@ declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JS
 
 declare function capitalize(string: string): string;
 
+/**
+ * Construct class names strings.
+ */
+declare function cn(...args: (string | number | boolean | undefined | null)[]): string;
+
 /**
  * "Freezes" a given value, so that it will return the same value/instance on
  * each subsequent render. This can be used to freeze "initial" values for
@@ -351,4 +364,4 @@ interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
 }
 declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
 
-export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useInitial, useRefs };
+export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };

package/dist/_private/index.d.ts

@@ -1,10 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback, FormEvent, ComponentType } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 export { TooltipProvider } from '@radix-ui/react-tooltip';
 import { AiTextPart, AiReasoningPart, AiChatMessage } from '@liveblocks/core';
 
+interface AvatarProps extends ComponentProps<"div"> {
+    /**
+     * The user ID to display the avatar for.
+     */
+    userId: string;
+}
+declare function Avatar({ userId, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
 interface ButtonProps extends ComponentProps<"button"> {
     variant?: "default" | "toolbar" | "outline" | "primary" | "secondary" | "destructive";
     size?: "default" | "large";
@@ -167,6 +175,11 @@ declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JS
 
 declare function capitalize(string: string): string;
 
+/**
+ * Construct class names strings.
+ */
+declare function cn(...args: (string | number | boolean | undefined | null)[]): string;
+
 /**
  * "Freezes" a given value, so that it will return the same value/instance on
  * each subsequent render. This can be used to freeze "initial" values for
@@ -351,4 +364,4 @@ interface MarkdownProps extends ComponentPropsWithSlot<"div"> {
 }
 declare const Markdown: react.ForwardRefExoticComponent<MarkdownProps & react.RefAttributes<HTMLDivElement>>;
 
-export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useInitial, useRefs };
+export { index$2 as AiChatComposer, AiChatComposerEditorProps, AiChatComposerFormProps, AiChatComposerSubmitProps, index$1 as AiMessage, AiMessageContentComponents, AiMessageContentProps, AiMessageContentReasoningPartProps, AiMessageContentTextPartProps, ArrowCornerDownRightIcon, ArrowCornerUpRightIcon, ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Avatar, BellCrossedIcon, BellIcon, BlockquoteIcon, BoldIcon, Button, CheckCircleFillIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, index as Collapsible, CommentIcon, CopyIcon, CrossCircleFillIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiIcon, EmojiPlusIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, Markdown, MarkdownComponents, MarkdownComponentsBlockquoteProps, MarkdownComponentsCodeBlockProps, MarkdownComponentsHeadingProps, MarkdownComponentsImageProps, MarkdownComponentsLinkProps, MarkdownProps, MentionIcon, MinusCircleIcon, Prose, QuestionMarkIcon, RedoIcon, RestoreIcon, RetryIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SparklesTextIcon, SpinnerIcon, StopIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, cn, useInitial, useRefs };

package/dist/_private/index.js

@@ -1,3 +1,4 @@
+export { Avatar } from '../components/internal/Avatar.js';
 export { Button, SelectButton } from '../components/internal/Button.js';
 export { List } from '../components/internal/List.js';
 export { Prose } from '../components/internal/Prose.js';
@@ -5,6 +6,7 @@ export { ShortcutTooltip, Tooltip } from '../components/internal/Tooltip.js';
 export { User } from '../components/internal/User.js';
 import '../icons/index.js';
 export { capitalize } from '../utils/capitalize.js';
+export { cn } from '../utils/cn.js';
 export { useInitial } from '../utils/use-initial.js';
 export { useRefs } from '../utils/use-refs.js';
 import * as index from '../primitives/AiChatComposer/index.js';

package/dist/_private/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/AiChat.cjs

@@ -7,7 +7,7 @@ var react = require('react');
 var ArrowDown = require('../icons/ArrowDown.cjs');
 var Spinner = require('../icons/Spinner.cjs');
 var overrides = require('../overrides.cjs');
-var classNames = require('../utils/class-names.cjs');
+var cn = require('../utils/cn.cjs');
 var useVisible = require('../utils/use-visible.cjs');
 var AiChatAssistantMessage = require('./internal/AiChatAssistantMessage.cjs');
 var AiChatComposer = require('./internal/AiChatComposer.cjs');
@@ -70,7 +70,7 @@ const AiChat = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ref: containerRef,
       ...props,
-      className: classNames.classNames(
+      className: cn.cn(
         "lb-root lb-ai-chat",
         layout === "compact" ? "lb-ai-chat:layout-compact" : "lb-ai-chat:layout-inset",
         className

package/dist/components/AiChat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiChat.cjs","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  RegisterAiTool,\n  useAiChatMessages,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatComposerOverrides,\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { classNames } from \"../utils/class-names\";\nimport { useVisible } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat id provided to the `AiChat` component.\n   */\n  chatId: string;\n  /**\n   * The copilot id provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\n// TODO: Add Markdown components\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n};\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * The id of the copilot to use to send the message.\n   */\n  copilotId?: string;\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const containerBottomRef = useRef<HTMLDivElement | null>(null);\n    const isScrollIndicatorEnabled = !isLoading && !error;\n    const isScrollAtBottom = useVisible(containerBottomRef, {\n      enabled: isScrollIndicatorEnabled,\n      root: containerRef,\n      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,\n      initialValue: null,\n    });\n    const isScrollIndicatorVisible =\n      isScrollIndicatorEnabled && isScrollAtBottom !== null\n        ? !isScrollAtBottom\n        : false;\n\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottomCallbackRef =\n      useRef<(behavior: \"instant\" | \"smooth\") => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function (\n        behavior: \"instant\" | \"smooth\"\n      ) {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior,\n        });\n      };\n    }\n    const scrollToBottom = scrollToBottomCallbackRef.current;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={classNames(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {knowledge\n          ? knowledge.map((source, index) => (\n              <RegisterAiKnowledge\n                key={index}\n                description={source.description}\n                value={source.value}\n                // knowledgeKey={source.knowledgeKey}\n              />\n            ))\n          : null}\n\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AutoScrollHandler\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n              />\n              <div className=\"lb-ai-chat-messages\">\n                {messages.map((message) => {\n                  if (message.role === \"user\") {\n                    return (\n                      <AiChatUserMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                      />\n                    );\n                  } else if (message.role === \"assistant\") {\n                    return (\n                      <AiChatAssistantMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                        components={components}\n                      />\n                    );\n                  } else {\n                    return null;\n                  }\n                })}\n              </div>\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiChatComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSentMessageId(id)}\n            className={\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            }\n          />\n        </div>\n        {/* This invisible element is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is fully scrolled.\n         */}\n        <div\n          ref={containerBottomRef}\n          style={{ position: \"sticky\", height: 0 }}\n          aria-hidden\n          data-scroll-at-bottom={isScrollAtBottom ? \"\" : undefined}\n        />\n      </div>\n    );\n  }\n);\n\nfunction AutoScrollHandler({\n  lastSentMessageId,\n  scrollToBottom,\n}: {\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: (behavior: \"instant\" | \"smooth\") => void;\n}) {\n  // Scroll to bottom when the component first mounts\n  useLayoutEffect(() => {\n    scrollToBottom(\"instant\");\n  }, [scrollToBottom]);\n\n  // Scroll to bottom when sending a new message\n  useEffect(() => {\n    scrollToBottom(\"smooth\");\n  }, [lastSentMessageId, scrollToBottom]);\n\n  return null;\n}\n"],"names":["jsx","SpinnerIcon","forwardRef","overrides","useAiChatMessages","useOverrides","useRef","useVisible","useState","useImperativeHandle","jsxs","classNames","RegisterAiKnowledge","RegisterAiTool","Fragment","AiChatUserMessage","AiChatAssistantMessage","ArrowDownIcon","AiChatComposer","useLayoutEffect","useEffect"],"mappings":"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"}
+{"version":3,"file":"AiChat.cjs","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  RegisterAiTool,\n  useAiChatMessages,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatComposerOverrides,\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useVisible } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat id provided to the `AiChat` component.\n   */\n  chatId: string;\n  /**\n   * The copilot id provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\n// TODO: Add Markdown components\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n};\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * The id of the copilot to use to send the message.\n   */\n  copilotId?: string;\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const containerBottomRef = useRef<HTMLDivElement | null>(null);\n    const isScrollIndicatorEnabled = !isLoading && !error;\n    const isScrollAtBottom = useVisible(containerBottomRef, {\n      enabled: isScrollIndicatorEnabled,\n      root: containerRef,\n      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,\n      initialValue: null,\n    });\n    const isScrollIndicatorVisible =\n      isScrollIndicatorEnabled && isScrollAtBottom !== null\n        ? !isScrollAtBottom\n        : false;\n\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottomCallbackRef =\n      useRef<(behavior: \"instant\" | \"smooth\") => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function (\n        behavior: \"instant\" | \"smooth\"\n      ) {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior,\n        });\n      };\n    }\n    const scrollToBottom = scrollToBottomCallbackRef.current;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={cn(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {knowledge\n          ? knowledge.map((source, index) => (\n              <RegisterAiKnowledge\n                key={index}\n                description={source.description}\n                value={source.value}\n                // knowledgeKey={source.knowledgeKey}\n              />\n            ))\n          : null}\n\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AutoScrollHandler\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n              />\n              <div className=\"lb-ai-chat-messages\">\n                {messages.map((message) => {\n                  if (message.role === \"user\") {\n                    return (\n                      <AiChatUserMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                      />\n                    );\n                  } else if (message.role === \"assistant\") {\n                    return (\n                      <AiChatAssistantMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                        components={components}\n                      />\n                    );\n                  } else {\n                    return null;\n                  }\n                })}\n              </div>\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiChatComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSentMessageId(id)}\n            className={\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            }\n          />\n        </div>\n        {/* This invisible element is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is fully scrolled.\n         */}\n        <div\n          ref={containerBottomRef}\n          style={{ position: \"sticky\", height: 0 }}\n          aria-hidden\n          data-scroll-at-bottom={isScrollAtBottom ? \"\" : undefined}\n        />\n      </div>\n    );\n  }\n);\n\nfunction AutoScrollHandler({\n  lastSentMessageId,\n  scrollToBottom,\n}: {\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: (behavior: \"instant\" | \"smooth\") => void;\n}) {\n  // Scroll to bottom when the component first mounts\n  useLayoutEffect(() => {\n    scrollToBottom(\"instant\");\n  }, [scrollToBottom]);\n\n  // Scroll to bottom when sending a new message\n  useEffect(() => {\n    scrollToBottom(\"smooth\");\n  }, [lastSentMessageId, scrollToBottom]);\n\n  return null;\n}\n"],"names":["jsx","SpinnerIcon","forwardRef","overrides","useAiChatMessages","useOverrides","useRef","useVisible","useState","useImperativeHandle","jsxs","cn","RegisterAiKnowledge","RegisterAiTool","Fragment","AiChatUserMessage","AiChatAssistantMessage","ArrowDownIcon","AiChatComposer","useLayoutEffect","useEffect"],"mappings":";;;;;;;;;;;;;;;AAmEA,MAAM,oCAAuC,GAAA,EAAA,CAAA;AA2C7C,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAO,MAAM,IAAA;AAAA,EACb,OAAA,EAAS,sBACNA,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,+BAAA;AAAA,IACb,yCAACC,mBAAY,EAAA,EAAA,CAAA;AAAA,GACf,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,eACAC,WAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAQ,EAAC;AAAA,IACT,MAAS,GAAA,OAAA;AAAA,IACT,UAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,KAAM,EAAA,GAAIC,0BAAkB,MAAM,CAAA,CAAA;AAC/D,IAAM,MAAA,CAAA,GAAIC,uBAAaF,WAAS,CAAA,CAAA;AAChC,IAAM,MAAA,KAAA,GAAQ,UAAY,EAAA,KAAA,IAAS,iBAAkB,CAAA,KAAA,CAAA;AACrD,IAAM,MAAA,OAAA,GAAU,UAAY,EAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AAEzD,IAAM,MAAA,YAAA,GAAeG,aAA8B,IAAI,CAAA,CAAA;AACvD,IAAM,MAAA,kBAAA,GAAqBA,aAA8B,IAAI,CAAA,CAAA;AAC7D,IAAM,MAAA,wBAAA,GAA2B,CAAC,SAAA,IAAa,CAAC,KAAA,CAAA;AAChD,IAAM,MAAA,gBAAA,GAAmBC,sBAAW,kBAAoB,EAAA;AAAA,MACtD,OAAS,EAAA,wBAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,UAAY,EAAA,oCAAA;AAAA,MACZ,YAAc,EAAA,IAAA;AAAA,KACf,CAAA,CAAA;AACD,IAAA,MAAM,wBACJ,GAAA,wBAAA,IAA4B,gBAAqB,KAAA,IAAA,GAC7C,CAAC,gBACD,GAAA,KAAA,CAAA;AAEN,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAC5CC,eAA2B,IAAI,CAAA,CAAA;AAEjC,IAAAC,yBAAA;AAAA,MACE,YAAA;AAAA,MACA,MAAM,YAAa,CAAA,OAAA;AAAA,MACnB,EAAC;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,yBAAA,GACJH,aAAiD,KAAS,CAAA,CAAA,CAAA;AAC5D,IAAI,IAAA,yBAAA,CAA0B,YAAY,KAAW,CAAA,EAAA;AACnD,MAA0B,yBAAA,CAAA,OAAA,GAAU,SAClC,QACA,EAAA;AACA,QAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,QAAA,IAAI,SAAc,KAAA,IAAA;AAAM,UAAA,OAAA;AAExB,QAAA,SAAA,CAAU,QAAS,CAAA;AAAA,UACjB,KAAK,SAAU,CAAA,YAAA;AAAA,UACf,QAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH,CAAA;AAAA,KACF;AACA,IAAA,MAAM,iBAAiB,yBAA0B,CAAA,OAAA,CAAA;AAEjD,IAAA,uBACGI,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,SAAW,EAAAC,KAAA;AAAA,QACT,oBAAA;AAAA,QACA,MAAA,KAAW,YACP,2BACA,GAAA,yBAAA;AAAA,QACJ,SAAA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,GACG,SAAU,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,0BACpBX,cAAA,CAAAY,2BAAA,EAAA;AAAA,UAEC,aAAa,MAAO,CAAA,WAAA;AAAA,UACpB,OAAO,MAAO,CAAA,KAAA;AAAA,SAFT,EAAA,KAIP,CACD,CACD,GAAA,IAAA;AAAA,QAEH,MAAA,CAAO,OAAQ,CAAA,KAAK,CAAE,CAAA,GAAA,CAAI,CAAC,CAAC,IAAA,EAAM,IAAI,CAAA,qBACpCZ,cAAA,CAAAa,sBAAA,EAAA;AAAA,UAA0B,MAAA;AAAA,UAAgB,IAAA;AAAA,UAAY,IAAA;AAAA,SAAA,EAAlC,IAA8C,CACpE,CAAA;AAAA,wBAEAb,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,oBAAA;AAAA,UACZ,sCACEA,cAAA,CAAA,OAAA,EAAA,EAAQ,CACP,GAAA,KAAA,KAAU,yBACXA,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,2BAAA;AAAA,YACZ,QAAA,EAAA,CAAA,CAAE,uBAAuB,KAAK,CAAA;AAAA,WACjC,CACE,GAAA,QAAA,CAAS,MAAW,KAAA,CAAA,mBACrBA,cAAA,CAAA,KAAA,EAAA;AAAA,YAAM,MAAA;AAAA,YAAgB,SAAA;AAAA,WAAsB,CAE7C,mBAAAU,eAAA,CAAAI,mBAAA,EAAA;AAAA,YACE,QAAA,EAAA;AAAA,8BAACd,cAAA,CAAA,iBAAA,EAAA;AAAA,gBACC,iBAAA;AAAA,gBACA,cAAA;AAAA,eACF,CAAA;AAAA,8BACCA,cAAA,CAAA,KAAA,EAAA;AAAA,gBAAI,SAAU,EAAA,qBAAA;AAAA,gBACZ,QAAA,EAAA,QAAA,CAAS,GAAI,CAAA,CAAC,OAAY,KAAA;AACzB,kBAAI,IAAA,OAAA,CAAQ,SAAS,MAAQ,EAAA;AAC3B,oBAAA,uBACGA,cAAA,CAAAe,mCAAA,EAAA;AAAA,sBAEC,OAAA;AAAA,iCACAZ,WAAA;AAAA,qBAAA,EAFK,QAAQ,EAGf,CAAA,CAAA;AAAA,mBAEJ,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,WAAa,EAAA;AACvC,oBAAA,uBACGH,cAAA,CAAAgB,6CAAA,EAAA;AAAA,sBAEC,OAAA;AAAA,iCACAb,WAAA;AAAA,sBACA,UAAA;AAAA,qBAAA,EAHK,QAAQ,EAIf,CAAA,CAAA;AAAA,mBAEG,MAAA;AACL,oBAAO,OAAA,IAAA,CAAA;AAAA,mBACT;AAAA,iBACD,CAAA;AAAA,eACH,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAEJ,CAAA;AAAA,wBAECO,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,mBAAA;AAAA,UACb,QAAA,EAAA;AAAA,4BAACV,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAU,EAAA,2BAAA;AAAA,cACb,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,gBACC,SAAU,EAAA,wEAAA;AAAA,gBACV,cAAA,EAAc,2BAA2B,EAAK,GAAA,KAAA,CAAA;AAAA,gBAE9C,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,kBACC,SAAU,EAAA,oCAAA;AAAA,kBACV,QAAA,EAAU,2BAA2B,CAAI,GAAA,CAAA,CAAA;AAAA,kBACzC,eAAa,CAAC,wBAAA;AAAA,kBACd,OAAA,EAAS,MAAM,cAAA,CAAe,QAAQ,CAAA;AAAA,kBAEtC,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,oBAAK,SAAU,EAAA,mBAAA;AAAA,oBACd,yCAACiB,uBAAc,EAAA,EAAA,CAAA;AAAA,mBACjB,CAAA;AAAA,iBACF,CAAA;AAAA,eACF,CAAA;AAAA,aACF,CAAA;AAAA,4BACCjB,cAAA,CAAAkB,6BAAA,EAAA;AAAA,cAEC,MAAA;AAAA,cACA,SAAA;AAAA,yBACAf,WAAA;AAAA,cACA,SAAA;AAAA,cACA,qBAAqB,CAAC,EAAE,EAAG,EAAA,KAAM,qBAAqB,EAAE,CAAA;AAAA,cACxD,SAAA,EACE,MAAW,KAAA,OAAA,GACP,oCACA,GAAA,KAAA,CAAA;AAAA,aAAA,EATD,MAWP,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBAQCH,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,GAAK,EAAA,kBAAA;AAAA,UACL,KAAO,EAAA,EAAE,QAAU,EAAA,QAAA,EAAU,QAAQ,CAAE,EAAA;AAAA,UACvC,aAAW,EAAA,IAAA;AAAA,UACX,uBAAA,EAAuB,mBAAmB,EAAK,GAAA,KAAA,CAAA;AAAA,SACjD,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,iBAAkB,CAAA;AAAA,EACzB,iBAAA;AAAA,EACA,cAAA;AACF,CAGG,EAAA;AAED,EAAAmB,wBAAA,CAAgB,MAAM;AACpB,IAAA,cAAA,CAAe,SAAS,CAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAGnB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,QAAQ,CAAA,CAAA;AAAA,GACtB,EAAA,CAAC,iBAAmB,EAAA,cAAc,CAAC,CAAA,CAAA;AAEtC,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist/components/AiChat.js

@@ -5,7 +5,7 @@ import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from 're
 import { ArrowDownIcon } from '../icons/ArrowDown.js';
 import { SpinnerIcon } from '../icons/Spinner.js';
 import { useOverrides } from '../overrides.js';
-import { classNames } from '../utils/class-names.js';
+import { cn } from '../utils/cn.js';
 import { useVisible } from '../utils/use-visible.js';
 import { AiChatAssistantMessage } from './internal/AiChatAssistantMessage.js';
 import { AiChatComposer } from './internal/AiChatComposer.js';
@@ -68,7 +68,7 @@ const AiChat = forwardRef(
     return /* @__PURE__ */ jsxs("div", {
       ref: containerRef,
       ...props,
-      className: classNames(
+      className: cn(
         "lb-root lb-ai-chat",
         layout === "compact" ? "lb-ai-chat:layout-compact" : "lb-ai-chat:layout-inset",
         className

package/dist/components/AiChat.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiChat.js","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  RegisterAiTool,\n  useAiChatMessages,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatComposerOverrides,\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { classNames } from \"../utils/class-names\";\nimport { useVisible } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat id provided to the `AiChat` component.\n   */\n  chatId: string;\n  /**\n   * The copilot id provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\n// TODO: Add Markdown components\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n};\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * The id of the copilot to use to send the message.\n   */\n  copilotId?: string;\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const containerBottomRef = useRef<HTMLDivElement | null>(null);\n    const isScrollIndicatorEnabled = !isLoading && !error;\n    const isScrollAtBottom = useVisible(containerBottomRef, {\n      enabled: isScrollIndicatorEnabled,\n      root: containerRef,\n      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,\n      initialValue: null,\n    });\n    const isScrollIndicatorVisible =\n      isScrollIndicatorEnabled && isScrollAtBottom !== null\n        ? !isScrollAtBottom\n        : false;\n\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottomCallbackRef =\n      useRef<(behavior: \"instant\" | \"smooth\") => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function (\n        behavior: \"instant\" | \"smooth\"\n      ) {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior,\n        });\n      };\n    }\n    const scrollToBottom = scrollToBottomCallbackRef.current;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={classNames(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {knowledge\n          ? knowledge.map((source, index) => (\n              <RegisterAiKnowledge\n                key={index}\n                description={source.description}\n                value={source.value}\n                // knowledgeKey={source.knowledgeKey}\n              />\n            ))\n          : null}\n\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AutoScrollHandler\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n              />\n              <div className=\"lb-ai-chat-messages\">\n                {messages.map((message) => {\n                  if (message.role === \"user\") {\n                    return (\n                      <AiChatUserMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                      />\n                    );\n                  } else if (message.role === \"assistant\") {\n                    return (\n                      <AiChatAssistantMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                        components={components}\n                      />\n                    );\n                  } else {\n                    return null;\n                  }\n                })}\n              </div>\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiChatComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSentMessageId(id)}\n            className={\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            }\n          />\n        </div>\n        {/* This invisible element is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is fully scrolled.\n         */}\n        <div\n          ref={containerBottomRef}\n          style={{ position: \"sticky\", height: 0 }}\n          aria-hidden\n          data-scroll-at-bottom={isScrollAtBottom ? \"\" : undefined}\n        />\n      </div>\n    );\n  }\n);\n\nfunction AutoScrollHandler({\n  lastSentMessageId,\n  scrollToBottom,\n}: {\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: (behavior: \"instant\" | \"smooth\") => void;\n}) {\n  // Scroll to bottom when the component first mounts\n  useLayoutEffect(() => {\n    scrollToBottom(\"instant\");\n  }, [scrollToBottom]);\n\n  // Scroll to bottom when sending a new message\n  useEffect(() => {\n    scrollToBottom(\"smooth\");\n  }, [lastSentMessageId, scrollToBottom]);\n\n  return null;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AiChat.js","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiOpaqueToolDefinition,\n  CopilotId,\n  MessageId,\n} from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  RegisterAiTool,\n  useAiChatMessages,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { GlobalComponents } from \"../components\";\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { SpinnerIcon } from \"../icons/Spinner\";\nimport {\n  type AiChatComposerOverrides,\n  type AiChatMessageOverrides,\n  type AiChatOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../overrides\";\nimport { cn } from \"../utils/cn\";\nimport { useVisible } from \"../utils/use-visible\";\nimport { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\nexport type AiChatComponentsEmptyProps = {\n  /**\n   * The chat id provided to the `AiChat` component.\n   */\n  chatId: string;\n  /**\n   * The copilot id provided to the `AiChat` component.\n   */\n  copilotId?: string;\n};\n\nexport type AiChatComponentsLoadingProps = Record<string, never>;\n\n// TODO: Add Markdown components\nexport type AiChatComponents = {\n  /**\n   * The component used to render the empty state of the chat.\n   */\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\n  /**\n   * The component used to render the loading state of the chat.\n   */\n  Loading: ComponentType<AiChatComponentsLoadingProps>;\n};\n\n/**\n * The minimum number of pixels from the bottom of the scrollable area\n * before showing the scroll to bottom indicator.\n */\nconst MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;\n\nexport interface AiChatProps extends ComponentProps<\"div\"> {\n  /**\n   * The id of the chat the composer belongs to.\n   */\n  chatId: string;\n  /**\n   * Whether to focus the chat composer on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * The id of the copilot to use to send the message.\n   */\n  copilotId?: string;\n  /**\n   * The contextual knowledge to include in the chat. May be used by the assistant when generating responses.\n   * Any knowledge you provide via this prop will be added to any already globally registered knowledge via <RegisterAiKnowledge />.\n   */\n  knowledge?: AiKnowledgeSource[];\n  /**\n   * Tool definitions to make available within this chat. May be used by the assistant when generating responses.\n   */\n  tools?: Record<string, AiOpaqueToolDefinition>;\n  /**\n   * The layout of the chat and its composer.\n   */\n  layout?: \"inset\" | \"compact\";\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      AiChatMessageOverrides &\n      AiChatComposerOverrides &\n      AiChatOverrides\n  >;\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<GlobalComponents & AiChatComponents>;\n}\n\nconst defaultComponents: AiChatComponents = {\n  Empty: () => null,\n  Loading: () => (\n    <div className=\"lb-loading lb-ai-chat-loading\">\n      <SpinnerIcon />\n    </div>\n  ),\n};\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      layout = \"inset\",\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n    const Empty = components?.Empty ?? defaultComponents.Empty;\n    const Loading = components?.Loading ?? defaultComponents.Loading;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const containerBottomRef = useRef<HTMLDivElement | null>(null);\n    const isScrollIndicatorEnabled = !isLoading && !error;\n    const isScrollAtBottom = useVisible(containerBottomRef, {\n      enabled: isScrollIndicatorEnabled,\n      root: containerRef,\n      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,\n      initialValue: null,\n    });\n    const isScrollIndicatorVisible =\n      isScrollIndicatorEnabled && isScrollAtBottom !== null\n        ? !isScrollAtBottom\n        : false;\n\n    const [lastSentMessageId, setLastSentMessageId] =\n      useState<MessageId | null>(null);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    const scrollToBottomCallbackRef =\n      useRef<(behavior: \"instant\" | \"smooth\") => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function (\n        behavior: \"instant\" | \"smooth\"\n      ) {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior,\n        });\n      };\n    }\n    const scrollToBottom = scrollToBottomCallbackRef.current;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={cn(\n          \"lb-root lb-ai-chat\",\n          layout === \"compact\"\n            ? \"lb-ai-chat:layout-compact\"\n            : \"lb-ai-chat:layout-inset\",\n          className\n        )}\n      >\n        {knowledge\n          ? knowledge.map((source, index) => (\n              <RegisterAiKnowledge\n                key={index}\n                description={source.description}\n                value={source.value}\n                // knowledgeKey={source.knowledgeKey}\n              />\n            ))\n          : null}\n\n        {Object.entries(tools).map(([name, tool]) => (\n          <RegisterAiTool key={name} chatId={chatId} name={name} tool={tool} />\n        ))}\n\n        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <Loading />\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : messages.length === 0 ? (\n            <Empty chatId={chatId} copilotId={copilotId} />\n          ) : (\n            <>\n              <AutoScrollHandler\n                lastSentMessageId={lastSentMessageId}\n                scrollToBottom={scrollToBottom}\n              />\n              <div className=\"lb-ai-chat-messages\">\n                {messages.map((message) => {\n                  if (message.role === \"user\") {\n                    return (\n                      <AiChatUserMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                      />\n                    );\n                  } else if (message.role === \"assistant\") {\n                    return (\n                      <AiChatAssistantMessage\n                        key={message.id}\n                        message={message}\n                        overrides={overrides}\n                        components={components}\n                      />\n                    );\n                  } else {\n                    return null;\n                  }\n                })}\n              </div>\n            </>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator\"\n              data-visible={isScrollIndicatorVisible ? \"\" : undefined}\n            >\n              <button\n                className=\"lb-ai-chat-scroll-indicator-button\"\n                tabIndex={isScrollIndicatorVisible ? 0 : -1}\n                aria-hidden={!isScrollIndicatorVisible}\n                onClick={() => scrollToBottom(\"smooth\")}\n              >\n                <span className=\"lb-icon-container\">\n                  <ArrowDownIcon />\n                </span>\n              </button>\n            </div>\n          </div>\n          <AiChatComposer\n            key={chatId}\n            chatId={chatId}\n            copilotId={copilotId as CopilotId}\n            overrides={overrides}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSentMessageId(id)}\n            className={\n              layout === \"inset\"\n                ? \"lb-elevation lb-elevation-moderate\"\n                : undefined\n            }\n          />\n        </div>\n        {/* This invisible element is a trick which allows us to use IntersectionObserver to detect when the\n         * scrollable area is fully scrolled to the bottom instead of manually tracking the scroll position\n         * and having to deal with resizes, etc.\n         *\n         * It's positioned at the bottom of the scrollable area and reliably only becomes \"visible\" to the\n         * IntersectionObserver when the scrollable area is fully scrolled.\n         */}\n        <div\n          ref={containerBottomRef}\n          style={{ position: \"sticky\", height: 0 }}\n          aria-hidden\n          data-scroll-at-bottom={isScrollAtBottom ? \"\" : undefined}\n        />\n      </div>\n    );\n  }\n);\n\nfunction AutoScrollHandler({\n  lastSentMessageId,\n  scrollToBottom,\n}: {\n  lastSentMessageId: MessageId | null;\n  scrollToBottom: (behavior: \"instant\" | \"smooth\") => void;\n}) {\n  // Scroll to bottom when the component first mounts\n  useLayoutEffect(() => {\n    scrollToBottom(\"instant\");\n  }, [scrollToBottom]);\n\n  // Scroll to bottom when sending a new message\n  useEffect(() => {\n    scrollToBottom(\"smooth\");\n  }, [lastSentMessageId, scrollToBottom]);\n\n  return null;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/AiTool.cjs

@@ -8,7 +8,7 @@ require('../icons/index.cjs');
 var overrides = require('../overrides.cjs');
 var contexts = require('../primitives/AiMessage/contexts.cjs');
 var index = require('../primitives/Collapsible/index.cjs');
-var classNames = require('../utils/class-names.cjs');
+var cn = require('../utils/cn.cjs');
 var useControllableState = require('../utils/use-controllable-state.cjs');
 var CodeBlock = require('./internal/CodeBlock.cjs');
 var Button = require('./internal/Button.cjs');
@@ -20,14 +20,14 @@ var Spinner = require('../icons/Spinner.cjs');
 
 function AiToolIcon({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-ai-tool-icon", className),
+    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: classNames.classNames("lb-ai-tool-inspector", className),
+    className: cn.cn("lb-ai-tool-inspector", className),
     ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
@@ -74,7 +74,7 @@ function AiToolConfirmation({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: classNames.classNames("lb-ai-tool-confirmation", className),
+    className: cn.cn("lb-ai-tool-confirmation", className),
     ...props,
     children: [
       children ? /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -113,6 +113,7 @@ const AiTool = Object.assign(
       children,
       title,
       icon,
+      collapsible,
       collapsed,
       onCollapsedChange,
       className,
@@ -126,6 +127,7 @@ const AiTool = Object.assign(
       } = contexts.useAiToolInvocationContext();
       const [semiControlledCollapsed, onSemiControlledCollapsed] = useControllableState.useSemiControllableState(collapsed ?? false, onCollapsedChange);
       const hasContent = react.Children.count(children) > 0;
+      const isCollapsible = hasContent ? collapsible ?? true : false;
       const resolvedTitle = react.useMemo(() => {
         return title ?? prettifyString(name);
       }, [title, name]);
@@ -137,11 +139,11 @@ const AiTool = Object.assign(
       );
       return /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
         ref: forwardedRef,
-        className: classNames.classNames("lb-collapsible lb-ai-tool", className),
+        className: cn.cn("lb-collapsible lb-ai-tool", className),
         ...props,
         open: hasContent ? !semiControlledCollapsed : false,
         onOpenChange: handleCollapsibleOpenChange,
-        disabled: !hasContent,
+        disabled: !isCollapsible,
         "data-result": result?.type,
         "data-stage": stage,
         children: [
@@ -156,7 +158,7 @@ const AiTool = Object.assign(
                 className: "lb-ai-tool-header-title",
                 children: resolvedTitle
               }),
-              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+              isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx("span", {
                 className: "lb-collapsible-chevron lb-icon-container",
                 children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
               }) : null,

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 { classNames } from \"../utils/class-names\";\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?: string;\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   * 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\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 (\n    <div className={classNames(\"lb-ai-tool-icon\", className)} {...props} />\n  );\n}\n\nfunction AiToolInspector({ className, ...props }: AiToolInspectorProps) {\n  const { args, partialArgs, result } = useAiToolInvocationContext();\n\n  return (\n    <div className={classNames(\"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\n      className={classNames(\"lb-ai-tool-confirmation\", className)}\n      {...props}\n    >\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        collapsed,\n        onCollapsedChange,\n        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute },\n      } = useAiToolInvocationContext();\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      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={classNames(\"lb-collapsible lb-ai-tool\", className)}\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={!hasContent}\n          data-result={result?.type}\n          data-stage={stage}\n        >\n          <Collapsible.Trigger className=\"lb-collapsible-trigger lb-ai-tool-header\">\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            {hasContent ? (\n              <span className=\"lb-collapsible-chevron lb-icon-container\">\n                <ChevronRightIcon />\n              </span>\n            ) : null}\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              ) : execute !== undefined ? (\n                // Only show a spinner if the tool has an `execute` method.\n                <SpinnerIcon />\n              ) : null}\n            </div>\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","classNames","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?: string;\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   * 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        className,\n        ...props\n      },\n      forwardedRef\n    ) => {\n      const {\n        stage,\n        result,\n        name,\n        [kInternal]: { execute },\n      } = useAiToolInvocationContext();\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(\"lb-collapsible lb-ai-tool\", className)}\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 className=\"lb-collapsible-trigger lb-ai-tool-header\">\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            <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              ) : execute !== undefined ? (\n                // Only show a spinner if the tool has an `execute` method.\n                <SpinnerIcon />\n              ) : null}\n            </div>\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

@@ -6,7 +6,7 @@ import '../icons/index.js';
 import { useOverrides } from '../overrides.js';
 import { useAiToolInvocationContext } from '../primitives/AiMessage/contexts.js';
 import { Root as CollapsibleRoot, Trigger as CollapsibleTrigger, Content as CollapsibleContent } from '../primitives/Collapsible/index.js';
-import { classNames } from '../utils/class-names.js';
+import { cn } from '../utils/cn.js';
 import { useSemiControllableState } from '../utils/use-controllable-state.js';
 import { CodeBlock } from './internal/CodeBlock.js';
 import { Button } from './internal/Button.js';
@@ -18,14 +18,14 @@ import { SpinnerIcon } from '../icons/Spinner.js';
 
 function AiToolIcon({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", {
-    className: classNames("lb-ai-tool-icon", className),
+    className: cn("lb-ai-tool-icon", className),
     ...props
   });
 }
 function AiToolInspector({ className, ...props }) {
   const { args, partialArgs, result } = useAiToolInvocationContext();
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames("lb-ai-tool-inspector", className),
+    className: cn("lb-ai-tool-inspector", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx(CodeBlock, {
@@ -72,7 +72,7 @@ function AiToolConfirmation({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames("lb-ai-tool-confirmation", className),
+    className: cn("lb-ai-tool-confirmation", className),
     ...props,
     children: [
       children ? /* @__PURE__ */ jsx("div", {
@@ -111,6 +111,7 @@ const AiTool = Object.assign(
       children,
       title,
       icon,
+      collapsible,
       collapsed,
       onCollapsedChange,
       className,
@@ -124,6 +125,7 @@ const AiTool = Object.assign(
       } = useAiToolInvocationContext();
       const [semiControlledCollapsed, onSemiControlledCollapsed] = useSemiControllableState(collapsed ?? false, onCollapsedChange);
       const hasContent = Children.count(children) > 0;
+      const isCollapsible = hasContent ? collapsible ?? true : false;
       const resolvedTitle = useMemo(() => {
         return title ?? prettifyString(name);
       }, [title, name]);
@@ -135,11 +137,11 @@ const AiTool = Object.assign(
       );
       return /* @__PURE__ */ jsxs(CollapsibleRoot, {
         ref: forwardedRef,
-        className: classNames("lb-collapsible lb-ai-tool", className),
+        className: cn("lb-collapsible lb-ai-tool", className),
         ...props,
         open: hasContent ? !semiControlledCollapsed : false,
         onOpenChange: handleCollapsibleOpenChange,
-        disabled: !hasContent,
+        disabled: !isCollapsible,
         "data-result": result?.type,
         "data-stage": stage,
         children: [
@@ -154,7 +156,7 @@ const AiTool = Object.assign(
                 className: "lb-ai-tool-header-title",
                 children: resolvedTitle
               }),
-              hasContent ? /* @__PURE__ */ jsx("span", {
+              isCollapsible ? /* @__PURE__ */ jsx("span", {
                 className: "lb-collapsible-chevron lb-icon-container",
                 children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
               }) : null,