@droppii-org/chat-mobile 0.2.2 → 0.2.4

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

@@ -6,7 +6,8 @@ import {
   KLabel,
   KColors,
 } from '@droppii/libs';
-import { Avatar } from '../../components/Avatar';
+import { AvatarSection } from '../../components/ThreadCard/AvatarSection';
+import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
 
 const ChatDetailHeader = memo(
@@ -15,6 +16,9 @@ const ChatDetailHeader = memo(
     subtitle,
     avatarUri,
     avatarFullName,
+    chatType,
+    chatCategory,
+    applicationType,
     showAddMember = false,
     onBack,
     onPressSearch,
@@ -58,7 +62,7 @@ const ChatDetailHeader = memo(
 
     const leftNode = useMemo(
       () => (
-        <KContainer.View row alignItems marginR="0.25rem">
+        <KContainer.View row alignItems flex marginR="0.25rem">
           <KContainer.Touchable onPress={onBack} height={40} width={40} center>
             <KImage.VectorIcons
               name="arrow-left-o"
@@ -67,41 +71,69 @@ const ChatDetailHeader = memo(
             />
           </KContainer.Touchable>
 
-          <Avatar
-            source={avatarUri}
-            fullName={avatarFullName ?? title}
-            size="md"
+          <KContainer.Touchable
+            row
+            alignItems
+            flex
             onPress={onPressAvatar}
-          />
+            activeOpacity={0.7}
+          >
+            <AvatarSection
+              avatar={avatarUri ?? null}
+              fullName={avatarFullName ?? title}
+              chatCategory={chatCategory}
+              applicationType={applicationType}
+              chatType={chatType}
+            />
+
+            <KContainer.View flex marginL="0.5rem">
+              <KContainer.View row alignItems>
+                <NamePrefixIcon
+                  chatCategory={chatCategory}
+                  chatType={chatType}
+                />
+                <KLabel.Text
+                  typo="TextLgBold"
+                  color={KColors.gray.dark}
+                  numberOfLines={1}
+                  flex
+                >
+                  {title}
+                </KLabel.Text>
+              </KContainer.View>
+              {!!subtitle && (
+                <KLabel.Text
+                  typo="TextSmNormal"
+                  color={KColors.palette.gray.w500}
+                  numberOfLines={1}
+                >
+                  {subtitle}
+                </KLabel.Text>
+              )}
+            </KContainer.View>
+          </KContainer.Touchable>
         </KContainer.View>
       ),
-      [avatarFullName, avatarUri, onBack, onPressAvatar, title]
+      [
+        avatarFullName,
+        avatarUri,
+        chatCategory,
+        applicationType,
+        chatType,
+        onBack,
+        onPressAvatar,
+        subtitle,
+        title,
+      ]
     );
 
-    const subTitleNode = useMemo(() => {
-      if (!subtitle) {
-        return null;
-      }
-
-      return (
-        <KLabel.Text
-          typo="TextSmNormal"
-          color={KColors.palette.gray.w500}
-          numberOfLines={1}
-        >
-          {subtitle}
-        </KLabel.Text>
-      );
-    }, [subtitle]);
-
     return (
       <KNavigation.Header
         theme="light"
         alignment="left"
         size="small"
         leftNode={leftNode}
-        title={title}
-        subTitle={subTitleNode}
+        disableCenterSpace
         initRightButtons={rightButtons}
         shadow
       />

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { DChatType } from '../../types/chat';
-import type { DMessageItem } from '../../types/chat';
+import type { DChatType, DChatCategory } from '../../types/chat';
+import type { DConversationItem, DMessageItem } from '../../types/chat';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -23,6 +23,8 @@ export interface ChatDetailHeaderProps {
   avatarUri?: string | null;
   avatarFullName?: string;
   chatType?: DChatType;
+  chatCategory?: DChatCategory;
+  applicationType?: DConversationItem['applicationType'];
   showAddMember?: boolean;
   onBack?: () => void;
   onPressSearch?: () => void;

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 ?? '' };
 };