@droppii-org/chat-mobile 0.2.54 → 0.2.56

package/src/screens/ChatInfo/ChatInfoProfile.tsx

@@ -6,7 +6,6 @@ import {
   type ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
 import { Avatar } from '../../components/Avatar';
-import { useGetUsersInfo } from '../../hooks/users/useGetUsersInfo';
 import { useMuteConversation } from '../../hooks/useMuteConversation';
 import { trans } from '../../translation';
 import { StyleSheet } from 'react-native';
@@ -15,51 +14,44 @@ import { NamePrefixIcon } from '../../components/ThreadCard';
 interface QuickActionProps {
   iconName: string;
   label: string;
+  background: string;
+  iconColor: string;
   onPress?: () => void;
 }
 
-const QuickAction = memo(({ iconName, label, onPress }: QuickActionProps) => (
-  <KContainer.View alignItems paddingH="0.75rem" paddingV="0.5rem">
-    <KContainer.Touchable
-      height={40}
-      width={40}
-      br={'round'}
-      background={KColors.palette.gray.w25}
-      center
-      onPress={onPress}
-    >
-      <KImage.VectorIcons name={iconName} size={18} color={KColors.gray.dark} />
-    </KContainer.Touchable>
-    <KLabel.Text
-      typo="TextSmMedium"
-      color={KColors.gray.dark}
-      marginT="0.25rem"
-      textAlign="center"
-    >
-      {label}
-    </KLabel.Text>
-  </KContainer.View>
-));
+const QuickAction = memo(
+  ({ iconName, label, background, iconColor, onPress }: QuickActionProps) => (
+    <KContainer.View alignItems paddingH="0.75rem" paddingV="0.5rem">
+      <KContainer.Touchable
+        height={40}
+        width={40}
+        br={'round'}
+        background={background}
+        center
+        onPress={onPress}
+      >
+        <KImage.VectorIcons name={iconName} size={18} color={iconColor} />
+      </KContainer.Touchable>
+      <KLabel.Text
+        typo="TextSmMedium"
+        color={KColors.gray.dark}
+        marginT="0.25rem"
+        textAlign="center"
+      >
+        {label}
+      </KLabel.Text>
+    </KContainer.View>
+  )
+);
 
 interface ChatInfoProfileProps {
   conversation?: ConversationItem;
-  targetUserId?: string;
   onPressSearch?: () => void;
 }
 
 const ChatInfoProfile = memo(
-  ({ conversation, targetUserId, onPressSearch }: ChatInfoProfileProps) => {
-    const { data: usersInfo } = useGetUsersInfo(
-      targetUserId ? [targetUserId] : []
-    );
-
-    const { faceURL, showName } = useMemo(() => {
-      const userInfo = usersInfo?.[0];
-      return {
-        faceURL: conversation?.faceURL || userInfo?.faceURL,
-        showName: conversation?.showName || userInfo?.nickname,
-      };
-    }, [conversation, usersInfo]);
+  ({ conversation, onPressSearch }: ChatInfoProfileProps) => {
+    const { faceURL, showName = '' } = conversation ?? {};
 
     const isMuted =
       conversation != null &&
@@ -98,7 +90,7 @@ const ChatInfoProfile = memo(
           <Avatar
             source={faceURL}
             size="4xlg"
-            fullName={showName || ''}
+            fullName={showName}
             badge={badge}
           />
           <KContainer.View row alignItems marginT="0.5rem">
@@ -108,7 +100,7 @@ const ChatInfoProfile = memo(
               color={KColors.black}
               numberOfLines={1}
             >
-              {showName || ''}
+              {showName}
             </KLabel.Text>
           </KContainer.View>
         </KContainer.View>
@@ -124,12 +116,18 @@ const ChatInfoProfile = memo(
             iconName="search-o"
             label={trans('chat:info_search_action')}
             onPress={onPressSearch}
+            background={KColors.palette.gray.w25}
+            iconColor={KColors.gray.dark}
           />
           <QuickAction
-            iconName={isMuted ? 'bell-o' : 'bell-off-o'}
+            iconName={isMuted ? 'bell-b' : 'bell-off-o'}
             label={
               isMuted ? trans('chat:unmute_action') : trans('chat:mute_action')
             }
+            background={
+              isMuted ? KColors.primary.normal : KColors.palette.gray.w25
+            }
+            iconColor={isMuted ? KColors.white : KColors.gray.dark}
             onPress={handleNotificationPress}
           />
         </KContainer.View>

package/src/screens/ChatInfo/types.ts

@@ -1,10 +1,7 @@
 import type { DThreadResourceContentType } from '../../types/chat';
 
 export interface ChatInfoProps {
-  targetConversationId?: string;
-  targetUserId?: string;
-  targetGroupId?: string;
-  targetBotId?: string;
+  conversationId?: string;
   onBack?: () => void;
   onPressSearch?: () => void;
   onPressMedia?: (tab: DThreadResourceContentType) => void;

package/src/screens/MediaView/index.tsx

@@ -7,6 +7,7 @@ import {
   StyleSheet,
   type ViewToken,
   StatusBar,
+  useWindowDimensions,
 } from 'react-native';
 import {
   LegendList,
@@ -65,6 +66,8 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   const [isScrolling, setIsScrolling] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
 
+  const { height } = useWindowDimensions();
+
   const dismiss = useCallback(() => {
     onDismiss?.();
   }, [onDismiss]);
@@ -153,6 +156,7 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
             url={item?.url || ''}
             isActive={itemIndex === index && !isScrolling}
             showCustomControls={false}
+            height={height}
           />
         </KContainer.VisibleView>
         <KContainer.VisibleView visible={!item.isVideo}>
@@ -167,7 +171,7 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
         </KContainer.VisibleView>
       </KContainer.Touchable>
     ),
-    [index, isScrolling]
+    [index, isScrolling, height]
   );
 
   const renderFooter = useMemo(() => {

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

@@ -46,7 +46,6 @@ const ChatDetail = memo(
     onPressSearch,
     onPressAddMember,
     onPressMenu,
-    onPressAvatar,
     onPressUrl,
     customMessageItemFactory,
     pannelActions,
@@ -149,6 +148,10 @@ const ChatDetail = memo(
       });
     }, [currentUser, unpinMessage, customMessageItemFactory]);
 
+    const handlePressMenu = useCallback(() => {
+      onPressMenu?.(conversationId);
+    }, [conversationId, onPressMenu]);
+
     return (
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
@@ -158,8 +161,8 @@ const ChatDetail = memo(
           onBack={onBack ?? handleBackDefault}
           onPressSearch={onPressSearch}
           onPressAddMember={onPressAddMember}
-          onPressMenu={onPressMenu}
-          onPressAvatar={onPressAvatar}
+          onPressMenu={handlePressMenu}
+          onPressAvatar={handlePressMenu}
         />
 
         <PinnedMessageBar

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

@@ -7,7 +7,12 @@ import {
   useState,
   type RefObject,
 } from 'react';
-import { DeviceEventEmitter, StyleSheet, type View } from 'react-native';
+import {
+  DeviceEventEmitter,
+  StyleSheet,
+  useWindowDimensions,
+  type View,
+} from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -32,9 +37,20 @@ import { ChatEvent, type ScrollToMessagePayload } from '../../types/events';
 import { useMessageStore } from '../../store/message';
 import { useChatContext } from '../../context';
 import { messageStyles } from './legend/messageTypes';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
+import { resolveImageDisplayDims } from '../../components/messages/imageMessage';
+import { STICKER_SIZE } from '../../components/messages/stickerMessage';
+import ChatImageDimens, {
+  CHAT_IMAGE_VIEW_SOURCE,
+} from '../../utils/chatImageDimens';
+
+// Row wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`)
+// adds only a bottom margin — no vertical padding — so a fixed-size item's true
+// rendered height is `content height + this margin`.
+const ROW_MARGIN_BOTTOM = KSpacingValue['0.25rem'];
 
 interface ChatListLegendInternalProps extends ChatListProps {
   listRef: RefObject<LegendListRef | null>;
@@ -66,6 +82,7 @@ export const ChatListLegend = memo(
     keyboardOffset,
   }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
+    const windowWidth = useWindowDimensions().width;
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
       () => precomputeLegendListData(messages),
@@ -85,39 +102,12 @@ export const ChatListLegend = memo(
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
-    const itemHeightsRef = useRef<Map<string, number>>(new Map());
-    const avgItemHeightRef = useRef(120);
-    const heightDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
     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);
-
-        // Debounce average height calculation (batch updates)
-        if (heightDebounceRef.current) {
-          clearTimeout(heightDebounceRef.current);
-        }
-
-        heightDebounceRef.current = setTimeout(() => {
-          if (itemHeightsRef.current.size > 0) {
-            const total = Array.from(itemHeightsRef.current.values()).reduce(
-              (a, b) => a + b,
-              0
-            );
-            avgItemHeightRef.current = Math.round(
-              total / itemHeightsRef.current.size
-            );
-          }
-        }, 100); // Batch updates every 100ms during load
-      },
-      []
-    );
-
     const handleMessageLongPress = useCallback(
       (messageId: string, message: MessageItem) => {
         const node = rowRefsMap.current.get(messageId);
@@ -181,9 +171,6 @@ export const ChatListLegend = memo(
                     ? messageStyles.messageRowRight
                     : messageStyles.messageRowLeft
                 }
-                onLayout={(e) =>
-                  handleItemLayout(messageId, e.nativeEvent.layout.height)
-                }
               >
                 <LegendChatMessage
                   message={message}
@@ -234,30 +221,118 @@ export const ChatListLegend = memo(
         onResetFlow,
         onRunFlow,
         conversationFlow?.flowCurrentStep,
-        handleItemLayout,
         retryMessage,
       ]
     );
 
-    const maintainScrollConfig = useMemo(
-      () => ({
-        animated: false,
-        on: {
-          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: !moreOldLoading,
-        },
-      }),
-      [moreOldLoading]
-    );
+    // const maintainScrollConfig = useMemo(
+    //   () => ({
+    //     animated: false,
+    //     on: {
+    //       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: !moreOldLoading,
+    //     },
+    //   }),
+    //   [moreOldLoading]
+    // );
 
     // Stable config so the native maintainVisibleContentPosition prop isn't toggled
     // mid-prepend (toggling forces an extra layout recompute). `data` anchoring keeps
     // the viewport pinned to the item being read when older messages are added on top.
     const maintainVisiblePositionConfig = useMemo(() => ({ data: true }), []);
 
+    // Buckets averaging (`averageSizes[itemType]`, internal to LegendList) per
+    // content type, so a batch of images landing early doesn't pollute the
+    // estimate used for still-unmeasured text rows and vice versa. Items
+    // rendered via `customMessageItemFactory` (host apps can override ANY
+    // content type with an arbitrary custom node — see `LegendChatMessage`'s
+    // `customNode` short-circuit, checked before its own contentType switch)
+    // get their own bucket per content type, so a custom node's real measured
+    // height never pollutes the native component's average for that same type.
+    const getItemType = useCallback(
+      (item: MessageItem) => {
+        const isCustom = !!customMessageItemFactory?.(item);
+        return `${item?.contentType ?? 'default'}${isCustom ? '-custom' : ''}`;
+      },
+      [customMessageItemFactory]
+    );
+
+    // Exact size for content types that are knowable ahead of render — see
+    // `plans/260728-1400-chatlist-legend-fixed-item-size/plan.md`. Returns
+    // `undefined` (defer to dynamic measurement) for anything whose size can't
+    // be predicted, AND for any item carrying extra chrome this function
+    // doesn't account for (day-divider above it, trailing flow-input-buttons
+    // row) — `getFixedItemSize` describes the ENTIRE item LegendList renders,
+    // and once it resolves a number that item is never measured again, so
+    // guessing wrong here is a permanent regression, not just an approximation.
+    const getFixedItemSize = useCallback(
+      (item: MessageItem, index: number): number | undefined => {
+        const message = item;
+        const messageId =
+          message.clientMsgID ||
+          message.serverMsgID ||
+          `temp-${message.sendTime || message.createTime}-${index}`;
+
+        if (messageDataMap.get(messageId)?.dayStart) return undefined;
+
+        // Resolve the content-type candidate FIRST — for every type other
+        // than these three the result is `undefined` regardless of anything
+        // else, so bail before paying for a `customMessageItemFactory` call
+        // (text/quote/link/file/merge/revoke are the overwhelming majority of
+        // messages in a real chat — skip the extra call for all of them).
+        let candidateSize: number;
+        switch (message.contentType) {
+          case MessageType.PictureMessage:
+            candidateSize =
+              resolveImageDisplayDims(message, windowWidth).height +
+              ROW_MARGIN_BOTTOM;
+            break;
+          case MessageType.VideoMessage:
+            candidateSize =
+              ChatImageDimens.getDimensions(
+                CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
+              ).height + ROW_MARGIN_BOTTOM;
+            break;
+          case MessageType.StickerMessage:
+            candidateSize = STICKER_SIZE + ROW_MARGIN_BOTTOM;
+            break;
+          default:
+            return undefined;
+        }
+
+        // `customMessageItemFactory` can override rendering for ANY content
+        // type with an arbitrary node (`LegendChatMessage` checks it first,
+        // before its own contentType switch) — its real height is unknowable
+        // here, so defer to dynamic measurement when it intercepts. Only
+        // checked once we know this item would otherwise be fixed-sizeable.
+        if (customMessageItemFactory?.(message)) return undefined;
+
+        const isOutgoing = message.sendID === currentUserId;
+        const isLastIncoming = !isOutgoing && messageId === lastMessageId;
+        if (
+          isLastIncoming &&
+          isBotConversation &&
+          getFlowInputButtonsNode(conversationFlow?.flowCurrentStep)
+        ) {
+          return undefined;
+        }
+
+        return candidateSize;
+      },
+      [
+        messageDataMap,
+        customMessageItemFactory,
+        currentUserId,
+        lastMessageId,
+        isBotConversation,
+        conversationFlow?.flowCurrentStep,
+        windowWidth,
+      ]
+    );
+
     const handleStartReached = useCallback(() => {
       if (__DEV__) {
         console.log('[LegendList] onStartReached triggered', {
@@ -320,15 +395,12 @@ export const ChatListLegend = memo(
       pointerEvents: buttonOpacity.value === 0 ? 'none' : 'auto',
     }));
 
-    // Cleanup debounce timeouts on unmount
+    // Cleanup debounce timeout on unmount
     useEffect(() => {
       return () => {
         if (scrollDebounceRef.current) {
           clearTimeout(scrollDebounceRef.current);
         }
-        if (heightDebounceRef.current) {
-          clearTimeout(heightDebounceRef.current);
-        }
       };
     }, []);
 
@@ -402,13 +474,15 @@ export const ChatListLegend = memo(
           ref={listRef}
           data={messages}
           renderItem={renderItem}
-          estimatedItemSize={avgItemHeightRef.current}
+          estimatedItemSize={100}
+          getItemType={getItemType}
+          getFixedItemSize={getFixedItemSize}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
           recycleItems={false}
           extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
-          maintainScrollAtEnd={maintainScrollConfig}
+          maintainScrollAtEnd={true}
           freeze={freeze}
           keyboardOffset={keyboardOffset}
           scrollEventThrottle={16}

package/src/screens/chat-detail/types.ts

@@ -42,7 +42,7 @@ export interface ChatDetailHeaderProps {
   onBack?: () => void;
   onPressSearch?: () => void;
   onPressAddMember?: () => void;
-  onPressMenu?: () => void;
+  onPressMenu?: (conversationId?: string) => void;
   onPressAvatar?: () => void;
   conversationId: string;
   targetUserId?: string;