stream-chat-react-native-core 5.23.1 → 5.23.2-beta.2

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,20 +1,29 @@
-import React from 'react';
-import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import {
+  LayoutChangeEvent,
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
 import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
 
 import {
-  isSuggestionCommand,
-  isSuggestionEmoji,
   isSuggestionUser,
   Suggestion,
   SuggestionsContextValue,
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { FlatList } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT = 30;
+
 type AutoCompleteSuggestionListComponentProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
@@ -31,9 +40,19 @@ export type AutoCompleteSuggestionListPropsWithContext<
 > &
   AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
 
-const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
-  const { children, ...touchableOpacityProps } = props;
-  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;
+const SuggestionsItem: React.FC<PressableProps> = (props) => {
+  const { children, style: propsStyle, ...pressableProps } = props;
+
+  const style = ({ pressed }: PressableStateCallbackType) => [
+    propsStyle as ViewStyle,
+    { opacity: pressed ? 0.2 : 1 },
+  ];
+
+  return (
+    <Pressable {...pressableProps} style={style}>
+      {children}
+    </Pressable>
+  );
 };
 
 SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
@@ -43,6 +62,7 @@ export const AutoCompleteSuggestionListWithContext = <
 >(
   props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
 ) => {
+  const [itemHeight, setItemHeight] = useState<number>(0);
   const {
     active,
     AutoCompleteSuggestionHeader,
@@ -55,6 +75,7 @@ export const AutoCompleteSuggestionListWithContext = <
 
   const {
     theme: {
+      colors: { white },
       messageInput: {
         container: { maxHeight },
         suggestions: { item: itemStyle },
@@ -63,62 +84,37 @@ export const AutoCompleteSuggestionListWithContext = <
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: Suggestion<StreamChatGenerics> }) => {
+  const flatlistHeight = useMemo(() => {
+    let totalItemHeight;
+    if (triggerType === 'emoji') {
+      totalItemHeight = data.length < 7 ? data.length * itemHeight : itemHeight * 6;
+    } else {
+      totalItemHeight = data.length < 4 ? data.length * itemHeight : itemHeight * 3;
+    }
+
+    return triggerType === 'emoji' || triggerType === 'command'
+      ? totalItemHeight + AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT
+      : totalItemHeight;
+  }, [itemHeight, data.length]);
+
+  const renderItem = ({ item }: { item: Suggestion<StreamChatGenerics> }) => {
     switch (triggerType) {
-      case 'mention':
-        if (isSuggestionUser(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[
-                {
-                  paddingBottom: index === data.length - 1 ? 8 : 0,
-                  paddingTop: index === 0 ? 8 : 0,
-                },
-                itemStyle,
-              ]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
       case 'command':
-        if (isSuggestionCommand(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[itemStyle]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
+      case 'mention':
       case 'emoji':
-        if (isSuggestionEmoji(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[itemStyle]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
+        return (
+          <SuggestionsItem
+            onLayout={(event: LayoutChangeEvent) => setItemHeight(event.nativeEvent.layout.height)}
+            onPress={() => {
+              onSelect(item);
+            }}
+            style={itemStyle}
+          >
+            {AutoCompleteSuggestionItem && (
+              <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+            )}
+          </SuggestionsItem>
+        );
       default:
         return null;
     }
@@ -127,20 +123,22 @@ export const AutoCompleteSuggestionListWithContext = <
   if (!active || data.length === 0) return null;
 
   return (
-    <FlatList
-      data={data}
-      keyboardShouldPersistTaps='always'
-      keyExtractor={(item, index) =>
-        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
-      }
-      ListHeaderComponent={
-        AutoCompleteSuggestionHeader ? (
-          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
-        ) : null
-      }
-      renderItem={renderItem}
-      style={[flatlist, { maxHeight }]}
-    />
+    <View style={[styles.container, { backgroundColor: white, height: flatlistHeight }]}>
+      <FlatList
+        data={data}
+        keyboardShouldPersistTaps='always'
+        keyExtractor={(item, index) =>
+          `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
+        }
+        ListHeaderComponent={
+          AutoCompleteSuggestionHeader ? (
+            <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
+          ) : null
+        }
+        renderItem={renderItem}
+        style={[flatlist, { maxHeight }]}
+      />
+    </View>
   );
 };
 
@@ -206,5 +204,16 @@ export const AutoCompleteSuggestionList = <
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    elevation: 3,
+    marginHorizontal: 8,
+    marginVertical: 8,
+    shadowOffset: { height: 1, width: 0 },
+    shadowOpacity: 0.15,
+  },
+});
+
 AutoCompleteSuggestionList.displayName =
   'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

package/src/components/Channel/Channel.tsx

@@ -777,15 +777,18 @@ const ChannelWithContext = <
   useEffect(() => {
     const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
       if (shouldSyncChannel) {
-        if (thread) {
-          const updatedThreadMessages =
-            (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
-          setThreadMessages(updatedThreadMessages);
-        }
+        const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
+        if (!isTypingEvent) {
+          if (thread?.id) {
+            const updatedThreadMessages =
+              (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
+            setThreadMessages(updatedThreadMessages);
+          }
 
-        if (channel && thread && event.message?.id === thread.id) {
-          const updatedThread = channel.state.formatMessage(event.message);
-          setThread(updatedThread);
+          if (channel && thread?.id && event.message?.id === thread.id) {
+            const updatedThread = channel.state.formatMessage(event.message);
+            setThread(updatedThread);
+          }
         }
 
         // only update channel state if the events are not the previously subscribed useEffect's subscription events
@@ -1097,11 +1100,11 @@ const ChannelWithContext = <
     channelQueryCallRef.current(async () => {
       if (!channel?.initialized || !channel.state.isUpToDate) {
         await channel?.watch();
+        channel?.state.setIsUpToDate(true);
+        setHasNoMoreRecentMessagesToLoad(true);
       } else {
-        await loadLatestMessagesRef.current(true);
+        await channel.state.loadMessageIntoState('latest');
       }
-      channel?.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
     });
 
   const reloadThread = async () => {
@@ -1999,11 +2002,14 @@ const ChannelWithContext = <
   /**
    * THREAD METHODS
    */
-  const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = (message) => {
-    const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
-    setThread(message);
-    setThreadMessages(newThreadMessages);
-  };
+  const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = useCallback(
+    (message) => {
+      const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
+      setThread(message);
+      setThreadMessages(newThreadMessages);
+    },
+    [setThread, setThreadMessages],
+  );
 
   const closeThread: ThreadContextValue<StreamChatGenerics>['closeThread'] = useCallback(() => {
     setThread(null);
@@ -2365,7 +2371,6 @@ export const Channel = <
 
   return (
     <ChannelWithContext<StreamChatGenerics>
-      key={props.channel?.cid}
       {...{
         client,
         enableOfflineSupport,

package/src/components/MessageInput/MessageInput.tsx

@@ -73,20 +73,18 @@ const styles = StyleSheet.create({
   replyContainer: { paddingBottom: 12, paddingHorizontal: 8 },
   sendButtonContainer: { paddingBottom: 10, paddingLeft: 10 },
   suggestionsListContainer: {
-    borderRadius: 10,
-    elevation: 3,
-    left: 8,
     position: 'absolute',
-    right: 8,
-    shadowOffset: { height: 1, width: 0 },
-    shadowOpacity: 0.15,
+    width: '100%',
   },
 });
 
 type MessageInputPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
-  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled' | 'members' | 'watchers'> &
+  Pick<
+    ChannelContextValue<StreamChatGenerics>,
+    'disabled' | 'members' | 'threadList' | 'watchers'
+  > &
   Pick<
     MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
@@ -137,9 +135,7 @@ type MessageInputPropsWithContext<
     | 'triggerType'
   > &
   Pick<ThreadContextValue<StreamChatGenerics>, 'thread'> &
-  Pick<TranslationContextValue, 't'> & {
-    threadList?: boolean;
-  };
+  Pick<TranslationContextValue, 't'>;
 
 const MessageInputWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -624,11 +620,7 @@ const MessageInputWithContext = <
 
       {triggerType && suggestions ? (
         <View
-          style={[
-            suggestionListContainer,
-            styles.suggestionsListContainer,
-            { backgroundColor: white, bottom: height },
-          ]}
+          style={[styles.suggestionsListContainer, suggestionListContainer, { bottom: height }]}
         >
           <AutoCompleteSuggestionList
             active={!!suggestions}
@@ -800,7 +792,12 @@ export const MessageInput = <
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { disabled = false, members, watchers } = useChannelContext<StreamChatGenerics>();
+  const {
+    disabled = false,
+    members,
+    threadList,
+    watchers,
+  } = useChannelContext<StreamChatGenerics>();
 
   const {
     additionalTextInputProps,
@@ -909,6 +906,7 @@ export const MessageInput = <
         suggestions,
         t,
         thread,
+        threadList,
         triggerType,
         uploadNewFile,
         uploadNewImage,

package/src/components/MessageList/MessageList.tsx

@@ -132,6 +132,7 @@ type MessageListPropsWithContext<
     | 'setTargetedMessage'
     | 'StickyHeader'
     | 'targetedMessage'
+    | 'threadList'
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
@@ -215,10 +216,6 @@ type MessageListPropsWithContext<
      * ```
      */
     setFlatListRef?: (ref: FlatListType<MessageType<StreamChatGenerics>> | null) => void;
-    /**
-     * Boolean whether or not the Messages in the MessageList are part of a Thread
-     **/
-    threadList?: boolean;
   };
 
 /**
@@ -545,7 +542,11 @@ const MessageListWithContext = <
 
   useEffect(() => {
     if (!rawMessageList.length) return;
-    const notLatestSet = !threadList && channel.state.messages !== channel.state.latestMessages;
+    if (threadList) {
+      setAutoscrollToRecent(true);
+      return;
+    }
+    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
     if (notLatestSet) {
       latestNonCurrentMessageBeforeUpdateRef.current =
         channel.state.latestMessages[channel.state.latestMessages.length - 1];
@@ -729,10 +730,8 @@ const MessageListWithContext = <
     // If onEndReached is in progress, better to wait for it to finish for smooth UX
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
-      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
-    } else {
-      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
     }
+    onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
   };
 
   /**
@@ -765,14 +764,10 @@ const MessageListWithContext = <
     // If onStartReached is in progress, better to wait for it to finish for smooth UX
     if (onStartReachedInPromise.current) {
       await onStartReachedInPromise.current;
-      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-        .then(callback)
-        .catch(onError);
-    } else {
-      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-        .then(callback)
-        .catch(onError);
     }
+    onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
+      .then(callback)
+      .catch(onError);
   };
 
   const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = (event) => {
@@ -1226,6 +1221,7 @@ export const MessageList = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
+    threadList,
   } = useChannelContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();
   const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
@@ -1294,6 +1290,7 @@ export const MessageList = <
         targetedMessage,
         tDateTimeParser,
         thread,
+        threadList,
         TypingIndicator,
         TypingIndicatorContainer,
       }}

package/src/components/MessageList/hooks/useMessageList.ts

@@ -106,11 +106,11 @@ export const useMessageList = <
   const processedMessageList = [
     ...messagesWithStylesReadByAndDateSeparator,
   ].reverse() as MessageType<StreamChatGenerics>[];
-  const rawMessageList = messageList;
+
   return {
     /** Messages enriched with dates/readby/groups and also reversed in order */
     processedMessageList,
     /** Raw messages from the channel state */
-    rawMessageList,
+    rawMessageList: messageList,
   };
 };

package/src/i18n/en.json

@@ -24,7 +24,7 @@
   "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.",
+  "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",
   "How about sending your first message to a friend?": "How about sending your first message to a friend?",
   "Instant Commands": "Instant Commands",
   "Let's start chatting!": "Let's start chatting!",

package/src/i18n/fr.json

@@ -4,73 +4,73 @@
   "Allow access to your Gallery": "Autoriser l'accès à votre galerie",
   "Allow camera access in device settings": "Autoriser l'accès à la caméra dans les paramètres de l'appareil",
   "Also send to channel": "Envoyer également à la chaîne",
-  "Are you sure you want to permanently delete this message?": "Êtes-vous sûr de vouloir supprimer définitivement ce message?",
-  "Block User": "Bloquer un utilisateur",
-  "Cancel": "Annuler",
-  "Cannot Flag Message": "Impossible de signaler le message",
-  "Copy Message": "Copier le message",
-  "Delete": "Supprimer",
-  "Delete Message": "Supprimer un message",
+  "Are you sure you want to permanently delete this message?": "",
+  "Block User": "",
+  "Cancel": "",
+  "Cannot Flag Message": "",
+  "Copy Message": "",
+  "Delete": "",
+  "Delete Message": "",
   "Device camera is used to take photos or videos.": "L'appareil photo de l'appareil est utilisé pour prendre des photos ou des vidéos.",
-  "Do you want to send a copy of this message to a moderator for further investigation?": "Voulez-vous envoyer une copie de ce message à un modérateur pour une enquête plus approfondie?",
-  "Edit Message": "Éditer un message",
-  "Editing Message": "Édite un message",
+  "Do you want to send a copy of this message to a moderator for further investigation?": "",
+  "Edit Message": "",
+  "Editing Message": "",
   "Emoji matching": "Correspondance Emoji",
-  "Empty message...": "Message vide...",
-  "Error loading": "Erreur lors du chargement",
-  "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é.",
-  "How about sending your first message to a friend?": "Et si vous envoyiez votre premier message à un ami ?",
+  "Empty message...": "",
+  "Error loading": "",
+  "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": "",
+  "How about sending your first message to a friend?": "",
   "Instant Commands": "Commandes Instantanées",
-  "Let's start chatting!": "Commençons à discuter !",
+  "Let's start chatting!": "",
   "Links are disabled": "Links are disabled",
   "Loading channels...": "Chargement des canaux...",
   "Loading messages...": "Chargement des messages...",
   "Loading...": "Chargement...",
   "Maximum file size upload limit reached. Please upload a file below {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} MB.": "Taille maximale de téléchargement de fichier atteinte. Veuillez télécharger un fichier inférieur à {{MAX_FILE_SIZE_TO_UPLOAD_IN_MB}} Mo.",
-  "Message Reactions": "Réactions aux messages",
-  "Message deleted": "Message supprimé",
-  "Message flagged": "Message signalé",
-  "Mute User": "Utilisateur muet",
+  "Message Reactions": "",
+  "Message deleted": "",
+  "Message flagged": "",
+  "Mute User": "",
   "Not supported": "Non pris en charge",
-  "Nothing yet...": "Aucun message...",
-  "Ok": "Ok",
-  "Only visible to you": "Seulement visible par vous",
+  "Nothing yet...": "",
+  "Ok": "",
+  "Only visible to you": "",
   "Open Settings": "Ouvrir les paramètres",
-  "Photo": "Photo",
+  "Photo": "",
   "Photos and Videos": "Photos et vidéos",
-  "Pin to Conversation": "Épingler à la conversation",
-  "Pinned by": "Épinglé par",
+  "Pin to Conversation": "",
+  "Pinned by": "",
   "Please enable access to your photos and videos so you can share them.": "Veuillez autoriser l'accès à vos photos et vidéos afin de pouvoir les partager.",
-  "Please select a channel first": "Veuillez d'abord selectionnez un canal",
-  "Reconnecting...": "Se Reconnecter...",
-  "Reply": "Répondre",
-  "Reply to Message": "Répondre au message",
-  "Resend": "Renvoyer",
-  "Search GIFs": "Rechercher des GIF",
+  "Please select a channel first": "",
+  "Reconnecting...": "",
+  "Reply": "",
+  "Reply to Message": "",
+  "Resend": "",
+  "Search GIFs": "",
   "Select More Photos": "Sélectionner plus de photos",
-  "Send a message": "Envoyer un message",
+  "Send a message": "",
   "Sending links is not allowed in this conversation": "Sending links is not allowed in this conversation",
-  "Slow mode ON": "Mode lent activé",
-  "The message has been reported to a moderator.": "Le message a été signalé à un modérateur.",
-  "Thread Reply": "Réponse à la discussion",
-  "Unblock User": "Débloquer Utilisateur",
+  "Slow mode ON": "",
+  "The message has been reported to a moderator.": "",
+  "Thread Reply": "",
+  "Unblock User": "",
   "Unknown User": "Utilisateur inconnu",
-  "Unmute User": "Activer le son de Utilisateur",
-  "Unpin from Conversation": "Décrocher de la conversation",
+  "Unmute User": "",
+  "Unpin from Conversation": "",
   "Unread Messages": "Messages non lus",
-  "Video": "Vidéo",
-  "You": "Toi",
-  "You can't send messages in this channel": "You can't send messages in this channel",
-  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} et {{ nonSelfUserLength }} autres sont en train d'écrire",
+  "Video": "",
+  "You": "",
+  "You can't send messages in this channel": "",
+  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "",
   "{{ index }} of {{ photoLength }}": "{{ index }} sur {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Réponses",
   "{{ replyCount }} Thread Replies": "{{replyCount}} Réponses à la discussion",
-  "{{ user }} is typing": "{{ user }} est en train d'écrire",
-  "🏙 Attachment...": "🏙 Pièce jointe..."
+  "{{ user }} is typing": "",
+  "🏙 Attachment...": ""
 }