Fixed a bug where Failed message can't be send

apps/testing/src/pages/PlaygroundPage.tsx

@@ -4,5 +4,11 @@ import { defaultProps } from '../libs/const.ts';
 
 export function PlaygroundPage() {
   const props = useConfigParams(defaultProps);
-  return <GroupChannelApp {...props} breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)} config={{ logLevel: 'all' }} />;
+  return <GroupChannelApp {...props} breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)} config={{ logLevel: 'all' }} 
+    uikitOptions={{
+      groupChannel: {
+        replyType: 'thread',
+      }
+    }}
+  />;
 }

package.json

@@ -70,9 +70,9 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.18.0",
-    "@sendbird/react-uikit-message-template-view": "^0.0.10",
-    "@sendbird/uikit-tools": "^0.0.10",
+    "@sendbird/chat": "^4.20.0",
+    "@sendbird/react-uikit-message-template-view": "^0.0.17",
+    "@sendbird/uikit-tools": "^0.0.17",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.2.4"

src/modules/Channel/context/hooks/useHandleChannelEvents.ts

@@ -121,7 +121,6 @@ function useHandleChannelEvents({
         },
         onUserMarkedUnread: (channel, userIds) => {
           logger.info('Channel | useHandleChannelEvents: onUserMarkedUnread', channel, userIds);
-          // TODO:: MADOKA 이 부분에 대해서 명확하게 확인해야 함.
           if (compareIds(channel?.url, channelUrl)) {
             messagesDispatcher({
               type: messageActions.MARK_AS_UNREAD,
@@ -169,11 +168,13 @@ function useHandleChannelEvents({
           });
         },
         onReactionUpdated: (channel, reactionEvent) => {
-          logger.info('Channel | useHandleChannelEvents: onReactionUpdated', { channel, reactionEvent });
-          messagesDispatcher({
-            type: messageActions.ON_REACTION_UPDATED,
-            payload: reactionEvent,
-          });
+          if (channel.isGroupChannel() && compareIds(channel?.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onReactionUpdated', { channel, reactionEvent });
+            messagesDispatcher({
+              type: messageActions.ON_REACTION_UPDATED,
+              payload: reactionEvent,
+            });
+          }
         },
         onChannelChanged: (channel) => {
           if (channel.isGroupChannel() && compareIds(channel?.url, channelUrl)) {

src/modules/GroupChannel/components/MessageList/index.tsx

@@ -110,7 +110,7 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
 
   // Find the first unread message
   const firstUnreadMessage = useMemo(() => {
-    if (!enableMarkAsUnread || !isInitializedRef.current || messages.length === 0 || readState === 'read') {
+    if (!enableMarkAsUnread || !isInitializedRef.current || messages.length === 0 || readState === 'read' || !currentChannel?.myLastRead) {
       return undefined;
     }
 

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -332,6 +332,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
           toggleReaction,
           isOpenedFromThread: true,
           deleteMessage,
+          resendMessage,
           onDownloadClick: async (e) => {
             if (!onBeforeDownloadFileMessage) return;
 

src/modules/Thread/context/hooks/useThreadFetchers.ts

@@ -30,6 +30,7 @@ function getThreadMessageListParams(params?: Partial<ThreadedMessageListParams>)
     prevResultSize: PREV_THREADS_FETCH_SIZE,
     nextResultSize: NEXT_THREADS_FETCH_SIZE,
     includeMetaArray: true,
+    isInclusive: true,
     ...params,
   };
 }

src/modules/Thread/context/useThread.ts

@@ -56,6 +56,10 @@ const useThread = () => {
 
   const sendMessageStatusActions = {
     sendMessageStart: useCallback((message: SendableMessageType) => store.setState(state => {
+      if ('sendingStatus' in message) {
+        (message as any).sendingStatus = 'pending';
+      }
+
       return {
         ...state,
         localThreadMessages: [
@@ -66,6 +70,10 @@ const useThread = () => {
     }), [store]),
 
     sendMessageSuccess: useCallback((message: SendableMessageType) => store.setState(state => {
+      if ('sendingStatus' in message) {
+        (message as any).sendingStatus = 'succeeded';
+      }
+
       return {
         ...state,
         allThreadMessages: [
@@ -81,6 +89,10 @@ const useThread = () => {
     }), [store]),
 
     sendMessageFailure: useCallback((message: SendableMessageType) => store.setState(state => {
+      if ('sendingStatus' in message) {
+        (message as any).sendingStatus = 'failed';
+      }
+
       return {
         ...state,
         localThreadMessages: state.localThreadMessages.map((m) => (
@@ -92,6 +104,10 @@ const useThread = () => {
     }), [store]),
 
     resendMessageStart: useCallback((message: SendableMessageType) => store.setState(state => {
+      if ('sendingStatus' in message) {
+        (message as any).sendingStatus = 'pending';
+      }
+
       return {
         ...state,
         localThreadMessages: state.localThreadMessages.map((m) => (
@@ -235,16 +251,20 @@ const useThread = () => {
 
     initializeThreadListSuccess: useCallback((parentMessage: BaseMessage, anchorMessage: SendableMessageType, threadedMessages: BaseMessage[]) => store.setState(state => {
       const anchorMessageCreatedAt = (!anchorMessage?.messageId) ? parentMessage?.createdAt : anchorMessage?.createdAt;
-      const anchorIndex = threadedMessages.findIndex((message) => message?.createdAt > anchorMessageCreatedAt);
+      const anchorIndex = threadedMessages.findIndex((message) => message?.createdAt === anchorMessageCreatedAt);
       const prevThreadMessages = anchorIndex > -1 ? threadedMessages.slice(0, anchorIndex) : threadedMessages;
-      const anchorThreadMessage = anchorMessage?.messageId ? [anchorMessage] : [];
       const nextThreadMessages = anchorIndex > -1 ? threadedMessages.slice(anchorIndex) : [];
+
+      const allThreadMessages = [].concat(
+        ...prevThreadMessages, ...nextThreadMessages,
+      ) as CoreMessageType[];
+
       return {
         ...state,
         threadListState: ThreadListStateTypes.INITIALIZED,
         hasMorePrev: anchorIndex === -1 || anchorIndex === PREV_THREADS_FETCH_SIZE,
         hasMoreNext: threadedMessages.length - anchorIndex === NEXT_THREADS_FETCH_SIZE,
-        allThreadMessages: [prevThreadMessages, anchorThreadMessage, nextThreadMessages].flat() as CoreMessageType[],
+        allThreadMessages,
       };
     }), [store]),
 
@@ -397,18 +417,26 @@ const useThread = () => {
     }), [store]),
 
     onReactionUpdated: useCallback((reactionEvent: ReactionEvent) => store.setState(state => {
-      if (state?.parentMessage?.messageId === reactionEvent?.messageId) {
-        state.parentMessage?.applyReactionEvent?.(reactionEvent);
+      let updatedParentMessage = state.parentMessage;
+      if (state.parentMessage?.messageId === reactionEvent?.messageId) {
+        // 원본 객체를 직접 수정 (SDK 메시지 객체는 immutable 패턴을 따르지 않음)
+        state.parentMessage.applyReactionEvent?.(reactionEvent);
+        updatedParentMessage = state.parentMessage;
       }
+
+      const updatedMessages = state.allThreadMessages.map((m) => {
+        if (reactionEvent?.messageId === m?.messageId) {
+          // SDK 메시지 객체를 직접 수정 (SDK가 내부적으로 처리)
+          (m as any).applyReactionEvent?.(reactionEvent);
+          return m;
+        }
+        return m;
+      });
+
       return {
         ...state,
-        allThreadMessages: state.allThreadMessages.map((m) => {
-          if (reactionEvent?.messageId === m?.messageId) {
-            m?.applyReactionEvent?.(reactionEvent);
-            return m;
-          }
-          return m;
-        }),
+        parentMessage: updatedParentMessage,
+        allThreadMessages: [...updatedMessages], // 새 배열 참조로 리렌더링 트리거
       };
     }), [store]),
 

src/utils/storeManager.ts

@@ -18,6 +18,13 @@ export function hasStateChanged<T>(prevState: T, updates: Partial<T>): boolean {
        */
       return false;
     }
+
+    // Special handling for arrays - use shallow comparison for better performance
+    // and to handle cases where array contents are mutated but references change
+    if (Array.isArray(prevState[key as keyof T]) && Array.isArray(value)) {
+      return prevState[key as keyof T] !== value; // Shallow comparison for arrays
+    }
+
     return !isEqual(prevState[key as keyof T], value);
   });
 }

yarn.lock

@@ -2747,9 +2747,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sendbird/chat@npm:^4.18.0":
-  version: 4.19.5
-  resolution: "@sendbird/chat@npm:4.19.5"
+"@sendbird/chat@npm:^4.20.0":
+  version: 4.20.0
+  resolution: "@sendbird/chat@npm:4.20.0"
   peerDependencies:
     "@react-native-async-storage/async-storage": ^1.17.6
     react-native-mmkv: ">=2.0.0"
@@ -2762,25 +2762,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sendbird/react-uikit-message-template-view@npm:^0.0.10":
-  version: 0.0.10
-  resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.10"
+"@sendbird/react-uikit-message-template-view@npm:^0.0.17":
+  version: 0.0.17
+  resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.17"
   dependencies:
-    "@sendbird/uikit-message-template": ^0.0.10
+    "@sendbird/uikit-message-template": ^0.0.17
   peerDependencies:
-    "@sendbird/chat": ">=4.3.0 <5"
     react: ">=16.8.6"
     react-dom: ">=16.8.6"
-  checksum: aac92fb0b963c4ee3f31eea05839cd49c5ad8561c427b5778731fdf61bcbc18076b329ab2866f12b776e77e9b2a9bfbba12263bcf25d4949a34ab80120548d2f
+  checksum: cbfe00b7b0a9eba17350ee31b61167f3811ca4168b304ff7d81281568e1b7ff34e22b6d8e3ab323448148d44724a89d1431aefab58fb49a1a46e9c599ee38205
   languageName: node
   linkType: hard
 
-"@sendbird/uikit-message-template@npm:^0.0.10":
-  version: 0.0.10
-  resolution: "@sendbird/uikit-message-template@npm:0.0.10"
+"@sendbird/uikit-message-template@npm:^0.0.17":
+  version: 0.0.17
+  resolution: "@sendbird/uikit-message-template@npm:0.0.17"
   peerDependencies:
     react: ">=16.8.6"
-  checksum: 18dfce8f7c83d37a94bc3cbca0f561d7ed10c4367bcb2d2bf9c9192fce8fa06cfd87e8f968c6f3ae6d464a5119338ee5167b1a055b777bd906664a225c7e486f
+  checksum: 6622974d07dbbcda09745db2fb03957b759081e33a294a3b90a4e1f95fa7317f7e26954abd79c761fe958efd8332fba6eeb2df72e383f4db468212a869ff83d6
   languageName: node
   linkType: hard
 
@@ -2870,13 +2869,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sendbird/uikit-tools@npm:^0.0.10":
-  version: 0.0.10
-  resolution: "@sendbird/uikit-tools@npm:0.0.10"
+"@sendbird/uikit-tools@npm:^0.0.17":
+  version: 0.0.17
+  resolution: "@sendbird/uikit-tools@npm:0.0.17"
   peerDependencies:
     "@sendbird/chat": ">=4.10.5 <5"
     react: ">=16.8.6"
-  checksum: 1b92fe4a5caced7efff4397fdf87912bc958b45f5eae1f986f78961759b18687901cc28bbc6f797a6fb0e1552e56ef5e04a16da0125883f18b00e99fbee5f44b
+  checksum: 5ae44750a1c497b95d3ee125efc74cfde1fee60a6a3dac1f0cafa03131816c4a49d4ed9b41393c699556a9f77c527beb7af913bd333576a22a7384ef23072a75
   languageName: node
   linkType: hard