stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/src/components/Channel/Channel.tsx

@@ -11,7 +11,7 @@ import {
   ChannelState,
   Channel as ChannelType,
   EventHandler,
-  FormatMessageResponse,
+  LocalMessage,
   MessageLabel,
   MessageResponse,
   Reaction,
@@ -75,6 +75,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 import { TypingProvider } from '../../contexts/typingContext/TypingContext';
+import { useStableCallback } from '../../hooks';
 import { useAppStateListener } from '../../hooks/useAppStateListener';
 
 import {
@@ -118,6 +119,7 @@ import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
 import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicator as ImageReloadIndicatorDefault } from '../Attachment/ImageReloadIndicator';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
@@ -169,7 +171,6 @@ import { ShowThreadMessageInChannelButton as ShowThreadMessageInChannelButtonDef
 import { StopMessageStreamingButton as DefaultStopMessageStreamingButton } from '../MessageInput/StopMessageStreamingButton';
 import { UploadProgressIndicator as UploadProgressIndicatorDefault } from '../MessageInput/UploadProgressIndicator';
 import { DateHeader as DateHeaderDefault } from '../MessageList/DateHeader';
-import type { MessageType } from '../MessageList/hooks/useMessageList';
 import { InlineDateSeparator as InlineDateSeparatorDefault } from '../MessageList/InlineDateSeparator';
 import { InlineUnreadIndicator as InlineUnreadIndicatorDefault } from '../MessageList/InlineUnreadIndicator';
 import { MessageList as MessageListDefault } from '../MessageList/MessageList';
@@ -320,6 +321,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'legacyImageViewerSwipeBehaviour'
       | 'ImageLoadingFailedIndicator'
       | 'ImageLoadingIndicator'
+      | 'ImageReloadIndicator'
       | 'markdownRules'
       | 'Message'
       | 'MessageActionList'
@@ -551,7 +553,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleRetry,
     handleThreadReply,
     hasCameraPicker = isImagePickerAvailable(),
-    hasCommands = true,
+    hasCommands,
     hasCreatePoll,
     // If pickDocument isn't available, default to hiding the file picker
     hasFilePicker = isDocumentPickerAvailable(),
@@ -560,6 +562,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     hideStickyDateHeader = false,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
     ImageLoadingIndicator = ImageLoadingIndicatorDefault,
+    ImageReloadIndicator = ImageReloadIndicatorDefault,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialScrollToFirstUnreadMessage = false,
     initialValue,
@@ -684,11 +687,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     },
   } = useTheme();
   const [deleted, setDeleted] = useState<boolean>(false);
-  const [editing, setEditing] = useState<MessageType | undefined>(undefined);
+  const [editing, setEditing] = useState<LocalMessage | undefined>(undefined);
   const [error, setError] = useState<Error | boolean>(false);
-  const [lastRead, setLastRead] = useState<ChannelContextValue['lastRead']>();
-  const [quotedMessage, setQuotedMessage] = useState<MessageType | undefined>(undefined);
-  const [thread, setThread] = useState<MessageType | null>(threadProps || null);
+  const [lastRead, setLastRead] = useState<Date | undefined>();
+
+  const [quotedMessage, setQuotedMessage] = useState<LocalMessage | undefined>(undefined);
+  const [thread, setThread] = useState<LocalMessage | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
   const [threadLoadingMore, setThreadLoadingMore] = useState(false);
   const [channelUnreadState, setChannelUnreadState] = useState<ChannelUnreadState | undefined>(
@@ -705,6 +709,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
    * Its a map of filename to AbortController
    */
   const uploadAbortControllerRef = useRef<Map<string, AbortController>>(new Map());
+  /**
+   * This ref keeps track of message IDs which have already been optimistically updated.
+   * We need it to make sure we don't react on message.new/notification.message_new events
+   * if this is indeed the case, as it's a full list update for nothing.
+   */
+  const optimisticallyUpdatedNewMessages = useMemo<Set<string>>(() => new Set(), []);
 
   const channelId = channel?.id || '';
   const pollCreationEnabled = !channel.disconnected && !!channel?.id && channel?.getConfig()?.polls;
@@ -730,14 +740,33 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     channel,
   });
 
