@droppii-org/chat-mobile 0.2.79 → 0.2.81

package/src/components/messages/videoMessage/index.tsx

@@ -6,6 +6,7 @@ import ChatImageDimens, {
 } from '../../../utils/chatImageDimens';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 const formatDuration = (durationMs: number): string => {
   const totalSeconds = Math.floor(durationMs / 1000);
@@ -15,7 +16,7 @@ const formatDuration = (durationMs: number): string => {
 };
 
 export const VideoMessage = memo(
-  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
     const videoElem = message?.videoElem;
     const videoUrl = videoElem?.videoUrl;
     const duration = videoElem?.duration;
@@ -29,13 +30,15 @@ export const VideoMessage = memo(
 
     if (!videoUrl) {
       return (
-        <KContainer.View
-          style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
-        >
-          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
-            📹 [Video unavailable]
-          </KLabel.Text>
-        </KContainer.View>
+        <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
+          <KContainer.View
+            style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
+          >
+            <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+              📹 [Video unavailable]
+            </KLabel.Text>
+          </KContainer.View>
+        </BubbleTailRow>
       );
     }
 
@@ -44,7 +47,7 @@ export const VideoMessage = memo(
     );
 
     return (
-      <>
+      <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
         <KContainer.Touchable
           onPress={handlePress}
           style={[
@@ -80,7 +83,7 @@ export const VideoMessage = memo(
             </KContainer.View>
           )}
         </KContainer.Touchable>
-      </>
+      </BubbleTailRow>
     );
   }
 );

package/src/config/api-endpoints.ts

@@ -22,6 +22,7 @@ export interface ApiEndpoints {
   stickerHistory: string;
   messagesResources: string;
   messages: string;
+  contacts: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
@@ -35,6 +36,7 @@ const DEFAULT_ENDPOINTS: ApiEndpoints = {
   stickerHistory: '/chat-service/v1/app/stickers/history',
   messagesResources: '/chat-service/v1/app/messages/resources',
   messages: '/chat-service/v1/app/messages',
+  contacts: '/chat-service/v1/app/contacts',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };

package/src/hooks/contacts/useSearchContacts.ts

@@ -0,0 +1,66 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { contactQueryKeys } from '../query-keys';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import type {
+  ContactCategory,
+  DChatApplicationType,
+  IContactSearchItem,
+  IContactSearchRequest,
+} from '../../types/chat';
+import type { BaseResponse } from '../../types/auth';
+import { PAGE_SIZE } from '../../constants';
+
+interface IUseSearchContactsProps {
+  query: string;
+  applicationType: DChatApplicationType;
+  type?: ContactCategory;
+  pageSize?: number;
+}
+
+export const useSearchContacts = ({
+  query,
+  applicationType,
+  type,
+  pageSize = PAGE_SIZE,
+}: IUseSearchContactsProps) => {
+  const { data, ...rest } = useInfiniteQuery({
+    queryKey: [contactQueryKeys.search(query.trim(), type), pageSize],
+    queryFn: async ({ pageParam = 1 }) => {
+      const params: IContactSearchRequest = {
+        page: pageParam,
+        pageSize,
+        applicationType,
+        searchTerm: query.trim(),
+        type,
+      };
+      const res = await apiInstance?.post<BaseResponse<IContactSearchItem[]>>(
+        ENDPOINTS.chatService.searchContacts(),
+        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.trim() && !!applicationType,
+  });
+
+  const dataFlatten = useMemo<IContactSearchItem[]>(() => {
+    if (!query.trim() || !data) return [];
+    return (
+      data?.pages
+        ?.flatMap?.((page) => page?.data)
+        ?.filter((item): item is IContactSearchItem => item !== undefined) || []
+    );
+  }, [data, query]);
+
+  return {
+    dataFlatten,
+    ...rest,
+  };
+};

package/src/hooks/groups/useDismissGroup.tsx

@@ -14,6 +14,7 @@ export function useDismissGroup({ onSuccess }: UseDismissGroupProps) {
         header: {
           title: { text: trans('group:dismiss_confirm_title') },
           alignment: 'center',
+          showCloseButton: true,
         },
         body: {
           renderContent: () => {

package/src/hooks/query-keys.ts

@@ -62,6 +62,12 @@ export const messageQueryKeys = {
     [...messageQueryKeys.all, 'search', query, conversationId] as const,
 };
 
+export const contactQueryKeys = {
+  all: ['contacts'] as const,
+  search: (query: string, type?: string) =>
+    [...contactQueryKeys.all, 'search', query, type] as const,
+};
+
 export const groupQueryKeys = {
   all: ['groups'] as const,
   public: () => [...groupQueryKeys.all, 'public'] as const,

package/src/screens/SearchConversation/ContactResultItem.tsx

@@ -0,0 +1,128 @@
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { ContactCategory, type IContactSearchItem } from '../../types/chat';
+import { AvatarSection, NamePrefixIcon } from '../../components/ThreadCard';
+import { formatLastOnlineTime } from '../../utils/dateTimeUtils';
+import {
+  highlightSearch,
+  type HighlightResult,
+} from '../../utils/highlightSearch';
+import { trans } from '../../translation';
+import isEmpty from 'lodash/isEmpty';
+
+const CONTACT_PEER_TYPE: Record<ContactCategory, PeerType> = {
+  [ContactCategory.Customer]: PeerType.Customer,
+  [ContactCategory.Seller]: PeerType.User,
+  [ContactCategory.Pdp]: PeerType.Bot,
+  [ContactCategory.Group]: PeerType.Group,
+};
+
+interface IContactResultItemProps {
+  item: IContactSearchItem;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+  searchTerm?: string;
+}
+
+const ContactResultItem = memo((props: IContactResultItemProps) => {
+  const { item, onPressSearchContact, searchTerm } = props || {};
+  const peerType = CONTACT_PEER_TYPE[item?.type];
+
+  const subtitle = useMemo(() => {
+    if (item?.type === ContactCategory.Group) {
+      const description = !isEmpty(item?.description?.trim())
+        ? item?.description
+        : trans('group:no_description');
+      return `${trans('group:member_count', { count: item?.memberCount ?? 0 })} • ${description}`;
+    }
+    if (item?.type === ContactCategory.Pdp) {
+      return '';
+    }
+    return formatLastOnlineTime(item?.lastOnlineTime ?? null);
+  }, [item?.type, item?.description, item?.memberCount, item?.lastOnlineTime]);
+
+  const highlightResult: HighlightResult | null = useMemo(() => {
+    if (isEmpty(searchTerm?.trim())) return null;
+    return highlightSearch(item?.targetName || '', searchTerm || '');
+  }, [item?.targetName, searchTerm]);
+
+  const handlePressItem = useCallback(() => {
+    onPressSearchContact?.(item);
+  }, [onPressSearchContact, item]);
+
+  return (
+    <KContainer.Touchable
+      row
+      justifyContent="space-between"
+      alignItems
+      paddingV={'0.75rem'}
+      style={styles.container}
+      onPress={handlePressItem}
+      brBW={1}
+      brBC={KColors.border.light}
+    >
+      <KContainer.View row alignItems flex>
+        <AvatarSection
+          avatar={item?.targetAvatar ?? null}
+          fullName={item?.targetName}
+          peerType={peerType}
+          size="nm"
+        />
+        <KContainer.View flex marginL={'0.5rem'}>
+          <KContainer.View row alignItems>
+            <NamePrefixIcon peerType={peerType} />
+            {highlightResult != null ? (
+              <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?.targetName || ''}
+              </KLabel.Text>
+            )}
+          </KContainer.View>
+          <KContainer.VisibleView visible={!!subtitle}>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.gray.light}
+              numberOfLines={1}
+            >
+              {subtitle}
+            </KLabel.Text>
+          </KContainer.VisibleView>
+        </KContainer.View>
+      </KContainer.View>
+
+      <KContainer.VisibleView visible={false}>
+        <KContainer.View center>
+          <KImage.VectorIcons
+            name="more-horizontal-b"
+            size={24}
+            color={KColors.gray.normal}
+          />
+        </KContainer.View>
+      </KContainer.VisibleView>
+    </KContainer.Touchable>
+  );
+});
+
+export default ContactResultItem;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: KSpacingValue['1rem'],
+  },
+});

package/src/screens/SearchConversation/SearchAllResult.tsx

@@ -10,41 +10,56 @@ import {
 import { memo, useCallback, useMemo } from 'react';
 import { useChatContext } from '../../context';
 import { useSearchMessage } from '../../hooks/message/useSearchMessage';
+import { useSearchContacts } from '../../hooks/contacts/useSearchContacts';
 import { SearchConversationTabResultType } from './types';
-import type { ISearchMessageItem } from '../../types/chat';
+import type { IContactSearchItem, ISearchMessageItem } from '../../types/chat';
 import { trans } from '../../translation';
 import { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
 import { SearchEmpty } from './SearchEmpty';
 import SearchResultItem from './SearchResultItem';
+import ContactResultItem from './ContactResultItem';
 
 interface SearchAllResultProps {
   searchTerm: string;
   handleChangeTab: (key: SearchConversationTabResultType) => void;
   onPressItem?: (item: ISearchMessageItem) => void;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
 }
 
 interface ISearchAllResultItem {
   type: SearchConversationTabResultType;
-  data: ISearchMessageItem[];
+  data: (ISearchMessageItem | IContactSearchItem)[];
   title: string;
 }
 
 const PAGE_SIZE = 5;
 
 const SearchAllResult = memo(
-  ({ searchTerm, handleChangeTab, onPressItem }: SearchAllResultProps) => {
+  ({
+    searchTerm,
+    handleChangeTab,
+    onPressItem,
+    onPressSearchContact,
+  }: SearchAllResultProps) => {
     const { applicationType } = useChatContext();
-    const { dataFlatten: messagesData, isFetching } = useSearchMessage({
-      query: searchTerm,
-      applicationType,
-      pageSize: PAGE_SIZE,
-    });
+    const { dataFlatten: messagesData, isFetching: isFetchingMessages } =
+      useSearchMessage({
+        query: searchTerm,
+        applicationType,
+        pageSize: PAGE_SIZE,
+      });
+    const { dataFlatten: contactsData, isFetching: isFetchingContacts } =
+      useSearchContacts({
+        query: searchTerm,
+        applicationType,
+      });
+    const isFetching = isFetchingMessages || isFetchingContacts;
 
     const data: ISearchAllResultItem[] = useMemo(() => {
       const mData = [
         {
           type: SearchConversationTabResultType.Conversations,
-          data: [],
+          data: contactsData,
           title: trans('contacts'),
         },
         {
@@ -54,7 +69,7 @@ const SearchAllResult = memo(
         },
       ]?.filter((item) => item.data.length > 0);
       return mData;
-    }, [messagesData]);
+    }, [messagesData, contactsData]);
 
     const onChangeTab = useCallback(
       (key: SearchConversationTabResultType) => {
@@ -80,21 +95,24 @@ const SearchAllResult = memo(
               </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}`}
-                >
+            {item.type === SearchConversationTabResultType.Conversations
+              ? (item.data as IContactSearchItem[]).map((childItem) => (
+                  <ContactResultItem
+                    key={`${item.type}-${childItem?.id}`}
+                    item={childItem}
+                    onPressSearchContact={onPressSearchContact}
+                    searchTerm={searchTerm}
+                  />
+                ))
+              : (item.data as ISearchMessageItem[]).map((childItem) => (
                   <SearchResultItem
+                    key={`${item.type}-${childItem?.conversation?.conversationID}-${childItem?.chatLog?.clientMsgID}`}
                     item={childItem}
                     tabResultType={item.type}
                     onPressItem={onPressItem}
                     searchTerm={searchTerm}
                   />
-                </KContainer.View>
-              );
-            })}
+                ))}
             <KButton.Link
               label={trans('view_all')}
               icon={{
@@ -108,7 +126,7 @@ const SearchAllResult = memo(
           </KContainer.View>
         );
       },
-      [onChangeTab, onPressItem, searchTerm]
+      [onChangeTab, onPressItem, onPressSearchContact, searchTerm]
     );
 
     const keyExtractor = useCallback((item: ISearchAllResultItem) => {
@@ -158,10 +176,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: KColors.border.light,
   },
-  childItemContainer: {
-    borderBottomWidth: 1,
-    borderBottomColor: KColors.border.light,
-  },
   viewAllButton: {
     height: 40,
   },

package/src/screens/SearchConversation/SearchCommunityResult.tsx

@@ -0,0 +1,96 @@
+import { KColors, KContainer, KSpacingValue } from '@droppii/libs';
+import { memo, useCallback, useMemo } from 'react';
+import { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
+import isEmpty from 'lodash/isEmpty';
+import type { SearchPublicGroupInfo } from '@droppii/openim-rn-client-sdk';
+import { useFetchPublicGroup } from '../../hooks/groups/useFetchPublicGroup';
+import { GroupItem } from '../../components/GroupItem';
+import { SearchEmpty } from './SearchEmpty';
+import { SearchConversationTabResultType } from './types';
+
+interface ISearchCommunityResultProps {
+  searchTerm: string;
+  onPressGroup?: (groupId: string) => void;
+}
+
+const keyExtractor = (item: SearchPublicGroupInfo) => item.groupID;
+
+const SearchCommunityResult = memo(
+  ({ searchTerm, onPressGroup }: ISearchCommunityResultProps) => {
+    const hasKeyword = !isEmpty(searchTerm?.trim());
+
+    const {
+      dataFlatten,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+      isFetching,
+      isRefetching,
+      refetch,
+    } = useFetchPublicGroup(searchTerm);
+
+    const data = useMemo(
+      () => (hasKeyword ? dataFlatten : []),
+      [hasKeyword, dataFlatten]
+    );
+
+    const renderItem = useCallback(
+      ({ item }: { item: SearchPublicGroupInfo }) => (
+        <GroupItem item={item} onPress={onPressGroup} />
+      ),
+      [onPressGroup]
+    );
+
+    const onEndReached = useCallback(() => {
+      if (hasKeyword && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }, [hasKeyword, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    if (!hasKeyword) {
+      return (
+        <KContainer.View flex>
+          <SearchEmpty
+            searchTerm={searchTerm}
+            searchType={SearchConversationTabResultType.Community}
+          />
+        </KContainer.View>
+      );
+    }
+
+    return (
+      <KContainer.View flex>
+        {isFetching && !isFetchingNextPage && !isRefetching ? (
+          <KContainer.View flex center>
+            <ActivityIndicator color={KColors.primary.normal} size={'small'} />
+          </KContainer.View>
+        ) : (
+          <FlatList
+            data={data}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            contentContainerStyle={styles.container}
+            showsVerticalScrollIndicator={false}
+            onEndReached={onEndReached}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.Community}
+              />
+            }
+            refreshing={isFetching}
+            onRefresh={refetch}
+          />
+        )}
+      </KContainer.View>
+    );
+  }
+);
+
+export default SearchCommunityResult;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+});

package/src/screens/SearchConversation/SearchContactsResult.tsx

@@ -0,0 +1,155 @@
+import {
+  KColors,
+  KContainer,
+  KSpacingValue,
+  KTagsChoiceSlideBar,
+  type KTagsChoiceSlideBarItemProps,
+} from '@droppii/libs';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
+import { useChatContext } from '../../context';
+import { useSearchContacts } from '../../hooks/contacts/useSearchContacts';
+import { ContactCategory, type IContactSearchItem } from '../../types/chat';
+import { trans } from '../../translation';
+import { SearchEmpty } from './SearchEmpty';
+import ContactResultItem from './ContactResultItem';
+import { SearchConversationTabResultType } from './types';
+
+interface ISearchContactsResultProps {
+  searchTerm: string;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+}
+
+const FILTER_ITEMS: KTagsChoiceSlideBarItemProps[] = [
+  {
+    id: ContactCategory.Customer,
+    label: trans('contact_type:customer'),
+    allowDeselect: true,
+  },
+  {
+    id: ContactCategory.Pdp,
+    label: trans('contact_type:pdp'),
+    allowDeselect: true,
+  },
+  {
+    id: ContactCategory.Group,
+    label: trans('contact_type:group'),
+    allowDeselect: true,
+  },
+  {
+    id: ContactCategory.Seller,
+    label: trans('contact_type:seller'),
+    allowDeselect: true,
+  },
+];
+
+const SearchContactsResult = memo(
+  ({ searchTerm, onPressSearchContact }: ISearchContactsResultProps) => {
+    const { applicationType } = useChatContext();
+    const [contactType, setContactType] = useState<
+      ContactCategory | undefined
+    >();
+
+    const {
+      dataFlatten,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+      isFetching,
+      isRefetching,
+      refetch,
+    } = useSearchContacts({
+      query: searchTerm,
+      applicationType,
+      type: contactType,
+    });
+
+    const onFilterChanged = useCallback(
+      (item?: KTagsChoiceSlideBarItemProps) => {
+        setContactType(item?.id as ContactCategory | undefined);
+      },
+      []
+    );
+
+    const renderItem = useCallback(
+      ({ item }: { item: IContactSearchItem }) => {
+        return (
+          <ContactResultItem
+            item={item}
+            onPressSearchContact={onPressSearchContact}
+            searchTerm={searchTerm}
+          />
+        );
+      },
+      [onPressSearchContact, searchTerm]
+    );
+
+    const keyExtractor = useCallback(
+      (item: IContactSearchItem) => item?.id,
+      []
+    );
+
+    const onEndReached = useCallback(() => {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    const ListHeaderComponent = useMemo(
+      () => (
+        <KContainer.View style={styles.filterContainer}>
+          <KTagsChoiceSlideBar
+            items={FILTER_ITEMS}
+            onChanged={onFilterChanged}
+            containerStyle={styles.filterContentContainer}
+            type="outline"
+          />
+        </KContainer.View>
+      ),
+      [onFilterChanged]
+    );
+
+    return (
+      <KContainer.View flex>
+        {ListHeaderComponent}
+        {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}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.Conversations}
+              />
+            }
+            refreshing={isFetching}
+            onRefresh={refetch}
+          />
+        )}
+      </KContainer.View>
+    );
+  }
+);
+
+export default SearchContactsResult;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+  filterContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+  },
+  filterContentContainer: {
+    padding: 12,
+  },
+});

package/src/screens/SearchConversation/SearchEmpty.tsx

@@ -22,6 +22,8 @@ export const SearchEmpty = memo(
           return 'search_message:empty_hint';
         case SearchConversationTabResultType.Conversations:
           return 'search_conversation:empty_hint';
+        case SearchConversationTabResultType.Community:
+          return 'search_community:empty_hint';
         default:
           return 'search:empty_hint';
       }