fix: lastMessage is nullable (#828)

Fixed the runtime error that was occurring in the empty channel.

---------

Co-authored-by: Irene Ryu <[email protected]>

Author: bang9

src/modules/Channel/components/Message/index.tsx

@@ -12,7 +12,7 @@ import useDidMountEffect from '../../../../utils/useDidMountEffect';
 import SuggestedMentionList from '../SuggestedMentionList';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelContext } from '../../context/ChannelProvider';
-import { getClassName } from '../../../../utils';
+import { getClassName, getSuggestedReplies } from '../../../../utils';
 import { isDisabledBecauseFrozen, isDisabledBecauseMuted } from '../../context/utils';
 import { MAX_USER_MENTION_COUNT, MAX_USER_SUGGESTION_COUNT } from '../../context/const';
 
@@ -212,8 +212,6 @@ const Message = ({
     return null;
   }, [message, renderCustomSeparator]);
 
-  const suggestedReplies = message.extendedMessagePayload?.suggested_replies as string[] | undefined ?? [];
-
   if (renderedMessage) {
     return (
       <div
@@ -385,11 +383,11 @@ const Message = ({
         )
       }
       {/** Suggested Replies */}
-      {message.messageId === currentGroupChannel?.lastMessage.messageId
+      {message.messageId === currentGroupChannel?.lastMessage?.messageId
         // the options should appear only when there's no failed or pending messages
         && localMessages.every(message => (message as UserMessage).sendingStatus === 'succeeded')
-        && suggestedReplies.length > 0 && (
-          <SuggestedReplies replyOptions={suggestedReplies} onSendMessage={sendMessage} />
+        && getSuggestedReplies(message).length > 0 && (
+          <SuggestedReplies replyOptions={getSuggestedReplies(message)} onSendMessage={sendMessage} />
       )}
       {/* Modal */}
       {

src/utils/__tests__/getSuggestedReplies.spec.ts

@@ -0,0 +1,30 @@
+import { getSuggestedReplies } from '../index';
+import { EveryMessage } from '../../types';
+
+describe('getSuggestedReplies', () => {
+  it('should return an empty array when message is undefined', () => {
+    const result = getSuggestedReplies();
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array when suggested_replies is not an array', () => {
+    const message = {
+      extendedMessagePayload: {
+        suggested_replies: 'Not an array',
+      },
+    } as unknown as EveryMessage;
+    const result = getSuggestedReplies(message);
+    expect(result).toEqual([]);
+  });
+
+  it('should return the suggested_replies when it is an array', () => {
+    const suggestedReplies = ['Option 1', 'Option 2', 'Option 3'];
+    const message = {
+      extendedMessagePayload: {
+        suggested_replies: suggestedReplies,
+      },
+    } as unknown as EveryMessage;
+    const result = getSuggestedReplies(message);
+    expect(result).toEqual(suggestedReplies);
+  });
+});

src/utils/index.ts

@@ -13,7 +13,7 @@ import {
 import { OpenChannel, SendbirdOpenChat } from '@sendbird/chat/openChannel';
 
 import { getOutgoingMessageState, OutgoingMessageStates } from './exports/getOutgoingMessageState';
-import { Nullable } from '../types';
+import { Nullable, EveryMessage } from '../types';
 import { match } from 'ts-pattern';
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
@@ -409,6 +409,14 @@ export const getUseReaction = (store: UIKitStore, channel: GroupChannel | OpenCh
   return store?.config?.isReactionEnabled;
 };
 
+export function getSuggestedReplies(message?: EveryMessage): string[] {
+  if (Array.isArray(message?.extendedMessagePayload?.suggested_replies)) {
+    return message.extendedMessagePayload.suggested_replies;
+  } else {
+    return [];
+  }
+}
+
 export const isMessageSentByMe = (
   userId: string,
   message: SendableMessageType,