@droppii-org/chat-mobile 0.2.12 → 0.2.13

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