@droppii-org/chat-mobile 0.2.29 → 0.2.30

package/src/hooks/conversation/useGetConversationDetail.ts

@@ -0,0 +1,78 @@
+import { useQuery } from '@tanstack/react-query';
+import OpenIMSDK, { SessionType } from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../../store/conversation';
+import { apiInstance } from '../../services/apis';
+import type { BaseResponse } from '../../types/auth';
+import { conversationQueryKeys } from '../query-keys';
+import { ENDPOINTS } from '../../services/endpoints';
+
+interface UseGetConversationDetailParams {
+  targetConversationId?: string;
+  targetUserId?: string;
+  targetGroupId?: string;
+  targetBotId?: string;
+}
+
+interface UseGetConversationDetailResult {
+  conversationId: string;
+  isLoading: boolean;
+}
+
+const useBotConversationData = (botId?: string) =>
+  useQuery({
+    queryKey: conversationQueryKeys.detailByBotId(botId || ''),
+    queryFn: async () => {
+      const res = await apiInstance?.get<
+        BaseResponse<{ groupId: string; conversationId: string }>
+      >(ENDPOINTS.chatService.getConversationByBotId(botId || ''));
+      return res?.data?.data || undefined;
+    },
+    enabled: !!botId,
+  });
+
+export const useGetOneConversation = ({
+  targetUserId,
+  targetGroupId,
+}: {
+  targetUserId?: string;
+  targetGroupId?: string;
+}) => {
+  return useQuery({
+    queryKey: conversationQueryKeys.detailBySourceId(
+      targetUserId || targetGroupId || ''
+    ),
+    queryFn: async () => {
+      const res = await OpenIMSDK.getOneConversation({
+        sourceID: targetUserId || targetGroupId || '',
+        sessionType: targetUserId ? SessionType.Single : SessionType.Group,
+      });
+      if (res?.conversationID) {
+        useConversationStore.getState().updateConversations([res]);
+      }
+      return res || undefined;
+    },
+    enabled: !!targetUserId || !!targetGroupId,
+  });
+};
+
+export const useGetConversationDetail = ({
+  targetConversationId,
+  targetUserId,
+  targetGroupId,
+  targetBotId,
+}: UseGetConversationDetailParams): UseGetConversationDetailResult => {
+  const { data: botData, isLoading: botIdLoading } =
+    useBotConversationData(targetBotId);
+
+  const { data: conversationData, isLoading: conversationLoading } =
+    useGetOneConversation({
+      targetUserId,
+      targetGroupId: targetGroupId || botData?.groupId,
+    });
+
+  return {
+    conversationId:
+      targetConversationId || conversationData?.conversationID || '',
+    isLoading: botIdLoading || conversationLoading,
+  };
+};

package/src/hooks/flows/useFlow.ts

