@droppii-org/chat-mobile 0.2.12 → 0.2.13

package/src/context/ChatDetailContext.tsx

@@ -0,0 +1,85 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import type {
+  ChatDetailContextType,
+  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';
+
+export const ChatDetailContext = createContext<ChatDetailContextType>({
+  isBotConversation: false,
+  conversationFlow: undefined,
+  refetchConversationFlow: () => {},
+  setConverationFlowStep: () => {},
+});
+
+export const useChatDetailContext = (): ChatDetailContextType => {
+  const context = useContext(ChatDetailContext);
+  if (!context) {
+    throw new Error(
+      'useChatDetailContext must be used within ChatDetailProvider'
+    );
+  }
+  return context;
+};
+
+export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
+  const conversationId = useConversationStore(
+    (state) => state.currentConversationId || ''
+  );
+  const conversation = useConversationStore(
+    (state) => state.map[conversationId]
+  );
+  const [conversationFlow, setConverationFlow] = useState<
+    IConversationFlow | undefined
+  >(undefined);
+
+  const isBotConversation = useMemo(() => {
+    return conversation?.peerType === PeerType.Bot;
+  }, [conversation]);
+
+  const setConverationFlowStep = useCallback((step: IConversationFlowStep) => {
+    setConverationFlow(
+      (prev) =>
+        ({
+          ...prev,
+          flowCurrentStep: step,
+        }) as IConversationFlow
+    );
+  }, []);
+
+  const getConversationFlow = useCallback(async () => {
+    const res = await fechtCurrentConversationFlow(conversationId);
+    if (res) {
+      setConverationFlow(res);
+    }
+  }, [conversationId]);
+
+  useEffect(() => {
+    if (!!conversationId && !!isBotConversation) {
+      getConversationFlow();
+    }
+  }, [conversationId, isBotConversation, getConversationFlow]);
+
+  return (
+    <ChatDetailContext.Provider
+      value={{
+        conversationFlow,
+        refetchConversationFlow: () => {},
+        setConverationFlowStep,
+        isBotConversation,
+      }}
+    >
+      {children}
+    </ChatDetailContext.Provider>
+  );
+};

package/src/hooks/flows/useCurrentConversationFlow.ts

@@ -0,0 +1,11 @@
+import { ENDPOINTS } from '../../services/endpoints';
+import type { BaseResponse } from '../../types/auth';
+import { apiInstance } from '../../services/apis';
+import type { IConversationFlow } from '../../types/flows';
+
+export const fechtCurrentConversationFlow = async (conversationId: string) => {
+  const res = await apiInstance?.get<BaseResponse<IConversationFlow>>(
+    ENDPOINTS.chatService.conversationFlow(conversationId)
+  );
+  return res?.data?.data || undefined;
+};

package/src/hooks/flows/useFlow.ts

