@droppii-org/chat-mobile 0.2.50 → 0.2.51

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

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/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,
   };
 };