@droppii-org/chat-mobile 0.2.49 → 0.2.51

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/ThreadCard/MuteThread.tsx

@@ -58,20 +58,8 @@ export const MuteThread = memo(
               label: trans('chat:mute_confirm_primary'),
               kind: 'primary',
               onPress: async () => {
-                try {
-                  await muteConversation(conversation);
-                  UIUtils.toast.open({
-                    title: trans('chat:mute_toast_success'),
-                    theme: 'light',
-                  });
-                } catch {
-                  UIUtils.toast.open({
-                    title: trans('chat:generic_error'),
-                    theme: 'error',
-                  });
-                } finally {
-                  swipeableMethods.close();
-                }
+                swipeableMethods.close();
+                await muteConversation(conversation);
               },
             },
           ],
@@ -81,20 +69,8 @@ export const MuteThread = memo(
     }, [swipeableMethods, conversation, muteConversation]);
 
     const handleUnmutePress = useCallback(async () => {
-      try {
-        await unmuteConversation(conversation);
-        UIUtils.toast.open({
-          title: trans('chat:unmute_toast_success'),
-          theme: 'light',
-        });
-      } catch {
-        UIUtils.toast.open({
-          title: trans('chat:generic_error'),
-          theme: 'error',
-        });
-      } finally {
-        swipeableMethods.close();
-      }
+      swipeableMethods.close();
+      await unmuteConversation(conversation);
     }, [swipeableMethods, conversation, unmuteConversation]);
 
     return (

package/src/components/ThreadCard/PinThread.tsx

@@ -0,0 +1,58 @@
+import { memo, useCallback } from 'react';
+import type { SwipeableMethods } from 'react-native-gesture-handler/ReanimatedSwipeable';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { usePinConversation } from '../../hooks/usePinConversation';
+import { trans } from '../../translation';
+import { type ConversationItem } from '@droppii/openim-rn-client-sdk';
+
+interface PinThreadProps {
+  isPinned: boolean;
+  conversation?: ConversationItem;
+  swipeableMethods: SwipeableMethods;
+}
+
+export const PinThread = memo(
+  ({ isPinned, conversation, swipeableMethods }: PinThreadProps) => {
+    const { pinConversation, unpinConversation } = usePinConversation();
+
+    const handlePress = useCallback(async () => {
+      swipeableMethods.close();
+      if (isPinned) {
+        await unpinConversation(conversation);
+      } else {
+        await pinConversation(conversation);
+      }
+    }, [
+      isPinned,
+      conversation,
+      pinConversation,
+      unpinConversation,
+      swipeableMethods,
+    ]);
+
+    return (
+      <KContainer.Touchable
+        width={76}
+        alignItems="center"
+        justifyContent="center"
+        background={KColors.palette.primary.w400}
+        onPress={handlePress}
+      >
+        <KImage.VectorIcons
+          name={isPinned ? 'thumbtack-off-b' : 'thumbtack-b'}
+          provider="DroppiiNew"
+          size={16}
+          color={KColors.white}
+        />
+        <KLabel.Text
+          typo="Text2XsMedium"
+          color={KColors.white}
+          marginT="0.25rem"
+          textAlign="center"
+        >
+          {isPinned ? trans('chat:unpin_thread') : trans('chat:pin_thread')}
+        </KLabel.Text>
+      </KContainer.Touchable>
+    );
+  }
+);

package/src/components/ThreadCard/ThreadCard.tsx

@@ -17,6 +17,7 @@ import {
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { MuteThread } from './MuteThread';
+import { PinThread } from './PinThread';
 import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 import isEmpty from 'lodash/isEmpty';
 
@@ -84,6 +85,11 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
     ) => (
       <>
         <KContainer.VisibleView visible={!isNotInGroup}>
+          <PinThread
+            conversation={conversation}
+            isPinned={Boolean(isPinned)}
+            swipeableMethods={swipeableMethods}
+          />
           <MuteThread
             conversation={conversation}
             isMuted={isMuted}
@@ -92,7 +98,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
         </KContainer.VisibleView>
       </>
     ),
-    [isMuted, conversation, isNotInGroup]
+    [isMuted, conversation, isNotInGroup, isPinned]
   );
 
   return (
@@ -164,10 +170,10 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
             <KContainer.VisibleView visible={Boolean(isPinned)}>
               <KContainer.View marginL="0.5rem">
                 <KImage.VectorIcons
-                  name="pin-outline"
-                  provider="MaterialCommunityIcons"
-                  size={14}
-                  color={KColors.palette.gray.w400}
+                  name={'thumbtack-b'}
+                  provider="DroppiiNew"
+                  size={16}
+                  color={KColors.primary.normal}
                 />
               </KContainer.View>
             </KContainer.VisibleView>

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,9 @@ export interface ApiEndpoints {
   imageUpload: string;
   bot: string;
   uploadFcmToken: string;
+  stickerCategories: string;
+  stickersByCategory: string;
+  stickerHistory: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
@@ -25,6 +28,9 @@ 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',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };

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,11 @@ 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,
+};

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,
+  });