@droppii-org/chat-mobile 0.2.29 → 0.2.31

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

@@ -14,30 +14,22 @@ import { useConversation, useConversationStore } from '../../store';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
-import {
-  getConversationAvatarUri,
-  getConversationSubtitle,
-  getConversationTitle,
-  shouldShowAddMember,
-} from './conversationHeader.utils';
+import { shouldShowAddMember } from './conversationHeader.utils';
 import type { ChatDetailProps } from './types';
-import { ChatDetailProvider } from '../../context/ChatDetailContext';
 import { normalizeUrl } from '../../utils/url';
-// import { ChatMessageAPI } from '../../services/message';
 import { MessageToolboxOverlay } from './messageToolbox/MessageToolboxOverlay';
 import type { MeasuredRect, MessageToolboxRef } from './messageToolbox/types';
 import type { DMessageItem } from '../../types/chat';
+import { useGetConversationDetail } from '../../hooks/conversation/useGetConversationDetail';
 
 const ChatDetail = memo(
   ({
-    conversationId,
+    targetConversationId = '',
+    targetUserId = '',
+    targetGroupId = '',
+    targetBotId = '',
     enabled = true,
-    title,
-    subtitle,
-    avatarUri,
-    avatarFullName,
     showAddMember,
-    getSubtitle,
     onBack,
     onPressSearch,
     onPressAddMember,
@@ -45,10 +37,20 @@ const ChatDetail = memo(
     onPressAvatar,
     onPressUrl,
     customMessageItemFactory,
+    pannelActions,
   }: ChatDetailProps) => {
     const navigation = useNavigation();
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
     const messageToolboxRef = useRef<MessageToolboxRef>(null);
+
+    const { conversationId, isLoading: isLoadingConversation } =
+      useGetConversationDetail({
+        targetConversationId,
+        targetUserId,
+        targetGroupId,
+        targetBotId,
+      });
+
     const conversation = useConversation(conversationId);
 
     const handleBackDefault = useCallback(() => {
@@ -75,31 +77,16 @@ const ChatDetail = memo(
     } = useChatMessages({ conversationId, enabled });
 
     useEffect(() => {
-      useConversationStore.getState().setCurrentConversation(conversationId);
+      if (conversationId) {
+        useConversationStore.getState().setCurrentConversation(conversationId);
+      }
+      return () => {
+        useConversationStore.getState().setCurrentConversation(undefined);
+      };
     }, [conversationId]);
 
-    // useEffect(() => {
-    //   if (!conversationId) return;
-    //   ChatMessageAPI.searchLocalMessages(conversationId, { count: 20 })
-    //     .then((result) => {
-    //       console.log('[TEST searchLocalMessages] success:', result);
-    //     })
-    //     .catch((err) => {
-    //       console.log('[TEST searchLocalMessages] error:', err);
-    //     });
-    // }, [conversationId]);
-
-    const resolvedTitle = title ?? getConversationTitle(conversation);
-    const resolvedAvatarUri =
-      avatarUri ?? getConversationAvatarUri(conversation);
-    const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
-    const resolvedSubtitle = useMemo(() => {
-      if (subtitle !== undefined) return subtitle;
-      if (getSubtitle && conversation) return getSubtitle(conversation);
-      return getConversationSubtitle(conversation);
-    }, [conversation, getSubtitle, subtitle]);
 
     const insets = useSafeAreaInsets();
 
@@ -123,51 +110,48 @@ const ChatDetail = memo(
     );
 
     return (
-      <ChatDetailProvider>
-        <KContainer.Page flex edges={['bottom']}>
-          <ChatDetailHeader
-            conversationId={conversationId}
-            title={resolvedTitle}
-            subtitle={resolvedSubtitle}
-            avatarUri={resolvedAvatarUri}
-            avatarFullName={resolvedAvatarFullName}
-            showAddMember={resolvedShowAddMember}
-            onBack={onBack ?? handleBackDefault}
-            onPressSearch={onPressSearch}
-            onPressAddMember={onPressAddMember}
-            onPressMenu={onPressMenu}
-            onPressAvatar={onPressAvatar}
-          />
-
-          <KeyboardAvoidingView
-            style={styles.keyboardAvoiding}
-            behavior="padding"
-            keyboardVerticalOffset={keyboardVerticalOffset}
-          >
-            <ChatListLegend
-              messages={messages}
-              currentUserId={currentUserId}
-              customMessageItemFactory={customMessageItemFactory}
-              onLoadEarlier={onLoadEarlier}
-              isLoading={isLoading}
-              isLoadingEarlier={isLoadingEarlier}
-              hasMoreEarlier={hasMoreEarlier}
-              onMediaPress={handleMediaPress}
-              onPressUrl={handlePressUrl}
-              onLongPress={handleMessageLongPress}
-            />
-
-            <ChatComposer isEmptyMessage={messages?.length === 0} />
-          </KeyboardAvoidingView>
-
-          <MediaViewerModal ref={mediaViewerRef} />
-          <MessageToolboxOverlay
-            ref={messageToolboxRef}
+      <KContainer.Page flex edges={['bottom']}>
+        <ChatDetailHeader
+          conversationId={conversationId}
+          showAddMember={resolvedShowAddMember}
+          onBack={onBack ?? handleBackDefault}
+          onPressSearch={onPressSearch}
+          onPressAddMember={onPressAddMember}
+          onPressMenu={onPressMenu}
+          onPressAvatar={onPressAvatar}
+        />
+
+        <KeyboardAvoidingView
+          style={styles.keyboardAvoiding}
+          behavior="padding"
+          keyboardVerticalOffset={keyboardVerticalOffset}
+        >
+          <ChatListLegend
+            messages={messages}
             currentUserId={currentUserId}
             customMessageItemFactory={customMessageItemFactory}
+            onLoadEarlier={onLoadEarlier}
+            isLoading={isLoading || isLoadingConversation}
+            isLoadingEarlier={isLoadingEarlier}
+            hasMoreEarlier={hasMoreEarlier}
+            onMediaPress={handleMediaPress}
+            onPressUrl={handlePressUrl}
+            onLongPress={handleMessageLongPress}
+          />
+
+          <ChatComposer
+            isEmptyMessage={messages?.length === 0}
+            pannelActions={pannelActions}
           />
-        </KContainer.Page>
-      </ChatDetailProvider>
+        </KeyboardAvoidingView>
+
+        <MediaViewerModal ref={mediaViewerRef} />
+        <MessageToolboxOverlay
+          ref={messageToolboxRef}
+          currentUserId={currentUserId}
+          customMessageItemFactory={customMessageItemFactory}
+        />
+      </KContainer.Page>
     );
   }
 );

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

@@ -10,13 +10,10 @@ import { AvatarSection } from '../../components/ThreadCard/AvatarSection';
 import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
 import { useConversation } from '../../store';
+import { getConversationSubtitle } from './conversationHeader.utils';
 
 const ChatDetailHeader = memo(
   ({
-    title,
-    subtitle,
-    avatarUri,
-    avatarFullName,
     showAddMember = false,
     conversationId,
     onBack,
@@ -79,8 +76,8 @@ const ChatDetailHeader = memo(
             activeOpacity={0.7}
           >
             <AvatarSection
-              avatar={avatarUri ?? null}
-              fullName={avatarFullName ?? title}
+              avatar={conversation?.faceURL ?? null}
+              fullName={conversation?.showName || ''}
               peerType={conversation?.peerType}
             />
 
@@ -93,31 +90,23 @@ const ChatDetailHeader = memo(
                   numberOfLines={1}
                   flex
                 >
-                  {title}
+                  {conversation?.showName || ''}
                 </KLabel.Text>
               </KContainer.View>
-              {!!subtitle && (
+              {!!conversation && (
                 <KLabel.Text
                   typo="TextSmNormal"
                   color={KColors.palette.gray.w500}
                   numberOfLines={1}
                 >
-                  {subtitle}
+                  {getConversationSubtitle(conversation)}
                 </KLabel.Text>
               )}
             </KContainer.View>
           </KContainer.Touchable>
         </KContainer.View>
       ),
-      [
-        avatarFullName,
-        avatarUri,
-        onBack,
-        onPressAvatar,
-        subtitle,
-        title,
-        conversation?.peerType,
-      ]
+      [onBack, onPressAvatar, conversation]
     );
 
     return (

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

@@ -374,7 +374,7 @@ export const ChatListLegend = memo(
           renderItem={renderItem}
           estimatedItemSize={avgItemHeightRef.current}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems={true}
+          recycleItems={false}
           extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}

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

@@ -1,10 +1,9 @@
 import { memo } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { KContainer, KColors } from '@droppii/libs';
-import type { LoadEarlierMessagesProps } from 'react-native-gifted-chat';
 
 export const ChatLoadEarlier = memo(
-  ({ isLoading = false }: LoadEarlierMessagesProps) => {
+  ({ isLoading = false }: { isLoading: boolean }) => {
     if (!isLoading) {
       return null;
     }

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

@@ -8,7 +8,11 @@ import {
   KSpacingValue,
 } from '@droppii/libs';
 import { useChatActionPress } from './useChatActionPress';
-import type { DChatQuickAction, ChatQuickActionsProps } from './types';
+import {
+  type DChatQuickAction,
+  type ChatQuickActionsProps,
+  DChatQuickActionItemType,
+} from './types';
 import { useResetFlow } from '../../hooks/flows/useFlow';
 
 const QuickActionItem = memo(
@@ -76,7 +80,7 @@ export const ChatQuickActions = memo(
       ({ item }) => {
         const onPress = () => {
           handleActionPress(item);
-          if (item.id === 'restart') {
+          if (item.id === DChatQuickActionItemType.Restart) {
             resetFlow?.();
           }
         };

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

@@ -1,5 +1,11 @@
 import { KColors } from '@droppii/libs';
-import type { DChatQuickAction, DChatAttachmentAction } from './types';
+import {
+  type DChatQuickAction,
+  type DChatPannelAction,
+  DChatQuickActionItemType,
+  DChatPannelActionItemType,
+} from './types';
+import { trans } from '../../translation';
 import { opacityToSolid } from '../../utils/ui';
 
 export const CHAT_BUBBLE_COLORS = {
@@ -10,19 +16,19 @@ export const CHAT_BUBBLE_COLORS = {
   dayLabel: KColors.gray.light,
 } as const;
 
-export const DEFAULT_Chat_QUICK_ACTIONS: DChatQuickAction[] = [
+export const DEFAULT_QUICK_ACTIONS: DChatQuickAction[] = [
   {
-    id: 'restart',
+    id: DChatQuickActionItemType.Restart,
     label: 'Bắt đầu lại',
     iconName: 'refresh',
   },
   {
-    id: 'send-order',
+    id: DChatQuickActionItemType.SendOrder,
     label: 'Gửi đơn hàng',
     iconName: 'file-document-outline',
   },
   {
-    id: 'scam-warning',
+    id: DChatQuickActionItemType.ScamWarning,
     label: 'Cảnh báo lừa đảo/g...',
     iconName: 'alert-outline',
   },
@@ -43,35 +49,35 @@ export const getAttachmentPanelHeight = (
 /** @deprecated use getAttachmentPanelHeight */
 export const DEFAULT_ATTACHMENT_PANEL_HEIGHT = getAttachmentPanelHeight(6);
 
-export const DEFAULT_ATTACHMENT_ACTIONS: DChatAttachmentAction[] = [
+export const DEFAULT_PANNEL_ACTIONS: DChatPannelAction[] = [
   {
-    id: 'gallery',
-    label: 'Ảnh/Video',
+    id: DChatPannelActionItemType.Gallery,
+    label: trans('gallery'),
     iconName: 'image-02-o',
   },
   {
-    id: 'camera',
-    label: 'Chụp ảnh',
+    id: DChatPannelActionItemType.Camera,
+    label: trans('camera'),
     iconName: 'camera-o',
   },
   {
-    id: 'file',
-    label: 'Tài liệu',
+    id: DChatPannelActionItemType.Documents,
+    label: trans('documents'),
     iconName: 'paperclip-o',
   },
-  {
-    id: 'order',
-    label: 'Gửi đơn hàng',
-    iconName: 'receipt-o',
-  },
-  {
-    id: 'product',
-    label: 'Gửi sản phẩm',
-    iconName: 'shopping-basket-o',
-  },
-  {
-    id: 'calendar',
-    label: 'Tạo lịch hẹn',
-    iconName: 'calendar-active-o',
-  },
+  // {
+  //   id: DChatPannelActionItemType.SendOrder,
+  //   label: trans('send_order'),
+  //   iconName: 'receipt-o',
+  // },
+  // {
+  //   id: DChatPannelActionItemType.SendProduct,
+  //   label: trans('send_product'),
+  //   iconName: 'shopping-basket-o',
+  // },
+  // {
+  //   id: DChatPannelActionItemType.CreateAppointment,
+  //   label: trans('create_appointment'),
+  //   iconName: 'calendar-active-o',
+  // },
 ];

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

@@ -4,8 +4,8 @@ export { ChatComposer } from './ChatComposer';
 export { ChatQuickActions } from './ChatQuickActions';
 export { ChatAttachmentPanel } from './ChatAttachmentPanel';
 export {
-  DEFAULT_Chat_QUICK_ACTIONS,
-  DEFAULT_ATTACHMENT_ACTIONS,
+  DEFAULT_QUICK_ACTIONS,
+  DEFAULT_PANNEL_ACTIONS,
   DEFAULT_ATTACHMENT_PANEL_HEIGHT,
 } from './constants';
 export {
@@ -18,17 +18,14 @@ export type {
   DChatActionItem,
   DChatActionIconProvider,
   DChatQuickAction,
-  DChatAttachmentAction,
+  DChatPannelAction,
   ChatDetailProps,
   ChatDetailHeaderProps,
   ChatListProps,
   ChatComposerProps,
   ChatQuickActionsProps,
   ChatQuickActionsRenderParams,
-  ChatAttachmentPanelProps,
+  ChatPanelProps,
 } from './types';
 
-export {
-  DChatMessageType,
-  CUSTOM_MESSAGE_DATA_TYPE,
-} from '../../types/message';
+export { DChatPannelActionItemType, DChatQuickActionItemType } from './types';

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -71,11 +71,7 @@ export const LegendChatMessage = memo(
     const customNode = customMessageItemFactory?.(message);
 
     if (customNode) {
-      return (
-        <LongPressWrapper onLongPress={onLongPress}>
-          {customNode}
-        </LongPressWrapper>
-      );
+      return customNode;
     }
 
     const MessageComponent: ComponentType<MessageProps> =

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

@@ -1,13 +1,27 @@
 import type { ReactNode } from 'react';
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { DMessageItem } from '../../types/chat';
-import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
 import type { MeasuredRect } from './messageToolbox/types';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
+export enum DChatPannelActionItemType {
+  Gallery = 'Gallery',
+  Camera = 'Camera',
+  Documents = 'Documents',
+  SendOrder = 'SendOrder',
+  SendProduct = 'SendProduct',
+  CreateAppointment = 'CreateAppointment',
+}
+
+export enum DChatQuickActionItemType {
+  Restart = 'Restart',
+  SendOrder = 'SendOrder',
+  ScamWarning = 'ScamWarning',
+}
+
 export interface DChatActionItem {
-  id: string;
+  id: DChatQuickActionItemType | DChatPannelActionItemType;
   label: string;
   iconName: string;
   iconProvider?: DChatActionIconProvider;
@@ -16,14 +30,14 @@ export interface DChatActionItem {
   meta?: Record<string, unknown>;
 }
 
-export type DChatQuickAction = DChatActionItem;
-export type DChatAttachmentAction = DChatActionItem;
+export interface DChatQuickAction extends DChatActionItem {
+  id: DChatQuickActionItemType;
+}
+export interface DChatPannelAction extends DChatActionItem {
+  id: DChatPannelActionItemType;
+}
 
 export interface ChatDetailHeaderProps {
-  title: string;
-  subtitle?: string;
-  avatarUri?: string | null;
-  avatarFullName?: string;
   showAddMember?: boolean;
   onBack?: () => void;
   onPressSearch?: () => void;
@@ -46,14 +60,9 @@ export interface ChatQuickActionsProps {
   renderQuickActions?: (params: ChatQuickActionsRenderParams) => ReactNode;
 }
 
-export interface ChatAttachmentPanelProps {
-  actions?: DChatAttachmentAction[];
+export interface ChatPanelProps {
+  actions?: DChatPannelAction[];
   columns?: number;
-  onActionPress?: (action: DChatAttachmentAction) => void;
-  renderAction?: (
-    action: DChatAttachmentAction,
-    onPress: () => void
-  ) => ReactNode;
 }
 
 export interface ChatComposerProps {
@@ -78,22 +87,15 @@ export interface ChatListProps {
 
 export interface ChatDetailProps extends Omit<
   ChatDetailHeaderProps,
-  | 'title'
-  | 'subtitle'
-  | 'avatarUri'
-  | 'avatarFullName'
-  | 'applicationType'
-  | 'showAddMember'
-  | 'conversationId'
+  'showAddMember' | 'conversationId'
 > {
-  conversationId: string;
+  targetConversationId?: string;
+  targetUserId?: string;
+  targetGroupId?: string;
+  targetBotId?: string;
   enabled?: boolean;
-  title?: string;
-  subtitle?: string;
-  avatarUri?: string | null;
-  avatarFullName?: string;
   showAddMember?: boolean;
-  getSubtitle?: (conversation: ConversationItem) => string | undefined;
   onPressUrl?: (url: string) => void;
   customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+  pannelActions?: DChatPannelAction[];
 }

package/src/services/attachmentHandlers/imageAttachmentHandler.ts

@@ -1,7 +1,7 @@
 import type { ImageAttachment } from '../../types/attachment';
 import type { IAttachmentHandler } from '../../types/attachmentHandler';
-import { generateUUID } from '../../utils/imageUtils';
 import { UPLOAD_LIMITS } from '../../config/uploadLimits';
+import uuid from 'react-native-uuid';
 
 export const ImageAttachmentHandler: IAttachmentHandler = {
   validate(attachment: ImageAttachment) {
@@ -42,7 +42,7 @@ export const ImageAttachmentHandler: IAttachmentHandler = {
     });
 
     const picInfo = {
-      uuid: generateUUID(),
+      uuid: uuid.v4(),
       type: attachment.sourceFile.mimeType,
       size: attachment.sourceFile.size,
       width: attachment.metadata.width,

package/src/services/endpoints.ts

@@ -22,6 +22,10 @@ export const ENDPOINTS = {
       `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/reset`,
     runConversationFlow: (id: string) =>
       `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/run`,
+    getConversationByBotId: (botId: string) =>
+      `${getApiEndpoint('bot')}/${botId}/conversation`,
+    conversationFlowMainMenu: (id: string) =>
+      `${getApiEndpoint('conversationFlow')}/${id}/bot-flows/main-menu`,
   },
   uploaderService: {
     get uploadImage() {

package/src/store/conversation.ts

@@ -6,7 +6,7 @@ type ConversationID = string;
 
 export interface ConversationStore {
   currentConversationId?: ConversationID;
-  setCurrentConversation(id: ConversationID): void;
+  setCurrentConversation(id?: ConversationID): void;
   getCurrentConversation(): ConversationItem | undefined;
   list: ConversationID[];
   map: Record<ConversationID, ConversationItem>;

package/src/translation/resources/i18n.ts

@@ -45,13 +45,19 @@ const i18nKey: Record<string, string> = {
   'chat:unmute_action': 'Bật thông báo',
   'chat:mute_confirm_title': 'Tắt thông báo',
   'chat:mute_confirm_desc':
-    'Bạn có thể bỏ lỡ tin nhắn quan trọng nếu tắt thông báo! Bạn có chắc chắn muốn tắt thông báo?',
+    'Bạn có thể bỏ lỡ tin nhắn quan trọng nếu tắt thông báo! Bạn có chắc chắn muốn <b>tắt thông báo</b>?',
   'chat:mute_confirm_primary': 'Tắt thông báo',
   'chat:mute_confirm_secondary': 'Quay lại',
   'chat:mute_toast_success': 'Đã tắt thông báo',
   'chat:unmute_toast_success': 'Đã bật thông báo',
   'start': 'Bắt đầu',
   'restart': 'Bắt đầu lại',
+  'gallery': 'Ảnh/Video',
+  'camera': 'Chụp ảnh',
+  'documents': 'Tài liệu',
+  'send_order': 'Gửi đơn hàng',
+  'send_product': 'Gửi sản phẩm',
+  'create_appointment': 'Tạo lịch hẹn',
 };
 
 export default {

package/src/types/chat.ts

@@ -1,7 +1,11 @@
-import { type MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  type ConversationItem,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 import type { PropsWithChildren } from 'react';
 import type { IUrlMetadata } from './common';
 import type {
+  DFlowContext,
   IConversationFlow,
   IConversationFlowStep,
   IRunConversationFlowPayload,
@@ -55,6 +59,11 @@ export enum DMemberRole {
   MEMBER = 'MEMBER',
 }
 
+export enum DFlowState {
+  BOT = 1,
+  CS = 2,
+}
+
 export interface DConversationPeerUser {
   id: string;
   username?: string;
@@ -139,6 +148,9 @@ export interface ChatDetailContextType {
   refetchConversationFlow: () => void;
   isBotConversation: boolean;
   setConverationFlowStep: (step?: IConversationFlowStep) => void;
+  flowState?: DFlowState;
+  runButtonContext: (stringContext: DFlowContext) => Promise<boolean>;
+  conversation?: ConversationItem;
 }
 
 export interface ChatDetailProviderProps extends PropsWithChildren {}
@@ -154,3 +166,21 @@ export interface IConversationItemEx {
   };
   chatCategory: DChatCategory;
 }
+
+export const CustomMessageType = {
+  Order: 'Order',
+  Product: 'Product',
+} as const;
+
+export type CustomMessageType =
+  (typeof CustomMessageType)[keyof typeof CustomMessageType];
+
+export type CustomElemOrderData = {
+  id: string;
+  orderCode: string;
+  timestamp: number;
+};
+
+export type CustomMessagePayload =
+  | { type: typeof CustomMessageType.Order; data: CustomElemOrderData }
+  | { type: typeof CustomMessageType.Product; data: Record<string, unknown> };

package/src/types/flows.ts

@@ -1,6 +1,10 @@
 import type { PeerType } from '@droppii/openim-rn-client-sdk';
 import type { DChatApplicationType, DChatCategory } from './chat';
 
+export enum DFlowContext {
+  CHAT_WITH_CS = 'chat_with_cs',
+}
+
 /** START NODE TYPE */
 export const NodeTypes = {
   BubbleText: 'bubble-text',

package/src/utils/device.ts

@@ -132,7 +132,7 @@ const DeviceUtils = {
     try {
       const results = await pickDocument({
         allowMultiSelection: multiple,
-        type: [documentTypes.allFiles],
+        type: [documentTypes.pdf, documentTypes.doc, documentTypes.docx],
         mode: 'import',
       });