@droppii-org/chat-mobile 0.2.28 → 0.2.30

package/src/hooks/useMuteConversation.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import OpenIMSDK, {
+  MessageReceiveOptType,
+} from '@droppii/openim-rn-client-sdk';
+import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../store';
+
+export function useMuteConversation() {
+  const muteConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      await OpenIMSDK.setConversationRecvMessageOpt({
+        conversationID: conversation.conversationID,
+        opt: MessageReceiveOptType.NotNotify,
+      });
+      useConversationStore
+        .getState()
+        .updateConversations([
+          { ...conversation, recvMsgOpt: MessageReceiveOptType.NotNotify },
+        ]);
+    },
+    []
+  );
+
+  const unmuteConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      await OpenIMSDK.setConversationRecvMessageOpt({
+        conversationID: conversation.conversationID,
+        opt: MessageReceiveOptType.Normal,
+      });
+      useConversationStore
+        .getState()
+        .updateConversations([
+          { ...conversation, recvMsgOpt: MessageReceiveOptType.Normal },
+        ]);
+    },
+    []
+  );
+
+  return { muteConversation, unmuteConversation };
+}

package/src/index.tsx

@@ -14,6 +14,7 @@ export * from './store';
 export * from './context';
 export * from './hooks/useConversationList';
 export * from './hooks/useChatMessages';
+export * from './hooks/message/useSendMessage';
 export { useImageAttachment } from './hooks/useImageAttachment';
 export { useMediaViewer } from './hooks/useMediaViewer';
 export type { MediaItem } from './hooks/useMediaViewer';
@@ -34,24 +35,32 @@ export {
   ChatComposer,
   ChatQuickActions,
   ChatAttachmentPanel,
-  DEFAULT_Chat_QUICK_ACTIONS,
-  DEFAULT_ATTACHMENT_ACTIONS,
+  DEFAULT_QUICK_ACTIONS,
+  DEFAULT_PANNEL_ACTIONS,
+  DChatPannelActionItemType,
+  DChatQuickActionItemType,
 } from './screens/chat-detail';
 export type {
   DChatActionItem,
   DChatActionIconProvider,
   DChatQuickAction,
-  DChatAttachmentAction,
+  DChatPannelAction,
   ChatDetailProps,
   ChatDetailHeaderProps,
   ChatListProps,
   ChatComposerProps,
   ChatQuickActionsProps,
   ChatQuickActionsRenderParams,
-  ChatAttachmentPanelProps,
+  ChatPanelProps,
 } from './screens/chat-detail';
 
