@droppii-org/chat-mobile 0.2.106 → 0.2.108

package/lib/module/screens/chat-detail/ChatComposer.js

@@ -1,47 +1,26 @@
 "use strict";
 
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Keyboard, Platform, StyleSheet } from 'react-native';
-import { debounce } from 'lodash';
-import Reanimated from 'react-native-reanimated';
+import { memo, useCallback, useMemo } from 'react';
 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';
-const IS_IOS = Platform.OS === 'ios';
-const INPUT_LINE_HEIGHT = 22.4;
-const WRAPPED_HEIGHT_THRESHOLD = IS_IOS ? INPUT_LINE_HEIGHT + 4 : INPUT_LINE_HEIGHT + 12;
-import { ChatQuickActions } from "./ChatQuickActions.js";
-import { ChatAttachmentPanel } from "./ChatAttachmentPanel.js";
-import { ChatLinkPreview } from "./ChatLinkPreview.js";
-import { ChatMessageInput } from "./components/ChatMessageInput.js";
-import { AttachmentPreview } from "../../components/AttachmentPreview/index.js";
-import { StickerPicker } from "../../components/StickerPicker/index.js";
-import { DEFAULT_QUICK_ACTIONS, getAttachmentPanelHeight, DEFAULT_PANNEL_ACTIONS } from "./constants.js";
-import { STICKER_PICKER_HEIGHT } from "../../components/StickerPicker/constants.js";
-import { DChatPannelActionItemType } from "./types.js";
+import { PeerType } from '@droppii/openim-rn-client-sdk';
 import { useChatComposerState } from "./hooks/useChatComposerState.js";
-import { useChatComposerAnimation } from "./hooks/useChatComposerAnimation.js";
+import { useComposerPanels } from "./hooks/useComposerPanels.js";
+import { useComposerSend } from "./hooks/useComposerSend.js";
+import { useComposerBotMenu } from "./hooks/useComposerBotMenu.js";
+import { useComposerPanelActions } from "./hooks/useComposerPanelActions.js";
+import { useMentionComposer } from "./hooks/useMentionComposer.js";
+import { ChatComposerStatusBanner, getComposerStatusVariant } from "./components/ChatComposerStatusBanner.js";
+import { ChatComposerInputArea } from "./components/ChatComposerInputArea.js";
+import { ChatComposerAccessorySlot } from "./components/ChatComposerAccessorySlot.js";
 import { useChatDetailContext } from "../../context/ChatDetailContext.js";
-import { trans } from "../../translation/index.js";
-import { useCloseSupportSession, useResetFlow, useRunFlow } from "../../hooks/flows/useFlow.js";
 import { ReactFlowsNodeTypes } from "../../types/flows.js";
-import { DEFAULT_BUTTON_ID, isContextButton } from "../../utils/flows.js";
-import { DFlowState } from "../../types/chat.js";
-import { useAttachmentMapping } from "./hooks/useAttachmentMapping.js";
 import { useChatCompose } from "../../hooks/useChatCompose.js";
 import { useInputStateBroadcast } from "../../hooks/useInputStateBroadcast.js";
-import { ChatCurrentQuotedMessage } from "./ChatCurrentQuotedMessage.js";
-import { useSendMessage } from "../../hooks/message/useSendMessage.js";
-import { openBotMenuSheet } from "./BotMenuSheet.js";
-import { UIUtils } from "../../utils/UIUtils.js";
-import { PeerType } from '@droppii/openim-rn-client-sdk';
 import { useCanSendMessage } from "../../hooks/useGroupPermission.js";
 import { useIsJoinedGroup } from "../../hooks/useIsJoinedGroup.js";
-import { useMentionComposer } from "./hooks/useMentionComposer.js";
-import { MentionSuggestionList } from "./components/MentionSuggestionList.js";
 import { createOpenIMMentionSearchSource } from "../../services/mentionSearch.js";
-import { serializeMentionsForSend, MAX_AT_USER_COUNT } from "../../utils/mentionSerializer.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const ChatComposer = /*#__PURE__*/memo(({
   isEmptyMessage = false,
   pannelActions,
