@droppii-org/chat-mobile 0.2.107 → 0.2.108

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

@@ -23,6 +23,8 @@ import { clearExpandableTextCache } from '../../hooks/useExpandableText';
 import ChatDetailHeader from './ChatDetailHeader';
 import { ChatListLegend } from './ChatListLegend';
 import { ChatComposer } from './ChatComposer';
+import { useComposerPanelDismiss } from './hooks/useComposerPanelDismiss';
+import { TimelinePressGuardProvider } from '../../context/TimelinePressGuardContext';
 import { shouldShowAddMember } from './conversationHeader.utils';
 import type { ChatDetailProps } from './types';
 import { normalizeUrl } from '../../utils/url';
@@ -191,6 +193,15 @@ const ChatDetail = memo(
       [onPressUrl]
     );
 
+    const {
+      panelControllerRef,
+      isComposerPanelOpen,
+      onComposerPanelOpenChange,
+      dismissAreaTouchProps,
+      notifyScrollBeginDrag,
+      shouldSwallowPress,
+    } = useComposerPanelDismiss();
+
     const handleMessageLongPress = useCallback<MessageToolboxShowFn>(
       (message, rect, groupPosition) => {
         messageToolboxRef.current?.show(message, rect, groupPosition);
@@ -249,26 +260,31 @@ const ChatDetail = memo(
           onPress={handlePressPinnedMessageBar}
         />
 
-        <ChatListLegend
-          messages={messages}
-          conversationId={conversationId}
-          customMessageItemFactory={customMessageItemFactory}
-          isLoading={initLoading}
-          onLoadMoreOld={getMoreOldMessages}
-          hasMoreOld={hasMoreOld}
-          moreOldLoading={moreOldLoading}
-          onLoadMoreNew={getMoreNewMessages}
-          hasMoreNew={hasMoreNew}
-          moreNewLoading={moreNewLoading}
-          onMediaPress={handleMediaPress}
-          onPressUrl={handlePressUrl}
-          onLongPress={handleMessageLongPress}
-          listRef={listRef}
-          freeze={freeze}
-          scrollMessageToEnd={scrollMessageToEnd}
-          keyboardOffset={insets.bottom}
-          renderConversationViewHeader={renderConversationViewHeader}
-        />
+        <TimelinePressGuardProvider value={shouldSwallowPress}>
+          <ChatListLegend
+            messages={messages}
+            conversationId={conversationId}
+            customMessageItemFactory={customMessageItemFactory}
+            isLoading={initLoading}
+            onLoadMoreOld={getMoreOldMessages}
+            hasMoreOld={hasMoreOld}
+            moreOldLoading={moreOldLoading}
+            onLoadMoreNew={getMoreNewMessages}
+            hasMoreNew={hasMoreNew}
+            moreNewLoading={moreNewLoading}
+            onMediaPress={handleMediaPress}
+            onPressUrl={handlePressUrl}
+            onLongPress={handleMessageLongPress}
+            listRef={listRef}
+            freeze={freeze}
+            scrollMessageToEnd={scrollMessageToEnd}
+            keyboardOffset={insets.bottom}
+            renderConversationViewHeader={renderConversationViewHeader}
+            dismissAreaTouchProps={dismissAreaTouchProps}
+            isComposerPanelOpen={isComposerPanelOpen}
+            onDismissAreaScrollBeginDrag={notifyScrollBeginDrag}
+          />
+        </TimelinePressGuardProvider>
 
         <ChatComposer
           isEmptyMessage={messages?.length === 0}
@@ -276,6 +292,8 @@ const ChatDetail = memo(
           isComposeDisabled={isComposeDisabled}
           onPressJoinGroup={handlePressJoinGroup}
           isJoiningGroup={isJoiningGroup}
+          panelControllerRef={panelControllerRef}
+          onPanelOpenChange={onComposerPanelOpenChange}
         />
 
         <MediaViewerModal ref={mediaViewerRef} />

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

@@ -69,6 +69,11 @@ import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
 import { ChatTypingIndicator } from './ChatTypingIndicator';
+import type { DismissAreaTouchProps } from './hooks/useComposerPanelDismiss';
+import { useGuardedPress } from '../../hooks/useGuardedPress';
+import { useDismissKeyboardFirst } from '../../hooks/useDismissKeyboardFirst';
+import { useTimelinePressGuard } from '../../context/TimelinePressGuardContext';
+import { perfMark } from '../../utils/perf-marker';
 
 // Cluster spacing: a wide gap after the message that closes a cluster, a tight
 // one between messages inside it. These override the flat margin on the row
@@ -135,6 +140,12 @@ interface ChatListLegendInternalProps extends ChatListProps {
     closeKeyboard: boolean;
   }) => Promise<void>;
   keyboardOffset: number;
+  // Tap-outside dismiss of the composer panel (useComposerPanelDismiss).
+  // Internal — not part of the public ChatListProps.
+  dismissAreaTouchProps?: DismissAreaTouchProps;
+  // While true the content is non-hittable: taps only dismiss the panel.
+  isComposerPanelOpen?: boolean;
+  onDismissAreaScrollBeginDrag?: () => void;
 }
 
 export const ChatListLegend = memo(
@@ -147,8 +158,8 @@ export const ChatListLegend = memo(
     hasMoreOld,
     onLoadMoreNew,
     hasMoreNew,
-    onMediaPress,
-    onPressUrl,
+    onMediaPress: onMediaPressProp,
+    onPressUrl: onPressUrlProp,
     onLongPress,
     listRef,
     freeze,
@@ -156,6 +167,9 @@ export const ChatListLegend = memo(
     keyboardOffset,
     isLoading,
     renderConversationViewHeader,
+    dismissAreaTouchProps,
+    isComposerPanelOpen = false,
+    onDismissAreaScrollBeginDrag,
   }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
@@ -177,7 +191,19 @@ export const ChatListLegend = memo(
       [messages, isBotConversation, currentUserId]
     );
 
-    const { retryMessage } = useSendMessage();
+    // True for presses of a touch that began with the panel open — covers the
+    // render gap before `isComposerPanelOpen` reaches the list.
+    const shouldSwallowPress = useTimelinePressGuard();
+    const { retryMessage: retryMessageRaw } = useSendMessage();
+    const retryMessage = useGuardedPress(retryMessageRaw, shouldSwallowPress);
+    const onMediaPress = useGuardedPress(
+      useDismissKeyboardFirst(onMediaPressProp),
+      shouldSwallowPress
+    );
+    const onPressUrl = useGuardedPress(
+      useDismissKeyboardFirst(onPressUrlProp),
+      shouldSwallowPress
+    );
 
     const lastMessageId = useMemo(() => {
       const last = messages[messages.length - 1];
@@ -267,6 +293,7 @@ export const ChatListLegend = memo(
 
     const handleMessageLongPress = useCallback(
       (messageId: string, message: MessageItem) => {
+        if (shouldSwallowPress()) return;
         const node = rowRefsMap.current.get(messageId);
         node?.measureInWindow((x, y, width, height) => {
           if (x == null || y == null || width == null || height == null) return;
@@ -274,23 +301,29 @@ export const ChatListLegend = memo(
           onLongPress?.(message, { x, y, width, height }, groupPosition);
         });
       },
-      [onLongPress, messageDataMap]
+      [onLongPress, messageDataMap, shouldSwallowPress]
     );
 
     const onRunFlow = useCallback(
       (payload: IRunConversationFlowPayload) => {
+        if (shouldSwallowPress()) return;
         runFlow(payload);
       },
-      [runFlow]
+      [runFlow, shouldSwallowPress]
     );
 
     const onResetFlow = useCallback(() => {
+      if (shouldSwallowPress()) return;
       resetFlow();
-    }, [resetFlow]);
+    }, [resetFlow, shouldSwallowPress]);
 
-    const handleMessagePress = useCallback((messageId: string) => {
-      setRevealedMessageId((prev) => (prev === messageId ? null : messageId));
-    }, []);
+    const handleMessagePress = useCallback(
+      (messageId: string) => {
+        if (shouldSwallowPress()) return;
+        setRevealedMessageId((prev) => (prev === messageId ? null : messageId));
+      },
+      [shouldSwallowPress]
+    );
 
     const handleRenderConversationViewHeader = useCallback(() => {
       if (!renderConversationViewHeader) return null;
@@ -554,6 +587,7 @@ export const ChatListLegend = memo(
       // load-more the user never asked for.
       if (!hasUserScrolledRef.current) return;
       if (hasMoreOld && !useMessageStore.getState().moreOldLoading) {
+        perfMark('history_start_reached');
         onLoadMoreOld?.(true);
       }
     }, [hasMoreOld, onLoadMoreOld]);
@@ -567,7 +601,8 @@ export const ChatListLegend = memo(
 
     const handleScrollBeginDrag = useCallback(() => {
       hasUserScrolledRef.current = true;
-    }, []);
+      onDismissAreaScrollBeginDrag?.();
+    }, [onDismissAreaScrollBeginDrag]);
 
     const handleScroll = useCallback(
       (e: any) => {
@@ -649,8 +684,11 @@ export const ChatListLegend = memo(
       () => [
         styles.content,
         { paddingBottom: CONTENT_PADDING_VERTICAL + keyboardInset },
+        // Composer panel open: bubbles stop receiving touches (a tap only
+        // dismisses the panel) while the scroll view itself still scrolls.
+        isComposerPanelOpen && styles.contentNotHittable,
       ],
-      [keyboardInset]
+      [keyboardInset, isComposerPanelOpen]
     );
 
     const animatedButtonStyle = useAnimatedStyle(() => ({
@@ -866,6 +904,7 @@ export const ChatListLegend = memo(
     const handleListLoad = useCallback(() => {
       if (hasCorrectedInitialPaddingRef.current) return;
       hasCorrectedInitialPaddingRef.current = true;
+      perfMark('history_list_loaded');
 
       scrollMessageToEnd({ animated: false, closeKeyboard: false });
     }, [scrollMessageToEnd]);
@@ -942,66 +981,75 @@ export const ChatListLegend = memo(
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
         {handleRenderConversationViewHeader()}
-        <KeyboardAwareLegendList
-          ref={listRef}
-          data={messages}
-          renderItem={renderItem}
-          // Deliberate lower bound (not a best-guess average) — see the
-          // comment above `hasCorrectedInitialPaddingRef`. A single-line
-          // bubble floors out around 38-44px, so this stays safely under it.
-          estimatedItemSize={36}
-          getItemType={getItemType}
-          getFixedItemSize={getFixedItemSize}
-          keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems
-          extraData={listExtraData}
-          alignItemsAtEnd
-          alwaysRender={{
-            top: 10,
-          }}
-          maintainScrollAtEnd
-          maintainVisibleContentPosition={maintainVisiblePositionConfig}
-          // See the comment above `maintainVisiblePositionConfig` — this is
-          // what keeps a history prepend's anchor item mounted through a slow
-          // fetch instead of the default 250px window losing it.
-          drawDistance={800}
-          freeze={freeze}
-          keyboardOffset={DISABLE_NATIVE_KEYBOARD_INSET}
-          // iOS only. Left on, React Native recomputes and applies its own
-          // `contentInset` every time the keyboard moves — measured here as
-          // {top: 59, bottom: keyboardHeight}, both wrong. The bottom value
-          // over-insets by the safe area, and the phantom top one is worse:
-          // iOS rests a scroll view at `-contentInset.top`.
-          // That resting offset is what put the content 59pt low and hid the
-          // last message behind the composer the moment a touch let UIKit
-          // re-clamp. legend-list's own KeyboardAvoidingLegendList disables
-          // this for the same reason.
-          automaticallyAdjustContentInsets={false}
-          // No scroll shift from the library either — the content padding
-          // above is the single compensator. Measured with it on: a 302px
-          // keyboard produced a 604px lift, exactly double.
-          keyboardLiftBehavior="never"
-          scrollEventThrottle={16}
-          onScroll={handleScroll}
-          onScrollBeginDrag={handleScrollBeginDrag}
-          onLoad={handleListLoad}
-          contentContainerStyle={contentContainerStyle}
-          scrollIndicatorInsets={{ right: 1 }}
-          ListHeaderComponent={
-            <LegendChatLoadEarlier isLoading={moreOldLoading} />
-          }
-          onStartReached={handleStartReached}
-          // LegendList only re-fires onStartReached after scrolling away from
-          // the threshold by 1.3x and back. At 0.5 that distance exceeded a
-          // short conversation's whole scrollable range, so the mount-time
-          // firing we suppress in handleStartReached "used up" the only
-          // trigger. 0.3 keeps that reset distance safely under a
-          // ~1.5-screen conversation; shorter ones can still hit it.
-          onStartReachedThreshold={0.2}
-          onEndReached={handleEndReached}
-          onEndReachedThreshold={0.2}
-          initialScrollAtEnd
-        />
+        <KContainer.View flex {...dismissAreaTouchProps}>
+          <KeyboardAwareLegendList
+            ref={listRef}
+            data={messages}
+            renderItem={renderItem}
+            // Deliberate lower bound (not a best-guess average) — see the
+            // comment above `hasCorrectedInitialPaddingRef`. A single-line
+            // bubble floors out around 38-44px, so this stays safely under it.
+            estimatedItemSize={36}
+            getItemType={getItemType}
+            getFixedItemSize={getFixedItemSize}
+            keyExtractor={(item) =>
+              String(item.clientMsgID || item.serverMsgID)
+            }
+            recycleItems
+            extraData={listExtraData}
+            alignItemsAtEnd
+            alwaysRender={{
+              top: 10,
+            }}
+            maintainScrollAtEnd
+            maintainVisibleContentPosition={maintainVisiblePositionConfig}
+            // See the comment above `maintainVisiblePositionConfig` — this is
+            // what keeps a history prepend's anchor item mounted through a slow
+            // fetch instead of the default 250px window losing it.
+            drawDistance={800}
+            freeze={freeze}
+            keyboardOffset={DISABLE_NATIVE_KEYBOARD_INSET}
+            // iOS only. Left on, React Native recomputes and applies its own
+            // `contentInset` every time the keyboard moves — measured here as
+            // {top: 59, bottom: keyboardHeight}, both wrong. The bottom value
+            // over-insets by the safe area, and the phantom top one is worse:
+            // iOS rests a scroll view at `-contentInset.top`.
+            // That resting offset is what put the content 59pt low and hid the
+            // last message behind the composer the moment a touch let UIKit
+            // re-clamp. legend-list's own KeyboardAvoidingLegendList disables
+            // this for the same reason.
+            automaticallyAdjustContentInsets={false}
+            // No scroll shift from the library either — the content padding
+            // above is the single compensator. Measured with it on: a 302px
+            // keyboard produced a 604px lift, exactly double.
+            keyboardLiftBehavior="never"
+            // With the default 'never' the first tap while the keyboard is up
+            // only dismisses it, so "Xem thêm", links and buttons don't fire.
+            // 'handled': a touchable consumes the tap and the keyboard stays;
+            // a tap on anything else still dismisses it.
+            keyboardShouldPersistTaps="handled"
+            scrollEventThrottle={16}
+            onScroll={handleScroll}
+            onScrollBeginDrag={handleScrollBeginDrag}
+            onLoad={handleListLoad}
+            contentContainerStyle={contentContainerStyle}
+            scrollIndicatorInsets={{ right: 1 }}
+            ListHeaderComponent={
+              <LegendChatLoadEarlier isLoading={moreOldLoading} />
+            }
+            onStartReached={handleStartReached}
+            // LegendList only re-fires onStartReached after scrolling away from
+            // the threshold by 1.3x and back. At 0.5 that distance exceeded a
+            // short conversation's whole scrollable range, so the mount-time
+            // firing we suppress in handleStartReached "used up" the only
+            // trigger. 0.3 keeps that reset distance safely under a
+            // ~1.5-screen conversation; shorter ones can still hit it.
+            onStartReachedThreshold={0.2}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={0.2}
+            initialScrollAtEnd
+          />
+        </KContainer.View>
         <Animated.View
           style={[styles.scrollToBottomButton, animatedButtonStyle]}
         >
@@ -1033,6 +1081,9 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
   },
+  contentNotHittable: {
+    pointerEvents: 'none',
+  },
   header: {
     position: 'absolute',
     top: 0,

package/src/screens/chat-detail/components/ChatComposerAccessorySlot.tsx

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { StyleSheet } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { KContainer, KColors } from '@droppii/libs';
+
+import { ChatAttachmentPanel } from '../ChatAttachmentPanel';
+import { StickerPicker } from '../../../components/StickerPicker';
+import { useSendMessage } from '../../../hooks/message/useSendMessage';
+import type { StickerItem } from '../../../types/sticker';
+import type { ActivePanelType } from '../hooks/useChatComposerState';
+import type { DChatPannelAction } from '../types';
+
+interface ChatComposerAccessorySlotProps {
+  visible: boolean;
+  accessorySlotStyle: any;
+  isAttachmentOpen: boolean;
+  activePanelType: ActivePanelType;
+  pannelActions: DChatPannelAction[];
+}
+
+// The keyboard-area slot below the composer that hosts the attachment
+// panel or the sticker picker; its height is driven by useComposerPanels.
+export const ChatComposerAccessorySlot = ({
+  visible,
+  accessorySlotStyle,
+  isAttachmentOpen,
+  activePanelType,
+  pannelActions,
+}: ChatComposerAccessorySlotProps) => {
+  const { sendMessage } = useSendMessage();
+
+  const handleStickerSelect = useCallback(
+    (sticker: StickerItem) => {
+      sendMessage({ sticker });
+    },
+    [sendMessage]
+  );
+
+  return (
+    <KContainer.VisibleView visible={visible}>
+      <Reanimated.View
+        style={[styles.accessorySlot, accessorySlotStyle]}
+        pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+      >
+        {activePanelType === 'attachment' && (
+          <ChatAttachmentPanel actions={pannelActions} />
+        )}
+        {activePanelType === 'sticker' && (
+          <StickerPicker onSelectSticker={handleStickerSelect} />
+        )}
+      </Reanimated.View>
+    </KContainer.VisibleView>
+  );
+};
+
+const styles = StyleSheet.create({
+  accessorySlot: {
+    overflow: 'hidden',
+    backgroundColor: KColors.palette.gray.w25,
+  },
+});

package/src/screens/chat-detail/components/ChatComposerInputArea.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useMemo, type RefObject } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KColors, KImage } from '@droppii/libs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+
+import { ChatQuickActions } from '../ChatQuickActions';
+import { ChatLinkPreview } from '../ChatLinkPreview';
+import { ChatCurrentQuotedMessage } from '../ChatCurrentQuotedMessage';
+import { ChatMessageInput } from './ChatMessageInput';
+import { MentionSuggestionList } from './MentionSuggestionList';
+import { AttachmentPreview } from '../../../components/AttachmentPreview';
+import { DEFAULT_QUICK_ACTIONS } from '../constants';
+import { useChatDetailContext } from '../../../context/ChatDetailContext';
+import { useAttachmentMapping } from '../hooks/useAttachmentMapping';
+import type { ActivePanelType } from '../hooks/useChatComposerState';
+import type { useMentionComposer } from '../hooks/useMentionComposer';
+import type { useChatCompose } from '../../../hooks/useChatCompose';
+import type { AttachmentType } from '../../../types/attachment';
+
+interface ChatComposerInputAreaProps {
+  compose: ReturnType<typeof useChatCompose>;
+  mentionComposer: ReturnType<typeof useMentionComposer>;
+  activePanelType: ActivePanelType;
+  isAttachmentOpen: boolean;
+  isInputFocused: boolean;
+  isMultilineInput: boolean;
+  inputRef: RefObject<any>;
+  onToggleAttachment: () => void;
+  onToggleSticker: () => void;
+  onChangeText: (text?: string) => void;
+  onInputFocus: () => void;
+  onInputBlur: () => void;
+  onInputContentSizeChange: (event: {
+    nativeEvent: { contentSize: { height: number } };
+  }) => void;
+  onOpenBotMenu?: () => void;
+  onSend: () => void;
+}
+
+// The composer's normal state: quoted message, previews, mention picker and
+// the input row (attachment toggle / input / send).
+export const ChatComposerInputArea = ({
+  compose,
+  mentionComposer,
+  activePanelType,
+  isAttachmentOpen,
+  isInputFocused,
+  isMultilineInput,
+  inputRef,
+  onToggleAttachment,
+  onToggleSticker,
+  onChangeText,
+  onInputFocus,
+  onInputBlur,
+  onInputContentSizeChange,
+  onOpenBotMenu,
+  onSend,
+}: ChatComposerInputAreaProps) => {
+  const insets = useSafeAreaInsets();
+  const { conversation } = useChatDetailContext();
+
+  const inputRowStyle = useMemo(
+    () => ({ paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12 }),
+    [insets.bottom, isAttachmentOpen]
+  );
+
+  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]
+  );
+
+  return (
+    <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={onToggleAttachment} 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={onChangeText}
+            onFocus={onInputFocus}
+            onBlur={onInputBlur}
+            onContentSizeChange={onInputContentSizeChange}
+            onSelectionChange={mentionComposer.handleSelectionChange}
+            mentions={mentionComposer.mentions}
+            isInputFocused={isInputFocused}
+            isMultilineInput={isMultilineInput}
+            inputRef={inputRef}
+            onEmojiPress={onToggleSticker}
+            onSuggestPress={onOpenBotMenu}
+            activePanelType={activePanelType}
+          />
+
+          <KContainer.Touchable
+            onPress={compose.isUploading ? undefined : onSend}
+            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>
+  );
+};
+
+const styles = StyleSheet.create({
+  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%',
+  },
+});