@droppii-org/chat-mobile 0.2.106 → 0.2.108

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,8 +22,10 @@ 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 { useTimelinePressGuard } from '../../../context/TimelinePressGuardContext';
 import { ChatEvent } from '../../../types/events';
 
 interface QuotedMessageProps extends BaseLegendMessageProps {
@@ -33,6 +35,9 @@ interface QuotedMessageProps extends BaseLegendMessageProps {
 const QuotedMessage = memo((props: QuotedMessageProps) => {
   const {
     message,
+    messageId,
+    surface,
+    isPreview,
     isOutgoing,
     createdAtTime,
     isHighlighted,
@@ -81,11 +86,14 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
     return getFileIcon(mimeType);
   }, [quotedMessage]);
 
+  // Skipped for the tap that dismisses a composer panel (timeline only).
+  const shouldSwallowPress = useTimelinePressGuard();
   const handlePressQuotedMessage = useCallback(() => {
+    if (shouldSwallowPress()) return;
     DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
       clientMessageId: quotedMessage?.clientMsgID || '',
     });
-  }, [quotedMessage]);
+  }, [quotedMessage, shouldSwallowPress]);
 
   return (
     <>
@@ -104,6 +112,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 +162,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/context/TimelinePressGuardContext.tsx

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+const neverSwallow = () => false;
+
+/**
+ * Timeline-only press guard. ChatListLegend provides the tap-outside panel
+ * dismiss's `shouldSwallowPress` (useComposerPanelDismiss); every other
+ * surface (Pin Management, toolbox overlay) gets the no-op default.
+ */
+const TimelinePressGuardContext = createContext<() => boolean>(neverSwallow);
+
+export const TimelinePressGuardProvider = TimelinePressGuardContext.Provider;
+
+export const useTimelinePressGuard = () =>
+  useContext(TimelinePressGuardContext);

package/src/hooks/useConversationList.ts

@@ -4,6 +4,7 @@ import OpenIMSDK from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
 import type { DChatApplicationType } from '../types/chat';
+import { perfMark } from '../utils/perf-marker';
 
 type Params = {
   applicationType: DChatApplicationType;
@@ -33,6 +34,7 @@ export function useConversationList({
       });
 
       useConversationStore.getState().updateConversations(conversations);
+      perfMark('conversation_list_loaded', { count: conversations.length });
       return conversations;
     },
   });

package/src/hooks/useDismissKeyboardFirst.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { Keyboard } from 'react-native';
+
+/**
+ * Wraps a press that leaves the timeline (media viewer, link, file viewer) so
+ * the keyboard is dismissed first. The timeline uses
+ * `keyboardShouldPersistTaps="handled"`, so the keyboard would otherwise stay
+ * up over the screen the press opens. An absent handler stays absent.
+ */
+export const useDismissKeyboardFirst = <A extends unknown[]>(
+  handler: ((...args: A) => unknown) | undefined
+): ((...args: A) => void) | undefined =>
+  useMemo(() => {
+    if (!handler) return handler;
+    return (...args: A) => {
+      Keyboard.dismiss();
+      handler(...args);
+    };
+  }, [handler]);

package/src/hooks/useExpandableText.ts

@@ -0,0 +1,143 @@
+import { useCallback, useState } from 'react';
+import { useWindowDimensions, type TextLayoutEvent } from 'react-native';
+import { useExpandedMessageStore } from '../store/expandedMessage';
+import { useTimelinePressGuard } from '../context/TimelinePressGuardContext';
+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]
+  );
+
+  // Skipped for the tap that dismisses a composer panel (timeline only).
+  const shouldSwallowPress = useTimelinePressGuard();
+  const expand = useCallback(() => {
+    if (shouldSwallowPress()) return;
+    expandInStore(surface, messageId);
+  }, [expandInStore, surface, messageId, shouldSwallowPress]);
+
+  return {
+    mode,
+    cut,
+    expand,
+    onMeasureTextLayout,
+    onFitTextLayout,
+  };
+}

package/src/hooks/useGuardedPress.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+/**
+ * Wraps a timeline press handler so it is skipped while `shouldSwallow()` is
+ * true — the tap-outside panel dismiss (useComposerPanelDismiss) swallows the
+ * press of a touch that began with a composer panel open. An absent handler
+ * stays absent, so "not tappable" rows keep behaving as before. The wrapper's
+ * return value is dropped: press handlers are fire-and-forget.
+ */
+export const useGuardedPress = <A extends unknown[]>(
+  handler: ((...args: A) => unknown) | undefined,
+  shouldSwallow: (() => boolean) | undefined
+): ((...args: A) => void) | undefined =>
+  useMemo(() => {
+    if (!handler || !shouldSwallow) return handler;
+    return (...args: A) => {
+      if (shouldSwallow()) return;
+      handler(...args);
+    };
+  }, [handler, shouldSwallow]);