@droppii-org/chat-mobile 0.2.105 → 0.2.107

package/lib/typescript/src/utils/message.d.ts

@@ -27,6 +27,14 @@ export declare const resolveHistoryLastMinSeq: (history: {
 }, fallbackMessage?: MessageItem) => number;
 export declare const getHistoryPaginationAnchor: (messages: MessageItem[]) => HistoryPaginationAnchor | null;
 export declare const hasNewHistoryMessages: (current: MessageItem[], incoming: MessageItem[]) => boolean;
+/**
+ * Conversation ids a message could be filed under.
+ *
+ * A 1:1 id is built from both participants and their order is not recoverable
+ * from the message alone, so both spellings come back — `belongsToConversation`
+ * compares against both for exactly the same reason.
+ */
+export declare const conversationIdsOfMessage: (message: MessageItem) => string[];
 export declare const belongsToConversation: (message: MessageItem, conversationId?: string, targetUserId?: string) => boolean;
 export declare const getReceiverId: (conversation?: ConversationItem) => {
     groupID: string;

package/lib/typescript/src/utils/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/utils/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAMvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,WACN,CAAC;AAK9C;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,EAAE,OAAO,MAAM,WACA,CAAC;AAEvE,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,WAAW,EAab,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,GAAG,MAAM,KAC5B,WAYF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,SAAS;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,kBAAkB,WAAW,KAC5B,MAMF,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,EAAE,KACtB,uBAAuB,GAAG,IAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,OASF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EACpB,iBAAiB,MAAM,EACvB,eAAe,MAAM,KACpB,OA2BF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe,gBAAgB;;;CAW5D,CAAC"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/utils/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAMvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,WACN,CAAC;AAK9C;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,EAAE,OAAO,MAAM,WACA,CAAC;AAEvE,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,WAAW,EAab,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,GAAG,MAAM,KAC5B,WAYF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,SAAS;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,kBAAkB,WAAW,KAC5B,MAMF,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,EAAE,KACtB,uBAAuB,GAAG,IAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,OASF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GAAI,SAAS,WAAW,KAAG,MAAM,EAM/D,CAAC;AAER,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EACpB,iBAAiB,MAAM,EACvB,eAAe,MAAM,KACpB,OA2BF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe,gBAAgB;;;CAW5D,CAAC"}

package/lib/typescript/src/utils/truncateTextChildren.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+export declare const truncateTextChildren: (node: ReactNode, limit: number) => ReactNode;
+//# sourceMappingURL=truncateTextChildren.d.ts.map

package/lib/typescript/src/utils/truncateTextChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncateTextChildren.d.ts","sourceRoot":"","sources":["../../../../src/utils/truncateTextChildren.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA4CrE,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,EAAE,OAAO,MAAM,cAC7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.105",
+  "version": "0.2.107",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",

package/src/components/TypingDots/TypingDots.tsx

