@droppii-org/chat-mobile 0.2.106 → 0.2.107

package/src/components/messages/PreviewScrollableText.tsx

@@ -0,0 +1,98 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import { ScrollView, View, type LayoutChangeEvent } from 'react-native';
+
+/**
+ * Set by the toolbox overlay around its clone. `maxHeight` is the space the
+ * clone may take; `contentHeight` is how tall the clone currently is.
+ * `onScrollableChange` reports whether the text is capped (and so scrolls),
+ * because the overlay's tap-to-dismiss would otherwise block that scroll.
+ */
+export interface ClonePreviewBudget {
+  maxHeight: number;
+  contentHeight: number;
+  onScrollableChange: (scrollable: boolean) => void;
+}
+
+export const ClonePreviewBudgetContext =
+  createContext<ClonePreviewBudget | null>(null);
+
+// Never squeeze the text below three lines to make room for a tall card.
+const MIN_TEXT_HEIGHT = 25.6 * 3;
+
+/**
+ * An expanded message can be taller than the overlay. Scrolling the whole
+ * clone clips the bubble along a straight edge — square corners — so inside
+ * the overlay the text region scrolls instead and the bubble keeps its shape.
+ *
+ * Budget: whatever the rest of the clone (padding, quote strip, link card,
+ * time row) does not use. `contentHeight` and this box's height arrive from
+ * native at different moments, and mixing a fresh one with a stale one makes
+ * the cap swing between two sizes indefinitely. So the rest is read only from
+ * a consistent pair — while uncapped, when the box equals the natural height —
+ * and frozen once a cap is applied, which breaks the feedback loop.
+ */
+export const PreviewScrollableText = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const budget = useContext(ClonePreviewBudgetContext);
+  const [naturalHeight, setNaturalHeight] = useState(0);
+  const [boxHeight, setBoxHeight] = useState(0);
+  const [frozenRest, setFrozenRest] = useState<number | null>(null);
+
+  const onBoxLayout = useCallback((e: LayoutChangeEvent) => {
+    setBoxHeight(e.nativeEvent.layout.height);
+  }, []);
+  const onContentLayout = useCallback((e: LayoutChangeEvent) => {
+    setNaturalHeight(e.nativeEvent.layout.height);
+  }, []);
+
+  let rest = frozenRest;
+  const uncappedPairIsConsistent =
+    !!budget &&
+    naturalHeight > 0 &&
+    Math.abs(boxHeight - naturalHeight) <= 1 &&
+    budget.contentHeight >= naturalHeight;
+  if (budget && rest == null && uncappedPairIsConsistent) {
+    rest = budget.contentHeight - naturalHeight;
+  }
+
+  let maxHeight: number | undefined;
+  if (budget && rest != null) {
+    const allowed = budget.maxHeight - rest;
+    if (naturalHeight > allowed + 1) {
+      maxHeight = Math.max(allowed, MIN_TEXT_HEIGHT);
+      if (frozenRest == null) setFrozenRest(rest);
+    }
+  }
+
+  const scrollable = maxHeight != null;
+  const onScrollableChange = budget?.onScrollableChange;
+  useEffect(() => {
+    if (!onScrollableChange) return;
+    onScrollableChange(scrollable);
+    return () => onScrollableChange(false);
+  }, [onScrollableChange, scrollable]);
+
+  if (!budget) return <>{children}</>;
+
+  return (
+    <ScrollView
+      style={maxHeight != null ? { maxHeight } : undefined}
+      onLayout={onBoxLayout}
+      nestedScrollEnabled
+      bounces={false}
+      showsVerticalScrollIndicator={false}
+    >
+      <View onLayout={onContentLayout}>{children}</View>
+    </ScrollView>
+  );
+};

package/src/components/messages/linkMessage/index.tsx

@@ -10,35 +10,37 @@ import { LinkPreviewCard } from './LinkPreviewCard';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
 import { LINK_URL_COLOR } from '../../../utils/theme';
+import { ExpandableMessageText } from '../ExpandableMessageText';
 