@@ -49,7 +28,9 @@ export const ChatComposer = /*#__PURE__*/memo(({
   composerRef,
   onComposerLayout,
   onPressJoinGroup,
-  isJoiningGroup = false
+  isJoiningGroup = false,
+  panelControllerRef,
+  onPanelOpenChange
 }) => {
   const insets = useSafeAreaInsets();
   const isDisableCompose = isComposeDisabled;
@@ -57,24 +38,9 @@ export const ChatComposer = /*#__PURE__*/memo(({
   const {
     isBotConversation,
     conversation,
-    conversationFlow,
-    conversationFlowMainMenu,
-    flowState
+    conversationFlow
   } = useChatDetailContext();
   const isGroupConversation = conversation?.peerType === PeerType.Group;
-  const {
-    mutate: runFlow,
-    isPending
-  } = useRunFlow();
-  const {
-    mutate: resetFlow
-  } = useResetFlow();
-  const {
-    mutateAsync: closeSupportSession
-  } = useCloseSupportSession();
-  const {
-    sendMessage
-  } = useSendMessage();
   const compose = useChatCompose();
   const {
     notifyTyping,
@@ -97,8 +63,8 @@ export const ChatComposer = /*#__PURE__*/memo(({
     setIsAttachmentOpen,
     isInputFocused,
     setIsInputFocused,
-    setIsInputWrapped,
     isMultilineInput,
+    handleInputContentSizeChange,
     inputRef
   } = useChatComposerState(compose.text);
   const mentionSearchSource = useMemo(() => conversation?.groupID ? createOpenIMMentionSearchSource(conversation.groupID) : null, [conversation?.groupID]);
@@ -118,137 +84,58 @@ export const ChatComposer = /*#__PURE__*/memo(({
     enabled: isGroupConversation,
     inputRef
   });
-  const attachmentPanelHeight = useMemo(() => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length), []);
-  const panelHeight = activePanelType === 'sticker' ? STICKER_PICKER_HEIGHT : attachmentPanelHeight;
+  const isNewBotConversation = isBotConversation && conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start && isEmptyMessage;
+  const statusVariant = getComposerStatusVariant({
+    isDisableCompose,
+    isGroupConversation,
+    isNewBotConversation,
+    isNotInGroup,
+    isSendMessageAllowed
+  });
   const {
     accessorySlotStyle,
-    toggleAttachmentVisibility,
-    openWithHeight,
-    closeAttachment
-  } = useChatComposerAnimation({
-    panelHeight,
-    onAttachmentOpenChange: setIsAttachmentOpen
+    closeActivePanel,
+    yieldingCloseMode,
+    handleToggleAttachment,
+    handleToggleSticker
+  } = useComposerPanels({
+    activePanelType,
+    setActivePanelType,
+    isAttachmentOpen,
+    setIsAttachmentOpen,
+    isMentionPanelOpen: mentionComposer.isPanelOpen,
+    closeMentionPanel: mentionComposer.closeMentionPanel,
+    isKeyboardVisible,
+    isSlotVisible: !isDisableCompose && !isNewBotConversation && statusVariant === null,
+    panelControllerRef,
+    onPanelOpenChange
+  });
+  const handleSend = useComposerSend({
+    compose,
+    isSendMessageAllowed,
+    sendDeniedReason,
+    mentions: mentionComposer.mentions,
+    clearMentions: mentionComposer.clear,
+    notifyStoppedTyping,
+    inputRef
+  });
+  const {
+    hasBotMenuOptions,
+    handleOpenBotMenu,
+    onStartConversationFlow,
+    isRunFlowPending
+  } = useComposerBotMenu();
+  const resolvedPannelActons = useComposerPanelActions({
+    pannelActions,
+    addImages: compose.addImages,
+    addFiles: compose.addFiles
   });
-
-  // Mutual exclusion (finding #5 in the mention plan): the mention picker
-  // never renders through the attachment/sticker panel slot, but opening
-  // one must still close the other — starting a mention query while the
-  // attachment/sticker panel is open closes that panel.
-  useEffect(() => {
-    if (mentionComposer.isPanelOpen && isAttachmentOpen) {
-      const immediate = activePanelType === 'sticker';
-      closeAttachment(!immediate, immediate);
-      setActivePanelType(null);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mentionComposer.isPanelOpen]);
-  const handleSend = useCallback(async () => {
-    if (!isSendMessageAllowed) {
-      UIUtils.toast.open({
-        title: sendDeniedReason,
-        theme: 'info'
-      });
-      return;
-    }
-    if (compose.isUploading || !compose.canSend) return;
-    const mentionsToSend = mentionComposer.mentions;
-
-    // OpenIM's Go core hard-rejects an AtTextMessage tagging more than
-    // MAX_AT_USER_COUNT users, so serializeMentionsForSend caps
-    // atUserIDList to the first MAX_AT_USER_COUNT (mentionSerializer.ts's
-    // doc comment) — the message still sends, with every mention still
-    // highlighted in the text, just only the first MAX_AT_USER_COUNT
-    // actually get natively tagged/notified. This is a heads-up, not a
-    // block, so no `return` here.
-    if (mentionsToSend.length > 0) {
-      const {
-        truncated
-      } = serializeMentionsForSend(mentionsToSend);
-      if (truncated) {
-        UIUtils.toast.open({
-          title: trans('group:tag_limit_exceeded', {
-            max: String(MAX_AT_USER_COUNT)
-          }),
-          theme: 'info'
-        });
-      }
-    }
-
-    // Clear mention state synchronously, in the same tick as
-    // compose.send() (which clears `text`) — otherwise there's a real
-    // transient render where `value` is already '' but `mentions` still
-    // holds the just-sent entries, and the composer can visibly fail to
-    // clear (ChatMessageInput stays in children-controlled mode with a
-    // "ghost" mention anchored past the end of an empty string). See
-    // useMentionComposer.clear()'s doc comment.
-    mentionComposer.clear();
-    // Stop before awaiting the send: the peer should lose the indicator as
-    // the message goes out, not once it round-trips.
-    notifyStoppedTyping();
-    try {
-      await compose.send(mentionsToSend);
-    } catch (error) {
-      if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
-    } finally {
-      // Belt-and-suspenders: force the native view to actually clear,
-      // regardless of whether the value/children mode-switch (triggered
-      // by mentions going from non-empty to empty) synced correctly on
-      // its own — the underlying nested-Text-in-TextInput technique is
-      // known to have platform quirks around this kind of transition.
-      inputRef.current?.clear();
-    }
-    // Depend on mentionComposer.mentions/.clear specifically (both
-    // stable-per-value / [] deps), not the whole mentionComposer object —
-    // same reasoning as handleToggleAttachment above.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [compose, isSendMessageAllowed, sendDeniedReason, mentionComposer.mentions, mentionComposer.clear, notifyStoppedTyping, inputRef]);
   const handleInputFocus = useCallback(() => {
     setIsInputFocused(true);
     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(() => {
-    mentionComposer.closeMentionPanel();
-    if (activePanelType === 'sticker') {
-      // switch from sticker to attachment
-      setActivePanelType('attachment');
-      openWithHeight(attachmentPanelHeight);
-      return;
+      closeActivePanel(yieldingCloseMode);
     }
-    setActivePanelType(isAttachmentOpen ? null : 'attachment');
-    toggleAttachmentVisibility();
-    // Deliberately depend on `mentionComposer.closeMentionPanel` (stable —
-    // [] deps in useMentionComposer), NOT the whole `mentionComposer`
-    // object, which is a fresh literal every render (useMentionComposer
-    // doesn't memoize its return value). Depending on the whole object
-    // recreated this callback — and therefore every prop built from it,
-    // e.g. ChatMessageInput's onEmojiPress — on every single render,
-    // which contributed to a real "Maximum update depth exceeded" loop
-    // found in testing. The lint rule can't prove member-access stability
-    // on its own, hence the disable.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activePanelType, isAttachmentOpen, attachmentPanelHeight, openWithHeight, toggleAttachmentVisibility, setActivePanelType, mentionComposer.closeMentionPanel]);
-  const handleToggleSticker = useCallback(() => {
-    mentionComposer.closeMentionPanel();
-    if (activePanelType === 'sticker') {
-      closeAttachment();
-      setActivePanelType(null);
-      return;
-    }
-    if (isKeyboardVisible) {
-      Keyboard.dismiss();
-    }
-    setActivePanelType('sticker');
-    openWithHeight(STICKER_PICKER_HEIGHT);
-    // Same reasoning as handleToggleAttachment above — see that comment.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activePanelType, isKeyboardVisible, mentionComposer.closeMentionPanel, closeAttachment, openWithHeight, setActivePanelType]);
+  }, [closeActivePanel, isAttachmentOpen, yieldingCloseMode, setIsInputFocused]);
   const handleInputBlur = useCallback(() => {
     setIsInputFocused(false);
     notifyStoppedTyping();
@@ -261,303 +148,30 @@ export const ChatComposer = /*#__PURE__*/memo(({
     notifyTyping(text);
     mentionComposer.handleChangeText(text);
   }, [notifyTyping, mentionComposer]);
-  const handleInputContentSizeChange = useCallback(event => {
-    const {
-      height
-    } = event.nativeEvent.contentSize;
-    setIsInputWrapped(height > WRAPPED_HEIGHT_THRESHOLD);
-  }, [setIsInputWrapped]);
-  const onStartConversationFlow = useCallback(() => {
-    runFlow({
-      groupId: conversationFlow?.flowCurrentStep?.id || '',
-      actionId: null,
-      childId: null,
-      plainText: trans('start')
-    });
-  }, [runFlow, conversationFlow]);
-  const botMenuOptions = useMemo(() => {
-    const apiOptions = conversationFlowMainMenu?.filter(item => !isContextButton(item.label)) || [];
-    const hasDefaultButton = apiOptions.some(item => item.id === DEFAULT_BUTTON_ID);
-    if (hasDefaultButton) return apiOptions;
-    return [...apiOptions, {
-      id: DEFAULT_BUTTON_ID,
-      label: trans('restart')
-    }];
-  }, [conversationFlowMainMenu]);
-  const hasBotMenuOptions = isBotConversation && botMenuOptions.length > 0;
-  const runBotMenuOption = useCallback(item => {
-    if (item.id === DEFAULT_BUTTON_ID) {
-      resetFlow();
-      return;
-    }
-    runFlow({
-      actionId: item.id,
-      groupId: '',
-      childId: '',
-      plainText: item.label
-    });
-  }, [runFlow, resetFlow]);
-  const handleSelectBotMenuOption = useCallback(item => {
-    if (flowState === DFlowState.CS) {
-      UIUtils.popup.open({
-        header: {
-          title: {
-            text: trans('chat:end_support_session_title')
-          },
-          alignment: 'center'
-        },
-        body: {
-          renderContent: () => /*#__PURE__*/_jsx(KContainer.View, {
-            padding: '1rem',
-            children: /*#__PURE__*/_jsx(KLabel.RichText, {
-              typo: "TextMdNormal",
-              textAlign: "center",
-              color: KColors.gray.dark,
-              richTextOptions: {
-                i18nKey: trans('chat:end_support_session_desc'),
-                components: {
-                  bold: /*#__PURE__*/_jsx(KLabel.Text, {
-                    typo: "TextMdBold",
-                    color: KColors.gray.dark
-                  })
-                }
-              }
-            })
-          })
-        },
-        actions: {
-          buttons: [{
-            label: trans('chat:end_support_session_secondary'),
-            kind: 'light',
-            onPress: () => {}
-          }, {
-            label: trans('chat:end_support_session_primary'),
-            kind: 'danger',
-            onPress: async () => {
-              await closeSupportSession();
-              runBotMenuOption(item);
-            }
-          }],
-          type: 'horizontal-button'
-        }
-      });
-      return;
-    }
-    runBotMenuOption(item);
-  }, [flowState, runBotMenuOption, closeSupportSession]);
-  const handleOpenBotMenu = useCallback(() => {
-    if (!hasBotMenuOptions) return;
-    openBotMenuSheet({
-      options: botMenuOptions,
-      onSelect: handleSelectBotMenuOption
-    });
-  }, [hasBotMenuOptions, botMenuOptions, handleSelectBotMenuOption]);
-  useEffect(() => {
-    if (!compose.text) setIsInputWrapped(false);
-  }, [compose.text, setIsInputWrapped]);
-  const addImagesRef = useRef(compose.addImages);
-  addImagesRef.current = compose.addImages;
-  const debouncedImagePickerRef = useRef(debounce(() => addImagesRef.current?.(), 300, {
-    leading: true,
-    trailing: false
-  }));
-  const addFilesRef = useRef(compose.addFiles);
-  addFilesRef.current = compose.addFiles;
-  const debouncedFilePickerRef = useRef(debounce(() => addFilesRef.current?.(), 300, {
-    leading: true,
-    trailing: false
-  }));
-  const resolvedPannelActons = useMemo(() => {
-    return (pannelActions || DEFAULT_PANNEL_ACTIONS)?.map(p => {
-      let onPress;
-      switch (p.id) {
-        case DChatPannelActionItemType.Gallery:
-          onPress = debouncedImagePickerRef.current;
-          break;
-        case DChatPannelActionItemType.Documents:
-          onPress = debouncedFilePickerRef.current;
-          break;
-        default:
-          break;
-      }
-      return {
-        ...p,
-        onPress: p.onPress || onPress
-      };
-    });
-  }, [pannelActions]);
-  const inputRowStyle = useMemo(() => ({
-    paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12
-  }), [insets.bottom, isAttachmentOpen]);
-  const handleStickerSelect = useCallback(sticker => {
-    sendMessage({
-      sticker
-    });
-  }, [sendMessage]);
-  const attachments = useAttachmentMapping({
-    selectedImages: compose.selectedImages,
-    selectedFiles: compose.selectedFiles
+  const content = statusVariant ? /*#__PURE__*/_jsx(ChatComposerStatusBanner, {
+    variant: statusVariant,
+    isRunFlowPending: isRunFlowPending,
+    onStartConversationFlow: onStartConversationFlow,
+    isJoiningGroup: isJoiningGroup,
+    onPressJoinGroup: onPressJoinGroup,
+    sendDeniedReason: sendDeniedReason
+  }) : /*#__PURE__*/_jsx(ChatComposerInputArea, {
+    compose: compose,
+    mentionComposer: mentionComposer,
+    activePanelType: activePanelType,
+    isAttachmentOpen: isAttachmentOpen,
+    isInputFocused: isInputFocused,
+    isMultilineInput: isMultilineInput,
+    inputRef: inputRef,
+    onToggleAttachment: handleToggleAttachment,
+    onToggleSticker: handleToggleSticker,
+    onChangeText: handleChangeText,
+    onInputFocus: handleInputFocus,
+    onInputBlur: handleInputBlur,
+    onInputContentSizeChange: handleInputContentSizeChange,
+    onOpenBotMenu: hasBotMenuOptions ? handleOpenBotMenu : undefined,
+    onSend: handleSend
   });
-  const onRemove = useCallback((type, data) => {
-    if (type === 'file') return compose.removeFile(data);
-    return compose.removeImage(data);
-  }, [compose]);
-  let content;
-  const isNewBotConversation = isBotConversation && conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start && isEmptyMessage;
-  if (isDisableCompose && !isGroupConversation) {
-    content = /*#__PURE__*/_jsxs(KContainer.View, {
-      row: true,
-      alignItems: true,
-      justifyContent: true,
-      children: [/*#__PURE__*/_jsx(KContainer.View, {
-        marginR: "0.25rem",
-        children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
-          name: "info-circle-o",
-          size: 16,
-          color: KColors.palette.gray.w600
-        })
-      }), /*#__PURE__*/_jsx(KLabel.Text, {
-        typo: "TextXsNormal",
-        children: trans('chat:compose_disabled_seller_inactive')
-      })]
-    });
-  } else if (isNewBotConversation) {
-    content = /*#__PURE__*/_jsx(KContainer.View, {
-      padding: '1.5rem',
-      paddingB: 0,
-      children: /*#__PURE__*/_jsx(KButton.Solid, {
-        size: "md",
-        label: trans('start'),
-        stretch: true,
-        icon: {
-          vectorName: 'chat-square-o',
-          size: 20
-        },
-        loading: isPending,
-        onPress: onStartConversationFlow
-      })
-    });
-  } else if (isNotInGroup) {
-    content = /*#__PURE__*/_jsxs(KContainer.View, {
-      paddingH: "0.75rem",
-      justifyContent: "center",
-      brTW: 1,
-      brTC: KColors.border.light,
-      children: [/*#__PURE__*/_jsx(KLabel.Text, {
-        typo: "TextSmNormal",
-        textAlign: "center",
-        paddingV: '0.75rem',
-        children: trans('group:not_in_group')
-      }), /*#__PURE__*/_jsx(KButton.Solid, {
-        size: "md",
-        label: trans('group:join'),
-        stretch: true,
-        loading: isJoiningGroup,
-        onPress: onPressJoinGroup
-      })]
-    });
-  } else if (!isSendMessageAllowed) {
-    content = /*#__PURE__*/_jsxs(KContainer.View, {
-      row: true,
-      alignItems: true,
-      justifyContent: true,
-      paddingT: '1rem',
-      children: [/*#__PURE__*/_jsx(KContainer.View, {
-        marginR: "0.25rem",
-        children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
-          name: "info-circle-o",
-          size: 16,
-          color: KColors.palette.gray.w600
-        })
-      }), /*#__PURE__*/_jsx(KLabel.Text, {
-        typo: "TextXsNormal",
-        children: sendDeniedReason
-      })]
-    });
-  } else {
-    content = /*#__PURE__*/_jsxs(KContainer.View, {
-      background: '#F9F9FA',
-      children: [/*#__PURE__*/_jsx(ChatCurrentQuotedMessage, {}), /*#__PURE__*/_jsx(KContainer.VisibleView, {
-        visible: conversation?.peerType === PeerType.Bot,
-        children: /*#__PURE__*/_jsx(ChatQuickActions, {
-          visible: true,
-          actions: DEFAULT_QUICK_ACTIONS,
-          onActionPress: action => console.log('[ChatComposer] quick action:', action.id)
-        })
-      }), compose.showLinkPreview && /*#__PURE__*/_jsx(ChatLinkPreview, {
-        metadata: compose.urlMetadata,
-        isLoading: compose.isMetadataLoading,
-        onDismiss: compose.dismissPreview
-      }), /*#__PURE__*/_jsx(AttachmentPreview, {
-        visible: compose.isImagePreviewVisible || compose.isFilePreviewVisible,
-        attachments: attachments,
-        onRemove: onRemove
-      }), /*#__PURE__*/_jsxs(KContainer.View, {
-        style: styles.inputRowWrapper,
-        children: [/*#__PURE__*/_jsx(KContainer.VisibleView, {
-          visible: mentionComposer.isPanelOpen,
-          children: /*#__PURE__*/_jsx(KContainer.View, {
-            style: styles.mentionPanel,
-            children: /*#__PURE__*/_jsx(MentionSuggestionList, {
-              suggestions: mentionComposer.suggestions,
-              isSearching: mentionComposer.isSearching,
-              isLoadingMore: mentionComposer.isLoadingMore,
-              hasMore: mentionComposer.hasMore,
-              onLoadMore: mentionComposer.loadMore,
-              onSelect: mentionComposer.selectSuggestion
-            })
-          })
-        }), /*#__PURE__*/_jsxs(KContainer.View, {
-          row: true,
-          alignItems: true,
-          paddingH: "0.75rem",
-          paddingT: "0.75rem",
-          paddingB: "0.75rem",
-          style: inputRowStyle,
-          children: [/*#__PURE__*/_jsx(KContainer.Touchable, {
-            onPress: handleToggleAttachment,
-            center: true,
-            br: "round",
-            children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
-              name: activePanelType === 'attachment' ? 'close-circle-b' : 'plus-circle-o',
-              size: 24,
-              color: activePanelType === 'attachment' ? KColors.palette.primary.w400 : KColors.palette.gray.w600
-            })
-          }), /*#__PURE__*/_jsx(ChatMessageInput, {
-            value: compose.text,
-            placeholder: "Nh\u1EADp tin nh\u1EAFn...",
-            onChangeText: handleChangeText,
-            onFocus: handleInputFocus,
-            onBlur: handleInputBlur,
-            onContentSizeChange: handleInputContentSizeChange,
-            onSelectionChange: mentionComposer.handleSelectionChange,
-            mentions: mentionComposer.mentions,
-            isInputFocused: isInputFocused,
-            isMultilineInput: isMultilineInput,
-            inputRef: inputRef,
-            onEmojiPress: handleToggleSticker,
-            onSuggestPress: hasBotMenuOptions ? handleOpenBotMenu : undefined,
-            activePanelType: activePanelType
-          }), /*#__PURE__*/_jsx(KContainer.Touchable, {
-            onPress: compose.isUploading ? undefined : handleSend,
-            pointerEvents: compose.isUploading ? 'none' : 'auto',
-            width: 40,
-            height: 40,
-            center: true,
-            br: "round",
-            background: compose.isUploading ? KColors.palette.primary.w100 : KColors.palette.primary.w400,
-            marginL: "0.75rem",
-            opacity: compose.isUploading ? 0.25 : 1,
-            children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
-              name: "send-b",
-              size: 20,
-              color: KColors.white
-            })
-          })]
-        })]
-      })]
-    });
-  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(KeyboardStickyView, {
       ref: composerRef,
@@ -567,37 +181,14 @@ export const ChatComposer = /*#__PURE__*/memo(({
         opened: insets.bottom
       },
       children: content
-    }), /*#__PURE__*/_jsx(KContainer.VisibleView, {
+    }), /*#__PURE__*/_jsx(ChatComposerAccessorySlot, {
       visible: !isDisableCompose && !isNewBotConversation,
-      children: /*#__PURE__*/_jsxs(Reanimated.View, {
-        style: [styles.accessorySlot, accessorySlotStyle],
-        pointerEvents: isAttachmentOpen ? 'auto' : 'none',
-        children: [activePanelType === 'attachment' && /*#__PURE__*/_jsx(ChatAttachmentPanel, {
-          actions: resolvedPannelActons
-        }), activePanelType === 'sticker' && /*#__PURE__*/_jsx(StickerPicker, {
-          onSelectSticker: handleStickerSelect
-        })]
-      })
+      accessorySlotStyle: accessorySlotStyle,
+      isAttachmentOpen: isAttachmentOpen,
+      activePanelType: activePanelType,
+      pannelActions: resolvedPannelActons
     })]
   });
 });
 ChatComposer.displayName = 'ChatComposer';
-const styles = StyleSheet.create({
-  accessorySlot: {
-    overflow: 'hidden',
-    backgroundColor: KColors.palette.gray.w25
-  },
-  inputRowWrapper: {
-    position: 'relative'
-  },
-  // Floats above the input row without going through the accessorySlot
-  // (attachment/sticker) render path — that slot intentionally takes over
-  // the keyboard area, which the mention picker must not do (finding #5).
-  mentionPanel: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: '100%'
-  }
-});
 //# sourceMappingURL=ChatComposer.js.map