@droppii-org/chat-mobile 0.2.81 → 0.2.82

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

@@ -1,16 +1,12 @@
 import { memo } from 'react';
 import { StyleSheet } from 'react-native';
-import {
-  KContainer,
-  KImage,
-  KLabel,
-  KColors,
-  KSpacingValue,
-} from '@droppii/libs';
+import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
 import type { BaseLegendMessageProps } from '../types';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { parseUrlMetadata } from '../../../utils/messageUtils';
+import { splitTextByUrls } from '../../../utils/url';
 import { messageStyles } from '../styles';
+import { LinkPreviewCard } from './LinkPreviewCard';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
 
@@ -18,45 +14,26 @@ const renderTextWithLinks = (
   content: string,
   urls: string[],
   onPressUrl?: (url: string) => void
-) => {
-  if (!urls.length) {
-    return <KLabel.Text typo="TextMdNormal">{content}</KLabel.Text>;
-  }
-
-  const parts: { text: string; isUrl: boolean }[] = [];
-  let remaining = content;
-
-  for (const url of urls) {
-    const idx = remaining.indexOf(url);
-    if (idx === -1) continue;
-    if (idx > 0) parts.push({ text: remaining.slice(0, idx), isUrl: false });
-    parts.push({ text: url, isUrl: true });
-    remaining = remaining.slice(idx + url.length);
-  }
-
-  if (remaining) parts.push({ text: remaining, isUrl: false });
-
-  return (
-    <KLabel.Text typo="TextMdNormal">
-      {parts.map((part, i) =>
-        part.isUrl ? (
-          <KLabel.Text
-            key={i}
-            onPress={() => onPressUrl?.(part.text)}
-            color={KColors.primary.normal}
-            typo="TextMdMedium"
-          >
-            {part.text}
-          </KLabel.Text>
-        ) : (
-          <KLabel.Text typo="TextMdNormal" key={i}>
-            {part.text}
-          </KLabel.Text>
-        )
-      )}
-    </KLabel.Text>
-  );
-};
+) => (
+  <KLabel.Text typo="TextMdNormal">
+    {splitTextByUrls(content, urls).map((part, i) =>
+      part.isUrl ? (
+        <KLabel.Text
+          key={i}
+          onPress={() => onPressUrl?.(part.text)}
+          color={KColors.primary.normal}
+          typo="TextMdMedium"
+        >
+          {part.text}
+        </KLabel.Text>
+      ) : (
+        <KLabel.Text typo="TextMdNormal" key={i}>
+          {part.text}
+        </KLabel.Text>
+      )
+    )}
+  </KLabel.Text>
+);
 
 export const LinkMessage = memo(
   ({
@@ -87,49 +64,7 @@ export const LinkMessage = memo(
           )}
 
           {!!metadata && (
-            <KContainer.Touchable
-              style={styles.card}
-              onPress={() => metadata.url && onPressUrl?.(metadata.url)}
-            >
-              {!!metadata.image && (
-                <KContainer.View style={styles.cardThumb}>
-                  <KImage.Base
-                    uri={metadata.image}
-                    style={StyleSheet.absoluteFill}
-                    resizeMode="cover"
-                  />
-                </KContainer.View>
-              )}
-              <KContainer.View style={styles.cardBody}>
-                {!!metadata.title && (
-                  <KLabel.Text
-                    typo="TextNmMedium"
-                    color={KColors.palette.gray.w900}
-                    numberOfLines={1}
-                  >
-                    {metadata.title}
-                  </KLabel.Text>
-                )}
-                {!!metadata.url && (
-                  <KLabel.Text
-                    typo="TextXsMedium"
-                    color={KColors.palette.primary.w400}
-                    numberOfLines={1}
-                  >
-                    {metadata.url}
-                  </KLabel.Text>
-                )}
-                {!!metadata.description && (
-                  <KLabel.Text
-                    typo="TextXsNormal"
-                    color={KColors.gray.normal}
-                    numberOfLines={2}
-                  >
-                    {metadata.description}
-                  </KLabel.Text>
-                )}
-              </KContainer.View>
-            </KContainer.Touchable>
+            <LinkPreviewCard metadata={metadata} onPressUrl={onPressUrl} />
           )}
         </KContainer.View>
       </BubbleTailRow>
@@ -157,6 +92,7 @@ const styles = StyleSheet.create({
   textRow: {
     paddingHorizontal: KSpacingValue['0.25rem'],
   },
+  timeLabel: { gap: 4, marginTop: 2 },
   card: {
     borderRadius: KSpacingValue['0.75rem'],
     borderWidth: 1,

package/src/components/messages/quotedMessage/QuotedMessagePreviewStrip.tsx

@@ -0,0 +1,168 @@
+import { memo, useCallback, useMemo } from 'react';
+import { DeviceEventEmitter, StyleSheet } from 'react-native';
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  getMessagePreviewParts,
+  getReplySenderName,
+  parseUrlMetadata,
+} from '../../../utils/messageUtils';
+import { getFileIcon, getMimeType } from '../../../utils/imageUtils';
+import { useUserStore } from '../../../store';
+import { useChatDetailContext } from '../../../context';
+import { ChatEvent } from '../../../types/events';
+
+interface QuotedMessagePreviewStripProps {
+  quotedMessage?: MessageItem;
+}
+
+/**
+ * The "replying to ..." strip — shared by QuotedMessage (message.quoteElem)
+ * and TextMessage (message.atTextElem?.quoteMessage, for the mention+quote
+ * combo). Extracted so both content types render the exact same preview
+ * instead of two copies drifting apart.
+ */
+export const QuotedMessagePreviewStrip = memo(
+  ({ quotedMessage }: QuotedMessagePreviewStripProps) => {
+    const { conversation } = useChatDetailContext();
+    const currentUserId = useUserStore((s) => s.user?.userID);
+    const messagePreview = getMessagePreviewParts(quotedMessage);
+
+    const imageUrl = useMemo(() => {
+      switch (quotedMessage?.contentType) {
+        case MessageType.PictureMessage:
+          return quotedMessage?.pictureElem?.snapshotPicture?.url || '';
+        case MessageType.VideoMessage:
+          return quotedMessage?.videoElem?.snapshotUrl || '';
+        case MessageType.UrlTextMessage: {
+          const metadata = parseUrlMetadata(quotedMessage?.ex);
+          return metadata?.image || '';
+        }
+        default:
+          return '';
+      }
+    }, [quotedMessage]);
+
+    const iconSource = useMemo(() => {
+      if (quotedMessage?.contentType !== MessageType.FileMessage) return '';
+      const mimeType = getMimeType(quotedMessage?.fileElem?.fileName || '');
+      return getFileIcon(mimeType);
+    }, [quotedMessage]);
+
+    const handlePress = useCallback(() => {
+      DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+        clientMessageId: quotedMessage?.clientMsgID || '',
+      });
+    }, [quotedMessage]);
+
+    return (
+      <KContainer.Touchable
+        style={styles.quotedContainer}
+        onPress={handlePress}
+      >
+        <KContainer.View style={styles.dot} />
+        <KContainer.VisibleView visible={!!imageUrl}>
+          <KContainer.View style={styles.imageContainer}>
+            <KImage.Base uri={imageUrl} style={styles.imageContainer} />
+            <KContainer.VisibleView
+              visible={quotedMessage?.contentType === MessageType.VideoMessage}
+            >
+              <KContainer.View style={styles.playIconContainer}>
+                <KContainer.View style={styles.playIcon}>
+                  <KImage.VectorIcons
+                    name="play-b"
+                    size={12}
+                    color={KColors.white}
+                  />
+                </KContainer.View>
+              </KContainer.View>
+            </KContainer.VisibleView>
+          </KContainer.View>
+        </KContainer.VisibleView>
+        <KContainer.VisibleView visible={!!iconSource}>
+          <KImage.Base
+            uri={iconSource}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+        </KContainer.VisibleView>
+        <KContainer.View flexS={1} style={styles.content}>
+          <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+            {getReplySenderName(
+              quotedMessage,
+              currentUserId,
+              conversation,
+              true
+            )}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextSmNormal"
+            color={KColors.gray.light}
+            numberOfLines={1}
+            {...messagePreview.textProps}
+          >
+            {messagePreview.text}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+QuotedMessagePreviewStrip.displayName = 'QuotedMessagePreviewStrip';
+
+const styles = StyleSheet.create({
+  quotedContainer: {
+    backgroundColor: KColors.white,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    borderTopRightRadius: KRadiusValue['3x'],
+    borderBottomRightRadius: KRadiusValue['3x'],
+    paddingRight: KSpacingValue['0.5rem'],
+    maxWidth: '100%',
+  },
+  dot: {
+    width: 3,
+    height: '100%',
+    backgroundColor: KColors.palette.grayCool.w200,
+    borderRadius: KRadiusValue.x,
+    marginRight: -2,
+  },
+  content: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+    paddingVertical: KSpacingValue['0.25rem'],
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  imageContainer: {
+    width: 42,
+    height: 42,
+    borderRadius: KRadiusValue['2x'],
+  },
+  playIconContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playIcon: {
+    borderRadius: 8,
+    padding: KSpacingValue['0.25rem'],
+    backgroundColor: KColors.hexToRgba(KColors.black, 0.6),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

@@ -1,29 +1,116 @@
-import { memo } from 'react';
-import { KContainer, KLabel } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { Text } 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 { StyleSheet } from 'react-native';
+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,
     isHighlighted,
+    onPressUrl,
     groupPosition,
-  }: BaseLegendMessageProps) => {
+  }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const messageText = getMessageText(message);
 
+    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}>
         <KContainer.View
           style={[
             messageStyles.bubble,
+            styles.bubbleContent,
             isOutgoing
               ? messageStyles.bubbleSent
               : messageStyles.bubbleReceived,
@@ -31,9 +118,25 @@ export const TextMessage = memo(
             getTailCornerStyle(isOutgoing, groupPosition),
           ]}
         >
+          {quotedMessage && (
+            <QuotedMessagePreviewStrip quotedMessage={quotedMessage} />
+          )}
           <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
-            {messageText}
+            {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>
     );
@@ -41,3 +144,20 @@ export const TextMessage = memo(
 );
 
 TextMessage.displayName = 'TextMessage';
+
+const styles = StyleSheet.create({
+  bubbleContent: { gap: 4 },
+  timeLabel: { gap: 4, marginTop: 2 },
+});
+
+// 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/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) =>