@droppii-org/chat-mobile 0.2.57 → 0.2.59

package/src/screens/SearchConversation/SearchAllResult.tsx

@@ -0,0 +1,154 @@
+import {
+  KButton,
+  KColors,
+  KContainer,
+  KDivider,
+  KImage,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useCallback, useMemo } from 'react';
+import { useChatContext } from '../../context';
+import { useSearchMessage } from '../../hooks/message/useSearchMessage';
+import { SearchConversationTabResultType } from './types';
+import type { ISearchMessageItem } from '../../types/chat';
+import { trans } from '../../translation';
+import { FlatList, StyleSheet } from 'react-native';
+import { SearchEmpty } from './SearchEmpty';
+import SearchResultItem from './SearchResultItem';
+
+interface SearchAllResultProps {
+  searchTerm: string;
+  handleChangeTab: (key: SearchConversationTabResultType) => void;
+  onPressItem?: (item: ISearchMessageItem) => void;
+}
+
+interface ISearchAllResultItem {
+  type: SearchConversationTabResultType;
+  data: ISearchMessageItem[];
+  title: string;
+}
+
+const PAGE_SIZE = 5;
+
+const SearchAllResult = memo(
+  ({ searchTerm, handleChangeTab, onPressItem }: SearchAllResultProps) => {
+    const { applicationType } = useChatContext();
+    const { dataFlatten: messagesData } = useSearchMessage({
+      query: searchTerm,
+      applicationType,
+      pageSize: PAGE_SIZE,
+    });
+
+    const data: ISearchAllResultItem[] = useMemo(() => {
+      const mData = [
+        {
+          type: SearchConversationTabResultType.Conversations,
+          data: [],
+          title: trans('contacts'),
+        },
+        {
+          type: SearchConversationTabResultType.Messages,
+          data: messagesData,
+          title: trans('messages'),
+        },
+      ]?.filter((item) => item.data.length > 0);
+      return mData;
+    }, [messagesData]);
+
+    const onChangeTab = useCallback(
+      (key: SearchConversationTabResultType) => {
+        handleChangeTab(key);
+      },
+      [handleChangeTab]
+    );
+
+    const renderSessionItem = useCallback(
+      ({ item }: { item: ISearchAllResultItem }) => {
+        return (
+          <KContainer.View style={styles.itemContainer}>
+            <KContainer.Touchable
+              style={styles.header}
+              onPress={() => onChangeTab(item.type)}
+            >
+              <KLabel.Text typo="TextMdBold" flex>
+                {item.title}
+                <KLabel.Text
+                  typo="TextNmMedium"
+                  color={KColors.gray.light}
+                >{` (${item.data.length})`}</KLabel.Text>
+              </KLabel.Text>
+              <KImage.VectorIcons name="angle-right-o" size={20} />
+            </KContainer.Touchable>
+            {item?.data?.map((childItem) => {
+              return (
+                <KContainer.View
+                  style={styles.childItemContainer}
+                  key={`${item.type}-${childItem?.conversation?.conversationID}-${childItem?.chatLog?.clientMsgID}`}
+                >
+                  <SearchResultItem
+                    item={childItem}
+                    tabResultType={item.type}
+                    onPressItem={onPressItem}
+                  />
+                </KContainer.View>
+              );
+            })}
+            <KButton.Link
+              label={trans('view_all')}
+              icon={{
+                vectorName: 'angle-right-o',
+              }}
+              iconAlignment="right"
+              onPress={() => onChangeTab(item.type)}
+              size="sm"
+              enhanceStyle={styles.viewAllButton}
+            />
+          </KContainer.View>
+        );
+      },
+      [onChangeTab, onPressItem]
+    );
+
+    const keyExtractor = useCallback((item: ISearchAllResultItem) => {
+      return item.type;
+    }, []);
+
+    const ItemSeparatorComponent = useCallback(() => {
+      return <KDivider size={'xs'} background={KColors.pageBackground} />;
+    }, []);
+
+    return (
+      <FlatList
+        data={data}
+        renderItem={renderSessionItem}
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={<SearchEmpty />}
+        ItemSeparatorComponent={ItemSeparatorComponent}
+      />
+    );
+  }
+);
+
+export default SearchAllResult;
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+  header: {
+    flexDirection: 'row',
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: KSpacingValue['1rem'],
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+  },
+  childItemContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+  },
+  viewAllButton: {
+    height: 40,
+  },
+});