-  /**
-   * Since we copy the current channel state all together, we need to find the greatest time among the below two and apply it as the throttling time for copying the channel state.
-   * This is done until we remove the newMessageStateUpdateThrottleInterval prop.
-   */
-  const copyChannelStateThrottlingTime =
-    newMessageStateUpdateThrottleInterval > stateUpdateThrottleInterval
-      ? newMessageStateUpdateThrottleInterval
-      : stateUpdateThrottleInterval;
+  const setReadThrottled = useMemo(
+    () =>
+      throttle(
+        () => {
+          if (channel) {
+            setRead(channel);
+          }
+        },
+        stateUpdateThrottleInterval,
+        throttleOptions,
+      ),
+    [channel, stateUpdateThrottleInterval, setRead],
+  );
+
+  const copyMessagesStateFromChannelThrottled = useMemo(
+    () =>
+      throttle(
+        () => {
+          if (channel) {
+            copyMessagesStateFromChannel(channel);
+          }
+        },
+        newMessageStateUpdateThrottleInterval,
+        throttleOptions,
+      ),
+    [channel, newMessageStateUpdateThrottleInterval, copyMessagesStateFromChannel],
+  );
 
   const copyChannelState = useMemo(
     () =>
@@ -748,13 +777,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
             copyMessagesStateFromChannel(channel);
           }
         },
-        copyChannelStateThrottlingTime,
+        stateUpdateThrottleInterval,
         throttleOptions,
       ),
-    [channel, copyChannelStateThrottlingTime, copyMessagesStateFromChannel, copyStateFromChannel],
+    [stateUpdateThrottleInterval, channel, copyStateFromChannel, copyMessagesStateFromChannel],
   );
 
