@droppii-org/chat-mobile 0.2.57 → 0.2.58

package/src/constants/index.ts

@@ -0,0 +1 @@
+export const PAGE_SIZE = 20;

package/src/hooks/message/useSearchMessage.ts

@@ -0,0 +1,78 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { messageQueryKeys } from '../query-keys';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type {
+  DChatApplicationType,
+  ISearchMessageItem,
+  ISearchMessagesRequest,
+} from '../../types/chat';
+import type { BaseResponse } from '../../types/auth';
+import { PAGE_SIZE } from '../../constants';
+import { useMemo } from 'react';
+
+interface IUseSearchMessageProps {
+  query: string;
+  conversationId?: string;
+  applicationType: DChatApplicationType;
+  pageSize?: number;
+}
+export const useSearchMessage = ({
+  query,
+  conversationId,
+  applicationType,
+  pageSize = PAGE_SIZE,
+}: IUseSearchMessageProps) => {
+  const { data, ...rest } = useInfiniteQuery({
+    queryKey: messageQueryKeys.search(query, conversationId),
+    queryFn: async ({ pageParam = 1 }) => {
+      const params: ISearchMessagesRequest = {
+        contentTypes: [
+          MessageType.TextMessage,
+          MessageType.UrlTextMessage,
+          MessageType.QuoteMessage,
+          MessageType.AtTextMessage,
+          MessageType.CustomMessage,
+        ],
+        page: pageParam,
+        pageSize: pageSize,
+        applicationType,
+        searchTerm: query,
+      };
+      const res = await apiInstance?.post<BaseResponse<ISearchMessageItem[]>>(
+        ENDPOINTS.chatService.searchMessages(),
+        params
+      );
+      return res?.data;
+    },
+    getNextPageParam: (lastPage) => {
+      const currentPage = lastPage?.pageable?.pageNumber || 1;
+      const dataLength = lastPage?.data?.length || 0;
+      return dataLength < pageSize ? undefined : currentPage + 1;
+    },
+    initialPageParam: 1,
+    enabled: !!query && !!applicationType,
+  });
+
+  const { dataFlatten } = useMemo(() => {
+    if (!data)
+      return {
+        dataFlatten: [],
+      };
+
+    const allItems =
+      data?.pages
+        ?.flatMap?.((page) => page?.data)
+        ?.filter((item) => item !== undefined) || [];
+
+    return {
+      dataFlatten: allItems,
+    };
+  }, [data]);
+
+  return {
+    dataFlatten,
+    ...rest,
+  };
+};

package/src/hooks/query-keys.ts

@@ -54,3 +54,9 @@ export const resourceCenterQueryKeys = {
   byType: (recvID: string, contentType: number) =>
     [...resourceCenterQueryKeys.all, recvID, contentType] as const,
 };
+
+export const messageQueryKeys = {
+  all: ['messages'] as const,
+  search: (query: string, conversationId?: string) =>
+    [...messageQueryKeys.all, 'search', query, conversationId] as const,
+};

package/src/index.tsx

@@ -30,6 +30,7 @@ export { Inbox } from './screens/inbox';
 export { default as MediaViewerScreen } from './screens/MediaView';
 export { default as ResourceCenterScreen } from './screens/ResourceCenter';
 export type { ResourceCenterScreenProps } from './screens/ResourceCenter/types';
+export { default as SearchConversation } from './screens/SearchConversation';
 export * from './screens/chat-detail';
 export * from './screens/ChatInfo';
 

package/src/screens/ChatInfo/ChatInfoActions.tsx

@@ -58,7 +58,7 @@ const ChatInfoActions = memo(
       if (isTargetActive) {
         items.push(
           {
-            leftNode: { icon: { vectorName: 'user-two-o' } },
+            leftNode: { icon: { vectorName: 'user-three-o' } },
             onPress: onPressCreateGroup,
             paddingH: '0.75rem',
             paddingV: '0.75rem',

package/src/screens/ChatInfo/ChatInfoMediaRow.tsx

@@ -20,7 +20,7 @@ const MEDIA_TABS: Array<{
   },
   {
     tab: DThreadResourceContentType.FILE,
-    iconName: 'paperclip-o',
+    iconName: 'folder-o',
     labelKey: 'chat:info_media_file',
   },
   {

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;