@droppii-org/chat-mobile 0.2.85 → 0.2.87

package/src/core/useChatListener.ts

@@ -2,6 +2,7 @@ import OpenIMSDK, {
   MessageReceiveOptType,
   MessageType,
   OpenIMEvent,
+  PeerType,
   SessionType,
   type ConversationItem,
   type GroupApplicationItem,
@@ -16,13 +17,17 @@ import { useCallback, useEffect } from 'react';
 import { useConversationStore } from '../store/conversation';
 import { ToastFlashMessage } from '../utils/toastFlashMessage';
 import { useUserStore } from '../store/user';
-import { getLastMessageText } from '../utils/messageUtils';
+import {
+  getLastMessageText,
+  GROUP_NOTIFICATION_TYPES,
+} from '../utils/messageUtils';
 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';
 import { getConversationID } from '../utils/conversation';
+import { clearSelfExitedGroup } from '../utils/groupExit';
 import { DeviceEventEmitter } from 'react-native';
 import { ChatEvent } from '../types/events';
 import { conversationQueryKeys, groupQueryKeys } from '../hooks/query-keys';
@@ -64,8 +69,18 @@ export const useChatListener = () => {
         const latestMsg: MessageItem | null = conversation.latestMsg
           ? JSON.parse(conversation.latestMsg)
           : null;
-
-        if (latestMsg?.isInternal) continue;
+        console.log('[latestMsg] OnConversationChanged', latestMsg);
+
+        // Same rule as useMessages: bot-flow automation noise (isInternal) or
+        // a group-notification content type in a Bot conversation must not
+        // become the visible latest-message preview or trigger a toast.
+        const isNoiseMessage =
+          !!latestMsg?.isInternal ||
+          latestMsg?.contentType === MessageType.LogTextMessage ||
+          (conversation?.peerType === PeerType.Bot &&
+            !!latestMsg &&
+            GROUP_NOTIFICATION_TYPES.includes(latestMsg?.contentType));
+        if (isNoiseMessage) continue;
 
         visibleConversations.push(conversation);
 
@@ -274,6 +289,9 @@ export const useChatListener = () => {
 
   const markGroupJoined = useCallback(
     (groupID: string) => {
+      // Back in the group: a future removal is no longer the user's own doing.
+      clearSelfExitedGroup(groupID);
+
       // Mirror of removeGroupConversation: leaving marks the conversation
       // `isNotInGroup`, which keeps it out of the inbox, so rejoining has to
       // clear that flag. This runs on the WS event rather than on joinGroup's

package/src/hooks/groups/useDismissGroup.tsx

@@ -3,6 +3,10 @@ import OpenIMSDK from '@droppii/openim-rn-client-sdk';
 import { KContainer, KLabel } from '@droppii/libs';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
+import {
+  clearSelfExitedGroup,
+  markSelfExitedGroup,
+} from '../../utils/groupExit';
 
 interface UseDismissGroupProps {
   onSuccess?: () => void;
@@ -59,6 +63,9 @@ export function useDismissGroup({ onSuccess }: UseDismissGroupProps) {
         return;
       }
 
+      // Marked before the call, not after: the SDK can deliver
+      // OnGroupDismissed the moment the API returns.
+      markSelfExitedGroup(groupID);
       try {
         await OpenIMSDK.dismissGroup(groupID);
         onSuccess?.();
@@ -67,6 +74,7 @@ export function useDismissGroup({ onSuccess }: UseDismissGroupProps) {
           theme: 'light',
         });
       } catch (error) {
+        clearSelfExitedGroup(groupID);
         console.error('dismissGroup failed', error);
         UIUtils.toast.open({
           title: trans('chat:generic_error'),

package/src/hooks/groups/useGroupAccessGuard.ts

@@ -8,6 +8,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
 import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
+import { wasSelfExitedGroup } from '../../utils/groupExit';
 import { conversationQueryKeys } from '../query-keys';
 
 type GroupAccessState =
@@ -142,6 +143,11 @@ export const useGroupAccessGuard = ({ groupID, onBlocked }: Params) => {
       (payload: GroupRemovedPayload) => {
         if (payload.groupID !== activeGroupId) return;
 
+        // The user walked out themselves — the screen that asked for it is
+        // already navigating away, so a modal here would surface on whatever
+        // they landed on.
+        if (wasSelfExitedGroup(payload.groupID)) return;
+
         // A dismissed group is gone for everyone — no need to re-check.
         if (payload.reason === 'dismissed') {
           block();

package/src/hooks/groups/{useLeaveGroup.ts → useLeaveGroup.tsx}

@@ -3,9 +3,14 @@ import OpenIMSDK, {
   GroupVisibility,
 } from '@droppii/openim-rn-client-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { KColors, KContainer, KLabel } from '@droppii/libs';
 import { conversationQueryKeys, groupQueryKeys } from '../query-keys';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
+import {
+  clearSelfExitedGroup,
+  markSelfExitedGroup,
+} from '../../utils/groupExit';
 
 const showOwnerBlockedModal = () => {
   UIUtils.alert.open({
@@ -21,28 +26,50 @@ const showOwnerBlockedModal = () => {
 
 const confirmLeaveGroup = (visibility?: GroupVisibility) =>
   new Promise<void>((resolve, reject) => {
-    console.log('confirmLeaveGroup', visibility);
-    UIUtils.alert.open({
-      title: trans('chat:leave_group_confirm_title'),
-      message: trans(
-        visibility === GroupVisibility.Public
-          ? 'chat:leave_group_confirm_desc_public'
-          : 'chat:leave_group_confirm_desc_private'
-      ),
-      primaryIndex: 1,
-      buttonType: 'horizontal-button',
-      buttons: [
-        {
-          label: trans('chat:leave_group_confirm_secondary'),
-          kind: 'light',
-          onPress: reject,
-        },
-        {
-          label: trans('chat:leave_group_confirm_primary'),
-          kind: 'danger',
-          onPress: resolve,
-        },
-      ],
+    UIUtils.popup.open({
+      header: {
+        title: { text: trans('chat:leave_group_confirm_title') },
+        alignment: 'center',
+        showCloseButton: true,
+      },
+      body: {
+        renderContent: () => (
+          <KContainer.View padding={'1rem'} justifyContent alignItems>
+            <KLabel.RichText
+              typo="TextMdNormal"
+              textAlign="center"
+              richTextOptions={{
+                i18nKey: trans(
+                  visibility === GroupVisibility.Public
+                    ? 'chat:leave_group_confirm_desc_public'
+                    : 'chat:leave_group_confirm_desc_private'
+                ),
+                components: {
+                  bold: <KLabel.Text typo="TextMdBold" color={KColors.black} />,
+                },
+              }}
+            />
+          </KContainer.View>
+        ),
+      },
+      actions: {
+        buttons: [
+          {
+            label: trans('chat:leave_group_confirm_secondary'),
+            kind: 'light',
+            onPress: () => reject(),
+            weight: 'medium',
+          },
+          {
+            label: trans('chat:leave_group_confirm_primary'),
+            kind: 'danger',
+            onPress: () => resolve(),
+            isLightSolid: true,
+            weight: 'medium',
+          },
+        ],
+        type: 'horizontal-button',
+      },
     });
   });
 
@@ -51,13 +78,19 @@ export const useLeaveGroup = () => {
 
   const mutation = useMutation({
     mutationKey: groupQueryKeys.leave(),
-    mutationFn: (groupID: string) => OpenIMSDK.quitGroup(groupID),
+    mutationFn: (groupID: string) => {
+      // Marked before the call, not after: the SDK can deliver
+      // OnJoinedGroupDeleted the moment the API returns.
+      markSelfExitedGroup(groupID);
+      return OpenIMSDK.quitGroup(groupID);
+    },
     onSuccess: (_data, groupID) => {
       queryClient.invalidateQueries({
         queryKey: conversationQueryKeys.joinedGroup(groupID),
       });
     },
-    onError: () => {
+    onError: (_error, groupID) => {
+      clearSelfExitedGroup(groupID);
       UIUtils.toast.open({
         title: trans('chat:generic_error'),
         theme: 'error',

package/src/hooks/message/useMessages.ts

@@ -1,17 +1,41 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
 import { useMessageStore } from '../../store/message';
 import { useChatContext } from '../../context';
+import { GROUP_NOTIFICATION_TYPES } from '../../utils/messageUtils';
 
 interface IUseMessagesProps {
   conversationId?: string;
   startClientMsgId?: string;
+  peerType?: PeerType;
 }
 
 export const useMessages = ({
   conversationId,
   startClientMsgId,
+  peerType,
 }: IUseMessagesProps) => {
-  const messages = useMessageStore((s) => s.messages);
+  const rawMessages = useMessageStore((s) => s.messages);
+  // History fetches (getMoreOldMessages/getMoreNewMessages/searchMessages)
+  // don't filter server-internal bot-flow messages the way the live socket
+  // path (onRecvNewMessages) does — filter here instead of in the store so
+  // pagination cursors keep reading the untouched array. A group-notification
+  // content type (member joined/kicked/etc.) can never legitimately occur in
+  // a Bot conversation — when it does, it's bot-flow automation noise.
+  const messages = useMemo(
+    () =>
+      rawMessages.filter((message) => {
+        if (message.isInternal) return false;
+        if (
+          peerType === PeerType.Bot &&
+          GROUP_NOTIFICATION_TYPES.includes(message.contentType)
+        ) {
+          return false;
+        }
+        return true;
+      }),
+    [rawMessages, peerType]
+  );
   const { applicationType } = useChatContext();
   const getMoreOldMessages = useMessageStore((s) => s.getMoreOldMessages);
   const getMoreNewMessages = useMessageStore((s) => s.getMoreNewMessages);

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

@@ -98,7 +98,11 @@ const ChatDetail = memo(
       getMoreNewMessages,
       hasMoreOld,
       hasMoreNew,
-    } = useMessages({ conversationId, startClientMsgId: targetMessageId });
+    } = useMessages({
+      conversationId,
+      startClientMsgId: targetMessageId,
+      peerType: conversation?.peerType,
+    });
 
     const { mutate: joinGroup, isPending: isJoiningGroup } = useJoinGroup();
 

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

@@ -145,6 +145,10 @@ export const ChatListLegend = memo(
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
+    // Flips true once LegendList's onLoad fires (initial layout + initial
+    // scroll both settled) — before that, onStartReached/onEndReached can
+    // fire purely from resting scroll position, not a real user gesture.
+    const hasSettledRef = useRef(false);
     const [showBadge, setShowBadge] = useState(false);
     const [highlightedId, setHighlightedId] = useState<string | null>(null);
     const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
@@ -226,7 +230,7 @@ export const ChatListLegend = memo(
           return (
             <>
               {(dayStart || timeBreak) && (
-                <LegendChatDay createdAt={createdAt} timeOnly={!dayStart} />
+                <LegendChatDay createdAt={createdAt} />
               )}
               <KContainer.View
                 ref={(node: View | null) => {
@@ -453,23 +457,51 @@ export const ChatListLegend = memo(
     );
 
     const handleStartReached = useCallback(() => {
+      const willLoad = hasMoreOld && !moreOldLoading;
       if (__DEV__) {
-        console.log('[LegendList] onStartReached triggered', {
-          hasMoreOld,
-          moreOldLoading,
-          willLoad: hasMoreOld && !moreOldLoading,
-        });
+        console.log(
+          willLoad && !hasSettledRef.current
+            ? '[LegendList] ⚠️ onStartReached SPURIOUS mount-time load'
+            : '[LegendList] onStartReached triggered',
+          {
+            conversationId,
+            messagesLength: messages.length,
+            firstMessageId:
+              messages[0]?.clientMsgID || messages[0]?.serverMsgID,
+            hasMoreOld,
+            moreOldLoading,
+            willLoad,
+            duringInitialSettle: !hasSettledRef.current,
+          }
+        );
       }
-      if (hasMoreOld && !moreOldLoading) {
+      if (willLoad) {
         onLoadMoreOld?.(true);
       }
-    }, [hasMoreOld, moreOldLoading, onLoadMoreOld]);
+    }, [conversationId, messages, hasMoreOld, moreOldLoading, onLoadMoreOld]);
 
     const handleEndReached = useCallback(() => {
-      if (hasMoreNew && !moreNewLoading) {
+      const willLoad = hasMoreNew && !moreNewLoading;
+      if (__DEV__) {
+        console.log(
+          willLoad && !hasSettledRef.current
+            ? '[LegendList] ⚠️ onEndReached SPURIOUS mount-time load'
+            : '[LegendList] onEndReached triggered',
+          {
+            conversationId,
+            messagesLength: messages.length,
+            lastMessageId: messages[messages.length - 1]?.clientMsgID,
+            hasMoreNew,
+            moreNewLoading,
+            willLoad,
+            duringInitialSettle: !hasSettledRef.current,
+          }
+        );
+      }
+      if (willLoad) {
         onLoadMoreNew?.(true);
       }
-    }, [hasMoreNew, moreNewLoading, onLoadMoreNew]);
+    }, [conversationId, messages, hasMoreNew, moreNewLoading, onLoadMoreNew]);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -527,6 +559,14 @@ export const ChatListLegend = memo(
       };
     }, []);
 
+    // Debug-only: this component can stay mounted across a conversationId
+    // change (e.g. navigation.replace reusing the same screen instance), so
+    // hasSettledRef must reset per-conversation for the spurious-load log
+    // above to stay accurate for the newly opened conversation.
+    useEffect(() => {
+      hasSettledRef.current = false;
+    }, [conversationId]);
+
     useEffect(() => {
       const bottomSubscription = DeviceEventEmitter.addListener(
         ChatEvent.ScrollToBottom,
@@ -598,6 +638,7 @@ export const ChatListLegend = memo(
       );
     }
 
+    console.log('messages length: ', +messages.length);
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
         <ListComponent
@@ -621,6 +662,16 @@ export const ChatListLegend = memo(
           ListHeaderComponent={
             <LegendChatLoadEarlier isLoading={moreOldLoading} />
           }
+          onLoad={(info: { elapsedTimeInMs: number }) => {
+            hasSettledRef.current = true;
+            if (__DEV__) {
+              console.log('[LegendList] onLoad (initial settle done)', {
+                conversationId,
+                messagesLength: messages.length,
+                elapsedTimeInMs: info.elapsedTimeInMs,
+              });
+            }
+          }}
           onStartReached={handleStartReached}
           onStartReachedThreshold={0.5}
           onEndReached={handleEndReached}

package/src/screens/chat-detail/components/MentionSuggestionList.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
-import { LegendList } from '@legendapp/list/react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
 import { MentionSuggestionItem } from './MentionSuggestionItem';
 import { trans } from '../../../translation';
@@ -11,8 +11,9 @@ import type { MentionSuggestion } from '../../../types/mention';
 // used as the shared estimate since most rows are the single-line kind.
 const ROW_HEIGHT = 40;
 const ROW_GAP = 8;
-const MAX_VISIBLE_ROWS = 6;
-const MAX_PANEL_HEIGHT =
+const MAX_VISIBLE_ROWS = 5;
+// Fixed, not a cap — see listWrapper's `height` below for why.
+const PANEL_HEIGHT =
   ROW_HEIGHT * MAX_VISIBLE_ROWS + ROW_GAP * (MAX_VISIBLE_ROWS - 1);
 
 interface MentionSuggestionListProps {
@@ -86,11 +87,10 @@ export const MentionSuggestionList = memo(
             </KContainer.View>
           ) : (
             <KContainer.View style={styles.listWrapper} padding="0.5rem">
-              <LegendList
+              <FlatList
                 data={suggestions}
                 renderItem={renderItem}
                 keyExtractor={keyExtractor}
-                estimatedItemSize={ROW_HEIGHT}
                 keyboardShouldPersistTaps="handled"
                 onEndReached={hasMore ? onLoadMore : undefined}
                 onEndReachedThreshold={0.5}
@@ -124,8 +124,18 @@ const styles = StyleSheet.create({
     borderTopRightRadius: KSpacingValue['0.75rem'],
     overflow: 'hidden',
   },
+  // Fixed `height`, not `maxHeight` — the panel is absolutely positioned
+  // with only `bottom` set (no `top`, see ChatComposer.tsx's mentionPanel
+  // style), so its height would otherwise have to be inferred from content
+  // through several nested Views. On Android that left the touch/hit-test
+  // bounds out of sync with what was actually painted, so drags over the
+  // list fell through to the message list rendered underneath instead of
+  // scrolling this one. A concrete `height` gives Yoga a definite box from
+  // the very first layout pass. Fixed at 5 rows regardless of result count
+  // so the scrollable area — and the load-more trigger — stays available
+  // even when fewer than 5 suggestions are loaded yet.
   listWrapper: {
-    maxHeight: MAX_PANEL_HEIGHT,
+    height: PANEL_HEIGHT,
   },
   separator: {
     height: ROW_GAP,

package/src/screens/chat-detail/legend/LegendChatDay.tsx

@@ -43,35 +43,25 @@ const formatDayLabel = (createdAt: number): string | null => {
 
 interface LegendChatDayProps {
   createdAt: number;
-  /**
-   * Render just the clock time, without the day. Used where a cluster broke on
-   * elapsed time inside a single day — the date is already on screen above.
-   */
-  timeOnly?: boolean;
 }
 
-export const LegendChatDay = memo(
-  ({ createdAt, timeOnly = false }: LegendChatDayProps) => {
-    const dateStr = useMemo(() => {
-      if (createdAt == null) return null;
-      if (!timeOnly) return formatDayLabel(createdAt);
-
-      const date = new Date(createdAt);
-      return Number.isNaN(date.getTime()) ? null : formatTime(date);
-    }, [createdAt, timeOnly]);
-
-    if (!dateStr) return null;
-
-    return (
-      <KContainer.View center marginV="0.5rem">
-        <KContainer.View>
-          <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
-            {dateStr}
-          </KLabel.Text>
-        </KContainer.View>
+export const LegendChatDay = memo(({ createdAt }: LegendChatDayProps) => {
+  const dateStr = useMemo(() => {
+    if (createdAt == null) return null;
+    return formatDayLabel(createdAt);
+  }, [createdAt]);
+
+  if (!dateStr) return null;
+
+  return (
+    <KContainer.View center marginV="0.5rem">
+      <KContainer.View>
+        <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+          {dateStr}
+        </KLabel.Text>
       </KContainer.View>
-    );
-  }
-);
+    </KContainer.View>
+  );
+});
 
 LegendChatDay.displayName = 'LegendChatDay';

package/src/translation/resources/i18n.ts

@@ -141,9 +141,9 @@ const i18nKey: Record<string, string> = {
   'chat:info_leave_group': 'Rời nhóm',
   'chat:leave_group_confirm_title': 'Rời nhóm?',
   'chat:leave_group_confirm_desc_private':
-    'Sau khi rời nhóm, bạn sẽ không thể xem tin nhắn từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn rời khỏi nhóm?',
+    'Sau khi rời nhóm, bạn sẽ không thể xem tin nhắn từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn <bold>rời khỏi nhóm</bold>?',
   'chat:leave_group_confirm_desc_public':
-    'Sau khi rời nhóm, bạn sẽ không thể nhắn tin hay nhận thông báo từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn rời khỏi nhóm?',
+    'Sau khi rời nhóm, bạn sẽ không thể nhắn tin hay nhận thông báo từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn <bold>rời khỏi nhóm</bold>?',
   'chat:leave_group_confirm_primary': 'Rời nhóm',
   'chat:leave_group_confirm_secondary': 'Ở lại nhóm',
   'chat:leave_group_blocked_title': 'Không thể rời nhóm',

package/src/utils/groupExit.ts

@@ -0,0 +1,26 @@
+/**
+ * Groups this user deliberately left or dismissed.
+ *
+ * Leaving fires the same SDK callbacks as being removed by someone else, and
+ * the `reason` on ChatEvent.GroupRemoved cannot tell them apart —
+ * OnJoinedGroupDeleted reports a self-initiated quit and a kick identically.
+ * The access guard needs the distinction: losing access is worth a modal, but
+ * walking out is not — the screen that asked for it is already navigating away,
+ * so a modal would land on the inbox the user just arrived at.
+ *
+ * Cleared on rejoin, so a later involuntary removal of the same group is
+ * treated as one. Deliberately not time-based: a timer would make correctness
+ * depend on how fast the SDK round-trips.
+ */
+const selfExitedGroups = new Set<string>();
+
+export const markSelfExitedGroup = (groupID: string): void => {
+  if (groupID) selfExitedGroups.add(groupID);
+};
+
+export const clearSelfExitedGroup = (groupID: string): void => {
+  selfExitedGroups.delete(groupID);
+};
+
+export const wasSelfExitedGroup = (groupID: string): boolean =>
+  selfExitedGroups.has(groupID);