@@ -0,0 +1,63 @@
+import { useMutation } from '@tanstack/react-query';
+import { conversationQueryKeys } from '../query-keys';
+import { useConversationStore } from '../../store';
+import { apiInstance } from '../../services/apis';
+import type { BaseResponse } from '../../types/auth';
+import { ENDPOINTS } from '../../services/endpoints';
+import type {
+  IConversationFlow,
+  IRunConversationFlowPayload,
+  IRunConversationFlowResponse,
+} from '../../types/flows';
+import { useSendMessage } from '../message/useSendMessage';
+import { useChatDetailContext } from '../../context/ChatDetailContext';
+
+export const useResetFlow = () => {
+  const conversationId =
+    useConversationStore((state) => state.currentConversationId) || '';
+  const { mutate: runFlow } = useRunFlow();
+  return useMutation({
+    mutationKey: conversationQueryKeys.flow(conversationId),
+    mutationFn: async () => {
+      const res = await apiInstance?.post<BaseResponse<IConversationFlow>>(
+        ENDPOINTS.chatService.resetConversationFlow(conversationId),
+        {}
+      );
+      return res?.data?.data || undefined;
+    },
+    onSuccess: (data) => {
+      if (data?.flowCurrentStep?.id) {
+        runFlow({
+          groupId: data?.flowCurrentStep?.id,
+          childId: null,
+          actionId: null,
+        });
+      }
+    },
+  });
+};
+
+export const useRunFlow = () => {
+  const conversationId =
+    useConversationStore((state) => state.currentConversationId) || '';
+  const { sendMessage } = useSendMessage();
+  const { setConverationFlowStep } = useChatDetailContext();
+  return useMutation({
+    mutationKey: conversationQueryKeys.runFlow(conversationId),
+    mutationFn: async (payload: IRunConversationFlowPayload) => {
+      await sendMessage({
+        plainText: payload?.plainText || '',
+        flow: payload,
+      });
+      const res = await apiInstance?.post<
+        BaseResponse<IRunConversationFlowResponse>
+      >(ENDPOINTS.chatService.runConversationFlow(conversationId), payload);
+      return res?.data?.data || undefined;
+    },
+    onSuccess: (data) => {
+      if (data?.flowNextStep) {
+        setConverationFlowStep(data?.flowNextStep);
+      }
+    },
+  });
+};

package/src/hooks/message/useSendMessage.ts

@@ -13,6 +13,7 @@ import { useChatContext } from '../../context';
 import { generateContentBasedOnMessageType } from '../../utils/conversation';
 import { useMessageStore } from '../../store/message';
 import type { IUrlMetadata } from '../../types/common';
+import type { IRunConversationFlowPayload } from '../../types/flows';
 
 export const useSendMessage = () => {
   const applicationType = useChatContext().applicationType;
@@ -23,10 +24,12 @@ export const useSendMessage = () => {
       plainText,
       files,
       urlMetadata,
+      flow,
     }: {
       plainText?: string;
       files?: UploadFileItem[]; //TODO
       urlMetadata?: IUrlMetadata;
+      flow?: IRunConversationFlowPayload;
     }) => {
       const { userID: recvID, groupID } =
         useConversationStore.getState().getCurrentConversation() || {};
@@ -62,6 +65,7 @@ export const useSendMessage = () => {
         const extendMessageInfo: IMessageItemEx = {
           applicationType,
           urlMetadata,
+          flow,
         };
 
         const successMessage = await OpenIMSDK.sendMessage({

package/src/hooks/query-keys.ts

@@ -11,6 +11,12 @@ export const conversationQueryKeys = {
   details: () => [...conversationQueryKeys.all, 'detail'] as const,
   detail: (conversationId: string) =>
     [...conversationQueryKeys.details(), conversationId] as const,
+  flow: (conversationId: string) => ['conversationFlow', conversationId],
+  resetFlow: (conversationId: string) => [
+    'resetConversationFlow',
+    conversationId,
+  ],
+  runFlow: (conversationId: string) => ['runConversationFlow', conversationId],
 };
 
 export type ConversationQueryKeys = typeof conversationQueryKeys;

package/src/hooks/useConversationList.ts

@@ -5,10 +5,14 @@ import OpenIMSDK, {
 } from '@droppii/openim-rn-client-sdk';
 import { conversationQueryKeys } from './query-keys';
 import { useConversationStore } from '../store';
-import type { DConversationItem, DMessageItem } from '../types/chat';
+import type {
+  DChatApplicationType,
+  DConversationItem,
+  DMessageItem,
+} from '../types/chat';
 
 type Params = {
-  applicationType: string;
+  applicationType: DChatApplicationType;
   page: number;
   enabled?: boolean;
 };
@@ -23,17 +27,22 @@ function toConversationItem(raw: ConversationItem): DConversationItem {
     }
   }
 
-  let applicationType: string | undefined;
+  let applicationType: DChatApplicationType | undefined;
   if (raw.ex) {
     try {
-      applicationType = (JSON.parse(raw.ex) as { applicationType?: string })
-        .applicationType;
+      applicationType = (
+        JSON.parse(raw.ex) as { applicationType?: DChatApplicationType }
+      ).applicationType;
     } catch {
       // leave undefined
     }
   }
 
-  return { ...(raw as DConversationItem), lastMessage, applicationType };
+  return {
+    ...(raw as DConversationItem),
+    lastMessage,
+    applicationType: applicationType as DChatApplicationType,
+  };
 }
 
 export function useConversationList({
@@ -55,7 +64,6 @@ export function useConversationList({
         count: 20,
         applicationType,
       });
-
       const conversations = rawList.map(toConversationItem);
       useConversationStore.getState().updateConversations(conversations);
       return conversations;

package/src/hooks/useLinkPreview/useFetchUrlMetadata.ts

@@ -1,4 +1,4 @@
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { commonQueryKeys } from '../query-keys';
 import { apiInstance } from '../../services/apis';
 import type { BaseResponse } from '../../types/auth';
@@ -19,5 +19,4 @@ export const useFetchUrlMetadata = (url?: string) =>
         : null;
     },
     enabled: !!url,
-    placeholderData: keepPreviousData,
   });

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

@@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo } from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import Reanimated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { KContainer, KColors, KImage } from '@droppii/libs';
+import { KContainer, KColors, KImage, KButton } from '@droppii/libs';
 
 const IS_IOS = Platform.OS === 'ios';
 const INPUT_LINE_HEIGHT = 22.4;