package/src/screens/SearchConversation/SearchEmpty.tsx

@@ -0,0 +1,30 @@
+import { KContainer, KImage, KLabel, KSpacingValue } from '@droppii/libs';
+import { StyleSheet } from 'react-native';
+import Images from '../../assets/images';
+import { trans } from '../../translation';
+
+export const SearchEmpty = () => {
+  return (
+    <KContainer.View style={styles.container}>
+      <KImage.Base
+        uri={Images.SEARCH_EMPTY}
+        width={100}
+        height={100}
+        resizeMode="contain"
+      />
+      <KLabel.Text typo="TextMdNormal" textAlign="center">
+        {trans('search:empty_description')}
+      </KLabel.Text>
+    </KContainer.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['2rem'],
+    paddingVertical: 42,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: KSpacingValue['0.75rem'],
+  },
+});

package/src/screens/SearchConversation/SearchMessagesResult.tsx

@@ -0,0 +1,74 @@
+import { KContainer, KDivider, KSpacingValue } from '@droppii/libs';
+import { memo, useCallback } from 'react';
+import { useSearchMessage } from '../../hooks/message/useSearchMessage';
+import { useChatContext } from '../../context';
+import { FlatList, StyleSheet } from 'react-native';
+import type { ISearchMessageItem } from '../../types/chat';
+import SearchResultItem from './SearchResultItem';
+import { SearchConversationTabResultType } from './types';
+import { SearchEmpty } from './SearchEmpty';
+
+interface ISearchMessagesResultProps {
+  searchTerm: string;
+  onPressItem?: (item: ISearchMessageItem) => void;
+}
+const SearchMessagesResult = memo(
+  ({ searchTerm, onPressItem }: ISearchMessagesResultProps) => {
+    const { applicationType } = useChatContext();
+    const { dataFlatten, hasNextPage, fetchNextPage, isFetchingNextPage } =
+      useSearchMessage({
+        query: searchTerm,
+        applicationType,
+      });
+
+    const renderItem = useCallback(
+      ({ item }: { item: ISearchMessageItem }) => {
+        return (
+          <SearchResultItem
+            item={item}
+            tabResultType={SearchConversationTabResultType.Messages}
+            onPressItem={onPressItem}
+          />
+        );
+      },
+      [onPressItem]
+    );
+
+    const keyExtractor = useCallback((item: ISearchMessageItem) => {
+      return `${item?.conversation?.conversationID}-${item?.chatLog?.clientMsgID}`;
+    }, []);
+
+    const onEndReached = useCallback(() => {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    const ItemSeparatorComponent = useCallback(() => {
+      return <KDivider size={'hairline'} vertical={false} />;
+    }, []);
+
+    return (
+      <KContainer.View flex>
+        <FlatList
+          data={dataFlatten}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          contentContainerStyle={styles.container}
+          showsVerticalScrollIndicator={false}
+          onEndReached={onEndReached}
+          ItemSeparatorComponent={ItemSeparatorComponent}
+          ListEmptyComponent={<SearchEmpty />}
+        />
+      </KContainer.View>
+    );
+  }
+);
+
+export default SearchMessagesResult;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+});

package/src/screens/SearchConversation/SearchResultItem.tsx

