stream-chat-react-native-core 4.3.1 → 4.4.0-beta.3

package/lib/typescript/contexts/messageContext/MessageContext.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import type { Attachment } from 'stream-chat';
 import type { ActionHandler } from '../../components/Attachment/Attachment';
-import type { TouchableHandlerPayload } from '../../components/Message/Message';
+import type { MessageTouchableHandlerPayload, TouchableHandlerPayload } from '../../components/Message/Message';
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import type { MessageContentType } from '../../contexts/messagesContext/MessagesContext';
@@ -54,7 +54,7 @@ export declare type MessageContextValue<StreamChatGenerics extends DefaultStream
      *
      * By default, we show the overlay with all the message actions on long press.
      *
-     * @param event   Event object for onLongPress event
+     * @param payload   Payload object for onLongPress event
      */
     onLongPress: (payload: TouchableHandlerPayload) => void;
     /** Whether the message is only text and the text is only emojis */
@@ -69,9 +69,9 @@ export declare type MessageContextValue<StreamChatGenerics extends DefaultStream
      *
      * By default, we will dismiss the keyboard on press.
      *
-     * @param event   Event object for onPress event
+     * @param payload   Payload object for onPress event
      */
-    onPress: (payload: TouchableHandlerPayload) => void;
+    onPress: (payload: MessageTouchableHandlerPayload) => void;
     onPressIn: ((payload: TouchableHandlerPayload) => void) | null;
     /** The images attached to a message */
     otherAttachments: Attachment<StreamChatGenerics>[];

package/lib/typescript/contexts/messageInputContext/MessageInputContext.d.ts