-export type { PeerType } from '@droppii/openim-rn-client-sdk';
-export { LoginStatus } from '@droppii/openim-rn-client-sdk';
+export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+export type {
+  PeerType,
+  ConversationItem,
+  MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 
 export { registerUIUtils, UIUtils } from './utils/UIUtils';
+
+export { DFlowContext } from './types/flows';

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

@@ -8,8 +8,7 @@ import {
   KSpacingValue,
 } from '@droppii/libs';
 import { ATTACHMENT_PANEL_COLUMNS } from './constants';
-import { useChatActionPress } from './useChatActionPress';
-import type { DChatAttachmentAction, ChatAttachmentPanelProps } from './types';
+import type { DChatPannelAction, ChatPanelProps } from './types';
 
 const AttachmentActionItem = memo(
   ({
@@ -17,9 +16,9 @@ const AttachmentActionItem = memo(
     itemWidth,
     onPress,
   }: {
-    action: DChatAttachmentAction;
+    action: DChatPannelAction;
     itemWidth: `${number}%`;
-    onPress: (action: DChatAttachmentAction) => void;
+    onPress: (action: DChatPannelAction) => void;
   }) => {
     const handlePress = useCallback(() => {
       onPress(action);
@@ -61,42 +60,26 @@ const AttachmentActionItem = memo(
 AttachmentActionItem.displayName = 'AttachmentActionItem';
 
 export const ChatAttachmentPanel = memo(
-  ({
-    actions,
-    columns = ATTACHMENT_PANEL_COLUMNS,
-    onActionPress,
-    renderAction,
-  }: ChatAttachmentPanelProps) => {
-    const handleActionPress = useChatActionPress(onActionPress);
-
+  ({ actions, columns = ATTACHMENT_PANEL_COLUMNS }: ChatPanelProps) => {
     const itemWidth = useMemo(
       () => `${100 / columns}%` as `${number}%`,
       [columns]
     );
 
-    const renderItem = useCallback<ListRenderItem<DChatAttachmentAction>>(
+    const renderItem = useCallback<ListRenderItem<DChatPannelAction>>(
       ({ item }) => {
-        const onPress = () => handleActionPress(item);
-
-        if (renderAction) {
-          return <>{renderAction(item, onPress)}</>;
-        }
-
         return (
           <AttachmentActionItem
             action={item}
             itemWidth={itemWidth}
-            onPress={handleActionPress}
+            onPress={() => item?.onPress?.()}
           />
         );
       },
-      [handleActionPress, itemWidth, renderAction]
+      [itemWidth]
     );
 
-    const keyExtractor = useCallback(
-      (item: DChatAttachmentAction) => item.id,
-      []
-    );
+    const keyExtractor = useCallback((item: DChatPannelAction) => item.id, []);
 
     if (!actions?.length) {
       return null;

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

@@ -18,11 +18,11 @@ import { ChatMessageInput } from './components/ChatMessageInput';
 import { AttachmentPreview } from '../../components/AttachmentPreview';
 
 import {
-  DEFAULT_ATTACHMENT_ACTIONS,
-  DEFAULT_Chat_QUICK_ACTIONS,
+  DEFAULT_QUICK_ACTIONS,
   getAttachmentPanelHeight,
+  DEFAULT_PANNEL_ACTIONS,
 } from './constants';
-import type { DChatAttachmentAction } from './types';
+import { DChatPannelActionItemType, type DChatPannelAction } from './types';
 import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
@@ -35,10 +35,11 @@ import { useChatCompose } from '../../hooks/useChatCompose';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
+  pannelActions?: DChatPannelAction[];
 }
 
 export const ChatComposer = memo(
-  ({ isEmptyMessage = false }: ChatComposerInternalProps) => {
+  ({ isEmptyMessage = false, pannelActions }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
@@ -57,7 +58,7 @@ export const ChatComposer = memo(
     } = useChatComposerState(compose.text);
 
     const panelHeight = useMemo(
-      () => getAttachmentPanelHeight(DEFAULT_ATTACHMENT_ACTIONS.length),
+      () => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length),
       []
     );
 
@@ -132,18 +133,25 @@ export const ChatComposer = memo(
       })
     );
 
-    const handleAttachmentAction = useCallback(
-      async (action: DChatAttachmentAction) => {
-        if (action.id === 'gallery') {
-          debouncedImagePickerRef.current();
-        } else if (action.id === 'file') {
-          debouncedFilePickerRef.current();
-        } else {
-          console.log('[ChatComposer] attachment action:', action.id);
+    const resolvedPannelActons = useMemo(() => {
+      return (pannelActions || DEFAULT_PANNEL_ACTIONS)?.map((p) => {
+        let onPress;
+        switch (p.id) {
+          case DChatPannelActionItemType.Gallery:
+            onPress = debouncedImagePickerRef.current;
+            break;
+          case DChatPannelActionItemType.Documents:
+            onPress = debouncedFilePickerRef.current;
+            break;
+          default:
+            break;
         }
-      },
-      []
-    );
+        return {
+          ...p,
+          onPress: p.onPress || onPress,
+        };
+      });
+    }, [pannelActions]);
 
     const inputRowStyle = useMemo(
       () => ({ paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12 }),
@@ -186,7 +194,7 @@ export const ChatComposer = memo(
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
         <ChatQuickActions
           visible
-          actions={DEFAULT_Chat_QUICK_ACTIONS}
+          actions={DEFAULT_QUICK_ACTIONS}
           onActionPress={(action) =>
             console.log('[ChatComposer] quick action:', action.id)
           }
@@ -272,10 +280,7 @@ export const ChatComposer = memo(
           style={[styles.accessorySlot, accessorySlotStyle]}
           pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
         >
-          <ChatAttachmentPanel
-            actions={DEFAULT_ATTACHMENT_ACTIONS}
-            onActionPress={handleAttachmentAction}
-          />
+          <ChatAttachmentPanel actions={resolvedPannelActons} />
         </Reanimated.View>
       </KContainer.View>
     );

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