stream-chat-react-native-core 6.0.0-rc.9 → 6.0.0

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

@@ -0,0 +1,235 @@
+import { useCallback, useState } from 'react';
+
+import { Channel, ChannelState as StreamChannelState } from 'stream-chat';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { MessageType } from '../../MessageList/hooks/useMessageList';
+
+export const channelInitialState = {
+  hasMore: true,
+  hasMoreNewer: false,
+  loading: false,
+  loadingMore: false,
+  loadingMoreRecent: false,
+  members: {},
+  messages: [],
+  pinnedMessages: [],
+  read: {},
+  targetedMessageId: undefined,
+  typing: {},
+  watcherCount: 0,
+  watchers: {},
+};
+
+/**
+ * The ChannelMessagesState object
+ */
+export type ChannelMessagesState<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  hasMore?: boolean;
+  hasMoreNewer?: boolean;
+  loading?: boolean;
+  loadingMore?: boolean;
+  loadingMoreRecent?: boolean;
+  messages?: StreamChannelState<StreamChatGenerics>['messages'];
+  pinnedMessages?: StreamChannelState<StreamChatGenerics>['pinnedMessages'];
+  targetedMessageId?: string;
+};
+
+/**
+ * The ChannelThreadState object
+ */
+export type ChannelThreadState<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  thread: MessageType<StreamChatGenerics> | null;
+  threadHasMore?: boolean;
+  threadLoadingMore?: boolean;
+  threadMessages?: StreamChannelState<StreamChatGenerics>['messages'];
+};
+
+/**
+ * The ChannelState object
+ */
+export type ChannelState<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ChannelMessagesState<StreamChatGenerics> & {
+  members?: StreamChannelState<StreamChatGenerics>['members'];
+  read?: StreamChannelState<StreamChatGenerics>['read'];
+  typing?: StreamChannelState<StreamChatGenerics>['typing'];
+  watcherCount?: number;
+  watchers?: StreamChannelState<StreamChatGenerics>['watchers'];
+};
+
+/**
+ * The useChannelMessageDataState hook that handles the state for the channel messages.
+ */
+export const useChannelMessageDataState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  const [state, setState] = useState<ChannelMessagesState<StreamChatGenerics>>({
+    hasMore: true,
+    hasMoreNewer: false,
+    loading: false,
+    loadingMore: false,
+    loadingMoreRecent: false,
+    messages: channel?.state?.messages || [],
+    pinnedMessages: channel?.state?.pinnedMessages || [],
+    targetedMessageId: undefined,
+  });
+
+  const copyMessagesStateFromChannel = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      messages: [...channel.state.messages],
+      pinnedMessages: [...channel.state.pinnedMessages],
+    }));
+  }, []);
+
+  const loadInitialMessagesStateFromChannel = useCallback(
+    (channel: Channel<StreamChatGenerics>, hasMore: boolean) => {
+      setState((prev) => ({
+        ...prev,
+        hasMore,
+        loading: false,
+        messages: [...channel.state.messages],
+        pinnedMessages: [...channel.state.pinnedMessages],
+      }));
+    },
+    [],
+  );
+
+  const jumpToLatestMessage = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      hasMoreNewer: false,
+      loading: false,
+      targetedMessageId: undefined,
+    }));
+  }, []);
+
+  const jumpToMessageFinished = useCallback((hasMoreNewer: boolean, targetedMessageId: string) => {
+    setState((prev) => ({
+      ...prev,
+      hasMoreNewer,
+      loading: false,
+      targetedMessageId,
+    }));
+  }, []);
+
+  const loadMoreFinished = useCallback(
+    (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+      setState((prev) => ({
+        ...prev,
+        hasMore,
+        loadingMore: false,
+        messages,
+      }));
+    },
+    [],
+  );
+
+  const setLoadingMore = useCallback((loadingMore: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      loadingMore,
+    }));
+  }, []);
+
+  const setLoadingMoreRecent = useCallback((loadingMoreRecent: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      loadingMoreRecent,
+    }));
+  }, []);
+
+  const setLoading = useCallback((loading: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      loading,
+    }));
+  }, []);
+
+  const loadMoreRecentFinished = useCallback(
+    (hasMoreNewer: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+      setState((prev) => ({
+        ...prev,
+        hasMoreNewer,
+        loadingMoreRecent: false,
+        messages,
+      }));
+    },
+    [],
+  );
+
+  return {
+    copyMessagesStateFromChannel,
+    jumpToLatestMessage,
+    jumpToMessageFinished,
+    loadInitialMessagesStateFromChannel,
+    loadMoreFinished,
+    loadMoreRecentFinished,
+    setLoading,
+    setLoadingMore,
+    setLoadingMoreRecent,
+    state,
+  };
+};
+
+/**
+ * The useChannelThreadState hook that handles the state for the channel member, read, typing, watchers, etc.
+ */
+export const useChannelDataState = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  const [state, setState] = useState<ChannelState<StreamChatGenerics>>({
+    members: channel.state.members,
+    read: channel.state.read,
+    typing: {},
+    watcherCount: 0,
+    watchers: {},
+  });
+
+  const initStateFromChannel = useCallback(
+    (channel: Channel<StreamChatGenerics>) => {
+      setState({
+        ...state,
+        members: { ...channel.state.members },
+        read: { ...channel.state.read },
+        typing: { ...channel.state.typing },
+        watcherCount: channel.state.watcher_count,
+        watchers: { ...channel.state.watchers },
+      });
+    },
+    [state],
+  );
+
+  const copyStateFromChannel = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      members: { ...channel.state.members },
+      read: { ...channel.state.read },
+      watcherCount: channel.state.watcher_count,
+      watchers: { ...channel.state.watchers },
+    }));
+  }, []);
+
+  const setTyping = useCallback((channel: Channel<StreamChatGenerics>) => {
+    setState((prev) => ({
+      ...prev,
+      typing: { ...channel.state.typing }, // Synchronize the typing state from the channel
+    }));
+  }, []);
+
+  return {
+    copyStateFromChannel,
+    initStateFromChannel,
+    setTyping,
+    state,
+  };
+};

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

