@droppii-org/chat-mobile 0.2.88 → 0.2.90

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

@@ -1,8 +1,10 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { Modal, Pressable, StyleSheet } from 'react-native';
@@ -18,6 +20,7 @@ import {
 import type { MeasuredRect, MessageToolboxRef } from './types';
 import { MessageToolboxWrapper } from './MessageToolboxWrapper';
 import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 import { useSendMessage } from '../../../hooks/message/useSendMessage';
 import { useChatDetailContext } from '../../../context';
 import {
@@ -26,11 +29,25 @@ import {
 } from '@droppii/openim-rn-client-sdk';
 import { useHasGroupPermission } from '../../../hooks/useGroupPermission';
 
+// Android only: this Modal's native window is added/removed asynchronously
+// relative to its React state, and each of those transitions makes
+// react-native-keyboard-controller's resize listener misfire a spurious
+// zero-height "keyboard" event a short beat later — confirmed via adb logcat,
+// the close-triggered one lands ~30-70ms after `hide()` runs. `freeze` is
+// held past that window (not just released synchronously in `hide()`) so the
+// delayed spurious event is still suppressed instead of replaying a stale
+// scrollTo. See `show`/`hide` below for the observed sequence.
+const UNFREEZE_DELAY_MS = 300;
+
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
   onPinMessage?: (message: MessageItem) => void;
   onUnpinMessage?: (message: MessageItem) => void;
+  // Same SharedValue KeyboardAwareLegendList uses to suspend its own
+  // keyboard-driven scroll adjustments (see MessageToolboxOverlay's
+  // show/hide below for why this Modal needs it).
+  freeze?: SharedValue<boolean>;
 }
 
 export const MessageToolboxOverlay = forwardRef<
@@ -43,6 +60,7 @@ export const MessageToolboxOverlay = forwardRef<
       customMessageItemFactory,
       onPinMessage,
       onUnpinMessage,
+      freeze,
     },
     ref
   ) => {
@@ -56,12 +74,31 @@ export const MessageToolboxOverlay = forwardRef<
     );
     const { retryMessage, revokeMessage } = useSendMessage();
     const isPinAllowed = useHasGroupPermission(GroupPermission.PinMessage);
+    const unfreezeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+      null
+    );
+
+    const clearPendingUnfreeze = useCallback(() => {
+      if (unfreezeTimeoutRef.current) {
+        clearTimeout(unfreezeTimeoutRef.current);
+        unfreezeTimeoutRef.current = null;
+      }
+    }, []);
+
+    useEffect(() => clearPendingUnfreeze, [clearPendingUnfreeze]);
 
     const hide = useCallback(() => {
       setVisible(false);
       setMessage(undefined);
       setRect(null);
-    }, []);
+      if (freeze) {
+        clearPendingUnfreeze();
+        unfreezeTimeoutRef.current = setTimeout(() => {
+          freeze.value = false;
+          unfreezeTimeoutRef.current = null;
+        }, UNFREEZE_DELAY_MS);
+      }
+    }, [freeze, clearPendingUnfreeze]);
 
     const show = useCallback(
       (msg: MessageItem, msgRect: MeasuredRect) => {
@@ -72,11 +109,18 @@ export const MessageToolboxOverlay = forwardRef<
 
         if (toolboxNotAvailable) return;
 
+        if (freeze) {
+          // Cancel a still-pending delayed unfreeze from a just-closed
+          // toolbox so it can't fire mid-way through this new one.
+          clearPendingUnfreeze();
+          freeze.value = true;
+        }
+
         setMessage(msg);
         setRect(msgRect);
         setVisible(true);
       },
-      [currentUserId]
+      [currentUserId, freeze, clearPendingUnfreeze]
     );
 
     useImperativeHandle(ref, () => ({ show, hide }), [show, hide]);
@@ -170,6 +214,7 @@ export const MessageToolboxOverlay = forwardRef<
           message={
             <LegendChatMessage
               message={message}
+              messageId={message.clientMsgID || message.serverMsgID || ''}
               isOutgoing={isOutgoing}
               createdAtTime={message.sendTime || message.createTime}
               customMessageItemFactory={customMessageItemFactory}

package/src/services/resourceCenter.ts

@@ -60,13 +60,49 @@ const safeJsonParse = <T>(raw: string | undefined): T | undefined => {
   }
 };
 
