@droppii-org/chat-mobile 0.2.80 → 0.2.81

package/src/screens/SearchConversation/TabResult.tsx

@@ -12,19 +12,30 @@ import { SearchConversationTabResultType } from './types';
 import { trans } from '../../translation';
 import SearchMessagesResult from './SearchMessagesResult';
 import SearchAllResult from './SearchAllResult';
-import type { ISearchMessageItem } from '../../types/chat';
+import SearchContactsResult from './SearchContactsResult';
+import SearchCommunityResult from './SearchCommunityResult';
+import type { IContactSearchItem, ISearchMessageItem } from '../../types/chat';
 
 type TabRoute = { key: string; title: string };
 
 interface ISearchConversationTabResultProps {
   searchTerm: string;
   onPressItem?: (item: ISearchMessageItem) => void;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+  onPressGroup?: (groupId: string) => void;
 }
 
 const TabRoutes: TabRoute[] = [
   { key: SearchConversationTabResultType.All, title: trans('all') },
-  // { key: SearchConversationTabResultType.Conversations, title: trans('contacts') },
+  {
+    key: SearchConversationTabResultType.Conversations,
+    title: trans('contacts'),
+  },
   { key: SearchConversationTabResultType.Messages, title: trans('messages') },
+  {
+    key: SearchConversationTabResultType.Community,
+    title: trans('community'),
+  },
 ];
 
 interface CustomTabBarProps {
@@ -58,7 +69,12 @@ const CustomTabBar = memo(({ routes, index, onPress }: CustomTabBarProps) => (
 ));
 
 const SearchConversationTabResult = memo(
-  ({ searchTerm, onPressItem }: ISearchConversationTabResultProps) => {
+  ({
+    searchTerm,
+    onPressItem,
+    onPressSearchContact,
+    onPressGroup,
+  }: ISearchConversationTabResultProps) => {
     const [index, setIndex] = useState(0);
     const [routes] = useState<TabRoute[]>(TabRoutes);
 
@@ -78,10 +94,16 @@ const SearchConversationTabResult = memo(
                 searchTerm={searchTerm}
                 handleChangeTab={handleChangeTab}
                 onPressItem={onPressItem}
+                onPressSearchContact={onPressSearchContact}
               />
             );
           case SearchConversationTabResultType.Conversations:
-            return null;
+            return (
+              <SearchContactsResult
+                searchTerm={searchTerm}
+                onPressSearchContact={onPressSearchContact}
+              />
+            );
           case SearchConversationTabResultType.Messages:
             return (
               <SearchMessagesResult
@@ -89,11 +111,24 @@ const SearchConversationTabResult = memo(
                 onPressItem={onPressItem}
               />
             );
+          case SearchConversationTabResultType.Community:
+            return (
+              <SearchCommunityResult
+                searchTerm={searchTerm}
+                onPressGroup={onPressGroup}
+              />
+            );
           default:
             return null;
         }
       },
-      [searchTerm, handleChangeTab, onPressItem]
+      [
+        searchTerm,
+        handleChangeTab,
+        onPressItem,
+        onPressSearchContact,
+        onPressGroup,
+      ]
     );
 
     const renderTabBar = useCallback(

package/src/screens/SearchConversation/index.tsx

@@ -5,13 +5,19 @@ 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';
+import type { IContactSearchItem, ISearchMessageItem } from '../../types/chat';
 
 interface SearchConversationScreenProps {
   onPressItem?: (item: ISearchMessageItem) => void;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+  onPressGroup?: (groupId: string) => void;
 }
 const SearchConversationScreen = memo(
-  ({ onPressItem }: SearchConversationScreenProps) => {
+  ({
+    onPressItem,
+    onPressSearchContact,
+    onPressGroup,
+  }: SearchConversationScreenProps) => {
     const nav = useNavigation();
     const [inputValue, setInputValue] = useState('');
     const [searchTerm, setSearchTerm] = useState('');
@@ -62,6 +68,8 @@ const SearchConversationScreen = memo(
         <SearchConversationTabResult
           searchTerm={searchTerm}
           onPressItem={onPressItem}
+          onPressSearchContact={onPressSearchContact}
+          onPressGroup={onPressGroup}
         />
       </KContainer.Page>
     );

package/src/screens/SearchConversation/types.tsx

@@ -2,4 +2,5 @@ export enum SearchConversationTabResultType {
   All = 'all',
   Conversations = 'conversations',
   Messages = 'messages',
+  Community = 'community',
 }

package/src/screens/chat-detail/messageToolbox/MessageToolboxWrapper.tsx

@@ -35,11 +35,19 @@ export const MessageToolboxWrapper = memo(
     toolbox,
   }: MessageToolboxWrapperProps) => {
     const insets = useSafeAreaInsets();
+    const messageHeight = useSharedValue(0);
     const reactionHeight = useSharedValue(0);
     const toolboxHeight = useSharedValue(0);
     const topOffset = Platform.OS === 'android' ? insets.top : 0;
     const { height: windowHeight } = useWindowDimensions();
 
+    const onMessageCloneLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        messageHeight.value = nativeEvent.layout.height;
+      },
+      [messageHeight]
+    );
+
     const onToolboxLayout = useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         toolboxHeight.value = nativeEvent.layout.height;
@@ -62,7 +70,7 @@ export const MessageToolboxWrapper = memo(
       const overflowBottom =
         Math.max(rect.y, insets.top) +
         topOffset +
-        rect.height +
+        messageHeight.value +
         toolboxHeight.value +
         (insets.bottom || 32) +
         menuGap -
@@ -89,9 +97,19 @@ export const MessageToolboxWrapper = memo(
           containerStyles,
         ]}
       >
-        <View pointerEvents="none">{message}</View>
-        <View onLayout={onReactionLayout}>{reaction}</View>
-        <View onLayout={onToolboxLayout}>{toolbox}</View>
+        <View
+          pointerEvents="none"
+          collapsable={false}
+          onLayout={onMessageCloneLayout}
+        >
+          {message}
+        </View>
+        <View collapsable={false} onLayout={onReactionLayout}>
+          {reaction}
+        </View>
+        <View collapsable={false} onLayout={onToolboxLayout}>
+          {toolbox}
+        </View>
       </Animated.View>
     );
   }

package/src/services/endpoints.ts

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

package/src/translation/resources/i18n.ts

@@ -188,7 +188,13 @@ const i18nKey: Record<string, string> = {
     'Bạn có thể tìm kiếm theo liên hệ hoặc nội dung tin nhắn',
   'search_message:empty_hint': 'Bạn có thể tìm kiếm theo nội dung tin nhắn',
   'search_conversation:empty_hint': 'Bạn có thể tìm kiếm theo liên hệ',
+  'search_community:empty_hint': 'Bạn có thể tìm kiếm theo tên nhóm cộng đồng',
   'view_all': 'Xem tất cả',
+  'contact_type:customer': 'Khách hàng',
+  'contact_type:pdp': 'PDP',
+  'contact_type:group': 'Nhóm',
+  'contact_type:seller': 'Người bán',
+  'group:no_description': 'Chưa có mô tả nhóm',
   'search_message:revoked_message': 'Tin nhắn đã được thu hồi',
   'chat:no_permission': 'Bạn không có quyền này',
   'chat:no_send_permission': 'Bạn không có quyền gửi tin nhắn',

package/src/types/chat.ts

@@ -341,3 +341,33 @@ export interface ISearchMessageItem {
   chatLog: MessageItem;
   conversation: ConversationItem;
 }
+
+export enum ContactCategory {
+  Customer = 'CUSTOMER',
+  Pdp = 'PDP_BOT',
+  Group = 'GROUP',
+  Seller = 'USER',
+}
+
+export type IContactSearchRequest = {
+  applicationType: DChatApplicationType;
+  searchTerm: string;
+  page: number;
+  pageSize: number;
+  type?: ContactCategory;
+};
+
+export interface IContactSearchItem {
+  id: string;
+  type: ContactCategory;
+  targetUserId?: string;
+  targetCustomerId?: string;
+  targetGroupId?: string;
+  targetBotId?: string;
+  targetName: string;
+  targetAvatar?: string;
+  applicationType: DChatApplicationType;
+  lastOnlineTime?: string;
+  memberCount?: number;
+  description?: string;
+}

package/src/utils/dateTimeUtils.ts

@@ -2,6 +2,12 @@
  * Date and time formatting utilities
  */
 
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/vi';
+
+dayjs.extend(relativeTime);
+
 export const formatDuration = (durationMs: number): string => {
   // Convert milliseconds to seconds
   const totalSeconds = Math.floor(durationMs / 1000);
@@ -46,3 +52,12 @@ export const formatTimestamp = (ts: number | string | null): string => {
     return '';
   }
 };
+
+export const formatLastOnlineTime = (ts: number | string | null): string => {
+  if (!ts) return '';
+
+  const date = dayjs(ts).locale('vi');
+  if (!date.isValid()) return '';
+
+  return date.fromNow();
+};

package/src/utils/highlightSearch.ts

@@ -4,6 +4,16 @@ export interface HighlightResult {
   after: string;
 }
 
+// Strips Vietnamese diacritics one base-character-at-a-time (NFD decomposition +
+// combining-mark removal, plus đ/Đ which NFD doesn't decompose) so the result stays
+// the same length and index-aligned with the input
+const stripDiacritics = (input: string): string =>
+  input
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/đ/g, 'd')
+    .replace(/Đ/g, 'D');
+
 export const highlightSearch = (
   text: string,
   keyword: string,
@@ -11,8 +21,8 @@ export const highlightSearch = (
 ): HighlightResult | null => {
   if (!keyword) return null;
 
-  const lowerText = text.toLowerCase();
-  const lowerKeyword = keyword.toLowerCase();
+  const lowerText = stripDiacritics(text.toLowerCase());
+  const lowerKeyword = stripDiacritics(keyword.toLowerCase());
   const index = lowerText.indexOf(lowerKeyword);
 
   if (index === -1) return null;

package/src/utils/messageUtils.ts

@@ -442,15 +442,21 @@ export const getSenderName = (
   currentUserId?: string,
   conversation?: ConversationItem
 ): string => {
-  const sender =
-    currentUserId && message.sendID === currentUserId
-      ? 'Bạn'
-      : message?.senderNickname ||
-        getNotificationOpUserNickname(message) ||
-        (conversation?.peerType === PeerType.Bot
-          ? conversation?.showName || ''
-          : undefined);
-  return sender || '';
+  const isCurrentUser = currentUserId && message.sendID === currentUserId;
+
+  if (isCurrentUser) return 'Bạn';
+
+  switch (conversation?.peerType) {
+    case PeerType.Bot:
+    case PeerType.Customer:
+    case PeerType.User:
+      return '';
+
+    default:
+      return (
+        message?.senderNickname || getNotificationOpUserNickname(message) || ''
+      );
+  }
 };
 
 export interface GetLastMessageTextParams {