@droppii-org/chat-mobile 0.2.106 → 0.2.107

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

@@ -1,6 +1,9 @@
-import { useCallback, memo } from 'react';
+import { useCallback, memo, useState } from 'react';
 import {
   View,
+  ScrollView,
+  Pressable,
+  StyleSheet,
   Platform,
   useWindowDimensions,
   type LayoutChangeEvent,
@@ -15,13 +18,31 @@ import type { MeasuredRect } from './types';
 import { messageStyles } from '../legend/messageTypes';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ClonePreviewBudgetContext } from '../../../components/messages/PreviewScrollableText';
+import { useClonePreview } from './useClonePreview';
 
 const MENU_GAP = 8;
+// A clone is never squeezed below this, even if the toolbox is unusually tall —
+// better to overflow slightly than to render a sliver of a message.
+const MIN_CLONE_HEIGHT = 120;
 
 type MessageToolboxWrapperProps = {
   isOutgoing?: boolean;
   rect: MeasuredRect;
   message?: React.ReactNode;
+  /**
+   * Lets touches reach the clone's own press targets — needed for `Xem thêm`
+   * (D1). Off by default: types like FileMessage and consumer custom nodes
+   * have self-contained handlers that must stay inert here.
+   */
+  isCloneInteractive?: boolean;
+  /**
+   * Tapping the bubble used to fall through to the backdrop and dismiss. The
+   * ScrollView below is hit-testable and swallows that, so the gesture is
+   * reinstated explicitly. A touch that a press target inside the clone
+   * claims (`Xem thêm`) never reaches it.
+   */
+  onDismiss?: () => void;
   reaction?: React.ReactNode;
   toolbox?: React.ReactNode;
 };
