@copilotkit/react-ui 1.4.0-pre-1-4-0.12 → 1.4.0-pre-1-4-0.13

package/dist/components/index.mjs

@@ -2,18 +2,18 @@ import "../chunk-JD7BAH7U.mjs";
 import "../chunk-MRFF7GSQ.mjs";
 import {
   CopilotSidebar
-} from "../chunk-TEZWY2BL.mjs";
+} from "../chunk-M2NVAJQA.mjs";
 import "../chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "../chunk-OJ5NVSTU.mjs";
-import "../chunk-QK6XA3PL.mjs";
+} from "../chunk-PY7YBFPA.mjs";
+import "../chunk-H5CXJBR5.mjs";
 import "../chunk-YAGE7RCE.mjs";
 import "../chunk-VEC45H6Q.mjs";
 import "../chunk-RQNJNK2W.mjs";
 import {
   CopilotChat
-} from "../chunk-C5KOJ3IH.mjs";
+} from "../chunk-ORHE7FYT.mjs";
 import "../chunk-V7W6IM2V.mjs";
 import "../chunk-OMTPWC7T.mjs";
 import "../chunk-ZABXREBH.mjs";
@@ -26,7 +26,7 @@ import "../chunk-OTPAZXVR.mjs";
 import "../chunk-4LUMV4YO.mjs";
 import "../chunk-YQFVRDNC.mjs";
 import "../chunk-YQ3D5IQV.mjs";
-import "../chunk-CPMIEVKK.mjs";
+import "../chunk-RKPANT3F.mjs";
 import "../chunk-3XAXY2Z3.mjs";
 import {
   useChatContext

package/dist/index.js

@@ -531,7 +531,7 @@ var Header = ({}) => {
 };
 
 // src/components/chat/Messages.tsx
-var import_react3 = __toESM(require("react"));
+var import_react3 = require("react");
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Messages = ({
@@ -561,18 +561,8 @@ var Messages = ({
       }
     }
   }
-  const messagesEndRef = import_react3.default.useRef(null);
-  const scrollToBottom = () => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: "auto"
-      });
-    }
-  };
-  (0, import_react3.useEffect)(() => {
-    scrollToBottom();
-  }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitMessages", children: [
+  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     messages.map((message, index) => {
       const isCurrentMessage = index === messages.length - 1;
       if (message.isTextMessage()) {
@@ -641,6 +631,65 @@ function makeInitialMessages(initial) {
     })
   );
 }
+function useScrollToBottom(messages) {
+  const messagesEndRef = (0, import_react3.useRef)(null);
+  const messagesContainerRef = (0, import_react3.useRef)(null);
+  const isProgrammaticScrollRef = (0, import_react3.useRef)(false);
+  const isUserScrollUpRef = (0, import_react3.useRef)(false);
+  const scrollToBottom = () => {
+    if (messagesEndRef.current) {
+      isProgrammaticScrollRef.current = true;
+      messagesEndRef.current.scrollIntoView({
+        behavior: "auto"
+      });
+    }
+  };
+  const handleScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    const container = messagesContainerRef.current;
+    if (!container) {
+      return;
+    }
+    const mutationObserver = new MutationObserver(() => {
+      if (!isUserScrollUpRef.current) {
+        scrollToBottom();
+      }
+    });
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    isUserScrollUpRef.current = false;
+    scrollToBottom();
+  }, [messages.filter((m) => m.isTextMessage() && m.role === import_runtime_client_gql.Role.User).length]);
+  return { messagesEndRef, messagesContainerRef };
+}
 
 // src/components/chat/Input.tsx
 var import_react6 = require("react");