fix: i18n in message rerender issue for MessageText component (#2566)

Author: khushal87

package/src/components/Message/Message.tsx

@@ -830,7 +830,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
     prevMessage.pinned === nextMessage.pinned &&
-    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
+    `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}` &&
+    JSON.stringify(prevMessage.i18n) === JSON.stringify(nextMessage.i18n);
 
   if (!messageEqual) return false;
 

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -474,7 +474,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
     prevMessage.text === nextMessage.text &&
-    prevMessage.pinned === nextMessage.pinned;
+    prevMessage.pinned === nextMessage.pinned &&
+    JSON.stringify(prevMessage.i18n) === JSON.stringify(nextMessage.i18n);
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -164,7 +164,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     isPrevMessageTypeDeleted === isNextMessageTypeDeleted &&
     prevMessage.status === nextMessage.status &&
     prevMessage.type === nextMessage.type &&
-    prevMessage.text === nextMessage.text;
+    prevMessage.text === nextMessage.text &&
+    JSON.stringify(prevMessage.i18n) === JSON.stringify(nextMessage.i18n);
   if (!messageEqual) return false;
 
   const isPrevQuotedMessageTypeDeleted = prevMessage.quoted_message?.type === 'deleted';

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -133,7 +133,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     onlyEmojis: nextOnlyEmojis,
   } = nextProps;
 
-  const messageTextEqual = prevMessage.text === nextMessage.text;
+  const messageTextEqual =
+    prevMessage.text === nextMessage.text &&
+    JSON.stringify(prevMessage.i18n) === JSON.stringify(nextMessage.i18n);
   if (!messageTextEqual) return false;
 
   const onlyEmojisEqual = prevOnlyEmojis === nextOnlyEmojis;