@droppii-org/chat-mobile 0.2.28 → 0.2.30

package/src/components/ThreadCard/ThreadCard.tsx

@@ -1,5 +1,7 @@
 import { memo, useCallback, useMemo } from 'react';
 import { type GestureResponderEvent } from 'react-native';
+import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import type { SwipeableMethods } from 'react-native-gesture-handler/ReanimatedSwipeable';
 import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { AvatarSection } from './AvatarSection';
 import { NamePrefixIcon } from './NamePrefixIcon';
@@ -7,7 +9,11 @@ import { UnreadBadge } from './UnreadBadge';
 import { formatTimestamp } from '../../utils/dateTimeUtils';
 import { getLastMessageText } from '../../utils/messageUtils';
 import { useConversation, useUserStore } from '../../store';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  MessageReceiveOptType,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+import { MuteThread } from './MuteThread';
 
 interface ThreadCardProps {
   item: string;
@@ -15,18 +21,19 @@ interface ThreadCardProps {
 }
 
 const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
-  const consversation = useConversation(item);
+  const conversation = useConversation(item);
 
   const {
     peerType,
     showName,
     faceURL,
     unreadCount = 0,
-    recvMsgOpt,
+    recvMsgOpt = MessageReceiveOptType.Normal,
     isPinned,
+    isNotInGroup,
     latestMsgSendTime,
     latestMsg,
-  } = consversation || {};
+  } = conversation || {};
 
   const latestMsgData: MessageItem = useMemo(() => {
     let result = null;
@@ -40,7 +47,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
 
   const fullName = showName ?? '';
   const hasUnread = unreadCount > 0;
-  const isMuted = (recvMsgOpt ?? 0) !== 0;
+  const isMuted = recvMsgOpt !== MessageReceiveOptType.Normal;
   const timestamp = formatTimestamp(
     latestMsgSendTime ?? latestMsgData?.sendTime ?? null
   );
@@ -48,7 +55,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
   const lastMessageText = getLastMessageText(
     latestMsgData,
     currentUserId,
-    consversation
+    conversation
   );
 
   const handlePress = useCallback(
@@ -58,79 +65,105 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
     [item, onPress]
   );
 
+  const renderRightActions = useCallback(
+    (
+      _progress: unknown,
+      _translation: unknown,
+      swipeableMethods: SwipeableMethods
+    ) => (
+      <>
+        <KContainer.VisibleView visible={!isNotInGroup}>
+          <MuteThread
+            conversation={conversation}
+            isMuted={isMuted}
+            swipeableMethods={swipeableMethods}
+          />
+        </KContainer.VisibleView>
+      </>
+    ),
+    [isMuted, conversation, isNotInGroup]
+  );
+
   return (
-    <KContainer.Touchable
-      row
-      alignItems="center"
-      paddingH="0.75rem"
-      paddingV="0.75rem"
-      onPress={handlePress}
-      activeOpacity={0.7}
+    <ReanimatedSwipeable
+      friction={2}
+      rightThreshold={40}
+      renderRightActions={renderRightActions}
     >
-      <AvatarSection
-        avatar={faceURL ?? null}
-        fullName={fullName}
-        peerType={peerType}
-      />
+      <KContainer.Touchable
+        row
+        alignItems="center"
+        paddingH="0.75rem"
+        paddingV="0.75rem"
+        onPress={handlePress}
+        activeOpacity={1}
+        background={KColors.white}
+      >
+        <AvatarSection
+          avatar={faceURL ?? null}
+          fullName={fullName}
+          peerType={peerType}
+        />
 
-      {/* Chat-Content */}
-      <KContainer.View flex marginL="0.5rem" paddingB={2}>
-        {/* Row-Title */}
-        <KContainer.View row alignItems="center">
-          <NamePrefixIcon peerType={peerType} />
-          <KLabel.Text
-            typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
-            numberOfLines={1}
-            color={KColors.black}
-            flex
-          >
-            {fullName}
-          </KLabel.Text>
-          <KContainer.VisibleView visible={isMuted}>
-            <KContainer.View marginL="0.25rem">
-              <KImage.VectorIcons
-                name="bell-off"
-                provider="MaterialCommunityIcons"
-                size={16}
-                color={KColors.palette.gray.w500}
-              />
-            </KContainer.View>
-          </KContainer.VisibleView>
-          <KContainer.VisibleView visible={Boolean(timestamp)}>
+        {/* Chat-Content */}
+        <KContainer.View flex marginL="0.5rem" paddingB={2}>
+          {/* Row-Title */}
+          <KContainer.View row alignItems="center">
+            <NamePrefixIcon peerType={peerType} />
             <KLabel.Text
-              typo="TextXsNormal"
-              color={KColors.palette.gray.w400}
-              marginL="0.25rem"
+              typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
+              numberOfLines={1}
+              color={KColors.black}
+              flex
             >
-              {timestamp}
+              {fullName}
             </KLabel.Text>
-          </KContainer.VisibleView>
-        </KContainer.View>
-
-        {/* In-Text */}
-        <KContainer.View row alignItems="center">
-          <KLabel.Text
-            typo={hasUnread ? 'TextNmMedium' : 'TextNmNormal'}
-            color={hasUnread ? KColors.black : KColors.gray.normal}
-            numberOfLines={1}
-            flex
-          >
-            {lastMessageText}
-          </KLabel.Text>
-          <KContainer.VisibleView visible={Boolean(isPinned)}>
-            <KContainer.View marginL="0.5rem">
-              <KImage.VectorIcons
-                name="pin-outline"
-                provider="MaterialCommunityIcons"
-                size={14}
+            <KContainer.VisibleView visible={isMuted}>
+              <KContainer.View marginL="0.25rem">
+                <KImage.VectorIcons
+                  name="bell-off"
+                  provider="MaterialCommunityIcons"
+                  size={16}
+                  color={KColors.palette.gray.w500}
+                />
+              </KContainer.View>
+            </KContainer.VisibleView>
+            <KContainer.VisibleView visible={Boolean(timestamp)}>
+              <KLabel.Text
+                typo="TextXsNormal"
                 color={KColors.palette.gray.w400}
-              />
-            </KContainer.View>
-          </KContainer.VisibleView>
-          <UnreadBadge count={unreadCount} />
+                marginL="0.25rem"
+              >
+                {timestamp}
+              </KLabel.Text>
+            </KContainer.VisibleView>
+          </KContainer.View>
+
+          {/* In-Text */}
+          <KContainer.View row alignItems="center">
+            <KLabel.Text
+              typo={hasUnread ? 'TextNmMedium' : 'TextNmNormal'}
+              color={hasUnread ? KColors.black : KColors.gray.normal}
+              numberOfLines={1}
+              flex
+            >
+              {lastMessageText}
+            </KLabel.Text>
+            <KContainer.VisibleView visible={Boolean(isPinned)}>
+              <KContainer.View marginL="0.5rem">
+                <KImage.VectorIcons
+                  name="pin-outline"
+                  provider="MaterialCommunityIcons"
+                  size={14}
+                  color={KColors.palette.gray.w400}
+                />
+              </KContainer.View>
+            </KContainer.VisibleView>
+            <UnreadBadge count={unreadCount} />
+          </KContainer.View>
         </KContainer.View>
-      </KContainer.View>
-    </KContainer.Touchable>
+      </KContainer.Touchable>
+    </ReanimatedSwipeable>
   );
 });
 

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

