@droppii-org/chat-mobile 0.2.81 → 0.2.83

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

@@ -1,43 +1,185 @@
-import { memo } from 'react';
-import { KContainer, KLabel } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { getMessageText } from '../../../utils/legendListMessage';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
-import type { BaseLegendMessageProps } from '../types';
+import { formatMessageTime, type BaseLegendMessageProps } from '../types';
+import { tokenize } from '../../../utils/mentions';
+import { deserializeMentionRanges } from '../../../utils/mentionSerializer';
+import type { IMessageItemEx } from '../../../types/chat';
+import { QuotedMessagePreviewStrip } from '../quotedMessage/QuotedMessagePreviewStrip';
+import { LinkPreviewCard } from '../linkMessage/LinkPreviewCard';
+import { extractUrls, splitTextByUrls } from '../../../utils/url';
+
+const parseMessageEx = (ex?: string): IMessageItemEx | undefined => {
+  if (!ex) return undefined;
+  try {
+    return JSON.parse(ex) as IMessageItemEx;
+  } catch {
+    return undefined;
+  }
+};
+
 export const TextMessage = memo(
   ({
     message,
     isOutgoing,
+    createdAtTime,
     isHighlighted,
+    isTimeRevealed,
+    onPressUrl,
     groupPosition,
-  }: BaseLegendMessageProps) => {
+  }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const messageText = getMessageText(message);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    const isAtTextMessage = message.contentType === MessageType.AtTextMessage;
+
+    // Both the reply-preview strip and the link-preview card below piggyback
+    // on an AtTextMessage instead of getting their own content type — OpenIM
+    // content types are mutually exclusive (AtText vs Quote vs UrlText), so
+    // once mention picks AtText (to keep native tag/notify semantics — see
+    // useSendMessage.ts), quote rides along via the native
+    // AtTextElem.quoteMessage field and the URL card rides along via our own
+    // ex.urlMetadata channel (already attached unconditionally on send).
+    const quotedMessage = isAtTextMessage
+      ? message.atTextElem?.quoteMessage
+      : undefined;
+
+    const parsedEx = useMemo(
+      () => (isAtTextMessage ? parseMessageEx(message.ex) : undefined),
+      [isAtTextMessage, message.ex]
+    );
+    const urlMetadata = parsedEx?.urlMetadata;
+
+    const mentions = useMemo(() => {
+      if (!isAtTextMessage || !message.atTextElem) return [];
+      // Wrapped under `offsets` — matches the wire shape other Droppii
+      // clients (e.g. the web/CRM app) already send (see
+      // IMessageItemEx.mentions doc comment for how this was confirmed).
+      return deserializeMentionRanges(
+        message.atTextElem,
+        parsedEx?.mentions?.offsets
+      );
+    }, [isAtTextMessage, message.atTextElem, parsedEx]);
+
+    const segments = useMemo(
+      () => (mentions.length > 0 ? tokenize(messageText, mentions) : null),
+      [mentions, messageText]
+    );
+
+    // Scoped to the mention+URL combo only (`segments` implies mentions are
+    // present) — a plain TextMessage with no mention falls through to
+    // `messageText` unchanged below, same as before this feature existed.
+    // Widening this to auto-linkify every TextMessage is a separate,
+    // deliberate product decision, not a side effect of this fix.
+    const urls = useMemo(
+      () => (segments ? extractUrls(messageText) : []),
+      [segments, messageText]
+    );
 
     if (!messageText?.trim()) {
       return null;
     }
 
+    // A plain-text run (the space between two mentions) may itself contain
+    // a URL — split further so it gets the same tappable/colored treatment
+    // LinkMessage gives a pure URL message, instead of sitting there as
+    // unstyled black text next to a colored mention.
+    const renderTextRun = (text: string, keyPrefix: string) => {
+      if (!urls.length) return <Text key={keyPrefix}>{text}</Text>;
+      return splitTextByUrls(text, urls).map((part, i) =>
+        part.isUrl ? (
+          <Text
+            key={`${keyPrefix}-url-${i}`}
+            style={urlTextStyle}
+            onPress={() => onPressUrl?.(part.text)}
+          >
+            {part.text}
+          </Text>
+        ) : (
+          <Text key={`${keyPrefix}-text-${i}`}>{part.text}</Text>
+        )
+      );
+    };
+
     return (
-      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+      <>
+        <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+          <KContainer.View
+            style={[
+              messageStyles.bubble,
+              styles.bubbleContent,
+              isOutgoing
+                ? messageStyles.bubbleSent
+                : messageStyles.bubbleReceived,
+              isHighlighted && messageStyles.bubbleHighlighted,
+              getTailCornerStyle(isOutgoing, groupPosition),
+            ]}
+          >
+            {quotedMessage && (
+              <QuotedMessagePreviewStrip quotedMessage={quotedMessage} />
+            )}
+            <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+              {segments
+                ? segments.map((segment, index) =>
+                    segment.type === 'mention' ? (
+                      <Text key={segment.mention.id} style={mentionTextStyle}>
+                        {`@${segment.mention.displayName}`}
+                      </Text>
+                    ) : (
+                      renderTextRun(segment.text, `seg-${index}`)
+                    )
+                  )
+                : messageText}
+            </KLabel.Text>
+            {!!urlMetadata && (
+              <LinkPreviewCard metadata={urlMetadata} onPressUrl={onPressUrl} />
+            )}
+          </KContainer.View>
+        </BubbleTailRow>
+
         <KContainer.View
-          style={[
-            messageStyles.bubble,
-            isOutgoing
-              ? messageStyles.bubbleSent
-              : messageStyles.bubbleReceived,
-            isHighlighted && messageStyles.bubbleHighlighted,
-            getTailCornerStyle(isOutgoing, groupPosition),
-          ]}
+          row
+          alignItems
+          style={[styles.timeLabel, isOutgoing && styles.timeLabelRight]}
         >
-          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
-            {messageText}
-          </KLabel.Text>
+          {isTimeRevealed && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL={isOutgoing ? undefined : '0.25rem'}
+              marginR={isOutgoing ? '0.25rem' : undefined}
+            >
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
         </KContainer.View>
-      </BubbleTailRow>
+      </>
     );
   }
 );
 
 TextMessage.displayName = 'TextMessage';