@@ -0,0 +1,107 @@
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useCallback } from 'react';
+import type { ISearchMessageItem } from '../../types/chat';
+import { StyleSheet } from 'react-native';
+import { SearchConversationTabResultType } from './types';
+import { AvatarSection, NamePrefixIcon } from '../../components/ThreadCard';
+import { getLastMessageText } from '../../utils/messageUtils';
+import { useUserStore } from '../../store';
+import { formatTimestamp } from '../../utils/dateTimeUtils';
+
+interface ISearchResultItemProps {
+  item: ISearchMessageItem;
+  tabResultType: SearchConversationTabResultType;
+  onPressItem?: (item: ISearchMessageItem) => void;
+}
+const SearchResultItem = memo((props: ISearchResultItemProps) => {
+  const { item, tabResultType, onPressItem } = props || {};
+  const currentUserId = useUserStore((s) => s.user?.userID);
+
+  const timestamp = formatTimestamp(item?.chatLog?.sendTime ?? null);
+  const lastMessageText = getLastMessageText(
+    item?.chatLog,
+    currentUserId,
+    item?.conversation
+  );
+
+  const handlePressItem = useCallback(() => {
+    onPressItem?.({ conversation: item?.conversation, chatLog: item?.chatLog });
+  }, [onPressItem, item?.conversation, item?.chatLog]);
+
+  return (
+    <KContainer.Touchable style={styles.container} onPress={handlePressItem}>
+      <KContainer.View style={styles.leftContainer}>
+        <AvatarSection
+          avatar={item?.conversation?.faceURL ?? null}
+          fullName={item?.conversation?.showName}
+          peerType={item?.conversation?.peerType}
+          size="nm"
+        />
+        <KContainer.View style={styles.contentContainer}>
+          <KContainer.View style={styles.messageContainer}>
+            <NamePrefixIcon peerType={item?.conversation?.peerType} />
+            <KLabel.Text typo="TextMdMedium" numberOfLines={1} flex>
+              {item?.conversation?.showName}
+            </KLabel.Text>
+            <KLabel.Text typo="TextXsNormal" color={KColors.gray.light}>
+              {timestamp}
+            </KLabel.Text>
+          </KContainer.View>
+          <KLabel.Text typo="TextNmNormal" numberOfLines={1} flex>
+            {lastMessageText}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.View>
+      <KContainer.VisibleView
+        visible={
+          tabResultType === SearchConversationTabResultType.Conversations
+        }
+      >
+        <KContainer.View style={styles.rightContainer}>
+          <KImage.VectorIcons
+            name="more-horizontal-b"
+            size={24}
+            color={KColors.gray.normal}
+          />
+        </KContainer.View>
+      </KContainer.VisibleView>
+    </KContainer.Touchable>
+  );
+});
+
+export default SearchResultItem;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: KSpacingValue['1rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+  },
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    flex: 1,
+  },
+  rightContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  messageContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.25rem'],
+    justifyContent: 'space-between',
+  },
+});

package/src/screens/SearchConversation/TabResult.tsx

