@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 2.25.0-aiprivatebeta9

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

@@ -9,11 +9,19 @@ 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 useVisible = require('../utils/use-visible.cjs');
 var AiChatAssistantMessage = require('./internal/AiChatAssistantMessage.cjs');
 var AiChatComposer = require('./internal/AiChatComposer.cjs');
 var AiChatUserMessage = require('./internal/AiChatUserMessage.cjs');
 
-const MIN_DISTANCE_TO_BOTTOM = 50;
+const MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR = 50;
+const defaultComponents = {
+  Empty: () => null,
+  Loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: "lb-loading lb-ai-chat-loading",
+    children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
+  })
+};
 const AiChat = react.forwardRef(
   ({
     chatId,
@@ -22,19 +30,26 @@ const AiChat = react.forwardRef(
     overrides: overrides$1,
     knowledge,
     tools = {},
+    layout = "inset",
     components,
     className,
     ...props
   }, forwardedRef) => {
     const { messages, isLoading, error } = react$1.useAiChatMessages(chatId);
     const $ = overrides.useOverrides(overrides$1);
+    const Empty = components?.Empty ?? defaultComponents.Empty;
+    const Loading = components?.Loading ?? defaultComponents.Loading;
     const containerRef = react.useRef(null);
-    const [distanceToBottom, setDistanceToBottom] = react.useState(
-      null
-    );
+    const containerBottomRef = react.useRef(null);
+    const isScrollAtBottom = useVisible.useVisible(containerBottomRef, {
+      enabled: !isLoading && !error,
+      root: containerRef,
+      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR
+    });
+    const isScrollIndicatorVisible = isLoading || error ? false : !isScrollAtBottom;
     const client = react$1.useClient();
     const ai = client[core.kInternal].ai;
-    const [lastSendMessageId, setLastSendMessageId] = react.useState(null);
+    const [lastSentMessageId, setLastSentMessageId] = react.useState(null);
     react.useImperativeHandle(
       forwardedRef,
       () => containerRef.current,
@@ -50,74 +65,27 @@ const AiChat = react.forwardRef(
         );
       };
     }, [ai, chatId, tools]);
-    react.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);
-      };
-    }, []);
-    react.useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      setDistanceToBottom(
-        container.scrollHeight - container.clientHeight - container.scrollTop
-      );
-    }, [messages]);
-    react.useEffect(() => {
-      const container = containerRef.current;
-      if (container === null)
-        return;
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: "smooth"
-      });
-    }, [lastSendMessageId]);
-    react.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 = react.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__ */ jsxRuntime.jsxs("div", {
       ref: containerRef,
       ...props,
-      className: classNames.classNames("lb-root lb-ai-chat", className),
+      className: classNames.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__ */ jsxRuntime.jsx(react$1.RegisterAiKnowledge, {
           description: source.description,
@@ -125,20 +93,35 @@ const AiChat = react.forwardRef(
         }, index)) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", {
           className: "lb-ai-chat-content",
-          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: "lb-loading lb-ai-chat-loading",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
-          }) : error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
             className: "lb-error lb-ai-chat-error",
             children: $.AI_CHAT_MESSAGES_ERROR(error)
-          }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: "lb-ai-chat-messages",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Messages, {
-              messages,
-              overrides: $,
-              components,
-              onDistanceToBottomChange: scrollToBottomCallbackRef.current
-            })
+          }) : messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AutoScrollHandler, {
+                lastSentMessageId,
+                scrollToBottom
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-ai-chat-messages",
+                children: messages.map((message) => {
+                  if (message.role === "user") {
+                    return /* @__PURE__ */ jsxRuntime.jsx(AiChatUserMessage.AiChatUserMessage, {
+                      message,
+                      overrides: overrides$1
+                    }, message.id);
+                  } else if (message.role === "assistant") {
+                    return /* @__PURE__ */ jsxRuntime.jsx(AiChatAssistantMessage.AiChatAssistantMessage, {
+                      message,
+                      overrides: overrides$1,
+                      components
+                    }, message.id);
+                  } else {
+                    return null;
+                  }
+                })
+              })
+            ]
           })
         }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -147,22 +130,14 @@ const AiChat = react.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx("div", {
               className: "lb-ai-chat-footer-actions",
               children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", {
                     className: "lb-icon-container",
                     children: /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDownIcon, {})
@@ -175,39 +150,32 @@ const AiChat = react.forwardRef(
               copilotId,
               overrides: $,
               autoFocus,
-              onUserMessageCreate: ({ id }) => setLastSendMessageId(id)
+              onUserMessageCreate: ({ id }) => setLastSentMessageId(id),
+              className: layout === "inset" ? "lb-elevation lb-elevation-moderate" : void 0
             }, chatId)
           ]