@@ -31,6 +52,8 @@ export const MessageToolboxWrapper = memo(
     isOutgoing,
     rect,
     message,
+    isCloneInteractive,
+    onDismiss,
     reaction,
     toolbox,
   }: MessageToolboxWrapperProps) => {
@@ -41,6 +64,14 @@ export const MessageToolboxWrapper = memo(
     const topOffset = Platform.OS === 'android' ? insets.top : 0;
     const { height: windowHeight } = useWindowDimensions();
 
+    // Mirrors `toolboxHeight` on the JS side. Deriving the clone's maxHeight
+    // from the shared value instead would close a loop — maxHeight feeds the
+    // clone's height, which feeds `messageHeight`, which feeds `translateY`.
+    // The toolbox's own height does not depend on the clone, so reading it
+    // here settles in one pass. Not ratcheted: the menu's item set varies with
+    // permissions, and a high-water mark could never shrink back.
+    const [chromeHeight, setChromeHeight] = useState(0);
+
     const onMessageCloneLayout = useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         messageHeight.value = nativeEvent.layout.height;
@@ -51,6 +82,7 @@ export const MessageToolboxWrapper = memo(
     const onToolboxLayout = useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         toolboxHeight.value = nativeEvent.layout.height;
+        setChromeHeight(nativeEvent.layout.height);
       },
       [toolboxHeight]
     );
@@ -62,6 +94,21 @@ export const MessageToolboxWrapper = memo(
       [reactionHeight]
     );
 
+    // Same quantities `translateY` below subtracts, so the clone is never
+    // allowed to be taller than the space that shift can actually recover —
+    // `translateY` only moves up, so an over-tall clone pushes the toolbox off
+    // the bottom of the screen with no way back.
+    const maxCloneHeight = Math.max(
+      windowHeight -
+        insets.top -
+        topOffset -
+        (insets.bottom || 32) -
+        chromeHeight -
+        3 * MENU_GAP,
+      MIN_CLONE_HEIGHT
+    );
+    const preview = useClonePreview(maxCloneHeight);
+
     const translateY = useDerivedValue(() => {
       const menuGap =
         (reactionHeight.value > 0 ? MENU_GAP : 0) +
@@ -85,6 +132,10 @@ export const MessageToolboxWrapper = memo(
       width: rect.width,
       gap: MENU_GAP,
       transform: [{ translateY: translateY.value }],
+      // Until the toolbox has measured, the clone's budget is over-large and
+      // `translateY` is computed against a toolbox height of 0, which produces
+      // a visible two-stage slide on every open. Lay out, then reveal.
+      opacity: chromeHeight > 0 ? 1 : 0,
     }));
 
     return (
@@ -97,13 +148,40 @@ export const MessageToolboxWrapper = memo(
           containerStyles,
         ]}
       >
-        <View
-          pointerEvents="none"
+        <ScrollView
+          style={[styles.clone, { maxHeight: maxCloneHeight }]}
           collapsable={false}
           onLayout={onMessageCloneLayout}
+          onContentSizeChange={preview.onContentSizeChange}
+          bounces={false}
+          showsVerticalScrollIndicator={false}
         >
-          {message}
-        </View>
+          <Pressable onPress={onDismiss} disabled={preview.dismissDisabled}>
+            <View
+              pointerEvents={isCloneInteractive ? 'box-none' : 'none'}
+              style={isOutgoing ? styles.rowEnd : styles.rowStart}
+            >
+              {/* While the Pressable above stands down (see useClonePreview),
+                  the empty space beside the bubble still has to dismiss. This
+                  layer sits BEHIND the message as a sibling, so it is not an
+                  ancestor of the text's ScrollView and cannot block it. Being
+                  absolute, it also leaves `message` the row's only flex child
+                  (the 80% width contract documented below). */}
+              {preview.dismissDisabled && (
+                <Pressable
+                  style={StyleSheet.absoluteFill}
+                  onPress={onDismiss}
+                />
+              )}
+              {/* Expanded text scrolls inside its own bubble within this
+                  budget, so this outer scroll only remains for content that
+                  cannot (a tall image), and the bubble keeps its corners. */}
+              <ClonePreviewBudgetContext.Provider value={preview.budget}>
+                {message}
+              </ClonePreviewBudgetContext.Provider>
+            </View>
+          </Pressable>
+        </ScrollView>
         <View collapsable={false} onLayout={onReactionLayout}>
           {reaction}
         </View>
@@ -116,3 +194,31 @@ export const MessageToolboxWrapper = memo(
 );
 
 MessageToolboxWrapper.displayName = 'MessageToolboxWrapper';
+
+const styles = StyleSheet.create({
+  // maxHeight belongs on the ScrollView itself — inside an auto-height parent a
+  // ScrollView collapses to zero.
+  //
+  // `rowStart`/`rowEnd` reproduce the contract `LegendChatMessage` gets from
+  // the real list row: its root (`maxWidth: '80%'`) must be the DIRECT child
+  // of a definite-width, non-stretching (`alignItems`) View. Any auto-width
+  // node in between (an extra View, a non-stretched Pressable) leaves the 80%
+  // with no definite basis, and Yoga collapses the bubble toward min-content —
+  // on device, "M2" wrapping to "M" / "2". The Pressable sits outside this
+  // View, stretched by the ScrollView's content container, so the chain from
+  // the clone's measured width down to the bubble stays definite throughout.
+  // Not `messageRowLeft/Right` directly: the outer Animated.View already
+  // applies their padding, which would double up here.
+  clone: {
+    flexGrow: 0,
+    width: '100%',
+  },
+  rowStart: {
+    width: '100%',
+    alignItems: 'flex-start',
+  },
+  rowEnd: {
+    width: '100%',
+    alignItems: 'flex-end',
+  },
+});

package/src/screens/chat-detail/messageToolbox/useClonePreview.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { ClonePreviewBudget } from '../../../components/messages/PreviewScrollableText';
+
+/**
+ * Wiring between the overlay's clone and the expanded text that scrolls
+ * inside it (see `PreviewScrollableText`).
+ *
+ * `dismissDisabled`: the clone sits in a tap-to-dismiss Pressable. On iOS a
+ * ScrollView refuses to scroll while an ANCESTOR holds the JS responder
+ * (`RCTScrollView _shouldDisableScrollInteraction`), so with the Pressable
+ * enabled a drag on the text never scrolls — it ends as a tap and closes the
+ * overlay. While the text is scrollable the Pressable stands down; the
+ * backdrop and the menu still dismiss.
+ */
+export const useClonePreview = (maxHeight: number) => {
+  const [contentHeight, setContentHeight] = useState(0);
+  const [textScrollable, setTextScrollable] = useState(false);
+
+  const onContentSizeChange = useCallback(
+    (_width: number, height: number) => setContentHeight(height),
+    []
+  );
+
+  const budget = useMemo<ClonePreviewBudget>(
+    () => ({
+      maxHeight,
+      contentHeight,
+      onScrollableChange: setTextScrollable,
+    }),
+    [maxHeight, contentHeight]
+  );
+
+  return { budget, onContentSizeChange, dismissDisabled: textScrollable };
+};

package/src/store/expandedMessage.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import {
+  expandedKey,
+  withoutSurface,
+  type MessageSurface,
+} from '../utils/expandableText';
+
+export type { MessageSurface };
+export { expandedKey };
+
+export interface ExpandedMessageStore {
+  /**
+   * Flat record rather than a Set so a row can subscribe with a cheap boolean
+   * selector — `useExpandedMessageStore(s => !!s.expanded[key])` — which stays
+   * referentially stable for every message the change didn't touch.
+   */
+  expanded: Record<string, true>;
+  expand: (surface: MessageSurface, messageId: string) => void;
+  clearSurface: (surface: MessageSurface) => void;
+}
+
+export const useExpandedMessageStore = create<ExpandedMessageStore>()(
+  (set, get) => ({
+    expanded: {},
+
+    expand: (surface, messageId) => {
+      // A message with no id would alias onto `${surface}:` and expand every
+      // other id-less message with it.
+      if (!messageId) return;
+
+      const key = expandedKey(surface, messageId);
+      if (get().expanded[key]) return;
+
+      set({ expanded: { ...get().expanded, [key]: true } });
+    },
+
+    clearSurface: (surface) => {
+      const next = withoutSurface(get().expanded, surface);
+      if (next !== get().expanded) set({ expanded: next });
+    },
+  })
+);

package/src/utils/expandableText.ts

@@ -0,0 +1,51 @@
+export type MessageSurface = 'timeline' | 'pin';
+
+export const COLLAPSED_LINES = 5;
+
+const MEASURE_THRESHOLD_CHARS = 100;
+
+export const expandedKey = (surface: MessageSurface, messageId: string) =>
+  `${surface}:${messageId}`;
+
+const countNewlines = (text: string) => {
+  let count = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text.charCodeAt(i) === 10) count += 1;
+  }
+  return count;
+};
+
+/**
+ * Character count alone is not an approximation of rendered lines — it is
+ * wrong for the shapes this chat carries most (pasted addresses, order lists),
+ * where an eight-line message can be under 70 characters. Newlines cost one
+ * character and a whole line, so both signals are needed. Message text is
+ * sender-controlled, so a length-only gate is also trivially defeated.
+ */
+export const isMeasurementCandidate = (text: string) =>
+  text.length >= MEASURE_THRESHOLD_CHARS ||
+  countNewlines(text) >= COLLAPSED_LINES;
+
+/**
+ * Returns a copy without the entries belonging to `surface`, or the original
+ * reference when nothing matched — callers use that identity to skip a
+ * pointless store update.
+ */
+export const withoutSurface = (
+  expanded: Record<string, true>,
+  surface: MessageSurface
+): Record<string, true> => {
+  const prefix = `${surface}:`;
+  const next: Record<string, true> = {};
+  let removed = false;
+
+  for (const key in expanded) {
+    if (key.startsWith(prefix)) {
+      removed = true;
+    } else {
+      next[key] = true;
+    }
+  }
+
+  return removed ? next : expanded;
+};

