@droppii-org/chat-mobile 0.2.49 → 0.2.51

package/src/hooks/useChatCompose.ts

@@ -13,9 +13,6 @@ import {
   generateAndUploadVideoThumbnails,
   type VideoWithUploadStatus,
 } from '../utils/videoThumbnailUpload';
-import { useConversationStore } from '../store';
-import { DChatCategory } from '../types/chat';
-import { useChatContext } from '../context';
 
 export function useChatCompose() {
   const [text, setText] = useState('');
@@ -25,7 +22,6 @@ export function useChatCompose() {
   const linkPreview = useLinkPreview(text);
   const { send: sendAttachments } = useSendAttachment();
   const { sendMessage } = useSendMessage();
-  const { applicationType } = useChatContext();
 
   const isUploading = useMemo(
     () =>
@@ -53,20 +49,6 @@ export function useChatCompose() {
     const { selectedImages, clearAllImages } = imageAttachment;
     const { selectedFiles, clearAllFiles } = fileAttachment;
     const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
-    const currentConversationId =
-      useConversationStore.getState().currentConversationId;
-    const targetUserId = useConversationStore.getState().currentUserId;
-    const isCreatingConversation =
-      useConversationStore.getState().isCreatingConversation;
-
-    if (targetUserId && !currentConversationId && !isCreatingConversation) {
-      await useConversationStore.getState().createConversation({
-        chatType: 'SINGLE',
-        chatCategory: DChatCategory.BIZ_BIZ,
-        applicationType,
-        peerUserId: targetUserId,
-      });
-    }
 
     // --- Attachments ---
     if (selectedImages.length > 0 || selectedFiles.length > 0) {
@@ -179,7 +161,6 @@ export function useChatCompose() {
     sendAttachments,
     sendMessage,
     text,
-    applicationType,
   ]);
 
   return {

package/src/hooks/useMuteConversation.ts

@@ -3,22 +3,30 @@ import OpenIMSDK, {
   MessageReceiveOptType,
 } from '@droppii/openim-rn-client-sdk';
 import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
-import { useConversationStore } from '../store';
+import { UIUtils } from '../utils/UIUtils';
+import { trans } from '../translation';
 
 export function useMuteConversation() {
   const muteConversation = useCallback(
     async (conversation?: ConversationItem) => {
       if (conversation == null) return;
 
-      await OpenIMSDK.setConversationRecvMessageOpt({
-        conversationID: conversation.conversationID,
-        opt: MessageReceiveOptType.NotNotify,
-      });
-      useConversationStore
-        .getState()
-        .updateConversation(conversation.conversationID, {
-          recvMsgOpt: MessageReceiveOptType.NotNotify,
+      try {
+        await OpenIMSDK.setConversationRecvMessageOpt({
+          conversationID: conversation.conversationID,
+          opt: MessageReceiveOptType.NotNotify,
         });
+        UIUtils.toast.open({
+          title: trans('chat:mute_toast_success'),
+          theme: 'light',
+        });
+      } catch (error) {
+        console.error('muteConversation failed', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
     },
     []
   );
@@ -27,15 +35,22 @@ export function useMuteConversation() {
     async (conversation?: ConversationItem) => {
       if (conversation == null) return;
 
-      await OpenIMSDK.setConversationRecvMessageOpt({
-        conversationID: conversation.conversationID,
-        opt: MessageReceiveOptType.Normal,
-      });
-      useConversationStore
-        .getState()
-        .updateConversation(conversation.conversationID, {
-          recvMsgOpt: MessageReceiveOptType.Normal,
+      try {
+        await OpenIMSDK.setConversationRecvMessageOpt({
+          conversationID: conversation.conversationID,
+          opt: MessageReceiveOptType.Normal,
+        });
+        UIUtils.toast.open({
+          title: trans('chat:unmute_toast_success'),
+          theme: 'light',
+        });
+      } catch (error) {
+        console.error('unmuteConversation failed', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
         });
+      }
     },
     []
   );

package/src/hooks/usePinConversation.ts

@@ -0,0 +1,87 @@
+import { useCallback } from 'react';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../store';
+import { UIUtils } from '../utils/UIUtils';
+import { trans } from '../translation';
+
+const MAX_PINNED_THREADS = 5;
+
+const showPinThreadLimitModal = () => {
+  UIUtils.alert.open({
+    title: trans('chat:pin_thread_limit_title'),
+    message: trans('chat:pin_thread_limit_desc', {
+      maxCount: MAX_PINNED_THREADS,
+    }),
+    primaryIndex: 0,
+    buttonType: 'horizontal-button',
+    buttons: [
+      {
+        label: trans('chat:pin_thread_limit_button'),
+        kind: 'primary',
+      },
+    ],
+  });
+};
+
+export function usePinConversation() {
+  const pinConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      try {
+        const pinnedCount = Object.values(
+          useConversationStore.getState().map
+        ).filter((c) => c.isPinned).length;
+        if (pinnedCount >= MAX_PINNED_THREADS) {
+          showPinThreadLimitModal();
+          return;
+        }
+
+        await OpenIMSDK.pinConversation({
+          conversationID: conversation.conversationID,
+          isPinned: true,
+        });
+
+        UIUtils.toast.open({
+          title: trans('chat:pin_thread_success'),
+          theme: 'light',
+        });
+      } catch (error) {
+        console.error('pinConversation failed', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
+    },
+    []
+  );
+
+  const unpinConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      try {
+        await OpenIMSDK.pinConversation({
+          conversationID: conversation.conversationID,
+          isPinned: false,
+        });
+
+        UIUtils.toast.open({
+          title: trans('chat:unpin_thread_success'),
+          theme: 'light',
+        });
+      } catch (error) {
+        console.error('unpinConversation failed', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
+    },
+    []
+  );
+
+  return { pinConversation, unpinConversation };
+}

package/src/screens/chat-detail/ChatComposer.tsx

@@ -8,6 +8,7 @@ import {
   type RefObject,
 } from 'react';
 import {
+  Keyboard,
   Platform,
   StyleSheet,
   type LayoutChangeEvent,
@@ -15,7 +16,10 @@ import {
 } from 'react-native';
 import { debounce } from 'lodash';
 import Reanimated from 'react-native-reanimated';
-import { KeyboardStickyView } from 'react-native-keyboard-controller';
+import {
+  KeyboardStickyView,
+  useKeyboardState,
+} from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer, KColors, KImage, KButton, KLabel } from '@droppii/libs';
 
@@ -30,12 +34,15 @@ import { ChatAttachmentPanel } from './ChatAttachmentPanel';
 import { ChatLinkPreview } from './ChatLinkPreview';
 import { ChatMessageInput } from './components/ChatMessageInput';
 import { AttachmentPreview } from '../../components/AttachmentPreview';
+import { StickerPicker } from '../../components/StickerPicker';
+import type { StickerItem } from '../../types/sticker';
 
 import {
   DEFAULT_QUICK_ACTIONS,
   getAttachmentPanelHeight,
   DEFAULT_PANNEL_ACTIONS,
 } from './constants';
+import { STICKER_PICKER_HEIGHT } from '../../components/StickerPicker/constants';
 import { DChatPannelActionItemType, type DChatPannelAction } from './types';
 import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
@@ -47,11 +54,12 @@ import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
 import { useChatCompose } from '../../hooks/useChatCompose';
 import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
   pannelActions?: DChatPannelAction[];
-  isDisableCompose?: boolean;
+  isComposeDisabled?: boolean;
   composerRef?: RefObject<View | null>;
   onComposerLayout?: (event: LayoutChangeEvent) => void;
 }
@@ -60,18 +68,22 @@ export const ChatComposer = memo(
   ({
     isEmptyMessage = false,
     pannelActions,
-    isDisableCompose = false,
+    isComposeDisabled = false,
     composerRef,
     onComposerLayout,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
+    const isDisableCompose = isComposeDisabled;
+    const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
     const { mutate: runFlow, isPending } = useRunFlow();
-
+    const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
 
     const {
+      activePanelType,
+      setActivePanelType,
       isAttachmentOpen,
       setIsAttachmentOpen,
       isInputFocused,
@@ -81,16 +93,25 @@ export const ChatComposer = memo(
       inputRef,
     } = useChatComposerState(compose.text);
 
-    const panelHeight = useMemo(
+    const attachmentPanelHeight = useMemo(
       () => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length),
       []
     );
 
-    const { accessorySlotStyle, toggleAttachmentVisibility, closeAttachment } =
-      useChatComposerAnimation({
-        panelHeight,
-        onAttachmentOpenChange: setIsAttachmentOpen,
-      });
+    const panelHeight =
+      activePanelType === 'sticker'
+        ? STICKER_PICKER_HEIGHT
+        : attachmentPanelHeight;
+
+    const {
+      accessorySlotStyle,
+      toggleAttachmentVisibility,
+      openWithHeight,
+      closeAttachment,
+    } = useChatComposerAnimation({
+      panelHeight,
+      onAttachmentOpenChange: setIsAttachmentOpen,
+    });
 
     const handleSend = useCallback(async () => {
       if (compose.isUploading || !compose.canSend) return;
@@ -103,8 +124,58 @@ export const ChatComposer = memo(
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
-      if (isAttachmentOpen) closeAttachment(true);
-    }, [closeAttachment, isAttachmentOpen, setIsInputFocused]);
+      if (isAttachmentOpen) {
+        // Use immediate close (no animation) when sticker panel is open to avoid
+        // layout conflict between the panel closing and keyboard appearing.
+        // Attachment panel is small enough that animation is fine (speedUp=true).
+        const immediate = activePanelType === 'sticker';
+        closeAttachment(!immediate, immediate);
+        setActivePanelType(null);
+      }
+    }, [
+      closeAttachment,
+      isAttachmentOpen,
+      activePanelType,
+      setIsInputFocused,
+      setActivePanelType,
+    ]);
+
+    const handleToggleAttachment = useCallback(() => {
+      if (activePanelType === 'sticker') {
+        // switch from sticker to attachment
+        setActivePanelType('attachment');
+        openWithHeight(attachmentPanelHeight);
+        return;
+      }
+      setActivePanelType(isAttachmentOpen ? null : 'attachment');
+      toggleAttachmentVisibility();
+    }, [
+      activePanelType,
+      isAttachmentOpen,
+      attachmentPanelHeight,
+      openWithHeight,
+      toggleAttachmentVisibility,
+      setActivePanelType,
+    ]);
+
+    const handleToggleSticker = useCallback(() => {
+      if (activePanelType === 'sticker') {
+        closeAttachment();
+        setActivePanelType(null);
+        return;
+      }
+      if (isKeyboardVisible) {
+        Keyboard.dismiss();
+      }
+      setActivePanelType('sticker');
+      openWithHeight(STICKER_PICKER_HEIGHT);
+    }, [
+      activePanelType,
+      isKeyboardVisible,
+      closeAttachment,
+      openWithHeight,
+      setActivePanelType,
+    ]);
 
     const handleInputBlur = useCallback(() => {
       setIsInputFocused(false);
@@ -181,6 +252,13 @@ export const ChatComposer = memo(
       [insets.bottom, isAttachmentOpen]
     );
 
+    const handleStickerSelect = useCallback(
+      (sticker: StickerItem) => {
+        sendMessage({ sticker });
+      },
+      [sendMessage]
+    );
+
     const attachments = useAttachmentMapping({
       selectedImages: compose.selectedImages,
       selectedFiles: compose.selectedFiles,
@@ -211,7 +289,7 @@ export const ChatComposer = memo(
             />
           </KContainer.View>
           <KLabel.Text typo="TextXsNormal">
-            Người dùng này không còn khả dụng
+            {trans('chat:compose_disabled_seller_inactive')}
           </KLabel.Text>
         </KContainer.View>
       );
@@ -265,15 +343,19 @@ export const ChatComposer = memo(
             style={inputRowStyle}
           >
             <KContainer.Touchable
-              onPress={toggleAttachmentVisibility}
+              onPress={handleToggleAttachment}
               center
               br="round"
             >
               <KImage.VectorIcons
-                name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
+                name={
+                  activePanelType === 'attachment'
+                    ? 'close-circle-o'
+                    : 'plus-circle-o'
+                }
                 size={24}
                 color={
-                  isAttachmentOpen
+                  activePanelType === 'attachment'
                     ? KColors.palette.primary.w400
                     : KColors.palette.gray.w600
                 }
@@ -290,6 +372,7 @@ export const ChatComposer = memo(
               isInputFocused={isInputFocused}
               isMultilineInput={isMultilineInput}
               inputRef={inputRef}
+              onEmojiPress={handleToggleSticker}
             />
 
             <KContainer.Touchable
@@ -308,8 +391,7 @@ export const ChatComposer = memo(
               opacity={compose.isUploading ? 0.6 : 1}
             >
               <KImage.VectorIcons
-                name="send"
-                provider="MaterialCommunityIcons"
+                name="send-b"
                 size={20}
                 color={KColors.white}
               />
@@ -335,7 +417,12 @@ export const ChatComposer = memo(
             style={[styles.accessorySlot, accessorySlotStyle]}
             pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
           >
-            <ChatAttachmentPanel actions={resolvedPannelActons} />
+            {activePanelType === 'attachment' && (
+              <ChatAttachmentPanel actions={resolvedPannelActons} />
+            )}
+            {activePanelType === 'sticker' && (
+              <StickerPicker onSelectSticker={handleStickerSelect} />
+            )}
           </Reanimated.View>
         </KContainer.VisibleView>
       </>

package/src/screens/chat-detail/ChatDetail.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { DeviceEventEmitter } from 'react-native';
 
 import { useKeyboardScrollToEnd } from '@legendapp/list/keyboard';
@@ -26,15 +26,12 @@ import type { ChatDetailProps } from './types';
 import { normalizeUrl } from '../../utils/url';
 import { MessageToolboxOverlay } from './messageToolbox/MessageToolboxOverlay';
 import type { MeasuredRect, MessageToolboxRef } from './messageToolbox/types';
-import { DBotStatusValue } from '../../types/chat';
 import {
   useGetConversationDetail,
-  useGetStatusConversationBot,
+  useGetConversationTarget,
 } from '../../hooks/conversation/useGetConversationDetail';
-import { PeerType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
-import { getBotId } from '../../utils/conversation';
 import { ChatEvent } from '../../types/events';
 import { useSetIsShowFLashMessage } from '../../context/global';
 
@@ -69,19 +66,8 @@ const ChatDetail = memo(
 
     const conversation = useConversation(conversationId);
 
-    const botId = useMemo(() => {
-      if (conversation?.peerType === PeerType.Bot) {
-        if (targetBotId) {
-          return targetBotId;
-        }
-        return getBotId(conversation);
-      }
-      return undefined;
-    }, [conversation, targetBotId]);
-
-    const { data: botInfo } = useGetStatusConversationBot(botId);
-
-    const { status: botStatus } = botInfo || {};
+    const { data: target } = useGetConversationTarget(conversationId);
+    const isComposeDisabled = !!target && !target.isActive;
 
     const handleBackDefault = useCallback(() => {
       navigation.goBack();
@@ -205,7 +191,7 @@ const ChatDetail = memo(
         <ChatComposer
           isEmptyMessage={messages?.length === 0}
           pannelActions={pannelActions}
-          isDisableCompose={botStatus === DBotStatusValue.INACTIVE}
+          isComposeDisabled={isComposeDisabled}
         />
 
         <MediaViewerModal ref={mediaViewerRef} />

package/src/screens/chat-detail/hooks/useChatComposerAnimation.ts

@@ -19,7 +19,8 @@ interface UseChatComposerAnimationReturn {
   accessorySlotStyle: any;
   toggleAttachmentVisibility: () => void;
   openAttachment: () => void;
-  closeAttachment: (speedUp?: boolean) => void;
+  openWithHeight: (height: number) => void;
+  closeAttachment: (speedUp?: boolean, immediate?: boolean) => void;
 }
 
 export const useChatComposerAnimation = ({
@@ -43,10 +44,14 @@ export const useChatComposerAnimation = ({
   }, [attachmentHeightSV, panelHeight, onAttachmentOpenChange]);
 
   const closeAttachment = useCallback(
-    (speedUp = false) => {
-      attachmentHeightSV.value = withTiming(0, {
-        duration: ACCESSORY_ANIMATION_MS / (speedUp ? 2 : 1),
-      });
+    (speedUp = false, immediate = false) => {
+      if (immediate) {
+        attachmentHeightSV.value = 0;
+      } else {
+        attachmentHeightSV.value = withTiming(0, {
+          duration: ACCESSORY_ANIMATION_MS / (speedUp ? 2 : 1),
+        });
+      }
       onAttachmentOpenChange(false);
     },
     [attachmentHeightSV, onAttachmentOpenChange]
@@ -56,6 +61,16 @@ export const useChatComposerAnimation = ({
     return { height: attachmentHeightSV.value };
   });
 
+  const openWithHeight = useCallback(
+    (height: number) => {
+      attachmentHeightSV.value = withTiming(height, {
+        duration: ACCESSORY_ANIMATION_MS,
+      });
+      onAttachmentOpenChange(true);
+    },
+    [attachmentHeightSV, onAttachmentOpenChange]
+  );
+
   const toggleAttachmentVisibility = useCallback(() => {
     // Use animated value as source of truth, not stale state
     const isOpen = attachmentHeightSV.value > 0;
@@ -84,6 +99,7 @@ export const useChatComposerAnimation = ({
     accessorySlotStyle,
     toggleAttachmentVisibility,
     openAttachment,
+    openWithHeight,
     closeAttachment,
   };
 };

package/src/screens/chat-detail/hooks/useChatComposerState.ts

@@ -1,6 +1,10 @@
 import { useState, useMemo, useRef } from 'react';
 
+export type ActivePanelType = 'attachment' | 'sticker' | null;
+
 interface UseChatComposerStateReturn {
+  activePanelType: ActivePanelType;
+  setActivePanelType: (type: ActivePanelType) => void;
   isAttachmentOpen: boolean;
   setIsAttachmentOpen: (open: boolean) => void;
   isInputFocused: boolean;
@@ -14,6 +18,7 @@ interface UseChatComposerStateReturn {
 export const useChatComposerState = (
   value: string
 ): UseChatComposerStateReturn => {
+  const [activePanelType, setActivePanelType] = useState<ActivePanelType>(null);
   const [isAttachmentOpen, setIsAttachmentOpen] = useState(false);
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [isInputWrapped, setIsInputWrapped] = useState(false);
@@ -28,6 +33,8 @@ export const useChatComposerState = (
   }, [isInputWrapped, value]);
 
   return {
+    activePanelType,
+    setActivePanelType,
     isAttachmentOpen,
     setIsAttachmentOpen,
     isInputFocused,

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

@@ -18,6 +18,7 @@ import { MessageStatusIndicator } from '../../../components/messages/MessageStat
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 import { messageStyles } from './messageTypes';
 import QuotedMessage from '../../../components/messages/quotedMessage';
+import { StickerMessage } from '../../../components/messages/stickerMessage';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -36,9 +37,6 @@ interface LegendChatMessageProps {
   customMessageItemFactory?: (m: MessageItem) => ReactNode;
 }
 
-// OpenIM message types (not all exposed as MessageType enum)
-const MERGED_MESSAGE_TYPE = 107; // MergerMessage - merged/grouped messages
-
 const messageComponentMap: Partial<
   Record<MessageType, ComponentType<MessageProps>>
 > = {
@@ -49,14 +47,15 @@ const messageComponentMap: Partial<
   [MessageType.PictureMessage]: ImageMessage,
   [MessageType.VideoMessage]: VideoMessage,
   [MessageType.FileMessage]: FileMessage,
-  [MERGED_MESSAGE_TYPE]: MergedMessage,
+  [MessageType.MergeMessage]: MergedMessage,
   [MessageType.RevokeMessage]: RevokedMessage,
+  [MessageType.StickerMessage]: StickerMessage,
 };
 
 const MEDIA_TYPES: number[] = [
   MessageType.PictureMessage,
   MessageType.VideoMessage,
-  MERGED_MESSAGE_TYPE,
+  MessageType.MergeMessage,
 ];
 
 export const LegendChatMessage = memo(

package/src/services/attachmentOrchestrator.ts

@@ -293,7 +293,7 @@ export namespace AttachmentOrchestratorService {
           recvID,
           groupID,
           message,
-          offlinePushInfo: generateOfflinePushInfo(message.contentType, ''),
+          offlinePushInfo: generateOfflinePushInfo(message),
         });
 
         if (result) {

package/src/services/endpoints.ts

@@ -30,7 +30,12 @@ export const ENDPOINTS = {
       `${getApiEndpoint('conversation')}/${id}/bot-flows/main-menu`,
     getConversationStatusByBotId: (botId: string) =>
       `${getApiEndpoint('bot')}/${botId}`,
-    createConversation: () => getApiEndpoint('conversation'),
+    getConversationTarget: (conversationId: string) =>
+      `${getApiEndpoint('conversation')}/${conversationId}/target`,
+    stickerCategories: () => getApiEndpoint('stickerCategories'),
+    stickersByCategoryId: (id: string) =>
+      `${getApiEndpoint('stickersByCategory')}/${id}/stickers`,
+    stickerHistory: () => getApiEndpoint('stickerHistory'),
   },
   uploaderService: {
     get uploadImage() {