@@ -17,7 +17,7 @@ import type { UploadProgressIndicatorProps } from '../../components/MessageInput
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import { Asset } from '../../native';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-import { ACITriggerSettingsParams, TriggerSettings } from '../../utils/utils';
+import { ACITriggerSettingsParams, FileStateValue, TriggerSettings } from '../../utils/utils';
 import { ChannelContextValue } from '../channelContext/ChannelContext';
 export declare type FileUpload = {
     file: {
@@ -27,7 +27,7 @@ export declare type FileUpload = {
         uri?: string;
     };
     id: string;
-    state: string;
+    state: FileStateValue;
     url?: string;
 };
 export declare type ImageUpload = {
@@ -35,7 +35,7 @@ export declare type ImageUpload = {
         name?: string;
     };
     id: string;
-    state: string;
+    state: FileStateValue;
     height?: number;
     url?: string;
     width?: number;

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -330,6 +330,7 @@ export declare type Theme = {
             unreadCountNotificationContainer: ViewStyle;
             unreadCountNotificationText: TextStyle;
             wrapper: ViewStyle;
+            chevronColor?: Color;
         };
         typingIndicatorContainer: ViewStyle;
     };

package/lib/typescript/i18n/en.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "Error loading channel list...",
     "Error loading messages for this channel...": "Error loading messages for this channel...",
     "Error while loading, please reload/refresh": "Error while loading, please reload/refresh",
+    "File type not supported": "File type not supported",
     "Flag": "Flag",
     "Flag Message": "Flag Message",
     "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.",
@@ -31,6 +32,7 @@
     "Message deleted": "Message deleted",
     "Message flagged": "Message flagged",
     "Mute User": "Mute User",
+    "Not supported": "Not supported",
     "Nothing yet...": "Nothing yet...",
     "Ok": "Ok",
     "Only visible to you": "Only visible to you",

package/lib/typescript/i18n/fr.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "Erreur lors du chargement de la liste de canaux...",
     "Error loading messages for this channel...": "Erreur lors du chargement des messages de ce canal...",
     "Error while loading, please reload/refresh": "Erreur lors du chargement, veuillez recharger/rafraîchir",
+    "File type not supported": "Le type de fichier n'est pas pris en charge",
     "Flag": "Signaler",
     "Flag Message": "Signaler le message",
     "Flag action failed either due to a network issue or the message is already flagged": "L'action de signalisation a échoué en raison d'un problème de réseau ou le message est déjà signalé.",
@@ -31,6 +32,7 @@
     "Message deleted": "Message supprimé",
     "Message flagged": "Message signalé",
     "Mute User": "Utilisateur muet",
+    "Not supported": "Non pris en charge",
     "Nothing yet...": "Aucun message...",
     "Ok": "Ok",
     "Only visible to you": "Seulement visible par vous",

package/lib/typescript/i18n/hi.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "चैनल सूची लोड करने में त्रुटि...",
     "Error loading messages for this channel...": "इस चैनल के लिए मेसेजेस लोड करने में त्रुटि हुई...",
     "Error while loading, please reload/refresh": "एरर, रिफ्रेश करे",
+    "File type not supported": "फ़ाइल प्रकार समर्थित नहीं है",
     "Flag": "झंडा",
     "Flag Message": "झंडा संदेश",
     "Flag action failed either due to a network issue or the message is already flagged": "फ़्लैग कार्रवाई या तो नेटवर्क समस्या के कारण विफल हो गई या संदेश पहले से फ़्लैग किया गया है।",
@@ -31,6 +32,7 @@
     "Message deleted": "मैसेज हटा दिया गया",
     "Message flagged": "संदेश को ध्वजांकित किया गया",
     "Mute User": "उपयोगकर्ता को म्यूट करें",
+    "Not supported": "समर्थित नहीं",
     "Nothing yet...": "कोई मैसेज नहीं है...",
     "Ok": "ठीक",
     "Only visible to you": "केवल आपको दिखाई दे रहा है",

package/lib/typescript/i18n/it.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "Errore durante il caricamento della lista dei canali...",
     "Error loading messages for this channel...": "Errore durante il caricamento dei messaggi per questo canale...",
     "Error while loading, please reload/refresh": "Errore durante il caricamento, per favore ricarica la pagina",
+    "File type not supported": "Tipo di file non supportato",
     "Flag": "Contrassegna",
     "Flag Message": "Contrassegna Messaggio",
     "Flag action failed either due to a network issue or the message is already flagged": "L'azione di segnalazione non è riuscita a causa di un problema di rete o il messaggio è già segnalato.",
@@ -31,6 +32,7 @@
     "Message deleted": "Messaggio cancellato",
     "Message flagged": "Messaggio contrassegnato",
     "Mute User": "Utente Muto",
+    "Not supported": "non supportato",
     "Nothing yet...": "Ancora niente...",
     "Ok": "Ok",
     "Only visible to you": "Visibile solo a te",

package/lib/typescript/i18n/ja.json

@@ -63,5 +63,7 @@
   "Only visible to you": "あなただけに見える",
   "Reply": "返事",
   "Reply to Message": "メッセージに返信",
-  "🏙 Attachment...": "🏙 アタッチメント..."
+  "🏙 Attachment...": "🏙 アタッチメント...",
+  "Not supported": "サポートしていません",
+  "File type not supported": "サポートされていないファイルです"
 }

package/lib/typescript/i18n/ko.json

@@ -63,5 +63,7 @@
   "Only visible to you": "당신만 볼 수 있습니다",
   "Reply": "답장",
   "Reply to Message": "메시지에 답장",
-  "🏙 Attachment...": "🏙 부착..."
+  "🏙 Attachment...": "🏙 부착...",
+  "File type not supported": "지원하지 않는 파일입니다.",
+  "Not supported": "지원하지 않습니다"
 }

package/lib/typescript/i18n/nl.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "Probleem bij het laden van de kanalen...",
     "Error loading messages for this channel...": "Probleem bij het laden van de berichten in dit kanaal...",
     "Error while loading, please reload/refresh": "Probleem bij het laden, probeer opnieuw",
+    "File type not supported": "Bestandstype niet ondersteund",
     "Flag": "Markeer",
     "Flag Message": "Markeer bericht",
     "Flag action failed either due to a network issue or the message is already flagged": "Rapporteren mislukt door een netwerk fout of het berich is al gerapporteerd",
