@droppii-org/chat-mobile 0.2.58 → 0.2.60

package/src/screens/SearchMessage/index.tsx

@@ -0,0 +1,75 @@
+import { KColors, KContainer, KNavigation } from '@droppii/libs';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { TextInput } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import debounce from 'lodash/debounce';
+import { trans } from '../../translation';
+import type { ISearchMessageItem } from '../../types/chat';
+import SearchMessagesResult from './SearchMessageResult';
+
+interface SearchMessageScreenProps {
+  onPressItem?: (item: ISearchMessageItem) => void;
+  targetConversationId: string;
+}
+
+const SearchMessageScreen = ({
+  onPressItem,
+  targetConversationId,
+}: SearchMessageScreenProps) => {
+  const nav = useNavigation();
+  const [inputValue, setInputValue] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const searchInputRef = useRef<TextInput>(null);
+
+  const debouncedSearch = useRef(
+    debounce((text: string) => setSearchTerm(text), 500, {
+      leading: false,
+      trailing: true,
+    })
+  ).current;
+
+  useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      setInputValue(text);
+      debouncedSearch(text);
+    },
+    [debouncedSearch]
+  );
+
+  return (
+    <KContainer.Page flex background={KColors.white} edges={['bottom']}>
+      <KNavigation.HeaderV2Body
+        theme="light"
+        size="large"
+        isNested
+        leftButton={{
+          id: 'back',
+          icon: { vectorName: 'arrow-left-o' },
+          onPress: nav.goBack,
+        }}
+        searchProps={{
+          position: 'center',
+          placeholder: trans('search'),
+          onChangeText: handleChangeText,
+          ref: searchInputRef as any,
+          returnKeyType: 'search',
+          value: inputValue,
+          autoFocus: true,
+          background: KColors.palette.gray.w25,
+          br: '2x',
+          searchIconLeftColor: KColors.gray.normal,
+          marginL: undefined,
+        }}
+      />
+      <SearchMessagesResult
+        searchTerm={searchTerm}
+        conversationId={targetConversationId}
+        onPressItem={onPressItem}
+      />
+    </KContainer.Page>
+  );
+};
+
+export default SearchMessageScreen;

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

@@ -31,9 +31,8 @@ const BotMenuSheetContent = memo(
     return (
       <KContainer.View paddingH="0.75rem" paddingV="0.25rem">
         {options?.map((item, index) => (
-          <>
+          <KContainer.View key={item.id}>
             <KContainer.Touchable
-              key={item.id}
               row
               alignItems
               justifyContent="space-between"
@@ -54,7 +53,7 @@ const BotMenuSheetContent = memo(
             <KContainer.VisibleView visible={index !== options?.length - 1}>
               <KDivider size="hairline" />
             </KContainer.VisibleView>
-          </>
+          </KContainer.View>
         ))}
       </KContainer.View>
     );

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

@@ -48,9 +48,13 @@ import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
 import { trans } from '../../translation';
-import { useCloseSupportSession, useRunFlow } from '../../hooks/flows/useFlow';
+import {
+  useCloseSupportSession,
+  useResetFlow,
+  useRunFlow,
+} from '../../hooks/flows/useFlow';
 import { ReactFlowsNodeTypes, type InputButtonItem } from '../../types/flows';
-import { isContextButton } from '../../utils/flows';
+import { DEFAULT_BUTTON_ID, isContextButton } from '../../utils/flows';
 import { DFlowState } from '../../types/chat';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
@@ -87,6 +91,7 @@ export const ChatComposer = memo(
       flowState,
     } = useChatDetailContext();
     const { mutate: runFlow, isPending } = useRunFlow();
+    const { mutate: resetFlow } = useResetFlow();
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
@@ -215,18 +220,32 @@ export const ChatComposer = memo(
       });
     }, [runFlow, conversationFlow]);
 
-    const botMenuOptions = useMemo(
-      () =>
+    const botMenuOptions = useMemo(() => {
+      const apiOptions =
         conversationFlowMainMenu?.filter(
           (item) => !isContextButton(item.label)
-        ) || [],
-      [conversationFlowMainMenu]
-    );
+        ) || [];
+
+      const hasDefaultButton = apiOptions.some(
+        (item) => item.id === DEFAULT_BUTTON_ID
+      );
+
+      if (hasDefaultButton) return apiOptions;
+
+      return [
+        ...apiOptions,
+        { id: DEFAULT_BUTTON_ID, label: trans('restart') },
+      ];
+    }, [conversationFlowMainMenu]);
 
     const hasBotMenuOptions = isBotConversation && botMenuOptions.length > 0;
 
     const runBotMenuOption = useCallback(
       (item: InputButtonItem) => {
+        if (item.id === DEFAULT_BUTTON_ID) {
+          resetFlow();
+          return;
+        }
         runFlow({
           actionId: item.id,
           groupId: '',
@@ -234,7 +253,7 @@ export const ChatComposer = memo(
           plainText: item.label,
         });
       },
-      [runFlow]
+      [runFlow, resetFlow]
     );
 
     const handleSelectBotMenuOption = useCallback(

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

@@ -47,7 +47,9 @@ const ChatDetailHeader = memo(
           icon: {
             vectorName: 'search-o',
           },
-          onPress: onPressSearch,
+          onPress: conversationId
+            ? () => onPressSearch?.(conversationId)
+            : undefined,
         },
         {
           id: 'menu',
@@ -71,7 +73,13 @@ const ChatDetailHeader = memo(
       }
 
       return buttons;
-    }, [onPressSearch, onPressAddMember, onPressMenu, showAddMember]);
+    }, [
+      onPressSearch,
+      onPressAddMember,
+      onPressMenu,
+      showAddMember,
+      conversationId,
+    ]);
 
     const leftNode = useMemo(
       () => (

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

@@ -40,7 +40,7 @@ export interface DChatPannelAction extends DChatActionItem {
 export interface ChatDetailHeaderProps {
   showAddMember?: boolean;
   onBack?: () => void;
-  onPressSearch?: () => void;
+  onPressSearch?: (conversationId: string) => void;
   onPressAddMember?: () => void;
   onPressMenu?: (conversationId?: string) => void;
   onPressAvatar?: () => void;