@droppii-org/chat-mobile 0.2.63 → 0.2.65

package/src/screens/SearchConversation/SearchAllResult.tsx

@@ -13,7 +13,7 @@ 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 { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
 import { SearchEmpty } from './SearchEmpty';
 import SearchResultItem from './SearchResultItem';
 
@@ -34,7 +34,7 @@ const PAGE_SIZE = 5;
 const SearchAllResult = memo(
   ({ searchTerm, handleChangeTab, onPressItem }: SearchAllResultProps) => {
     const { applicationType } = useChatContext();
-    const { dataFlatten: messagesData } = useSearchMessage({
+    const { dataFlatten: messagesData, isFetching } = useSearchMessage({
       query: searchTerm,
       applicationType,
       pageSize: PAGE_SIZE,
@@ -90,6 +90,7 @@ const SearchAllResult = memo(
                     item={childItem}
                     tabResultType={item.type}
                     onPressItem={onPressItem}
+                    searchTerm={searchTerm}
                   />
                 </KContainer.View>
               );
@@ -107,7 +108,7 @@ const SearchAllResult = memo(
           </KContainer.View>
         );
       },
-      [onChangeTab, onPressItem]
+      [onChangeTab, onPressItem, searchTerm]
     );
 
     const keyExtractor = useCallback((item: ISearchAllResultItem) => {
@@ -119,13 +120,26 @@ const SearchAllResult = memo(
     }, []);
 
     return (
-      <FlatList
-        data={data}
-        renderItem={renderSessionItem}
-        keyExtractor={keyExtractor}
-        ListEmptyComponent={<SearchEmpty />}
-        ItemSeparatorComponent={ItemSeparatorComponent}
-      />
+      <KContainer.View flex>
+        {isFetching ? (
+          <KContainer.View flex center>
+            <ActivityIndicator color={KColors.primary.normal} size={'small'} />
+          </KContainer.View>
+        ) : (
+          <FlatList
+            data={data}
+            renderItem={renderSessionItem}
+            keyExtractor={keyExtractor}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.All}
+              />
+            }
+            ItemSeparatorComponent={ItemSeparatorComponent}
+          />
+        )}
+      </KContainer.View>
     );
   }
 );

package/src/screens/SearchConversation/SearchEmpty.tsx

@@ -2,23 +2,47 @@ import { KContainer, KImage, KLabel, KSpacingValue } from '@droppii/libs';
 import { StyleSheet } from 'react-native';
 import Images from '../../assets/images';
 import { trans } from '../../translation';
+import { memo, useMemo } from 'react';
+import { isEmpty } from 'lodash';
+import { SearchConversationTabResultType } from './types';
 
-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>
-  );
+type SearchEmptyProps = {
+  searchTerm?: string;
+  searchType?: SearchConversationTabResultType;
 };
 
+export const SearchEmpty = memo(
+  ({ searchTerm, searchType }: SearchEmptyProps) => {
+    const emptyHint = useMemo(() => {
+      if (!isEmpty(searchTerm?.trim())) {
+        return 'search:empty_description';
+      }
+      switch (searchType) {
+        case SearchConversationTabResultType.Messages:
+          return 'search_message:empty_hint';
+        case SearchConversationTabResultType.Conversations:
+          return 'search_conversation:empty_hint';
+        default:
+          return 'search:empty_hint';
+      }
+    }, [searchTerm, searchType]);
+
+    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(emptyHint)}
+        </KLabel.Text>
+      </KContainer.View>
+    );
+  }
+);
+
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: KSpacingValue['2rem'],

package/src/screens/SearchConversation/SearchMessagesResult.tsx