@@ -64,6 +64,7 @@ export const useCreateInputMessageInputContext = <
   showPollCreationDialog,
   ShowThreadMessageInChannelButton,
   StartAudioRecordingButton,
+  StopMessageStreamingButton,
   UploadProgressIndicator,
 }: InputMessageInputContextValue<StreamChatGenerics> & {
   /**
@@ -133,6 +134,7 @@ export const useCreateInputMessageInputContext = <
       showPollCreationDialog,
       ShowThreadMessageInChannelButton,
       StartAudioRecordingButton,
+      StopMessageStreamingButton,
       UploadProgressIndicator,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -49,6 +49,7 @@ export const useCreateMessagesContext = <
   InlineDateSeparator,
   InlineUnreadIndicator,
   isAttachmentEqual,
+  isMessageAIGenerated,
   legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
@@ -96,6 +97,7 @@ export const useCreateMessagesContext = <
   setEditingState,
   setQuotedMessageState,
   shouldShowUnreadUnderlay,
+  StreamingMessageView,
   supportedReactions,
   targetedMessage,
   TypingIndicator,
@@ -158,6 +160,7 @@ export const useCreateMessagesContext = <
       InlineDateSeparator,
       InlineUnreadIndicator,
       isAttachmentEqual,
+      isMessageAIGenerated,
       legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,
@@ -205,6 +208,7 @@ export const useCreateMessagesContext = <
       setEditingState,
       setQuotedMessageState,
       shouldShowUnreadUnderlay,
+      StreamingMessageView,
       supportedReactions,
       targetedMessage,
       TypingIndicator,

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

@@ -9,9 +9,9 @@ export const useCreatePaginatedMessageListContext = <
 >({
   channelId,
   hasMore,
-  hasNoMoreRecentMessagesToLoad,
   loadingMore,
   loadingMoreRecent,
+  loadLatestMessages,
   loadMore,
   loadMoreRecent,
   messages,
@@ -25,9 +25,9 @@ export const useCreatePaginatedMessageListContext = <
   const paginatedMessagesContext: PaginatedMessageListContextValue<StreamChatGenerics> = useMemo(
     () => ({
       hasMore,
-      hasNoMoreRecentMessagesToLoad,
       loadingMore,
       loadingMoreRecent,
+      loadLatestMessages,
       loadMore,
       loadMoreRecent,
       messages,
@@ -35,14 +35,7 @@ export const useCreatePaginatedMessageListContext = <
       setLoadingMoreRecent,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      channelId,
-      hasMore,
-      loadingMoreRecent,
-      loadingMore,
-      hasNoMoreRecentMessagesToLoad,
-      messagesStr,
-    ],
+    [channelId, hasMore, loadingMore, loadingMoreRecent, messagesStr],
   );
 
   return paginatedMessagesContext;

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -0,0 +1,246 @@
+import { useRef } from 'react';
+
+import debounce from 'lodash/debounce';
+import { Channel, ChannelState } from 'stream-chat';
+
+import { useChannelMessageDataState } from './useChannelDataState';
+
+import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+const defaultDebounceInterval = 500;
+const debounceOptions = {
+  leading: true,
+  trailing: true,
+};
+
+/**
+ * The useMessageListPagination hook handles pagination for the message list.
+ * It provides functionality to load more messages, load more recent messages, load latest messages, and load channel around a specific message.
+ *
+ * @param channel The channel object for which the message list pagination is being handled.
+ */
+export const useMessageListPagination = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channel,
+}: {
+  channel: Channel<StreamChatGenerics>;
+}) => {
+  const {
+    copyMessagesStateFromChannel,
+    jumpToLatestMessage,
+    jumpToMessageFinished,
+    loadInitialMessagesStateFromChannel,
+    loadMoreFinished: loadMoreFinishedFn,
+    loadMoreRecentFinished: loadMoreRecentFinishedFn,
+    setLoading,
+    setLoadingMore,
+    setLoadingMoreRecent,
+    state,
+  } = useChannelMessageDataState<StreamChatGenerics>(channel);
+
+  // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
+  const loadMoreFinished = useRef(
+    debounce(
+      (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+        loadMoreFinishedFn(hasMore, messages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
+
+  // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
+  const loadMoreRecentFinished = useRef(
+    debounce(
+      (hasMore: boolean, newMessages: ChannelState<StreamChatGenerics>['messages']) => {
+        loadMoreRecentFinishedFn(hasMore, newMessages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
+
+  /**
+   * This function loads the latest messages in the channel.
+   */
+  const loadLatestMessages = async () => {
+    try {
+      setLoading(true);
+      await channel.state.loadMessageIntoState('latest');
+      loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+      jumpToLatestMessage();
+    } catch (err) {
+      console.warn('Loading latest messages failed with error:', err);
+    }
+  };
+
+  /**
+   * This function loads more messages before the first message in current channel state.
+   */
+  const loadMore = async (limit = 20) => {
+    if (!channel.state.messagePagination.hasPrev) {
+      return;
+    }
+
+    if (state.loadingMore || state.loadingMoreRecent) {
+      return;
+    }
+
+    setLoadingMore(true);
+    const oldestMessage = state.messages?.[0];
+    const oldestID = oldestMessage?.id;
+
+    try {
+      await channel.query({
+        messages: { id_lt: oldestID, limit },
+        watchers: { limit },
+      });
+      loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+      setLoadingMore(false);
+    } catch (e) {
+      setLoadingMore(false);
+      console.warn('Message pagination(fetching old messages) request failed with error:', e);
+    }
+  };
+
+  /**
+   * This function loads more messages after the most recent message in current channel state.
+   */
+  const loadMoreRecent = async (limit = 10) => {
+    if (!channel.state.messagePagination.hasNext) {
+      return;
+    }
+
+    if (state.loadingMore || state.loadingMoreRecent) {
+      return;
+    }
+
+    setLoadingMoreRecent(true);
+    const newestMessage = state.messages?.[state?.messages.length - 1];
+    const newestID = newestMessage?.id;
+
+    try {
+      await channel.query({
+        messages: { id_gt: newestID, limit },
+        watchers: { limit },
+      });
+      loadMoreRecentFinished(channel.state.messagePagination.hasNext, channel.state.messages);
+    } catch (e) {
+      setLoadingMoreRecent(false);
+      console.warn('Message pagination(fetching new messages) request failed with error:', e);
+      return;
+    }
+  };
+
+  /**
+   * Loads channel around a specific message
+   *
+   * @param messageId If undefined, channel will be loaded at most recent message.
+   */
+  const loadChannelAroundMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAroundMessage'] =
+    async ({ limit = 25, messageId: messageIdToLoadAround, setTargetedMessage }) => {
+      if (!messageIdToLoadAround) return;
+      setLoadingMore(true);
+      setLoading(true);
+      try {
+        await channel.state.loadMessageIntoState(messageIdToLoadAround, undefined, limit);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+        jumpToMessageFinished(channel.state.messagePagination.hasNext, messageIdToLoadAround);
+
+        if (setTargetedMessage) {
+          setTargetedMessage(messageIdToLoadAround);
+        }
+      } catch (error) {
+        console.warn(
+          'Message pagination(fetching messages in the channel around a message id) request failed with error:',
+          error,
+        );
+        return;
+      }
+    };
+
+  /**
+   * Loads channel at first unread message.
+   */
+  const loadChannelAtFirstUnreadMessage = async ({
+    limit = 25,
+    setTargetedMessage,
+  }: {
+    limit?: number;
+    setTargetedMessage?: (messageId: string) => void;
+  }) => {
+    let unreadMessageIdToScrollTo: string | undefined;
+    const unreadCount = channel.countUnread();
+    if (unreadCount === 0) return;
+    const isLatestMessageSetShown = !!channel.state.messageSets.find(
+      (set) => set.isCurrent && set.isLatest,
+    );
+
+    if (isLatestMessageSetShown && unreadCount <= channel.state.messages.length) {
+      unreadMessageIdToScrollTo =
+        channel.state.messages[channel.state.messages.length - unreadCount].id;
+      if (unreadMessageIdToScrollTo) {
+        setLoadingMore(true);
+        await channel.state.loadMessageIntoState(unreadMessageIdToScrollTo, undefined, limit);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+        jumpToMessageFinished(channel.state.messagePagination.hasNext, unreadMessageIdToScrollTo);
+        if (setTargetedMessage) {
+          setTargetedMessage(unreadMessageIdToScrollTo);
+        }
+      }
+      return;
+    }
+    const lastReadDate = channel.lastRead();
+    let messages;
+    if (lastReadDate) {
+      try {
+        messages = (
+          await channel.query(
+            {
+              messages: {
+                created_at_around: lastReadDate,
+                limit: 30,
+              },
+              watch: true,
+            },
+            'new',
+          )
+        ).messages;
+
+        unreadMessageIdToScrollTo = messages.find(
+          (m) => lastReadDate < (m.created_at ? new Date(m.created_at) : new Date()),
+        )?.id;
+        if (unreadMessageIdToScrollTo) {
+          setLoadingMore(true);
+          await channel.state.loadMessageIntoState(unreadMessageIdToScrollTo, undefined, limit);
+          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+          jumpToMessageFinished(channel.state.messagePagination.hasNext, unreadMessageIdToScrollTo);
+          if (setTargetedMessage) {
+            setTargetedMessage(unreadMessageIdToScrollTo);
+          }
+        }
+      } catch (error) {
+        console.warn(
+          'Message pagination(fetching messages in the channel around unread message) request failed with error:',
+          error,
+        );
+        return;
+      }
+    } else {
+      await loadLatestMessages();
+    }
+  };
+
+  return {
+    copyMessagesStateFromChannel,
+    loadChannelAroundMessage,
+    loadChannelAtFirstUnreadMessage,
+    loadInitialMessagesStateFromChannel,
+    loadLatestMessages,
+    loadMore,
+    loadMoreRecent,
+    state,
+  };
+};

package/src/components/ChannelList/Skeleton.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import Animated, {
   Easing,
+  useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -114,6 +115,13 @@ export const Skeleton = () => {
     } a${boneRadius} ${boneRadius} 0 1 0 0 -${boneHeight}z`;
   }, []);
 
+  const svgAnimatedProps = useAnimatedProps(
+    () => ({
+      d: d.value,
+    }),
+    [d],
+  );
+
   return (
     <View
       style={[styles.container, { borderBottomColor: border }, container]}
@@ -140,7 +148,7 @@ export const Skeleton = () => {
         </Svg>
       </Animated.View>
       <Svg height={height} width={width}>
-        <Path d={d.value} fill={maskFillColor || white_snow} />
+        <Path {...svgAnimatedProps} fill={maskFillColor || white_snow} />
       </Svg>
     </View>
   );

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -191,30 +191,33 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    const loadOfflineChannels = () => {
+    const loadOfflineChannels = async () => {
       if (!client?.user?.id) return;
 
-      getChannelsForFilterSort({
-        currentUserId: client.user.id,
-        filters,
-        sort,
-      })
-        .then((channelsFromDB) => {
-          if (channelsFromDB) {
-            const offlineChannels = client.hydrateActiveChannels(channelsFromDB, {
-              offlineMode: true,
-              skipInitialization: [], // passing empty array will clear out the existing messages from channel state, this removes the possibility of duplicate messages
-            });
-
-            setChannels(offlineChannels);
-            setStaticChannelsActive(true);
-          }
-        })
-        .catch((e) => {
-          console.warn('Failed to get channels from database: ', e);
+      try {
+        const channelsFromDB = await getChannelsForFilterSort({
+          currentUserId: client.user.id,
+          filters,
+          sort,
         });
 
+        if (channelsFromDB) {
+          const offlineChannels = client.hydrateActiveChannels(channelsFromDB, {
+            offlineMode: true,
+            skipInitialization: [], // passing empty array will clear out the existing messages from channel state, this removes the possibility of duplicate messages
+          });
+
+          setChannels(offlineChannels);
+          setStaticChannelsActive(true);
+        }
+      } catch (e) {
+        console.warn('Failed to get channels from database: ', e);
+        return false;
+      }
+
       setActiveQueryType(null);
+
+      return true;
     };
 
     let listener: ReturnType<typeof DBSyncManager.onSyncStatusChange>;
@@ -223,20 +226,24 @@ export const usePaginatedChannels = <
       // and then call queryChannels to ensure any new channels are added to UI.
       listener = DBSyncManager.onSyncStatusChange(async (syncStatus) => {
         if (syncStatus) {
-          loadOfflineChannels();
-          await reloadList();
-          setForceUpdate((u) => u + 1);
+          const loadingChannelsSucceeded = await loadOfflineChannels();
+          if (loadingChannelsSucceeded) {
+            await reloadList();
+            setForceUpdate((u) => u + 1);
+          }
         }
       });
       // On start, load the channels from local db.
-      loadOfflineChannels();
-
-      // If db is already synced (sync api and pending api calls), then
-      // right away call queryChannels.
-      const dbSyncStatus = DBSyncManager.getSyncStatus();
-      if (dbSyncStatus) {
-        reloadList();
-      }
+      loadOfflineChannels().then((success) => {
+        // If db is already synced (sync api and pending api calls), then
+        // right away call queryChannels.
+        if (success) {
+          const dbSyncStatus = DBSyncManager.getSyncStatus();
+          if (dbSyncStatus) {
+            reloadList();
+          }
+        }
+      });
     } else {
       listener = client.on('connection.changed', async (event) => {
         if (event.online) {