@droppii-org/chat-mobile 0.2.52 → 0.2.54

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

@@ -0,0 +1,94 @@
+import { memo, useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KLabel,
+  KColors,
+  KImage,
+  KSpacingValue,
+  KDivider,
+} from '@droppii/libs';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+import type { InputButtonItem } from '../../types/flows';
+import { DEFAULT_BUTTON_ID } from '../../utils/flows';
+
+interface BotMenuSheetContentProps {
+  options: InputButtonItem[];
+  onSelect: (item: InputButtonItem) => void;
+}
+
+const BotMenuSheetContent = memo(
+  ({ options, onSelect }: BotMenuSheetContentProps) => {
+    const handlePress = useCallback(
+      (item: InputButtonItem) => {
+        UIUtils.bottomSheet.dismiss();
+        onSelect(item);
+      },
+      [onSelect]
+    );
+
+    return (
+      <KContainer.View paddingH="0.75rem" paddingV="0.25rem">
+        {options?.map((item, index) => (
+          <>
+            <KContainer.Touchable
+              key={item.id}
+              row
+              alignItems
+              justifyContent="space-between"
+              style={styles.item}
+              onPress={() => handlePress(item)}
+            >
+              <KLabel.Text typo="TextMdMedium" flex>
+                {item?.id === DEFAULT_BUTTON_ID
+                  ? trans('restart')
+                  : item?.label || ''}
+              </KLabel.Text>
+              <KImage.VectorIcons
+                name="angle-right-o"
+                size={20}
+                color={KColors.gray.light}
+              />
+            </KContainer.Touchable>
+            <KContainer.VisibleView visible={index !== options?.length - 1}>
+              <KDivider size="hairline" />
+            </KContainer.VisibleView>
+          </>
+        ))}
+      </KContainer.View>
+    );
+  }
+);
+
+BotMenuSheetContent.displayName = 'BotMenuSheetContent';
+
+const styles = StyleSheet.create({
+  item: {
+    paddingVertical: KSpacingValue['0.75rem'],
+  },
+});
+
+export interface OpenBotMenuSheetParams {
+  options: InputButtonItem[];
+  onSelect: (item: InputButtonItem) => void;
+}
+
+export const openBotMenuSheet = ({
+  options,
+  onSelect,
+}: OpenBotMenuSheetParams) => {
+  UIUtils.bottomSheet.open({
+    header: {
+      title: { text: trans('chat:bot_menu_title') },
+      alignment: 'left',
+      showCloseButton: true,
+    },
+    touchOutsideToDismiss: true,
+    body: {
+      renderContent: () => (
+        <BotMenuSheetContent options={options} onSelect={onSelect} />
+      ),
+    },
+  });
+};

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

@@ -48,13 +48,17 @@ import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
 import { trans } from '../../translation';
-import { useRunFlow } from '../../hooks/flows/useFlow';
-import { ReactFlowsNodeTypes } from '../../types/flows';
+import { useCloseSupportSession, useRunFlow } from '../../hooks/flows/useFlow';
+import { ReactFlowsNodeTypes, type InputButtonItem } from '../../types/flows';
+import { isContextButton } from '../../utils/flows';
+import { DFlowState } from '../../types/chat';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
 import { useChatCompose } from '../../hooks/useChatCompose';
 import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
+import { openBotMenuSheet } from './BotMenuSheet';
+import { UIUtils } from '../../utils/UIUtils';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -76,8 +80,14 @@ export const ChatComposer = memo(
     const isDisableCompose = isComposeDisabled;
     const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
 
-    const { isBotConversation, conversationFlow } = useChatDetailContext();
+    const {
+      isBotConversation,
+      conversationFlow,
+      conversationFlowMainMenu,
+      flowState,
+    } = useChatDetailContext();
     const { mutate: runFlow, isPending } = useRunFlow();
+    const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
 
@@ -205,6 +215,92 @@ export const ChatComposer = memo(
       });
     }, [runFlow, conversationFlow]);
 
