@droppii-org/chat-mobile 0.2.56 → 0.2.58

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

package/src/services/endpoints.ts

@@ -38,6 +38,7 @@ export const ENDPOINTS = {
     stickersByCategoryId: (id: string) =>
       `${getApiEndpoint('stickersByCategory')}/${id}/stickers`,
     stickerHistory: () => getApiEndpoint('stickerHistory'),
+    searchMessages: () => `${getApiEndpoint('messages')}/search`,
   },
   uploaderService: {
     get uploadImage() {

package/src/translation/resources/i18n.ts

@@ -118,6 +118,13 @@ const i18nKey: Record<string, string> = {
     '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',
+  'search': 'Tìm kiếm',
+  'all': 'Tất cả',
+  'contacts': 'Liên hệ',
+  'messages': 'Tin nhắn',
+  'search:empty_description':
+    'Không tìm thấy kết quả nào\nHãy thử lại với cách viết hoặc kết hợp cụm từ khác phù hợp hơn.',
+  'view_all': 'Xem tất cả',
 };
 
 export default {

package/src/types/chat.ts

@@ -1,4 +1,5 @@
 import {
+  MessageType,
   type ConversationItem,
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
@@ -317,3 +318,17 @@ export interface DThreadResourceRawRow {
   tag: unknown;
   displayTag: unknown;
 }
+
+export type ISearchMessagesRequest = {
+  conversationId?: string;
+  contentTypes: MessageType[];
+  page: number;
+  pageSize: number;
+  applicationType: DChatApplicationType;
+  searchTerm: string;
+};
+
+export interface ISearchMessageItem {
+  chatLog: MessageItem;
+  conversation: ConversationItem;
+}

package/src/utils/messageUtils.ts

@@ -20,10 +20,14 @@ export const isMessageRevoked = (message: MessageItem): boolean =>
 export const extractTextContent = (message: MessageItem): string => {
   if (message.textElem?.content) return message.textElem.content;
   try {
-    const parsed = JSON.parse(message.content) as { content?: string };
-    return parsed.content ?? '';
+    const parsed = JSON.parse(message.content) as {
+      content?: string;
+      text?: string;
+      description?: string;
+    };
+    return parsed?.content || parsed?.text || parsed?.description || '';
   } catch {
-    return message.content ?? '';
+    return message.content || '';
   }
 };
 
@@ -75,14 +79,17 @@ export const getMessagePreview = (message?: MessageItem): string => {
     case MessageType.UrlTextMessage:
       // Preview link message - show with [Link] prefix
       const urlText =
-        message?.urlTextElem?.content || message?.urlTextElem?.urls?.[0] || '';
+        message?.urlTextElem?.content ||
+        message?.urlTextElem?.urls?.[0] ||
+        extractTextContent(message) ||
+        '';
       return urlText ? urlText : '';
 
     case MessageType.AtTextMessage:
       return extractTextContent(message);
 
     case MessageType.QuoteMessage:
-      return message?.quoteElem?.text || '';
+      return message?.quoteElem?.text || extractTextContent(message) || '';
 
     case MessageType.RevokeMessage:
       return trans('msg_type_revoke');
@@ -91,7 +98,7 @@ export const getMessagePreview = (message?: MessageItem): string => {
       if (message?.customElem?.description) {
         return message?.customElem?.description;
       }
-      return '';
+      return extractTextContent(message) || '';
 
     case MessageType.StickerMessage:
       return '[Sticker]';