@droppii-org/chat-mobile 0.2.107 → 0.2.108

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

@@ -1,79 +1,32 @@
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  type ReactNode,
-  type RefObject,
-} from 'react';
-import {
-  Keyboard,
-  Platform,
-  StyleSheet,
-  type LayoutChangeEvent,
-  type View,
-} from 'react-native';
-import { debounce } from 'lodash';
-import Reanimated from 'react-native-reanimated';
+import { memo, useCallback, useMemo, type RefObject } from 'react';
+import type { LayoutChangeEvent, View } from 'react-native';
 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';
-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 { PeerType } from '@droppii/openim-rn-client-sdk';
 
-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 type { ComposerPanelController, DChatPannelAction } from './types';
 import { useChatComposerState } from './hooks/useChatComposerState';
-import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
-import { useChatDetailContext } from '../../context/ChatDetailContext';
-import { trans } from '../../translation';
+import { useComposerPanels } from './hooks/useComposerPanels';
+import { useComposerSend } from './hooks/useComposerSend';
+import { useComposerBotMenu } from './hooks/useComposerBotMenu';
+import { useComposerPanelActions } from './hooks/useComposerPanelActions';
+import { useMentionComposer } from './hooks/useMentionComposer';
 import {
-  useCloseSupportSession,
-  useResetFlow,
-  useRunFlow,
-} from '../../hooks/flows/useFlow';
-import { ReactFlowsNodeTypes, type InputButtonItem } from '../../types/flows';
-import { DEFAULT_BUTTON_ID, isContextButton } from '../../utils/flows';
-import { DFlowState } from '../../types/chat';
-import { useAttachmentMapping } from './hooks/useAttachmentMapping';
-import type { AttachmentType } from '../../types/attachment';
+  ChatComposerStatusBanner,
+  getComposerStatusVariant,
+} from './components/ChatComposerStatusBanner';
+import { ChatComposerInputArea } from './components/ChatComposerInputArea';
+import { ChatComposerAccessorySlot } from './components/ChatComposerAccessorySlot';
+import { useChatDetailContext } from '../../context/ChatDetailContext';
+import { ReactFlowsNodeTypes } from '../../types/flows';
 import { useChatCompose } from '../../hooks/useChatCompose';
 import { useInputStateBroadcast } from '../../hooks/useInputStateBroadcast';
-import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
-import { useSendMessage } from '../../hooks/message/useSendMessage';
-import { openBotMenuSheet } from './BotMenuSheet';
-import { UIUtils } from '../../utils/UIUtils';
-import { PeerType } from '@droppii/openim-rn-client-sdk';
 import { useCanSendMessage } from '../../hooks/useGroupPermission';
 import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
-import { useMentionComposer } from './hooks/useMentionComposer';
-import { MentionSuggestionList } from './components/MentionSuggestionList';
 import { createOpenIMMentionSearchSource } from '../../services/mentionSearch';
-import {
-  serializeMentionsForSend,
-  MAX_AT_USER_COUNT,
-} from '../../utils/mentionSerializer';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -83,6 +36,10 @@ interface ChatComposerInternalProps {
   onComposerLayout?: (event: LayoutChangeEvent) => void;
   onPressJoinGroup?: () => void;
   isJoiningGroup?: boolean;
+  /** @internal Filled with the panel controller for tap-outside dismiss. */
+  panelControllerRef?: RefObject<ComposerPanelController | null>;
+  /** @internal Reports whether the attachment/sticker panel is open. */
+  onPanelOpenChange?: (open: boolean) => void;
 }
 
 export const ChatComposer = memo(
@@ -94,23 +51,16 @@ export const ChatComposer = memo(
     onComposerLayout,
     onPressJoinGroup,
     isJoiningGroup = false,
+    panelControllerRef,
+    onPanelOpenChange,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
     const isDisableCompose = isComposeDisabled;
     const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
 
-    const {
-      isBotConversation,
-      conversation,
-      conversationFlow,
-      conversationFlowMainMenu,
-      flowState,
-    } = useChatDetailContext();
+    const { isBotConversation, conversation, 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, notifyStoppedTyping } = useInputStateBroadcast(
       conversation?.conversationID
@@ -131,8 +81,8 @@ export const ChatComposer = memo(
       setIsAttachmentOpen,
       isInputFocused,
       setIsInputFocused,
-      setIsInputWrapped,
       isMultilineInput,
+      handleInputContentSizeChange,
       inputRef,
     } = useChatComposerState(compose.text);
 
@@ -158,176 +108,72 @@ export const ChatComposer = memo(
       inputRef,
     });
 
-    const attachmentPanelHeight = useMemo(
-      () => getAttachmentPanelHeight(DEFAULT_PANNEL_ACTIONS.length),
-      []
-    );
+    const isNewBotConversation =
+      isBotConversation &&
+      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
+      isEmptyMessage;
 
-    const panelHeight =
-      activePanelType === 'sticker'
-        ? STICKER_PICKER_HEIGHT
-        : attachmentPanelHeight;
+    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,
     });
 