@@ -0,0 +1,144 @@
+import {
+  KColors,
+  KContainer,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { TabView } from 'react-native-tab-view';
+import { SearchConversationTabResultType } from './types';
+import { trans } from '../../translation';
+import SearchMessagesResult from './SearchMessagesResult';
+import SearchAllResult from './SearchAllResult';
+import type { ISearchMessageItem } from '../../types/chat';
+
+type TabRoute = { key: string; title: string };
+
+interface ISearchConversationTabResultProps {
+  searchTerm: string;
+  onPressItem?: (item: ISearchMessageItem) => void;
+}
+
+const TabRoutes: TabRoute[] = [
+  { key: SearchConversationTabResultType.All, title: trans('all') },
+  // { key: SearchConversationTabResultType.Conversations, title: trans('contacts') },
+  { key: SearchConversationTabResultType.Messages, title: trans('messages') },
+];
+
+interface CustomTabBarProps {
+  routes: TabRoute[];
+  index: number;
+  onPress: (i: number) => void;
+}
+
+const CustomTabBar = memo(({ routes, index, onPress }: CustomTabBarProps) => (
+  <KContainer.View style={styles.tabRow}>
+    {routes.map((route, i) => {
+      const isActive = i === index;
+      return (
+        <KContainer.Touchable
+          key={route.key}
+          onPress={() => onPress(i)}
+          style={styles.tabItem}
+          activeOpacity={0.7}
+        >
+          <KLabel.Text
+            typo="TextNmBold"
+            color={isActive ? KColors.primary.normal : KColors.gray.light}
+          >
+            {route.title}
+          </KLabel.Text>
+          {isActive && <KContainer.View style={styles.indicator} />}
+        </KContainer.Touchable>
+      );
+    })}
+  </KContainer.View>
+));
+
+const SearchConversationTabResult = memo(
+  ({ searchTerm, onPressItem }: ISearchConversationTabResultProps) => {
+    const [index, setIndex] = useState(0);
+    const [routes] = useState<TabRoute[]>(TabRoutes);
+
+    const handleChangeTab = useCallback(
+      (key: SearchConversationTabResultType) => {
+        setIndex(TabRoutes.findIndex((route) => route.key === key));
+      },
+      []
+    );
+
+    const renderScene = useCallback(
+      ({ route }: { route: TabRoute }) => {
+        switch (route.key) {
+          case SearchConversationTabResultType.All:
+            return (
+              <SearchAllResult
+                searchTerm={searchTerm}
+                handleChangeTab={handleChangeTab}
+                onPressItem={onPressItem}
+              />
+            );
+          case SearchConversationTabResultType.Conversations:
+            return null;
+          case SearchConversationTabResultType.Messages:
+            return (
+              <SearchMessagesResult
+                searchTerm={searchTerm}
+                onPressItem={onPressItem}
+              />
+            );
+          default:
+            return null;
+        }
+      },
+      [searchTerm, handleChangeTab, onPressItem]
+    );
+
+    const renderTabBar = useCallback(
+      () => <CustomTabBar routes={routes} index={index} onPress={setIndex} />,
+      [routes, index]
+    );
+
+    return (
+      <KContainer.View flex>
+        <TabView
+          navigationState={{ index, routes }}
+          renderScene={renderScene}
+          renderTabBar={renderTabBar}
+          onIndexChange={setIndex}
+          swipeEnabled={routes.length > 1}
+          lazy
+        />
+      </KContainer.View>
+    );
+  }
+);
+
+export default SearchConversationTabResult;
+
+const styles = StyleSheet.create({
+  tabRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.normal,
+  },
+  tabItem: {
+    paddingVertical: KSpacingValue['0.5rem'],
+    height: 40,
+    marginHorizontal: KSpacingValue['0.75rem'],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  indicator: {
+    height: 3,
+    backgroundColor: KColors.primary.normal,
+    width: '100%',
+    borderRadius: KRadiusValue.x,
+    position: 'absolute',
+    bottom: -1,
+    left: 0,
+    right: 0,
+  },
+});

package/src/screens/SearchConversation/index.tsx

@@ -0,0 +1,61 @@
+import { KColors, KContainer, KNavigation } from '@droppii/libs';
+import { memo, useRef, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { trans } from '../../translation';
+import debounce from 'lodash/debounce';
+import type { TextInput } from 'react-native';
+import SearchConversationTabResult from './TabResult';
+import type { ISearchMessageItem } from '../../types/chat';
+
+interface SearchConversationScreenProps {
+  onPressItem?: (item: ISearchMessageItem) => void;
+}
+const SearchConversationScreen = memo(
+  ({ onPressItem }: SearchConversationScreenProps) => {
+    const nav = useNavigation();
+    const [searchTerm, setSearchTerm] = useState('');
+    const searchInputRef = useRef<TextInput>(null);
+
+    const debouncedSearch = debounce(
+      (text: string) => {
+        setSearchTerm(text);
+      },
+      500,
+      { leading: false, trailing: true }
+    );
+
+    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: debouncedSearch,
+            ref: searchInputRef as any,
+            returnKeyType: 'search',
+            value: searchTerm,
+            autoFocus: true,
+            background: KColors.palette.gray.w25,
+            br: '2x',
+            searchIconLeftColor: KColors.gray.normal,
+            marginL: undefined,
+          }}
+        />
+        <SearchConversationTabResult
+          searchTerm={searchTerm}
+          onPressItem={onPressItem}
+        />
+      </KContainer.Page>
+    );
+  }
+);
+
+export default SearchConversationScreen;

package/src/screens/SearchConversation/types.tsx

@@ -0,0 +1,5 @@
+export enum SearchConversationTabResultType {
+  All = 'all',
+  Conversations = 'conversations',
+  Messages = 'messages',
+}

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/ChatDetail.tsx

@@ -41,6 +41,7 @@ const ChatDetail = memo(
     targetUserId = '',
     targetGroupId = '',
     targetBotId = '',
+    targetMessageId = '',
     showAddMember,
     onBack,
     onPressSearch,
@@ -91,7 +92,7 @@ const ChatDetail = memo(
       getMoreNewMessages,
       hasMoreOld,
       hasMoreNew,
-    } = useMessages({ conversationId });
+    } = useMessages({ conversationId, startClientMsgId: targetMessageId });
 
     const setShowFLashMessage = useSetIsShowFLashMessage();
 

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

@@ -94,6 +94,7 @@ export interface ChatDetailProps extends Omit<
   targetUserId?: string;
   targetGroupId?: string;
   targetBotId?: string;
+  targetMessageId?: string;
   enabled?: boolean;
   showAddMember?: boolean;
   onPressUrl?: (url: string) => void;