@@ -0,0 +1,172 @@
+import { memo, useEffect } from 'react';
+import Animated, {
+  Easing,
+  useAnimatedProps,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { G, Rect, type SvgProps } from 'react-native-svg';
+
+/**
+ * The three bouncing dots from `assets/images/typing_indicator.svg`.
+ *
+ * SVGR cannot carry this one over: the motion lives in a `<style>` block of
+ * `@keyframes`, which it drops ("elements not supported by react-native-svg"),
+ * leaving `style={{ animation: ... }}` props pointing at rules that no longer
+ * exist. react-native-svg has no CSS animation engine either, so the keyframes
+ * are re-expressed here as reanimated timelines instead.
+ */
+
+const VIEW_WIDTH = 48;
+const VIEW_HEIGHT = 20;
+const DOT_SIZE = 8;
+/** x of each dot in the source — `translate(6 6)`, `(20 6)`, `(34 6)`. */
+const DOT_X = [6, 20, 34];
+const DOT_Y = 6;
+/** The `translateY(-6px)` keyframe. */
+const LIFT = 6;
+
+const CYCLE_MS = 3150;
+/** 7.14% of the cycle — the gap between one dot bouncing and the next. */
+const BOUNCE_MS = CYCLE_MS / 14;
+/** 14.29% of the cycle — one step of the opacity wave. */
+const FADE_STEP_MS = CYCLE_MS / 7;
+const FADE_STEPS = 7;
+
+const HOLD_SHORT_MS = 900; // 14.29% → 42.86%
+const HOLD_LONG_MS = 1350; // 57.14% → 100%
+
+/** The three alpha levels the wave cycles through. */
+const ALPHAS = [0.2, 0.35, 0.5];
+
+/** The source's own colour, used when the caller does not pass one. */
+const DEFAULT_FILL = '#1A1D22';
+
+const RISE = {
+  duration: BOUNCE_MS,
+  easing: Easing.out(Easing.ease),
+} as const;
+
+/**
+ * The fall, not the rise, carries the character here: the source's `linear()`
+ * curve peaks at 1.364, so a dot dips 36.4% past its resting line before
+ * settling. A spring's first overshoot is exp(-piZ / sqrt(1 - Z^2)), which
+ * lands on 36.4% at a damping ratio of ~0.306 — 0.5 would reach only 16%,
+ * visibly flatter than drawn.
+ *
+ * `duration` matters as much as the ratio: a default spring settles whenever it
+ * settles, which would break the fixed-length cycle the two tracks share.
+ */
+const FALL = { duration: BOUNCE_MS, dampingRatio: 0.306 } as const;
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+export interface TypingDotsProps extends Omit<SvgProps, 'fill'> {
+  /**
+   * Dot colour. Overrides the `fill` SvgProps would otherwise carry, because
+   * that one lands on the root <Svg> where the dots' own group already shadows
+   * it — passing it there does nothing.
+   *
+   * Only the colour: the source animates `fill: rgba(26, 29, 34, a)` but never
+   * changes the RGB, so the alpha half is driven separately as `fillOpacity`.
+   */
+  fill?: string;
+}
+
+const Dot = memo(({ index }: { index: number }) => {
+  const reducedMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const alpha = useSharedValue(ALPHAS[index % ALPHAS.length]!);
+
+  useEffect(() => {
+    if (reducedMotion) return;
+
+    // Two bounces per cycle. A dot's turn comes one BOUNCE_MS after the one
+    // before it, and that delay applies only to the first pass — every
+    // iteration runs exactly CYCLE_MS, so the offset holds instead of drifting.
+    lift.value = withDelay(
+      index * BOUNCE_MS,
+      withRepeat(
+        withSequence(
+          withTiming(-LIFT, RISE),
+          withSpring(0, FALL),
+          withTiming(0, { duration: HOLD_SHORT_MS }),
+          withTiming(-LIFT, RISE),
+          withSpring(0, FALL),
+          withTiming(0, { duration: HOLD_LONG_MS })
+        ),
+        -1
+      )
+    );
+
+    // The opacity wave needs no delay: each dot enters the cycle at a different
+    // alpha instead, which is how the source staggers it.
+    alpha.value = withRepeat(
+      withSequence(
+        ...Array.from({ length: FADE_STEPS }, (_, step) =>
+          withTiming(ALPHAS[(index + step + 1) % ALPHAS.length]!, {
+            duration: FADE_STEP_MS,
+            easing: Easing.inOut(Easing.ease),
+          })
+        )
+      ),
+      -1
+    );
+  }, [index, lift, alpha, reducedMotion]);
+
+  // Driven as SVG attributes rather than a style transform: react-native-svg
+  // maps these straight onto the native node, keeping the work off the JS
+  // thread. `y` also replaces the source's stacked translateY pair.
+  const animatedProps = useAnimatedProps(() => ({
+    y: DOT_Y + lift.value,
+    fillOpacity: alpha.value,
+  }));
+
+  return (
+    <AnimatedRect
+      x={DOT_X[index]}
+      width={DOT_SIZE}
+      height={DOT_SIZE}
+      // The file says rx="50"; SVG clamps that to half the width. Stating the
+      // clamped value keeps the circle from depending on that behaviour.
+      rx={DOT_SIZE / 2}
+      animatedProps={animatedProps}
+    />
+  );
+});
+
+Dot.displayName = 'TypingDots.Dot';
+
+export const TypingDots = memo(
+  ({
+    fill = DEFAULT_FILL,
+    width = VIEW_WIDTH,
+    height = VIEW_HEIGHT,
+    ...props
+  }: TypingDotsProps) => (
+    // No `overflow="visible"` despite the source setting it: a dot runs from
+    // y=0 at the top of its bounce to y=16.23 at the bottom of the overshoot,
+    // so nothing leaves the 48x20 box. Leaning on overflow would be the fragile
+    // choice — react-native-svg does not honour it consistently on Android.
+    <Svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}
+      fill="none"
+      {...props}
+    >
+      <G fill={fill}>
+        {DOT_X.map((_, index) => (
+          <Dot key={index} index={index} />
+        ))}
+      </G>
+    </Svg>
+  )
+);
+
+TypingDots.displayName = 'TypingDots';

package/src/components/TypingDots/index.ts

@@ -0,0 +1,2 @@
+export { TypingDots } from './TypingDots';
+export type { TypingDotsProps } from './TypingDots';

package/src/components/messages/ExpandableMessageText.tsx

