@droppii-org/chat-mobile 0.2.6 → 0.2.7

package/src/components/ThreadCard/NamePrefixIcon.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { KContainer, KImage, KColors } from '@droppii/libs';
-import { DChatCategory, DChatType } from '../../types/chat';
 import Images from '../../assets/images';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
 
 const styles = StyleSheet.create({
   icon: {
@@ -12,46 +12,35 @@ const styles = StyleSheet.create({
 });
 
 interface NamePrefixIconProps {
-  chatCategory?: DChatCategory;
-  chatType?: DChatType;
+  peerType?: PeerType | string;
 }
 
-export const NamePrefixIcon = memo(
-  ({ chatCategory, chatType }: NamePrefixIconProps) => {
-    if (chatCategory === DChatCategory.BIZ_BOT_CRM) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <Image source={Images.ICON_DROPPII} style={styles.icon} />
-        </KContainer.View>
-      );
-    }
-    if (chatCategory === DChatCategory.BIZ_BOT_PDP) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <KImage.VectorIcons
-            name="robot-outline"
-            provider="MaterialCommunityIcons"
-            size={14}
-            color={KColors.palette.primary.w400}
-          />
-        </KContainer.View>
-      );
-    }
-
-    if (chatType === DChatType.GROUP) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <KImage.VectorIcons
-            name="user-two-b"
-            size={14}
-            color={KColors.black}
-          />
-        </KContainer.View>
-      );
-    }
+export const NamePrefixIcon = memo(({ peerType }: NamePrefixIconProps) => {
+  if (peerType === PeerType.Bot) {
+    return (
+      <KContainer.View marginR="0.25rem">
+        <Image source={Images.ICON_DROPPII} style={styles.icon} />
+      </KContainer.View>
+    );
+  }
 
-    return null;
+  if (peerType === PeerType.Group) {
+    return (
+      <KContainer.View marginR="0.25rem">
+        <KImage.VectorIcons name="user-two-b" size={14} color={KColors.black} />
+      </KContainer.View>
+    );
   }
-);
+
+  // if (peerType === DChatPeerType.CUSTOMER) {
+  //   return (
+  //     <KContainer.View marginR="0.25rem">
+  //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
+  //     </KContainer.View>
+  //   );
+  // }
+
+  return null;
+});
 
 NamePrefixIcon.displayName = 'NamePrefixIcon';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -1,12 +1,10 @@
 import { memo, useCallback } from 'react';
-import { StyleSheet, type GestureResponderEvent } from 'react-native';
+import { type GestureResponderEvent } from 'react-native';
 import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
-import { DChatCategory } from '../../types/chat';
 import { AvatarSection } from './AvatarSection';
 import { NamePrefixIcon } from './NamePrefixIcon';
 import { UnreadBadge } from './UnreadBadge';
 import { formatTimestamp, getLastMessageText } from './thread-card.utils';
