@droppii-org/chat-mobile 0.2.79 → 0.2.81

package/src/screens/SearchConversation/SearchMessagesResult.tsx

@@ -1,4 +1,4 @@
-import { KColors, KContainer, KDivider, KSpacingValue } from '@droppii/libs';
+import { KColors, KContainer, KSpacingValue } from '@droppii/libs';
 import { memo, useCallback } from 'react';
 import { useSearchMessage } from '../../hooks/message/useSearchMessage';
 import { useChatContext } from '../../context';
@@ -52,10 +52,6 @@ const SearchMessagesResult = memo(
       }
     }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
-    const ItemSeparatorComponent = useCallback(() => {
-      return <KDivider size={'hairline'} vertical={false} />;
-    }, []);
-
     return (
       <KContainer.View flex>
         {isFetching && !isFetchingNextPage && !isRefetching ? (
@@ -70,7 +66,6 @@ const SearchMessagesResult = memo(
             contentContainerStyle={styles.container}
             showsVerticalScrollIndicator={false}
             onEndReached={onEndReached}
-            ItemSeparatorComponent={ItemSeparatorComponent}
             ListEmptyComponent={
               <SearchEmpty
                 searchTerm={searchTerm}

package/src/screens/SearchConversation/SearchResultItem.tsx

@@ -68,7 +68,12 @@ const SearchResultItem = memo((props: ISearchResultItemProps) => {
   }, [onPressItem, item?.conversation, item?.chatLog]);
 
   return (
-    <KContainer.Touchable style={styles.container} onPress={handlePressItem}>
+    <KContainer.Touchable
+      style={styles.container}
+      onPress={handlePressItem}
+      brBW={1}
+      brBC={KColors.border.light}
+    >
       <KContainer.View style={styles.leftContainer}>
         <AvatarSection
           avatar={item?.conversation?.faceURL ?? null}

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

@@ -32,7 +32,11 @@ import {
   KRadiusValue,
   KImage,
 } from '@droppii/libs';
-import { precomputeLegendListData } from '../../utils/legendListMessage';
+import {
+  precomputeLegendListData,
+  type GroupPosition,
+} from '../../utils/legendListMessage';
+import { getMessageRenderId } from '../../utils/message';
 import type { ChatListProps } from './types';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
@@ -50,7 +54,7 @@ import { ChatEvent, type ScrollToMessagePayload } from '../../types/events';
 import { useMessageStore } from '../../store/message';
 import { useChatContext } from '../../context';
 import { messageStyles } from './legend/messageTypes';
-import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { MessageType, PeerType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
@@ -60,10 +64,19 @@ import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
 
-// Row wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`)
-// adds only a bottom margin — no vertical padding — so a fixed-size item's true
-// rendered height is `content height + this margin`.
-const ROW_MARGIN_BOTTOM = KSpacingValue['0.25rem'];
+// Cluster spacing: a wide gap after the message that closes a cluster, a tight
+// one between messages inside it. These override the flat margin on the row
+// wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`),
+// which adds only a bottom margin and no vertical padding — so a fixed-size
+// item's true rendered height stays `content height + this margin`, and
+// getFixedItemSize can keep folding it in.
+const ROW_MARGIN_CLUSTER_END = KSpacingValue['0.5rem'];
+const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
+
+const getRowMarginBottom = (position: GroupPosition): number =>
+  position === 'last' || position === 'solo'
+    ? ROW_MARGIN_CLUSTER_END
+    : ROW_MARGIN_IN_CLUSTER;
 
 // KeyboardAwareLegendList auto scroll when modal opened
 // TODO: Convert toolbox to absolute view
@@ -103,12 +116,23 @@ export const ChatListLegend = memo(
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
     // Precompute all message data in single pass (O(n))
+    const { isBotConversation, conversationFlow, conversation } =
+      useChatDetailContext();
+
+    // Avatar and sender name only appear in real group chats — a bot thread is
+    // a Group session too, but reads as a single counterpart.
+    const isGroupConversation =
+      conversation?.peerType === PeerType.Group && !isBotConversation;
+
     const messageDataMap = useMemo(
-      () => precomputeLegendListData(messages),
-      [messages]
+      () =>
+        precomputeLegendListData(messages, {
+          isBotConversation,
+          currentUserId,
+        }),
+      [messages, isBotConversation, currentUserId]
     );
 
-    const { isBotConversation, conversationFlow } = useChatDetailContext();
     const { retryMessage } = useSendMessage();
 
     const lastMessageId = useMemo(() => {
@@ -163,17 +187,22 @@ export const ChatListLegend = memo(
           const isLastMessage =
             (message.clientMsgID || message.serverMsgID) === lastMessageId;
           const isLastIncoming = !isOutgoing && isLastMessage;
-          const messageId =
-            message.clientMsgID ||
-            message.serverMsgID ||
-            `temp-${message.sendTime || message.createTime}-${index}`;
+          const messageId = getMessageRenderId(message, index);
 
           const messageData = messageDataMap.get(messageId);
           if (!messageData) {
             return null;
           }
 
-          const { dayStart, createdAt } = messageData;
+          const { dayStart, timeBreak, createdAt, groupPosition } = messageData;
+
+          const showSenderGutter = isGroupConversation && !isOutgoing;
+          const showName =
+            showSenderGutter &&
+            (groupPosition === 'first' || groupPosition === 'solo');
+          const showAvatar =
+            showSenderGutter &&
+            (groupPosition === 'last' || groupPosition === 'solo');
 
           let flowInputButtonsNodes: GroupChild<'input-buttons'>[] = [];
           if (
@@ -188,17 +217,20 @@ export const ChatListLegend = memo(
 
           return (
             <>
-              {dayStart && <LegendChatDay createdAt={createdAt} />}
+              {(dayStart || timeBreak) && (
+                <LegendChatDay createdAt={createdAt} timeOnly={!dayStart} />
+              )}
               <KContainer.View
                 ref={(node: View | null) => {
                   if (node) rowRefsMap.current.set(messageId, node);
                   else rowRefsMap.current.delete(messageId);
                 }}
-                style={
+                style={[
                   isOutgoing
                     ? messageStyles.messageRowRight
-                    : messageStyles.messageRowLeft
-                }
+                    : messageStyles.messageRowLeft,
+                  { marginBottom: getRowMarginBottom(groupPosition) },
+                ]}
                 collapsable={false}
               >
                 <LegendChatMessage
@@ -215,6 +247,10 @@ export const ChatListLegend = memo(
                   }
                   customMessageItemFactory={customMessageItemFactory}
                   isHighlighted={highlightedId === messageId}
+                  showName={showName}
+                  showAvatar={showAvatar}
+                  showSenderGutter={showSenderGutter}
+                  groupPosition={groupPosition}
                 />
               </KContainer.View>
               {flowInputButtonsNodes && flowInputButtonsNodes.length > 0 && (
@@ -242,6 +278,7 @@ export const ChatListLegend = memo(
         currentUserId,
         lastMessageId,
         messageDataMap,
+        isGroupConversation,
         isBotConversation,
         onMediaPress,
         onPressUrl,
@@ -303,12 +340,22 @@ export const ChatListLegend = memo(
     const getFixedItemSize = useCallback(
       (item: MessageItem, index: number): number | undefined => {
         const message = item;
-        const messageId =
-          message.clientMsgID ||
-          message.serverMsgID ||
-          `temp-${message.sendTime || message.createTime}-${index}`;
+        const messageId = getMessageRenderId(message, index);
 
-        if (messageDataMap.get(messageId)?.dayStart) return undefined;
+        const messageData = messageDataMap.get(messageId);
+        // Both separators add chrome above the row that this function does not
+        // account for, and a resolved size is never re-measured.
+        if (messageData?.dayStart || messageData?.timeBreak) return undefined;
+
+        // Incoming rows in a group chat carry an avatar column and a sender
+        // name whose height this function cannot predict — measure them.
+        if (isGroupConversation && message.sendID !== currentUserId) {
+          return undefined;
+        }
+
+        const rowMargin = getRowMarginBottom(
+          messageData?.groupPosition ?? 'solo'
+        );
 
         // Resolve the content-type candidate FIRST — for every type other
         // than these three the result is `undefined` regardless of anything
@@ -319,17 +366,16 @@ export const ChatListLegend = memo(
         switch (message.contentType) {
           case MessageType.PictureMessage:
             candidateSize =
-              resolveImageDisplayDims(message, windowWidth).height +
-              ROW_MARGIN_BOTTOM;
+              resolveImageDisplayDims(message, windowWidth).height + rowMargin;
             break;
           case MessageType.VideoMessage:
             candidateSize =
               ChatImageDimens.getDimensions(
                 CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
-              ).height + ROW_MARGIN_BOTTOM;
+              ).height + rowMargin;
             break;
           case MessageType.StickerMessage:
-            candidateSize = STICKER_SIZE + ROW_MARGIN_BOTTOM;
+            candidateSize = STICKER_SIZE + rowMargin;
             break;
           default:
             return undefined;
@@ -361,6 +407,7 @@ export const ChatListLegend = memo(
         messageDataMap,
         customMessageItemFactory,
         currentUserId,
+        isGroupConversation,
         lastMessageId,
         isBotConversation,
         conversationFlow?.flowCurrentStep,
@@ -368,6 +415,28 @@ export const ChatListLegend = memo(
       ]
     );
 
+    // LegendList memoises each rendered item on [itemKey, item, extraData], so
+    // an item whose own object is unchanged will not re-render. Cluster
+    // position depends on a message's NEIGHBOURS, which can change while the
+    // message itself does not — prepending older history is enough to turn a
+    // 'first' into a 'middle'. messageDataMap is memoised on exactly the inputs
+    // that can move those boundaries, so including it here is what keeps a
+    // stale tail from being left behind.
+    const listExtraData = useMemo(
+      () => ({
+        messageDataMap,
+        flowStepId: conversationFlow?.flowCurrentStep?.id ?? '',
+        lastMessageId,
+        highlightedId,
+      }),
+      [
+        messageDataMap,
+        conversationFlow?.flowCurrentStep?.id,
+        lastMessageId,
+        highlightedId,
+      ]
+    );
+
     const handleStartReached = useCallback(() => {
       if (__DEV__) {
         console.log('[LegendList] onStartReached triggered', {
@@ -525,7 +594,7 @@ export const ChatListLegend = memo(
           getFixedItemSize={getFixedItemSize}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
           recycleItems={false}
-          extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}-${highlightedId ?? ''}`}
+          extraData={listExtraData}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           freeze={freeze}

package/src/screens/chat-detail/legend/LegendChatDay.tsx

@@ -46,25 +46,35 @@ const formatDayLabel = (createdAt: number): string | null => {
 
 interface LegendChatDayProps {
   createdAt: number;
+  /**
+   * Render just the clock time, without the day. Used where a cluster broke on
+   * elapsed time inside a single day — the date is already on screen above.
+   */
+  timeOnly?: boolean;
 }
 
-export const LegendChatDay = memo(({ createdAt }: LegendChatDayProps) => {
-  const dateStr = useMemo(
-    () => (createdAt == null ? null : formatDayLabel(createdAt)),
-    [createdAt]
-  );
+export const LegendChatDay = memo(
+  ({ createdAt, timeOnly = false }: LegendChatDayProps) => {
+    const dateStr = useMemo(() => {
+      if (createdAt == null) return null;
+      if (!timeOnly) return formatDayLabel(createdAt);
 
-  if (!dateStr) return null;
+      const date = new Date(createdAt);
+      return Number.isNaN(date.getTime()) ? null : formatTime(date);
+    }, [createdAt, timeOnly]);
 
-  return (
-    <KContainer.View center marginV="0.5rem">
-      <KContainer.View>
-        <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
-          {dateStr}
-        </KLabel.Text>
+    if (!dateStr) return null;
+
+    return (
+      <KContainer.View center marginV="0.5rem">
+        <KContainer.View>
+          <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+            {dateStr}
+          </KLabel.Text>
+        </KContainer.View>
       </KContainer.View>
-    </KContainer.View>
-  );
-});
+    );
+  }
+);
 
 LegendChatDay.displayName = 'LegendChatDay';

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -1,4 +1,10 @@
-import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KColors,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
 import { StyleSheet } from 'react-native';
 import { memo, useCallback, useMemo } from 'react';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
@@ -20,7 +26,10 @@ import type { BaseLegendMessageProps } from '../../../components/messages/types'
 import { messageStyles } from './messageTypes';
 import QuotedMessage from '../../../components/messages/quotedMessage';
 import { StickerMessage } from '../../../components/messages/stickerMessage';
-import { GROUP_NOTIFICATION_TEXT } from '../../../utils/messageUtils';
+import { GROUP_NOTIFICATION_TYPES } from '../../../utils/messageUtils';
+import type { GroupPosition } from '../../../utils/legendListMessage';
+import { Avatar } from '../../../components/Avatar';
+import { TAIL_WIDTH } from '../../../components/messages/BubbleTail';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -38,18 +47,20 @@ interface LegendChatMessageProps {
   onLongPress?: () => void;
   customMessageItemFactory?: (m: MessageItem) => ReactNode;
   isHighlighted?: boolean;
+  /** Sender name above the bubble — first message of an incoming cluster. */
+  showName?: boolean;
+  /** Sender avatar beside the bubble — last message of an incoming cluster. */
+  showAvatar?: boolean;
+  /**
+   * Reserve the avatar column. True for every incoming message in a group
+   * conversation, not just the one carrying the avatar, so that the middle of
+   * a cluster stays aligned with its last message.
+   */
+  showSenderGutter?: boolean;
+  /** Position within its same-sender cluster — drives the bubble tail. */
+  groupPosition?: GroupPosition;
 }
 
-// Notification-style messages (group created/renamed/member changes/etc.)
-// are system banners, not user-authored text — they render centered,
-// full-width, without a bubble, avatar/status chrome, or left/right
-// alignment (see SYSTEM_MESSAGE_TYPES below). Driven by the same lookup
-// messageUtils uses to build their preview/thread text, so adding a new
-// notification content type there is enough to cover both places.
-const GROUP_NOTIFICATION_TYPES = Object.keys(GROUP_NOTIFICATION_TEXT).map(
-  Number
-) as MessageType[];
-
 const messageComponentMap: Partial<
   Record<MessageType, ComponentType<MessageProps>>
 > = {
@@ -88,6 +99,10 @@ export const LegendChatMessage = memo(
     onLongPress,
     customMessageItemFactory,
     isHighlighted,
+    showName = false,
+    showAvatar = false,
+    showSenderGutter = false,
+    groupPosition,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
       onPress?.(message);
@@ -127,12 +142,34 @@ export const LegendChatMessage = memo(
 
     return (
       <KContainer.View style={messageStyles.wrapper} row alignItems>
+        {showSenderGutter && (
+          <KContainer.View style={styles.avatarGutter}>
+            {showAvatar && (
+              <Avatar
+                size="sm"
+                source={message.senderFaceUrl}
+                fullName={message.senderNickname}
+              />
+            )}
+          </KContainer.View>
+        )}
         <MessageStatusIndicator
           message={message}
           isOutgoing={isOutgoing}
           onRetry={onRetry}
         />
         <KContainer.View style={styles.content}>
+          {showName && !!message.senderNickname && (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.gray.normal}
+              numberOfLines={1}
+              marginB={2}
+              style={styles.senderName}
+            >
+              {message.senderNickname}
+            </KLabel.Text>
+          )}
           <LongPressWrapper onPress={handlePress} onLongPress={handleLongPress}>
             <MessageComponent
               message={message}
@@ -141,6 +178,7 @@ export const LegendChatMessage = memo(
               onMediaPress={hasMediaPress ? onMediaPress : undefined}
               onPressUrl={hasUrlPress ? onPressUrl : undefined}
               isHighlighted={isHighlighted}
+              groupPosition={groupPosition}
             />
           </LongPressWrapper>
 
@@ -161,10 +199,22 @@ export const LegendChatMessage = memo(
 
 LegendChatMessage.displayName = 'LegendChatMessage';
 
+const AVATAR_SIZE = 24;
+
 const styles = StyleSheet.create({
   content: {
     position: 'relative',
   },
+  // Bubbles sit behind a TAIL_WIDTH gutter (see BubbleTailRow); the name has to
+  // clear the same gutter or it hangs to the left of the bubble it labels.
+  senderName: {
+    marginLeft: TAIL_WIDTH,
+  },
+  avatarGutter: {
+    width: AVATAR_SIZE,
+    marginRight: KSpacingValue['0.25rem'],
+    alignSelf: 'flex-end',
+  },
   systemMessageWrapper: {
     width: '100%',
     marginVertical: KSpacingValue['0.25rem'],

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',