@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/dist/components/AiChat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AiChat.cjs","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiToolDefinition,\n  CopilotId,\n  MessageId,\n  UiChatMessage,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  useAiChatMessages,\n  useClient,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\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 { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\n/**\n * The number of pixels from the bottom of the messages list to trigger the scroll to bottom.\n */\nconst MIN_DISTANCE_TO_BOTTOM = 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, AiToolDefinition>;\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>; // TODO: Add more slots than the global ones over time (Markdown tags, the empty state, etc)\n}\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [distanceToBottom, setDistanceToBottom] = useState<number | null>(\n      null\n    );\n    const client = useClient();\n    const ai = client[kInternal].ai;\n\n    const [lastSendMessageId, setLastSendMessageId] =\n      useState<MessageId | null>(null);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    // Register the provided tools to the chat on mount and unregister them on unmount\n    useEffect(() => {\n      Object.entries(tools).map(([key, value]) =>\n        ai.registerChatTool(chatId, key, value)\n      );\n      return () => {\n        Object.entries(tools).map(([key]) =>\n          ai.unregisterChatTool(chatId, key)\n        );\n      };\n    }, [ai, chatId, tools]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n      function handleScrollChange() {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      }\n      container.addEventListener(\"scroll\", handleScrollChange);\n      return () => {\n        container.removeEventListener(\"scroll\", handleScrollChange);\n      };\n    }, []);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      setDistanceToBottom(\n        container.scrollHeight - container.clientHeight - container.scrollTop\n      );\n    }, [messages]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      container.scrollTo({\n        top: container.scrollHeight,\n        behavior: \"smooth\",\n      });\n    }, [lastSendMessageId]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      const observer = new ResizeObserver(() => {\n        const container = containerRef.current;\n        if (container === null) return;\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      });\n      observer.observe(container);\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const scrollToBottomCallbackRef = useRef<() => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function () {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior: \"instant\",\n        });\n      };\n    }\n    const isScrollIndicatorVisible =\n      distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={classNames(\"lb-root lb-ai-chat\", className)}\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        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <div className=\"lb-loading lb-ai-chat-loading\">\n              <SpinnerIcon />\n            </div>\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : (\n            <div className=\"lb-ai-chat-messages\">\n              <Messages\n                messages={messages}\n                overrides={$}\n                components={components}\n                onDistanceToBottomChange={scrollToBottomCallbackRef.current}\n              />\n            </div>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-elevation 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                disabled={!isScrollIndicatorVisible}\n                onClick={() => {\n                  const container = containerRef.current;\n                  if (container === null) return;\n\n                  container.scrollTo({\n                    top: container.scrollHeight,\n                    behavior: \"smooth\",\n                  });\n                }}\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={$}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSendMessageId(id)}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction Messages({\n  messages,\n  overrides,\n  components,\n  onDistanceToBottomChange,\n}: {\n  messages: readonly UiChatMessage[];\n  overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;\n  components?: Partial<GlobalComponents>;\n  onDistanceToBottomChange: () => void;\n}) {\n  useLayoutEffect(() => {\n    onDistanceToBottomChange();\n  }, [onDistanceToBottomChange]);\n\n  return 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}\n"],"names":["forwardRef","overrides","useAiChatMessages","useOverrides","useRef","useState","useClient","kInternal","useImperativeHandle","useEffect","container","jsxs","classNames","jsx","RegisterAiKnowledge","SpinnerIcon","ArrowDownIcon","AiChatComposer","useLayoutEffect","AiChatUserMessage","AiChatAssistantMessage"],"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 { 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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"}

package/dist/components/AiChat.js

@@ -1,17 +1,24 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { kInternal } from '@liveblocks/core';
-import { useAiChatMessages, useClient, RegisterAiKnowledge } from '@liveblocks/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useAiChatMessages, RegisterAiKnowledge, RegisterAiTool } from '@liveblocks/react';
 import { useLayoutEffect } from '@liveblocks/react/_private';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react';
 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 { useVisible } from '../utils/use-visible.js';
 import { AiChatAssistantMessage } from './internal/AiChatAssistantMessage.js';
 import { AiChatComposer } from './internal/AiChatComposer.js';
 import { AiChatUserMessage } from './internal/AiChatUserMessage.js';
 
-const MIN_DISTANCE_TO_BOTTOM = 50;
+const MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;
+const defaultComponents = {
+  Empty: () => null,
+  Loading: () => /* @__PURE__ */ jsx("div", {
+    className: "lb-loading lb-ai-chat-loading",
+    children: /* @__PURE__ */ jsx(SpinnerIcon, {})
+  })
+};
 const AiChat = forwardRef(
   ({
     chatId,
@@ -20,123 +27,96 @@ const AiChat = forwardRef(
     overrides,
     knowledge,
     tools = {},
+    layout = "inset",
     components,
     className,
     ...props
   }, forwardedRef) => {
     const { messages, isLoading, error } = useAiChatMessages(chatId);
     const $ = useOverrides(overrides);
+    const Empty = components?.Empty ?? defaultComponents.Empty;
+    const Loading = components?.Loading ?? defaultComponents.Loading;
     const containerRef = useRef(null);
-    const [distanceToBottom, setDistanceToBottom] = useState(
-      null
-    );
-    const client = useClient();
-    const ai = client[kInternal].ai;
-    const [lastSendMessageId, setLastSendMessageId] = useState(null);
+    const containerBottomRef = useRef(null);
+    const isScrollIndicatorEnabled = !isLoading && !error;
+    const isScrollAtBottom = useVisible(containerBottomRef, {
+      enabled: isScrollIndicatorEnabled,
+      root: containerRef,
+      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,
+      initialValue: null
+    });
+    const isScrollIndicatorVisible = isScrollIndicatorEnabled && isScrollAtBottom !== null ? !isScrollAtBottom : false;
+    const [lastSentMessageId, setLastSentMessageId] = useState(null);
     useImperativeHandle(
       forwardedRef,
       () => containerRef.current,
       []
     );
-    useEffect(() => {
-      Object.entries(tools).map(
-        ([key, value]) => ai.registerChatTool(chatId, key, value)
-      );
-      return () => {
-        Object.entries(tools).map(
-          ([key]) => ai.unregisterChatTool(chatId, key)
-        );
-      };
-    }, [ai, chatId, tools]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      function handleScrollChange() {
-        const container2 = containerRef.current;
-        if (container2 === null)
-          return;
-        setDistanceToBottom(
-          container2.scrollHeight - container2.clientHeight - container2.scrollTop
-        );
-      }
-      container.addEventListener("scroll", handleScrollChange);
-      return () => {
-        container.removeEventListener("scroll", handleScrollChange);
-      };
-    }, []);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      setDistanceToBottom(
-        container.scrollHeight - container.clientHeight - container.scrollTop
-      );
-    }, [messages]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: "smooth"
-      });
-    }, [lastSendMessageId]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      const observer = new ResizeObserver(() => {
-        const container2 = containerRef.current;
-        if (container2 === null)
-          return;
-        setDistanceToBottom(
-          container2.scrollHeight - container2.clientHeight - container2.scrollTop
-        );
-      });
-      observer.observe(container);
-      return () => {
-        observer.disconnect();
-      };
-    }, []);
     const scrollToBottomCallbackRef = useRef(void 0);
     if (scrollToBottomCallbackRef.current === void 0) {
-      scrollToBottomCallbackRef.current = function() {
+      scrollToBottomCallbackRef.current = function(behavior) {
         const container = containerRef.current;
         if (container === null)
           return;
         container.scrollTo({
           top: container.scrollHeight,
-          behavior: "instant"
+          behavior
         });
       };
     }
-    const isScrollIndicatorVisible = distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;
+    const scrollToBottom = scrollToBottomCallbackRef.current;
     return /* @__PURE__ */ jsxs("div", {
       ref: containerRef,
       ...props,
-      className: classNames("lb-root lb-ai-chat", className),
+      className: classNames(
+        "lb-root lb-ai-chat",
+        layout === "compact" ? "lb-ai-chat:layout-compact" : "lb-ai-chat:layout-inset",
+        className
+      ),
       children: [
         knowledge ? knowledge.map((source, index) => /* @__PURE__ */ jsx(RegisterAiKnowledge, {
           description: source.description,
           value: source.value
         }, index)) : null,
+        Object.entries(tools).map(([name, tool]) => /* @__PURE__ */ jsx(RegisterAiTool, {
+          chatId,
+          name,
+          tool
+        }, name)),
         /* @__PURE__ */ jsx("div", {
           className: "lb-ai-chat-content",
-          children: isLoading ? /* @__PURE__ */ jsx("div", {
-            className: "lb-loading lb-ai-chat-loading",
-            children: /* @__PURE__ */ jsx(SpinnerIcon, {})
-          }) : error !== void 0 ? /* @__PURE__ */ jsx("div", {
+          children: isLoading ? /* @__PURE__ */ jsx(Loading, {}) : error !== void 0 ? /* @__PURE__ */ jsx("div", {
             className: "lb-error lb-ai-chat-error",
             children: $.AI_CHAT_MESSAGES_ERROR(error)
-          }) : /* @__PURE__ */ jsx("div", {
-            className: "lb-ai-chat-messages",
-            children: /* @__PURE__ */ jsx(Messages, {
-              messages,
-              overrides: $,
-              components,
-              onDistanceToBottomChange: scrollToBottomCallbackRef.current
-            })
+          }) : messages.length === 0 ? /* @__PURE__ */ jsx(Empty, {
+            chatId,
+            copilotId
+          }) : /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx(AutoScrollHandler, {
+                lastSentMessageId,
+                scrollToBottom
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "lb-ai-chat-messages",
+                children: messages.map((message) => {
+                  if (message.role === "user") {
+                    return /* @__PURE__ */ jsx(AiChatUserMessage, {
+                      message,
+                      overrides
+                    }, message.id);
+                  } else if (message.role === "assistant") {
+                    return /* @__PURE__ */ jsx(AiChatAssistantMessage, {
+                      message,
+                      overrides,
+                      components
+                    }, message.id);
+                  } else {
+                    return null;
+                  }
+                })
+              })
+            ]
           })
         }),
         /* @__PURE__ */ jsxs("div", {
@@ -145,22 +125,13 @@ const AiChat = forwardRef(
             /* @__PURE__ */ jsx("div", {
               className: "lb-ai-chat-footer-actions",
               children: /* @__PURE__ */ jsx("div", {
-                className: "lb-elevation lb-ai-chat-scroll-indicator",
+                className: "lb-root lb-elevation lb-elevation-moderate lb-ai-chat-scroll-indicator",
                 "data-visible": isScrollIndicatorVisible ? "" : void 0,
                 children: /* @__PURE__ */ jsx("button", {
                   className: "lb-ai-chat-scroll-indicator-button",
                   tabIndex: isScrollIndicatorVisible ? 0 : -1,
                   "aria-hidden": !isScrollIndicatorVisible,
-                  disabled: !isScrollIndicatorVisible,
-                  onClick: () => {
-                    const container = containerRef.current;
-                    if (container === null)
-                      return;
-                    container.scrollTo({
-                      top: container.scrollHeight,
-                      behavior: "smooth"
-                    });
-                  },
+                  onClick: () => scrollToBottom("smooth"),
                   children: /* @__PURE__ */ jsx("span", {
                     className: "lb-icon-container",
                     children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
@@ -171,41 +142,34 @@ const AiChat = forwardRef(
             /* @__PURE__ */ jsx(AiChatComposer, {
               chatId,
               copilotId,
-              overrides: $,
+              overrides,
               autoFocus,
-              onUserMessageCreate: ({ id }) => setLastSendMessageId(id)
+              onUserMessageCreate: ({ id }) => setLastSentMessageId(id),
+              className: layout === "inset" ? "lb-elevation lb-elevation-moderate" : void 0
             }, chatId)
           ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          ref: containerBottomRef,
+          style: { position: "sticky", height: 0 },
+          "aria-hidden": true,
+          "data-scroll-at-bottom": isScrollAtBottom ? "" : void 0
         })
       ]
     });
   }
 );
-function Messages({
-  messages,
-  overrides,
-  components,
-  onDistanceToBottomChange
+function AutoScrollHandler({
+  lastSentMessageId,
+  scrollToBottom
 }) {
   useLayoutEffect(() => {
-    onDistanceToBottomChange();
-  }, [onDistanceToBottomChange]);
-  return messages.map((message) => {
-    if (message.role === "user") {
-      return /* @__PURE__ */ jsx(AiChatUserMessage, {
-        message,
-        overrides
-      }, message.id);
-    } else if (message.role === "assistant") {
-      return /* @__PURE__ */ jsx(AiChatAssistantMessage, {
-        message,
-        overrides,
-        components
-      }, message.id);
-    } else {
-      return null;
-    }
-  });
+    scrollToBottom("instant");
+  }, [scrollToBottom]);
+  useEffect(() => {
+    scrollToBottom("smooth");
+  }, [lastSentMessageId, scrollToBottom]);
+  return null;
 }
 
 export { AiChat };

package/dist/components/AiChat.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiChat.js","sources":["../../src/components/AiChat.tsx"],"sourcesContent":["import type {\n  AiKnowledgeSource,\n  AiToolDefinition,\n  CopilotId,\n  MessageId,\n  UiChatMessage,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport {\n  RegisterAiKnowledge,\n  useAiChatMessages,\n  useClient,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  type ComponentProps,\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 { AiChatAssistantMessage } from \"./internal/AiChatAssistantMessage\";\nimport { AiChatComposer } from \"./internal/AiChatComposer\";\nimport { AiChatUserMessage } from \"./internal/AiChatUserMessage\";\n\n/**\n * The number of pixels from the bottom of the messages list to trigger the scroll to bottom.\n */\nconst MIN_DISTANCE_TO_BOTTOM = 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, AiToolDefinition>;\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>; // TODO: Add more slots than the global ones over time (Markdown tags, the empty state, etc)\n}\n\nexport const AiChat = forwardRef<HTMLDivElement, AiChatProps>(\n  (\n    {\n      chatId,\n      copilotId,\n      autoFocus,\n      overrides,\n      knowledge,\n      tools = {},\n      components,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const { messages, isLoading, error } = useAiChatMessages(chatId);\n    const $ = useOverrides(overrides);\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [distanceToBottom, setDistanceToBottom] = useState<number | null>(\n      null\n    );\n    const client = useClient();\n    const ai = client[kInternal].ai;\n\n    const [lastSendMessageId, setLastSendMessageId] =\n      useState<MessageId | null>(null);\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      forwardedRef,\n      () => containerRef.current,\n      []\n    );\n\n    // Register the provided tools to the chat on mount and unregister them on unmount\n    useEffect(() => {\n      Object.entries(tools).map(([key, value]) =>\n        ai.registerChatTool(chatId, key, value)\n      );\n      return () => {\n        Object.entries(tools).map(([key]) =>\n          ai.unregisterChatTool(chatId, key)\n        );\n      };\n    }, [ai, chatId, tools]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n      function handleScrollChange() {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      }\n      container.addEventListener(\"scroll\", handleScrollChange);\n      return () => {\n        container.removeEventListener(\"scroll\", handleScrollChange);\n      };\n    }, []);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      setDistanceToBottom(\n        container.scrollHeight - container.clientHeight - container.scrollTop\n      );\n    }, [messages]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      container.scrollTo({\n        top: container.scrollHeight,\n        behavior: \"smooth\",\n      });\n    }, [lastSendMessageId]);\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (container === null) return;\n\n      const observer = new ResizeObserver(() => {\n        const container = containerRef.current;\n        if (container === null) return;\n        setDistanceToBottom(\n          container.scrollHeight - container.clientHeight - container.scrollTop\n        );\n      });\n      observer.observe(container);\n      return () => {\n        observer.disconnect();\n      };\n    }, []);\n\n    const scrollToBottomCallbackRef = useRef<() => void>(undefined);\n    if (scrollToBottomCallbackRef.current === undefined) {\n      scrollToBottomCallbackRef.current = function () {\n        const container = containerRef.current;\n        if (container === null) return;\n\n        container.scrollTo({\n          top: container.scrollHeight,\n          behavior: \"instant\",\n        });\n      };\n    }\n    const isScrollIndicatorVisible =\n      distanceToBottom !== null && distanceToBottom > MIN_DISTANCE_TO_BOTTOM;\n\n    return (\n      <div\n        ref={containerRef}\n        {...props}\n        className={classNames(\"lb-root lb-ai-chat\", className)}\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        <div className=\"lb-ai-chat-content\">\n          {isLoading ? (\n            <div className=\"lb-loading lb-ai-chat-loading\">\n              <SpinnerIcon />\n            </div>\n          ) : error !== undefined ? (\n            <div className=\"lb-error lb-ai-chat-error\">\n              {$.AI_CHAT_MESSAGES_ERROR(error)}\n            </div>\n          ) : (\n            <div className=\"lb-ai-chat-messages\">\n              <Messages\n                messages={messages}\n                overrides={$}\n                components={components}\n                onDistanceToBottomChange={scrollToBottomCallbackRef.current}\n              />\n            </div>\n          )}\n        </div>\n\n        <div className=\"lb-ai-chat-footer\">\n          <div className=\"lb-ai-chat-footer-actions\">\n            <div\n              className=\"lb-elevation 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                disabled={!isScrollIndicatorVisible}\n                onClick={() => {\n                  const container = containerRef.current;\n                  if (container === null) return;\n\n                  container.scrollTo({\n                    top: container.scrollHeight,\n                    behavior: \"smooth\",\n                  });\n                }}\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={$}\n            autoFocus={autoFocus}\n            onUserMessageCreate={({ id }) => setLastSendMessageId(id)}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction Messages({\n  messages,\n  overrides,\n  components,\n  onDistanceToBottomChange,\n}: {\n  messages: readonly UiChatMessage[];\n  overrides?: Partial<GlobalOverrides & AiChatMessageOverrides>;\n  components?: Partial<GlobalComponents>;\n  onDistanceToBottomChange: () => void;\n}) {\n  useLayoutEffect(() => {\n    onDistanceToBottomChange();\n  }, [onDistanceToBottomChange]);\n\n  return 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}\n"],"names":["container"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,sBAAyB,GAAA,EAAA,CAAA;AAuCxB,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAQ,EAAC;AAAA,IACT,UAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,KAAM,EAAA,GAAI,kBAAkB,MAAM,CAAA,CAAA;AAC/D,IAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAEhC,IAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA,CAAA;AACvD,IAAM,MAAA,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAA,QAAA;AAAA,MAC9C,IAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,IAAM,MAAA,EAAA,GAAK,OAAO,SAAW,CAAA,CAAA,EAAA,CAAA;AAE7B,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAC5C,SAA2B,IAAI,CAAA,CAAA;AAEjC,IAAA,mBAAA;AAAA,MACE,YAAA;AAAA,MACA,MAAM,YAAa,CAAA,OAAA;AAAA,MACnB,EAAC;AAAA,KACH,CAAA;AAGA,IAAA,SAAA,CAAU,MAAM;AACd,MAAO,MAAA,CAAA,OAAA,CAAQ,KAAK,CAAE,CAAA,GAAA;AAAA,QAAI,CAAC,CAAC,GAAK,EAAA,KAAK,MACpC,EAAG,CAAA,gBAAA,CAAiB,MAAQ,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,OACxC,CAAA;AACA,MAAA,OAAO,MAAM;AACX,QAAO,MAAA,CAAA,OAAA,CAAQ,KAAK,CAAE,CAAA,GAAA;AAAA,UAAI,CAAC,CAAC,GAAG,MAC7B,EAAG,CAAA,kBAAA,CAAmB,QAAQ,GAAG,CAAA;AAAA,SACnC,CAAA;AAAA,OACF,CAAA;AAAA,KACC,EAAA,CAAC,EAAI,EAAA,MAAA,EAAQ,KAAK,CAAC,CAAA,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,MAAA,IAAI,SAAc,KAAA,IAAA;AAAM,QAAA,OAAA;AACxB,MAAA,SAAS,kBAAqB,GAAA;AAC5B,QAAA,MAAMA,aAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,QAAA,IAAIA,UAAc,KAAA,IAAA;AAAM,UAAA,OAAA;AAExB,QAAA,mBAAA;AAAA,UACEA,UAAU,CAAA,YAAA,GAAeA,UAAU,CAAA,YAAA,GAAeA,UAAU,CAAA,SAAA;AAAA,SAC9D,CAAA;AAAA,OACF;AACA,MAAU,SAAA,CAAA,gBAAA,CAAiB,UAAU,kBAAkB,CAAA,CAAA;AACvD,MAAA,OAAO,MAAM;AACX,QAAU,SAAA,CAAA,mBAAA,CAAoB,UAAU,kBAAkB,CAAA,CAAA;AAAA,OAC5D,CAAA;AAAA,KACF,EAAG,EAAE,CAAA,CAAA;AAEL,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,MAAA,IAAI,SAAc,KAAA,IAAA;AAAM,QAAA,OAAA;AAExB,MAAA,mBAAA;AAAA,QACE,SAAU,CAAA,YAAA,GAAe,SAAU,CAAA,YAAA,GAAe,SAAU,CAAA,SAAA;AAAA,OAC9D,CAAA;AAAA,KACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,MAAA,IAAI,SAAc,KAAA,IAAA;AAAM,QAAA,OAAA;AAExB,MAAA,SAAA,CAAU,QAAS,CAAA;AAAA,QACjB,KAAK,SAAU,CAAA,YAAA;AAAA,QACf,QAAU,EAAA,QAAA;AAAA,OACX,CAAA,CAAA;AAAA,KACH,EAAG,CAAC,iBAAiB,CAAC,CAAA,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,MAAA,IAAI,SAAc,KAAA,IAAA;AAAM,QAAA,OAAA;AAExB,MAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,MAAM;AACxC,QAAA,MAAMA,aAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,QAAA,IAAIA,UAAc,KAAA,IAAA;AAAM,UAAA,OAAA;AACxB,QAAA,mBAAA;AAAA,UACEA,UAAU,CAAA,YAAA,GAAeA,UAAU,CAAA,YAAA,GAAeA,UAAU,CAAA,SAAA;AAAA,SAC9D,CAAA;AAAA,OACD,CAAA,CAAA;AACD,MAAA,QAAA,CAAS,QAAQ,SAAS,CAAA,CAAA;AAC1B,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB,CAAA;AAAA,KACF,EAAG,EAAE,CAAA,CAAA;AAEL,IAAM,MAAA,yBAAA,GAA4B,OAAmB,KAAS,CAAA,CAAA,CAAA;AAC9D,IAAI,IAAA,yBAAA,CAA0B,YAAY,KAAW,CAAA,EAAA;AACnD,MAAA,yBAAA,CAA0B,UAAU,WAAY;AAC9C,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,QAAU,EAAA,SAAA;AAAA,SACX,CAAA,CAAA;AAAA,OACH,CAAA;AAAA,KACF;AACA,IAAM,MAAA,wBAAA,GACJ,gBAAqB,KAAA,IAAA,IAAQ,gBAAmB,GAAA,sBAAA,CAAA;AAElD,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,UAAW,CAAA,oBAAA,EAAsB,SAAS,CAAA;AAAA,MAEpD,QAAA,EAAA;AAAA,QAAA,SAAA,GACG,SAAU,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,0BACpB,GAAA,CAAA,mBAAA,EAAA;AAAA,UAEC,aAAa,MAAO,CAAA,WAAA;AAAA,UACpB,OAAO,MAAO,CAAA,KAAA;AAAA,SAFT,EAAA,KAIP,CACD,CACD,GAAA,IAAA;AAAA,wBACH,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,oBAAA;AAAA,UACZ,sCACE,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,+BAAA;AAAA,YACb,8BAAC,WAAY,EAAA,EAAA,CAAA;AAAA,WACf,CAAA,GACE,KAAU,KAAA,KAAA,CAAA,mBACX,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,2BAAA;AAAA,YACZ,QAAA,EAAA,CAAA,CAAE,uBAAuB,KAAK,CAAA;AAAA,WACjC,oBAEC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,qBAAA;AAAA,YACb,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,cACC,QAAA;AAAA,cACA,SAAW,EAAA,CAAA;AAAA,cACX,UAAA;AAAA,cACA,0BAA0B,yBAA0B,CAAA,OAAA;AAAA,aACtD,CAAA;AAAA,WACF,CAAA;AAAA,SAEJ,CAAA;AAAA,wBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,mBAAA;AAAA,UACb,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAU,EAAA,2BAAA;AAAA,cACb,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,gBACC,SAAU,EAAA,0CAAA;AAAA,gBACV,cAAA,EAAc,2BAA2B,EAAK,GAAA,KAAA,CAAA;AAAA,gBAE9C,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,kBACC,SAAU,EAAA,oCAAA;AAAA,kBACV,QAAA,EAAU,2BAA2B,CAAI,GAAA,CAAA,CAAA;AAAA,kBACzC,eAAa,CAAC,wBAAA;AAAA,kBACd,UAAU,CAAC,wBAAA;AAAA,kBACX,SAAS,MAAM;AACb,oBAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,oBAAA,IAAI,SAAc,KAAA,IAAA;AAAM,sBAAA,OAAA;AAExB,oBAAA,SAAA,CAAU,QAAS,CAAA;AAAA,sBACjB,KAAK,SAAU,CAAA,YAAA;AAAA,sBACf,QAAU,EAAA,QAAA;AAAA,qBACX,CAAA,CAAA;AAAA,mBACH;AAAA,kBAEA,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,oBAAK,SAAU,EAAA,mBAAA;AAAA,oBACd,8BAAC,aAAc,EAAA,EAAA,CAAA;AAAA,mBACjB,CAAA;AAAA,iBACF,CAAA;AAAA,eACF,CAAA;AAAA,aACF,CAAA;AAAA,4BACC,GAAA,CAAA,cAAA,EAAA;AAAA,cAEC,MAAA;AAAA,cACA,SAAA;AAAA,cACA,SAAW,EAAA,CAAA;AAAA,cACX,SAAA;AAAA,cACA,qBAAqB,CAAC,EAAE,EAAG,EAAA,KAAM,qBAAqB,EAAE,CAAA;AAAA,aAAA,EALnD,MAMP,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,QAAS,CAAA;AAAA,EAChB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,wBAAA;AACF,CAKG,EAAA;AACD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAyB,wBAAA,EAAA,CAAA;AAAA,GAC3B,EAAG,CAAC,wBAAwB,CAAC,CAAA,CAAA;AAE7B,EAAO,OAAA,QAAA,CAAS,GAAI,CAAA,CAAC,OAAY,KAAA;AAC/B,IAAI,IAAA,OAAA,CAAQ,SAAS,MAAQ,EAAA;AAC3B,MAAA,uBACG,GAAA,CAAA,iBAAA,EAAA;AAAA,QAEC,OAAA;AAAA,QACA,SAAA;AAAA,OAAA,EAFK,QAAQ,EAGf,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,WAAa,EAAA;AACvC,MAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,QAEC,OAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,OAAA,EAHK,QAAQ,EAIf,CAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACD,CAAA,CAAA;AACH;;;;"}
+{"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":";;;;;;;;;;;;;AAmEA,MAAM,oCAAuC,GAAA,EAAA,CAAA;AA2C7C,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAO,MAAM,IAAA;AAAA,EACb,OAAA,EAAS,sBACN,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,+BAAA;AAAA,IACb,8BAAC,WAAY,EAAA,EAAA,CAAA;AAAA,GACf,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CACE;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;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,GAAI,kBAAkB,MAAM,CAAA,CAAA;AAC/D,IAAM,MAAA,CAAA,GAAI,aAAa,SAAS,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,GAAe,OAA8B,IAAI,CAAA,CAAA;AACvD,IAAM,MAAA,kBAAA,GAAqB,OAA8B,IAAI,CAAA,CAAA;AAC7D,IAAM,MAAA,wBAAA,GAA2B,CAAC,SAAA,IAAa,CAAC,KAAA,CAAA;AAChD,IAAM,MAAA,gBAAA,GAAmB,WAAW,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,GAC5C,SAA2B,IAAI,CAAA,CAAA;AAEjC,IAAA,mBAAA;AAAA,MACE,YAAA;AAAA,MACA,MAAM,YAAa,CAAA,OAAA;AAAA,MACnB,EAAC;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,yBAAA,GACJ,OAAiD,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,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,SAAW,EAAA,UAAA;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,0BACpB,GAAA,CAAA,mBAAA,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,qBACpC,GAAA,CAAA,cAAA,EAAA;AAAA,UAA0B,MAAA;AAAA,UAAgB,IAAA;AAAA,UAAY,IAAA;AAAA,SAAA,EAAlC,IAA8C,CACpE,CAAA;AAAA,wBAEA,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,oBAAA;AAAA,UACZ,sCACE,GAAA,CAAA,OAAA,EAAA,EAAQ,CACP,GAAA,KAAA,KAAU,yBACX,GAAA,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,mBACrB,GAAA,CAAA,KAAA,EAAA;AAAA,YAAM,MAAA;AAAA,YAAgB,SAAA;AAAA,WAAsB,CAE7C,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,YACE,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,iBAAA,EAAA;AAAA,gBACC,iBAAA;AAAA,gBACA,cAAA;AAAA,eACF,CAAA;AAAA,8BACC,GAAA,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,uBACG,GAAA,CAAA,iBAAA,EAAA;AAAA,sBAEC,OAAA;AAAA,sBACA,SAAA;AAAA,qBAAA,EAFK,QAAQ,EAGf,CAAA,CAAA;AAAA,mBAEJ,MAAA,IAAW,OAAQ,CAAA,IAAA,KAAS,WAAa,EAAA;AACvC,oBAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,sBAEC,OAAA;AAAA,sBACA,SAAA;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,wBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,mBAAA;AAAA,UACb,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAU,EAAA,2BAAA;AAAA,cACb,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,gBACC,SAAU,EAAA,wEAAA;AAAA,gBACV,cAAA,EAAc,2BAA2B,EAAK,GAAA,KAAA,CAAA;AAAA,gBAE9C,QAAC,kBAAA,GAAA,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,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,oBAAK,SAAU,EAAA,mBAAA;AAAA,oBACd,8BAAC,aAAc,EAAA,EAAA,CAAA;AAAA,mBACjB,CAAA;AAAA,iBACF,CAAA;AAAA,eACF,CAAA;AAAA,aACF,CAAA;AAAA,4BACC,GAAA,CAAA,cAAA,EAAA;AAAA,cAEC,MAAA;AAAA,cACA,SAAA;AAAA,cACA,SAAA;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,wBAQC,GAAA,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,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,cAAA,CAAe,SAAS,CAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAGnB,EAAA,SAAA,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/AiTool.cjs

@@ -0,0 +1,188 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@liveblocks/core');
+var react = require('react');
+require('../_private/index.cjs');
+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 useControllableState = require('../utils/use-controllable-state.cjs');
+var CodeBlock = require('./internal/CodeBlock.cjs');
+var Button = require('./internal/Button.cjs');
+var ChevronRight = require('../icons/ChevronRight.cjs');
+var CheckCircleFill = require('../icons/CheckCircleFill.cjs');
+var CrossCircleFill = require('../icons/CrossCircleFill.cjs');
+var MinusCircle = require('../icons/MinusCircle.cjs');
+var Spinner = require('../icons/Spinner.cjs');
+
+function AiToolIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: classNames.classNames("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),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
+        title: "Arguments",
+        code: JSON.stringify(args ?? partialArgs, null, 2)
+      }),
+      result !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, {
+        title: "Result",
+        code: JSON.stringify(result, null, 2)
+      }) : null
+    ]
+  });
+}
+function AiToolConfirmation({
+  children,
+  variant = "default",
+  confirm,
+  cancel,
+  overrides: overrides$1,
+  className,
+  ...props
+}) {
+  const { stage, args, respond, name, invocationId } = contexts.useAiToolInvocationContext();
+  const $ = overrides.useOverrides(overrides$1);
+  const enabled = stage === "executing";
+  const context = react.useMemo(() => ({ name, invocationId }), [name, invocationId]);
+  const onConfirmClick = react.useCallback(async () => {
+    if (enabled) {
+      const result = await confirm(args, context);
+      respond(result ?? void 0);
+    }
+  }, [enabled, args, confirm, respond, context]);
+  const onCancelClick = react.useCallback(async () => {
+    if (enabled) {
+      if (cancel === void 0) {
+        respond({ cancel: true });
+      } else {
+        const result = await cancel(args, context);
+        respond(result ?? void 0);
+      }
+    }
+  }, [enabled, args, cancel, respond, context]);
+  if (stage === "executed" && !children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classNames.classNames("lb-ai-tool-confirmation", className),
+    ...props,
+    children: [
+      children ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-ai-tool-confirmation-content",
+        children
+      }) : null,
+      stage !== "executed" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-ai-tool-confirmation-footer",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "lb-ai-tool-confirmation-actions",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+              disabled: !enabled,
+              onClick: onCancelClick,
+              variant: "secondary",
+              children: $.AI_TOOL_CONFIRMATION_CANCEL
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+              disabled: !enabled,
+              onClick: onConfirmClick,
+              variant: variant === "destructive" ? "destructive" : "primary",
+              children: $.AI_TOOL_CONFIRMATION_CONFIRM
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+function prettifyString(string) {
+  return string.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().toLowerCase().replace(/^\w/, (character) => character.toUpperCase());
+}
+const AiTool = Object.assign(
+  react.forwardRef(
+    ({
+      children,
+      title,
+      icon,
+      collapsed,
+      onCollapsedChange,
+      className,
+      ...props
+    }, forwardedRef) => {
+      const {
+        stage,
+        result,
+        name,
+        [core.kInternal]: { execute }
+      } = contexts.useAiToolInvocationContext();
+      const [semiControlledCollapsed, onSemiControlledCollapsed] = useControllableState.useSemiControllableState(collapsed ?? false, onCollapsedChange);
+      const hasContent = react.Children.count(children) > 0;
+      const resolvedTitle = react.useMemo(() => {
+        return title ?? prettifyString(name);
+      }, [title, name]);
+      const handleCollapsibleOpenChange = react.useCallback(
+        (open) => {
+          onSemiControlledCollapsed(!open);
+        },
+        [onSemiControlledCollapsed]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
+        ref: forwardedRef,
+        className: classNames.classNames("lb-collapsible lb-ai-tool", className),
+        ...props,
+        open: hasContent ? !semiControlledCollapsed : false,
+        onOpenChange: handleCollapsibleOpenChange,
+        disabled: !hasContent,
+        "data-result": result?.type,
+        "data-stage": stage,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(index.Trigger, {
+            className: "lb-collapsible-trigger lb-ai-tool-header",
+            children: [
+              icon ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-ai-tool-header-icon-container",
+                children: icon
+              }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                className: "lb-ai-tool-header-title",
+                children: resolvedTitle
+              }),
+              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+                className: "lb-collapsible-chevron lb-icon-container",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight.ChevronRightIcon, {})
+              }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-ai-tool-header-status",
+                children: stage === "executed" ? result.type === "success" ? /* @__PURE__ */ jsxRuntime.jsx(CheckCircleFill.CheckCircleFillIcon, {}) : result.type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(CrossCircleFill.CrossCircleFillIcon, {}) : result.type === "cancelled" ? /* @__PURE__ */ jsxRuntime.jsx(MinusCircle.MinusCircleIcon, {}) : null : execute !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : null
+              })
+            ]
+          }),
+          hasContent ? /* @__PURE__ */ jsxRuntime.jsx(index.Content, {
+            className: "lb-collapsible-content lb-ai-tool-content-container",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: "lb-ai-tool-content",
+              children
+            })
+          }) : null
+        ]
+      });
+    }
+  ),
+  {
+    Icon: AiToolIcon,
+    Inspector: AiToolInspector,
+    Confirmation: AiToolConfirmation
+  }
+);
+
+exports.AiTool = AiTool;
+//# sourceMappingURL=AiTool.cjs.map