Merge pull request #208 from sendbird/feat/support-stream-scrolling

[AC-4084] feat: add scrolling for streaming message update

Author: bang9

docs-validation/package.json

@@ -14,7 +14,7 @@
     "@react-native-firebase/messaging": "^14.7.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
-    "@sendbird/chat": "^4.12.9",
+    "@sendbird/chat": "^4.13.3",
     "date-fns": "^4.1.0",
     "react": "18.2.0",
     "react-native": "0.74.3",

package.json

@@ -98,7 +98,7 @@
     ]
   },
   "resolutions": {
-    "@sendbird/chat": "4.12.9",
+    "@sendbird/chat": "4.13.3",
     "@types/react": "^18"
   }
 }

packages/uikit-chat-hooks/package.json

@@ -55,7 +55,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@sendbird/chat": "^4.12.9",
+    "@sendbird/chat": "^4.13.3",
     "react": ">=16.13.1"
   },
   "react-native-builder-bob": {

packages/uikit-react-native/package.json

@@ -109,7 +109,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.12.9",
+    "@sendbird/chat": "^4.13.3",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -75,7 +75,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   });
 
   useEffect(() => {
-    return subscribe(({ type }) => {
+    return subscribe(({ type, data }) => {
       switch (type) {
         case 'TYPING_BUBBLE_RENDERED':
         case 'MESSAGES_RECEIVED': {
@@ -84,6 +84,22 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
           }
           break;
         }
+        case 'MESSAGES_UPDATED': {
+          const lastMessage = props.channel.lastMessage;
+          const [updatedMessage] = data.messages;
+
+          const lastMessageUpdated =
+            updatedMessage && lastMessage && lastMessage.messageId === updatedMessage.messageId;
+
+          const isMaybeStreaming = props.channel.hasAiBot && lastMessageUpdated;
+
+          if (isMaybeStreaming) {
+            scrollToBottom(false);
+          } else if (!props.scrolledAwayFromBottom && lastMessageUpdated) {
+            scrollToBottom(true);
+          }
+          break;
+        }
         case 'MESSAGE_SENT_SUCCESS':
         case 'MESSAGE_SENT_PENDING': {
           scrollToBottom(false);

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadMessageList.tsx

@@ -69,7 +69,7 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
   });
 
   useEffect(() => {
-    return subscribe(({ type }) => {
+    return subscribe(({ type, data }) => {
       switch (type) {
         case 'TYPING_BUBBLE_RENDERED':
         case 'MESSAGES_RECEIVED': {
@@ -78,6 +78,21 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
           }
           break;
         }
+        case 'MESSAGES_UPDATED': {
+          const lastMessage = props.channel.lastMessage;
+          const [updatedMessage] = data.messages;
+
+          const lastMessageUpdated =
+            updatedMessage && lastMessage && lastMessage.messageId === updatedMessage.messageId;
+          const isMaybeStreaming = props.channel.hasAiBot && lastMessageUpdated;
+
+          if (isMaybeStreaming) {
+            scrollToBottom(false);
+          } else if (!props.scrolledAwayFromBottom && lastMessageUpdated) {
+            scrollToBottom(true);
+          }
+          break;
+        }
         case 'MESSAGE_SENT_SUCCESS':
         case 'MESSAGE_SENT_PENDING': {
           scrollToBottom(false);

packages/uikit-testing-tools/package.json

@@ -39,7 +39,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sendbird/chat": "^4.12.9",
+    "@sendbird/chat": "^4.13.3",
     "@sendbird/uikit-utils": "3.7.4",
     "@types/jest": "^29.4.0",
     "@types/react": "*",

packages/uikit-utils/package.json

@@ -56,7 +56,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@sendbird/chat": "^4.12.9",
+    "@sendbird/chat": "^4.13.3",
     "date-fns": ">=2.28.0",
     "react": ">=17.0.2",
     "react-native": ">=0.65.0"

sample/package.json

@@ -28,7 +28,7 @@
     "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
-    "@sendbird/chat": "^4.12.9",
+    "@sendbird/chat": "^4.13.3",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-controls": "^6.4.19",
     "@storybook/addon-ondevice-actions": "^6.0.1-alpha.7",

yarn.lock

@@ -4703,10 +4703,10 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@sendbird/chat@4.12.9", "@sendbird/chat@^4.12.9":
-  version "4.12.9"
-  resolved "https://registry.yarnpkg.com/@sendbird/chat/-/chat-4.12.9.tgz#7f1b8f70f647c35dd9e8729a9f772868593dc739"
-  integrity sha512-vHU18zfCmxxU65vNVz0URH/MUh+0nfz13uUaXOTrbw9ABw2KqiYko27O9c+ptc9Z9E+LhlhAhJIxB7LIdh+YCQ==
+"@sendbird/chat@4.13.3", "@sendbird/chat@^4.13.3":
+  version "4.13.3"
+  resolved "https://registry.yarnpkg.com/@sendbird/chat/-/chat-4.13.3.tgz#d8cc7b58ea0562e3661303d73bc1a0722bae37d9"
+  integrity sha512-JRlhmyEMrHxoLNZIl+C94I9TzXOFVnWVz0NErcv8L/JD9ryzcgq6pJi0z8kOYCJZKs/YTpCISV9wHEUo6dI8xw==
 
 "@sendbird/uikit-tools@0.0.1-alpha.77":
   version "0.0.1-alpha.77"