-import Images from '../../assets/images';
 import { useConversation, useUserStore } from '../../store';
 
 interface ThreadCardProps {
@@ -16,19 +14,20 @@ interface ThreadCardProps {
 
 const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
   const {
-    peer,
-    chatCategory,
+    peerType,
+    showName,
+    faceURL,
     lastMessage,
     unreadCount = 0,
-    isMuted,
-    pinnedAt,
+    recvMsgOpt,
+    isPinned,
     applicationType,
-    chatType,
     latestMsgSendTime,
   } = useConversation(item) ?? {};
 
-  const fullName = peer?.fullName ?? peer?.username ?? '';
+  const fullName = showName ?? '';
   const hasUnread = unreadCount > 0;
+  const isMuted = (recvMsgOpt ?? 0) !== 0;
   const timestamp = formatTimestamp(
     latestMsgSendTime ?? lastMessage?.sendTime ?? null
   );
@@ -52,30 +51,25 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
       activeOpacity={0.7}
     >
       <AvatarSection
-        avatar={peer?.avatar ?? null}
+        avatar={faceURL ?? null}
         fullName={fullName}
-        chatCategory={chatCategory}
+        peerType={peerType}
         applicationType={applicationType}
-        chatType={chatType}
       />
 
       {/* Chat-Content */}
       <KContainer.View flex marginL="0.5rem" paddingB={2}>
         {/* Row-Title */}
         <KContainer.View row alignItems="center">
-          <NamePrefixIcon chatCategory={chatCategory} chatType={chatType} />
-          <KContainer.VisibleView
-            visible={
-              // chatCategory === DChatCategory.BIZ_BOT_CRM ||
-              chatCategory === DChatCategory.BIZ_BOT_PDP
-            }
-          >
+          <NamePrefixIcon peerType={peerType} />
+          {/* For verified PDP (configuration details to be defined later) */}
+          {/* <KContainer.VisibleView visible={peerType === DChatPeerType.BOT}>
             <KImage.Base
               uri={Images.ICON_BOT}
               size={14}
               style={styles.botIcon}
             />
-          </KContainer.VisibleView>
+          </KContainer.VisibleView> */}
           <KLabel.Text
             typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
             numberOfLines={1}
@@ -84,7 +78,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           >
             {fullName}
           </KLabel.Text>
-          <KContainer.VisibleView visible={!!isMuted}>
+          <KContainer.VisibleView visible={isMuted}>
             <KContainer.View marginL="0.25rem">
               <KImage.VectorIcons
                 name="bell-off"
@@ -115,7 +109,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           >
             {lastMessageText}
           </KLabel.Text>
-          <KContainer.VisibleView visible={Boolean(pinnedAt)}>
+          <KContainer.VisibleView visible={Boolean(isPinned)}>
             <KContainer.View marginL="0.5rem">
               <KImage.VectorIcons
                 name="pin-outline"
@@ -135,11 +129,3 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
 ThreadCard.displayName = 'ThreadCard';
 
 export default ThreadCard;
-
-const styles = StyleSheet.create({
-  botIcon: {
-    width: 16,
-    height: 16,
-    marginRight: 4,
-  },
-});

package/src/context/ChatContext.tsx

@@ -13,11 +13,19 @@ export const useChatContext = (): ChatContextType => {
   return context;
 };
 
-const ChatProviderInner = ({ logGA, children }: ChatProviderProps) => {
-  const value = useMemo(() => ({ logGA }), [logGA]);
+const ChatProviderInner = ({
+  logGA,
+  children,
+  applicationType,
+}: ChatProviderProps) => {
+  const value = useMemo(
+    () => ({ logGA, applicationType }),
+    [logGA, applicationType]
+  );
 
   return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;
 };
 
-export const ChatProvider = ({ enabled, ...props }: ChatProviderProps) =>
-  enabled ? <ChatProviderInner {...props} /> : props.children;
+export const ChatProvider = ({ ...props }: ChatProviderProps) => (
+  <ChatProviderInner {...props} />
+);

package/src/hooks/message/useSendMessage.ts

@@ -0,0 +1,136 @@
+import { useCallback } from 'react';
+import type { UploadFileItem } from 'react-native-fs';
+import { useConversationStore } from '../../store';
+import type {
+  MessageItem,
+  MessageType,
+  OfflinePush,
+} from '@droppii/openim-rn-client-sdk';
+import { extractUrls } from '../../utils/url';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import type { IMessageItemEx } from '../../types/chat';
+import { useChatContext } from '../../context';
+import { generateContentBasedOnMessageType } from '../../utils/conversation';
+import { useMessageStore } from '../../store/message';
+import type { IUrlMetadata } from '../../types/common';
+
+export const useSendMessage = () => {
+  const applicationType = useChatContext().applicationType;
+  const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
+
+  const sendMessage = useCallback(
+    async ({
+      plainText,
+      files,
+      urlMetadata,
+    }: {
+      plainText?: string;
+      files?: UploadFileItem[]; //TODO
+      urlMetadata?: IUrlMetadata;
+    }) => {
+      const { userID: recvID, groupID } =
+        useConversationStore.getState().getCurrentConversation() || {};
+      if (!recvID && !groupID) return;
+
+      const messageList: MessageItem[] = [];
+
+      for (const file of files || []) {
+        if (!file) continue;
+      }
+
+      if (!!plainText && plainText.trim() !== '') {
+        const urls = extractUrls(plainText);
+        const isUrlMessage = urls.length > 0;
+        let message: MessageItem | null = null;
+        if (isUrlMessage) {
+          message = await createUrlTextMessage(plainText, urls);
+        } else {
+          message = await createTextMessage(plainText);
+        }
+        if (!message) return;
+        messageList.push(message);
+      }
+
+      for (const message of messageList) {
+        const extendMessageInfo: IMessageItemEx = {
+          applicationType,
+          urlMetadata,
+        };
+
+        const successMessage = await OpenIMSDK.sendMessage({
+          groupID: groupID || '',
+          recvID: recvID || '',
+          message: {
+            ...message,
+            ex: JSON.stringify(extendMessageInfo) || '{}',
+          },
+          offlinePushInfo: generateOfflinePushInfo(
+            message.contentType,
+            plainText || ''
+          ),
+        });
+
+        pushNewMessage(successMessage);
+      }
+    },
+    [applicationType, pushNewMessage]
+  );
+
+  return {
+    sendMessage,
+  };
+};
+
+const generateOfflinePushInfo = (
+  contentType: MessageType,
+  plainText: string
+) => {
+  const conversationData = useConversationStore
+    ?.getState?.()
+    ?.getCurrentConversation();
+  const title = conversationData?.showName || 'Droppii';
+  const desc = generateContentBasedOnMessageType(contentType, plainText);
+  return {
+    title,
+    desc,
+    ex: JSON.stringify({
+      icon: conversationData?.faceURL || '',
+      conversationId: conversationData?.conversationId || '',
+      title,
+      desc,
+    }),
+    iOSPushSound: 'default',
+    iOSBadgeCount: true,
+  } as OfflinePush;
+};
+
+export const createTextMessage = async (text: string) => {
+  let textMessage = await OpenIMSDK.createTextMessage(
+    text,
+    new Date().getTime().toString()
+  )
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createTextMessage', errCode, errMsg);
+      return null;
+    });
+  return textMessage;
+};
+
+export const createUrlTextMessage = async (text: string, urls: string[]) => {
+  let urlTextMessage = await OpenIMSDK.createUrlTextMessage(
+    text,
+    urls,
+    new Date().getTime().toString()
+  )
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createUrlTextMessage', errCode, errMsg);
+      return null;
+    });
+  return urlTextMessage;
+};

