@droppii-org/chat-mobile 0.2.42 → 0.2.43

package/src/core/useChatListener.ts

@@ -17,6 +17,7 @@ import { useChatContext } from '../context';
 import isEmpty from 'lodash/isEmpty';
 import { markMessageRevoked, useMessageStore } from '../store/message';
 import { syncPinnedMessagesOnEvent } from '../hooks/message/usePinMessage';
+import { belongsToConversation } from '../utils/message';
 
 export const useChatListener = () => {
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
@@ -119,11 +120,24 @@ export const useChatListener = () => {
     [updateOneMessage]
   );
 
+  const onRecvNewMessages = useCallback((messages: MessageItem[]) => {
+    console.log('[Listener] OnRecvNewMessages', messages);
+    const conversationId =
+      useConversationStore.getState().currentConversationId;
+    if (!conversationId) return;
+    const relevant = messages.filter((message) =>
+      belongsToConversation(message, conversationId)
+    );
+
+    if (!relevant.length) return;
+
+    relevant.forEach((msg) => useMessageStore.getState().pushNewMessage(msg));
+  }, []);
+
   useEffect(() => {
     // Conversation
     OpenIMSDK.on(OpenIMEvent.OnConversationChanged, onConversationChanged);
     OpenIMSDK.on(OpenIMEvent.OnNewConversation, onNewConversation);
-    // OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
 
     // Group members
     OpenIMSDK.on(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
@@ -133,6 +147,7 @@ export const useChatListener = () => {
     OpenIMSDK.on(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
     OpenIMSDK.on(OpenIMEvent.OnNewRecvMessageRevoked, onMessageRevoked);
     OpenIMSDK.on(OpenIMEvent.OnRecvMessagePinned, onMessagePinned);
+    OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
 
     return () => {
       // Conversation
@@ -145,7 +160,7 @@ export const useChatListener = () => {
 
       // Message status
       OpenIMSDK.off(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
-      // OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
+      OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, onRecvNewMessages);
       OpenIMSDK.off(OpenIMEvent.OnNewRecvMessageRevoked, onMessageRevoked);
       OpenIMSDK.off(OpenIMEvent.OnRecvMessagePinned, onMessagePinned);
     };
@@ -157,5 +172,6 @@ export const useChatListener = () => {
     onMessageRevoked,
     onNewConversation,
     onSendMessageProgress,
+    onRecvNewMessages,
   ]);
 };

package/src/hooks/message/useMessages.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect } from 'react';
+import { useMessageStore } from '../../store/message';
+import { useChatContext } from '../../context';
+
+interface IUseMessagesProps {
+  conversationId?: string;
+  startClientMsgId?: string;
+}
+
+export const useMessages = ({
+  conversationId,
+  startClientMsgId,
+}: IUseMessagesProps) => {
+  const messages = useMessageStore((s) => s.messages);
+  const { applicationType } = useChatContext();
+  const getMoreOldMessages = useMessageStore((s) => s.getMoreOldMessages);
+  const getMoreNewMessages = useMessageStore((s) => s.getMoreNewMessages);
+  const searchMessages = useMessageStore((s) => s.searchMessages);
+  const initLoading = useMessageStore((s) => s.initLoading);
+  const moreOldLoading = useMessageStore((s) => s.moreOldLoading);
+  const moreNewLoading = useMessageStore((s) => s.moreNewLoading);
+  const hasMoreOld = useMessageStore((s) => s.hasMoreOld);
+  const hasMoreNew = useMessageStore((s) => s.hasMoreNew);
+
+  const handleLoadMoreOld = useCallback(
+    (loadMore: boolean) => {
+      if (!conversationId || !applicationType) return;
+      getMoreOldMessages({
+        loadMore,
+        applicationType: applicationType,
+        conversationId: conversationId,
+      });
+    },
+    [getMoreOldMessages, applicationType, conversationId]
+  );
+
+  const handleLoadMoreNew = useCallback(
+    (loadMore: boolean) => {
+      if (!conversationId || !applicationType) return;
+      getMoreNewMessages({
+        loadMore,
+        applicationType: applicationType,
+        conversationId: conversationId,
+      });
+    },
+    [getMoreNewMessages, applicationType, conversationId]
+  );
+
+  useEffect(() => {
+    if (!conversationId || !applicationType) return;
+    if (startClientMsgId) {
+      searchMessages({
+        applicationType,
+        conversationId,
+        startClientMsgId,
+      });
+    } else {
+      getMoreOldMessages({
+        loadMore: false,
+        applicationType,
+        conversationId,
+      });
+    }
+  }, [
+    conversationId,
+    applicationType,
+    startClientMsgId,
+    getMoreOldMessages,
+    searchMessages,
+  ]);
+
+  return {
+    messages,
+    getMoreNewMessages: handleLoadMoreNew,
+    getMoreOldMessages: handleLoadMoreOld,
+    initLoading,
+    moreOldLoading,
+    moreNewLoading,
+    hasMoreOld,
+    hasMoreNew,
+  };
+};

package/src/hooks/message/useSendMessage.ts

@@ -16,12 +16,17 @@ import {
   type IMessageItemEx,
 } from '../../types/chat';
 import { useChatContext, useChatDetailContext } from '../../context';
-import { generateContentBasedOnMessageType } from '../../utils/conversation';
+import {
+  generateContentBasedOnMessageType,
+  getBotId,
+} from '../../utils/conversation';
 import { markMessageRevoked, useMessageStore } from '../../store/message';
 import uuid from 'react-native-uuid';
 
 import type { IUrlMetadata } from '../../types/common';
 import type { IRunConversationFlowPayload } from '../../types/flows';
+import { DeviceEventEmitter } from 'react-native';
+import { ChatEvent } from '../../types/events';
 
 const buildSendParams = (
   message: MessageItem,
@@ -68,6 +73,8 @@ export const useSendMessage = () => {
       } catch {
         updateOneMessage({ ...message, status: MessageStatus.Failed });
       }
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      DeviceEventEmitter.emit(ChatEvent.ScrollToBottom);
     },
     [pushNewMessage, updateOneMessage, deleteOneMessage]
   );
@@ -192,6 +199,8 @@ export const useSendMessage = () => {
       } catch {
         updateOneMessage({ ...message, status: MessageStatus.Failed });
       }
+      await new Promise((resolve) => setTimeout(resolve, 300));
+      DeviceEventEmitter.emit(ChatEvent.ScrollToBottom);
     },
     [pushNewMessage, updateOneMessage, deleteOneMessage]
   );
@@ -233,7 +242,9 @@ export const generateOfflinePushInfo = (
     ex: JSON.stringify({
       icon: conversationData?.faceURL || '',
       conversationId: conversationData?.conversationID || '',
-      operatorUserID,
+      userId: operatorUserID,
+      groupId: conversationData?.groupID || '',
+      botId: getBotId(conversationData) || '',
       title,
       desc,
     }),

package/src/index.tsx

@@ -13,7 +13,6 @@ export * from './core';
 export * from './store';
 export * from './context';
 export * from './hooks/useConversationList';
-export * from './hooks/useChatMessages';
 export * from './hooks/message/useSendMessage';
 export { useImageAttachment } from './hooks/useImageAttachment';
 export { useMediaViewer } from './hooks/useMediaViewer';

package/src/screens/chat-detail/ChatDetail.tsx

@@ -1,11 +1,10 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import { DeviceEventEmitter, Platform, StyleSheet } from 'react-native';
 
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer } from '@droppii/libs';
 import { useNavigation } from '@react-navigation/native';
-import { useChatMessages } from '../../hooks/useChatMessages';
 import { usePinMessage } from '../../hooks/message/usePinMessage';
 import { PinnedMessageBar } from './PinnedMessageBar';
 import { openPinnedMessagesSheet } from './PinnedMessagesSheet';
@@ -13,7 +12,11 @@ import {
   MediaViewerModal,
   type MediaViewerModalHandle,
 } from '../../components/MediaViewerModal';
-import { useConversation, useConversationStore } from '../../store';
+import {
+  useConversation,
+  useConversationStore,
+  useUserStore,
+} from '../../store';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
@@ -29,6 +32,9 @@ import {
 } from '../../hooks/conversation/useGetConversationDetail';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { useMessages } from '../../hooks/message/useMessages';
+import { getBotId } from '../../utils/conversation';
+import { ChatEvent } from '../../types/events';
 
 const ChatDetail = memo(
   ({
@@ -36,7 +42,6 @@ const ChatDetail = memo(
     targetUserId = '',
     targetGroupId = '',
     targetBotId = '',
-    enabled = true,
     showAddMember,
     onBack,
     onPressSearch,
@@ -50,6 +55,7 @@ const ChatDetail = memo(
     const navigation = useNavigation();
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
     const messageToolboxRef = useRef<MessageToolboxRef>(null);
+    const currentUser = useUserStore((s) => s.user);
 
     const { conversationId, isLoading: isLoadingConversation } =
       useGetConversationDetail({
@@ -66,17 +72,10 @@ const ChatDetail = memo(
         if (targetBotId) {
           return targetBotId;
         }
-        try {
-          const id = JSON.parse(conversation?.ex ?? '{}')?.sessionInfo?.data
-            ?.botId;
-          return id;
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (_: any) {
-          return undefined;
-        }
+        return getBotId(conversation);
       }
       return undefined;
-    }, [conversation?.peerType, targetBotId, conversation?.ex]);
+    }, [conversation, targetBotId]);
 
     const { data: botInfo } = useGetStatusConversationBot(botId);
 
@@ -98,12 +97,14 @@ const ChatDetail = memo(
 
     const {
       messages,
-      currentUserId,
-      onLoadEarlier,
-      isLoading,
-      isLoadingEarlier,
-      hasMoreEarlier,
-    } = useChatMessages({ conversationId, enabled });
+      initLoading,
+      moreOldLoading,
+      moreNewLoading,
+      getMoreOldMessages,
+      getMoreNewMessages,
+      hasMoreOld,
+      hasMoreNew,
+    } = useMessages({ conversationId });
 
     const { pinnedMessages, pinMessage, unpinMessage } =
       usePinMessage(conversationId);
@@ -143,11 +144,16 @@ const ChatDetail = memo(
 
     const handlePressPinnedMessageBar = useCallback(() => {
       openPinnedMessagesSheet({
-        currentUserId,
+        currentUserId: currentUser?.userID,
         unpinMessage,
         customMessageItemFactory,
+        onPressMessage: (message: MessageItem) => {
+          DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+            clientMessageId: message?.clientMsgID,
+          });
+        },
       });
-    }, [currentUserId, unpinMessage, customMessageItemFactory]);
+    }, [currentUser, unpinMessage, customMessageItemFactory]);
 
     return (
       <KContainer.Page flex edges={['bottom']}>
@@ -163,7 +169,7 @@ const ChatDetail = memo(
 
         <PinnedMessageBar
           messages={pinnedMessages}
-          currentUserId={currentUserId}
+          currentUserId={currentUser?.userID}
           onPress={handlePressPinnedMessageBar}
         />
 
@@ -174,12 +180,15 @@ const ChatDetail = memo(
         >
           <ChatListLegend
             messages={messages}
-            currentUserId={currentUserId}
+            conversationId={conversationId}
             customMessageItemFactory={customMessageItemFactory}
-            onLoadEarlier={onLoadEarlier}
-            isLoading={isLoading || isLoadingConversation}
-            isLoadingEarlier={isLoadingEarlier}
-            hasMoreEarlier={hasMoreEarlier}
+            isLoading={initLoading || isLoadingConversation}
+            onLoadMoreOld={getMoreOldMessages}
+            hasMoreOld={hasMoreOld}
+            moreOldLoading={moreOldLoading}
+            onLoadMoreNew={getMoreNewMessages}
+            hasMoreNew={hasMoreNew}
+            moreNewLoading={moreNewLoading}
             onMediaPress={handleMediaPress}
             onPressUrl={handlePressUrl}
             onLongPress={handleMessageLongPress}
@@ -195,7 +204,7 @@ const ChatDetail = memo(
         <MediaViewerModal ref={mediaViewerRef} />
         <MessageToolboxOverlay
           ref={messageToolboxRef}
-          currentUserId={currentUserId}
+          currentUserId={currentUser?.userID}
           customMessageItemFactory={customMessageItemFactory}
           onPinMessage={pinMessage}
           onUnpinMessage={unpinMessage}

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { StyleSheet, type View } from 'react-native';
+import { DeviceEventEmitter, StyleSheet, type View } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -18,24 +18,30 @@ import { InputButtonFlow } from '../../components/flows/inputButtons';
 import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
 import type { IRunConversationFlowPayload } from '../../types/flows';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
+import { ChatEvent, type ScrollToMessagePayload } from '../../types/events';
+import { useMessageStore } from '../../store/message';
+import { useChatContext } from '../../context';
 import { messageStyles } from './legend/messageTypes';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { useUserStore } from '../../store';
+import { ChatMessageAPI } from '../../services';
 
 export const ChatListLegend = memo(
   ({
     messages = [],
-    currentUserId = '',
+    conversationId,
     customMessageItemFactory,
-    onLoadEarlier,
-    isLoadingEarlier,
-    hasMoreEarlier,
-    onLoadNewer,
-    isLoadingNewer,
-    hasMoreNewer,
+    onLoadMoreOld,
+    moreOldLoading,
+    hasMoreOld,
+    onLoadMoreNew,
+    moreNewLoading,
+    hasMoreNew,
     onMediaPress,
     onPressUrl,
     onLongPress,
   }: ChatListProps) => {
+    const currentUserId = useUserStore((s) => s.user?.userID);
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
       () => precomputeLegendListData(messages),
@@ -55,9 +61,6 @@ export const ChatListLegend = memo(
     const listRef = useRef<LegendListRef>(null);
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
-    const lastMessageCountRef = useRef(messages.length);
-    const lastFirstMessageIdRef = useRef<string | null>(null);
-    const lastLastMessageIdRef = useRef<string | null>(null);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
     const itemHeightsRef = useRef<Map<string, number>>(new Map());
     const avgItemHeightRef = useRef(120);
@@ -65,6 +68,9 @@ export const ChatListLegend = memo(
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
     const [showBadge, setShowBadge] = useState(false);
 
+    const { applicationType } = useChatContext();
+    const searchMessages = useMessageStore((s) => s.searchMessages);
+
     const handleItemLayout = useCallback(
       (messageId: string, height: number) => {
         itemHeightsRef.current.set(messageId, height);
@@ -214,14 +220,14 @@ export const ChatListLegend = memo(
       () => ({
         animated: false,
         on: {
-          dataChange: !isLoadingEarlier,
-          layout: !isLoadingEarlier,
+          dataChange: !moreOldLoading,
+          layout: !moreOldLoading,
           // Must be disabled while prepending older history; otherwise re-measuring
           // the freshly prepended items snaps the list back to the bottom.
-          itemLayout: !isLoadingEarlier,
+          itemLayout: !moreOldLoading,
         },
       }),
-      [isLoadingEarlier]
+      [moreOldLoading]
     );
 
     // Stable config so the native maintainVisibleContentPosition prop isn't toggled
@@ -232,21 +238,21 @@ export const ChatListLegend = memo(
     const handleStartReached = useCallback(() => {
       if (__DEV__) {
         console.log('[LegendList] onStartReached triggered', {
-          hasMoreEarlier,
-          isLoadingEarlier,
-          willLoad: hasMoreEarlier && !isLoadingEarlier,
+          hasMoreOld,
+          moreOldLoading,
+          willLoad: hasMoreOld && !moreOldLoading,
         });
       }
-      if (hasMoreEarlier && !isLoadingEarlier) {
-        onLoadEarlier?.();
+      if (hasMoreOld && !moreOldLoading) {
+        onLoadMoreOld?.(true);
       }
-    }, [hasMoreEarlier, isLoadingEarlier, onLoadEarlier]);
+    }, [hasMoreOld, moreOldLoading, onLoadMoreOld]);
 
     const handleEndReached = useCallback(() => {
-      if (hasMoreNewer && !isLoadingNewer) {
-        onLoadNewer?.();
+      if (hasMoreNew && !moreNewLoading) {
+        onLoadMoreNew?.(true);
       }
-    }, [hasMoreNewer, isLoadingNewer, onLoadNewer]);
+    }, [hasMoreNew, moreNewLoading, onLoadMoreNew]);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -267,82 +273,30 @@ export const ChatListLegend = memo(
               duration: 300,
             });
           }
+          if (isAtBottom) {
+            ChatMessageAPI.markConversationAsRead(conversationId || '');
+          }
         }, 50);
       },
-      [buttonOpacity]
+      [buttonOpacity, conversationId]
     );
 
     const handleScrollToBottom = useCallback(() => {
-      listRef.current?.scrollToEnd({ animated: true });
-      buttonOpacity.value = withSpring(0, { duration: 300 });
-      isAtBottomRef.current = true;
-      setShowBadge(false);
-    }, [buttonOpacity]);
+      if (hasMoreNew) {
+        onLoadMoreOld?.(false);
+      } else {
+        listRef.current?.scrollToEnd({ animated: true });
+        buttonOpacity.value = withSpring(0, { duration: 300 });
+        isAtBottomRef.current = true;
+        setShowBadge(false);
+      }
+    }, [buttonOpacity, onLoadMoreOld, hasMoreNew]);
 
     const animatedButtonStyle = useAnimatedStyle(() => ({
       opacity: buttonOpacity.value,
       pointerEvents: buttonOpacity.value === 0 ? 'none' : 'auto',
     }));
 
-    // Auto-scroll to bottom when new messages arrive
-    useEffect(() => {
-      const currentCount = messages.length;
-      const previousCount = lastMessageCountRef.current;
-      let timeoutId: NodeJS.Timeout | undefined;
-
-      if (currentCount > previousCount) {
-        // Detect if messages were prepended (added to top) or appended (added to bottom)
-        const firstMsgId = messages[0]?.clientMsgID || messages[0]?.serverMsgID;
-        const lastMsgId =
-          messages[currentCount - 1]?.clientMsgID ||
-          messages[currentCount - 1]?.serverMsgID;
-        const prevFirstMsgId = lastFirstMessageIdRef.current;
-        const prevLastMsgId = lastLastMessageIdRef.current;
-
-        // Messages were prepended if last message ID stayed same but first changed
-        const wasPrepended =
-          prevLastMsgId === lastMsgId && firstMsgId !== prevFirstMsgId;
-
-        // Check if new message is from current user
-        const newMessage = messages[currentCount - 1];
-        const isOwnMessage = newMessage?.sendID === currentUserId;
-
-        // Auto-scroll conditions:
-        // 1. Own message: ALWAYS scroll to bottom (user needs to see what they sent)
-        // 2. Received message: Only scroll if already at bottom (don't interrupt reading history)
-        const shouldScroll =
-          !wasPrepended &&
-          !isLoadingEarlier &&
-          (isOwnMessage || isAtBottomRef.current);
-
-        if (shouldScroll) {
-          timeoutId = setTimeout(() => {
-            listRef.current?.scrollToEnd({ animated: true });
-            buttonOpacity.value = withSpring(0, { duration: 300 });
-            setShowBadge(false);
-          }, 100);
-        } else if (!wasPrepended && !isLoadingEarlier && !isOwnMessage) {
-          // Show badge for received messages while scrolled up
-          setShowBadge(true);
-        }
-      }
-
-      lastMessageCountRef.current = currentCount;
-      if (messages.length > 0) {
-        // Use same ID logic as precomputeLegendListData (with fallback)
-        lastFirstMessageIdRef.current =
-          messages[0]?.clientMsgID || messages[0]?.serverMsgID || null;
-        lastLastMessageIdRef.current =
-          messages[messages.length - 1]?.clientMsgID ||
-          messages[messages.length - 1]?.serverMsgID ||
-          null;
-      }
-
-      return () => {
-        if (timeoutId) clearTimeout(timeoutId);
-      };
-    }, [messages, isLoadingEarlier, buttonOpacity, currentUserId]);
-
     // Cleanup debounce timeouts on unmount
     useEffect(() => {
       return () => {
@@ -355,6 +309,58 @@ export const ChatListLegend = memo(
       };
     }, []);
 
+    useEffect(() => {
+      const bottomSubscription = DeviceEventEmitter.addListener(
+        ChatEvent.ScrollToBottom,
+        handleScrollToBottom
+      );
+
+      const subscription = DeviceEventEmitter.addListener(
+        ChatEvent.ScrollToMessage,
+        ({ clientMessageId }: ScrollToMessagePayload) => {
+          const index = messages.findIndex(
+            (m) => m.clientMsgID === clientMessageId
+          );
+
+          if (index >= 0) {
+            try {
+              listRef.current?.scrollToIndex({
+                index,
+                animated: true,
+                viewPosition: 0.5,
+              });
+            } catch {
+              // scrollToIndex throws if item not rendered yet — force refetch messages
+              searchMessages({
+                applicationType,
+                conversationId,
+                startClientMsgId: clientMessageId,
+              });
+            }
+            return;
+          }
+
+          searchMessages({
+            applicationType,
+            conversationId,
+            startClientMsgId: clientMessageId,
+          });
+        }
+      );
+
+      return () => {
+        bottomSubscription.remove();
+        subscription.remove();
+      };
+    }, [
+      messages,
+      applicationType,
+      searchMessages,
+      conversationId,
+      buttonOpacity,
+      handleScrollToBottom,
+    ]);
+
     // if (isLoading) {
     //   return (
     //     <KContainer.View flex center background={KColors.white}>
@@ -384,7 +390,7 @@ export const ChatListLegend = memo(
           contentContainerStyle={styles.content}
           scrollIndicatorInsets={{ right: 1 }}
           ListHeaderComponent={
-            <LegendChatLoadEarlier isLoading={isLoadingEarlier} />
+            <LegendChatLoadEarlier isLoading={moreOldLoading} />
           }
           onStartReached={handleStartReached}
           onStartReachedThreshold={0.5}

package/src/screens/chat-detail/PinnedMessagesSheet.tsx

@@ -29,6 +29,7 @@ interface PinnedMessagesSheetContentProps {
   currentUserId?: string;
   unpinMessage: (message: MessageItem) => void | Promise<void>;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
+  onPressMessage?: (message: MessageItem) => void;
 }
 
 const PinnedMessagesSheetContent = memo(
@@ -36,6 +37,7 @@ const PinnedMessagesSheetContent = memo(
     currentUserId,
     unpinMessage,
     customMessageItemFactory,
+    onPressMessage,
   }: PinnedMessagesSheetContentProps) => {
     const messages = usePinnedMessageStore((state) => state.messages);
 
@@ -49,13 +51,13 @@ const PinnedMessagesSheetContent = memo(
       [unpinMessage]
     );
 
-    const handlePressMessage = useCallback(() => {
-      UIUtils.bottomSheet.dismiss();
-      UIUtils.alert.open({
-        title: trans('chat:view_original_message'),
-        message: trans('chat:scroll_to_message_todo'),
-      });
-    }, []);
+    const handlePressMessage = useCallback(
+      (message: MessageItem) => {
+        UIUtils.bottomSheet.dismiss();
+        onPressMessage?.(message);
+      },
+      [onPressMessage]
+    );
 
     return (
       <KContainer.View paddingV="0.5rem">
@@ -181,12 +183,14 @@ export interface OpenPinnedMessagesSheetParams {
   currentUserId?: string;
   unpinMessage: (message: MessageItem) => void | Promise<void>;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
+  onPressMessage?: (message: MessageItem) => void;
 }
 
 export const openPinnedMessagesSheet = ({
   currentUserId,
   unpinMessage,
   customMessageItemFactory,
+  onPressMessage,
 }: OpenPinnedMessagesSheetParams) => {
   UIUtils.bottomSheet.open({
     header: {
@@ -201,6 +205,7 @@ export const openPinnedMessagesSheet = ({
           currentUserId={currentUserId}
           unpinMessage={unpinMessage}
           customMessageItemFactory={customMessageItemFactory}
+          onPressMessage={onPressMessage}
         />
       ),
     },