package/src/utils/inlineTruncation.ts

@@ -0,0 +1,65 @@
+/**
+ * Cut-point arithmetic for the inline `... Xem thêm` preview. Everything here
+ * works on the lines RN reports from `onTextLayout`, whose `text` includes the
+ * line's trailing break — so joining them reproduces the rendered string and a
+ * running length is a valid character offset into it.
+ */
+export interface RenderedLine {
+  text: string;
+}
+
+// How far back a shrink may look for a word boundary before accepting a
+// mid-word cut. One long unbroken token (a URL) must still be cuttable.
+const WORD_SNAP_WINDOW = 20;
+
+const isSpace = (char: string | undefined) => !!char && /\s/.test(char);
+
+const isHighSurrogate = (code: number) => code >= 0xd800 && code <= 0xdbff;
+
+export const joinLines = (lines: readonly RenderedLine[]) =>
+  lines.map((line) => line.text).join('');
+
+/**
+ * Backs `cut` off trailing whitespace — a kept `\n` would push the suffix onto
+ * a line of its own — and off half an emoji, which would render as a tofu box.
+ */
+export const settleCut = (full: string, cut: number) => {
+  let next = Math.max(0, Math.min(cut, full.length));
+  if (next > 0 && isHighSurrogate(full.charCodeAt(next - 1))) next -= 1;
+  while (next > 0 && isSpace(full[next - 1])) next -= 1;
+  return next;
+};
+
+/** First guess: everything on the first `maxLines` lines. */
+export const initialCut = (
+  lines: readonly RenderedLine[],
+  maxLines: number
+) => {
+  const full = joinLines(lines);
+  return settleCut(full, joinLines(lines.slice(0, maxLines)).length);
+};
+
+/**
+ * The suffix did not fit and wrapped past `maxLines`. Drop at least as many
+ * characters as spilled over — the spill includes the suffix itself, so this
+ * converges in one or two passes — then prefer ending on a word.
+ */
+export const shrinkCut = (
+  full: string,
+  cut: number,
+  fittedLines: readonly RenderedLine[],
+  maxLines: number
+) => {
+  const overflow = joinLines(fittedLines.slice(maxLines)).length;
+  let next = Math.max(0, cut - Math.max(overflow, 1));
+
+  const floor = Math.max(0, next - WORD_SNAP_WINDOW);
+  for (let i = next; i > floor; i -= 1) {
+    if (isSpace(full[i - 1])) {
+      next = i;
+      break;
+    }
+  }
+
+  return settleCut(full, next);
+};

