@droppii-org/chat-mobile 0.2.29 → 0.2.31

package/src/config/api-endpoints.ts

@@ -15,12 +15,14 @@ export interface ApiEndpoints {
   conversationFlow: string;
   // Image upload service (relative path - full URL constructed in imageUpload service)
   imageUpload: string;
+  bot: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
   urlMetadata: '/chat-service/v1/utils/url-metadata',
   conversationFlow: '/chat-service/v1/app/conversations',
   imageUpload: '/uploader-service/v1/uploader/permanently',
+  bot: '/chat-service/v1/app/bots/',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };

package/src/context/ChatDetailContext.tsx

@@ -6,20 +6,32 @@ import {
   useMemo,
   useState,
 } from 'react';
-import type {
-  ChatDetailContextType,
-  ChatDetailProviderProps,
+import {
+  DFlowState,
+  type ChatDetailContextType,
+  type ChatDetailProviderProps,
 } from '../types/chat';
 import { fechtCurrentConversationFlow } from '../hooks/flows/useCurrentConversationFlow';
 import { useConversationStore } from '../store';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
-import type { IConversationFlow, IConversationFlowStep } from '../types/flows';
+import {
+  DFlowContext,
+  NodeTypes,
+  type IConversationFlow,
+  type IConversationFlowStep,
+} from '../types/flows';
+import { useGetConversationFlowMainMenu } from '../hooks/flows/useGetConversationFlowMainMenu';
+import { useRunFlow } from '../hooks/flows/useFlow';
+import { CONTEXT_BUTTON_PREFIX, isContextButton } from '../utils/flows';
 
 export const ChatDetailContext = createContext<ChatDetailContextType>({
   isBotConversation: false,
   conversationFlow: undefined,
   refetchConversationFlow: () => {},
   setConverationFlowStep: () => {},
+  flowState: undefined,
+  runButtonContext: () => Promise.resolve(false),
+  conversation: undefined,
 });
 
 export const useChatDetailContext = (): ChatDetailContextType => {
@@ -43,10 +55,26 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     IConversationFlow | undefined
   >(undefined);
 
+  const flowState = useMemo(() => {
+    return conversationFlow
+      ? conversationFlow?.flowCurrentStep?.data?.children?.some(
+          (n) => n.type === NodeTypes.LogicCsTeam
+        )
+        ? DFlowState.CS
+        : DFlowState.BOT
+      : undefined;
+  }, [conversationFlow]);
+
   const isBotConversation = useMemo(() => {
     return conversation?.peerType === PeerType.Bot;
   }, [conversation]);
 
+  const { data: conversationFlowMainMenu } = useGetConversationFlowMainMenu(
+    isBotConversation ? conversationId : ''
+  );
+
+  const { mutateAsync: runFlow } = useRunFlow();
+
   const setConverationFlowStep = useCallback((step?: IConversationFlowStep) => {
     setConverationFlow(
       (prev) =>
@@ -64,6 +92,28 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     }
   }, [conversationId]);
 
+  const runButtonContext = useCallback(
+    async (stringContext: DFlowContext) => {
+      const actionItem = conversationFlowMainMenu?.find(
+        (f) =>
+          isContextButton(f.label) &&
+          f.label.trim().slice(CONTEXT_BUTTON_PREFIX.length) ===
+            stringContext?.trim()
+      );
+      if (actionItem) {
+        const res = await runFlow({
+          actionId: actionItem.id,
+          groupId: '',
+          childId: '',
+        });
+        setConverationFlowStep(res?.flowNextStep || undefined);
+        return res ? true : false;
+      }
+      return false;
+    },
+    [runFlow, conversationFlowMainMenu, setConverationFlowStep]
+  );
+
   useEffect(() => {
     if (!!conversationId && !!isBotConversation) {
       getConversationFlow();
@@ -77,6 +127,9 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
         refetchConversationFlow: () => {},
         setConverationFlowStep,
         isBotConversation,
+        flowState,
+        runButtonContext,
+        conversation,
       }}
     >
       {children}

package/src/context/index.ts

@@ -1 +1,2 @@
 export * from './ChatContext';
+export * from './ChatDetailContext';

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,18 @@ 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],
+  joinedGroup: (groupId?: string) => [...conversationQueryKeys.all, groupId],
 };
 
 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/hooks/useIsJoinedGroup.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import { conversationQueryKeys } from './query-keys';
+
+export const useIsJoinedGroup = (groupId?: string) => {
+  return useQuery({
+    queryKey: conversationQueryKeys.joinedGroup(groupId),
+    enabled: Boolean(groupId),
+    queryFn: async () => {
+      return await OpenIMSDK.isJoinGroup(groupId!);
+    },
+  });
+};

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>
     );