package/src/hooks/useChatMessages.ts

@@ -7,11 +7,10 @@ import { ChatMessageAPI } from '../services/message';
 import type { DMessageItem } from '../types/chat';
 import {
   belongsToConversation,
-  getHistoryPaginationAnchor,
   hasNewHistoryMessages,
   mergeMessages,
-  type HistoryPaginationAnchor,
 } from '../utils/message';
+import { useMessageStore } from '../store/message';
 
 type UseChatMessagesOptions = {
   conversationId: string;
@@ -24,44 +23,24 @@ export function useChatMessages({
   enabled = true,
   pageSize = 20,
 }: UseChatMessagesOptions) {
-  const [messages, setMessages] = useState<DMessageItem[]>([]);
+  const messages = useMessageStore((s) => s.messages);
+  const hasMoreEarlier = useMessageStore((s) => s.hasMoreEarlier);
+  const hasMoreNewer = useMessageStore((s) => s.hasMoreNewer);
+  const setMessages = useMessageStore((s) => s.setMessages);
+  const pushNewMessage = useMessageStore((s) => s.pushNewMessage);
+  const reset = useMessageStore((s) => s.reset);
+
   const [currentUserId, setCurrentUserId] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
-  const [hasMoreEarlier, setHasMoreEarlier] = useState(false);
   const [isLoadingNewer, setIsLoadingNewer] = useState(false);
-  const [hasMoreNewer, setHasMoreNewer] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
   const conversationIdRef = useRef(conversationId);
   conversationIdRef.current = conversationId;
 
-  const isLoadingEarlierRef = useRef(false);
-  const isLoadingNewerRef = useRef(false);
-  const messagesRef = useRef(messages);
-  const hasMoreEarlierRef = useRef(hasMoreEarlier);
-  const hasMoreNewerRef = useRef(hasMoreNewer);
-  const historyAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
-  const newestAnchorRef = useRef<HistoryPaginationAnchor | null>(null);
-  messagesRef.current = messages;
-  hasMoreEarlierRef.current = hasMoreEarlier;
-  hasMoreNewerRef.current = hasMoreNewer;
-
-  const resetState = useCallback(() => {
-    setMessages([]);
-    setHasMoreEarlier(false);
-    setHasMoreNewer(false);
-    setError(null);
-    isLoadingEarlierRef.current = false;
-    isLoadingNewerRef.current = false;
-    historyAnchorRef.current = null;
-    newestAnchorRef.current = null;
-  }, []);
-
-  const loadInitialMessages = useCallback(async () => {
-    if (!conversationId) {
-      return;
-    }
+  const fetchInitial = useCallback(async () => {
+    if (!conversationId) return;
 
     setIsLoading(true);
     setError(null);
@@ -75,22 +54,9 @@ export function useChatMessages({
       ]);
 
       const initialMessages = history.messageList as DMessageItem[];
-      const oldestAnchor = getHistoryPaginationAnchor(initialMessages);
 
       setCurrentUserId(userId);
-      setMessages(mergeMessages([], initialMessages));
-      historyAnchorRef.current = oldestAnchor
-        ? {
-            clientMsgID: oldestAnchor.clientMsgID,
-            // lastMinSeq: resolveHistoryLastMinSeq(
-            //   history,
-            //   initialMessages.find(
-            //     (message) => message.clientMsgID === oldestAnchor.clientMsgID
-            //   )
-            // ),
-          }
-        : null;
-      setHasMoreEarlier(!history.isEnd && !!oldestAnchor);
+      setMessages(mergeMessages([], initialMessages), !history.isEnd);
 
       ChatMessageAPI.markConversationAsRead(conversationId).catch(
         () => undefined
@@ -100,170 +66,117 @@ export function useChatMessages({
     } finally {
       setIsLoading(false);
     }
-  }, [conversationId, pageSize]);
+  }, [conversationId, pageSize, setMessages]);
 
   const onLoadEarlier = useCallback(async () => {
-    if (
-      !conversationId ||
-      isLoadingEarlierRef.current ||
-      !hasMoreEarlierRef.current ||
-      !messagesRef.current.length
-    ) {
-      return;
-    }
+    if (isLoadingEarlier || !hasMoreEarlier || !messages.length) return;
 
-    isLoadingEarlierRef.current = true;
     setIsLoadingEarlier(true);
     setError(null);
 
-    const anchor = historyAnchorRef.current;
-    if (!anchor?.clientMsgID) {
-      isLoadingEarlierRef.current = false;
-      setIsLoadingEarlier(false);
-      return;
-    }
-
     try {
       const history = await ChatMessageAPI.fetchHistoryMessages(
         conversationId,
         {
           count: pageSize,
-          startClientMsgID: anchor.clientMsgID,
+          startClientMsgID: messages[0]!.clientMsgID,
         }
       );
-      const incoming = history.messageList as DMessageItem[];
-      const hasNewMessages = hasNewHistoryMessages(
-        messagesRef.current,
-        incoming
-      );
 
-      if (hasNewMessages) {
-        setMessages((current) => mergeMessages(current, incoming));
+      const incoming = history.messageList as DMessageItem[];
+      const hasNew = hasNewHistoryMessages(messages, incoming);
+
+      if (hasNew) {
+        setMessages(
+          mergeMessages(messages, incoming),
+          !history.isEnd && hasNew
+        );
+      } else {
+        setMessages(messages, false);
       }
-
-      const nextAnchor = getHistoryPaginationAnchor(incoming);
-      historyAnchorRef.current = nextAnchor
-        ? {
-            clientMsgID: nextAnchor.clientMsgID,
-            // lastMinSeq: resolveHistoryLastMinSeq(
-            //   history,
-            //   incoming.find(
-            //     (message) => message.clientMsgID === nextAnchor.clientMsgID
-            //   )
-            // ),
-          }
-        : null;
-
-      setHasMoreEarlier(!history.isEnd && hasNewMessages && !!nextAnchor);
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
-      isLoadingEarlierRef.current = false;
       setIsLoadingEarlier(false);
     }
-  }, [conversationId, pageSize]);
+  }, [
+    conversationId,
+    hasMoreEarlier,
+    isLoadingEarlier,
+    messages,
+    pageSize,
+    setMessages,
+  ]);
 
   const onLoadNewer = useCallback(async () => {
-    if (
-      !conversationId ||
-      isLoadingNewerRef.current ||
-      !hasMoreNewerRef.current ||
-      !messagesRef.current.length
-    ) {
-      return;
-    }
+    if (isLoadingNewer || !hasMoreNewer || !messages.length) return;
 
-    isLoadingNewerRef.current = true;
     setIsLoadingNewer(true);
     setError(null);
 
-    const anchor = newestAnchorRef.current;
-    if (!anchor?.clientMsgID && messagesRef.current.length === 0) {
-      isLoadingNewerRef.current = false;
-      setIsLoadingNewer(false);
-      return;
-    }
-
     try {
-      // Get the newest message ID to load from
-      const newestMessage = messagesRef.current[messagesRef.current.length - 1];
       const history = await ChatMessageAPI.fetchHistoryMessages(
         conversationId,
         {
           count: pageSize,
-          startClientMsgID: newestMessage?.clientMsgID,
+          startClientMsgID: messages[messages.length - 1]!.clientMsgID,
         }
       );
 
       const incoming = history.messageList as DMessageItem[];
-      const hasNewMessages = incoming.length > 0;
+      const hasNew = incoming.length > 0;
 
-      if (hasNewMessages) {
-        setMessages((current) => mergeMessages(current, incoming));
+      if (hasNew) {
+        setMessages(
+          mergeMessages(messages, incoming),
+          !history.isEnd && hasNew
+        );
       }
-
-      setHasMoreNewer(!history.isEnd && hasNewMessages);
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
-      isLoadingNewerRef.current = false;
       setIsLoadingNewer(false);
     }
-  }, [conversationId, pageSize]);
-
-  const sendTextMessage = useCallback(async (text: string) => {
-    const trimmed = text.trim();
-    if (!trimmed) {
-      return;
-    }
-
-    const sentMessage = await ChatMessageAPI.sendTextMessage({
-      text: trimmed,
-    });
-
-    setMessages((current) => mergeMessages(current, [sentMessage]));
-  }, []);
-
-  const appendIncomingMessages = useCallback((incoming: MessageItem[]) => {
-    const relevant = incoming.filter((message) =>
-      belongsToConversation(message, conversationIdRef.current)
-    );
-
-    if (!relevant.length) {
-      return;
-    }
+  }, [
+    conversationId,
+    hasMoreNewer,
+    isLoadingNewer,
+    messages,
+    pageSize,
+    setMessages,
+  ]);
+
+  const appendIncomingMessages = useCallback(
+    (incoming: MessageItem[]) => {
+      const relevant = incoming.filter((message) =>
+        belongsToConversation(message, conversationIdRef.current)
+      );
 
-    setMessages((current) =>
-      mergeMessages(current, relevant as DMessageItem[])
-    );
+      if (!relevant.length) return;
 
-    ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
-      () => undefined
-    );
-  }, []);
+      relevant.forEach((msg) => pushNewMessage(msg));
+      ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
+        () => undefined
+      );
+    },
+    [pushNewMessage]
+  );
 
   useEffect(() => {
-    resetState();
+    reset();
 
-    if (!enabled || !conversationId) {
-      return;
-    }
+    if (!enabled || !conversationId) return;
 
-    loadInitialMessages();
-  }, [conversationId, enabled, loadInitialMessages, resetState]);
+    fetchInitial();
+  }, [conversationId, enabled, fetchInitial, reset]);
 
   useEffect(() => {
-    if (!enabled || !conversationId) {
-      return;
-    }
+    if (!enabled || !conversationId) return;
 
-    const handleNewMessages = (incoming: MessageItem[]) => {
+    const handleNewMessages = (incoming: MessageItem[]) =>
       appendIncomingMessages(incoming);
-    };
-
-    const handleNewMessage = (incoming: MessageItem) => {
+    const handleNewMessage = (incoming: MessageItem) =>
       appendIncomingMessages([incoming]);
-    };
 
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessage, handleNewMessage);
@@ -285,7 +198,6 @@ export function useChatMessages({
     error,
     onLoadEarlier,
     onLoadNewer,
-    sendTextMessage,
-    refresh: loadInitialMessages,
+    refresh: fetchInitial,
   };
 }