+// Returns the inner runs only — the wrapping <Text> comes from
+// ExpandableMessageText, which is the node the line clamp has to land on.
 const renderTextWithLinks = (
   content: string,
   urls: string[],
   onPressUrl?: (url: string) => void
-) => (
-  <KLabel.Text typo="TextMdNormal">
-    {splitTextByUrls(content, urls).map((part, i) =>
-      part.isUrl ? (
-        <KLabel.Text
-          key={i}
-          onPress={() => onPressUrl?.(part.text)}
-          color={LINK_URL_COLOR}
-          typo="TextMdMedium"
-        >
-          {part.text}
-        </KLabel.Text>
-      ) : (
-        <KLabel.Text typo="TextMdNormal" key={i}>
-          {part.text}
-        </KLabel.Text>
-      )
-    )}
-  </KLabel.Text>
-);
+) =>
+  splitTextByUrls(content, urls).map((part, i) =>
+    part.isUrl ? (
+      <KLabel.Text
+        key={i}
+        onPress={() => onPressUrl?.(part.text)}
+        color={LINK_URL_COLOR}
+        typo="TextMdMedium"
+      >
+        {part.text}
+      </KLabel.Text>
+    ) : (
+      <KLabel.Text typo="TextMdNormal" key={i}>
+        {part.text}
+      </KLabel.Text>
+    )
+  );
 
 export const LinkMessage = memo(
   ({
     message,
+    messageId,
+    surface,
     isOutgoing,
     createdAtTime,
     onPressUrl,
@@ -64,7 +66,14 @@ export const LinkMessage = memo(
           >
             {!!content?.trim() && (
               <KContainer.View style={styles.textRow}>
-                {renderTextWithLinks(content, urls, onPressUrl)}
+                <ExpandableMessageText
+                  messageId={messageId}
+                  surface={surface}
+                  text={content}
+                  typo="TextMdNormal"
+                >
+                  {renderTextWithLinks(content, urls, onPressUrl)}
+                </ExpandableMessageText>
               </KContainer.View>
             )}
 

package/src/components/messages/quotedMessage/index.tsx

@@ -22,6 +22,7 @@ import {
 import { getFileIcon, getMimeType } from '../../../utils/imageUtils';
 import { extractUrls } from '../../../utils/url';
 import { renderLinkifiedText } from '../LinkifiedText';
+import { ExpandableMessageText } from '../ExpandableMessageText';
 import { useUserStore } from '../../../store';
 import { useChatDetailContext } from '../../../context';
 import { ChatEvent } from '../../../types/events';
@@ -33,6 +34,9 @@ interface QuotedMessageProps extends BaseLegendMessageProps {
 const QuotedMessage = memo((props: QuotedMessageProps) => {
   const {
     message,
+    messageId,
+    surface,
+    isPreview,
     isOutgoing,
     createdAtTime,
     isHighlighted,
@@ -104,6 +108,8 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
           <KContainer.Touchable
             style={styles.quotedContainer}
             onPress={handlePressQuotedMessage}
+            // Would scroll the timeline hidden behind the overlay.
+            disabled={isPreview}
           >
             <KContainer.View style={styles.dot} />
             <KContainer.VisibleView visible={!!imageUrl}>
@@ -152,9 +158,15 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
               </KLabel.Text>
             </KContainer.View>
           </KContainer.Touchable>
-          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+          <ExpandableMessageText
+            messageId={messageId}
+            surface={surface}
+            text={replyText}
+            typo="TextMdNormal"
+            color={CHAT_BUBBLE_COLORS.text}
+          >
             {renderLinkifiedText(replyText, urls, onPressUrl, 'reply')}
-          </KLabel.Text>
+          </ExpandableMessageText>
         </KContainer.View>
       </BubbleTailRow>
 

package/src/components/messages/textMessage/index.tsx

@@ -15,6 +15,7 @@ import { QuotedMessagePreviewStrip } from '../quotedMessage/QuotedMessagePreview
 import { LinkPreviewCard } from '../linkMessage/LinkPreviewCard';
 import { extractUrls } from '../../../utils/url';
 import { renderLinkifiedText } from '../LinkifiedText';
+import { ExpandableMessageText } from '../ExpandableMessageText';
 
 const parseMessageEx = (ex?: string): IMessageItemEx | undefined => {
   if (!ex) return undefined;
@@ -28,6 +29,8 @@ const parseMessageEx = (ex?: string): IMessageItemEx | undefined => {
 export const TextMessage = memo(
   ({
     message,
+    messageId,
+    surface,
     isOutgoing,
     createdAtTime,
     isHighlighted,
@@ -121,7 +124,13 @@ export const TextMessage = memo(
             {quotedMessage && (
               <QuotedMessagePreviewStrip quotedMessage={quotedMessage} />
             )}
-            <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+            <ExpandableMessageText
+              messageId={messageId}
+              surface={surface}
+              text={messageText}
+              typo="TextMdNormal"
+              color={CHAT_BUBBLE_COLORS.text}
+            >
               {segments
                 ? segments.map((segment, index) =>
                     segment.type === 'mention' ? (
@@ -133,7 +142,7 @@ export const TextMessage = memo(
                     )
                   )
                 : messageText}
-            </KLabel.Text>
+            </ExpandableMessageText>
             {!!urlMetadata && (
               <LinkPreviewCard metadata={urlMetadata} onPressUrl={onPressUrl} />
             )}

package/src/components/messages/types.ts

@@ -1,9 +1,27 @@
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import type { GroupPosition } from '../../utils/legendListMessage';
+import type { MessageSurface } from '../../store/expandedMessage';
 
 export interface BaseLegendMessageProps {
   message: MessageItem;
+  /**
+   * Resolved once by the caller and threaded down — never re-derived here.
+   * The timeline, the pin sheet and the toolbox overlay each compute a
+   * message's id differently, and a mismatch silently splits its expansion
+   * state across surfaces.
+   */
+  messageId: string;
+  /** Expansion is scoped per surface (BR-003): the same message collapsed in
+   * Pin Management while expanded in the timeline, and vice versa. */
+  surface: MessageSurface;
+  /**
+   * Rendered as the toolbox overlay's clone. The clone is touchable so that
+   * `Xem thêm` works there (D1), which makes every other press target in the
+   * bubble live too — components with a self-contained handler must disable
+   * it when this is set.
+   */
+  isPreview?: boolean;
   isOutgoing: boolean;
   createdAtTime: number;
   isHighlighted?: boolean;

package/src/hooks/useExpandableText.ts

@@ -0,0 +1,139 @@
+import { useCallback, useState } from 'react';
+import { useWindowDimensions, type TextLayoutEvent } from 'react-native';
+import { useExpandedMessageStore } from '../store/expandedMessage';
+import {
+  COLLAPSED_LINES,
+  expandedKey,
+  isMeasurementCandidate,
+  type MessageSurface,
+} from '../utils/expandableText';
+import { initialCut, joinLines, shrinkCut } from '../utils/inlineTruncation';
+
+export { COLLAPSED_LINES };
+
+type Verdict = { truncated: false } | { truncated: true; cut: number };
+
+// Each pass is one extra layout; in practice the suffix fits by the second.
+// Past this the suffix may sit on a sixth line — still visible and tappable.
+const MAX_FIT_PASSES = 4;
+
+/**
+ * Truncation is a pure function of (text, available width, typography), so it
+ * belongs to the message — not to the list row that happens to render it.
+ * `recycleItems` reuses row instances, so a verdict held in component state
+ * bleeds onto the next message in that slot. Keyed here, a recycled row reads
+ * the right answer during render and pays no measurement for a message seen.
+ */
+const verdictCache = new Map<string, Verdict>();
+
+export const clearExpandableTextCache = () => verdictCache.clear();
+
+// Window width, not the bubble's: the bubble shrinks to its content, and the
+// content changes when the suffix is appended, so keying on it would re-measure
+// in a loop. Surface is in the key because the pin sheet is a different width.
+// Text length makes a body that mutates in place (TextMessage re-derives its
+// runs when `ex` arrives) miss the cache rather than reuse a stale cut.
+const verdictKey = (
+  surface: MessageSurface,
+  messageId: string,
+  windowWidth: number,
+  text: string
+) => `${surface}:${messageId}:${Math.round(windowWidth)}:${text.length}`;
+
+interface Fit {
+  key: string | null;
+  full?: string;
+  cut?: number;
+  passes: number;
+  verdict?: Verdict;
+}
+
+export type ExpandableTextMode =
+  | 'plain'
+  | 'measuring'
+  | 'fitting'
+  | 'collapsed';
+
+export function useExpandableText(
+  messageId: string,
+  text: string,
+  surface: MessageSurface
+) {
+  const expanded = useExpandedMessageStore(
+    (s) => !!s.expanded[expandedKey(surface, messageId)]
+  );
+  const expandInStore = useExpandedMessageStore((s) => s.expand);
+  const { width: windowWidth } = useWindowDimensions();
+
+  const key = messageId
+    ? verdictKey(surface, messageId, windowWidth, text)
+    : null;
+
+  // Reset during render rather than in an effect: an effect lands after paint,
+  // so a recycled row would show one frame with the previous message's cut.
+  const [fit, setFit] = useState<Fit>({ key, passes: 0 });
+  const current = fit.key === key ? fit : { key, passes: 0 };
+  if (fit.key !== key) setFit(current);
+
+  // Without an id there is nowhere to record an expansion, so the control
+  // would do nothing. Never collapse those.
+  const isCandidate = !!messageId && !expanded && isMeasurementCandidate(text);
+  const verdict = (key && verdictCache.get(key)) || current.verdict;
+
+  let mode: ExpandableTextMode = 'plain';
+  if (isCandidate) {
+    if (verdict) mode = verdict.truncated ? 'collapsed' : 'plain';
+    else mode = current.cut == null ? 'measuring' : 'fitting';
+  }
+  const cut = verdict?.truncated ? verdict.cut : (current.cut ?? 0);
+
+  const settle = useCallback(
+    (next: Verdict) => {
+      if (key) verdictCache.set(key, next);
+      setFit((prev) => (prev.key === key ? { ...prev, verdict: next } : prev));
+    },
+    [key]
+  );
+
+  // Full, unclamped copy: how many lines, and where line N ends.
+  const onMeasureTextLayout = useCallback(
+    ({ nativeEvent: { lines } }: TextLayoutEvent) => {
+      if (lines.length <= COLLAPSED_LINES) {
+        settle({ truncated: false });
+        return;
+      }
+      const full = joinLines(lines);
+      const first = initialCut(lines, COLLAPSED_LINES);
+      setFit((prev) =>
+        prev.key === key ? { ...prev, full, cut: first, passes: 0 } : prev
+      );
+    },
+    [key, settle]
+  );
+
+  // The visible copy with the suffix appended: accept once it fits in N lines.
+  const onFitTextLayout = useCallback(
+    ({ nativeEvent: { lines } }: TextLayoutEvent) => {
+      if (fit.key !== key || fit.full == null || fit.cut == null) return;
+      if (lines.length <= COLLAPSED_LINES || fit.passes >= MAX_FIT_PASSES) {
+        settle({ truncated: true, cut: fit.cut });
+        return;
+      }
+      const next = shrinkCut(fit.full, fit.cut, lines, COLLAPSED_LINES);
+      setFit({ ...fit, cut: next, passes: fit.passes + 1 });
+    },
+    [fit, key, settle]
+  );
+
+  const expand = useCallback(() => {
+    expandInStore(surface, messageId);
+  }, [expandInStore, surface, messageId]);
+
+  return {
+    mode,
+    cut,
+    expand,
+    onMeasureTextLayout,
+    onFitTextLayout,
+  };
+}

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

@@ -18,6 +18,8 @@ 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';
@@ -81,6 +83,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;
 

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/legend/LegendChatMessage.tsx

@@ -28,6 +28,7 @@ import QuotedMessage from '../../../components/messages/quotedMessage';
 import { StickerMessage } from '../../../components/messages/stickerMessage';
 import { GROUP_NOTIFICATION_TYPES } from '../../../utils/messageUtils';
 import type { GroupPosition } from '../../../utils/legendListMessage';
+import type { MessageSurface } from '../../../store/expandedMessage';
 import { Avatar } from '../../../components/Avatar';
 import { TAIL_WIDTH } from '../../../components/messages/BubbleTail';
 
@@ -72,6 +73,15 @@ interface LegendChatMessageProps {
   showSenderGutter?: boolean;
   /** Position within its same-sender cluster — drives the bubble tail. */
   groupPosition?: GroupPosition;
+  /**
+   * Which surface is rendering this message. Expansion state is scoped by it
+   * (BR-003), so Pin Management must pass `'pin'` explicitly — the default
+   * keeps the timeline and the toolbox overlay sharing one scope, which is
+   * what makes the overlay clone mirror the row it lifted from.
+   */
+  surface?: MessageSurface;
+  /** Toolbox overlay clone — see `BaseLegendMessageProps.isPreview`. */
+  isPreview?: boolean;
 }
 
 const messageComponentMap: Partial<
@@ -129,6 +139,8 @@ export const LegendChatMessage = memo(
     showAvatar = false,
     showSenderGutter = false,
     groupPosition,
+    surface = 'timeline',
+    isPreview,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
       onPress?.(messageId);
@@ -151,6 +163,8 @@ export const LegendChatMessage = memo(
         <KContainer.View center style={styles.systemMessageWrapper}>
           <SystemMessageComponent
             message={message}
+            messageId={messageId}
+            surface={surface}
             isOutgoing={isOutgoing}
             createdAtTime={createdAtTime}
           />
@@ -210,12 +224,18 @@ export const LegendChatMessage = memo(
               {message.senderNickname}
             </KLabel.Text>
           )}
+          {/* No gestures on the overlay clone: a Tap here would race
+              `Xem thêm` for the same touch, and the overlay has its own
+              tap-to-dismiss around the clone. */}
           <LongPressWrapper
-            onPress={shouldHandlePress ? handlePress : undefined}
-            onLongPress={handleLongPress}
+            onPress={shouldHandlePress && !isPreview ? handlePress : undefined}
+            onLongPress={isPreview ? undefined : handleLongPress}
           >
             <MessageComponent
               message={message}
+              messageId={messageId}
+              surface={surface}
+              isPreview={isPreview}
               isOutgoing={isOutgoing}
               createdAtTime={createdAtTime}
               onMediaPress={hasMediaPress ? effectiveOnMediaPress : undefined}

package/src/screens/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -29,6 +29,7 @@ import { useSendMessage } from '../../../hooks/message/useSendMessage';
 import { useChatContext, useChatDetailContext } from '../../../context';
 import {
   GroupPermission,
+  MessageType,
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useHasGroupPermission } from '../../../hooks/useGroupPermission';
@@ -44,6 +45,13 @@ import type { GroupPosition } from '../../../utils/legendListMessage';
 // scrollTo. See `show`/`hide` below for the observed sequence.
 const UNFREEZE_DELAY_MS = 300;
 
+const EXPANDABLE_TYPES: number[] = [
+  MessageType.TextMessage,
+  MessageType.AtTextMessage,
+  MessageType.UrlTextMessage,
+  MessageType.QuoteMessage,
+];
+
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
@@ -209,11 +217,19 @@ export const MessageToolboxOverlay = forwardRef<
       hide();
     }, [message, hide, setQuotedMessage]);
 
+    const overlayMessageId = message?.clientMsgID || message?.serverMsgID || '';
+
     if (!visible || !message || !rect) {
       return null;
     }
 
     const isOutgoing = message.sendID === currentUserId;
+    // Only the types that can show `Xem thêm` get a touchable clone. File
+    // download and consumer custom nodes carry their own handlers and stay
+    // inert.
+    const isCloneInteractive =
+      EXPANDABLE_TYPES.includes(message.contentType) &&
+      !customMessageItemFactory?.(message);
     const showSenderGutter = isGroupConversation && !isOutgoing;
     const showName =
       showSenderGutter &&
@@ -235,10 +251,13 @@ export const MessageToolboxOverlay = forwardRef<
         <MessageToolboxWrapper
           rect={rect}
           isOutgoing={isOutgoing}
+          isCloneInteractive={isCloneInteractive}
+          onDismiss={hide}
           message={
             <LegendChatMessage
               message={message}
-              messageId={message.clientMsgID || message.serverMsgID || ''}
+              messageId={overlayMessageId}
+              isPreview
               isOutgoing={isOutgoing}
               createdAtTime={message.sendTime || message.createTime}
               customMessageItemFactory={customMessageItemFactory}