@droppii-org/chat-mobile 0.2.2 → 0.2.3

package/src/hooks/useChatMessages.ts

@@ -15,16 +15,12 @@ import {
 
 type UseChatMessagesOptions = {
   conversationId: string;
-  recvID?: string;
-  groupID?: string;
   enabled?: boolean;
   pageSize?: number;
 };
 
 export function useChatMessages({
   conversationId,
-  recvID = '',
-  groupID = '',
   enabled = true,
   pageSize = 20,
 }: UseChatMessagesOptions) {
@@ -158,44 +154,36 @@ export function useChatMessages({
     }
   }, [conversationId, pageSize]);
 
-  const sendTextMessage = useCallback(
-    async (text: string) => {
-      const trimmed = text.trim();
-      if (!trimmed) {
-        return;
-      }
+  const sendTextMessage = useCallback(async (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed) {
+      return;
+    }
 
-      const sentMessage = await ChatMessageAPI.sendTextMessage({
-        text: trimmed,
-        recvID,
-        groupID,
-      });
-
-      setMessages((current) => mergeMessages(current, [sentMessage]));
-    },
-    [groupID, recvID]
-  );
-
-  const appendIncomingMessages = useCallback(
-    (incoming: MessageItem[]) => {
-      const relevant = incoming.filter((message) =>
-        belongsToConversation(message, conversationIdRef.current, groupID)
-      );
+    const sentMessage = await ChatMessageAPI.sendTextMessage({
+      text: trimmed,
+    });
 
-      if (!relevant.length) {
-        return;
-      }
+    setMessages((current) => mergeMessages(current, [sentMessage]));
+  }, []);
 
-      setMessages((current) =>
-        mergeMessages(current, relevant as DMessageItem[])
-      );
+  const appendIncomingMessages = useCallback((incoming: MessageItem[]) => {
+    const relevant = incoming.filter((message) =>
+      belongsToConversation(message, conversationIdRef.current)
+    );
 
-      ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
-        () => undefined
-      );
-    },
-    [groupID]
-  );
+    if (!relevant.length) {
+      return;
+    }
+
+    setMessages((current) =>
+      mergeMessages(current, relevant as DMessageItem[])
+    );
+
+    ChatMessageAPI.markConversationAsRead(conversationIdRef.current).catch(
+      () => undefined
+    );
+  }, []);
 
   useEffect(() => {
     resetState();

package/src/index.tsx

@@ -1,6 +1,7 @@
 export { ChatAPI } from './services';
 export * from './core';
 export * from './store';
+export * from './context';
 export * from './hooks/useConversationList';
 export * from './hooks/useChatMessages';
 export * from './types/chat';

package/src/screens/inbox/MessagesTab.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react';
-import { GestureResponderEvent } from 'react-native';
+import { GestureResponderEvent, ActivityIndicator } from 'react-native';
 import { KContainer, KDivider, KLabel, KColors } from '@droppii/libs';
 import { useConversationList } from '../../hooks/useConversationList';
 import { ThreadCard } from '../../components/ThreadCard';
@@ -36,6 +36,12 @@ export const MessagesTab = memo(
       [handleThreadPress]
     );
 
+    const LoadingComponent = (
+      <KContainer.View center flex paddingV="3rem">
+        <ActivityIndicator size="large" color={KColors.palette.primary.w400} />
+      </KContainer.View>
+    );
+
     const EmptyComponent = isLoading ? null : (
       <KContainer.View center flex paddingV="3rem">
         <KLabel.Text typo="TextSmNormal" color={KColors.palette.gray.w400}>
@@ -44,6 +50,10 @@ export const MessagesTab = memo(
       </KContainer.View>
     );
 
+    if (isLoading && data.length === 0) {
+      return LoadingComponent;
+    }
+
     return (
       <KContainer.FlatList
         data={data}

package/src/services/apis.ts

@@ -6,6 +6,7 @@ import type {
 import OpenIMSDK, { LoginStatus } from '@droppii/openim-rn-client-sdk';
 import type { BaseResponse, GetOpenIMTokenResponse } from '../types/auth';
 import { Platform } from 'react-native';
+import { useConversationStore } from '../store';
 
 let apiInstance: AxiosInstance | null = null;
 
@@ -38,6 +39,7 @@ export namespace ChatAPI {
   };
 
   export const logout = async (operationID?: string) => {
+    useConversationStore.getState().reset();
     return OpenIMSDK.logout(operationID);
   };
 

package/src/services/message.ts

@@ -4,6 +4,8 @@ import OpenIMSDK, {
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../types/chat';
+import { useConversationStore } from '../store';
+import { getReceiverId } from '../utils/message';
 
 const DEFAULT_PAGE_SIZE = 20;
 
@@ -28,21 +30,20 @@ export namespace ChatMessageAPI {
       // ...(options?.startClientMsgID
       //   ? { lastMinSeq: options.lastMinSeq ?? 0 }
       //   : {}),
-    } as Parameters<
-      typeof OpenIMSDK.getAdvancedHistoryMessageList
-    >[0]) as Promise<HistoryMessageResult>;
+    }) as Promise<HistoryMessageResult>;
   }
 
   export async function sendTextMessage(params: {
     text: string;
-    recvID?: string;
-    groupID?: string;
   }): Promise<DMessageItem> {
+    const currentConversation = useConversationStore
+      .getState()
+      .getCurrentConversation();
+
     const message = await OpenIMSDK.createTextMessage(params.text);
 
     const sentMessage = await OpenIMSDK.sendMessage({
-      recvID: params.recvID ?? '',
-      groupID: params.groupID ?? '',
+      ...getReceiverId(currentConversation),
       message,
     });
 

package/src/store/conversation.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import {
-  dConversationCompare,
+  sortConversation,
   mergeOpenIMIntoConversation,
 } from '../utils/conversation';
 import type { DConversationItem } from '../types/chat';
@@ -27,6 +27,7 @@ export interface ConversationStore {
   mergeOpenIMConversations(conversations: ConversationItem[]): boolean;
   removeConversation(id: ConversationID): void;
   updateLastMessage(id: ConversationID, message: MessageItem): void;
+  reset(): void;
 }
 
 export const useConversationStore = create<ConversationStore>()((set, get) => ({
@@ -43,20 +44,17 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
     return get().map[id];
   },
   updateConversations(conversations) {
-    const newMap = conversations.reduce(
-      (pre, curr) => {
-        pre[curr.conversationId] = curr;
-        return pre;
-      },
-      { ...get().map }
+    set(
+      sortConversation(
+        conversations.reduce(
+          (pre, curr) => {
+            pre[curr.conversationId] = curr;
+            return pre;
+          },
+          { ...get().map }
+        )
+      )
     );
-    const newList = Object.keys(newMap).sort((a, b) =>
-      dConversationCompare(newMap[a]!, newMap[b]!)
-    );
-    set({
-      map: newMap,
-      list: newList,
-    });
   },
   mergeOpenIMConversations(conversations) {
     const currentMap = get().map;
@@ -78,10 +76,7 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
     }
 
     if (changed) {
-      const newList = Object.keys(nextMap).sort((a, b) =>
-        dConversationCompare(nextMap[a]!, nextMap[b]!)
-      );
-      set({ map: nextMap, list: newList });
+      set(sortConversation(nextMap));
     }
 
     if (hasUnknown) {
@@ -102,11 +97,20 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
   updateLastMessage(id, message) {
     const conversation = get().map[id];
     if (conversation == null) return;
-    set({
-      map: {
+
+    set(
+      sortConversation({
         [id]: { ...conversation, lastMessage: message },
         ...get().map,
-      },
+      })
+    );
+  },
+  reset() {
+    set({
+      currentConversationId: undefined,
+      list: [],
+      map: {},
+      newConversationSignal: 0,
     });
   },
 }));

package/src/types/chat.ts

@@ -4,11 +4,29 @@ import {
   type MessageReceiveOptType,
   type GroupAtType,
 } from '@droppii/openim-rn-client-sdk';
+import type { PropsWithChildren } from 'react';
 
-export interface ChatProviderProps {
-  children: React.ReactNode;
+export const EventProvider = {
+  ga: 'ga',
+  appsflyer: 'appsflyer',
+  netcore: 'netcore',
+} as const;
+
+type LogGA = (
+  event: string,
+  params?: any,
+  provider?: `${keyof typeof EventProvider}`
+) => void;
+
+export interface ChatContextType {
+  logGA?: LogGA;
 }
 
+export type ChatProviderProps = PropsWithChildren<{
+  enabled?: boolean;
+  logGA?: LogGA;
+}>;
+
 export enum DChatApplicationType {
   BIZ = 'BIZ',
   MALL = 'MALL',

package/src/utils/conversation.ts

@@ -2,11 +2,7 @@ import {
   SessionType,
   type ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
-import {
-  type DConversationItem,
-  type DMessageItem,
-  DChatCategory,
-} from '../types/chat';
+import { type DConversationItem, type DMessageItem } from '../types/chat';
 
 export const conversationCompare = (
   a: ConversationItem,
@@ -79,28 +75,9 @@ export const getConversationID = (
   return [prefix, senderID, receiverID].filter(Boolean).join('_');
 };
 
-export const isBotCrmChat = (chatCategory: DChatCategory) =>
-  chatCategory === DChatCategory.BIZ_BOT_CRM ||
-  chatCategory === DChatCategory.BIZ_BOT_PDP;
-
-export const resolveDisplayName = (
-  item: DConversationItem,
-  t: (key: string) => string
-) => {
-  if (isBotCrmChat(item.chatCategory)) {
-    const botName = item.peer.botName?.trim();
-    if (botName) return botName;
-    return t('thread_card_bot_crm_name');
-  }
-
-  const fullName = item.peer.fullName?.trim();
-  if (fullName) return fullName;
-  const username = item.peer.username?.trim();
-  if (username) return username;
-  return t('thread_card_fallback_name');
-};
-
-export const resolveAvatarUrl = (item: DConversationItem) => {
-  if (isBotCrmChat(item.chatCategory)) return null;
-  return item.peer.avatar;
+export const sortConversation = (map: Record<string, DConversationItem>) => {
+  const list = Object.keys(map).sort((a, b) =>
+    dConversationCompare(map[a]!, map[b]!)
+  );
+  return { map, list };
 };

package/src/utils/message.ts

@@ -1,5 +1,9 @@
 import { SessionType, type MessageItem } from '@droppii/openim-rn-client-sdk';
-import type { DMessageItem } from '../types/chat';
+import {
+  DChatType,
+  type DConversationItem,
+  type DMessageItem,
+} from '../types/chat';
 import { getConversationID } from './conversation';
 
 const getMessageTime = (message: DMessageItem) =>
@@ -96,41 +100,43 @@ export const hasNewHistoryMessages = (
 
 export const belongsToConversation = (
   message: MessageItem,
-  conversationId: string,
-  groupID?: string
+  conversationId: string
 ): boolean => {
-  const runtimeConversationId = (
-    message as MessageItem & {
-      conversationID?: string;
+  switch (message.sessionType) {
+    case SessionType.Single: {
+      const forwardId = getConversationID(
+        message.sessionType,
+        message.sendID,
+        message.recvID
+      );
+      const reverseId = getConversationID(
+        message.sessionType,
+        message.recvID,
+        message.sendID
+      );
+      return conversationId === forwardId || conversationId === reverseId;
     }
-  ).conversationID;
 
-  if (runtimeConversationId === conversationId) {
-    return true;
-  }
+    case SessionType.Group: {
+      return conversationId === `sg_${message.groupID}`;
+    }
 
-  if (groupID) {
-    return (
-      message.groupID === groupID ||
-      conversationId === `sg_${groupID}` ||
-      conversationId.endsWith(`_${groupID}`)
-    );
+    default:
+      return false;
   }
+};
 
-  if (message.sessionType !== SessionType.Single) {
-    return false;
-  }
+export const getReceiverId = (conversation?: DConversationItem) => {
+  if (conversation == null) return { groupID: '', recvID: '' };
 
-  const forwardId = getConversationID(
-    message.sessionType,
-    message.sendID,
-    message.recvID
-  );
-  const reverseId = getConversationID(
-    message.sessionType,
-    message.recvID,
-    message.sendID
-  );
+  const isGroupChat = conversation.chatType === DChatType.GROUP;
+  if (isGroupChat) {
+    const isBot = conversation.chatCategory?.includes('BOT');
+    const groupID = isBot
+      ? conversation.conversationId?.slice(3) // Remove sg_
+      : conversation.groupID;
+    return { groupID: groupID ?? '', recvID: '' };
+  }
 
-  return conversationId === forwardId || conversationId === reverseId;
+  return { groupID: '', recvID: conversation.peer.id ?? '' };
 };