@copilotkit/react-ui 1.4.0-pre-1-4-0-alpha.10 → 1.4.0-pre-1-4-0.13

package/dist/index.mjs

@@ -4,18 +4,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";
@@ -28,7 +28,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/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.4.0-pre-1-4-0-alpha.10",
+  "version": "1.4.0-pre-1-4-0.13",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,9 +40,9 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "1.4.0-pre-1-4-0-alpha.0",
-    "tailwind-config": "1.4.0-pre-1-4-0-alpha.0",
-    "tsconfig": "1.4.0-pre-1-4-0-alpha.0"
+    "eslint-config-custom": "1.4.0-pre-1-4-0.13",
+    "tailwind-config": "1.4.0-pre-1-4-0.13",
+    "tsconfig": "1.4.0-pre-1-4-0.13"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/runtime-client-gql": "1.4.0-pre-1-4-0-alpha.10",
-    "@copilotkit/react-core": "1.4.0-pre-1-4-0-alpha.10",
-    "@copilotkit/shared": "1.4.0-pre-1-4-0-alpha.10"
+    "@copilotkit/react-core": "1.4.0-pre-1-4-0.13",
+    "@copilotkit/runtime-client-gql": "1.4.0-pre-1-4-0.13",
+    "@copilotkit/shared": "1.4.0-pre-1-4-0.13"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Messages.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import {
@@ -41,22 +41,10 @@ export const Messages = ({
     }
   }
 
-  const messagesEndRef = React.useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: "auto",
-      });
-    }
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+  const { messagesEndRef, messagesContainerRef } = useScrollToBottom(messages);
 
   return (
-    <div className="copilotKitMessages">
+    <div className="copilotKitMessages" ref={messagesContainerRef}>
       {messages.map((message, index) => {
         const isCurrentMessage = index === messages.length - 1;
 
@@ -126,3 +114,72 @@ function makeInitialMessages(initial?: string | string[]): Message[] {
       }),
   );
 }
+export function useScrollToBottom(messages: any[]) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement | null>(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 };
+}

package/dist/chunk-CPMIEVKK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import React, { useEffect, useMemo } 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 = React.useRef<HTMLDivElement>(null);\n\n  const scrollToBottom = () => {\n    if (messagesEndRef.current) {\n      messagesEndRef.current.scrollIntoView({\n        behavior: \"auto\",\n      });\n    }\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [messages]);\n\n  return (\n    <div className=\"copilotKitMessages\">\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}\n"],"mappings":";;;;;AAAA,OAAO,SAAS,WAAW,eAAe;AAG1C;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAgDH,SAMQ,KANR;AA9CG,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,UAAU,eAAe;AAC/B,QAAM,kBAAkB;AAAA,IACtB,MAAM,oBAAoB,QAAQ,OAAO,OAAO;AAAA,IAChD,CAAC,QAAQ,OAAO,OAAO;AAAA,EACzB;AACA,aAAW,CAAC,GAAG,iBAAiB,GAAG,QAAQ;AAE3C,QAAM,gBAAwC,CAAC;AAE/C,WAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxC,QAAI,SAAS,CAAC,EAAE,yBAAyB,GAAG;AAC1C,YAAM,KAAK,SAAS,CAAC,EAAE;AACvB,YAAM,gBAA2C,SAAS;AAAA,QACxD,CAAC,YAAY,QAAQ,gBAAgB,KAAK,QAAQ,sBAAsB;AAAA,MAC1E;AAEA,UAAI,eAAe;AACjB,sBAAc,EAAE,IAAI,cAAc,aAAa,cAAc,UAAU,EAAE;AAAA,MAC3E;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM,OAAuB,IAAI;AAExD,QAAM,iBAAiB,MAAM;AAC3B,QAAI,eAAe,SAAS;AAC1B,qBAAe,QAAQ,eAAe;AAAA,QACpC,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF;AAEA,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,qBAAC,SAAI,WAAU,sBACZ;AAAA,aAAS,IAAI,CAAC,SAAS,UAAU;AAChC,YAAM,mBAAmB,UAAU,SAAS,SAAS;AAErD,UAAI,QAAQ,cAAc,GAAG;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAJK;AAAA,QAKP;AAAA,MAEJ,WAAW,QAAQ,yBAAyB,GAAG;AAC7C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAc,cAAc,QAAQ,EAAE;AAAA;AAAA,UALjC;AAAA,QAMP;AAAA,MAEJ,WAAW,QAAQ,oBAAoB,GAAG;AACxC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAJK;AAAA,QAKP;AAAA,MAEJ,WAAW,QAAQ,gBAAgB,GAAG;AACpC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAJK;AAAA,QAKP;AAAA,MAEJ;AAAA,IACF,CAAC;AAAA,IACD,oBAAC,YAAO,KAAK,gBAAiB,UAAS;AAAA,KACzC;AAEJ;AAEA,SAAS,oBAAoB,SAAwC;AACnE,MAAI,eAAyB,CAAC;AAC9B,MAAI,SAAS;AACX,QAAI,MAAM,QAAQ,OAAO,GAAG;AAC1B,mBAAa,KAAK,GAAG,OAAO;AAAA,IAC9B,OAAO;AACL,mBAAa,KAAK,OAAO;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO,aAAa;AAAA,IAClB,CAAC,YACC,IAAI,YAAY;AAAA,MACd,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,IACX,CAAC;AAAA,EACL;AACF;","names":[]}