@droppii-org/chat-mobile 0.2.84 → 0.2.86

package/src/core/useChatListener.ts

@@ -2,6 +2,7 @@ import OpenIMSDK, {
   MessageReceiveOptType,
   MessageType,
   OpenIMEvent,
+  PeerType,
   SessionType,
   type ConversationItem,
   type GroupApplicationItem,
@@ -16,7 +17,10 @@ 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';
@@ -64,8 +68,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);
 
@@ -141,7 +155,7 @@ export const useChatListener = () => {
       groupName: string | undefined,
       reason: 'left' | 'dismissed' | 'kicked'
     ) => {
-      // console.log('[Listener] removeGroupConversation', { groupID, reason });
+      console.log('[Listener] removeGroupConversation', { groupID, reason });
 
       const conversationID = getConversationID(SessionType.Group, groupID);
       // const conversation = useConversationStore.getState().map[conversationID];
@@ -163,6 +177,24 @@ export const useChatListener = () => {
             );
           }
         );
+      } else if (reason === 'kicked' || reason === 'left') {
+        console.log(
+          '[Listener] User was kicked from group, hiding local conversation',
+          {
+            groupID,
+            conversationID,
+          }
+        );
+        // Being kicked keeps the group intact for other members — hide the
+        // conversation from this user's local list instead of deleting it,
+        // so it doesn't resurface on the next full sync/app restart.
+        OpenIMSDK.hideConversation(conversationID).catch((error) => {
+          console.error(
+            '[Listener] Failed to hide local conversation',
+            conversationID,
+            error
+          );
+        });
       }
 
       queryClient.removeQueries({
@@ -199,7 +231,7 @@ export const useChatListener = () => {
 
   const onGroupMemberDeleted = useCallback(
     (member: GroupMemberItem) => {
-      // console.log('[Listener] OnGroupMemberDeleted', member);
+      console.log('[Listener] OnGroupMemberDeleted', member);
       queryClient.invalidateQueries({
         queryKey: conversationQueryKeys.groupInfo(member.groupID),
       });
@@ -215,7 +247,7 @@ export const useChatListener = () => {
 
   const onJoinedGroupDeleted = useCallback(
     (group: GroupItem) => {
-      // console.log('[Listener] OnJoinedGroupDeleted', group);
+      console.log('[Listener] OnJoinedGroupDeleted', group);
       removeGroupConversation(group.groupID, group.groupName, 'left');
     },
     [removeGroupConversation]
@@ -223,10 +255,10 @@ export const useChatListener = () => {
 
   const onGroupDismissed = useCallback(
     (group: GroupItem) => {
-      // console.log('[Listener] OnGroupDismissed', {
-      //   groupID: group.groupID,
-      //   groupName: group.groupName,
-      // });
+      console.log('[Listener] OnGroupDismissed', {
+        groupID: group.groupID,
+        groupName: group.groupName,
+      });
       removeGroupConversation(group.groupID, group.groupName, 'dismissed');
     },
     [removeGroupConversation]

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

@@ -3,6 +3,7 @@ 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';
@@ -21,28 +22,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',
+      },
     });
   });
 

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/ChatMessageInput.tsx

@@ -105,33 +105,53 @@ export const ChatMessageInput = memo(
             </KContainer.Touchable>
           </KContainer.VisibleView>
 
-          <TextInput
-            ref={inputRef}
-            placeholder={placeholder}
-            placeholderTextColor={KColors.palette.gray.w200}
-            {...(hasMentions ? {} : { value })}
-            onChangeText={onChangeText}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onContentSizeChange={onContentSizeChange}
-            onSelectionChange={onSelectionChange}
-            multiline
-            blurOnSubmit={false}
-            autoCorrect={false}
-            scrollEnabled
-            allowFontScaling={false}
-            underlineColorAndroid={KColors.transparent}
-            selectionColor={KColors.selector}
-            textAlignVertical={isMultilineInput ? 'top' : 'center'}
-            style={[styles.textInput]}
-          >
-            {hasMentions ? (
+          {hasMentions ? (
+            <TextInput
+              ref={inputRef}
+              placeholder={placeholder}
+              placeholderTextColor={KColors.palette.gray.w200}
+              onChangeText={onChangeText}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onContentSizeChange={onContentSizeChange}
+              onSelectionChange={onSelectionChange}
+              multiline
+              blurOnSubmit={false}
+              autoCorrect={false}
+              scrollEnabled
+              allowFontScaling={false}
+              underlineColorAndroid={KColors.transparent}
+              selectionColor={KColors.selector}
+              textAlignVertical={isMultilineInput ? 'top' : 'center'}
+              style={[styles.textInput]}
+            >
               <MentionHighlightAdapter
                 text={value ?? ''}
                 mentions={mentions!}
               />
-            ) : null}
-          </TextInput>
+            </TextInput>
+          ) : (
+            <TextInput
+              ref={inputRef}
+              placeholder={placeholder}
+              placeholderTextColor={KColors.palette.gray.w200}
+              value={value}
+              onChangeText={onChangeText}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onContentSizeChange={onContentSizeChange}
+              onSelectionChange={onSelectionChange}
+              multiline
+              blurOnSubmit={false}
+              autoCorrect={false}
+              scrollEnabled
+              allowFontScaling={false}
+              underlineColorAndroid={KColors.transparent}
+              selectionColor={KColors.selector}
+              textAlignVertical={isMultilineInput ? 'top' : 'center'}
+              style={[styles.textInput]}
+            />
+          )}
 
           {renderEmojiNode()}
         </KContainer.View>

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/services/mentionSearch.ts

@@ -31,12 +31,19 @@ export function createOpenIMMentionSearchSource(
 ): MentionSearchSource {
   return {
     async search({ keyword, limit, offset }): Promise<MentionSearchResult> {
+      // The Android bridge does `options.getInt("offset")` unconditionally
+      // (OpenImSdkRnModule.java) — an `undefined` value here gets stripped
+      // entirely crossing the JS->native bridge (RN drops `undefined`
+      // object keys), and the native side throws ("offset") rather than
+      // treating it as missing/zero. Guard here at the boundary so this
+      // call is safe no matter what the caller passes.
+      const safeOffset = Number.isFinite(offset) ? offset : 0;
       const members =
         keyword === ''
           ? await OpenIMSDK.getGroupMemberList({
               groupID,
               filter: GroupMemberFilter.All,
-              offset,
+              offset: safeOffset,
               count: limit,
             })
           : await OpenIMSDK.searchGroupMembers({
@@ -44,7 +51,7 @@ export function createOpenIMMentionSearchSource(
               keywordList: [keyword],
               isSearchUserID: false,
               isSearchMemberNickname: true,
-              offset,
+              offset: safeOffset,
               count: limit,
             });
 

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',