+type LinkFields = Pick<
+  DThreadResource,
+  'linkUrl' | 'linkTitle' | 'linkDescription' | 'linkImageUrl' | 'linkDomain'
+>;
+
+// The Link tab's endpoint returns any message that contains a URL, not just
+// dedicated URL_TEXT (160) messages — @mention text (106) and quoted replies
+// (114) with a link show up here too, still carrying `content.urls` / `ex.urlMetadata`.
+// A single message can carry MULTIPLE urls in `content.urls` (e.g. "check
+// https://a.com and https://b.com") — BE only splits multi-url messages into
+// separate rows for dedicated URL_TEXT (160); for other content types it stays
+// one row, so every url must be turned into its own item here. `ex.urlMetadata`
+// only ever describes one link (the one it matches by exact url), so the rest
+// render as domain-only cards (no title/image) — the UI already supports that.
+const parseLinkItems = (
+  chatLog: DThreadResourceRawRow['chatLog']
+): LinkFields[] => {
+  const ex = safeJsonParse<RawUrlTextEx>(chatLog.ex);
+  const content = safeJsonParse<RawUrlTextContent>(chatLog.content);
+  const metadata = ex?.urlMetadata;
+  const urls = content?.urls?.length
+    ? content.urls
+    : metadata?.url
+      ? [metadata.url]
+      : [];
+  return urls.map((linkUrl) => {
+    const matchesMetadata = !!metadata?.url && metadata.url === linkUrl;
+    return {
+      linkUrl,
+      linkTitle: matchesMetadata ? metadata?.title : undefined,
+      linkDescription: matchesMetadata ? metadata?.description : undefined,
+      linkImageUrl: matchesMetadata ? metadata?.image : undefined,
+      linkDomain: extractDomain(linkUrl),
+    };
+  });
+};
+
 const parseThreadResourceItem = (
   row: DThreadResourceRawRow
-): DThreadResource => {
+): DThreadResource[] => {
   const { chatLog } = row;
   const contentType = chatLog.contentType as DThreadResourceContentType;
-  const base: DThreadResource = {
-    id: chatLog.clientMsgID,
+  const base = {
     contentType,
     isRevoked: row.isRevoked,
     createdAt: chatLog.sendTime,
@@ -75,47 +111,52 @@ const parseThreadResourceItem = (
   switch (contentType) {
     case DThreadResourceContentType.IMAGE: {
       const content = safeJsonParse<RawPictureContent>(chatLog.content);
-      return {
-        ...base,
-        sourceUrl: content?.bigPicture?.url,
-        thumbnailUrl: content?.snapshotPicture?.url,
-      };
+      return [
+        {
+          id: chatLog.clientMsgID,
+          ...base,
+          sourceUrl: content?.bigPicture?.url,
+          thumbnailUrl: content?.snapshotPicture?.url,
+        },
+      ];
     }
     case DThreadResourceContentType.VIDEO: {
       const content = safeJsonParse<RawVideoContent>(chatLog.content);
-      return {
-        ...base,
-        sourceUrl: content?.videoUrl,
-        thumbnailUrl: content?.snapshotUrl,
-        duration: content?.duration,
-      };
+      return [
+        {
+          id: chatLog.clientMsgID,
+          ...base,
+          sourceUrl: content?.videoUrl,
+          thumbnailUrl: content?.snapshotUrl,
+          duration: content?.duration,
+        },
+      ];
     }
     case DThreadResourceContentType.FILE: {
       const content = safeJsonParse<RawFileContent>(chatLog.content);
-      return {
-        ...base,
-        sourceUrl: content?.sourceUrl,
-        fileName: content?.fileName,
-        fileSize: content?.fileSize,
-        mimeType: content?.fileType,
-      };
+      return [
+        {
+          id: chatLog.clientMsgID,
+          ...base,
+          sourceUrl: content?.sourceUrl,
+          fileName: content?.fileName,
+          fileSize: content?.fileSize,
+          mimeType: content?.fileType,
+        },
+      ];
     }
-    case DThreadResourceContentType.URL_TEXT: {
-      const ex = safeJsonParse<RawUrlTextEx>(chatLog.ex);
-      const content = safeJsonParse<RawUrlTextContent>(chatLog.content);
-      const metadata = ex?.urlMetadata;
-      const linkUrl = metadata?.url ?? content?.urls?.[0];
-      return {
+    default: {
+      const linkItems = parseLinkItems(chatLog);
+      if (!linkItems.length) return [{ id: chatLog.clientMsgID, ...base }];
+      return linkItems.map((fields, index) => ({
+        id:
+          linkItems.length > 1
+            ? `${chatLog.clientMsgID}_${index}`
+            : chatLog.clientMsgID,
         ...base,
-        linkUrl,
-        linkTitle: metadata?.title,
-        linkDescription: metadata?.description,
-        linkImageUrl: metadata?.image,
-        linkDomain: linkUrl ? extractDomain(linkUrl) : undefined,
-      };
+        ...fields,
+      }));
     }
-    default:
-      return base;
   }
 };
 
@@ -127,7 +168,7 @@ export namespace ResourceCenterService {
       BaseResponse<DThreadResourceListResponse>
     >(getApiEndpoint('messagesResources'), req);
     const rows = res?.data?.data ?? [];
-    const items = rows.map(parseThreadResourceItem);
+    const items = rows.flatMap(parseThreadResourceItem);
     // `pageable.totalPages`/`totalElements` come back as `0` on this endpoint even
     // when rows are present (confirmed against staging) — unreliable, don't use it.
     // Item-count-vs-pageSize is the only trustworthy `hasMore` signal available.

package/src/store/message.ts

@@ -14,7 +14,13 @@ import type {
 import { mergeMessages } from '../utils/message';
 import { useConversationStore } from './conversation';
 
-const PAGE_SIZE = 20;
+// Smaller than a typical "load more" page size elsewhere in the app on
+// purpose: each page becomes a single prepend batch in ChatListLegend, and a
+// smaller batch means fewer newly-inserted rows still unmeasured by the time
+// native layout catches up — shrinks both the size and duration of the
+// visible settle right after a history-prepend flush (see
+// project_chatlistlegend_scroll_debugging memory for the full context).
+const PAGE_SIZE = 15;
 
 export const useMessageStore = create<MessageStore>()((set, get) => ({
   messages: [],