@@ -25,6 +25,10 @@ import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useAttachmentSendHandler } from './hooks/useAttachmentSendHandler';
 import { isVideoFromPicker } from '../../utils/imageUtils';
+import { useChatDetailContext } from '../../context/ChatDetailContext';
+import { trans } from '../../translation';
+import { useRunFlow } from '../../hooks/flows/useFlow';
+import { ReactFlowsNodeTypes } from '../../types/flows';
 
 export const ChatComposer = memo(
   ({
@@ -43,10 +47,14 @@ export const ChatComposer = memo(
     renderQuickActions,
     renderAttachmentAction,
     attachmentColumns,
+    isEmptyMessage = false,
   }: ChatComposerProps) => {
     const insets = useSafeAreaInsets();
     const hasAttachmentActions = !!attachmentActions?.length;
 
+    const { isBotConversation, conversationFlow } = useChatDetailContext();
+    const { mutate: runFlow, isPending } = useRunFlow();
+
     // Link preview
     const {
       isVisible: showLinkPreview,
@@ -207,6 +215,15 @@ export const ChatComposer = memo(
       [setIsInputWrapped]
     );
 
+    const onStartConversationFlow = useCallback(() => {
+      runFlow({
+        groupId: conversationFlow?.flowCurrentStep?.id || '',
+        actionId: null,
+        childId: null,
+        plainText: trans('start'),
+      });
+    }, [runFlow, conversationFlow]);
+
     // Reset wrapped state when value is cleared
     useEffect(() => {
       if (!value) {
@@ -234,6 +251,27 @@ export const ChatComposer = memo(
       [insets.bottom, isAttachmentOpen]
     );
 
+    if (
+      isBotConversation &&
+      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
+      isEmptyMessage
+    ) {
+      return (
+        <KContainer.View padding={'1.5rem'} paddingB={0}>
+          <KButton.Solid
+            size="md"
+            label={trans('start')}
+            stretch
+            icon={{
+              vectorName: 'chat-square-o',
+              size: 20,
+            }}
+            loading={isPending}
+            onPress={onStartConversationFlow}
+          />
+        </KContainer.View>
+      );
+    }
     return (
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
         <ChatQuickActions

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

@@ -32,6 +32,7 @@ import type {
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import type { IUrlMetadata } from '../../types/common';
 import { useMessageStore } from '../../store/message';
+import { ChatDetailProvider } from '../../context/ChatDetailContext';
 
 const ChatDetail = memo(
   ({
@@ -222,84 +223,89 @@ const ChatDetail = memo(
     const insets = useSafeAreaInsets();
 
     return (
-      <KContainer.Page flex edges={['bottom']}>
-        <ChatDetailHeader
-          title={resolvedTitle}
-          subtitle={resolvedSubtitle}
-          avatarUri={resolvedAvatarUri}
-          avatarFullName={resolvedAvatarFullName}
-          peerType={resolvedPeerType}
-          applicationType={resolvedApplicationType}
-          showAddMember={resolvedShowAddMember}
-          onBack={onBack ?? handleBackDefault}
-          onPressSearch={
-            onPressSearch ?? (() => console.log('[onPressSearch]'))
-          }
-          onPressAddMember={
-            onPressAddMember ?? (() => console.log('[onPressAddMember]'))
-          }
-          onPressMenu={onPressMenu ?? (() => console.log('[onPressMenu]'))}
-          onPressAvatar={
-            onPressAvatar ?? (() => console.log('[onPressAvatar]'))
-          }
-        />
-
-        <KeyboardAvoidingView
-          style={styles.keyboardAvoiding}
-          behavior="padding"
-          keyboardVerticalOffset={Platform.select({
-            android: insets.bottom,
-            default: 0,
-          })}
-        >
-          <ChatListLegend
-            messages={messages}
-            currentUserId={currentUserId}
-            renderChat={renderChat}
-            onLoadEarlier={onLoadEarlier}
-            isLoading={isLoading}
-            isLoadingEarlier={isLoadingEarlier}
-            hasMoreEarlier={hasMoreEarlier}
-            onMediaPress={(items, index) => {
-              mediaViewerRef.current?.show(items, index);
-            }}
-            onPressUrl={onPressUrl}
-          />
-
-          <ChatComposer
-            value={currentInput}
-            placeholder={inputPlaceholder}
-            onChangeText={handleChangeText}
-            onSend={handleSend}
-            onMessageSent={handleAttachmentMessageSent}
-            onPressAttach={
-              onPressAttach ?? (() => console.log('[onPressAttach]'))
+      <ChatDetailProvider>
+        <KContainer.Page flex edges={['bottom']}>
+          <ChatDetailHeader
+            title={resolvedTitle}
+            subtitle={resolvedSubtitle}
+            avatarUri={resolvedAvatarUri}
+            avatarFullName={resolvedAvatarFullName}
+            peerType={resolvedPeerType}
+            applicationType={resolvedApplicationType}
+            showAddMember={resolvedShowAddMember}
+            onBack={onBack ?? handleBackDefault}
+            onPressSearch={
+              onPressSearch ?? (() => console.log('[onPressSearch]'))
             }
-            onPressEmoji={onPressEmoji ?? (() => console.log('[onPressEmoji]'))}
-            showQuickActions={showQuickActions}
-            quickActions={quickActions ?? quickActionsDefault}
-            attachmentActions={attachmentActions ?? attachmentActionsDefault}
-            onQuickActionPress={
-              onQuickActionPress ??
-              ((action: DChatQuickAction) => {
-                console.log('[onQuickActionPress]', action.id, action.meta);
-              })
+            onPressAddMember={
+              onPressAddMember ?? (() => console.log('[onPressAddMember]'))
             }
-            onAttachmentAction={
-              onAttachmentAction ??
-              ((action: DChatAttachmentAction) => {
-                console.log('[onAttachmentAction]', action.id, action.meta);
-              })
+            onPressMenu={onPressMenu ?? (() => console.log('[onPressMenu]'))}
+            onPressAvatar={
+              onPressAvatar ?? (() => console.log('[onPressAvatar]'))
             }
-            renderQuickAction={renderQuickAction}
-            renderQuickActions={renderQuickActions}
-            renderAttachmentAction={renderAttachmentAction}
-            attachmentColumns={attachmentColumns}
           />
-        </KeyboardAvoidingView>
 
-        <MediaViewerModal ref={mediaViewerRef} />
-      </KContainer.Page>
+          <KeyboardAvoidingView
+            style={styles.keyboardAvoiding}
+            behavior="padding"
+            keyboardVerticalOffset={Platform.select({
+              android: insets.bottom,
+              default: 0,
+            })}
+          >
+            <ChatListLegend
+              messages={messages}
+              currentUserId={currentUserId}
+              renderChat={renderChat}
+              onLoadEarlier={onLoadEarlier}
+              isLoading={isLoading}
+              isLoadingEarlier={isLoadingEarlier}
+              hasMoreEarlier={hasMoreEarlier}
+              onMediaPress={(items, index) => {
+                mediaViewerRef.current?.show(items, index);
+              }}
+              onPressUrl={onPressUrl}
+            />
+
+            <ChatComposer
+              value={currentInput}
+              placeholder={inputPlaceholder}
+              onChangeText={handleChangeText}
+              onSend={handleSend}
+              onMessageSent={handleAttachmentMessageSent}
+              onPressAttach={
+                onPressAttach ?? (() => console.log('[onPressAttach]'))
+              }
+              onPressEmoji={
+                onPressEmoji ?? (() => console.log('[onPressEmoji]'))
+              }
+              showQuickActions={showQuickActions}
+              quickActions={quickActions ?? quickActionsDefault}
+              attachmentActions={attachmentActions ?? attachmentActionsDefault}
+              onQuickActionPress={
+                onQuickActionPress ??
+                ((action: DChatQuickAction) => {
+                  console.log('[onQuickActionPress]', action.id, action.meta);
+                })
+              }
+              onAttachmentAction={
+                onAttachmentAction ??
+                ((action: DChatAttachmentAction) => {
+                  console.log('[onAttachmentAction]', action.id, action.meta);
+                })
+              }
+              renderQuickAction={renderQuickAction}
+              renderQuickActions={renderQuickActions}
+              renderAttachmentAction={renderAttachmentAction}
+              attachmentColumns={attachmentColumns}
+              isEmptyMessage={messages?.length === 0}
+            />
+          </KeyboardAvoidingView>
+
+          <MediaViewerModal ref={mediaViewerRef} />
+        </KContainer.Page>
+      </ChatDetailProvider>
     );
   }
 );

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

@@ -13,6 +13,11 @@ import type { DMessageItem } from '../../types/chat';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
 import { LegendChatLoadEarlier } from './legend/LegendChatLoadEarlier';
+import { useChatDetailContext } from '../../context/ChatDetailContext';
+import { getFlowInputButtonsNode } from '../../utils/flows';
+import { InputButtonFlow } from '../../components/flows/inputButtons';
+import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
+import type { IRunConversationFlowPayload } from '../../types/flows';
 
 export const ChatListLegend = memo(
   ({
@@ -35,6 +40,15 @@ export const ChatListLegend = memo(
       [messages]
     );
 
+    const { isBotConversation, conversationFlow } = useChatDetailContext();
+
+    const lastMessageId = useMemo(() => {
+      const last = messages[messages.length - 1];
+      return last?.clientMsgID || last?.serverMsgID || null;
+    }, [messages]);
+    const { mutate: runFlow } = useRunFlow();
+    const { mutate: resetFlow } = useResetFlow();
+
     const listRef = useRef<LegendListRef>(null);
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
@@ -71,6 +85,17 @@ export const ChatListLegend = memo(
       []
     );
 
+    const onRunFlow = useCallback(
+      (payload: IRunConversationFlowPayload) => {
+        runFlow(payload);
+      },
+      [runFlow]
+    );
+
+    const onResetFlow = useCallback(() => {
+      resetFlow();
+    }, [resetFlow]);
+
     const renderItem = useCallback(
       ({ item, index }: any) => {
         try {
@@ -78,7 +103,9 @@ export const ChatListLegend = memo(
 
           const message = item as DMessageItem;
           const isOutgoing = message.sendID === currentUserId;
-          // Use same fallback as precomputeLegendListData
+          const isLastIncoming =
+            !isOutgoing &&
+            (message.clientMsgID || message.serverMsgID) === lastMessageId;
           const messageId =
             message.clientMsgID ||
             message.serverMsgID ||
@@ -86,11 +113,18 @@ export const ChatListLegend = memo(
 
           const messageData = messageDataMap.get(messageId);
           if (!messageData) {
-            return null; // Shouldn't happen if logic is consistent
+            return null;
           }
 
           const { dayStart, createdAt } = messageData;
 
+          let flowInputButtonsNode = null;
+          if (isLastIncoming && isBotConversation) {
+            flowInputButtonsNode = getFlowInputButtonsNode(
+              conversationFlow?.flowCurrentStep
+            );
+          }
+
           return (
             <>
               {dayStart && <LegendChatDay createdAt={createdAt} />}
@@ -114,6 +148,13 @@ export const ChatListLegend = memo(
                     onPressUrl={onPressUrl}
                   />
                 )}
+                {!!flowInputButtonsNode && (
+                  <InputButtonFlow
+                    nodeData={flowInputButtonsNode}
+                    onResetFlow={onResetFlow}
+                    onRunFlow={onRunFlow}
+                  />
+                )}
               </KContainer.View>
             </>
           );
@@ -136,6 +177,11 @@ export const ChatListLegend = memo(
         handleItemLayout,
         onMediaPress,
         onPressUrl,
+        isBotConversation,
+        conversationFlow,
+        onResetFlow,
+        onRunFlow,
+        lastMessageId,
       ]
     );
 
@@ -296,7 +342,12 @@ export const ChatListLegend = memo(
           renderItem={renderItem}
           estimatedItemSize={avgItemHeightRef.current}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems
+          recycleItems={!isBotConversation}
+          extraData={
+            !isBotConversation
+              ? `${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`
+              : undefined
+          }
           alignItemsAtEnd
           maintainVisibleContentPosition={!isLoadingEarlier}
           maintainScrollAtEnd={maintainScrollConfig}

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

@@ -9,6 +9,7 @@ import {
 } from '@droppii/libs';
 import { useChatActionPress } from './useChatActionPress';
 import type { DChatQuickAction, ChatQuickActionsProps } from './types';
+import { useResetFlow } from '../../hooks/flows/useFlow';
 
 const QuickActionItem = memo(
   ({
@@ -69,18 +70,24 @@ export const ChatQuickActions = memo(
     renderQuickActions,
   }: ChatQuickActionsProps) => {
     const handleActionPress = useChatActionPress(onActionPress);
+    const { mutate: resetFlow } = useResetFlow();
 
     const renderItem = useCallback<ListRenderItem<DChatQuickAction>>(
       ({ item }) => {
-        const onPress = () => handleActionPress(item);
+        const onPress = () => {
+          handleActionPress(item);
+          if (item.id === 'restart') {
+            resetFlow?.();
+          }
+        };
 
         if (renderAction) {
           return <>{renderAction(item, onPress)}</>;
         }
 
-        return <QuickActionItem action={item} onPress={handleActionPress} />;
+        return <QuickActionItem action={item} onPress={onPress} />;
       },
-      [handleActionPress, renderAction]
+      [handleActionPress, renderAction, resetFlow]
     );
 
     const keyExtractor = useCallback((item: DChatQuickAction) => item.id, []);

package/src/screens/chat-detail/conversationHeader.utils.ts

@@ -32,10 +32,7 @@ export const getConversationSubtitle = (
     return `20 thành viên • ${unreadLabel}`;
   }
 
-  if (
-    conversation.peerType === PeerType.Customer ||
-    conversation.applicationType === 'MALL'
-  ) {
+  if (conversation.peerType === PeerType.Customer) {
     return '338,5K Đã bán • 4,2K Theo dõi';
   }