package/src/utils/truncateTextChildren.ts

@@ -0,0 +1,46 @@
+import { cloneElement, isValidElement, type ReactNode } from 'react';
+
+type Taken = [node: ReactNode, used: number];
+
+/**
+ * Walks a `<Text>` children tree — plain strings, mention runs, linkified
+ * runs, nested `<Text>` — and keeps the first `budget` characters of rendered
+ * text, preserving every element's styling and press handler up to the cut.
+ * Character counts line up with `onTextLayout` because RN renders exactly the
+ * concatenation of the string leaves.
+ */
+const take = (node: ReactNode, budget: number): Taken => {
+  if (budget <= 0 || node == null || typeof node === 'boolean') {
+    return [null, 0];
+  }
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    const text = String(node);
+    return text.length <= budget
+      ? [node, text.length]
+      : [text.slice(0, budget), budget];
+  }
+
+  if (Array.isArray(node)) {
+    const kept: ReactNode[] = [];
+    let used = 0;
+    for (const child of node) {
+      if (used >= budget) break;
+      const [part, count] = take(child, budget - used);
+      kept.push(part);
+      used += count;
+    }
+    return [kept, used];
+  }
+
+  if (isValidElement<{ children?: ReactNode }>(node)) {
+    if (node.props.children === undefined) return [node, 0];
+    const [children, used] = take(node.props.children, budget);
+    return [cloneElement(node, undefined, children), used];
+  }
+
+  return [node, 0];
+};
+
+export const truncateTextChildren = (node: ReactNode, limit: number) =>
+  take(node, limit)[0];