@droppii-org/chat-mobile 0.2.6 → 0.2.7

package/src/hooks/useConversationList.ts

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import OpenIMSDK from '@droppii/openim-rn-client-sdk';
-import { ChatAPI } from '../services';
+import OpenIMSDK, {
+  type ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
-import { mergeOpenIMIntoConversation } from '../utils/conversation';
+import type { DConversationItem, DMessageItem } from '../types/chat';
 
 type Params = {
   applicationType: string;
@@ -12,6 +13,29 @@ type Params = {
   enabled?: boolean;
 };
 
+function toConversationItem(raw: ConversationItem): DConversationItem {
+  let lastMessage: DMessageItem | undefined;
+  if (raw.latestMsg) {
+    try {
+      lastMessage = JSON.parse(raw.latestMsg) as DMessageItem;
+    } catch {
+      // leave undefined
+    }
+  }
+
+  let applicationType: string | undefined;
+  if (raw.ex) {
+    try {
+      applicationType = (JSON.parse(raw.ex) as { applicationType?: string })
+        .applicationType;
+    } catch {
+      // leave undefined
+    }
+  }
+
+  return { ...(raw as DConversationItem), lastMessage, applicationType };
+}
+
 export function useConversationList({
   applicationType,
   page = 1,
@@ -26,21 +50,15 @@ export function useConversationList({
     enabled: enabled !== false,
     queryFn: async () => {
       const offset = (page - 1) * 20;
-      const [{ data: droppiiList }, openimList] = await Promise.all([
-        ChatAPI.queryConversations({ applicationType, page, pageSize: 20 }),
-        OpenIMSDK.getConversationListSplit({ offset, count: 20 }),
-      ]);
-      const openimMap = new Map(openimList.map((c) => [c.conversationID, c]));
-
-      const merged = droppiiList.map((conv) => {
-        const openimConv = openimMap.get(conv.conversationId);
-        return openimConv
-          ? mergeOpenIMIntoConversation(conv, openimConv)
-          : conv;
+      const rawList = await OpenIMSDK.getConversationListSplitApp({
+        offset,
+        count: 20,
+        applicationType,
       });
 
-      useConversationStore.getState().updateConversations(merged);
-      return merged;
+      const conversations = rawList.map(toConversationItem);
+      useConversationStore.getState().updateConversations(conversations);
+      return conversations;
     },
   });
 

package/src/hooks/useLinkPreview/useLinkPreview.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useFetchUrlMetadata } from './useFetchUrlMetadata';
-import { extractFirstUrl } from '../../utils/url';
+import { extractUrls } from '../../utils/url';
 
 export function useLinkPreview(value: string | undefined) {
   const [detectedUrl, setDetectedUrl] = useState<string | undefined>(undefined);
@@ -10,7 +10,8 @@ export function useLinkPreview(value: string | undefined) {
   useEffect(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
-      const url = value ? extractFirstUrl(value) : undefined;
+      const urls = value ? extractUrls(value) : [];
+      const url = urls.length === 1 ? urls[0] : undefined;
       setDetectedUrl(url);
       if (url) setIsDismissed(false);
     }, 500);

package/src/screens/chat-detail/ChatComposer.tsx

@@ -181,8 +181,8 @@ export const ChatComposer = memo(
     });
 
     const handleSend = useCallback(() => {
-      onSend?.();
-    }, [onSend]);
+      onSend?.(showLinkPreview ? urlMetadata : undefined);
+    }, [onSend, urlMetadata, showLinkPreview]);
 
     const handleToggleAttachment = useCallback(() => {
       if (!hasAttachmentActions) {

package/src/screens/chat-detail/ChatDetail.tsx

@@ -22,6 +22,8 @@ import {
 } from './conversationHeader.utils';
 import { getFeatureFlag, onFlagsChange } from '../../config/feature-flags';
 import type { ChatDetailProps } from './types';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
+import type { IUrlMetadata } from '../../types/common';
 
 const ChatDetail = memo(
   ({
@@ -31,8 +33,7 @@ const ChatDetail = memo(
     subtitle,
     avatarUri,
     avatarFullName,
-    chatType,
-    chatCategory,
+    peerType,
     applicationType,
     showAddMember,
     getSubtitle,
@@ -62,11 +63,12 @@ const ChatDetail = memo(
     const [internalInput, setInternalInput] = useState('');
     const conversation = useConversation(conversationId);
 
+    const { sendMessage } = useSendMessage();
+
     const {
       messages,
       currentUserId,
       onLoadEarlier,
-      sendTextMessage,
       isLoading,
       isLoadingEarlier,
       hasMoreEarlier,
@@ -83,8 +85,7 @@ const ChatDetail = memo(
     const resolvedAvatarUri =
       avatarUri ?? getConversationAvatarUri(conversation);
     const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
-    const resolvedChatType = chatType ?? conversation?.chatType;
-    const resolvedChatCategory = chatCategory ?? conversation?.chatCategory;
+    const resolvedPeerType = peerType ?? conversation?.peerType;
     const resolvedApplicationType =
       applicationType ?? conversation?.applicationType;
     const resolvedShowAddMember =
@@ -151,24 +152,31 @@ const ChatDetail = memo(
 
     const currentInput = inputValue ?? internalInput;
 
-    const handleSend = useCallback(async () => {
-      const text = currentInput.trim();
-      if (!text) {
-        return;
-      }
+    const handleSend = useCallback(
+      async (urlMetadata?: IUrlMetadata) => {
+        const text = currentInput.trim();
+        if (!text) {
+          return;
+        }
 
-      try {
-        await sendTextMessage(text);
+        try {
+          await sendMessage({
+            files: [],
+            plainText: text,
+            urlMetadata,
+          });
 
-        if (onChangeInput) {
-          onChangeInput('');
-        } else {
-          setInternalInput('');
+          if (onChangeInput) {
+            onChangeInput('');
+          } else {
+            setInternalInput('');
+          }
+        } catch (error) {
+          console.error('[send-message]', error);
         }
-      } catch (error) {
-        console.error('[send-message]', error);
-      }
-    }, [currentInput, onChangeInput, sendTextMessage]);
+      },
+      [currentInput, onChangeInput, sendMessage]
+    );
 
     const insets = useSafeAreaInsets();
 
@@ -179,8 +187,7 @@ const ChatDetail = memo(
           subtitle={resolvedSubtitle}
           avatarUri={resolvedAvatarUri}
           avatarFullName={resolvedAvatarFullName}
-          chatType={resolvedChatType}
-          chatCategory={resolvedChatCategory}
+          peerType={resolvedPeerType}
           applicationType={resolvedApplicationType}
           showAddMember={resolvedShowAddMember}
           onBack={onBack}

package/src/screens/chat-detail/ChatDetailHeader.tsx

@@ -16,8 +16,7 @@ const ChatDetailHeader = memo(
     subtitle,
     avatarUri,
     avatarFullName,
-    chatType,
-    chatCategory,
+    peerType,
     applicationType,
     showAddMember = false,
     onBack,
@@ -81,17 +80,13 @@ const ChatDetailHeader = memo(
             <AvatarSection
               avatar={avatarUri ?? null}
               fullName={avatarFullName ?? title}
-              chatCategory={chatCategory}
+              peerType={peerType}
               applicationType={applicationType}
-              chatType={chatType}
             />
 
             <KContainer.View flex marginL="0.5rem">
               <KContainer.View row alignItems>
-                <NamePrefixIcon
-                  chatCategory={chatCategory}
-                  chatType={chatType}
-                />
+                <NamePrefixIcon peerType={peerType} />
                 <KLabel.Text
                   typo="TextLgBold"
                   color={KColors.gray.dark}
@@ -117,9 +112,8 @@ const ChatDetailHeader = memo(
       [
         avatarFullName,
         avatarUri,
-        chatCategory,
+        peerType,
         applicationType,
-        chatType,
         onBack,
         onPressAvatar,
         subtitle,

package/src/screens/chat-detail/ChatLinkPreview.tsx

@@ -47,7 +47,7 @@ export const ChatLinkPreview = memo(
           </KLabel.Text>
         </KContainer.View>
         <KContainer.Touchable onPress={onDismiss} style={styles.right}>
-          <KImage.VectorIcons name="close" size={16} />
+          <KImage.VectorIcons name="close-o" size={16} />
         </KContainer.Touchable>
       </KContainer.View>
     );

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -97,7 +97,7 @@ export const ChatListLegend = memo(
             return null; // Shouldn't happen if logic is consistent
           }
 
-          const { dayStart, messageType, createdAt } = messageData;
+          const { dayStart, createdAt } = messageData;
 
           return (
             <>
@@ -116,7 +116,6 @@ export const ChatListLegend = memo(
                 ) : (
                   <LegendChatMessage
                     message={message}
-                    messageType={messageType}
                     isOutgoing={isOutgoing}
                     createdAtTime={createdAt}
                   />

package/src/screens/chat-detail/conversationHeader.utils.ts

@@ -1,5 +1,5 @@
-import { DChatType } from '../../types/chat';
-import type { DConversationItem } from '../../types/chat';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { type DConversationItem } from '../../types/chat';
 
 export const getConversationTitle = (
   conversation?: DConversationItem
@@ -8,18 +8,13 @@ export const getConversationTitle = (
     return 'Tin nhắn';
   }
 
-  return (
-    conversation.peer?.fullName ??
-    conversation.peer?.username ??
-    conversation.showName ??
-    'Tin nhắn'
-  );
+  return conversation.showName ?? 'Tin nhắn';
 };
 
 export const getConversationAvatarUri = (
   conversation?: DConversationItem
 ): string | null => {
-  return conversation?.peer?.avatar ?? conversation?.faceURL ?? null;
+  return conversation?.faceURL ?? null;
 };
 
 export const getConversationSubtitle = (
@@ -29,24 +24,26 @@ export const getConversationSubtitle = (
     return undefined;
   }
 
-  if (conversation?.chatType === DChatType.GROUP) {
+  if (conversation.peerType === PeerType.Group) {
     const unreadLabel =
-      (conversation?.unreadCount ?? 0) > 0
+      (conversation.unreadCount ?? 0) > 0
         ? `${conversation.unreadCount} tin nhắn mới`
         : 'Không có tin mới';
     return `20 thành viên • ${unreadLabel}`;
   }
 
-  if (conversation?.applicationType === 'MALL') {
+  if (
+    conversation.peerType === PeerType.Customer ||
+    conversation.applicationType === 'MALL'
+  ) {
     return '338,5K Đã bán • 4,2K Theo dõi';
   }
 
-  // const lastMessageText = getLastMessageText(conversation.lastMessage);
   return 'Nhấn để xem thông tin';
 };
 
 export const shouldShowAddMember = (
   conversation?: DConversationItem
 ): boolean => {
-  return conversation?.chatType === DChatType.GROUP;
+  return conversation?.peerType === PeerType.Group;
 };

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -1,32 +1,29 @@
-import { memo, ComponentType } from 'react';
+import { memo } from 'react';
+import type { ComponentType } from 'react';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../../../types/chat';
-import type { DChatMessageType } from '../../../types/message';
 import {
   LegendTextMessage,
   LegendImageMessage,
   LegendVideoMessage,
   LegendFileMessage,
+  LegendLinkMessage,
 } from './message-types';
-import { DChatMessageType as MessageTypeEnum } from '../../../types/message';
 
 interface LegendChatMessageProps {
   message: DMessageItem;
-  messageType: DChatMessageType;
   isOutgoing: boolean;
   createdAtTime: number;
 }
 
-// Message type to component mapping
-const messageComponentMap: Partial<
-  Record<DChatMessageType, ComponentType<any>>
-> = {
-  [MessageTypeEnum.Text]: LegendTextMessage,
-  [MessageTypeEnum.Image]: LegendImageMessage,
-  [MessageTypeEnum.Video]: LegendVideoMessage,
-  [MessageTypeEnum.File]: LegendFileMessage,
-  [MessageTypeEnum.Link]: LegendTextMessage, // Link renders as text for now
-  [MessageTypeEnum.Order]: LegendTextMessage, // Order renders as text for now
-  [MessageTypeEnum.Unsupported]: LegendTextMessage, // Unsupported renders as text for now
+const messageComponentMap: Partial<Record<MessageType, ComponentType<any>>> = {
+  [MessageType.TextMessage]: LegendTextMessage,
+  [MessageType.AtTextMessage]: LegendTextMessage,
+  [MessageType.QuoteMessage]: LegendTextMessage,
+  [MessageType.UrlTextMessage]: LegendLinkMessage,
+  [MessageType.PictureMessage]: LegendImageMessage,
+  [MessageType.VideoMessage]: LegendVideoMessage,
+  [MessageType.FileMessage]: LegendFileMessage,
 };
 
 /**
@@ -34,24 +31,9 @@ const messageComponentMap: Partial<
  * based on message type. Extensible for new message types.
  */
 export const LegendChatMessage = memo(
-  ({
-    message,
-    messageType,
-    isOutgoing,
-    createdAtTime,
-  }: LegendChatMessageProps) => {
-    const MessageComponent = messageComponentMap[messageType];
-
-    // Fallback to text message if type not found
-    if (!MessageComponent) {
-      return (
-        <LegendTextMessage
-          message={message}
-          isOutgoing={isOutgoing}
-          createdAtTime={createdAtTime}
-        />
-      );
-    }
+  ({ message, isOutgoing, createdAtTime }: LegendChatMessageProps) => {
+    const MessageComponent =
+      messageComponentMap[message?.contentType] ?? LegendTextMessage;
 
     return (
       <MessageComponent

package/src/screens/chat-detail/legend/message-types.tsx

@@ -1,7 +1,14 @@
 import { memo } from 'react';
-import { StyleSheet } from 'react-native';
-import { KContainer, KLabel, KSpacingValue } from '@droppii/libs';
-import type { DMessageItem } from '../../../types/chat';
+import { Linking, StyleSheet, Text } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import type { DMessageItem, IMessageItemEx } from '../../../types/chat';
+import type { IUrlMetadata } from '../../../types/common';
 import { getMessageText } from '../../../utils/legendListMessage';
 import { CHAT_BUBBLE_COLORS } from '../constants';
 
@@ -13,10 +20,7 @@ interface BaseLegendMessageProps {
 
 const formatMessageTime = (createdAt: number) => {
   const date = new Date(createdAt);
-  if (Number.isNaN(date.getTime())) {
-    return '';
-  }
-
+  if (Number.isNaN(date.getTime())) return '';
   return date.toLocaleTimeString('vi-VN', {
     hour: '2-digit',
     minute: '2-digit',
@@ -51,7 +55,7 @@ export const LegendTextMessage = memo(
           <KLabel.Text
             typo="TextXsNormal"
             color={CHAT_BUBBLE_COLORS.timestamp}
-            marginL={'0.25rem'}
+            marginL="0.25rem"
           >
             {timeLabel}
           </KLabel.Text>
@@ -60,7 +64,6 @@ export const LegendTextMessage = memo(
     );
   }
 );
-
 LegendTextMessage.displayName = 'LegendTextMessage';
 
 // Image Message Component (placeholder)
@@ -82,7 +85,6 @@ export const LegendImageMessage = memo(
     );
   }
 );
-
 LegendImageMessage.displayName = 'LegendImageMessage';
 
 // Video Message Component (placeholder)
@@ -104,7 +106,6 @@ export const LegendVideoMessage = memo(
     );
   }
 );
-
 LegendVideoMessage.displayName = 'LegendVideoMessage';
 
 // File Message Component
@@ -128,9 +129,140 @@ export const LegendFileMessage = memo(
     );
   }
 );
-
 LegendFileMessage.displayName = 'LegendFileMessage';
 
+// Link Message Component
+const parseUrlMetadata = (ex?: string): IUrlMetadata | undefined => {
+  if (!ex) return undefined;
+  try {
+    return (JSON.parse(ex) as IMessageItemEx).urlMetadata;
+  } catch {
+    return undefined;
+  }
+};
+
+const renderTextWithLinks = (content: string, urls: string[]) => {
+  if (!urls.length) {
+    return (
+      <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+        {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" color={CHAT_BUBBLE_COLORS.text}>
+      {parts.map((part, i) =>
+        part.isUrl ? (
+          <Text
+            key={i}
+            style={styles.urlText}
+            onPress={() => Linking.openURL(part.text)}
+          >
+            {part.text}
+          </Text>
+        ) : (
+          <Text key={i}>{part.text}</Text>
+        )
+      )}
+    </KLabel.Text>
+  );
+};
+
+export const LegendLinkMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: BaseLegendMessageProps) => {
+    const content = message?.urlTextElem?.content;
+    const urls = message?.urlTextElem?.urls ?? [];
+    const metadata = parseUrlMetadata(message.ex);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          {!!content?.trim() && (
+            <KContainer.View style={styles.textRow}>
+              {renderTextWithLinks(content, urls)}
+            </KContainer.View>
+          )}
+
+          {metadata && (
+            <KContainer.Touchable
+              style={styles.card}
+              onPress={() => metadata.url && Linking.openURL(metadata.url)}
+            >
+              {!!metadata.image && (
+                <KImage.Base
+                  uri={metadata.image}
+                  style={styles.cardThumb}
+                  resizeMode="cover"
+                />
+              )}
+              <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>
+          )}
+        </KContainer.View>
+
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL="0.25rem"
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+LegendLinkMessage.displayName = 'LegendLinkMessage';
+
 const styles = StyleSheet.create({
   wrapper: {
     maxWidth: '80%',
@@ -146,4 +278,27 @@ const styles = StyleSheet.create({
   bubbleSent: {
     backgroundColor: CHAT_BUBBLE_COLORS.sent,
   },
+  textRow: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+  },
+  urlText: {
+    color: KColors.palette.primary.w400,
+    fontWeight: '500',
+  },
+  card: {
+    borderRadius: KSpacingValue['0.75rem'],
+    borderWidth: 1,
+    borderColor: 'rgba(57,62,64,0.1)',
+    backgroundColor: KColors.white,
+    overflow: 'hidden',
+  },
+  cardThumb: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+  },
+  cardBody: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: 2,
+  },
 });

package/src/screens/chat-detail/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-import type { DChatType, DChatCategory } from '../../types/chat';
 import type { DConversationItem, DMessageItem } from '../../types/chat';
+import type { IUrlMetadata } from '../../types/common';
+import type { PeerType } from '@droppii/openim-rn-client-sdk';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -22,8 +23,7 @@ export interface ChatDetailHeaderProps {
   subtitle?: string;
   avatarUri?: string | null;
   avatarFullName?: string;
-  chatType?: DChatType;
-  chatCategory?: DChatCategory;
+  peerType?: PeerType;
   applicationType?: DConversationItem['applicationType'];
   showAddMember?: boolean;
   onBack?: () => void;
@@ -60,7 +60,7 @@ export interface ChatComposerProps {
   value?: string;
   placeholder?: string;
   onChangeText?: (text: string) => void;
-  onSend?: () => void;
+  onSend?: (urlMetadata?: IUrlMetadata) => void;
   onPressAttach?: () => void;
   onPressEmoji?: () => void;
   showQuickActions?: boolean;
@@ -93,8 +93,7 @@ export interface ChatDetailProps extends Omit<
   | 'subtitle'
   | 'avatarUri'
   | 'avatarFullName'
-  | 'chatType'
-  | 'chatCategory'
+  | 'peerType'
   | 'applicationType'
   | 'showAddMember'
 > {
@@ -104,8 +103,7 @@ export interface ChatDetailProps extends Omit<
   subtitle?: string;
   avatarUri?: string | null;
   avatarFullName?: string;
-  chatType?: DChatType;
-  chatCategory?: DChatCategory;
+  peerType?: PeerType;
   applicationType?: DConversationItem['applicationType'];
   showAddMember?: boolean;
   getSubtitle?: (conversation: DConversationItem) => string | undefined;