@@ -31,6 +32,7 @@
     "Message deleted": "Bericht verwijderd",
     "Message flagged": "Bericht gemarkeerd",
     "Mute User": "Gebruiker dempen",
+    "Not supported": "niet ondersteund",
     "Nothing yet...": "Nog niets...",
     "Ok": "Oké",
     "Only visible to you": "Alleen zichtbaar voor jou",

package/lib/typescript/i18n/ru.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "Ошибка загрузки списка каналов...",
     "Error loading messages for this channel...": "Ошибка загрузки сообщений для этого канала...",
     "Error while loading, please reload/refresh": "Ошибка загрузки, пожалуйста перезагрузите или обновите",
+    "File type not supported": "Тип файла не поддерживается",
     "Flag": "Пометить",
     "Flag Message": "Пометить сообщение",
     "Flag action failed either due to a network issue or the message is already flagged": "Не удалось отправить жалобу. Возможные причины: проблема с подключением к интернету или ваша жалоба уже была принята.",
@@ -31,6 +32,7 @@
     "Message deleted": "Сообщение удалено",
     "Message flagged": "Сообщение отмечено",
     "Mute User": "Отключить пользователя",
+    "Not supported": "не поддерживается",
     "Nothing yet...": "Пока ничего нет...",
     "Ok": "Oк",
     "Only visible to you": "Видно только вам",

package/lib/typescript/i18n/tr.json

@@ -19,6 +19,7 @@
     "Error loading channel list...": "Kanal listesi yüklenirken hata oluştu...",
     "Error loading messages for this channel...": "Bu kanal için mesajlar yüklenirken hata oluştu...",
     "Error while loading, please reload/refresh": "Yüklenirken hata oluştu, lütfen tekrar deneyin",
+    "File type not supported": "Dosya türü desteklenmiyor",
     "Flag": "Raporla",
     "Flag Message": "Mesajı İşaretle",
     "Flag action failed either due to a network issue or the message is already flagged": "Raporlama, mesajın raporlanmış olması veya bağlantı hatası sebebiyle başarısız oldu.",
@@ -31,6 +32,7 @@
     "Message deleted": "Mesaj silindi",
     "Message flagged": "Mesaj işaretlendi",
     "Mute User": "Kullanıcının Sesini Kapat",
+    "Not supported": "Desteklenmiyor",
     "Nothing yet...": "Şimdilik hiçbir şey...",
     "Ok": "Tamam",
     "Only visible to you": "Sadece siz görebilirsiniz",

package/lib/typescript/icons/Warning.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './utils/base';
+export declare const Warning: React.FC<IconProps>;

package/lib/typescript/icons/index.d.ts

@@ -73,6 +73,7 @@ export * from './User';
 export * from './UserAdd';
 export * from './UserDelete';
 export * from './UserMinus';
+export * from './Warning';
 export * from './WutReaction';
 export * from './XLS';
 export * from './XLSX';

package/lib/typescript/utils/Streami18n.d.ts