@@ -1,8 +1,8 @@
-import { KContainer, KDivider, KSpacingValue } from '@droppii/libs';
+import { KColors, 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 { FlatList, StyleSheet, ActivityIndicator } from 'react-native';
 import type { ISearchMessageItem } from '../../types/chat';
 import SearchResultItem from './SearchResultItem';
 import { SearchConversationTabResultType } from './types';
@@ -15,11 +15,18 @@ interface ISearchMessagesResultProps {
 const SearchMessagesResult = memo(
   ({ searchTerm, onPressItem }: ISearchMessagesResultProps) => {
     const { applicationType } = useChatContext();
-    const { dataFlatten, hasNextPage, fetchNextPage, isFetchingNextPage } =
-      useSearchMessage({
-        query: searchTerm,
-        applicationType,
-      });
+    const {
+      dataFlatten,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+      isFetching,
+      isRefetching,
+      refetch,
+    } = useSearchMessage({
+      query: searchTerm,
+      applicationType,
+    });
 
     const renderItem = useCallback(
       ({ item }: { item: ISearchMessageItem }) => {
@@ -28,10 +35,11 @@ const SearchMessagesResult = memo(
             item={item}
             tabResultType={SearchConversationTabResultType.Messages}
             onPressItem={onPressItem}
+            searchTerm={searchTerm}
           />
         );
       },
-      [onPressItem]
+      [onPressItem, searchTerm]
     );
 
     const keyExtractor = useCallback((item: ISearchMessageItem) => {
@@ -50,16 +58,29 @@ const SearchMessagesResult = memo(
 
     return (
       <KContainer.View flex>
-        <FlatList
-          data={dataFlatten}
-          renderItem={renderItem}
-          keyExtractor={keyExtractor}
-          contentContainerStyle={styles.container}
-          showsVerticalScrollIndicator={false}
-          onEndReached={onEndReached}
-          ItemSeparatorComponent={ItemSeparatorComponent}
-          ListEmptyComponent={<SearchEmpty />}
-        />
+        {isFetching && !isFetchingNextPage && !isRefetching ? (
+          <KContainer.View flex center>
+            <ActivityIndicator color={KColors.primary.normal} size={'small'} />
+          </KContainer.View>
+        ) : (
+          <FlatList
+            data={dataFlatten}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            contentContainerStyle={styles.container}
+            showsVerticalScrollIndicator={false}
+            onEndReached={onEndReached}
+            ItemSeparatorComponent={ItemSeparatorComponent}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.Messages}
+              />
+            }
+            refreshing={isFetching}
+            onRefresh={refetch}
+          />
+        )}
       </KContainer.View>
     );
   }

package/src/screens/SearchConversation/SearchResultItem.tsx

@@ -5,32 +5,65 @@ import {
   KLabel,
   KSpacingValue,
 } from '@droppii/libs';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } 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 { getMessagePreview, getSenderName } from '../../utils/messageUtils';
 import { useUserStore } from '../../store';
 import { formatTimestamp } from '../../utils/dateTimeUtils';
+import {
+  highlightSearch,
+  type HighlightResult,
+} from '../../utils/highlightSearch';
+import isEmpty from 'lodash/isEmpty';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
 
 interface ISearchResultItemProps {
   item: ISearchMessageItem;
   tabResultType: SearchConversationTabResultType;
   onPressItem?: (item: ISearchMessageItem) => void;
+  searchTerm?: string;
 }
 const SearchResultItem = memo((props: ISearchResultItemProps) => {
-  const { item, tabResultType, onPressItem } = props || {};
+  const { item, tabResultType, onPressItem, searchTerm } = props || {};
   const currentUserId = useUserStore((s) => s.user?.userID);
 
   const timestamp = formatTimestamp(item?.chatLog?.sendTime ?? null);
-  const lastMessageText = getLastMessageText({
-    message: item?.chatLog,
+  const senderName = getSenderName(
+    item?.chatLog,
     currentUserId,
-    conversation: item?.conversation,
-  });
+    item?.conversation
+  );
+  const lastMessageText = getMessagePreview(item?.chatLog);
+
+  const highlightResult: HighlightResult | null = useMemo(() => {
+    if (isEmpty(searchTerm?.trim())) return null;
+    if (tabResultType === SearchConversationTabResultType.Conversations) {
+      return highlightSearch(
+        item?.conversation?.showName || '',
+        searchTerm || ''
+      );
+    }
+    return highlightSearch(lastMessageText, searchTerm || '');
+  }, [
+    lastMessageText,
+    searchTerm,
+    tabResultType,
+    item?.conversation?.showName,
+  ]);
 
   const handlePressItem = useCallback(() => {
+    const isRevoked = item?.chatLog?.contentType === MessageType.RevokeMessage;
+    if (isRevoked) {
+      UIUtils.toast.open({
+        title: trans('search_message:revoked_message'),
+      });
+      return;
+    }
     onPressItem?.({ conversation: item?.conversation, chatLog: item?.chatLog });
   }, [onPressItem, item?.conversation, item?.chatLog]);
 
@@ -46,16 +79,42 @@ const SearchResultItem = memo((props: ISearchResultItemProps) => {
         <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>
+            {!!highlightResult &&
+            tabResultType === SearchConversationTabResultType.Conversations ? (
+              <KLabel.Text typo="TextMdMedium" numberOfLines={1} flex>
+                {highlightResult?.before || ''}
+                <KLabel.Text typo="TextMdMedium" color={KColors.primary.normal}>
+                  {highlightResult?.match || ''}
+                </KLabel.Text>
+                <KLabel.Text typo="TextMdMedium">
+                  {highlightResult?.after || ''}
+                </KLabel.Text>
+              </KLabel.Text>
+            ) : (
+              <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>
+          {!!highlightResult &&
+          tabResultType === SearchConversationTabResultType.Messages ? (
+            <KLabel.Text typo="TextNmNormal" numberOfLines={1} flex>
+              {`${senderName}: ${highlightResult?.before || ''}`}
+              <KLabel.Text typo="TextNmNormal" color={KColors.primary.normal}>
+                {highlightResult?.match || ''}
+              </KLabel.Text>
+              <KLabel.Text typo="TextNmNormal">
+                {highlightResult?.after || ''}
+              </KLabel.Text>
+            </KLabel.Text>
+          ) : (
+            <KLabel.Text typo="TextNmNormal" numberOfLines={1} flex>
+              {`${senderName}: ${lastMessageText}`}
+            </KLabel.Text>
+          )}
         </KContainer.View>
       </KContainer.View>
       <KContainer.VisibleView

package/src/screens/SearchMessage/SearchMessageResult.tsx

@@ -1,11 +1,12 @@
-import { KContainer, KDivider, KSpacingValue } from '@droppii/libs';
+import { KColors, 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 { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
 import type { ISearchMessageItem } from '../../types/chat';
 import { SearchEmpty } from '../SearchConversation/SearchEmpty';
 import SearchResultItem from './SearchResultItem';
+import { SearchConversationTabResultType } from '../SearchConversation/types';
 
 interface ISearchMessagesResultProps {
   searchTerm: string;
@@ -15,18 +16,31 @@ interface ISearchMessagesResultProps {
 const SearchMessagesResult = memo(
   ({ searchTerm, onPressItem, conversationId }: ISearchMessagesResultProps) => {
     const { applicationType } = useChatContext();
-    const { dataFlatten, hasNextPage, fetchNextPage, isFetchingNextPage } =
-      useSearchMessage({
-        query: searchTerm,
-        applicationType,
-        conversationId,
-      });
+    const {
+      dataFlatten,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+      isFetching,
+      isRefetching,
+      refetch,
+    } = useSearchMessage({
+      query: searchTerm,
+      applicationType,
+      conversationId,
+    });
 
     const renderItem = useCallback(
       ({ item }: { item: ISearchMessageItem }) => {
-        return <SearchResultItem item={item} onPressItem={onPressItem} />;
+        return (
+          <SearchResultItem
+            item={item}
+            onPressItem={onPressItem}
+            searchTerm={searchTerm}
+          />
+        );
       },
-      [onPressItem]
+      [onPressItem, searchTerm]
     );
 
     const keyExtractor = useCallback((item: ISearchMessageItem) => {
@@ -45,16 +59,29 @@ const SearchMessagesResult = memo(
 
     return (
       <KContainer.View flex>
-        <FlatList
-          data={dataFlatten}
-          renderItem={renderItem}
-          keyExtractor={keyExtractor}
-          contentContainerStyle={styles.container}
-          showsVerticalScrollIndicator={false}
-          onEndReached={onEndReached}
-          ItemSeparatorComponent={ItemSeparatorComponent}
-          ListEmptyComponent={<SearchEmpty />}
-        />
+        {isFetching && !isFetchingNextPage && !isRefetching ? (
+          <KContainer.View flex center>
+            <ActivityIndicator color={KColors.primary.normal} size={'small'} />
+          </KContainer.View>
+        ) : (
+          <FlatList
+            data={dataFlatten}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            contentContainerStyle={styles.container}
+            showsVerticalScrollIndicator={false}
+            onEndReached={onEndReached}
+            ItemSeparatorComponent={ItemSeparatorComponent}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.Messages}
+              />
+            }
+            refreshing={isFetching}
+            onRefresh={refetch}
+          />
+        )}
       </KContainer.View>
     );
   }

package/src/screens/SearchMessage/SearchResultItem.tsx

@@ -5,14 +5,22 @@ import { StyleSheet } from 'react-native';
 import { AvatarSection, NamePrefixIcon } from '../../components/ThreadCard';
 import { getMessagePreview } from '../../utils/messageUtils';
 import { formatTimestamp } from '../../utils/dateTimeUtils';
-import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { MessageType, PeerType } from '@droppii/openim-rn-client-sdk';
+import {
+  highlightSearch,
+  type HighlightResult,
+} from '../../utils/highlightSearch';
+import isEmpty from 'lodash/isEmpty';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
 
 interface ISearchResultItemProps {
   item: ISearchMessageItem;
   onPressItem?: (item: ISearchMessageItem) => void;
+  searchTerm?: string;
 }
 const SearchResultItem = memo((props: ISearchResultItemProps) => {
-  const { item, onPressItem } = props || {};
+  const { item, onPressItem, searchTerm } = props || {};
 
   const isBotConversation = useMemo(() => {
     return item?.conversation?.peerType === PeerType.Bot;
@@ -28,7 +36,19 @@ const SearchResultItem = memo((props: ISearchResultItemProps) => {
     ? item?.conversation?.showName
     : item?.chatLog?.senderNickname;
 
+  const highlightResult: HighlightResult | null = useMemo(() => {
+    if (isEmpty(searchTerm?.trim())) return null;
+    return highlightSearch(lastMessageText, searchTerm || '');
+  }, [lastMessageText, searchTerm]);
+
   const handlePressItem = useCallback(() => {
+    const isRevoked = item?.chatLog?.contentType === MessageType.RevokeMessage;
+    if (isRevoked) {
+      UIUtils.toast.open({
+        title: trans('search_message:revoked_message'),
+      });
+      return;
+    }
     onPressItem?.({ conversation: item?.conversation, chatLog: item?.chatLog });
   }, [onPressItem, item?.conversation, item?.chatLog]);
 
@@ -51,9 +71,21 @@ const SearchResultItem = memo((props: ISearchResultItemProps) => {
               {timestamp}
             </KLabel.Text>
           </KContainer.View>
-          <KLabel.Text typo="TextNmNormal" numberOfLines={1} flex>
-            {lastMessageText}
-          </KLabel.Text>
+          {highlightResult ? (
+            <KLabel.Text typo="TextNmNormal" numberOfLines={1} flex>
+              {highlightResult?.before || ''}
+              <KLabel.Text typo="TextNmNormal" color={KColors.primary.normal}>
+                {highlightResult?.match || ''}
+              </KLabel.Text>
+              <KLabel.Text typo="TextNmNormal">
+                {highlightResult?.after || ''}
+              </KLabel.Text>
+            </KLabel.Text>
+          ) : (
+            <KLabel.Text typo="TextNmNormal" numberOfLines={1} flex>
+              {lastMessageText}
+            </KLabel.Text>
+          )}
         </KContainer.View>
       </KContainer.View>
     </KContainer.Touchable>

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

@@ -63,6 +63,8 @@ import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
 import { UIUtils } from '../../utils/UIUtils';
+import { GroupPermission, SessionType } from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../../store';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -95,6 +97,7 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
+    const groupPermissions = useChatDetailContext().groupPermissions;
 
     const {
       activePanelType,
@@ -129,13 +132,26 @@ export const ChatComposer = memo(
     });
 
     const handleSend = useCallback(async () => {
+      const currentConversation = useConversationStore
+        .getState()
+        .getCurrentConversation();
+      if (
+        currentConversation?.conversationType === SessionType.Group &&
+        !groupPermissions?.includes(GroupPermission.SendMessage)
+      ) {
+        UIUtils.toast.open({
+          title: trans('chat:no_send_permission'),
+          theme: 'info',
+        });
+        return;
+      }
       if (compose.isUploading || !compose.canSend) return;
       try {
         await compose.send();
       } catch (error) {
         if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
       }
-    }, [compose]);
+    }, [compose, groupPermissions]);
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);