@droppii-org/chat-mobile 0.2.12 → 0.2.14

package/src/components/flows/inputButtons/index.tsx

@@ -0,0 +1,105 @@
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import { messageStyles } from '../../messages/styles';
+import type {
+  GroupChild,
+  InputButtonItem,
+  IRunConversationFlowPayload,
+} from '../../../types/flows';
+import { DEFAULT_BUTTON_ID } from '../../../utils/flows';
+import { trans } from '../../../translation';
+
+interface IInputButtonFlow {
+  nodeData: GroupChild<'input-buttons'> | null;
+  onResetFlow: () => void;
+  onRunFlow: (payload: IRunConversationFlowPayload) => void;
+}
+
+export const InputButtonFlow = memo((props: IInputButtonFlow) => {
+  const { nodeData, onResetFlow, onRunFlow } = props || {};
+
+  const onPressItem = useCallback(
+    (item: InputButtonItem) => {
+      if (item.id === DEFAULT_BUTTON_ID) {
+        onResetFlow?.();
+      } else {
+        onRunFlow?.({
+          actionId: item.id,
+          groupId: nodeData?.parentId || '',
+          childId: nodeData?.id || '',
+          plainText: item?.label || '',
+        });
+      }
+    },
+    [onRunFlow, onResetFlow, nodeData]
+  );
+
+  const renderButtonItem = useCallback(
+    (item: InputButtonItem) => {
+      return (
+        <KContainer.Touchable
+          key={item.id}
+          style={styles.buttonItem}
+          onPress={() => onPressItem(item)}
+        >
+          <KLabel.Text typo="TextMdMedium">
+            {item?.id === DEFAULT_BUTTON_ID
+              ? trans('restart')
+              : item?.label || ''}
+          </KLabel.Text>
+          <KImage.VectorIcons
+            name="angle-right-o"
+            size={20}
+            color={KColors.gray.light}
+          />
+        </KContainer.Touchable>
+      );
+    },
+    [onPressItem]
+  );
+
+  if (!nodeData) return null;
+
+  return (
+    <KContainer.View style={messageStyles.wrapper}>
+      <KContainer.View style={styles.bubble}>
+        <KContainer.View style={styles.buttonsContainer}>
+          {nodeData?.data?.buttons?.map((item) => renderButtonItem(item))}
+        </KContainer.View>
+      </KContainer.View>
+    </KContainer.View>
+  );
+});
+
+InputButtonFlow.displayName = 'InputButtonFlow';
+
+const styles = StyleSheet.create({
+  bubble: {
+    padding: KSpacingValue['0.5rem'],
+    borderRadius: KSpacingValue['1.25rem'],
+    ...messageStyles.bubbleReceived,
+    marginVertical: KSpacingValue['0.5rem'],
+  },
+  buttonsContainer: {
+    backgroundColor: KColors.white,
+    borderRadius: KRadiusValue['3x'],
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+  buttonItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: KSpacingValue['1rem'],
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+    paddingVertical: KSpacingValue['0.5rem'],
+  },
+});

package/src/components/messages/linkMessage/index.tsx

@@ -98,7 +98,7 @@ export const LinkMessage = memo(
         >
           {!!content?.trim() && (
             <KContainer.View style={styles.textRow}>
-              {renderTextWithLinks(content, urls)}
+              {renderTextWithLinks(content, urls, onPressUrl)}
             </KContainer.View>
           )}
 

package/src/config/api-endpoints.ts

@@ -12,12 +12,14 @@
 export interface ApiEndpoints {
   // Chat service (relative paths - used with axios baseURL)
   urlMetadata: string;
+  conversationFlow: string;
   // Image upload service (relative path - full URL constructed in imageUpload service)
   imageUpload: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
   urlMetadata: '/chat-service/v1/utils/url-metadata',
+  conversationFlow: '/chat-service/v1/app/conversations',
   imageUpload: '/uploader-service/v1/uploader/permanently',
 };
 

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,8 @@ import type {
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import type { IUrlMetadata } from '../../types/common';
 import { useMessageStore } from '../../store/message';
+import { ChatDetailProvider } from '../../context/ChatDetailContext';
+import { normalizeUrl } from '../../utils/url';
 
 const ChatDetail = memo(
   ({
@@ -221,85 +223,97 @@ 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}
-          />
+    const handlePressUrl = useCallback(
+      (url: string) => {
+        onPressUrl?.(normalizeUrl(url));
+      },
+      [onPressUrl]
+    );
 
-          <ChatComposer
-            value={currentInput}
-            placeholder={inputPlaceholder}
-            onChangeText={handleChangeText}
-            onSend={handleSend}
-            onMessageSent={handleAttachmentMessageSent}
-            onPressAttach={
-              onPressAttach ?? (() => console.log('[onPressAttach]'))
+    return (
+      <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={handlePressUrl}
+            />
+
+            <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>
     );
   }
 );