-  const handleEvent: EventHandler = (event) => {
+  const handleEvent: EventHandler = useStableCallback((event) => {
     if (shouldSyncChannel) {
       /**
        * Ignore user.watching.start and user.watching.stop as we should not copy the entire state when
@@ -770,9 +799,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       }
 
       // If the event is typing.start or typing.stop, set the typing state
-      const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
-      if (isTypingEvent) {
-        setTyping(channel);
+      if (event.type === 'typing.start' || event.type === 'typing.stop') {
+        if (event.user?.id !== client.userID) {
+          setTyping(channel);
+        }
+        return;
       } else {
         if (thread?.id) {
           const updatedThreadMessages =
@@ -806,17 +837,35 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
       // only update channel state if the events are not the previously subscribed useEffect's subscription events
       if (channel && channel.initialized) {
+        // we skip the new message events if we've already done an optimistic update for the new message
+        if (event.type === 'message.new' || event.type === 'notification.message_new') {
+          const messageId = event.message?.id ?? '';
+          if (
+            event.user?.id !== client.userID ||
+            !optimisticallyUpdatedNewMessages.has(messageId)
+          ) {
+            copyMessagesStateFromChannelThrottled();
+          }
+          optimisticallyUpdatedNewMessages.delete(messageId);
+          return;
+        }
+
+        if (event.type === 'message.read' || event.type === 'notification.mark_read') {
+          setReadThrottled();
+          return;
+        }
+
         copyChannelState();
       }
     }
-  };
+  });
 
   useEffect(() => {
     let listener: ReturnType<typeof channel.on>;
     const initChannel = async () => {
       setLastRead(new Date());
       const unreadCount = channel.countUnread();
-      if (!channel || !shouldSyncChannel || channel.offlineMode) {
+      if (!channel || !shouldSyncChannel) {
         return;
       }
       let errored = false;
@@ -887,20 +936,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     return unsubscribe;
   }, [channel?.cid, client]);
 
-  /**
-   * Subscription to the Notification mark_read event.
-   */
-  useEffect(() => {
-    const handleEvent: EventHandler = (event) => {
-      if (channel.cid === event.cid) {
-        setRead(channel);
-      }
-    };
-
-    const { unsubscribe } = client.on('notification.mark_read', handleEvent);
-    return unsubscribe;
-  }, [channel, client, setRead]);
-
   const threadPropsExists = !!threadProps;
 
   useEffect(() => {
@@ -931,7 +966,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   /**
    * CHANNEL METHODS
    */
-  const markRead: ChannelContextValue['markRead'] = throttle(
+  const markReadInternal: ChannelContextValue['markRead'] = throttle(
     async (options?: MarkReadFunctionOptions) => {
       const { updateChannelUnreadState = true } = options ?? {};
       if (!channel || channel?.disconnected || !clientChannelConfig?.read_events) {
@@ -949,6 +984,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
               last_read_message_id: response?.event.last_read_message_id,
               unread_messages: 0,
             });
+            setLastRead(new Date());
           }
         } catch (err) {
           console.log('Error marking channel as read:', err);
@@ -959,7 +995,9 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     throttleOptions,
   );
 
-  const reloadThread = async () => {
+  const markRead = useStableCallback(markReadInternal);
+
+  const reloadThread = useStableCallback(async () => {
     if (!channel || !thread?.id) {
       return;
     }
@@ -992,9 +1030,9 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       setThreadLoadingMore(false);
       throw err;
     }
-  };
+  });
 
-  const resyncChannel = async () => {
+  const resyncChannel = useStableCallback(async () => {
     if (!channel || syncingChannelRef.current) {
       return;
     }
@@ -1009,7 +1047,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       });
     }
 
-    const parseMessage = (message: FormatMessageResponse) =>
+    const parseMessage = (message: LocalMessage) =>
       ({
         ...message,
         created_at: message.created_at.toString(),
@@ -1050,7 +1088,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     }
 
     syncingChannelRef.current = false;
-  };
+  });
 
   // resync channel is added to ref so that it can be used in useEffect without adding it as a dependency
   const resyncChannelRef = useRef(resyncChannel);
@@ -1101,136 +1139,142 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
    */
   const clientChannelConfig = getChannelConfigSafely();
 
-  const reloadChannel = async () => {
+  const reloadChannel = useStableCallback(async () => {
     try {
       await loadLatestMessages();
     } catch (err) {
       console.warn('Reloading channel failed with error:', err);
     }
-  };
+  });
 
-  const loadChannelAroundMessage: ChannelContextValue['loadChannelAroundMessage'] = async ({
-    messageId: messageIdToLoadAround,
-  }): Promise<void> => {
-    if (!messageIdToLoadAround) {
-      return;
-    }
-    try {
-      if (thread) {
-        setThreadLoadingMore(true);
-        try {
-          await channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
-          setThreadLoadingMore(false);
-          setThreadMessages(channel.state.threads[thread.id]);
-          if (setTargetedMessage) {
-            setTargetedMessage(messageIdToLoadAround);
-          }
-        } catch (err) {
-          if (err instanceof Error) {
-            setError(err);
-          } else {
-            setError(true);
+  const loadChannelAroundMessage: ChannelContextValue['loadChannelAroundMessage'] =
+    useStableCallback(async ({ messageId: messageIdToLoadAround }): Promise<void> => {
+      if (!messageIdToLoadAround) {
+        return;
+      }
+      try {
+        if (thread) {
+          setThreadLoadingMore(true);
+          try {
+            await channel.state.loadMessageIntoState(messageIdToLoadAround, thread.id);
+            setThreadLoadingMore(false);
+            setThreadMessages(channel.state.threads[thread.id]);
+            if (setTargetedMessage) {
+              setTargetedMessage(messageIdToLoadAround);
+            }
+          } catch (err) {
+            if (err instanceof Error) {
+              setError(err);
+            } else {
+              setError(true);
+            }
+            setThreadLoadingMore(false);
           }
-          setThreadLoadingMore(false);
+        } else {
+          await loadChannelAroundMessageFn({
+            messageId: messageIdToLoadAround,
+            setTargetedMessage,
+          });
         }
-      } else {
-        await loadChannelAroundMessageFn({
-          messageId: messageIdToLoadAround,
-          setTargetedMessage,
-        });
+      } catch (err) {
+        console.warn('Loading channel around message failed with error:', err);
       }
-    } catch (err) {
-      console.warn('Loading channel around message failed with error:', err);
-    }
-  };
+    });
 
   /**
    * MESSAGE METHODS
    */
-  const updateMessage: MessagesContextValue['updateMessage'] = (
-    updatedMessage,
-    extraState = {},
-  ) => {
-    if (!channel) {
-      return;
-    }
+  const updateMessage: MessagesContextValue['updateMessage'] = useStableCallback(
+    (updatedMessage, extraState = {}, throttled = false) => {
+      if (!channel) {
+        return;
+      }
 
-    channel.state.addMessageSorted(updatedMessage, true);
-    copyMessagesStateFromChannel(channel);
+      channel.state.addMessageSorted(updatedMessage, true);
+      if (throttled) {
+        copyMessagesStateFromChannelThrottled();
+      } else {
+        copyMessagesStateFromChannel(channel);
+      }
 
-    if (thread && updatedMessage.parent_id) {
-      extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
-      setThreadMessages(extraState.threadMessages);
-    }
-  };
+      if (thread && updatedMessage.parent_id) {
+        extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
+        setThreadMessages(extraState.threadMessages);
+      }
+    },
+  );
 
-  const replaceMessage = (oldMessage: MessageResponse, newMessage: MessageResponse) => {
-    if (channel) {
-      channel.state.removeMessage(oldMessage);
-      channel.state.addMessageSorted(newMessage, true);
-      copyMessagesStateFromChannel(channel);
+  const replaceMessage = useStableCallback(
+    (oldMessage: MessageResponse, newMessage: MessageResponse) => {
+      if (channel) {
+        channel.state.removeMessage(oldMessage);
+        channel.state.addMessageSorted(newMessage, true);
+        copyMessagesStateFromChannel(channel);
 
-      if (thread && newMessage.parent_id) {
-        const threadMessages = channel.state.threads[newMessage.parent_id] || [];
-        setThreadMessages(threadMessages);
+        if (thread && newMessage.parent_id) {
+          const threadMessages = channel.state.threads[newMessage.parent_id] || [];
+          setThreadMessages(threadMessages);
+        }
       }
-    }
-  };
+    },
+  );
 
-  const createMessagePreview = ({
-    attachments,
-    mentioned_users,
-    parent_id,
-    poll_id,
-    text,
-    ...extraFields
-  }: Partial<StreamMessage>) => {
-    // Exclude following properties from message.user within message preview,
-    // since they could be long arrays and have no meaning as sender of message.
-    // Storing such large value within user's table may cause sqlite queries to crash.
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { channel_mutes, devices, mutes, ...messageUser } = client.user;
-
-    const preview = {
-      __html: text,
+  const createMessagePreview = useStableCallback(
+    ({
       attachments,
-      created_at: new Date(),
-      html: text,
-      id: `${client.userID}-${generateRandomId()}`,
-      mentioned_users:
-        mentioned_users?.map((userId) => ({
-          id: userId,
-        })) || [],
+      mentioned_users,
       parent_id,
       poll_id,
-      reactions: [],
-      status: MessageStatusTypes.SENDING,
       text,
-      type: 'regular',
-      user: {
-        ...messageUser,
-        id: client.userID,
-      },
-      ...extraFields,
-    } as unknown as MessageResponse;
+      ...extraFields
+    }: Partial<StreamMessage>) => {
+      // Exclude following properties from message.user within message preview,
+      // since they could be long arrays and have no meaning as sender of message.
+      // Storing such large value within user's table may cause sqlite queries to crash.
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { channel_mutes, devices, mutes, ...messageUser } = client.user;
+
+      const preview = {
+        __html: text,
+        attachments,
+        created_at: new Date(),
+        html: text,
+        id: `${client.userID}-${generateRandomId()}`,
+        mentioned_users:
+          mentioned_users?.map((userId) => ({
+            id: userId,
+          })) || [],
+        parent_id,
+        poll_id,
+        reactions: [],
+        status: MessageStatusTypes.SENDING,
+        text,
+        type: 'regular',
+        user: {
+          ...messageUser,
+          id: client.userID,
+        },
+        ...extraFields,
+      } as unknown as MessageResponse;
 
-    /**
-     * This is added to the message for local rendering prior to the message
-     * being returned from the backend, it is removed when the message is sent
-     * as quoted_message is a reserved field.
-     */
-    if (preview.quoted_message_id) {
-      const quotedMessage = channelMessagesState.messages?.find(
-        (message) => message.id === preview.quoted_message_id,
-      );
+      /**
+       * This is added to the message for local rendering prior to the message
+       * being returned from the backend, it is removed when the message is sent
+       * as quoted_message is a reserved field.
+       */
+      if (preview.quoted_message_id) {
+        const quotedMessage = channelMessagesState.messages?.find(
+          (message) => message.id === preview.quoted_message_id,
+        );
 
-      preview.quoted_message = quotedMessage as MessageResponse['quoted_message'];
-    }
-    return preview;
-  };
+        preview.quoted_message = quotedMessage as MessageResponse['quoted_message'];
+      }
+      return preview;
+    },
+  );
 
-  const uploadPendingAttachments = async (message: MessageResponse) => {
+  const uploadPendingAttachments = useStableCallback(async (message: MessageResponse) => {
     const updatedMessage = { ...message };
     if (updatedMessage.attachments?.length) {
       for (let i = 0; i < updatedMessage.attachments?.length; i++) {
@@ -1283,7 +1327,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
           }
           const response = doDocUploadRequest
             ? await doDocUploadRequest(file, channel)
-            : await channel.sendFile(file.uri, file.name, file.mimeType);
+            : await channel.sendFile(file.uri, file.name, file.type);
           attachment.asset_url = response.file;
           if (response.thumb_url) {
             attachment.thumb_url = response.thumb_url;
@@ -1298,174 +1342,185 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     }
 
     return updatedMessage;
-  };
-
-  const sendMessageRequest = async (message: MessageResponse, retrying?: boolean) => {
-    try {
-      const updatedMessage = await uploadPendingAttachments(message);
-      const extraFields = omit(updatedMessage, [
-        '__html',
-        'attachments',
-        'created_at',
-        'deleted_at',
-        'html',
-        'id',
-        'latest_reactions',
-        'mentioned_users',
-        'own_reactions',
-        'parent_id',
-        'quoted_message',
-        'reaction_counts',
-        'reaction_groups',
-        'reactions',
-        'status',
-        'text',
-        'type',
-        'updated_at',
-        'user',
-      ]);
-      const { attachments, id, mentioned_users, parent_id, text } = updatedMessage;
-      if (!channel.id) {
-        return;
-      }
+  });
 
-      const mentionedUserIds = mentioned_users?.map((user) => user.id) || [];
+  const sendMessageRequest = useStableCallback(
+    async (message: MessageResponse, retrying?: boolean) => {
+      try {
+        const updatedMessage = await uploadPendingAttachments(message);
+        const extraFields = omit(updatedMessage, [
+          '__html',
+          'attachments',
+          'created_at',
+          'deleted_at',
+          'html',
+          'id',
+          'latest_reactions',
+          'mentioned_users',
+          'own_reactions',
+          'parent_id',
+          'quoted_message',
+          'reaction_counts',
+          'reaction_groups',
+          'reactions',
+          'status',
+          'text',
+          'type',
+          'updated_at',
+          'user',
+        ]);
+        const { attachments, id, mentioned_users, parent_id, text } = updatedMessage;
+        if (!channel.id) {
+          return;
+        }
 
-      const messageData = {
-        attachments,
-        id,
-        mentioned_users: mentionedUserIds,
-        parent_id,
-        text: patchMessageTextCommand(text ?? '', mentionedUserIds),
-        ...extraFields,
-      } as StreamMessage;
+        const mentionedUserIds = mentioned_users?.map((user) => user.id) || [];
+
+        const messageData = {
+          attachments,
+          id,
+          mentioned_users: mentionedUserIds,
+          parent_id,
+          text: patchMessageTextCommand(text ?? '', mentionedUserIds),
+          ...extraFields,
+        } as StreamMessage;
+
+        let messageResponse = {} as SendMessageAPIResponse;
+        if (doSendMessageRequest) {
+          messageResponse = await doSendMessageRequest(channel?.cid || '', messageData);
+        } else if (channel) {
+          messageResponse = await channel.sendMessage(messageData);
+        }
 
-      let messageResponse = {} as SendMessageAPIResponse;
-      if (doSendMessageRequest) {
-        messageResponse = await doSendMessageRequest(channel?.cid || '', messageData);
-      } else if (channel) {
-        messageResponse = await channel.sendMessage(messageData);
-      }
+        if (messageResponse.message) {
+          messageResponse.message.status = MessageStatusTypes.RECEIVED;
 
-      if (messageResponse.message) {
-        messageResponse.message.status = MessageStatusTypes.RECEIVED;
+          if (enableOfflineSupport) {
+            await dbApi.updateMessage({
+              message: { ...messageResponse.message, cid: channel.cid },
+            });
+          }
+          if (retrying) {
+            replaceMessage(message, messageResponse.message);
+          } else {
+            updateMessage(messageResponse.message, {}, true);
+          }
+        }
+      } catch (err) {
+        console.log(err);
+        message.status = MessageStatusTypes.FAILED;
+        const updatedMessage = { ...message, cid: channel.cid };
+        updateMessage(updatedMessage);
+        threadInstance?.upsertReplyLocally?.({ message: updatedMessage });
+        optimisticallyUpdatedNewMessages.delete(message.id);
 
         if (enableOfflineSupport) {
           await dbApi.updateMessage({
-            message: { ...messageResponse.message, cid: channel.cid },
+            message: { ...message, cid: channel.cid },
           });
         }
-        if (retrying) {
-          replaceMessage(message, messageResponse.message);
-        } else {
-          updateMessage(messageResponse.message);
-        }
-
-        threadInstance?.upsertReplyLocally?.({ message: messageResponse.message });
       }
-    } catch (err) {
-      console.log(err);
-      message.status = MessageStatusTypes.FAILED;
-      const updatedMessage = { ...message, cid: channel.cid };
-      updateMessage(updatedMessage);
-      threadInstance?.upsertReplyLocally?.({ message: updatedMessage });
+    },
+  );
 
-      if (enableOfflineSupport) {
-        await dbApi.updateMessage({
-          message: { ...message, cid: channel.cid },
-        });
+  const sendMessage: InputMessageInputContextValue['sendMessage'] = useStableCallback(
+    async (message) => {
+      if (channel?.state?.filterErrorMessages) {
+        channel.state.filterErrorMessages();
       }
-    }
-  };
-
-  const sendMessage: InputMessageInputContextValue['sendMessage'] = async (message) => {
-    if (channel?.state?.filterErrorMessages) {
-      channel.state.filterErrorMessages();
-    }
 
-    const messagePreview = createMessagePreview({
-      ...message,
-      attachments: message.attachments || [],
-    });
-
-    updateMessage(messagePreview, {
-      commands: [],
-      messageInput: '',
-    });
-    threadInstance?.upsertReplyLocally?.({ message: messagePreview });
+      const messagePreview = createMessagePreview({
+        ...message,
+        attachments: message.attachments || [],
+      });
 
-    if (enableOfflineSupport) {
-      // While sending a message, we add the message to local db with failed status, so that
-      // if app gets closed before message gets sent and next time user opens the app
-      // then user can see that message in failed state and can retry.
-      // If succesfull, it will be updated with received status.
-      await dbApi.upsertMessages({
-        messages: [{ ...messagePreview, cid: channel.cid, status: MessageStatusTypes.FAILED }],
+      updateMessage(messagePreview, {
+        commands: [],
+        messageInput: '',
       });
-    }
+      threadInstance?.upsertReplyLocally?.({ message: messagePreview });
+      optimisticallyUpdatedNewMessages.add(messagePreview.id);
 
-    await sendMessageRequest(messagePreview);
-  };
+      if (enableOfflineSupport) {
+        // While sending a message, we add the message to local db with failed status, so that
+        // if app gets closed before message gets sent and next time user opens the app
+        // then user can see that message in failed state and can retry.
+        // If succesfull, it will be updated with received status.
+        await dbApi.upsertMessages({
+          messages: [{ ...messagePreview, cid: channel.cid, status: MessageStatusTypes.FAILED }],
+        });
+      }
 
-  const retrySendMessage: MessagesContextValue['retrySendMessage'] = async (message) => {
-    const statusPendingMessage = {
-      ...message,
-      status: MessageStatusTypes.SENDING,
-    };
+      await sendMessageRequest(messagePreview);
+    },
+  );
 
-    const messageWithoutReservedFields = removeReservedFields(statusPendingMessage);
+  const retrySendMessage: MessagesContextValue['retrySendMessage'] = useStableCallback(
+    async (message) => {
+      const statusPendingMessage = {
+        ...message,
+        status: MessageStatusTypes.SENDING,
+      };
 
-    // For bounced messages, we don't need to update the message, instead always send a new message.
-    if (!isBouncedMessage(message)) {
-      updateMessage(messageWithoutReservedFields as MessageResponse);
-    }
+      const messageWithoutReservedFields = removeReservedFields(statusPendingMessage);
 
-    await sendMessageRequest(messageWithoutReservedFields as MessageResponse, true);
-  };
+      // For bounced messages, we don't need to update the message, instead always send a new message.
+      if (!isBouncedMessage(message)) {
+        updateMessage(messageWithoutReservedFields as MessageResponse);
+      }
 
-  const editMessage: InputMessageInputContextValue['editMessage'] = (updatedMessage) =>
-    doUpdateMessageRequest
-      ? doUpdateMessageRequest(channel?.cid || '', updatedMessage)
-      : client.updateMessage(updatedMessage);
+      await sendMessageRequest(messageWithoutReservedFields as MessageResponse, true);
+    },
+  );
+
+  const editMessage: InputMessageInputContextValue['editMessage'] = useStableCallback(
+    (updatedMessage) =>
+      doUpdateMessageRequest
+        ? doUpdateMessageRequest(channel?.cid || '', updatedMessage)
+        : client.updateMessage(updatedMessage),
+  );
 
-  const setEditingState: MessagesContextValue['setEditingState'] = (message) => {
+  const setEditingState: MessagesContextValue['setEditingState'] = useStableCallback((message) => {
     clearQuotedMessageState();
     setEditing(message);
-  };
+  });
 
-  const setQuotedMessageState: MessagesContextValue['setQuotedMessageState'] = (
-    messageOrBoolean,
-  ) => {
-    setQuotedMessage(messageOrBoolean);
-  };
+  const setQuotedMessageState: MessagesContextValue['setQuotedMessageState'] = useStableCallback(
+    (messageOrBoolean) => {
+      setQuotedMessage(messageOrBoolean);
+    },
+  );
 
-  const clearEditingState: InputMessageInputContextValue['clearEditingState'] = () =>
-    setEditing(undefined);
+  const clearEditingState: InputMessageInputContextValue['clearEditingState'] = useStableCallback(
+    () => setEditing(undefined),
+  );
 
-  const clearQuotedMessageState: InputMessageInputContextValue['clearQuotedMessageState'] = () =>
-    setQuotedMessage(undefined);
+  const clearQuotedMessageState: InputMessageInputContextValue['clearQuotedMessageState'] =
+    useStableCallback(() => setQuotedMessage(undefined));
 
   /**
    * Removes the message from local state
    */
-  const removeMessage: MessagesContextValue['removeMessage'] = async (message) => {
-    if (channel) {
-      channel.state.removeMessage(message);
-      copyMessagesStateFromChannel(channel);
+  const removeMessage: MessagesContextValue['removeMessage'] = useStableCallback(
+    async (message) => {
+      if (channel) {
+        channel.state.removeMessage(message);
+        copyMessagesStateFromChannel(channel);
 
-      if (thread) {
-        setThreadMessages(channel.state.threads[thread.id] || []);
+        if (thread) {
+          setThreadMessages(channel.state.threads[thread.id] || []);
+        }
       }
-    }
 
-    if (enableOfflineSupport) {
-      await dbApi.deleteMessage({
-        id: message.id,
-      });
-    }
-  };
+      if (enableOfflineSupport) {
+        await dbApi.deleteMessage({
+          id: message.id,
+        });
+      }
+    },
+  );
 
-  const sendReaction = async (type: string, messageId: string) => {
+  const sendReaction = useStableCallback(async (type: string, messageId: string) => {
     if (!channel?.id || !client.user) {
       throw new Error('Channel has not been initialized');
     }
@@ -1506,88 +1561,89 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     if (sendReactionResponse?.message) {
       threadInstance?.upsertReplyLocally?.({ message: sendReactionResponse.message });
     }
-  };
+  });
 
-  const deleteMessage: MessagesContextValue['deleteMessage'] = async (message) => {
-    if (!channel.id) {
-      throw new Error('Channel has not been initialized yet');
-    }
+  const deleteMessage: MessagesContextValue['deleteMessage'] = useStableCallback(
+    async (message) => {
+      if (!channel.id) {
+        throw new Error('Channel has not been initialized yet');
+      }
+
+      if (!enableOfflineSupport) {
+        if (message.status === MessageStatusTypes.FAILED) {
+          await removeMessage(message);
+          return;
+        }
+        await client.deleteMessage(message.id);
+        return;
+      }
 
-    if (!enableOfflineSupport) {
       if (message.status === MessageStatusTypes.FAILED) {
+        await DBSyncManager.dropPendingTasks({ messageId: message.id });
         await removeMessage(message);
+      } else {
+        const updatedMessage = {
+          ...message,
+          cid: channel.cid,
+          deleted_at: new Date(),
+          type: 'deleted' as MessageLabel,
+        };
+        updateMessage(updatedMessage);
+
+        threadInstance?.upsertReplyLocally({ message: updatedMessage });
+
+        const data = await DBSyncManager.queueTask({
+          client,
+          task: {
+            channelId: channel.id,
+            channelType: channel.type,
+            messageId: message.id,
+            payload: [message.id],
+            type: 'delete-message',
+          },
+        });
+
+        if (data?.message) {
+          updateMessage({ ...data.message });
+        }
+      }
+    },
+  );
+
+  const deleteReaction: MessagesContextValue['deleteReaction'] = useStableCallback(
+    async (type: string, messageId: string) => {
+      if (!channel?.id || !client.user) {
+        throw new Error('Channel has not been initialized');
+      }
+
+      const payload: Parameters<ChannelClass['deleteReaction']> = [messageId, type];
+
+      if (!enableOfflineSupport) {
+        await channel.deleteReaction(...payload);
         return;
       }
-      await client.deleteMessage(message.id);
-      return;
-    }
 
-    if (message.status === MessageStatusTypes.FAILED) {
-      await DBSyncManager.dropPendingTasks({ messageId: message.id });
-      await removeMessage(message);
-    } else {
-      const updatedMessage = {
-        ...message,
-        cid: channel.cid,
-        deleted_at: new Date().toISOString(),
-        type: 'deleted' as MessageLabel,
-      };
-      updateMessage(updatedMessage);
+      removeReactionFromLocalState({
+        channel,
+        messageId,
+        reactionType: type,
+        user: client.user,
+      });
 
-      threadInstance?.upsertReplyLocally({ message: updatedMessage });
+      copyMessagesStateFromChannel(channel);
 
-      const data = await DBSyncManager.queueTask({
+      await DBSyncManager.queueTask({
         client,
         task: {
           channelId: channel.id,
           channelType: channel.type,
-          messageId: message.id,
-          payload: [message.id],
-          type: 'delete-message',
+          messageId,
+          payload,
+          type: 'delete-reaction',
         },
       });
-
-      if (data?.message) {
-        updateMessage({ ...data.message });
-      }
-    }
-  };
-
-  const deleteReaction: MessagesContextValue['deleteReaction'] = async (
-    type: string,
-    messageId: string,
-  ) => {
-    if (!channel?.id || !client.user) {
-      throw new Error('Channel has not been initialized');
-    }
-
-    const payload: Parameters<ChannelClass['deleteReaction']> = [messageId, type];
-
-    if (!enableOfflineSupport) {
-      await channel.deleteReaction(...payload);
-      return;
-    }
-
-    removeReactionFromLocalState({
-      channel,
-      messageId,
-      reactionType: type,
-      user: client.user,
-    });
-
-    copyMessagesStateFromChannel(channel);
-
-    await DBSyncManager.queueTask({
-      client,
-      task: {
-        channelId: channel.id,
-        channelType: channel.type,
-        messageId,
-        payload,
-        type: 'delete-reaction',
-      },
-    });
-  };
+    },
+  );
 
   /**
    * THREAD METHODS
@@ -1626,7 +1682,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     ),
   ).current;
 
-  const loadMoreThread: ThreadContextValue['loadMoreThread'] = async () => {
+  const loadMoreThread: ThreadContextValue['loadMoreThread'] = useStableCallback(async () => {
     if (threadLoadingMore || !thread?.id) {
       return;
     }
@@ -1665,7 +1721,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       setThreadLoadingMore(false);
       throw err;
     }
-  };
+  });
 
   const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
     channel,
@@ -1717,8 +1773,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   // but it is definitely not trivial, especially considering it depends on other inline functions that
   // are not wrapped in a useCallback() themselves hence creating a huge cascading change. Can be removed
   // once our memoization issues are fixed in most places in the app or we move to a reactive state store.
-  const sendMessageRef = useRef<InputMessageInputContextValue['sendMessage']>(sendMessage);
-  sendMessageRef.current = sendMessage;
+  // const sendMessageRef = useRef<InputMessageInputContextValue['sendMessage']>(sendMessage);
+  // sendMessageRef.current = sendMessage;
+  // const sendMessageStable = useCallback<InputMessageInputContextValue['sendMessage']>((...args) => {
+  //   return sendMessageRef.current(...args);
+  // }, []);
 
   const inputMessageInputContext = useCreateInputMessageInputContext({
     additionalTextInputProps,
@@ -1751,7 +1810,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FileUploadPreview,
     handleAttachButtonPress,
     hasCameraPicker,
-    hasCommands,
+    hasCommands: hasCommands ?? (getChannelConfigSafely()?.commands ?? []).length > 0,
     hasFilePicker,
     hasImagePicker,
     ImageUploadPreview,
@@ -1772,7 +1831,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     quotedMessage,
     SendButton,
     sendImageAsync,
-    sendMessage: (...args) => sendMessageRef.current(...args),
+    sendMessage,
     SendMessageDisallowedIndicator,
     setInputRef,
     setQuotedMessageState,
@@ -1840,6 +1899,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage, // when messageId is set, we scroll to the messageId instead of first unread
     InlineDateSeparator,
     InlineUnreadIndicator,
@@ -1905,11 +1965,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     VideoThumbnail,
   });
 
-  const suggestionsContext = {
-    AutoCompleteSuggestionHeader,
-    AutoCompleteSuggestionItem,
-    AutoCompleteSuggestionList,
-  };
+  const suggestionsContext = useMemo(() => {
+    return {
+      AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem,
+      AutoCompleteSuggestionList,
+    };
+  }, [AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem, AutoCompleteSuggestionList]);
 
   const threadContext = useCreateThreadContext({
     allowThreadMessagesInChannel,
@@ -1976,7 +2038,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
 export type ChannelProps = Partial<Omit<ChannelPropsWithContext, 'channel' | 'thread'>> &
   Pick<ChannelPropsWithContext, 'channel'> & {
-    thread?: MessageType | ThreadType | null;
+    thread?: LocalMessage | ThreadType | null;
   };
 
 /**
@@ -1995,7 +2057,7 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
   const threadInstance = (threadFromProps as ThreadType)?.threadInstance as Thread;
   const threadMessage = (
     threadInstance ? (threadFromProps as ThreadType).thread : threadFromProps
-  ) as MessageType;
+  ) as LocalMessage;
 
   const thread: ThreadType = {
     thread: threadMessage,