+    const botMenuOptions = useMemo(
+      () =>
+        conversationFlowMainMenu?.filter(
+          (item) => !isContextButton(item.label)
+        ) || [],
+      [conversationFlowMainMenu]
+    );
+
+    const hasBotMenuOptions = isBotConversation && botMenuOptions.length > 0;
+
+    const runBotMenuOption = useCallback(
+      (item: InputButtonItem) => {
+        runFlow({
+          actionId: item.id,
+          groupId: '',
+          childId: '',
+          plainText: item.label,
+        });
+      },
+      [runFlow]
+    );
+
+    const handleSelectBotMenuOption = useCallback(
+      (item: InputButtonItem) => {
+        if (flowState === DFlowState.CS) {
+          UIUtils.popup.open({
+            header: {
+              title: { text: trans('chat:end_support_session_title') },
+              alignment: 'center',
+            },
+            body: {
+              renderContent: () => (
+                <KContainer.View padding={'1rem'}>
+                  <KLabel.RichText
+                    typo="TextMdNormal"
+                    textAlign="center"
+                    color={KColors.gray.dark}
+                    richTextOptions={{
+                      i18nKey: trans('chat:end_support_session_desc'),
+                      components: {
+                        bold: (
+                          <KLabel.Text
+                            typo="TextMdBold"
+                            color={KColors.gray.dark}
+                          />
+                        ),
+                      },
+                    }}
+                  />
+                </KContainer.View>
+              ),
+            },
+            actions: {
+              buttons: [
+                {
+                  label: trans('chat:end_support_session_secondary'),
+                  kind: 'light',
+                  onPress: () => {},
+                },
+                {
+                  label: trans('chat:end_support_session_primary'),
+                  kind: 'danger',
+                  onPress: async () => {
+                    await closeSupportSession();
+                    runBotMenuOption(item);
+                  },
+                },
+              ],
+              type: 'horizontal-button',
+            },
+          });
+          return;
+        }
+        runBotMenuOption(item);
+      },
+      [flowState, runBotMenuOption, closeSupportSession]
+    );
+
+    const handleOpenBotMenu = useCallback(() => {
+      if (!hasBotMenuOptions) return;
+      openBotMenuSheet({
+        options: botMenuOptions,
+        onSelect: handleSelectBotMenuOption,
+      });
+    }, [hasBotMenuOptions, botMenuOptions, handleSelectBotMenuOption]);
+
     useEffect(() => {
       if (!compose.text) setIsInputWrapped(false);
     }, [compose.text, setIsInputWrapped]);