@@ -131,6 +131,7 @@ export declare class Streami18n {
                 "Error loading channel list...": string;
                 "Error loading messages for this channel...": string;
                 "Error while loading, please reload/refresh": string;
+                "File type not supported": string;
                 Flag: string;
                 "Flag Message": string;
                 "Flag action failed either due to a network issue or the message is already flagged": string;
@@ -143,6 +144,7 @@ export declare class Streami18n {
                 "Message deleted": string;
                 "Message flagged": string;
                 "Mute User": string;
+                "Not supported": string;
                 "Nothing yet...": string;
                 Ok: string;
                 "Only visible to you": string;
@@ -152,6 +154,10 @@ export declare class Streami18n {
                 "Please enable access to your photos and videos so you can share them.": string;
                 "Please select a channel first": string;
                 "Reconnecting...": string;
+                /**
+                 * Hindi notation for meridiems are quite fuzzy in practice. While there exists
+                 * a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
+                 */
                 Reply: string;
                 "Reply to Message": string;
                 Resend: string;

package/lib/typescript/utils/utils.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { DebouncedFunc } from 'lodash';
-import type { Channel, CommandResponse, StreamChat } from 'stream-chat';
+import type { Channel, CommandResponse, FormatMessageResponse, StreamChat } from 'stream-chat';
 import type { MentionAllAppUsersQuery } from '../contexts/messageInputContext/MessageInputContext';
 import type { SuggestionCommand, SuggestionComponentType, SuggestionUser } from '../contexts/suggestionsContext/SuggestionsContext';
 import { Emoji } from '../emoji-data/compiled';
@@ -12,13 +12,15 @@ export declare type ReactionData = {
 };
 export declare const FileState: Readonly<{
     FINISHED: string;
-    NO_FILE: string;
+    NOT_SUPPORTED: string;
     UPLOAD_FAILED: string;
     UPLOADED: string;
     UPLOADING: string;
 }>;
 export declare const ProgressIndicatorTypes: {
     IN_PROGRESS: 'in_progress';
+    INACTIVE: 'inactive';
+    NOT_SUPPORTED: 'not_supported';
     RETRY: 'retry';
 };
 export declare const MessageStatusTypes: {
@@ -26,6 +28,10 @@ export declare const MessageStatusTypes: {
     RECEIVED: string;
     SENDING: string;
 };
+export declare type FileStateValue = typeof FileState[keyof typeof FileState];
+declare type ValueOf<T> = T[keyof T];
+declare type Progress = ValueOf<typeof ProgressIndicatorTypes>;
+export declare const getIndicatorTypeForFileState: (fileState: FileStateValue) => Progress | null;
 export declare const queryMembersDebounced: DebouncedFunc<(<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel: Channel<StreamChatGenerics>, query: SuggestionUser<StreamChatGenerics>["name"], onReady?: ((users: SuggestionUser<StreamChatGenerics>[]) => void) | undefined, options?: {
     limit?: number;
 }) => Promise<void>)>;
@@ -104,3 +110,10 @@ export declare const vh: (percentageHeight: number, rounded?: boolean) => number
 export declare const generateRandomId: (a?: string) => string;
 export declare const emojiRegex: RegExp;
 export declare const urlRegex: RegExp;
+/**
+ * Reduces a list of messages to strings that are used in useEffect & useMemo
+ * @param {messages} messages - the array of messages to be compared
+ * @returns {string} The mapped message string
+ */
+export declare const reduceMessagesToString: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: FormatMessageResponse<StreamChatGenerics>[]) => string;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.3.1",
+  "version": "4.4.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -126,7 +126,7 @@
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "eslint-plugin-typescript-sort-keys": "1.6.0",
     "jest": "26.6.3",
-    "moment": "2.29.1",
+    "moment": "2.29.2",
     "prettier": "2.3.0",
     "react": "17.0.2",
     "react-docgen-typescript": "1.22.0",

package/src/components/Attachment/Card.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Image,
   ImageStyle,
-  Linking,
   StyleProp,
   StyleSheet,
   Text,
@@ -14,6 +13,8 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
+import { useGoToURL } from './hooks/useGoToURL';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -67,17 +68,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const goToURL = (url?: string) => {
-  if (!url) return;
-  Linking.canOpenURL(url).then((supported) => {
-    if (supported) {
-      Linking.openURL(url);
-    } else {
-      console.log(`Don't know how to open URI: ${url}`);
-    }
-  });
-};
-
 export type CardPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Attachment<StreamChatGenerics> &
@@ -149,7 +139,9 @@ const CardWithContext = <
 
   const uri = image_url || thumb_url;
 
-  const defaultOnPress = () => goToURL(og_scrape_url || uri);
+  const [error, openURL] = useGoToURL(og_scrape_url || uri);
+
+  const defaultOnPress = () => !error && openURL && openURL();
 
   return (
     <TouchableOpacity

package/src/components/Attachment/FileAttachment.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Linking,
   StyleProp,
   StyleSheet,
   Text,
@@ -12,6 +11,8 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
+import { useGoToURL } from './hooks/useGoToURL';
+
 import { AttachmentActions as AttachmentActionsDefault } from '../../components/Attachment/AttachmentActions';
 import { FileIcon as FileIconDefault } from '../../components/Attachment/FileIcon';
 import {
@@ -94,7 +95,9 @@ const FileAttachmentWithContext = <
     },
   } = useTheme();
 
-  const defaultOnPress = () => goToURL(attachment.asset_url);
+  const [error, openURL] = useGoToURL(attachment.asset_url);
+
+  const defaultOnPress = () => !error && openURL && openURL();
 
   return (
     <TouchableOpacity
@@ -190,15 +193,4 @@ export const getFileSizeDisplayText = (size?: number | string) => {
   return `${Math.floor(Math.floor(size / 10000) / 100)} MB`;
 };
 
-export const goToURL = (url?: string) => {
-  if (!url) return;
-  Linking.canOpenURL(url).then((supported) => {
-    if (supported) {
-      Linking.openURL(url);
-    } else {
-      console.log(`Don't know how to open URI: ${url}`);
-    }
-  });
-};
-
 FileAttachment.displayName = 'FileAttachment{messageSimple{file}}';

package/src/components/Attachment/Giphy.tsx

@@ -65,6 +65,7 @@ const styles = StyleSheet.create({
   },
   giphyHeaderTitle: {
     fontSize: 14,
+    marginLeft: 8,
   },
   giphyMask: {
     bottom: 8,
@@ -84,7 +85,8 @@ const styles = StyleSheet.create({
     width: '60%',
   },
   selectionContainer: {
-    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 0,
+    borderRadius: 16,
     borderWidth: 1,
     overflow: 'hidden',
     width: 272,

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import { Linking } from 'react-native';
+
+import { act, renderHook } from '@testing-library/react-hooks';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -15,6 +18,7 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
+import { useGoToURL } from '../hooks/useGoToURL';
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
@@ -120,4 +124,39 @@ describe('Attachment', () => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });
+
+  it('should open the URL in the browser', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(true));
+
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(false));
+
+    const { result, waitFor } = renderHook(() => useGoToURL('www.google.com'));
+
+    const [error, openURL] = result.current;
+
+    await act(openURL);
+
+    await waitFor(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(error).not.toBeTruthy();
+      expect(Linking.openURL).toHaveBeenCalled();
+    });
+  });
+
+  it('should open the URL in the browser when no url', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockImplementation(jest.fn().mockResolvedValue(false));
+
+    jest.spyOn(Linking, 'openURL').mockImplementation(jest.fn().mockResolvedValue(true));
+
+    const { result, waitForNextUpdate } = await renderHook(() => useGoToURL());
+    const [error, openURL] = result.current;
+
+    act(openURL);
+
+    await waitForNextUpdate(() => {
+      expect(Linking.canOpenURL).toHaveBeenCalled();
+      expect(error).toBeTruthy();
+      expect(Linking.openURL).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/Attachment/hooks/useGoToURL.ts

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { Linking } from 'react-native';
+
+export type UseGoToURLType = (url?: string) => [boolean, () => Promise<void>];
+
+export const useGoToURL: UseGoToURLType = (url?: string) => {
+  const [error, setError] = useState<boolean>(false);
+
+  let finalUrl = url as string;
+  const pattern = new RegExp(/^\S+:\/\//);
+
+  if (!pattern.test(finalUrl)) {
+    finalUrl = 'http://' + url;
+  }
+
+  const openURL = () =>
+    Linking.canOpenURL(finalUrl).then((supported) => {
+      if (supported) {
+        Linking.openURL(finalUrl);
+      } else {
+        setError(true);
+        console.log(`Don't know how to open URI: ${finalUrl}`);
+      }
+    });
+
+  return [error, openURL];
+};

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
 });
 
 const screenHeight = vh(100);
-const fullScreenHeight = Dimensions.get('screen').height;
+const fullScreenHeight = Dimensions.get('window').height;
 
 type AttachmentImageProps = {
   ImageOverlaySelectedComponent: React.ComponentType;
@@ -326,26 +326,36 @@ export const AttachmentPicker = React.forwardRef(
           : statusBarHeight
         : 0;
 
-    /**
-     * Snap points changing cause a rerender of the position,
-     * this is an issue if you are calling close on the bottom sheet.
-     */
-    const snapPoints = useMemo(
-      () => [
-        attachmentPickerBottomSheetHeight ??
-          308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) - handleHeight,
-        fullScreenHeight - topInset - handleHeight,
-      ],
+    const initialSnapPoint = useMemo(
+      () =>
+        attachmentPickerBottomSheetHeight ?? Platform.OS === 'android'
+          ? 308 +
+            (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) -
+            handleHeight
+          : 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment),
       [
-        androidBottomBarHeightAdjustment,
         attachmentPickerBottomSheetHeight,
+        androidBottomBarHeightAdjustment,
         fullScreenHeight,
         handleHeight,
         screenHeight,
-        topInset,
       ],
     );
 
+    const finalSnapPoint = useMemo(
+      () =>
+        Platform.OS === 'android'
+          ? fullScreenHeight - topInset - handleHeight
+          : fullScreenHeight - topInset,
+      [fullScreenHeight, handleHeight, topInset],
+    );
+
+    /**
+     * Snap points changing cause a rerender of the position,
+     * this is an issue if you are calling close on the bottom sheet.
+     */
+    const snapPoints = [initialSnapPoint, finalSnapPoint];
+
     return (
       <>
         <BottomSheet

package/src/components/Channel/Channel.tsx

@@ -1606,7 +1606,7 @@ const ChannelWithContext = <
     watchers,
   });
 
-  const inputMessageInputContext = useCreateInputMessageInputContext({
+  const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
     autoCompleteSuggestionsLimit,

package/src/components/Channel/hooks/useCreatePaginatedMessageListContext.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { reduceMessagesToString } from '../../../utils/utils';
 
 export const useCreatePaginatedMessageListContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -18,14 +19,7 @@ export const useCreatePaginatedMessageListContext = <
 }: PaginatedMessageListContextValue<StreamChatGenerics> & {
   channelId?: string;
 }) => {
-  const messagesUpdated = messages
-    .map(
-      ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
-        `${deleted_at}${
-          latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at?.toISOString?.() || updated_at}`,
-    )
-    .join();
+  const messagesStr = reduceMessagesToString(messages);
 
   const paginatedMessagesContext: PaginatedMessageListContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -38,7 +32,7 @@ export const useCreatePaginatedMessageListContext = <
       setLoadingMore,
       setLoadingMoreRecent,
     }),
-    [channelId, hasMore, loadingMoreRecent, loadingMore, messagesUpdated],
+    [channelId, hasMore, loadingMoreRecent, loadingMore, messagesStr],
   );
 
   return paginatedMessagesContext;

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { reduceMessagesToString } from '../../../utils/utils';
 
 export const useCreateThreadContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -19,14 +20,7 @@ export const useCreateThreadContext = <
 }: ThreadContextValue<StreamChatGenerics>) => {
   const threadId = thread?.id;
   const threadReplyCount = thread?.reply_count;
-  const threadMessagesUpdated = threadMessages
-    .map(
-      ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
-        `${deleted_at}${
-          latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at.toISOString()}`,
-    )
-    .join();
+  const threadMessagesStr = reduceMessagesToString(threadMessages);
 
   const threadContext: ThreadContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -46,7 +40,7 @@ export const useCreateThreadContext = <
       threadHasMore,
       threadId,
       threadLoadingMore,
-      threadMessagesUpdated,
+      threadMessagesStr,
       threadReplyCount,
     ],
   );

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -55,6 +55,7 @@ describe('useChannelUpdated', () => {
       render(
         <ChatContext.Provider
           value={{
+            appSettings: null,
             client: mockClient,
             connectionRecovering: false,
             isOnline: true,