@@ -20,7 +20,7 @@ export const useResetFlow = () => {
   const { sendMessage } = useSendMessage();
   const conversationFlow = useChatDetailContext().conversationFlow;
   return useMutation({
-    mutationKey: conversationQueryKeys.flow(conversationId),
+    mutationKey: conversationQueryKeys.resetFlow(conversationId),
     mutationFn: async () => {
       await sendMessage({
         plainText: trans('restart'),

package/src/hooks/flows/useGetConversationFlowMainMenu.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { conversationQueryKeys } from '../query-keys';
+import { apiInstance } from '../../services/apis';
+import type { BaseResponse } from '../../types/auth';
+import type { InputButtonItem } from '../../types/flows';
+import { ENDPOINTS } from '../../services/endpoints';
+
+export const useGetConversationFlowMainMenu = (conversationId?: string) => {
+  return useQuery({
+    queryKey: [conversationQueryKeys.flowMainMenu(conversationId || '')],
+    queryFn: async () => {
+      const res = await apiInstance?.get<BaseResponse<InputButtonItem[]>>(
+        ENDPOINTS.chatService.conversationFlowMainMenu(conversationId || '')
+      );
+      return res?.data?.data || undefined;
+    },
+    enabled: !!conversationId,
+  });
+};

package/src/hooks/message/useSendMessage.ts

@@ -1,14 +1,22 @@
 import { useCallback } from 'react';
-import type { UploadFileItem } from 'react-native-fs';
 import { useConversationStore } from '../../store/conversation';
-import type { MessageItem, OfflinePush } from '@droppii/openim-rn-client-sdk';
+import type {
+  CustomMsgParams,
+  MessageItem,
+  OfflinePush,
+} from '@droppii/openim-rn-client-sdk';
 import { MessageStatus, MessageType } 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 {
+  CustomMessageType,
+  type CustomMessagePayload,
+  type IMessageItemEx,
+} from '../../types/chat';
 import { useChatContext } from '../../context';
 import { generateContentBasedOnMessageType } from '../../utils/conversation';
 import { markMessageRevoked, useMessageStore } from '../../store/message';
+import uuid from 'react-native-uuid';
 
 import type { IUrlMetadata } from '../../types/common';
 import type { IRunConversationFlowPayload } from '../../types/flows';
@@ -63,14 +71,14 @@ export const useSendMessage = () => {
   const sendMessage = useCallback(
     async ({
       plainText,
-      files,
       urlMetadata,
       flow,
+      customMessage,
     }: {
       plainText?: string;
-      files?: UploadFileItem[];
       urlMetadata?: IUrlMetadata;
       flow?: IRunConversationFlowPayload;
+      customMessage?: CustomMessagePayload;
     }) => {
       const { userID: recvID, groupID } =
         useConversationStore.getState().getCurrentConversation() || {};
@@ -78,13 +86,10 @@ export const useSendMessage = () => {
 
       const messageList: MessageItem[] = [];
 
-      for (const file of files || []) {
-        if (!file) continue;
-      }
-
       const hasText = !!plainText && plainText.trim() !== '';
       const hasPreview = !!urlMetadata?.url;
 
+      //text msg
       if (hasText || hasPreview) {
         const urls = hasText ? extractUrls(plainText) : [];
         const isUrlMessage = urls.length > 0 || hasPreview;
@@ -100,6 +105,21 @@ export const useSendMessage = () => {
         messageList.push(message);
       }
 
+      //custom msg
+      if (customMessage) {
+        let customElem: CustomMsgParams = {
+          data: JSON.stringify(customMessage.data),
+          extension: customMessage.type,
+          description:
+            customMessage?.type === CustomMessageType.Order
+              ? customMessage?.data?.orderCode
+              : '',
+        };
+        const message = await createCustomMessage(customElem);
+        if (!message) return;
+        messageList.push(message);
+      }
+
       for (const message of messageList) {
         const extendMessageInfo: IMessageItemEx = {
           applicationType,
@@ -212,10 +232,7 @@ const generateOfflinePushInfo = (
 };
 
 export const createTextMessage = async (text: string) => {
-  let textMessage = await OpenIMSDK.createTextMessage(
-    text,
-    new Date().getTime().toString()
-  )
+  let textMessage = await OpenIMSDK.createTextMessage(text, uuid.v4())
     .then((data) => {
       return data;
     })
@@ -230,7 +247,7 @@ export const createUrlTextMessage = async (text: string, urls: string[]) => {
   let urlTextMessage = await OpenIMSDK.createUrlTextMessage(
     text,
     urls,
-    new Date().getTime().toString()
+    uuid.v4()
   )
     .then((data) => {
       return data;
@@ -241,3 +258,15 @@ export const createUrlTextMessage = async (text: string, urls: string[]) => {
     });
   return urlTextMessage;
 };
+
+export const createCustomMessage = async (params: CustomMsgParams) => {
+  let customMessage = await OpenIMSDK.createCustomMessage(params, uuid.v4())
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createUrlTextMessage', errCode, errMsg);
+      return null;
+    });
+  return customMessage;
+};

package/src/hooks/query-keys.ts

@@ -12,11 +12,17 @@ export const conversationQueryKeys = {
   detail: (conversationId: string) =>
     [...conversationQueryKeys.details(), conversationId] as const,
   flow: (conversationId: string) => ['conversationFlow', conversationId],
+  flowMainMenu: (conversationId: string) => [
+    'conversationFlowMainMenu',
+    conversationId,
+  ],
   resetFlow: (conversationId: string) => [
     'resetConversationFlow',
     conversationId,
   ],
   runFlow: (conversationId: string) => ['runConversationFlow', conversationId],
+  detailByBotId: (botId: string) => ['conversationByBotId', botId],
+  detailBySourceId: (sourceId: string) => ['detailBySourceId', sourceId],
 };
 
 export type ConversationQueryKeys = typeof conversationQueryKeys;

package/src/hooks/useChatCompose.ts

@@ -151,7 +151,7 @@ export function useChatCompose() {
       // Clear composer immediately — message is already in chat list with Sending status.
       // User retries from the bubble, not the composer.
       setText('');
-      await sendMessage({ files: [], plainText, urlMetadata: urlMeta });
+      await sendMessage({ plainText, urlMetadata: urlMeta });
     }
   }, [
     imageAttachment,

package/src/index.tsx

@@ -14,6 +14,7 @@ export * from './store';
 export * from './context';
 export * from './hooks/useConversationList';
 export * from './hooks/useChatMessages';
+export * from './hooks/message/useSendMessage';
 export { useImageAttachment } from './hooks/useImageAttachment';
 export { useMediaViewer } from './hooks/useMediaViewer';
 export type { MediaItem } from './hooks/useMediaViewer';
@@ -34,24 +35,32 @@ export {
   ChatComposer,
   ChatQuickActions,
   ChatAttachmentPanel,
-  DEFAULT_Chat_QUICK_ACTIONS,
-  DEFAULT_ATTACHMENT_ACTIONS,
+  DEFAULT_QUICK_ACTIONS,
+  DEFAULT_PANNEL_ACTIONS,
+  DChatPannelActionItemType,
+  DChatQuickActionItemType,
 } from './screens/chat-detail';
 export type {
   DChatActionItem,
   DChatActionIconProvider,
   DChatQuickAction,
-  DChatAttachmentAction,
+  DChatPannelAction,
   ChatDetailProps,
   ChatDetailHeaderProps,
   ChatListProps,
   ChatComposerProps,
   ChatQuickActionsProps,
   ChatQuickActionsRenderParams,
-  ChatAttachmentPanelProps,
+  ChatPanelProps,
 } from './screens/chat-detail';
 
-export type { PeerType } from '@droppii/openim-rn-client-sdk';
-export { LoginStatus } from '@droppii/openim-rn-client-sdk';
+export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+export type {
+  PeerType,
+  ConversationItem,
+  MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 
 export { registerUIUtils, UIUtils } from './utils/UIUtils';
+
+export { DFlowContext } from './types/flows';

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

@@ -8,8 +8,7 @@ import {
   KSpacingValue,
 } from '@droppii/libs';
 import { ATTACHMENT_PANEL_COLUMNS } from './constants';
-import { useChatActionPress } from './useChatActionPress';
-import type { DChatAttachmentAction, ChatAttachmentPanelProps } from './types';
+import type { DChatPannelAction, ChatPanelProps } from './types';
 
 const AttachmentActionItem = memo(
   ({
@@ -17,9 +16,9 @@ const AttachmentActionItem = memo(
     itemWidth,
     onPress,
   }: {
-    action: DChatAttachmentAction;
+    action: DChatPannelAction;
     itemWidth: `${number}%`;
-    onPress: (action: DChatAttachmentAction) => void;
+    onPress: (action: DChatPannelAction) => void;
   }) => {
     const handlePress = useCallback(() => {
       onPress(action);
@@ -61,42 +60,26 @@ const AttachmentActionItem = memo(
 AttachmentActionItem.displayName = 'AttachmentActionItem';
 
 export const ChatAttachmentPanel = memo(
-  ({
-    actions,
-    columns = ATTACHMENT_PANEL_COLUMNS,
-    onActionPress,
-    renderAction,
-  }: ChatAttachmentPanelProps) => {
-    const handleActionPress = useChatActionPress(onActionPress);
-
+  ({ actions, columns = ATTACHMENT_PANEL_COLUMNS }: ChatPanelProps) => {
     const itemWidth = useMemo(
       () => `${100 / columns}%` as `${number}%`,
       [columns]
     );
 
-    const renderItem = useCallback<ListRenderItem<DChatAttachmentAction>>(
+    const renderItem = useCallback<ListRenderItem<DChatPannelAction>>(
       ({ item }) => {
-        const onPress = () => handleActionPress(item);
-
-        if (renderAction) {
-          return <>{renderAction(item, onPress)}</>;
-        }
-
         return (
           <AttachmentActionItem
             action={item}
             itemWidth={itemWidth}
-            onPress={handleActionPress}
+            onPress={() => item?.onPress?.()}
           />
         );
       },
-      [handleActionPress, itemWidth, renderAction]
+      [itemWidth]
     );
 
-    const keyExtractor = useCallback(
-      (item: DChatAttachmentAction) => item.id,
-      []
-    );
+    const keyExtractor = useCallback((item: DChatPannelAction) => item.id, []);
 
     if (!actions?.length) {
       return null;

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

@@ -18,11 +18,11 @@ import { ChatMessageInput } from './components/ChatMessageInput';
 import { AttachmentPreview } from '../../components/AttachmentPreview';
 
 import {
-  DEFAULT_ATTACHMENT_ACTIONS,
-  DEFAULT_Chat_QUICK_ACTIONS,
+  DEFAULT_QUICK_ACTIONS,
   getAttachmentPanelHeight,
+  DEFAULT_PANNEL_ACTIONS,
 } from './constants';
-import type { DChatAttachmentAction } from './types';
+import { DChatPannelActionItemType, type DChatPannelAction } from './types';
 import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
@@ -35,10 +35,11 @@ import { useChatCompose } from '../../hooks/useChatCompose';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
+  pannelActions?: DChatPannelAction[];
 }
 
 export const ChatComposer = memo(
-  ({ isEmptyMessage = false }: ChatComposerInternalProps) => {
+  ({ isEmptyMessage = false, pannelActions }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
@@ -57,7 +58,7 @@ export const ChatComposer = memo(
     } = useChatComposerState(compose.text);
 
     const panelHeight = useMemo(
-      () => getAttachmentPanelHeight(DEFAULT_ATTACHMENT_ACTIONS.length),
+      () => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length),
       []
     );
 
@@ -132,18 +133,25 @@ export const ChatComposer = memo(
       })
     );
 
-    const handleAttachmentAction = useCallback(
-      async (action: DChatAttachmentAction) => {
-        if (action.id === 'gallery') {
-          debouncedImagePickerRef.current();
-        } else if (action.id === 'file') {
-          debouncedFilePickerRef.current();
-        } else {
-          console.log('[ChatComposer] attachment action:', action.id);
+    const resolvedPannelActons = useMemo(() => {
+      return (pannelActions || DEFAULT_PANNEL_ACTIONS)?.map((p) => {
+        let onPress;
+        switch (p.id) {
+          case DChatPannelActionItemType.Gallery:
+            onPress = debouncedImagePickerRef.current;
+            break;
+          case DChatPannelActionItemType.Documents:
+            onPress = debouncedFilePickerRef.current;
+            break;
+          default:
+            break;
         }
-      },
-      []
-    );
+        return {
+          ...p,
+          onPress: p.onPress || onPress,
+        };
+      });
+    }, [pannelActions]);
 
     const inputRowStyle = useMemo(
       () => ({ paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12 }),
@@ -186,7 +194,7 @@ export const ChatComposer = memo(
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
         <ChatQuickActions
           visible
-          actions={DEFAULT_Chat_QUICK_ACTIONS}
+          actions={DEFAULT_QUICK_ACTIONS}
           onActionPress={(action) =>
             console.log('[ChatComposer] quick action:', action.id)
           }
@@ -272,10 +280,7 @@ export const ChatComposer = memo(
           style={[styles.accessorySlot, accessorySlotStyle]}
           pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
         >
-          <ChatAttachmentPanel
-            actions={DEFAULT_ATTACHMENT_ACTIONS}
-            onActionPress={handleAttachmentAction}
-          />
+          <ChatAttachmentPanel actions={resolvedPannelActons} />
         </Reanimated.View>
       </KContainer.View>
     );

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

@@ -14,30 +14,22 @@ import { useConversation, useConversationStore } from '../../store';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
-import {
-  getConversationAvatarUri,
-  getConversationSubtitle,
-  getConversationTitle,
-  shouldShowAddMember,
-} from './conversationHeader.utils';
+import { shouldShowAddMember } from './conversationHeader.utils';
 import type { ChatDetailProps } from './types';
-import { ChatDetailProvider } from '../../context/ChatDetailContext';
 import { normalizeUrl } from '../../utils/url';
-// import { ChatMessageAPI } from '../../services/message';
 import { MessageToolboxOverlay } from './messageToolbox/MessageToolboxOverlay';
 import type { MeasuredRect, MessageToolboxRef } from './messageToolbox/types';
 import type { DMessageItem } from '../../types/chat';
+import { useGetConversationDetail } from '../../hooks/conversation/useGetConversationDetail';
 
 const ChatDetail = memo(
   ({
-    conversationId,
+    targetConversationId = '',
+    targetUserId = '',
+    targetGroupId = '',
+    targetBotId = '',
     enabled = true,
-    title,
-    subtitle,
-    avatarUri,
-    avatarFullName,
     showAddMember,
-    getSubtitle,
     onBack,
     onPressSearch,
     onPressAddMember,
@@ -45,10 +37,20 @@ const ChatDetail = memo(
     onPressAvatar,
     onPressUrl,
     customMessageItemFactory,
+    pannelActions,
   }: ChatDetailProps) => {
     const navigation = useNavigation();
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
     const messageToolboxRef = useRef<MessageToolboxRef>(null);
+
+    const { conversationId, isLoading: isLoadingConversation } =
+      useGetConversationDetail({
+        targetConversationId,
+        targetUserId,
+        targetGroupId,
+        targetBotId,
+      });
+
     const conversation = useConversation(conversationId);
 
     const handleBackDefault = useCallback(() => {
@@ -75,31 +77,16 @@ const ChatDetail = memo(
     } = useChatMessages({ conversationId, enabled });
 
     useEffect(() => {
-      useConversationStore.getState().setCurrentConversation(conversationId);
+      if (conversationId) {
+        useConversationStore.getState().setCurrentConversation(conversationId);
+      }
+      return () => {
+        useConversationStore.getState().setCurrentConversation(undefined);
+      };
     }, [conversationId]);
 
-    // useEffect(() => {
-    //   if (!conversationId) return;
-    //   ChatMessageAPI.searchLocalMessages(conversationId, { count: 20 })
-    //     .then((result) => {
-    //       console.log('[TEST searchLocalMessages] success:', result);
-    //     })
-    //     .catch((err) => {
-    //       console.log('[TEST searchLocalMessages] error:', err);
-    //     });
-    // }, [conversationId]);
-
-    const resolvedTitle = title ?? getConversationTitle(conversation);
-    const resolvedAvatarUri =
-      avatarUri ?? getConversationAvatarUri(conversation);
-    const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
-    const resolvedSubtitle = useMemo(() => {
-      if (subtitle !== undefined) return subtitle;
-      if (getSubtitle && conversation) return getSubtitle(conversation);
-      return getConversationSubtitle(conversation);
-    }, [conversation, getSubtitle, subtitle]);
 
     const insets = useSafeAreaInsets();
 
@@ -123,51 +110,48 @@ const ChatDetail = memo(
     );
 
     return (
-      <ChatDetailProvider>
-        <KContainer.Page flex edges={['bottom']}>
-          <ChatDetailHeader
-            conversationId={conversationId}
-            title={resolvedTitle}
-            subtitle={resolvedSubtitle}
-            avatarUri={resolvedAvatarUri}
-            avatarFullName={resolvedAvatarFullName}
-            showAddMember={resolvedShowAddMember}
-            onBack={onBack ?? handleBackDefault}
-            onPressSearch={onPressSearch}
-            onPressAddMember={onPressAddMember}
-            onPressMenu={onPressMenu}
-            onPressAvatar={onPressAvatar}
-          />
-
-          <KeyboardAvoidingView
-            style={styles.keyboardAvoiding}
-            behavior="padding"
-            keyboardVerticalOffset={keyboardVerticalOffset}
-          >
-            <ChatListLegend
-              messages={messages}
-              currentUserId={currentUserId}
-              customMessageItemFactory={customMessageItemFactory}
-              onLoadEarlier={onLoadEarlier}
-              isLoading={isLoading}
-              isLoadingEarlier={isLoadingEarlier}
-              hasMoreEarlier={hasMoreEarlier}
-              onMediaPress={handleMediaPress}
-              onPressUrl={handlePressUrl}
-              onLongPress={handleMessageLongPress}
-            />
-
-            <ChatComposer isEmptyMessage={messages?.length === 0} />
-          </KeyboardAvoidingView>
-
-          <MediaViewerModal ref={mediaViewerRef} />
-          <MessageToolboxOverlay
-            ref={messageToolboxRef}
+      <KContainer.Page flex edges={['bottom']}>
+        <ChatDetailHeader
+          conversationId={conversationId}
+          showAddMember={resolvedShowAddMember}
+          onBack={onBack ?? handleBackDefault}
+          onPressSearch={onPressSearch}
+          onPressAddMember={onPressAddMember}
+          onPressMenu={onPressMenu}
+          onPressAvatar={onPressAvatar}
+        />
+
+        <KeyboardAvoidingView
+          style={styles.keyboardAvoiding}
+          behavior="padding"
+          keyboardVerticalOffset={keyboardVerticalOffset}
+        >
+          <ChatListLegend
+            messages={messages}
             currentUserId={currentUserId}
             customMessageItemFactory={customMessageItemFactory}
+            onLoadEarlier={onLoadEarlier}
+            isLoading={isLoading || isLoadingConversation}
+            isLoadingEarlier={isLoadingEarlier}
+            hasMoreEarlier={hasMoreEarlier}
+            onMediaPress={handleMediaPress}
+            onPressUrl={handlePressUrl}
+            onLongPress={handleMessageLongPress}
+          />
+
+          <ChatComposer
+            isEmptyMessage={messages?.length === 0}
+            pannelActions={pannelActions}
           />
-        </KContainer.Page>
-      </ChatDetailProvider>
+        </KeyboardAvoidingView>
+
+        <MediaViewerModal ref={mediaViewerRef} />
+        <MessageToolboxOverlay
+          ref={messageToolboxRef}
+          currentUserId={currentUserId}
+          customMessageItemFactory={customMessageItemFactory}
+        />
+      </KContainer.Page>
     );
   }
 );