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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # ui
 
+## 1.4.0-pre-1-4-0.13
+
+### Minor Changes
+
+- lgc & lgjs alpha
+
+### Patch Changes
+
+- Updated dependencies
+  - @copilotkit/runtime-client-gql@1.4.0-pre-1-4-0.13
+  - @copilotkit/react-core@1.4.0-pre-1-4-0.13
+  - @copilotkit/shared@1.4.0-pre-1-4-0.13
+
 ## 1.4.0-pre-1-4-0.12
 
 ### Minor Changes

package/dist/{chunk-QK6XA3PL.mjs → chunk-H5CXJBR5.mjs}

@@ -9,13 +9,13 @@ import {
 } from "./chunk-RQNJNK2W.mjs";
 import {
   CopilotChat
-} from "./chunk-C5KOJ3IH.mjs";
+} from "./chunk-ORHE7FYT.mjs";
 import {
   Input
 } from "./chunk-4LUMV4YO.mjs";
 import {
   Messages
-} from "./chunk-CPMIEVKK.mjs";
+} from "./chunk-RKPANT3F.mjs";
 import {
   ResponseButton
 } from "./chunk-3XAXY2Z3.mjs";
@@ -88,4 +88,4 @@ var CopilotModal = ({
 export {
   CopilotModal
 };
-//# sourceMappingURL=chunk-QK6XA3PL.mjs.map
+//# sourceMappingURL=chunk-H5CXJBR5.mjs.map

package/dist/{chunk-TEZWY2BL.mjs → chunk-M2NVAJQA.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-QK6XA3PL.mjs";
+} from "./chunk-H5CXJBR5.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-TEZWY2BL.mjs.map
+//# sourceMappingURL=chunk-M2NVAJQA.mjs.map

package/dist/{chunk-C5KOJ3IH.mjs → chunk-ORHE7FYT.mjs}

@@ -22,7 +22,7 @@ import {
 } from "./chunk-4LUMV4YO.mjs";
 import {
   Messages
-} from "./chunk-CPMIEVKK.mjs";
+} from "./chunk-RKPANT3F.mjs";
 import {
   ResponseButton
 } from "./chunk-3XAXY2Z3.mjs";
@@ -198,4 +198,4 @@ export {
   WrappedCopilotChat,
   useCopilotChatLogic
 };
-//# sourceMappingURL=chunk-C5KOJ3IH.mjs.map
+//# sourceMappingURL=chunk-ORHE7FYT.mjs.map

package/dist/{chunk-OJ5NVSTU.mjs → chunk-PY7YBFPA.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-QK6XA3PL.mjs";
+} from "./chunk-H5CXJBR5.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-OJ5NVSTU.mjs.map
+//# sourceMappingURL=chunk-PY7YBFPA.mjs.map

package/dist/{chunk-CPMIEVKK.mjs → chunk-RKPANT3F.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-CBBFRI3Q.mjs";
 
 // src/components/chat/Messages.tsx
-import React, { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import {
   ResultMessage,
   TextMessage,
@@ -37,18 +37,8 @@ var Messages = ({
       }
     }
   }
-  const messagesEndRef = React.useRef(null);
-  const scrollToBottom = () => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: "auto"
-      });
-    }
-  };
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "copilotKitMessages", children: [
+  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
+  return /* @__PURE__ */ jsxs("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     messages.map((message, index) => {
       const isCurrentMessage = index === messages.length - 1;
       if (message.isTextMessage()) {
@@ -117,8 +107,68 @@ function makeInitialMessages(initial) {
     })
   );
 }
+function useScrollToBottom(messages) {
+  const messagesEndRef = useRef(null);
+  const messagesContainerRef = useRef(null);
+  const isProgrammaticScrollRef = useRef(false);
+  const isUserScrollUpRef = 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;
+    }
+  };
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+  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();
+    };
+  }, []);
+  useEffect(() => {
+    isUserScrollUpRef.current = false;
+    scrollToBottom();
+  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);
+  return { messagesEndRef, messagesContainerRef };
+}
 
 export {
-  Messages
+  Messages,
+  useScrollToBottom
 };
-//# sourceMappingURL=chunk-CPMIEVKK.mjs.map
+//# sourceMappingURL=chunk-RKPANT3F.mjs.map

