@droppii-org/chat-mobile 0.2.12 → 0.2.14

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

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

@@ -79,6 +79,7 @@ export interface ChatComposerProps {
   renderQuickActions?: ChatQuickActionsProps['renderQuickActions'];
   renderAttachmentAction?: ChatAttachmentPanelProps['renderAction'];
   attachmentColumns?: number;
+  isEmptyMessage: boolean;
 }
 
 export interface ChatListProps {

package/src/screens/inbox/Inbox.tsx

@@ -5,7 +5,6 @@ import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { MessagesTab } from './MessagesTab';
 
 interface InboxProps {
-  applicationType: string;
   onPressThread?: (item: string) => void;
   onPressSearch?: () => void;
   onPressEdit?: () => void;
@@ -15,13 +14,7 @@ interface InboxProps {
 type TabRoute = { key: string; title: string };
 
 const Inbox = memo(
-  ({
-    applicationType,
-    onPressThread,
-    onPressSearch,
-    onPressEdit,
-    onPressGroup,
-  }: InboxProps) => {
+  ({ onPressThread, onPressSearch, onPressEdit, onPressGroup }: InboxProps) => {
     const [index, setIndex] = useState(0);
     const [routes] = useState<TabRoute[]>([
       { key: 'messages', title: 'Tin nhắn' },
@@ -30,16 +23,11 @@ const Inbox = memo(
     const renderScene = useCallback(
       ({ route }: { route: TabRoute }) => {
         if (route.key === 'messages') {
-          return (
-            <MessagesTab
-              applicationType={applicationType}
-              onPressThread={onPressThread}
-            />
-          );
+          return <MessagesTab onPressThread={onPressThread} />;
         }
         return null;
       },
-      [applicationType, onPressThread]
+      [onPressThread]
     );
 
     const renderTabBar = useCallback(

package/src/screens/inbox/MessagesTab.tsx

@@ -4,69 +4,68 @@ import { KContainer, KDivider, KLabel, KColors } from '@droppii/libs';
 import { useConversationList } from '../../hooks/useConversationList';
 import { ThreadCard } from '../../components/ThreadCard';
 import { useConversationStore } from '../../store';
+import { useChatContext } from '../../context';
 
 interface MessagesTabProps {
-  applicationType: string;
   onPressThread?: (item: string) => void;
 }
 
 const Separator = () => <KDivider type="line" size="hairline" />;
 const keyExtractor = (item: string) => item;
 
-export const MessagesTab = memo(
-  ({ applicationType, onPressThread }: MessagesTabProps) => {
-    const data = useConversationStore((state) => state.list);
+export const MessagesTab = memo(({ onPressThread }: MessagesTabProps) => {
+  const data = useConversationStore((state) => state.list);
+  const applicationType = useChatContext().applicationType;
 
-    const { isLoading, refetch, isRefetching } = useConversationList({
-      applicationType,
-      page: 1,
-    });
+  const { isLoading, refetch, isRefetching } = useConversationList({
+    applicationType,
+    page: 1,
+  });
 
-    const handleThreadPress = useCallback(
-      (params: { item: string; event: GestureResponderEvent }) => {
-        onPressThread?.(params.item);
-      },
-      [onPressThread]
-    );
+  const handleThreadPress = useCallback(
+    (params: { item: string; event: GestureResponderEvent }) => {
+      onPressThread?.(params.item);
+    },
+    [onPressThread]
+  );
 
-    const renderItem = useCallback(
-      ({ item }: { item: string }) => (
-        <ThreadCard item={item} onPress={handleThreadPress} />
-      ),
-      [handleThreadPress]
-    );
+  const renderItem = useCallback(
+    ({ item }: { item: string }) => (
+      <ThreadCard item={item} onPress={handleThreadPress} />
+    ),
+    [handleThreadPress]
+  );
 
-    const LoadingComponent = (
-      <KContainer.View center flex paddingV="3rem">
-        <ActivityIndicator size="large" color={KColors.palette.primary.w400} />
-      </KContainer.View>
-    );
+  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}>
-          Không có tin nhắn nào
-        </KLabel.Text>
-      </KContainer.View>
-    );
+  const EmptyComponent = isLoading ? null : (
+    <KContainer.View center flex paddingV="3rem">
+      <KLabel.Text typo="TextSmNormal" color={KColors.palette.gray.w400}>
+        Không có tin nhắn nào
+      </KLabel.Text>
+    </KContainer.View>
+  );
 
-    if (isLoading && data.length === 0) {
-      return LoadingComponent;
-    }
-
-    return (
-      <KContainer.FlatList
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        ItemSeparatorComponent={Separator}
-        ListEmptyComponent={EmptyComponent}
-        refreshing={isRefetching}
-        onRefresh={refetch}
-        showsVerticalScrollIndicator={false}
-      />
-    );
+  if (isLoading && data.length === 0) {
+    return LoadingComponent;
   }
-);
+
+  return (
+    <KContainer.FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      ItemSeparatorComponent={Separator}
+      ListEmptyComponent={EmptyComponent}
+      refreshing={isRefetching}
+      onRefresh={refetch}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+});
 
 MessagesTab.displayName = 'MessagesTab';

package/src/services/endpoints.ts

@@ -16,6 +16,12 @@ export const ENDPOINTS = {
     get urlMetadata() {
       return getApiEndpoint('urlMetadata');
     },
+    conversationFlow: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}`,
+    resetConversationFlow: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/reset`,
+    runConversationFlow: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/run`,
   },
   uploaderService: {
     get uploadImage() {

package/src/translation/resources/i18n.ts

@@ -21,6 +21,8 @@ const i18nKey: Record<string, string> = {
   'msg_type_file': '[File đính kèm]',
   'msg_type_link': '[Liên kết]',
   'msg_type_revoke': 'Đã thu hồi tin nhắn',
+  'start': 'Bắt đầu',
+  'restart': 'Bắt đầu lại',
 };
 
 export default {

package/src/types/chat.ts

@@ -5,6 +5,11 @@ import {
 } from '@droppii/openim-rn-client-sdk';
 import type { PropsWithChildren } from 'react';
 import type { IUrlMetadata } from './common';
+import type {
+  IConversationFlow,
+  IConversationFlowStep,
+  IRunConversationFlowPayload,
+} from './flows';
 
 export const EventProvider = {
   ga: 'ga',
@@ -66,7 +71,7 @@ export interface DConversationItem extends ConversationItem {
   conversationId: string;
   chatCategory: DChatCategory;
   chatType: PeerType;
-  applicationType: string;
+  applicationType: DChatApplicationType;
   memberRole: DMemberRole;
   pinnedAt: string | null;
   isMuted: boolean;
@@ -123,6 +128,7 @@ export interface IMessageItemEx {
     content: string;
   };
   urlMetadata?: IUrlMetadata;
+  flow?: IRunConversationFlowPayload;
 }
 
 export interface MessageStore {
@@ -135,3 +141,12 @@ export interface MessageStore {
   deleteOneMessage: (clientMsgID: string) => void;
   reset: () => void;
 }
+
+export interface ChatDetailContextType {
+  conversationFlow?: IConversationFlow;
+  refetchConversationFlow: () => void;
+  isBotConversation: boolean;
+  setConverationFlowStep: (step: IConversationFlowStep) => void;
+}
+
+export interface ChatDetailProviderProps extends PropsWithChildren {}

package/src/types/flows.ts

@@ -0,0 +1,102 @@
+import type { PeerType } from '@droppii/openim-rn-client-sdk';
+import type { DChatApplicationType, DChatCategory } from './chat';
+
+/** START NODE TYPE */
+export const NodeTypes = {
+  BubbleText: 'bubble-text',
+  BubbleImage: 'bubble-image',
+  InputText: 'input-text',
+  InputButtons: 'input-buttons',
+  LogicCsTeam: 'logic-cs-team',
+} as const;
+
+export type NodeTypes = (typeof NodeTypes)[keyof typeof NodeTypes];
+
+export const ReactFlowsNodeTypes = {
+  Group: 'group',
+  Start: 'start',
+} as const;
+
+export type ReactFlowsNodeTypes =
+  (typeof ReactFlowsNodeTypes)[keyof typeof ReactFlowsNodeTypes];
+
+export interface BaseNodeData {
+  id: string;
+  type: NodeTypes;
+  parentId: string;
+}
+
+export interface BubbleTextNodeData {
+  content?: string;
+  plainText?: string;
+}
+
+export interface BubbleImageNodeData {
+  sourceType: 'link' | 'upload' | 'giphy' | 'unsplash' | 'icon';
+  url?: string;
+  onClickLink?: boolean;
+}
+
+export interface InputButtonItem {
+  id: string;
+  label: string;
+}
+
+export interface LogicCsTeamNodeData {
+  csTeamId?: string;
+}
+
+export interface InputButtonsNodeData {
+  buttons?: InputButtonItem[];
+}
+
+export interface InputTextNodeData {
+  longText?: boolean;
+  placeholder?: string;
+  buttonLabel?: string;
+}
+
+export type NodeDataMap = {
+  [NodeTypes.BubbleText]: BubbleTextNodeData;
+  [NodeTypes.BubbleImage]: BubbleImageNodeData;
+  [NodeTypes.InputText]: InputTextNodeData;
+  [NodeTypes.InputButtons]: InputButtonsNodeData;
+  [NodeTypes.LogicCsTeam]: LogicCsTeamNodeData;
+};
+
+export type GroupChild<T extends NodeTypes = NodeTypes> = {
+  data: NodeDataMap[T];
+} & BaseNodeData;
+
+export interface GroupNodeData {
+  label: string;
+  children: GroupChild[];
+}
+
+/** END NODE TYPE */
+
+export interface IConversationFlowStep {
+  id: string;
+  type: ReactFlowsNodeTypes;
+  data: GroupNodeData;
+}
+
+export interface IConversationFlow {
+  conversationId: string;
+  chatCategory: DChatCategory;
+  chatType: PeerType;
+  applicationType: DChatApplicationType;
+  flowCurrentStep: IConversationFlowStep | null;
+}
+
+export interface IRunConversationFlowResponse {
+  flowNextStep: IConversationFlowStep | null;
+}
+
+export interface IRunConversationFlowPayload {
+  groupId: string;
+  childId: string | null;
+  actionId: string | null;
+  //for send msg
+  plainText?: string;
+}

package/src/utils/flows.ts

@@ -0,0 +1,18 @@
+import {
+  NodeTypes,
+  type GroupChild,
+  type IConversationFlowStep,
+} from '../types/flows';
+
+export const getFlowInputButtonsNode = (
+  step?: IConversationFlowStep | null
+) => {
+  if (!step) return null;
+  const childrenNode = step?.data?.children || [];
+  const inputButtonsNode = childrenNode?.find(
+    (f) => f.type === NodeTypes.InputButtons
+  ) as GroupChild<'input-buttons'>;
+  return inputButtonsNode;
+};
+
+export const DEFAULT_BUTTON_ID = 'default-item-button';

package/src/utils/url.ts

@@ -32,3 +32,10 @@ const URL_REGEX = new RegExp(
 export function extractUrls(text: string): string[] {
   return text.match(URL_REGEX) ?? [];
 }
+
+export function normalizeUrl(url: string) {
+  if (!/^https?:\/\//i.test(url)) {
+    return `https://${url}`;
+  }
+  return url;
+}