@@ -373,6 +469,7 @@ export const ChatComposer = memo(
               isMultilineInput={isMultilineInput}
               inputRef={inputRef}
               onEmojiPress={handleToggleSticker}
+              onSuggestPress={hasBotMenuOptions ? handleOpenBotMenu : undefined}
             />
 
             <KContainer.Touchable

package/src/screens/chat-detail/components/ChatMessageInput.tsx

@@ -25,6 +25,7 @@ export interface ChatMessageInputProps {
   isInputFocused: boolean;
   isMultilineInput: boolean;
   onEmojiPress?: () => void;
+  onSuggestPress?: () => void;
   inputRef: React.RefObject<TextInput>;
 }
 
@@ -39,6 +40,7 @@ export const ChatMessageInput = memo(
     isInputFocused,
     isMultilineInput,
     onEmojiPress,
+    onSuggestPress,
     inputRef,
   }: ChatMessageInputProps) => {
     const renderEmojiNode = useCallback(
@@ -69,13 +71,15 @@ export const ChatMessageInput = memo(
           paddingL="0.75rem"
           style={styles.inputContainer}
         >
-          <KContainer.View marginR="0.75rem">
-            <KImage.VectorIcons
-              name="chat-suggest-o"
-              size={24}
-              color={KColors.gray.normal}
-            />
-          </KContainer.View>
+          <KContainer.VisibleView visible={!!onSuggestPress}>
+            <KContainer.Touchable marginR="0.75rem" onPress={onSuggestPress}>
+              <KImage.VectorIcons
+                name="chat-suggest-o"
+                size={24}
+                color={KColors.gray.normal}
+              />
+            </KContainer.Touchable>
+          </KContainer.VisibleView>
 
           <TextInput
             ref={inputRef}

package/src/services/endpoints.ts

@@ -28,6 +28,8 @@ export const ENDPOINTS = {
       `${getApiEndpoint('bot')}/${botId}/conversation`,
     conversationFlowMainMenu: (id: string) =>
       `${getApiEndpoint('conversation')}/${id}/bot-flows/main-menu`,
+    closeConversationSession: (id: string) =>
+      `${getApiEndpoint('conversation')}/${id}/session/close`,
     getConversationStatusByBotId: (botId: string) =>
       `${getApiEndpoint('bot')}/${botId}`,
     getConversationTarget: (conversationId: string) =>

package/src/translation/resources/i18n.ts

@@ -80,6 +80,18 @@ const i18nKey: Record<string, string> = {
   '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',
+  'chat:info_title': 'Tuỳ chọn',
+  'chat:info_search_action': 'Tìm tin nhắn',
+  'chat:info_media_photo': 'Ảnh',
+  'chat:info_media_video': 'Video',
+  'chat:info_media_file': 'Tập tin',
+  'chat:info_media_link': 'Liên kết',
+  'chat:info_orders': 'Đơn hàng đã tạo cho {{name}}',
+  'chat:info_create_group': 'Tạo nhóm trò chuyện với {{name}}',
+  'chat:info_add_to_group': 'Thêm vào nhóm',
+  'chat:info_pin_message': 'Ghim trò chuyện',
+  'chat:info_unpin_message': 'Bỏ ghim trò chuyện',
+  'chat:info_delete_history': 'Xoá lịch sử trò chuyện',
   'start': 'Bắt đầu',
   'restart': 'Bắt đầu lại',
   'gallery': 'Ảnh/Video',
@@ -100,6 +112,12 @@ const i18nKey: Record<string, string> = {
   'chat:resource_center_tab_link': 'Liên kết',
   'chat:resource_center_empty_generic': 'Không tìm thấy tập tin nào',
   'chat:resource_center_empty_link': 'Không tìm thấy liên kết nào',
+  'chat:bot_menu_title': 'Gợi ý',
+  'chat:end_support_session_title': 'Kết thúc phiên hỗ trợ',
+  'chat:end_support_session_desc':
+    'Bạn đang trong phiên hỗ trợ với hỗ trợ viên, bạn có muốn <bold>kết thúc phiên hỗ trợ</bold> ngay bây giờ?',
+  'chat:end_support_session_primary': 'Kết thúc',
+  'chat:end_support_session_secondary': 'Tiếp tục',
 };
 
 export default {

package/src/types/chat.ts

@@ -8,6 +8,7 @@ import type {
   DFlowContext,
   IConversationFlow,
   IConversationFlowStep,
+  InputButtonItem,
   IRunConversationFlowPayload,
 } from './flows';
 import type { GetOpenIMTokenResponse } from './auth';
@@ -209,6 +210,7 @@ export interface ChatDetailContextType {
   conversation?: ConversationItem;
   quotedMessage?: MessageItem;
   setQuotedMessage: (item?: MessageItem) => void;
+  conversationFlowMainMenu?: InputButtonItem[];
 }
 
 export interface ChatDetailProviderProps extends PropsWithChildren {}

package/src/hooks/useMuteConversation.ts

@@ -1,59 +0,0 @@
-import { useCallback } from 'react';
-import OpenIMSDK, {
-  MessageReceiveOptType,
-} from '@droppii/openim-rn-client-sdk';
-import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
-import { UIUtils } from '../utils/UIUtils';
-import { trans } from '../translation';
-
-export function useMuteConversation() {
-  const muteConversation = useCallback(
-    async (conversation?: ConversationItem) => {
-      if (conversation == null) return;
-
-      try {
-        await OpenIMSDK.setConversationRecvMessageOpt({
-          conversationID: conversation.conversationID,
-          opt: MessageReceiveOptType.NotNotify,
-        });
-        UIUtils.toast.open({
-          title: trans('chat:mute_toast_success'),
-          theme: 'light',
-        });
-      } catch (error) {
-        console.error('muteConversation failed', error);
-        UIUtils.toast.open({
-          title: trans('chat:generic_error'),
-          theme: 'error',
-        });
-      }
-    },
-    []
-  );
-
-  const unmuteConversation = useCallback(
-    async (conversation?: ConversationItem) => {
-      if (conversation == null) return;
-
-      try {
-        await OpenIMSDK.setConversationRecvMessageOpt({
-          conversationID: conversation.conversationID,
-          opt: MessageReceiveOptType.Normal,
-        });
-        UIUtils.toast.open({
-          title: trans('chat:unmute_toast_success'),
-          theme: 'light',
-        });
-      } catch (error) {
-        console.error('unmuteConversation failed', error);
-        UIUtils.toast.open({
-          title: trans('chat:generic_error'),
-          theme: 'error',
-        });
-      }
-    },
-    []
-  );
-
-  return { muteConversation, unmuteConversation };
-}