@droppii-org/chat-mobile 0.2.50 → 0.2.52

package/src/components/StickerPicker/index.tsx

@@ -0,0 +1,166 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { KColors, KContainer } from '@droppii/libs';
+import type {
+  StickerCategory,
+  StickerItem,
+  StickerRow,
+} from '../../types/sticker';
+import { useStickerCategories } from '../../hooks/stickers/useStickerCategories';
+import { useStickerHistory } from '../../hooks/stickers/useStickerHistory';
+import { useFetchStickerByCategory } from '../../hooks/stickers/useFetchStickerByCategory';
+import {
+  RECENT_CATEGORY_ID,
+  STICKER_COLUMNS,
+  STICKER_PICKER_HEIGHT,
+} from './constants';
+import { StickerCategoryTabs } from './StickerCategoryTabs';
+import {
+  StickerSectionList,
+  type StickerPickerSection,
+} from './StickerSectionList';
+import { trans } from '../../translation';
+
+interface Props {
+  onSelectSticker: (sticker: StickerItem) => void;
+}
+
+const chunkIntoRows = (items: StickerItem[], columns: number): StickerRow[] => {
+  const rows: StickerRow[] = [];
+  for (let i = 0; i < items.length; i += columns) {
+    rows.push(items.slice(i, i + columns));
+  }
+  return rows;
+};
+
+const makePlaceholderRows = (count: number, columns: number): StickerRow[] => {
+  const rows: StickerRow[] = [];
+  for (let i = 0; i < count; i += columns) {
+    const rowSize = Math.min(columns, count - i);
+    rows.push(Array.from({ length: rowSize }, () => null));
+  }
+  return rows;
+};
+
+export const StickerPicker = ({ onSelectSticker }: Props) => {
+  const { data: categoriesData } = useStickerCategories();
+  const { data: recentStickers } = useStickerHistory();
+  const { mutateAsync: fetchStickersByCategory } = useFetchStickerByCategory();
+
+  const allCategories = useMemo<StickerCategory[]>(() => {
+    const recent: StickerCategory = {
+      id: RECENT_CATEGORY_ID,
+      name: trans('recent'),
+      icon: null,
+      stickerCount: 0,
+    };
+    return [recent, ...(categoriesData || [])];
+  }, [categoriesData]);
+
+  const [activeCategory, setActiveCategory] = useState(RECENT_CATEGORY_ID);
+  const [sectionDataMap, setSectionDataMap] = useState<
+    Record<string, StickerRow[]>
+  >({});
+
+  const loadedIdsRef = useRef(new Set<string>([RECENT_CATEGORY_ID]));
+  const sectionListRef = useRef<any>(null);
+  const suppressCategoryChangeRef = useRef(false);
+  const suppressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Populate recent section when history data arrives
+  useEffect(() => {
+    if (recentStickers) {
+      setSectionDataMap((prev) => ({
+        ...prev,
+        [RECENT_CATEGORY_ID]: chunkIntoRows(recentStickers, STICKER_COLUMNS),
+      }));
+    }
+  }, [recentStickers]);
+
+  // Cleanup suppress timer on unmount
+  useEffect(() => {
+    return () => {
+      if (suppressTimerRef.current) clearTimeout(suppressTimerRef.current);
+    };
+  }, []);
+
+  const sections = useMemo<StickerPickerSection[]>(
+    () =>
+      allCategories.map((cat) => ({
+        categoryId: cat.id,
+        title: cat.name,
+        data:
+          sectionDataMap[cat.id] ??
+          makePlaceholderRows(cat.stickerCount, STICKER_COLUMNS),
+      })),
+    [allCategories, sectionDataMap]
+  );
+
+  const handleSectionVisible = useCallback(
+    async (categoryId: string) => {
+      if (categoryId === RECENT_CATEGORY_ID) return;
+      if (loadedIdsRef.current.has(categoryId)) return;
+      loadedIdsRef.current.add(categoryId);
+
+      try {
+        const stickers = await fetchStickersByCategory(categoryId);
+        setSectionDataMap((prev) => ({
+          ...prev,
+          [categoryId]: chunkIntoRows(stickers, STICKER_COLUMNS),
+        }));
+      } catch {
+        loadedIdsRef.current.delete(categoryId);
+      }
+    },
+    [fetchStickersByCategory]
+  );
+
+  const handleActiveCategoryChange = useCallback((categoryId: string) => {
+    if (suppressCategoryChangeRef.current) return;
+    setActiveCategory(categoryId);
+  }, []);
+
+  const handleCategoryPress = useCallback(
+    (categoryId: string) => {
+      setActiveCategory(categoryId);
+
+      suppressCategoryChangeRef.current = true;
+      if (suppressTimerRef.current) clearTimeout(suppressTimerRef.current);
+      suppressTimerRef.current = setTimeout(() => {
+        suppressCategoryChangeRef.current = false;
+      }, 600);
+
+      const sectionIndex = allCategories.findIndex((c) => c.id === categoryId);
+      if (sectionIndex >= 0 && sectionListRef.current) {
+        try {
+          sectionListRef.current.scrollToLocation({
+            sectionIndex,
+            itemIndex: 0,
+            animated: true,
+            viewOffset: 0,
+          });
+        } catch {}
+      }
+    },
+    [allCategories]
+  );
+
+  return (
+    <KContainer.View
+      style={{ height: STICKER_PICKER_HEIGHT }}
+      background={KColors.white}
+    >
+      <StickerCategoryTabs
+        categories={allCategories}
+        activeCategory={activeCategory}
+        onSelectCategory={handleCategoryPress}
+      />
+      <StickerSectionList
+        ref={sectionListRef}
+        sections={sections}
+        onSectionVisible={handleSectionVisible}
+        onActiveCategoryChange={handleActiveCategoryChange}
+        onSelectSticker={onSelectSticker}
+      />
+    </KContainer.View>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import type { BaseLegendMessageProps } from '../types';
+import { KContainer, KImage } from '@droppii/libs';
+import { StyleSheet } from 'react-native';
+
+const STICKER_SIZE = 120;
+export const StickerMessage = memo(({ message }: BaseLegendMessageProps) => {
+  return (
+    <KContainer.View style={styles.message}>
+      <KImage.Base
+        uri={message?.stickerElem?.content || ''}
+        width={STICKER_SIZE}
+        height={STICKER_SIZE}
+      />
+    </KContainer.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  message: {
+    width: STICKER_SIZE,
+    height: STICKER_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/config/api-endpoints.ts

@@ -17,6 +17,10 @@ export interface ApiEndpoints {
   imageUpload: string;
   bot: string;
   uploadFcmToken: string;
+  stickerCategories: string;
+  stickersByCategory: string;
+  stickerHistory: string;
+  messagesResources: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
@@ -25,6 +29,10 @@ const DEFAULT_ENDPOINTS: ApiEndpoints = {
   imageUpload: '/uploader-service/v1/uploader/permanently',
   bot: '/chat-service/v1/app/bots/',
   uploadFcmToken: '/chat-service/third/fcm_update_token',
+  stickerCategories: '/chat-service/v1/app/sticker-categories',
+  stickersByCategory: '/chat-service/v1/app/sticker-categories',
+  stickerHistory: '/chat-service/v1/app/stickers/history',
+  messagesResources: '/chat-service/v1/app/messages/resources',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };

package/src/core/notification/pushToken.ts

@@ -16,13 +16,13 @@ const uploadFcmToken = async (
   project: DChatProject,
   expireTime: number
 ): Promise<void> => {
-  console.log('[chat-mobile] uploadFcmToken', {
-    platformID,
-    fcmToken,
-    account: userID,
-    project,
-    expireTime,
-  });
+  // console.log('[chat-mobile] uploadFcmToken', {
+  //   platformID,
+  //   fcmToken,
+  //   account: userID,
+  //   project,
+  //   expireTime,
+  // });
   const token = useUserStore.getState().token;
   if (!token) {
     console.warn(

package/src/hooks/conversation/useGetConversationDetail.ts

@@ -3,7 +3,7 @@ import OpenIMSDK, { SessionType } from '@droppii/openim-rn-client-sdk';
 import { useConversationStore } from '../../store/conversation';
 import { apiInstance } from '../../services/apis';
 import type { BaseResponse } from '../../types/auth';
-import type { DBotStatus } from '../../types/chat';
+import type { DBotStatus, DConversationTarget } from '../../types/chat';
 import { conversationQueryKeys } from '../query-keys';
 import { ENDPOINTS } from '../../services/endpoints';
 
@@ -46,6 +46,25 @@ export const useGetStatusConversationBot = (botId?: string) => {
     refetchOnMount: 'always',
   });
 };
+export const useGetConversationTarget = (conversationId?: string) =>
+  useQuery({
+    queryKey: conversationQueryKeys.conversationTarget(conversationId || ''),
+    queryFn: async () => {
+      try {
+        const res = await apiInstance?.get<BaseResponse<DConversationTarget>>(
+          ENDPOINTS.chatService.getConversationTarget(conversationId || '')
+        );
+        return res?.data?.data || undefined;
+      } catch {
+        return undefined; // fail-open: unresolved status => compose stays enabled
+      }
+    },
+    enabled: !!conversationId,
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: 'always',
+  });
+
 export const useGetOneConversation = ({
   targetUserId,
   targetGroupId,

package/src/hooks/flows/useGetConversationFlowMainMenu.ts

@@ -12,7 +12,7 @@ export const useGetConversationFlowMainMenu = (conversationId?: string) => {
       const res = await apiInstance?.get<BaseResponse<InputButtonItem[]>>(
         ENDPOINTS.chatService.conversationFlowMainMenu(conversationId || '')
       );
-      return res?.data?.data || undefined;
+      return res?.data?.data || ([] as InputButtonItem[]);
     },
     enabled: !!conversationId,
   });

package/src/hooks/message/useSendMessage.ts

@@ -16,10 +16,7 @@ import {
   type IMessageItemEx,
 } from '../../types/chat';
 import { useChatContext, useChatDetailContext } from '../../context';
-import {
-  generateContentBasedOnMessageType,
-  getBotId,
-} from '../../utils/conversation';
+import { getBotId } from '../../utils/conversation';
 import { markMessageRevoked, useMessageStore } from '../../store/message';
 import uuid from 'react-native-uuid';
 
@@ -27,34 +24,36 @@ import type { IUrlMetadata } from '../../types/common';
 import type { IRunConversationFlowPayload } from '../../types/flows';
 import { DeviceEventEmitter } from 'react-native';
 import { ChatEvent } from '../../types/events';
+import type { StickerItem } from '../../types/sticker';
+import { useQueryClient } from '@tanstack/react-query';
+import { stickerQueryKeys } from '../query-keys';
+import { getMessagePreview } from '../../utils/messageUtils';
 
 const buildSendParams = (
   message: MessageItem,
   recvID: string,
   groupID: string,
-  extendMessageInfo: IMessageItemEx,
-  plainText: string
+  extendMessageInfo: IMessageItemEx
 ) => ({
   groupID,
   recvID,
   message: { ...message, ex: JSON.stringify(extendMessageInfo) || '{}' },
-  offlinePushInfo: generateOfflinePushInfo(message.contentType, plainText),
+  offlinePushInfo: generateOfflinePushInfo(message),
 });
 
 export const useSendMessage = () => {
   const applicationType = useChatContext().applicationType;
   const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
-  const deleteOneMessage = useMessageStore((state) => state.deleteOneMessage);
   const { quotedMessage, setQuotedMessage } = useChatDetailContext();
+  const queryClient = useQueryClient();
 
   const dispatchSend = useCallback(
     async (
       message: MessageItem,
       recvID: string,
       groupID: string,
-      extendMessageInfo: IMessageItemEx,
-      plainText: string
+      extendMessageInfo: IMessageItemEx
     ) => {
       pushNewMessage({ ...message, status: MessageStatus.Sending });
 
@@ -63,12 +62,10 @@ export const useSendMessage = () => {
           message,
           recvID,
           groupID,
-          extendMessageInfo,
-          plainText
+          extendMessageInfo
         );
         // console.log('[useSendMessage] dispatchSend params', sendParams);
         const sent = await OpenIMSDK.sendMessage(sendParams);
-        deleteOneMessage(message.clientMsgID);
         pushNewMessage(sent);
       } catch {
         updateOneMessage({ ...message, status: MessageStatus.Failed });
@@ -76,7 +73,7 @@ export const useSendMessage = () => {
       await new Promise((resolve) => setTimeout(resolve, 300));
       DeviceEventEmitter.emit(ChatEvent.ScrollToBottom);
     },
-    [pushNewMessage, updateOneMessage, deleteOneMessage]
+    [pushNewMessage, updateOneMessage]
   );
 
   const sendMessage = useCallback(
@@ -85,11 +82,13 @@ export const useSendMessage = () => {
       urlMetadata,
       flow,
       customMessage,
+      sticker,
     }: {
       plainText?: string;
       urlMetadata?: IUrlMetadata;
       flow?: IRunConversationFlowPayload;
       customMessage?: CustomMessagePayload;
+      sticker?: StickerItem;
     }) => {
       const currentConversation = useConversationStore
         .getState()
@@ -143,23 +142,39 @@ export const useSendMessage = () => {
         messageList.push(message);
       }
 
+      //sticker msg
+      if (!!sticker && !!sticker?.file?.fullUrl) {
+        let stickerMessage = await createStickerMessage(sticker?.file?.fullUrl);
+        if (!stickerMessage) return;
+        messageList.push(stickerMessage);
+      }
+
       for (const message of messageList) {
         const extendMessageInfo: IMessageItemEx = {
           applicationType,
           urlMetadata,
           flow,
+          stickerId: sticker?.id,
         };
 
         await dispatchSend(
           message,
           recvID || '',
           groupID || '',
-          extendMessageInfo,
-          plainText || ''
+          extendMessageInfo
         );
       }
+      if (!!sticker && !!sticker?.id) {
+        queryClient.invalidateQueries({ queryKey: stickerQueryKeys.recent() });
+      }
     },
-    [applicationType, dispatchSend, quotedMessage, setQuotedMessage]
+    [
+      applicationType,
+      dispatchSend,
+      quotedMessage,
+      setQuotedMessage,
+      queryClient,
+    ]
   );
 
   const retryMessage = useCallback(
@@ -185,7 +200,7 @@ export const useSendMessage = () => {
         recvID: recvID || '',
         groupID: groupID || '',
         message,
-        offlinePushInfo: generateOfflinePushInfo(message.contentType, ''),
+        offlinePushInfo: generateOfflinePushInfo(message),
       };
 
       try {
@@ -196,11 +211,9 @@ export const useSendMessage = () => {
                 message,
                 recvID || '',
                 groupID || '',
-                JSON.parse(message.ex || '{}') as IMessageItemEx,
-                ''
+                JSON.parse(message.ex || '{}') as IMessageItemEx
               )
             );
-        deleteOneMessage(message.clientMsgID);
         pushNewMessage(sent);
       } catch {
         updateOneMessage({ ...message, status: MessageStatus.Failed });
@@ -208,7 +221,7 @@ export const useSendMessage = () => {
       await new Promise((resolve) => setTimeout(resolve, 300));
       DeviceEventEmitter.emit(ChatEvent.ScrollToBottom);
     },
-    [pushNewMessage, updateOneMessage, deleteOneMessage]
+    [pushNewMessage, updateOneMessage]
   );
 
   const revokeMessage = useCallback(async (message: MessageItem) => {
@@ -232,16 +245,13 @@ export const useSendMessage = () => {
   };
 };
 
-export const generateOfflinePushInfo = (
-  contentType: MessageType,
-  plainText: string
-) => {
+export const generateOfflinePushInfo = (message: MessageItem) => {
   const conversationData = useConversationStore
     ?.getState?.()
     ?.getCurrentConversation();
   const operatorUserID = useUserStore.getState().user?.userID || '';
   const title = conversationData?.showName || 'Droppii';
-  const desc = generateContentBasedOnMessageType(contentType, plainText);
+  const desc = getMessagePreview(message);
   return {
     title,
     desc,
@@ -310,3 +320,15 @@ export const createQuotedMessage = async (params: QuoteMsgParams) => {
     });
   return quotedMessage;
 };
+
+export const createStickerMessage = async (sticker: string) => {
+  let stickerMessage = await OpenIMSDK.createStickerMessage(sticker, uuid.v4())
+    .then((data) => {
+      return data;
+    })
+    .catch(({ errCode, errMsg }) => {
+      console.error('createStickerMessage', errCode, errMsg);
+      return null;
+    });
+  return stickerMessage;
+};

package/src/hooks/query-keys.ts

@@ -12,6 +12,8 @@ export const conversationQueryKeys = {
   detail: (conversationId: string) =>
     [...conversationQueryKeys.details(), conversationId] as const,
   getStatusBot: (botId: string) => ['getStatusBot', botId] as const,
+  conversationTarget: (conversationId: string) =>
+    ['conversationTarget', conversationId] as const,
   flow: (conversationId: string) => ['conversationFlow', conversationId],
   flowMainMenu: (conversationId: string) => [
     'conversationFlowMainMenu',
@@ -34,3 +36,17 @@ export const usersQueryKeys = {
 };
 
 export type ConversationQueryKeys = typeof conversationQueryKeys;
+
+export const stickerQueryKeys = {
+  all: ['stickers'] as const,
+  categories: () => [...stickerQueryKeys.all, 'categories'] as const,
+  byCategory: (categoryId: string) =>
+    [...stickerQueryKeys.all, 'category', categoryId] as const,
+  recent: () => [...stickerQueryKeys.all, 'recent'] as const,
+};
+
+export const resourceCenterQueryKeys = {
+  all: ['threadResources'] as const,
+  byType: (recvID: string, contentType: number) =>
+    [...resourceCenterQueryKeys.all, recvID, contentType] as const,
+};

package/src/hooks/resourceCenter/useThreadResources.ts

@@ -0,0 +1,124 @@
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+import { resourceCenterQueryKeys } from '../query-keys';
+import { useChatContext } from '../../context';
+import { ResourceCenterService } from '../../services/resourceCenter';
+import type {
+  DThreadResource,
+  DThreadResourceContentType,
+} from '../../types/chat';
+
+const PAGE_SIZE = 15;
+
+/**
+ * U5 resolved against a real staging response: revoked (recalled) messages ARE
+ * still returned by `/messages/resources` with `isRevoked: true` — BE does NOT
+ * pre-filter them. This client-side check is load-bearing, not defense-in-depth.
+ * `deleted`/`hidden` flags weren't observed in the tested rows — if BE adds them
+ * later, extend this predicate.
+ */
+const isVisibleResource = (item: DThreadResource): boolean => !item.isRevoked;
+
+export const useThreadResources = (
+  recvID: string,
+  contentType: DThreadResourceContentType,
+  chatType: 'SINGLE' | 'GROUP'
+) => {
+  const { applicationType } = useChatContext();
+  const queryClient = useQueryClient();
+  const queryKey = resourceCenterQueryKeys.byType(recvID, contentType);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery({
+    queryKey,
+    // `initialPageParam` is a react-query v5-only option — this library's
+    // `@tanstack/react-query` peer dep is unpinned (`"*"`), so a host app on v4
+    // (confirmed: biz-mobile pins 4.40.1) silently ignores this option and the
+    // first fetch's `pageParam` comes back `undefined`, not `1`. The `?? 1`
+    // fallback below is what actually makes page 1 work under v4 — do not remove
+    // it even though it looks redundant next to `initialPageParam`.
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) =>
+      ResourceCenterService.fetchThreadResources({
+        recvID,
+        contentType,
+        chatType,
+        page: pageParam ?? 1,
+        pageSize: PAGE_SIZE,
+        applicationType,
+      }),
+    getNextPageParam: (lastPage) =>
+      lastPage.hasMore ? lastPage.page + 1 : undefined,
+    enabled: !!recvID && !!chatType,
+  });
+
+  // De-dupe by `id` across pages — offset pagination (`page`/`pageSize`) can hand
+  // back the same item twice if new messages land in the thread between page
+  // fetches (classic offset-pagination drift), which LegendList's `keyExtractor`
+  // requires be unique or it throws ("overlapping key" / missing items & gaps).
+  const items = useMemo(() => {
+    const seen = new Set<string>();
+    const deduped: DThreadResource[] = [];
+    for (const page of data?.pages ?? []) {
+      for (const item of page.items) {
+        if (seen.has(item.id)) continue;
+        seen.add(item.id);
+        if (isVisibleResource(item)) deduped.push(item);
+      }
+    }
+    return deduped;
+  }, [data]);
+
+  // Pull-to-refresh should (a) only re-fetch page 1, not every already-loaded
+  // page, and (b) keep the currently-shown items visible while that fetch is in
+  // flight — no flash to empty/loading. Neither `refetch()` nor `resetQueries()`
+  // give us both:
+  //  - `refetch()` on an infinite query re-fetches ALL loaded pages (wasteful).
+  //  - `resetQueries()` clears cached data FIRST, then fetches — causes exactly
+  //    the empty-state flash we don't want.
+  //  - `refetch({ refetchPage })` (page-1-only) is a react-query v4-only option,
+  //    removed in v5 — another cross-version footgun like `initialPageParam`.
+  // So: fetch page 1 directly via the service, then splice it into the cache
+  // with `setQueryData` — `data`/`items` never go empty in between, and exactly
+  // one request is made regardless of how many pages were already loaded.
+  const [isRefreshingFirstPage, setIsRefreshingFirstPage] = useState(false);
+
+  const refreshFirstPage = useCallback(async () => {
+    setIsRefreshingFirstPage(true);
+    try {
+      const firstPage = await ResourceCenterService.fetchThreadResources({
+        recvID,
+        contentType,
+        chatType,
+        page: 1,
+        pageSize: PAGE_SIZE,
+        applicationType,
+      });
+      queryClient.setQueryData(queryKey, {
+        pages: [firstPage],
+        pageParams: [1],
+      });
+    } finally {
+      setIsRefreshingFirstPage(false);
+    }
+  }, [queryClient, queryKey, recvID, contentType, chatType, applicationType]);
+
+  return {
+    items,
+    isLoading,
+    isError,
+    hasMore: !!hasNextPage,
+    loadMore: fetchNextPage,
+    isFetchingNextPage,
+    isRefetching: isRefreshingFirstPage,
+    refetch,
+    refreshFirstPage,
+  };
+};

package/src/hooks/stickers/useFetchStickerByCategory.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+import { apiInstance } from '../../services/apis';
+import { ENDPOINTS } from '../../services/endpoints';
+import type { BaseResponse } from '../../types/auth';
+import type { StickerItem } from '../../types/sticker';
+
+export const useFetchStickerByCategory = () =>
+  useMutation({
+    mutationFn: async (categoryId: string) => {
+      const res = await apiInstance?.get<BaseResponse<StickerItem[]>>(
+        ENDPOINTS.chatService.stickersByCategoryId(categoryId)
+      );
+      return res?.data?.data || [];
+    },
+  });

package/src/hooks/stickers/useStickerCategories.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiInstance } from '../../services/apis';
+import { stickerQueryKeys } from '../query-keys';
+import { ENDPOINTS } from '../../services/endpoints';
+import type { BaseResponse } from '../../types/auth';
+import type { StickerCategory } from '../../types/sticker';
+
+export const useStickerCategories = () =>
+  useQuery({
+    queryKey: stickerQueryKeys.categories(),
+    queryFn: async () => {
+      const res = await apiInstance?.get<BaseResponse<StickerCategory[]>>(
+        ENDPOINTS.chatService.stickerCategories()
+      );
+      return res?.data?.data || [];
+    },
+  });

package/src/hooks/stickers/useStickerHistory.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiInstance } from '../../services/apis';
+import { stickerQueryKeys } from '../query-keys';
+import { ENDPOINTS } from '../../services/endpoints';
+import type { BaseResponse } from '../../types/auth';
+import type { StickerItem } from '../../types/sticker';
+
+export const useStickerHistory = () =>
+  useQuery({
+    queryKey: stickerQueryKeys.recent(),
+    queryFn: async () => {
+      const res = await apiInstance?.get<BaseResponse<StickerItem[]>>(
+        ENDPOINTS.chatService.stickerHistory()
+      );
+      return res?.data?.data || [];
+    },
+    staleTime: 0,
+    gcTime: 0,
+  });