@droppii-org/chat-mobile 0.2.80 → 0.2.82

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/contacts/useSearchContacts.ts

@@ -0,0 +1,66 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { contactQueryKeys } from '../query-keys';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import type {
+  ContactCategory,
+  DChatApplicationType,
+  IContactSearchItem,
+  IContactSearchRequest,
+} from '../../types/chat';
+import type { BaseResponse } from '../../types/auth';
+import { PAGE_SIZE } from '../../constants';
+
+interface IUseSearchContactsProps {
+  query: string;
+  applicationType: DChatApplicationType;
+  type?: ContactCategory;
+  pageSize?: number;
+}
+
+export const useSearchContacts = ({
+  query,
+  applicationType,
+  type,
+  pageSize = PAGE_SIZE,
+}: IUseSearchContactsProps) => {
+  const { data, ...rest } = useInfiniteQuery({
+    queryKey: [contactQueryKeys.search(query.trim(), type), pageSize],
+    queryFn: async ({ pageParam = 1 }) => {
+      const params: IContactSearchRequest = {
+        page: pageParam,
+        pageSize,
+        applicationType,
+        searchTerm: query.trim(),
+        type,
+      };
+      const res = await apiInstance?.post<BaseResponse<IContactSearchItem[]>>(
+        ENDPOINTS.chatService.searchContacts(),
+        params
+      );
+      return res?.data;
+    },
+    getNextPageParam: (lastPage) => {
+      const currentPage = lastPage?.pageable?.pageNumber || 1;
+      const dataLength = lastPage?.data?.length || 0;
+      return dataLength < pageSize ? undefined : currentPage + 1;
+    },
+    initialPageParam: 1,
+    enabled: !!query.trim() && !!applicationType,
+  });
+
+  const dataFlatten = useMemo<IContactSearchItem[]>(() => {
+    if (!query.trim() || !data) return [];
+    return (
+      data?.pages
+        ?.flatMap?.((page) => page?.data)
+        ?.filter((item): item is IContactSearchItem => item !== undefined) || []
+    );
+  }, [data, query]);
+
+  return {
+    dataFlatten,
+    ...rest,
+  };
+};

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,18 @@ 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) =>
+    [...contactQueryKeys.all, 'search', query, type] as const,
+};
+
 export const groupQueryKeys = {
   all: ['groups'] as const,
   public: () => [...groupQueryKeys.all, 'public'] as const,

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

package/src/screens/SearchConversation/ContactResultItem.tsx

@@ -0,0 +1,128 @@
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { ContactCategory, type IContactSearchItem } from '../../types/chat';
+import { AvatarSection, NamePrefixIcon } from '../../components/ThreadCard';
+import { formatLastOnlineTime } from '../../utils/dateTimeUtils';
+import {
+  highlightSearch,
+  type HighlightResult,
+} from '../../utils/highlightSearch';
+import { trans } from '../../translation';
+import isEmpty from 'lodash/isEmpty';
+
+const CONTACT_PEER_TYPE: Record<ContactCategory, PeerType> = {
+  [ContactCategory.Customer]: PeerType.Customer,
+  [ContactCategory.Seller]: PeerType.User,
+  [ContactCategory.Pdp]: PeerType.Bot,
+  [ContactCategory.Group]: PeerType.Group,
+};
+
+interface IContactResultItemProps {
+  item: IContactSearchItem;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+  searchTerm?: string;
+}
+
+const ContactResultItem = memo((props: IContactResultItemProps) => {
+  const { item, onPressSearchContact, searchTerm } = props || {};
+  const peerType = CONTACT_PEER_TYPE[item?.type];
+
+  const subtitle = useMemo(() => {
+    if (item?.type === ContactCategory.Group) {
+      const description = !isEmpty(item?.description?.trim())
+        ? item?.description
+        : trans('group:no_description');
+      return `${trans('group:member_count', { count: item?.memberCount ?? 0 })} • ${description}`;
+    }
+    if (item?.type === ContactCategory.Pdp) {
+      return '';
+    }
+    return formatLastOnlineTime(item?.lastOnlineTime ?? null);
+  }, [item?.type, item?.description, item?.memberCount, item?.lastOnlineTime]);
+
+  const highlightResult: HighlightResult | null = useMemo(() => {
+    if (isEmpty(searchTerm?.trim())) return null;
+    return highlightSearch(item?.targetName || '', searchTerm || '');
+  }, [item?.targetName, searchTerm]);
+
+  const handlePressItem = useCallback(() => {
+    onPressSearchContact?.(item);
+  }, [onPressSearchContact, item]);
+
+  return (
+    <KContainer.Touchable
+      row
+      justifyContent="space-between"
+      alignItems
+      paddingV={'0.75rem'}
+      style={styles.container}
+      onPress={handlePressItem}
+      brBW={1}
+      brBC={KColors.border.light}
+    >
+      <KContainer.View row alignItems flex>
+        <AvatarSection
+          avatar={item?.targetAvatar ?? null}
+          fullName={item?.targetName}
+          peerType={peerType}
+          size="nm"
+        />
+        <KContainer.View flex marginL={'0.5rem'}>
+          <KContainer.View row alignItems>
+            <NamePrefixIcon peerType={peerType} />
+            {highlightResult != null ? (
+              <KLabel.Text typo="TextMdMedium" numberOfLines={1} flex>
+                {highlightResult?.before || ''}
+                <KLabel.Text typo="TextMdMedium" color={KColors.primary.normal}>
+                  {highlightResult?.match || ''}
+                </KLabel.Text>
+                <KLabel.Text typo="TextMdMedium">
+                  {highlightResult?.after || ''}
+                </KLabel.Text>
+              </KLabel.Text>
+            ) : (
+              <KLabel.Text typo="TextMdMedium" numberOfLines={1} flex>
+                {item?.targetName || ''}
+              </KLabel.Text>
+            )}
+          </KContainer.View>
+          <KContainer.VisibleView visible={!!subtitle}>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.gray.light}
+              numberOfLines={1}
+            >
+              {subtitle}
+            </KLabel.Text>
+          </KContainer.VisibleView>
+        </KContainer.View>
+      </KContainer.View>
+
+      <KContainer.VisibleView visible={false}>
+        <KContainer.View center>
+          <KImage.VectorIcons
+            name="more-horizontal-b"
+            size={24}
+            color={KColors.gray.normal}
+          />
+        </KContainer.View>
+      </KContainer.VisibleView>
+    </KContainer.Touchable>
+  );
+});
+
+export default ContactResultItem;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: KSpacingValue['1rem'],
+  },
+});