+        }),
+        /* @__PURE__ */ jsxRuntime.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
 }) {
   _private.useLayoutEffect(() => {
-    onDistanceToBottomChange();
-  }, [onDistanceToBottomChange]);
-  return messages.map((message) => {
-    if (message.role === "user") {
-      return /* @__PURE__ */ jsxRuntime.jsx(AiChatUserMessage.AiChatUserMessage, {
-        message,
-        overrides
-      }, message.id);
-    } else if (message.role === "assistant") {
-      return /* @__PURE__ */ jsxRuntime.jsx(AiChatAssistantMessage.AiChatAssistantMessage, {
-        message,
-        overrides,
-        components
-      }, message.id);
-    } else {
-      return null;
-    }
-  });
+    scrollToBottom("instant");
+  }, [scrollToBottom]);
+  react.useEffect(() => {
+    scrollToBottom("smooth");
+  }, [lastSentMessageId, scrollToBottom]);
+  return null;
 }
 
 exports.AiChat = AiChat;

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 { 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  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\n// No props for now\ntype AiChatComponentsEmptyProps = Record<string, never>;\n\n// No props for now\ntype AiChatComponentsLoadingProps = Record<string, never>;\n\n// TODO: Add Markdown components\ntype AiChatComponents = {\n  Empty: ComponentType<AiChatComponentsEmptyProps>;\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 isScrollAtBottom = useVisible(containerBottomRef, {\n      enabled: !isLoading && !error,\n      root: containerRef,\n      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR,\n    });\n    const isScrollIndicatorVisible =\n      isLoading || error ? false : !isScrollAtBottom;\n\n    const client = useClient();\n    const ai = client[kInternal].ai;\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    // 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    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        <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 />\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                disabled={!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={$}\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","useClient","kInternal","useState","useImperativeHandle","useEffect","jsxs","classNames","RegisterAiKnowledge","Fragment","AiChatUserMessage","AiChatAssistantMessage","ArrowDownIcon","AiChatComposer","useLayoutEffect"],"mappings":"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"}

package/dist/components/AiChat.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { kInternal } from '@liveblocks/core';
 import { useAiChatMessages, useClient, RegisterAiKnowledge } from '@liveblocks/react';
 import { useLayoutEffect } from '@liveblocks/react/_private';
@@ -7,11 +7,19 @@ 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,19 +28,26 @@ 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 containerBottomRef = useRef(null);
+    const isScrollAtBottom = useVisible(containerBottomRef, {
+      enabled: !isLoading && !error,
+      root: containerRef,
+      rootMargin: MIN_DISTANCE_BOTTOM_SCROLL_INDICATOR
+    });
+    const isScrollIndicatorVisible = isLoading || error ? false : !isScrollAtBottom;
     const client = useClient();
     const ai = client[kInternal].ai;
-    const [lastSendMessageId, setLastSendMessageId] = useState(null);
+    const [lastSentMessageId, setLastSentMessageId] = useState(null);
     useImperativeHandle(
       forwardedRef,
       () => containerRef.current,
@@ -48,74 +63,27 @@ const AiChat = forwardRef(
         );
       };
     }, [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,
@@ -123,20 +91,35 @@ const AiChat = forwardRef(
         }, index)) : null,
         /* @__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, {}) : /* @__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 +128,14 @@ 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, {})
@@ -173,39 +148,32 @@ const AiChat = forwardRef(
               copilotId,
               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 };