@vendorflow/components 2.0.43 → 2.0.44

package/lib/components/material-ui/ChatInterface/ChatInterface.story.js

@@ -92,8 +92,6 @@ function ChatInterface() {
         setFetching(true);
         return new Promise(function (resolve) {
             setTimeout(function () {
-                setSubmitting(false);
-                setFetching(false);
                 setMessages(__spreadArray([
                     {
                         id: generateId(),
@@ -103,6 +101,8 @@ function ChatInterface() {
                         content: message,
                     }
                 ], __read(messages), false));
+                setSubmitting(false);
+                setFetching(false);
                 resolve(true);
             }, 500);
         });

package/lib/components/material-ui/ChatInterface/MessageThread.js

@@ -19,6 +19,7 @@ function MessageThread(_a) {
     var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
     var isInitialized = (0, react_2.useRef)(false);
     var isScrollLoad = (0, react_2.useRef)(false);
+    var hasSubmitted = (0, react_2.useRef)(false);
     var prevScrollTop = (0, react_2.useRef)(null);
     var prevScrollHeight = (0, react_2.useRef)(null);
     var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
@@ -31,9 +32,14 @@ function MessageThread(_a) {
             fetchNextPage();
         }
     }, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
+    (0, react_2.useEffect)(function () {
+        if (isSubmitting) {
+            hasSubmitted.current = true;
+        }
+    }, [isSubmitting]);
     // This will handle the initial loading of messages, then scroll to bottom
     (0, react_2.useEffect)(function () {
-        if (!isInitialized.current && !isLoading && scrollParent.current) {
+        if (!isInitialized.current && !isFetching && scrollParent.current) {
             var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
             if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
                 fetchNextPage();
@@ -42,7 +48,7 @@ function MessageThread(_a) {
             isInitialized.current = true;
             scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
         }
-    }, [isLoading, isInitialized.current, hasNextPage, fetchNextPage]);
+    }, [isFetching, isInitialized.current, hasNextPage, fetchNextPage]);
     // Sets up the scroll event listener
     (0, react_2.useEffect)(function () {
         if (scrollParent.current) {
@@ -70,8 +76,9 @@ function MessageThread(_a) {
     }, [isFetching, prevScrollHeight.current]);
     // Manages scroll position for data changes that are triggered from anything other than the scroll event
     (0, react_2.useEffect)(function () {
+        var _a;
         if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
-            var _a = scrollParent.current, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight;
+            var _b = scrollParent.current, scrollHeight = _b.scrollHeight, scrollTop = _b.scrollTop, clientHeight = _b.clientHeight;
             if (isFetching) {
                 // track the current position
                 prevScrollHeight.current = scrollHeight;
@@ -81,18 +88,23 @@ function MessageThread(_a) {
                     shouldScrollToPrevPosition.current = true;
                 }
             }
-            else if (!isFetching &&
-                prevScrollHeight.current !== null &&
-                prevScrollTop.current !== null &&
-                scrollHeight > prevScrollHeight.current) {
+            else {
                 // init to scroll to bottom delta
                 var delta = scrollHeight - clientHeight;
-                if (shouldScrollToPrevPosition.current) {
-                    delta = prevScrollTop.current;
+                if (hasSubmitted.current) {
+                    // scroll to bottom if this was triggered by the current user's sent message
+                    (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, delta);
+                }
+                else if (!isFetching && prevScrollHeight.current !== null && prevScrollTop.current !== null) {
+                    if (shouldScrollToPrevPosition.current) {
+                        delta = prevScrollTop.current;
+                    }
+                    scrollParent.current.scrollTo(0, delta);
                 }
-                scrollParent.current.scrollTo(0, delta);
+                // clean up
                 prevScrollHeight.current = null;
                 prevScrollTop.current = null;
+                hasSubmitted.current = false;
                 shouldScrollToPrevPosition.current = false;
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.43",
+  "version": "2.0.44",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",