+
+const styles = StyleSheet.create({
+  bubbleContent: { gap: 4 },
+  timeLabel: { gap: 4, marginTop: 2 },
+  timeLabelRight: { justifyContent: 'flex-end' },
+});
+
+// Same highlight color as the composer (MentionHighlightAdapter) and the
+// Figma screenshots. This is a read-only <Text>, not an editable
+// TextInput, so none of the nested-Text-in-TextInput bug class applies —
+// nesting styled Text here is unconditionally safe.
+const mentionTextStyle = { color: KColors.palette.primary.w400 };
+
+// Same color LinkMessage uses for a URL substring — a mention message's
+// plain-text run can contain a URL too (mention+URL combo, see
+// useSendMessage.ts's doc comment), and it should look tappable/colored
+// the same way there as it does in a pure UrlTextMessage.
+const urlTextStyle = { color: KColors.primary.normal };

package/src/components/messages/types.ts

@@ -7,6 +7,7 @@ export interface BaseLegendMessageProps {
   isOutgoing: boolean;
   createdAtTime: number;
   isHighlighted?: boolean;
+  isTimeRevealed?: boolean;
   /** Position within its same-sender cluster — drives the bubble tail. */
   groupPosition?: GroupPosition;
   onMediaPress?: (items: MediaItem[], index?: number) => void;

package/src/core/useChatListener.ts

@@ -54,7 +54,7 @@ export const useChatListener = () => {
 
   const onConversationChanged = useCallback(
     (conversations: ConversationItem[]) => {
-      // console.log('[Listener] OnConversationChanged', conversations);
+      console.log('[Listener] OnConversationChanged', conversations);
 
       // return; // TEMPORARILY DISABLED: OnConversationChanged/OnNewConversation can
       const oldMap = useConversationStore.getState().map;

package/src/hooks/message/useSendMessage.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useConversationStore } from '../../store/conversation';
 import { useUserStore } from '../../store/user';
 import type {
+  AtMsgParams,
   CustomMsgParams,
   MessageItem,
   OfflinePush,
@@ -35,6 +36,8 @@ import { stickerQueryKeys } from '../query-keys';
 import { getMessagePreview } from '../../utils/messageUtils';
 import { useCanSendMessage } from '../useGroupPermission';
 import { UIUtils } from '../../utils/UIUtils';
+import type { Mention } from '../../types/mention';
+import { serializeMentionsForSend } from '../../utils/mentionSerializer';
 
 const buildSendParams = (
   message: MessageItem,
@@ -98,12 +101,14 @@ export const useSendMessage = () => {
       flow,
       customMessage,
       sticker,
+      mentions,
     }: {
       plainText?: string;
       urlMetadata?: IUrlMetadata;
       flow?: IRunConversationFlowPayload;
       customMessage?: CustomMessagePayload;
       sticker?: StickerItem;
+      mentions?: Mention[];
     }) => {
       if (!isSendMessageAllowed) {
         UIUtils.toast.open({
@@ -124,9 +129,11 @@ export const useSendMessage = () => {
       if (!recvID && !groupID) return;
 
       const messageList: MessageItem[] = [];
+      let exMentions: IMessageItemEx['mentions'];
 
       const hasText = !!plainText && plainText.trim() !== '';
       const hasPreview = !!urlMetadata?.url;
+      const hasMentions = !!mentions && mentions.length > 0;
 
       //text msg
       if (hasText) {
@@ -134,12 +141,51 @@ export const useSendMessage = () => {
         const isUrlMessage = urls.length > 0 || hasPreview;
         let message: MessageItem | null = null;
 
-        if (quotedMessage) {
+        // Mention always wins the content type over a URL preview: AtText
+        // and UrlText are mutually exclusive OpenIM content types (no field
+        // for both), but `ex.urlMetadata` is attached unconditionally below
+        // regardless of which branch builds `message` — so the URL card
+        // still rides along via `ex` on an AtTextMessage. TextMessage's
+        // render side reads it and shows the card next to the
+        // mention-highlighted text (see its doc comment). Other clients
+        // without that rendering just see plain "@Name ... https://..."
+        // text — mention intact, only the rich card is missing.
+        if (quotedMessage && hasMentions && groupID) {
+          // Native mention+quote: AtMsgParams.message embeds the quoted
+          // message into AtTextElem.quoteMessage server/core-side (verified
+          // down to openimsdk-core/internal/conversation_msg/
+          // create_message.go:76-101 — QuoteMessage: qs is a real field
+          // assignment, not just a bridge pass-through) — keeps the mention's
+          // native tag/notify semantics instead of falling back to a plain
+          // QuoteMessage, which has no atUserIDList at all.
+          const serialized = serializeMentionsForSend(mentions);
+          exMentions = { offsets: serialized.exMentions };
+          message = await createTextAtMessage({
+            text: plainText || '',
+            atUserIDList: serialized.atUserIDList,
+            atUsersInfo: serialized.atUsersInfo,
+            message: quotedMessage,
+          });
+          setQuotedMessage(undefined);
+        } else if (quotedMessage) {
           message = await createQuotedMessage({
             text: plainText || '',
             message: quotedMessage,
           });
           setQuotedMessage(undefined);
+        } else if (hasMentions && groupID) {
+          // "Tất cả" serializes to OpenIM's own AT_ALL_TAG sentinel, not an
+          // expanded member list — no group-member fetch needed here, see
+          // AT_ALL_TAG's doc comment in mentionSerializer.ts for why.
+          const serialized = serializeMentionsForSend(mentions);
+          // Wrapped under `offsets` to match the wire shape other Droppii
+          // clients already send (see IMessageItemEx.mentions doc comment).
+          exMentions = { offsets: serialized.exMentions };
+          message = await createTextAtMessage({
+            text: plainText || '',
+            atUserIDList: serialized.atUserIDList,
+            atUsersInfo: serialized.atUsersInfo,
+          });
         } else if (isUrlMessage) {
           message = await createUrlTextMessage(plainText || '', urls);
         } else if (hasText) {
@@ -178,6 +224,7 @@ export const useSendMessage = () => {
           urlMetadata,
           flow,
           stickerId: sticker?.id,
+          mentions: exMentions,
         };
 
         await dispatchSend(
@@ -330,6 +377,18 @@ export const createUrlTextMessage = async (text: string, urls: string[]) => {
   return urlTextMessage;
 };
 
+export const createTextAtMessage = async (params: AtMsgParams) => {
+  let atMessage = await OpenIMSDK.createTextAtMessage(params, uuid.v4())
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createTextAtMessage', errCode, errMsg);
+      return null;
+    });
+  return atMessage;
+};
+
 export const createCustomMessage = async (params: CustomMsgParams) => {
   let customMessage = await OpenIMSDK.createCustomMessage(params, uuid.v4())
     .then((data) => {

package/src/hooks/query-keys.ts

@@ -62,6 +62,12 @@ export const messageQueryKeys = {
     [...messageQueryKeys.all, 'search', query, conversationId] as const,
 };
 
+export const mentionQueryKeys = {
+  all: ['mentionSearch'] as const,
+  search: (groupID: string, keyword: string) =>
+    [...mentionQueryKeys.all, groupID, keyword] as const,
+};
+
 export const contactQueryKeys = {
   all: ['contacts'] as const,
   search: (query: string, type?: string) =>

package/src/hooks/useChatCompose.ts

@@ -13,6 +13,7 @@ import {
   generateAndUploadVideoThumbnails,
   type VideoWithUploadStatus,
 } from '../utils/videoThumbnailUpload';
+import type { Mention } from '../types/mention';
 
 export function useChatCompose() {
   const [text, setText] = useState('');
@@ -45,123 +46,130 @@ export function useChatCompose() {
     ]
   );
 
-  const send = useCallback(async () => {
-    const { selectedImages, clearAllImages } = imageAttachment;
-    const { selectedFiles, clearAllFiles } = fileAttachment;
-    const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
+  const send = useCallback(
+    async (mentions?: Mention[]) => {
+      const { selectedImages, clearAllImages } = imageAttachment;
+      const { selectedFiles, clearAllFiles } = fileAttachment;
+      const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
 
-    // --- Attachments ---
-    if (selectedImages.length > 0 || selectedFiles.length > 0) {
-      const actualImages = selectedImages.filter(
-        (img: ImageWithUploadStatus) => !isVideoFromPicker(img.image)
-      );
-      const videos = selectedImages.filter((img: ImageWithUploadStatus) =>
-        isVideoFromPicker(img.image)
-      );
+      // --- Attachments ---
+      if (selectedImages.length > 0 || selectedFiles.length > 0) {
+        const actualImages = selectedImages.filter(
+          (img: ImageWithUploadStatus) => !isVideoFromPicker(img.image)
+        );
+        const videos = selectedImages.filter((img: ImageWithUploadStatus) =>
+          isVideoFromPicker(img.image)
+        );
 
-      const uploadedImages = actualImages.filter(
-        (img: ImageWithUploadStatus) => img.uploadedUrl
-      );
-      const uploadedVideos = videos.filter(
-        (v) => v.uploadedUrl
-      ) as unknown as VideoWithUploadStatus[];
+        const uploadedImages = actualImages.filter(
+          (img: ImageWithUploadStatus) => img.uploadedUrl
+        );
+        const uploadedVideos = videos.filter(
+          (v) => v.uploadedUrl
+        ) as unknown as VideoWithUploadStatus[];
 
-      // Thumbnails are generated + uploaded at pick time (useImageAttachment).
-      // Only fall back to generating here for videos that don't already have one
-      // (e.g. thumbnail generation failed or hadn't finished before send).
-      const videosMissingThumbnail = uploadedVideos.filter(
-        (v) => !v.thumbnailUrl
-      );
-      let videoThumbnails: Record<string, { url: string; size: number }> = {};
-      if (videosMissingThumbnail.length > 0) {
-        videoThumbnails = await generateAndUploadVideoThumbnails(
-          videosMissingThumbnail
+        // Thumbnails are generated + uploaded at pick time (useImageAttachment).
+        // Only fall back to generating here for videos that don't already have one
+        // (e.g. thumbnail generation failed or hadn't finished before send).
+        const videosMissingThumbnail = uploadedVideos.filter(
+          (v) => !v.thumbnailUrl
         );
-      }
+        let videoThumbnails: Record<string, { url: string; size: number }> = {};
+        if (videosMissingThumbnail.length > 0) {
+          videoThumbnails = await generateAndUploadVideoThumbnails(
+            videosMissingThumbnail
+          );
+        }
 
-      // Send images + videos
-      if (uploadedImages.length > 0 || uploadedVideos.length > 0) {
-        const attachmentItems = [
-          ...uploadedImages.map((img: ImageWithUploadStatus) => ({
-            ...img,
-            type: 'image' as const,
-          })),
-          ...uploadedVideos.map(
-            (vid: VideoWithUploadStatus, vidIdx: number) => {
-              const videoId = vid.uploadedUrl || `video-${vidIdx}`;
-              const thumb = videoThumbnails[videoId];
-              return {
-                type: 'video' as const,
-                video: {
-                  path: vid.image.path,
-                  filename: vid.image.filename ?? undefined,
-                  size: vid.image.size ?? undefined,
-                  width: vid.image.width ?? undefined,
-                  height: vid.image.height ?? undefined,
-                  duration: vid.image.duration ?? undefined,
-                },
-                uploadProgress: vid.uploadProgress,
-                error: vid.error,
-                isUploading: vid.isUploading,
-                uploadedUrl: vid.uploadedUrl,
-                thumbnailUrl: vid.thumbnailUrl ?? thumb?.url,
-                thumbnailSize: vid.thumbnailSize ?? thumb?.size,
-              };
-            }
-          ),
-        ];
+        // Send images + videos
+        if (uploadedImages.length > 0 || uploadedVideos.length > 0) {
+          const attachmentItems = [
+            ...uploadedImages.map((img: ImageWithUploadStatus) => ({
+              ...img,
+              type: 'image' as const,
+            })),
+            ...uploadedVideos.map(
+              (vid: VideoWithUploadStatus, vidIdx: number) => {
+                const videoId = vid.uploadedUrl || `video-${vidIdx}`;
+                const thumb = videoThumbnails[videoId];
+                return {
+                  type: 'video' as const,
+                  video: {
+                    path: vid.image.path,
+                    filename: vid.image.filename ?? undefined,
+                    size: vid.image.size ?? undefined,
+                    width: vid.image.width ?? undefined,
+                    height: vid.image.height ?? undefined,
+                    duration: vid.image.duration ?? undefined,
+                  },
+                  uploadProgress: vid.uploadProgress,
+                  error: vid.error,
+                  isUploading: vid.isUploading,
+                  uploadedUrl: vid.uploadedUrl,
+                  thumbnailUrl: vid.thumbnailUrl ?? thumb?.url,
+                  thumbnailSize: vid.thumbnailSize ?? thumb?.size,
+                };
+              }
+            ),
+          ];
 
-        // Clear composer immediately — message is already in chat list with Sending status.
-        // User retries from the bubble, not the composer.
-        ImagePicker.clean().catch(() => {});
-        clearAllImages();
-        // Awaited so files (lower priority per attachment-priority config)
-        // only start sending after images/videos are done.
-        await sendAttachments(attachmentItems, undefined);
-      }
+          // Clear composer immediately — message is already in chat list with Sending status.
+          // User retries from the bubble, not the composer.
+          ImagePicker.clean().catch(() => {});
+          clearAllImages();
+          // Awaited so files (lower priority per attachment-priority config)
+          // only start sending after images/videos are done.
+          await sendAttachments(attachmentItems, undefined);
+        }
 
-      // Send each file as its own message (never merged), in priority order
-      // after images/videos, one at a time to preserve pick order.
-      const uploadedFiles = selectedFiles.filter(
-        (f) => f.uploadedUrl && !f.error
-      );
-      if (uploadedFiles.length > 0) {
-        clearAllFiles();
-        for (const file of uploadedFiles) {
-          await sendAttachments(
-            [
-              {
-                type: 'file' as const,
-                file: { path: file.uri, filename: file.name, size: file.size },
-                uploadProgress: 100,
-                error: null,
-                isUploading: false,
-                uploadedUrl: file.uploadedUrl,
-              },
-            ],
-            undefined
-          );
+        // Send each file as its own message (never merged), in priority order
+        // after images/videos, one at a time to preserve pick order.
+        const uploadedFiles = selectedFiles.filter(
+          (f) => f.uploadedUrl && !f.error
+        );
+        if (uploadedFiles.length > 0) {
+          clearAllFiles();
+          for (const file of uploadedFiles) {
+            await sendAttachments(
+              [
+                {
+                  type: 'file' as const,
+                  file: {
+                    path: file.uri,
+                    filename: file.name,
+                    size: file.size,
+                  },
+                  uploadProgress: 100,
+                  error: null,
+                  isUploading: false,
+                  uploadedUrl: file.uploadedUrl,
+                },
+              ],
+              undefined
+            );
+          }
         }
       }
-    }
 
-    // --- Text / link preview ---
-    if (text.trim() || urlMeta) {
-      const plainText = text.trim();
-      // Clear composer immediately — message is already in chat list with Sending status.
-      // User retries from the bubble, not the composer.
-      setText('');
-      await sendMessage({ plainText, urlMetadata: urlMeta });
-    }
-  }, [
-    imageAttachment,
-    fileAttachment,
-    linkPreview.isVisible,
-    linkPreview.metadata,
-    sendAttachments,
-    sendMessage,
-    text,
-  ]);
+      // --- Text / link preview ---
+      if (text.trim() || urlMeta) {
+        const plainText = text.trim();
+        // Clear composer immediately — message is already in chat list with Sending status.
+        // User retries from the bubble, not the composer.
+        setText('');
+        await sendMessage({ plainText, urlMetadata: urlMeta, mentions });
+      }
+    },
+    [
+      imageAttachment,
+      fileAttachment,
+      linkPreview.isVisible,
+      linkPreview.metadata,
+      sendAttachments,
+      sendMessage,
+      text,
+    ]
+  );
 
   return {
     // Text