package/dist/chunk-RKPANT3F.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport {\n  ActionExecutionMessage,\n  Message,\n  ResultMessage,\n  TextMessage,\n  Role,\n  AgentStateMessage,\n} from \"@copilotkit/runtime-client-gql\";\n\nexport const Messages = ({\n  messages,\n  inProgress,\n  children,\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n}: MessagesProps) => {\n  const context = useChatContext();\n  const initialMessages = useMemo(\n    () => makeInitialMessages(context.labels.initial),\n    [context.labels.initial],\n  );\n  messages = [...initialMessages, ...messages];\n\n  const actionResults: Record<string, string> = {};\n\n  for (let i = 0; i < messages.length; i++) {\n    if (messages[i].isActionExecutionMessage()) {\n      const id = messages[i].id;\n      const resultMessage: ResultMessage | undefined = messages.find(\n        (message) => message.isResultMessage() && message.actionExecutionId === id,\n      ) as ResultMessage | undefined;\n\n      if (resultMessage) {\n        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n      }\n    }\n  }\n\n  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);\n\n  return (\n    <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n      {messages.map((message, index) => {\n        const isCurrentMessage = index === messages.length - 1;\n\n        if (message.isTextMessage()) {\n          return (\n            <RenderTextMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n            />\n          );\n        } else if (message.isActionExecutionMessage()) {\n          return (\n            <RenderActionExecutionMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n              actionResult={actionResults[message.id]}\n            />\n          );\n        } else if (message.isAgentStateMessage()) {\n          return (\n            <RenderAgentStateMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n            />\n          );\n        } else if (message.isResultMessage()) {\n          return (\n            <RenderResultMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n            />\n          );\n        }\n      })}\n      <footer ref={messagesEndRef}>{children}</footer>\n    </div>\n  );\n};\n\nfunction makeInitialMessages(initial?: string | string[]): Message[] {\n  let initialArray: string[] = [];\n  if (initial) {\n    if (Array.isArray(initial)) {\n      initialArray.push(...initial);\n    } else {\n      initialArray.push(initial);\n    }\n  }\n\n  return initialArray.map(\n    (message) =>\n      new TextMessage({\n        role: Role.Assistant,\n        content: message,\n      }),\n  );\n}\nexport function useScrollToBottom(messages: any[]) {\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n  const isProgrammaticScrollRef = useRef(false);\n  const isUserScrollUpRef = useRef(false);\n\n  const scrollToBottom = () => {\n    if (messagesEndRef.current) {\n      isProgrammaticScrollRef.current = true;\n      messagesEndRef.current.scrollIntoView({\n        behavior: \"auto\",\n      });\n    }\n  };\n\n  const handleScroll = () => {\n    if (isProgrammaticScrollRef.current) {\n      isProgrammaticScrollRef.current = false;\n      return;\n    }\n\n    if (messagesContainerRef.current) {\n      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n    }\n  };\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (container) {\n      container.addEventListener(\"scroll\", handleScroll);\n    }\n    return () => {\n      if (container) {\n        container.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const mutationObserver = new MutationObserver(() => {\n      if (!isUserScrollUpRef.current) {\n        scrollToBottom();\n      }\n    });\n\n    mutationObserver.observe(container, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    isUserScrollUpRef.current = false;\n    scrollToBottom();\n  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);\n\n  return { messagesEndRef, messagesContainerRef };\n}\n"],"mappings":"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","names":[]}

package/dist/components/chat/Chat.js

@@ -388,7 +388,7 @@ var ChatContextProvider = ({
 };
 
 // src/components/chat/Messages.tsx
-var import_react2 = __toESM(require("react"));
+var import_react2 = require("react");
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Messages = ({
@@ -418,18 +418,8 @@ var Messages = ({
       }
     }
   }
-  const messagesEndRef = import_react2.default.useRef(null);
-  const scrollToBottom = () => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: "auto"
-      });
-    }
-  };
-  (0, import_react2.useEffect)(() => {
-    scrollToBottom();
-  }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitMessages", children: [
+  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     messages.map((message, index) => {
       const isCurrentMessage = index === messages.length - 1;
       if (message.isTextMessage()) {
@@ -498,6 +488,65 @@ function makeInitialMessages(initial) {
     })
   );
 }
+function useScrollToBottom(messages) {
+  const messagesEndRef = (0, import_react2.useRef)(null);
+  const messagesContainerRef = (0, import_react2.useRef)(null);
+  const isProgrammaticScrollRef = (0, import_react2.useRef)(false);
+  const isUserScrollUpRef = (0, import_react2.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_react2.useEffect)(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+  (0, import_react2.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_react2.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_react5 = require("react");