@@ -0,0 +1,145 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { KColors, KContainer, KLabel } from '@droppii/libs';
+import { trans } from '../../translation';
+import {
+  COLLAPSED_LINES,
+  useExpandableText,
+} from '../../hooks/useExpandableText';
+import { truncateTextChildren } from '../../utils/truncateTextChildren';
+import { PreviewScrollableText } from './PreviewScrollableText';
+import type { MessageSurface } from '../../store/expandedMessage';
+
+type TypoType = ComponentProps<typeof KLabel.Text>['typo'];
+
+// Values from `@droppii/libs`' Typography.tsx (`generateTextStyle`'s third
+// argument), not looked up at runtime — the package does not cleanly
+// re-export a way to do that. All three call sites use `TextMdNormal` today;
+// add an entry here before passing any other `typo` to this component.
+const TYPO_LINE_HEIGHT: Record<string, number> = {
+  TextMdNormal: 25.6,
+};
+const DEFAULT_LINE_HEIGHT = 22.4;
+
+// Figma (Live Chat, node 15389-207764): `…và... Xem thêm` — the ellipsis in
+// the body colour, the control inline on the last visible line.
+const ELLIPSIS = '... ';
+
+interface ExpandableMessageTextProps {
+  messageId: string;
+  surface: MessageSurface;
+  /** Raw body text — drives the length/newline pre-check only. */
+  text: string;
+  /**
+   * The already-rendered body. Taken as children rather than re-derived from
+   * `text` because the three call sites build structurally different bodies
+   * (plain run, mention segments, linkified runs) and re-tokenising them here
+   * would duplicate three parsers.
+   */
+  children: ReactNode;
+  typo?: TypoType;
+  color?: string;
+}
+
+export const ExpandableMessageText = ({
+  messageId,
+  surface,
+  text,
+  children,
+  typo = 'TextMdNormal',
+  color,
+}: ExpandableMessageTextProps) => {
+  const { mode, cut, expand, onMeasureTextLayout, onFitTextLayout } =
+    useExpandableText(messageId, text, surface);
+
+  if (mode === 'plain') {
+    // Only the overlay provides a budget; everywhere else this is a no-op.
+    return (
+      <PreviewScrollableText>
+        <KLabel.Text typo={typo} color={color}>
+          {children}
+        </KLabel.Text>
+      </PreviewScrollableText>
+    );
+  }
+
+  const label = trans('chat:info_view_more') || 'Xem thêm';
+
+  if (mode === 'measuring') {
+    // One layout pass. The visible copy is clipped to N lines by height so the
+    // bubble does not flash at full length; the hidden copy is unconstrained,
+    // which is what makes its `onTextLayout` report every line on iOS too.
+    const lineHeight =
+      TYPO_LINE_HEIGHT[typo ?? 'TextMdNormal'] ?? DEFAULT_LINE_HEIGHT;
+    return (
+      <KContainer.View>
+        <View
+          style={[
+            styles.clampedBox,
+            { maxHeight: lineHeight * COLLAPSED_LINES },
+          ]}
+        >
+          <KLabel.Text typo={typo} color={color}>
+            {children}
+          </KLabel.Text>
+        </View>
+        <View
+          style={styles.measuringCopy}
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          <KLabel.Text
+            typo={typo}
+            color={color}
+            onTextLayout={onMeasureTextLayout}
+          >
+            {children}
+          </KLabel.Text>
+        </View>
+      </KContainer.View>
+    );
+  }
+
+  // 'fitting' re-checks that the suffix still fits in N lines; 'collapsed'
+  // renders a cut that already passed that check.
+  return (
+    <KLabel.Text
+      typo={typo}
+      color={color}
+      onTextLayout={mode === 'fitting' ? onFitTextLayout : undefined}
+    >
+      {truncateTextChildren(children, cut)}
+      {ELLIPSIS}
+      <KLabel.Text
+        typo="TextMdMedium"
+        color={KColors.primary.normal}
+        onPress={expand}
+        accessibilityRole="button"
+        accessibilityLabel={label}
+      >
+        {label}
+      </KLabel.Text>
+    </KLabel.Text>
+  );
+};
+
+ExpandableMessageText.displayName = 'ExpandableMessageText';
+
+const styles = StyleSheet.create({
+  clampedBox: {
+    overflow: 'hidden',
+  },
+  // `left`+`right` take the container's width in the same layout pass, so the
+  // copy wraps exactly like the visible one without a round trip through
+  // `onLayout`. No `bottom`: pinning it (i.e. absoluteFill) would make this
+  // inherit the clamped parent's height, and iOS would lay out only the lines
+  // that fit — reporting a clamped message as short.
+  measuringCopy: {
+    opacity: 0,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+  },
+});

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;