-    // 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
-    }, [
+    const handleSend = useComposerSend({
       compose,
       isSendMessageAllowed,
       sendDeniedReason,
-      mentionComposer.mentions,
-      mentionComposer.clear,
+      mentions: mentionComposer.mentions,
+      clearMentions: mentionComposer.clear,
       notifyStoppedTyping,
       inputRef,
-    ]);
+    });
+
+    const {
+      hasBotMenuOptions,
+      handleOpenBotMenu,
+      onStartConversationFlow,
+      isRunFlowPending,
+    } = useComposerBotMenu();
+
+    const resolvedPannelActons = useComposerPanelActions({
+      pannelActions,
+      addImages: compose.addImages,
+      addFiles: compose.addFiles,
+    });
 
     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);
+        closeActivePanel(yieldingCloseMode);
       }
     }, [
-      closeAttachment,
+      closeActivePanel,
       isAttachmentOpen,
-      activePanelType,
+      yieldingCloseMode,
       setIsInputFocused,
-      setActivePanelType,
-    ]);
-
-    const handleToggleAttachment = useCallback(() => {
-      mentionComposer.closeMentionPanel();
-      if (activePanelType === 'sticker') {
-        // switch from sticker to attachment
-        setActivePanelType('attachment');
-        openWithHeight(attachmentPanelHeight);
-        return;
-      }
-      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,
     ]);
 
     const handleInputBlur = useCallback(() => {
@@ -346,380 +192,35 @@ export const ChatComposer = memo(
       [notifyTyping, mentionComposer]
     );
 
-    const handleInputContentSizeChange = useCallback(
-      (event: { nativeEvent: { contentSize: { height: number } } }) => {
-        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: InputButtonItem) => {
-        if (item.id === DEFAULT_BUTTON_ID) {
-          resetFlow();
-          return;
-        }
-        runFlow({
-          actionId: item.id,
-          groupId: '',
-          childId: '',
-          plainText: item.label,
-        });
-      },
-      [runFlow, resetFlow]
-    );
-
-    const handleSelectBotMenuOption = useCallback(
-      (item: InputButtonItem) => {
-        if (flowState === DFlowState.CS) {
-          UIUtils.popup.open({
-            header: {
-              title: { text: trans('chat:end_support_session_title') },
-              alignment: 'center',
-            },
-            body: {
-              renderContent: () => (
-                <KContainer.View padding={'1rem'}>
-                  <KLabel.RichText
-                    typo="TextMdNormal"
-                    textAlign="center"
-                    color={KColors.gray.dark}
-                    richTextOptions={{
-                      i18nKey: trans('chat:end_support_session_desc'),
-                      components: {
-                        bold: (
-                          <KLabel.Text
-                            typo="TextMdBold"
-                            color={KColors.gray.dark}
-                          />
-                        ),
-                      },
-                    }}
-                  />
-                </KContainer.View>
-              ),
-            },
-            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 content = statusVariant ? (
+      <ChatComposerStatusBanner
+        variant={statusVariant}
+        isRunFlowPending={isRunFlowPending}
+        onStartConversationFlow={onStartConversationFlow}
+        isJoiningGroup={isJoiningGroup}
+        onPressJoinGroup={onPressJoinGroup}
+        sendDeniedReason={sendDeniedReason}
+      />
+    ) : (
+      <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 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: StickerItem) => {
-        sendMessage({ sticker });
-      },
-      [sendMessage]
-    );
-
-    const attachments = useAttachmentMapping({
-      selectedImages: compose.selectedImages,
-      selectedFiles: compose.selectedFiles,
-    });
-
-    const onRemove = useCallback(
-      (type: AttachmentType, data: unknown) => {
-        if (type === 'file') return compose.removeFile(data as string);
-        return compose.removeImage(data as number);
-      },
-      [compose]
-    );
-
-    let content: ReactNode;
-    const isNewBotConversation =
-      isBotConversation &&
-      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
-      isEmptyMessage;
-
-    if (isDisableCompose && !isGroupConversation) {
-      content = (
-        <KContainer.View row alignItems justifyContent>
-          <KContainer.View marginR="0.25rem">
-            <KImage.VectorIcons
-              name="info-circle-o"
-              size={16}
-              color={KColors.palette.gray.w600}
-            />
-          </KContainer.View>
-          <KLabel.Text typo="TextXsNormal">
-            {trans('chat:compose_disabled_seller_inactive')}
-          </KLabel.Text>
-        </KContainer.View>
-      );
-    } else if (isNewBotConversation) {
-      content = (
-        <KContainer.View padding={'1.5rem'} paddingB={0}>
-          <KButton.Solid
-            size="md"
-            label={trans('start')}
-            stretch
-            icon={{ vectorName: 'chat-square-o', size: 20 }}
-            loading={isPending}
-            onPress={onStartConversationFlow}
-          />
-        </KContainer.View>
-      );
-    } else if (isNotInGroup) {
-      content = (
-        <KContainer.View
-          paddingH="0.75rem"
-          justifyContent="center"
-          brTW={1}
-          brTC={KColors.border.light}
-        >
-          <KLabel.Text
-            typo="TextSmNormal"
-            textAlign="center"
-            paddingV={'0.75rem'}
-          >
-            {trans('group:not_in_group')}
-          </KLabel.Text>
-          <KButton.Solid
-            size="md"
-            label={trans('group:join')}
-            stretch
-            loading={isJoiningGroup}
-            onPress={onPressJoinGroup}
-          />
-        </KContainer.View>
-      );
-    } else if (!isSendMessageAllowed) {
-      content = (
-        <KContainer.View row alignItems justifyContent paddingT={'1rem'}>
-          <KContainer.View marginR="0.25rem">
-            <KImage.VectorIcons
-              name="info-circle-o"
-              size={16}
-              color={KColors.palette.gray.w600}
-            />
-          </KContainer.View>
-          <KLabel.Text typo="TextXsNormal">{sendDeniedReason}</KLabel.Text>
-        </KContainer.View>
-      );
-    } else {
-      content = (
-        <KContainer.View background={'#F9F9FA'}>
-          <ChatCurrentQuotedMessage />
-          <KContainer.VisibleView
-            visible={conversation?.peerType === PeerType.Bot}
-          >
-            <ChatQuickActions
-              visible
-              actions={DEFAULT_QUICK_ACTIONS}
-              onActionPress={(action) =>
-                console.log('[ChatComposer] quick action:', action.id)
-              }
-            />
-          </KContainer.VisibleView>
-          {compose.showLinkPreview && (
-            <ChatLinkPreview
-              metadata={compose.urlMetadata}
-              isLoading={compose.isMetadataLoading}
-              onDismiss={compose.dismissPreview}
-            />
-          )}
-
-          <AttachmentPreview
-            visible={
-              compose.isImagePreviewVisible || compose.isFilePreviewVisible
-            }
-            attachments={attachments}
-            onRemove={onRemove}
-          />
-
-          <KContainer.View style={styles.inputRowWrapper}>
-            <KContainer.VisibleView visible={mentionComposer.isPanelOpen}>
-              <KContainer.View style={styles.mentionPanel}>
-                <MentionSuggestionList
-                  suggestions={mentionComposer.suggestions}
-                  isSearching={mentionComposer.isSearching}
-                  isLoadingMore={mentionComposer.isLoadingMore}
-                  hasMore={mentionComposer.hasMore}
-                  onLoadMore={mentionComposer.loadMore}
-                  onSelect={mentionComposer.selectSuggestion}
-                />
-              </KContainer.View>
-            </KContainer.VisibleView>
-
-            <KContainer.View
-              row
-              alignItems
-              paddingH="0.75rem"
-              paddingT="0.75rem"
-              paddingB="0.75rem"
-              style={inputRowStyle}
-            >
-              <KContainer.Touchable
-                onPress={handleToggleAttachment}
-                center
-                br="round"
-              >
-                <KImage.VectorIcons
-                  name={
-                    activePanelType === 'attachment'
-                      ? 'close-circle-b'
-                      : 'plus-circle-o'
-                  }
-                  size={24}
-                  color={
-                    activePanelType === 'attachment'
-                      ? KColors.palette.primary.w400
-                      : KColors.palette.gray.w600
-                  }
-                />
-              </KContainer.Touchable>
-
-              <ChatMessageInput
-                value={compose.text}
-                placeholder="Nhập tin nhắn..."
-                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}
-              />
-
-              <KContainer.Touchable
-                onPress={compose.isUploading ? undefined : handleSend}
-                pointerEvents={compose.isUploading ? 'none' : 'auto'}
-                width={40}
-                height={40}
-                center
-                br="round"
-                background={
-                  compose.isUploading
-                    ? KColors.palette.primary.w100
-                    : KColors.palette.primary.w400
-                }
-                marginL="0.75rem"
-                opacity={compose.isUploading ? 0.25 : 1}
-              >
-                <KImage.VectorIcons
-                  name="send-b"
-                  size={20}
-                  color={KColors.white}
-                />
-              </KContainer.Touchable>
-            </KContainer.View>
-          </KContainer.View>
-        </KContainer.View>
-      );
-    }
-
     return (
       <>
         <KeyboardStickyView
@@ -729,43 +230,16 @@ export const ChatComposer = memo(
         >
           {content}
         </KeyboardStickyView>
-        <KContainer.VisibleView
+        <ChatComposerAccessorySlot
           visible={!isDisableCompose && !isNewBotConversation}
-        >
-          <Reanimated.View
-            style={[styles.accessorySlot, accessorySlotStyle]}
-            pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
-          >
-            {activePanelType === 'attachment' && (
-              <ChatAttachmentPanel actions={resolvedPannelActons} />
-            )}
-            {activePanelType === 'sticker' && (
-              <StickerPicker onSelectSticker={handleStickerSelect} />
-            )}
-          </Reanimated.View>
-        </KContainer.VisibleView>
+          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%',
-  },
-});