@sendbird/uikit-chat-hooks 1.0.0-rc.1

package/src/channel/useGroupChannelMessages/reducer.ts

@@ -0,0 +1,134 @@
+import { useReducer } from 'react';
+
+import type {
+  SendbirdBaseMessage,
+  SendbirdFileMessage,
+  SendbirdMessage,
+  SendbirdUserMessage,
+} from '@sendbird/uikit-utils';
+import { arrayToMapWithGetter, getMessageUniqId, isMyMessage, isNewMessage, useIIFE } from '@sendbird/uikit-utils';
+
+import type { UseGroupChannelMessagesOptions } from '../../types';
+
+type Action =
+  | {
+      type: 'update_loading' | 'update_refreshing';
+      value: { status: boolean };
+    }
+  | {
+      type: 'update_messages' | 'update_next_messages';
+      value: { messages: SendbirdBaseMessage[]; clearPrev: boolean; currentUserId?: string };
+    }
+  | {
+      type: 'delete_messages' | 'delete_next_messages';
+      value: { messageIds: number[]; reqIds: string[] };
+    };
+
+type State = {
+  loading: boolean;
+  refreshing: boolean;
+  messageMap: Record<string, SendbirdMessage>;
+  nextMessageMap: Record<string, SendbirdMessage>;
+};
+
+const defaultReducer = ({ ...draft }: State, action: Action) => {
+  switch (action.type) {
+    case 'update_refreshing':
+    case 'update_loading': {
+      const key = action.type === 'update_loading' ? 'loading' : 'refreshing';
+      draft[key] = action.value.status;
+
+      return draft;
+    }
+    case 'update_messages':
+    case 'update_next_messages': {
+      const key = action.type === 'update_messages' ? 'messageMap' : 'nextMessageMap';
+      const messageMap = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
+      if (action.value.clearPrev) {
+        draft[key] = messageMap;
+      } else {
+        draft[key] = { ...draft[key], ...messageMap };
+
+        // NOTE: Replace pending message to succeeded message
+        action.value.messages
+          .filter((m): m is SendbirdUserMessage | SendbirdFileMessage => {
+            return (
+              (m.isFileMessage() || m.isUserMessage()) &&
+              Boolean(draft[key][m.reqId]) &&
+              m.sendingStatus === 'succeeded' &&
+              isMyMessage(m, action.value.currentUserId)
+            );
+          })
+          .forEach((m) => delete draft[key][m.reqId]);
+      }
+
+      if (action.type === 'update_messages') {
+        draft['nextMessageMap'] = {};
+      }
+
+      return draft;
+    }
+    case 'delete_messages':
+    case 'delete_next_messages': {
+      const key = action.type === 'delete_messages' ? 'messageMap' : 'nextMessageMap';
+      draft[key] = { ...draft[key] };
+      action.value.messageIds.forEach((msgId) => delete draft[key][msgId]);
+      action.value.reqIds.forEach((reqId) => delete draft[key][reqId]);
+
+      return draft;
+    }
+  }
+};
+
+export const useGroupChannelMessagesReducer = (
+  userId?: string,
+  sortComparator?: UseGroupChannelMessagesOptions['sortComparator'],
+) => {
+  const [{ loading, refreshing, messageMap, nextMessageMap }, dispatch] = useReducer(defaultReducer, {
+    loading: true,
+    refreshing: false,
+    messageMap: {},
+    nextMessageMap: {},
+  });
+
+  const updateMessages = (messages: SendbirdBaseMessage[], clearPrev: boolean, currentUserId?: string) => {
+    dispatch({ type: 'update_messages', value: { messages, clearPrev, currentUserId } });
+  };
+  const deleteMessages = (messageIds: number[], reqIds: string[]) => {
+    dispatch({ type: 'delete_messages', value: { messageIds, reqIds } });
+  };
+  const updateNextMessages = (messages: SendbirdBaseMessage[], clearPrev: boolean, currentUserId?: string) => {
+    dispatch({ type: 'update_next_messages', value: { messages, clearPrev, currentUserId } });
+  };
+  const deleteNextMessages = (messageIds: number[], reqIds: string[]) => {
+    dispatch({ type: 'delete_next_messages', value: { messageIds, reqIds } });
+  };
+  const updateLoading = (status: boolean) => {
+    dispatch({ type: 'update_loading', value: { status } });
+  };
+  const updateRefreshing = (status: boolean) => {
+    dispatch({ type: 'update_refreshing', value: { status } });
+  };
+
+  const messages = useIIFE(() => {
+    if (sortComparator) return Object.values(messageMap).sort(sortComparator);
+    return Object.values(messageMap);
+  });
+  const nextMessages = Object.values(nextMessageMap);
+  const newMessagesFromMembers = nextMessages.filter((msg) => isNewMessage(msg, userId));
+
+  return {
+    updateLoading,
+    updateRefreshing,
+    updateMessages,
+    updateNextMessages,
+    deleteMessages,
+    deleteNextMessages,
+
+    loading,
+    refreshing,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+  };
+};

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -0,0 +1,315 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import type {
+  SendbirdChannel,
+  SendbirdChatSDK,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdMessageCollection,
+  SendbirdUserMessage,
+} from '@sendbird/uikit-utils';
+import { Logger, NOOP, isDifferentChannel, useForceUpdate, useIsMountedRef } from '@sendbird/uikit-utils';
+
+import { useAppFeatures } from '../../common/useAppFeatures';
+import { useChannelHandler } from '../../handler/useChannelHandler';
+import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
+import { useActiveGroupChannel } from '../useActiveGroupChannel';
+import { useGroupChannelMessagesReducer } from './reducer';
+
+const createMessageCollection = (
+  sdk: SendbirdChatSDK,
+  channel: SendbirdGroupChannel,
+  creator?: UseGroupChannelMessagesOptions['collectionCreator'],
+) => {
+  if (creator) return creator();
+  const collection = channel.createMessageCollection();
+  const filter = new sdk.MessageFilter();
+  return collection.setLimit(100).setFilter(filter).build();
+};
+
+const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
+
+// FIXME: MessageCollection event handler bug, initialize(run async addObserver) -> dispose -> removeObserver -> addObserver called
+export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (sdk, channel, userId, options) => {
+  const isMounted = useIsMountedRef();
+  const disposeManuallyAfterUnmounted = () => {
+    if (!isMounted.current && collectionRef.current) collectionRef.current.dispose();
+  };
+
+  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
+
+  const collectionRef = useRef<SendbirdMessageCollection>();
+
+  // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update af
+  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
+  const forceUpdate = useForceUpdate();
+
+  const {
+    loading,
+    refreshing,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+    updateMessages,
+    updateNextMessages,
+    deleteNextMessages,
+    deleteMessages,
+    updateLoading,
+    updateRefreshing,
+  } = useGroupChannelMessagesReducer(userId, options?.sortComparator);
+
+  const channelMarkAs = async () => {
+    try {
+      if (deliveryReceiptEnabled) sdk.markAsDelivered(activeChannel.url);
+    } catch (e) {
+      Logger.error(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
+    }
+    try {
+      await sdk.markAsReadWithChannelUrls([activeChannel.url]);
+    } catch (e) {
+      Logger.error(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
+    }
+  };
+
+  const updateChannel = (channel: SendbirdChannel) => {
+    if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
+      setActiveChannel(channel);
+      forceUpdate();
+    }
+  };
+
+  const init = useCallback(
+    async (uid?: string, callback?: () => void) => {
+      if (collectionRef.current) collectionRef.current?.dispose();
+
+      if (uid) {
+        collectionRef.current = createMessageCollection(sdk, activeChannel, options?.collectionCreator);
+        updateNextMessages([], true, sdk.currentUser.userId);
+        channelMarkAs();
+
+        collectionRef.current
+          .initialize(sdk.MessageCollection.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
+          .onCacheResult((err, messages) => {
+            if (err) sdk.isCacheEnabled && Logger.error(`[${HOOK_NAME}/onCacheResult]`, err);
+            else {
+              Logger.debug(`[${HOOK_NAME}/onCacheResult]`, 'message length:', messages.length);
+              updateMessages(messages, true, sdk.currentUser.userId);
+              updateMessages(collectionRef.current?.pendingMessages ?? [], false, sdk.currentUser.userId);
+              updateMessages(collectionRef.current?.failedMessages ?? [], false, sdk.currentUser.userId);
+              if (messages?.length) callback?.();
+            }
+          })
+          .onApiResult((err, messages) => {
+            if (err) Logger.error(`[${HOOK_NAME}/onApiResult]`, err);
+            else {
+              Logger.debug(`[${HOOK_NAME}/onApiResult]`, 'message length:', messages.length);
+              updateMessages(messages, true, sdk.currentUser.userId);
+              if (sdk.isCacheEnabled) {
+                updateMessages(collectionRef.current?.pendingMessages ?? [], false, sdk.currentUser.userId);
+                updateMessages(collectionRef.current?.failedMessages ?? [], false, sdk.currentUser.userId);
+              }
+            }
+            callback?.();
+          });
+
+        collectionRef.current.setMessageCollectionHandler({
+          onMessagesAdded(_, channel, messages) {
+            disposeManuallyAfterUnmounted();
+            channelMarkAs();
+            updateNextMessages(messages, false, sdk.currentUser.userId);
+            updateChannel(channel);
+          },
+          onMessagesUpdated(_, channel, messages) {
+            disposeManuallyAfterUnmounted();
+            updateMessages(messages, false, sdk.currentUser.userId);
+            updateChannel(channel);
+          },
+          onMessagesDeleted(_, channel, messages) {
+            disposeManuallyAfterUnmounted();
+            const msgIds = messages.map((m) => m.messageId);
+            const reqIds = messages
+              .filter((m): m is SendbirdUserMessage | SendbirdFileMessage => 'reqId' in m)
+              .map((m) => m.reqId);
+
+            deleteMessages(msgIds, reqIds);
+            deleteNextMessages(msgIds, reqIds);
+            updateChannel(channel);
+          },
+          onChannelDeleted() {
+            disposeManuallyAfterUnmounted();
+            options?.onChannelDeleted?.();
+          },
+          onChannelUpdated(_, channel) {
+            disposeManuallyAfterUnmounted();
+            updateChannel(channel);
+          },
+          onHugeGapDetected() {
+            disposeManuallyAfterUnmounted();
+            init(uid);
+          },
+        });
+      }
+    },
+    [sdk, activeChannel.url, options?.collectionCreator],
+  );
+
+  useChannelHandler(
+    sdk,
+    HOOK_NAME,
+    {
+      onUserBanned(channel, bannedUser) {
+        disposeManuallyAfterUnmounted();
+        if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
+          if (bannedUser.userId === sdk.currentUser.userId) {
+            options?.onChannelDeleted?.();
+          } else {
+            setActiveChannel(channel);
+            forceUpdate();
+          }
+        }
+      },
+    },
+    [sdk],
+  );
+
+  useEffect(() => {
+    // NOTE: Cache read is heavy synchronous task, and it prevents smooth ui transition
+    setTimeout(async () => {
+      updateLoading(true);
+      init(userId, () => updateLoading(false));
+    }, 0);
+  }, [init, userId]);
+
+  useEffect(() => {
+    return () => {
+      if (collectionRef.current) collectionRef.current?.dispose();
+    };
+  }, []);
+
+  const refresh: ReturnType<UseGroupChannelMessages>['refresh'] = useCallback(async () => {
+    updateRefreshing(true);
+    init(userId, () => updateRefreshing(false));
+  }, [init, userId]);
+
+  const prev: ReturnType<UseGroupChannelMessages>['prev'] = useCallback(async () => {
+    if (collectionRef.current && collectionRef.current?.hasPrevious) {
+      try {
+        const list = await collectionRef.current?.loadPrevious();
+        updateMessages(list, false, sdk.currentUser.userId);
+      } catch {}
+    }
+  }, []);
+
+  const next: ReturnType<UseGroupChannelMessages>['next'] = useCallback(async () => {
+    const list = [];
+    if (collectionRef.current && collectionRef.current?.hasNext) {
+      try {
+        const fetchedList = await collectionRef.current?.loadNext();
+        list.push(...fetchedList);
+      } catch {}
+    }
+    if (nextMessages.length > 0) {
+      list.push(...nextMessages);
+    }
+    if (list.length > 0) {
+      updateMessages(list, false, sdk.currentUser.userId);
+      updateNextMessages([], true, sdk.currentUser.userId);
+    }
+  }, [nextMessages.length]);
+
+  const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
+    (params, onPending) => {
+      return new Promise((resolve, reject) => {
+        const pendingMessage = activeChannel.sendUserMessage(params, (sentMessage, error) => {
+          if (error) reject(error);
+          else {
+            updateMessages([sentMessage], false, sdk.currentUser.userId);
+            resolve(sentMessage);
+          }
+        });
+
+        onPending?.(pendingMessage);
+        updateMessages([pendingMessage], false, sdk.currentUser.userId);
+      });
+    },
+    [activeChannel],
+  );
+  const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
+    (params, onPending) => {
+      return new Promise((resolve, reject) => {
+        const pendingMessage = activeChannel.sendFileMessage(params, (sentMessage, error) => {
+          if (error) reject(error);
+          else {
+            updateMessages([sentMessage], false, sdk.currentUser.userId);
+            resolve(sentMessage as SendbirdFileMessage);
+          }
+        });
+
+        updateMessages([pendingMessage], false, sdk.currentUser.userId);
+        onPending?.(pendingMessage);
+      });
+    },
+    [activeChannel],
+  );
+  const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useCallback(
+    async (messageId, params) => {
+      const updatedMessage = await activeChannel.updateUserMessage(messageId, params, NOOP);
+      updateMessages([updatedMessage], false, sdk.currentUser.userId);
+      return updatedMessage;
+    },
+    [activeChannel],
+  );
+  const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useCallback(
+    async (messageId, params) => {
+      const updatedMessage = await activeChannel.updateFileMessage(messageId, params, NOOP);
+      updateMessages([updatedMessage], false, sdk.currentUser.userId);
+      return updatedMessage;
+    },
+    [activeChannel],
+  );
+  const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useCallback(
+    async (failedMessage) => {
+      const message = await (() => {
+        if (failedMessage.isUserMessage()) return activeChannel.resendUserMessage(failedMessage);
+        if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(failedMessage);
+        return null;
+      })();
+
+      if (message) updateMessages([message], false, sdk.currentUser.userId);
+    },
+    [activeChannel],
+  );
+  const deleteMessage: ReturnType<UseGroupChannelMessages>['deleteMessage'] = useCallback(
+    async (message) => {
+      if (message.sendingStatus === 'succeeded') {
+        if (message.isUserMessage()) await activeChannel.deleteMessage(message);
+        if (message.isFileMessage()) await activeChannel.deleteMessage(message);
+      } else {
+        try {
+          await collectionRef.current?.removeFailedMessages([message]);
+        } finally {
+          deleteMessages([message.messageId], [message.reqId]);
+        }
+      }
+    },
+    [activeChannel],
+  );
+
+  return {
+    loading,
+    refreshing,
+    refresh,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+    next,
+    prev,
+    sendUserMessage,
+    sendFileMessage,
+    updateUserMessage,
+    updateFileMessage,
+    resendMessage,
+    deleteMessage,
+    activeChannel,
+  };
+};

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -0,0 +1,251 @@
+import { useCallback, useRef } from 'react';
+import type Sendbird from 'sendbird';
+
+import type { SendbirdFileMessage, SendbirdGroupChannel, SendbirdOpenChannel } from '@sendbird/uikit-utils';
+import { Logger, isDifferentChannel, useAsyncEffect, useForceUpdate } from '@sendbird/uikit-utils';
+
+import { useAppFeatures } from '../../common/useAppFeatures';
+import { useChannelHandler } from '../../handler/useChannelHandler';
+import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
+import { useActiveGroupChannel } from '../useActiveGroupChannel';
+import { useGroupChannelMessagesReducer } from './reducer';
+
+const createMessageQuery = (
+  channel: SendbirdGroupChannel,
+  creator?: UseGroupChannelMessagesOptions['queryCreator'],
+) => {
+  if (creator) return creator();
+  const query = channel.createPreviousMessageListQuery();
+  query.limit = 100;
+  query.reverse = true;
+  return query;
+};
+
+const HOOK_NAME = 'useGroupChannelMessagesWithQuery';
+export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, channel, userId, options) => {
+  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
+
+  const queryRef = useRef<Sendbird.PreviousMessageListQuery>();
+
+  // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update after setActiveChannel
+  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
+  const forceUpdate = useForceUpdate();
+
+  const {
+    loading,
+    refreshing,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+    updateMessages,
+    updateNextMessages,
+    deleteNextMessages,
+    deleteMessages,
+    updateLoading,
+    updateRefreshing,
+  } = useGroupChannelMessagesReducer(userId, options?.sortComparator);
+
+  const channelMarkAs = async () => {
+    try {
+      if (deliveryReceiptEnabled) sdk.markAsDelivered(activeChannel.url);
+    } catch (e) {
+      Logger.error(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
+    }
+    try {
+      await sdk.markAsReadWithChannelUrls([activeChannel.url]);
+    } catch (e) {
+      Logger.error(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
+    }
+  };
+
+  const init = useCallback(
+    async (uid?: string) => {
+      if (uid) {
+        queryRef.current = createMessageQuery(activeChannel, options?.queryCreator);
+        channelMarkAs();
+        if (queryRef.current?.hasMore) {
+          const list = await queryRef.current?.load();
+          updateMessages(list, true, sdk.currentUser.userId);
+        }
+        updateNextMessages([], true, sdk.currentUser.userId);
+      }
+    },
+    [sdk, activeChannel.url, options?.queryCreator],
+  );
+
+  const channelUpdater = (channel: SendbirdGroupChannel | SendbirdOpenChannel) => {
+    if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
+      setActiveChannel(channel);
+      forceUpdate();
+    }
+  };
+
+  useChannelHandler(
+    sdk,
+    HOOK_NAME,
+    {
+      // Messages
+      onMessageReceived(eventChannel, message) {
+        if (isDifferentChannel(activeChannel, eventChannel)) return;
+        channelMarkAs();
+        updateNextMessages([message], false, sdk.currentUser.userId);
+      },
+      onMessageUpdated(eventChannel, message) {
+        if (isDifferentChannel(activeChannel, eventChannel)) return;
+        updateMessages([message], false, sdk.currentUser.userId);
+      },
+      onMessageDeleted(eventChannel, messageId) {
+        if (isDifferentChannel(activeChannel, eventChannel)) return;
+        deleteMessages([messageId], []);
+        deleteNextMessages([messageId], []);
+      },
+      // Channels
+      onChannelChanged: channelUpdater,
+      onChannelFrozen: channelUpdater,
+      onChannelUnfrozen: channelUpdater,
+      onChannelHidden: channelUpdater,
+      onChannelMemberCountChanged(channels) {
+        const channel = channels.find((c) => !isDifferentChannel(c, activeChannel));
+        if (channel) channelUpdater(channel);
+      },
+      onChannelDeleted(channelUrl: string) {
+        if (activeChannel.url === channelUrl) options?.onChannelDeleted?.();
+      },
+      // Users
+      onOperatorUpdated: channelUpdater,
+      onUserLeft: channelUpdater,
+      onUserEntered: channelUpdater,
+      onUserExited: channelUpdater,
+      onUserJoined: channelUpdater,
+      onUserUnbanned: channelUpdater,
+      onUserMuted: channelUpdater,
+      onUserUnmuted: channelUpdater,
+      onUserBanned(eventChannel, bannedUser) {
+        if (isDifferentChannel(activeChannel, eventChannel)) return;
+
+        if (bannedUser.userId === sdk.currentUser.userId) {
+          options?.onChannelDeleted?.();
+        } else {
+          channelUpdater(eventChannel);
+        }
+      },
+    },
+    [sdk],
+  );
+
+  useAsyncEffect(async () => {
+    updateLoading(true);
+    await init(userId);
+    updateLoading(false);
+  }, [init, userId]);
+
+  const refresh: ReturnType<UseGroupChannelMessages>['refresh'] = useCallback(async () => {
+    updateRefreshing(true);
+    await init(userId);
+    updateRefreshing(false);
+  }, [init, userId]);
+
+  const prev: ReturnType<UseGroupChannelMessages>['prev'] = useCallback(async () => {
+    if (queryRef.current && queryRef.current?.hasMore) {
+      const list = await queryRef.current?.load();
+      updateMessages(list, false, sdk.currentUser.userId);
+    }
+  }, []);
+
+  const next: ReturnType<UseGroupChannelMessages>['next'] = useCallback(async () => {
+    if (nextMessages.length > 0) {
+      updateMessages(nextMessages, false, sdk.currentUser.userId);
+      updateNextMessages([], true, sdk.currentUser.userId);
+    }
+  }, [nextMessages.length]);
+
+  const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
+    (params, onPending) => {
+      return new Promise((resolve, reject) => {
+        const pendingMessage = activeChannel.sendUserMessage(params, (sentMessage, error) => {
+          if (error) reject(error);
+          else {
+            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            resolve(sentMessage);
+          }
+        });
+        updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+        onPending?.(pendingMessage);
+      });
+    },
+    [activeChannel],
+  );
+  const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
+    (params, onPending) => {
+      return new Promise((resolve, reject) => {
+        const pendingMessage = activeChannel.sendFileMessage(params, (sentMessage, error) => {
+          if (error) reject(error);
+          else {
+            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            resolve(sentMessage as SendbirdFileMessage);
+          }
+        });
+        updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+        onPending?.(pendingMessage);
+      });
+    },
+    [activeChannel],
+  );
+  const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useCallback(
+    async (messageId, params) => {
+      const updatedMessage = await activeChannel.updateUserMessage(messageId, params);
+      updateMessages([updatedMessage], false, sdk.currentUser.userId);
+      return updatedMessage;
+    },
+    [activeChannel],
+  );
+  const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useCallback(
+    async (messageId, params) => {
+      const updatedMessage = await activeChannel.updateFileMessage(messageId, params);
+      updateMessages([updatedMessage], false, sdk.currentUser.userId);
+      return updatedMessage;
+    },
+    [activeChannel],
+  );
+  const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useCallback(
+    async (failedMessage) => {
+      const message = await (() => {
+        if (failedMessage.isUserMessage()) return activeChannel.resendUserMessage(failedMessage);
+        if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(failedMessage);
+        return null;
+      })();
+
+      if (message) updateNextMessages([message], false, sdk.currentUser.userId);
+    },
+    [activeChannel],
+  );
+  const deleteMessage: ReturnType<UseGroupChannelMessages>['deleteMessage'] = useCallback(
+    async (message) => {
+      if (message.sendingStatus === 'succeeded') {
+        if (message.isUserMessage()) await activeChannel.deleteMessage(message);
+        if (message.isFileMessage()) await activeChannel.deleteMessage(message);
+      } else {
+        deleteMessages([message.messageId], [message.reqId]);
+      }
+    },
+    [activeChannel],
+  );
+
+  return {
+    loading,
+    refreshing,
+    refresh,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+    next,
+    prev,
+    sendUserMessage,
+    sendFileMessage,
+    updateUserMessage,
+    updateFileMessage,
+    resendMessage,
+    deleteMessage,
+    activeChannel,
+  };
+};