@@ -6,7 +6,7 @@ import {
   KRadiusValue,
   KSpacingValue,
 } from '@droppii/libs';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { messageStyles } from '../../messages/styles';
 import type {
@@ -14,7 +14,7 @@ import type {
   InputButtonItem,
   IRunConversationFlowPayload,
 } from '../../../types/flows';
-import { DEFAULT_BUTTON_ID } from '../../../utils/flows';
+import { DEFAULT_BUTTON_ID, isContextButton } from '../../../utils/flows';
 import { trans } from '../../../translation';
 
 interface IInputButtonFlow {
@@ -26,6 +26,14 @@ interface IInputButtonFlow {
 export const InputButtonFlow = memo((props: IInputButtonFlow) => {
   const { nodeData, onResetFlow, onRunFlow } = props || {};
 
+  const buttonList = useMemo(() => {
+    return (
+      nodeData?.data?.buttons?.filter(
+        (n) => !isContextButton(n?.label || '')
+      ) || []
+    );
+  }, [nodeData]);
+
   const onPressItem = useCallback(
     (item: InputButtonItem) => {
       if (item.id === DEFAULT_BUTTON_ID) {
@@ -71,7 +79,7 @@ export const InputButtonFlow = memo((props: IInputButtonFlow) => {
   return (
     <KContainer.View style={styles.bubble}>
       <KContainer.View style={styles.buttonsContainer}>
-        {nodeData?.data?.buttons?.map((item) => renderButtonItem(item))}
+        {buttonList?.map((item) => renderButtonItem(item))}
       </KContainer.View>
     </KContainer.View>
   );

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/config/uploadLimits.ts

@@ -3,7 +3,7 @@ const MB = 1024 * 1024;
 export const UPLOAD_LIMITS = {
   image: 15 * MB,
   video: 200 * MB,
-  file: 50 * MB,
+  file: 20 * MB,
 } as const;
 
 // Max concurrent thumbnail generations and file uploads.

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,17 @@ 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],
 };
 
 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,