@droppii-org/chat-mobile 0.2.106 → 0.2.108

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

@@ -18,9 +18,13 @@ import {
   useConversationStore,
   useUserStore,
 } from '../../store';
+import { useExpandedMessageStore } from '../../store/expandedMessage';
+import { clearExpandableTextCache } from '../../hooks/useExpandableText';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
+import { useComposerPanelDismiss } from './hooks/useComposerPanelDismiss';
+import { TimelinePressGuardProvider } from '../../context/TimelinePressGuardContext';
 import { shouldShowAddMember } from './conversationHeader.utils';
 import type { ChatDetailProps } from './types';
 import { normalizeUrl } from '../../utils/url';
@@ -81,6 +85,15 @@ const ChatDetail = memo(
 
     const conversation = useConversation(conversationId);
 
+    // Keyed on the conversation, not on unmount: this screen is mounted by the
+    // consumer's navigator, so whether it remounts per conversation or is
+    // reused with a new id is not knowable here. Reopening a conversation must
+    // start every message shortened again.
+    useEffect(() => {
+      useExpandedMessageStore.getState().clearSurface('timeline');
+      clearExpandableTextCache();
+    }, [conversationId]);
+
     const { data: target } = useGetConversationTarget(conversationId);
     const isComposeDisabled = !!target && !target.isActive;
 
@@ -180,6 +193,15 @@ const ChatDetail = memo(
       [onPressUrl]
     );
 
+    const {
+      panelControllerRef,
+      isComposerPanelOpen,
+      onComposerPanelOpenChange,
+      dismissAreaTouchProps,
+      notifyScrollBeginDrag,
+      shouldSwallowPress,
+    } = useComposerPanelDismiss();
+
     const handleMessageLongPress = useCallback<MessageToolboxShowFn>(
       (message, rect, groupPosition) => {
         messageToolboxRef.current?.show(message, rect, groupPosition);
@@ -238,26 +260,31 @@ const ChatDetail = memo(
           onPress={handlePressPinnedMessageBar}
         />
 
-        <ChatListLegend
-          messages={messages}
-          conversationId={conversationId}
-          customMessageItemFactory={customMessageItemFactory}
-          isLoading={initLoading}
-          onLoadMoreOld={getMoreOldMessages}
-          hasMoreOld={hasMoreOld}
-          moreOldLoading={moreOldLoading}
-          onLoadMoreNew={getMoreNewMessages}
-          hasMoreNew={hasMoreNew}
-          moreNewLoading={moreNewLoading}
-          onMediaPress={handleMediaPress}
-          onPressUrl={handlePressUrl}
-          onLongPress={handleMessageLongPress}
-          listRef={listRef}
-          freeze={freeze}
-          scrollMessageToEnd={scrollMessageToEnd}
-          keyboardOffset={insets.bottom}
-          renderConversationViewHeader={renderConversationViewHeader}
-        />
+        <TimelinePressGuardProvider value={shouldSwallowPress}>
+          <ChatListLegend
+            messages={messages}
+            conversationId={conversationId}
+            customMessageItemFactory={customMessageItemFactory}
+            isLoading={initLoading}
+            onLoadMoreOld={getMoreOldMessages}
+            hasMoreOld={hasMoreOld}
+            moreOldLoading={moreOldLoading}
+            onLoadMoreNew={getMoreNewMessages}
+            hasMoreNew={hasMoreNew}
+            moreNewLoading={moreNewLoading}
+            onMediaPress={handleMediaPress}
+            onPressUrl={handlePressUrl}
+            onLongPress={handleMessageLongPress}
+            listRef={listRef}
+            freeze={freeze}
+            scrollMessageToEnd={scrollMessageToEnd}
+            keyboardOffset={insets.bottom}
+            renderConversationViewHeader={renderConversationViewHeader}
+            dismissAreaTouchProps={dismissAreaTouchProps}
+            isComposerPanelOpen={isComposerPanelOpen}
+            onDismissAreaScrollBeginDrag={notifyScrollBeginDrag}
+          />
+        </TimelinePressGuardProvider>
 
         <ChatComposer
           isEmptyMessage={messages?.length === 0}
@@ -265,6 +292,8 @@ const ChatDetail = memo(
           isComposeDisabled={isComposeDisabled}
           onPressJoinGroup={handlePressJoinGroup}
           isJoiningGroup={isJoiningGroup}
+          panelControllerRef={panelControllerRef}
+          onPanelOpenChange={onComposerPanelOpenChange}
         />
 
         <MediaViewerModal ref={mediaViewerRef} />

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

@@ -69,6 +69,11 @@ import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
 import { ChatTypingIndicator } from './ChatTypingIndicator';
+import type { DismissAreaTouchProps } from './hooks/useComposerPanelDismiss';
+import { useGuardedPress } from '../../hooks/useGuardedPress';
+import { useDismissKeyboardFirst } from '../../hooks/useDismissKeyboardFirst';
+import { useTimelinePressGuard } from '../../context/TimelinePressGuardContext';
+import { perfMark } from '../../utils/perf-marker';
 
 // Cluster spacing: a wide gap after the message that closes a cluster, a tight
 // one between messages inside it. These override the flat margin on the row
@@ -135,6 +140,12 @@ interface ChatListLegendInternalProps extends ChatListProps {
     closeKeyboard: boolean;
   }) => Promise<void>;
   keyboardOffset: number;
+  // Tap-outside dismiss of the composer panel (useComposerPanelDismiss).
+  // Internal — not part of the public ChatListProps.
+  dismissAreaTouchProps?: DismissAreaTouchProps;
+  // While true the content is non-hittable: taps only dismiss the panel.
+  isComposerPanelOpen?: boolean;
+  onDismissAreaScrollBeginDrag?: () => void;
 }
 
 export const ChatListLegend = memo(
@@ -147,8 +158,8 @@ export const ChatListLegend = memo(
     hasMoreOld,
     onLoadMoreNew,
     hasMoreNew,
-    onMediaPress,
-    onPressUrl,
+    onMediaPress: onMediaPressProp,
+    onPressUrl: onPressUrlProp,
     onLongPress,
     listRef,
     freeze,
@@ -156,6 +167,9 @@ export const ChatListLegend = memo(
     keyboardOffset,
     isLoading,
     renderConversationViewHeader,
+    dismissAreaTouchProps,
+    isComposerPanelOpen = false,
+    onDismissAreaScrollBeginDrag,
   }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
@@ -177,7 +191,19 @@ export const ChatListLegend = memo(
       [messages, isBotConversation, currentUserId]
     );
 
-    const { retryMessage } = useSendMessage();
+    // True for presses of a touch that began with the panel open — covers the
+    // render gap before `isComposerPanelOpen` reaches the list.
+    const shouldSwallowPress = useTimelinePressGuard();
+    const { retryMessage: retryMessageRaw } = useSendMessage();
+    const retryMessage = useGuardedPress(retryMessageRaw, shouldSwallowPress);
+    const onMediaPress = useGuardedPress(
+      useDismissKeyboardFirst(onMediaPressProp),
+      shouldSwallowPress
+    );
+    const onPressUrl = useGuardedPress(
+      useDismissKeyboardFirst(onPressUrlProp),
+      shouldSwallowPress
+    );
 
     const lastMessageId = useMemo(() => {
       const last = messages[messages.length - 1];
@@ -267,6 +293,7 @@ export const ChatListLegend = memo(
 
     const handleMessageLongPress = useCallback(
       (messageId: string, message: MessageItem) => {
+        if (shouldSwallowPress()) return;
         const node = rowRefsMap.current.get(messageId);
         node?.measureInWindow((x, y, width, height) => {
           if (x == null || y == null || width == null || height == null) return;
@@ -274,23 +301,29 @@ export const ChatListLegend = memo(
           onLongPress?.(message, { x, y, width, height }, groupPosition);
         });
       },
-      [onLongPress, messageDataMap]
+      [onLongPress, messageDataMap, shouldSwallowPress]
     );
 
     const onRunFlow = useCallback(
       (payload: IRunConversationFlowPayload) => {
+        if (shouldSwallowPress()) return;
         runFlow(payload);
       },
-      [runFlow]
+      [runFlow, shouldSwallowPress]
     );
 
     const onResetFlow = useCallback(() => {
+      if (shouldSwallowPress()) return;
       resetFlow();
-    }, [resetFlow]);
+    }, [resetFlow, shouldSwallowPress]);
 
-    const handleMessagePress = useCallback((messageId: string) => {
-      setRevealedMessageId((prev) => (prev === messageId ? null : messageId));
-    }, []);
+    const handleMessagePress = useCallback(
+      (messageId: string) => {
+        if (shouldSwallowPress()) return;
+        setRevealedMessageId((prev) => (prev === messageId ? null : messageId));
+      },
+      [shouldSwallowPress]
+    );
 
     const handleRenderConversationViewHeader = useCallback(() => {
       if (!renderConversationViewHeader) return null;
@@ -554,6 +587,7 @@ export const ChatListLegend = memo(
       // load-more the user never asked for.
       if (!hasUserScrolledRef.current) return;
       if (hasMoreOld && !useMessageStore.getState().moreOldLoading) {
+        perfMark('history_start_reached');
         onLoadMoreOld?.(true);
       }
     }, [hasMoreOld, onLoadMoreOld]);
@@ -567,7 +601,8 @@ export const ChatListLegend = memo(
 
     const handleScrollBeginDrag = useCallback(() => {
       hasUserScrolledRef.current = true;
-    }, []);
+      onDismissAreaScrollBeginDrag?.();
+    }, [onDismissAreaScrollBeginDrag]);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -649,8 +684,11 @@ export const ChatListLegend = memo(
       () => [
         styles.content,
         { paddingBottom: CONTENT_PADDING_VERTICAL + keyboardInset },
+        // Composer panel open: bubbles stop receiving touches (a tap only
+        // dismisses the panel) while the scroll view itself still scrolls.
+        isComposerPanelOpen && styles.contentNotHittable,
       ],
-      [keyboardInset]
+      [keyboardInset, isComposerPanelOpen]
     );
 
     const animatedButtonStyle = useAnimatedStyle(() => ({
@@ -866,6 +904,7 @@ export const ChatListLegend = memo(
     const handleListLoad = useCallback(() => {
       if (hasCorrectedInitialPaddingRef.current) return;
       hasCorrectedInitialPaddingRef.current = true;
+      perfMark('history_list_loaded');
 
       scrollMessageToEnd({ animated: false, closeKeyboard: false });
     }, [scrollMessageToEnd]);
@@ -942,66 +981,75 @@ export const ChatListLegend = memo(
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
         {handleRenderConversationViewHeader()}
-        <KeyboardAwareLegendList
-          ref={listRef}
-          data={messages}
-          renderItem={renderItem}
-          // Deliberate lower bound (not a best-guess average) — see the
-          // comment above `hasCorrectedInitialPaddingRef`. A single-line
-          // bubble floors out around 38-44px, so this stays safely under it.
-          estimatedItemSize={36}
-          getItemType={getItemType}
-          getFixedItemSize={getFixedItemSize}
-          keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems
-          extraData={listExtraData}
-          alignItemsAtEnd
-          alwaysRender={{
-            top: 10,
-          }}
-          maintainScrollAtEnd
-          maintainVisibleContentPosition={maintainVisiblePositionConfig}
-          // See the comment above `maintainVisiblePositionConfig` — this is
-          // what keeps a history prepend's anchor item mounted through a slow
-          // fetch instead of the default 250px window losing it.
-          drawDistance={800}
-          freeze={freeze}
-          keyboardOffset={DISABLE_NATIVE_KEYBOARD_INSET}
-          // iOS only. Left on, React Native recomputes and applies its own
-          // `contentInset` every time the keyboard moves — measured here as
-          // {top: 59, bottom: keyboardHeight}, both wrong. The bottom value
-          // over-insets by the safe area, and the phantom top one is worse:
-          // iOS rests a scroll view at `-contentInset.top`.
-          // That resting offset is what put the content 59pt low and hid the
-          // last message behind the composer the moment a touch let UIKit
-          // re-clamp. legend-list's own KeyboardAvoidingLegendList disables
-          // this for the same reason.
-          automaticallyAdjustContentInsets={false}
-          // No scroll shift from the library either — the content padding
-          // above is the single compensator. Measured with it on: a 302px
-          // keyboard produced a 604px lift, exactly double.
-          keyboardLiftBehavior="never"
-          scrollEventThrottle={16}
-          onScroll={handleScroll}
-          onScrollBeginDrag={handleScrollBeginDrag}
-          onLoad={handleListLoad}
-          contentContainerStyle={contentContainerStyle}
-          scrollIndicatorInsets={{ right: 1 }}
-          ListHeaderComponent={
-            <LegendChatLoadEarlier isLoading={moreOldLoading} />
-          }
-          onStartReached={handleStartReached}
-          // LegendList only re-fires onStartReached after scrolling away from
-          // the threshold by 1.3x and back. At 0.5 that distance exceeded a
-          // short conversation's whole scrollable range, so the mount-time
-          // firing we suppress in handleStartReached "used up" the only
-          // trigger. 0.3 keeps that reset distance safely under a
-          // ~1.5-screen conversation; shorter ones can still hit it.
-          onStartReachedThreshold={0.2}
-          onEndReached={handleEndReached}
-          onEndReachedThreshold={0.2}
-          initialScrollAtEnd
-        />
+        <KContainer.View flex {...dismissAreaTouchProps}>
+          <KeyboardAwareLegendList
+            ref={listRef}
+            data={messages}
+            renderItem={renderItem}
+            // Deliberate lower bound (not a best-guess average) — see the
+            // comment above `hasCorrectedInitialPaddingRef`. A single-line
+            // bubble floors out around 38-44px, so this stays safely under it.
+            estimatedItemSize={36}
+            getItemType={getItemType}
+            getFixedItemSize={getFixedItemSize}
+            keyExtractor={(item) =>
+              String(item.clientMsgID || item.serverMsgID)
+            }
+            recycleItems
+            extraData={listExtraData}
+            alignItemsAtEnd
+            alwaysRender={{
+              top: 10,
+            }}
+            maintainScrollAtEnd
+            maintainVisibleContentPosition={maintainVisiblePositionConfig}
+            // See the comment above `maintainVisiblePositionConfig` — this is
+            // what keeps a history prepend's anchor item mounted through a slow
+            // fetch instead of the default 250px window losing it.
+            drawDistance={800}
+            freeze={freeze}
+            keyboardOffset={DISABLE_NATIVE_KEYBOARD_INSET}
+            // iOS only. Left on, React Native recomputes and applies its own
+            // `contentInset` every time the keyboard moves — measured here as
+            // {top: 59, bottom: keyboardHeight}, both wrong. The bottom value
+            // over-insets by the safe area, and the phantom top one is worse:
+            // iOS rests a scroll view at `-contentInset.top`.
+            // That resting offset is what put the content 59pt low and hid the
+            // last message behind the composer the moment a touch let UIKit
+            // re-clamp. legend-list's own KeyboardAvoidingLegendList disables
+            // this for the same reason.
+            automaticallyAdjustContentInsets={false}
+            // No scroll shift from the library either — the content padding
+            // above is the single compensator. Measured with it on: a 302px
+            // keyboard produced a 604px lift, exactly double.
+            keyboardLiftBehavior="never"
+            // With the default 'never' the first tap while the keyboard is up
+            // only dismisses it, so "Xem thêm", links and buttons don't fire.
+            // 'handled': a touchable consumes the tap and the keyboard stays;
+            // a tap on anything else still dismisses it.
+            keyboardShouldPersistTaps="handled"
+            scrollEventThrottle={16}
+            onScroll={handleScroll}
+            onScrollBeginDrag={handleScrollBeginDrag}
+            onLoad={handleListLoad}
+            contentContainerStyle={contentContainerStyle}
+            scrollIndicatorInsets={{ right: 1 }}
+            ListHeaderComponent={
+              <LegendChatLoadEarlier isLoading={moreOldLoading} />
+            }
+            onStartReached={handleStartReached}
+            // LegendList only re-fires onStartReached after scrolling away from
+            // the threshold by 1.3x and back. At 0.5 that distance exceeded a
+            // short conversation's whole scrollable range, so the mount-time
+            // firing we suppress in handleStartReached "used up" the only
+            // trigger. 0.3 keeps that reset distance safely under a
+            // ~1.5-screen conversation; shorter ones can still hit it.
+            onStartReachedThreshold={0.2}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={0.2}
+            initialScrollAtEnd
+          />
+        </KContainer.View>
         <Animated.View
           style={[styles.scrollToBottomButton, animatedButtonStyle]}
         >
@@ -1033,6 +1081,9 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
   },
+  contentNotHittable: {
+    pointerEvents: 'none',
+  },
   header: {
     position: 'absolute',
     top: 0,

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

@@ -12,6 +12,7 @@ import {
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
 import { usePinnedMessageStore } from '../../store/pinnedMessage';
+import { useExpandedMessageStore } from '../../store/expandedMessage';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { formatMessageTime } from './legend/messageTypes';
 
@@ -122,6 +123,7 @@ const PinnedMessagesSheetContent = memo(
                 <LegendChatMessage
                   message={message}
                   messageId={messageId}
+                  surface="pin"
                   isOutgoing={isOutgoing}
                   createdAtTime={createdAtTime}
                   onPress={handlePressMessage}
@@ -198,6 +200,12 @@ export const openPinnedMessagesSheet = ({
   customMessageItemFactory,
   onPressMessage,
 }: OpenPinnedMessagesSheetParams) => {
+  // Reset on open, not on close. `UIUtils.bottomSheet` is an adapter the host
+  // app registers, so whether dismissing unmounts this content — or keeps it
+  // mounted and hidden — is not ours to know. Clearing here satisfies
+  // "reopened starts shortened" whatever the host does with the sheet.
+  useExpandedMessageStore.getState().clearSurface('pin');
+
   UIUtils.bottomSheet.open({
     header: {
       title: { text: trans('chat:pinned_messages_title') },

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

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { KContainer, KColors } from '@droppii/libs';
+
+import { ChatAttachmentPanel } from '../ChatAttachmentPanel';
+import { StickerPicker } from '../../../components/StickerPicker';
+import { useSendMessage } from '../../../hooks/message/useSendMessage';
+import type { StickerItem } from '../../../types/sticker';
+import type { ActivePanelType } from '../hooks/useChatComposerState';
+import type { DChatPannelAction } from '../types';
+
+interface ChatComposerAccessorySlotProps {
+  visible: boolean;
+  accessorySlotStyle: any;
+  isAttachmentOpen: boolean;
+  activePanelType: ActivePanelType;
+  pannelActions: DChatPannelAction[];
+}
+
+// The keyboard-area slot below the composer that hosts the attachment
+// panel or the sticker picker; its height is driven by useComposerPanels.
+export const ChatComposerAccessorySlot = ({
+  visible,
+  accessorySlotStyle,
+  isAttachmentOpen,
+  activePanelType,
+  pannelActions,
+}: ChatComposerAccessorySlotProps) => {
+  const { sendMessage } = useSendMessage();
+
+  const handleStickerSelect = useCallback(
+    (sticker: StickerItem) => {
+      sendMessage({ sticker });
+    },
+    [sendMessage]
+  );
+
+  return (
+    <KContainer.VisibleView visible={visible}>
+      <Reanimated.View
+        style={[styles.accessorySlot, accessorySlotStyle]}
+        pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+      >
+        {activePanelType === 'attachment' && (
+          <ChatAttachmentPanel actions={pannelActions} />
+        )}
+        {activePanelType === 'sticker' && (
+          <StickerPicker onSelectSticker={handleStickerSelect} />
+        )}
+      </Reanimated.View>
+    </KContainer.VisibleView>
+  );
+};
+
+const styles = StyleSheet.create({
+  accessorySlot: {
+    overflow: 'hidden',
+    backgroundColor: KColors.palette.gray.w25,
+  },
+});