@droppii-org/chat-mobile 0.2.43 → 0.2.45

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

@@ -1,7 +1,21 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type LayoutChangeEvent,
+  type View,
+} from 'react-native';
 import { debounce } from 'lodash';
 import Reanimated from 'react-native-reanimated';
+import { KeyboardStickyView } from 'react-native-keyboard-controller';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer, KColors, KImage, KButton, KLabel } from '@droppii/libs';
 
@@ -38,6 +52,8 @@ interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
   pannelActions?: DChatPannelAction[];
   isDisableCompose?: boolean;
+  composerRef?: RefObject<View | null>;
+  onComposerLayout?: (event: LayoutChangeEvent) => void;
 }
 
 export const ChatComposer = memo(
@@ -45,6 +61,8 @@ export const ChatComposer = memo(
     isEmptyMessage = false,
     pannelActions,
     isDisableCompose = false,
+    composerRef,
+    onComposerLayout,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
 
@@ -70,7 +88,6 @@ export const ChatComposer = memo(
 
     const { accessorySlotStyle, toggleAttachmentVisibility, closeAttachment } =
       useChatComposerAnimation({
-        isAttachmentOpen,
         panelHeight,
         onAttachmentOpenChange: setIsAttachmentOpen,
       });
@@ -86,7 +103,7 @@ export const ChatComposer = memo(
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
-      if (isAttachmentOpen) closeAttachment();
+      if (isAttachmentOpen) closeAttachment(true);
     }, [closeAttachment, isAttachmentOpen, setIsInputFocused]);
 
     const handleInputBlur = useCallback(() => {
@@ -177,8 +194,14 @@ export const ChatComposer = memo(
       [compose]
     );
 
+    let content: ReactNode;
+    const isNewBotConversation =
+      isBotConversation &&
+      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
+      isEmptyMessage;
+
     if (isDisableCompose) {
-      return (
+      content = (
         <KContainer.View row alignItems justifyContent>
           <KContainer.View marginR="0.25rem">
             <KImage.VectorIcons
@@ -192,13 +215,8 @@ export const ChatComposer = memo(
           </KLabel.Text>
         </KContainer.View>
       );
-    }
-    if (
-      isBotConversation &&
-      conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
-      isEmptyMessage
-    ) {
-      return (
+    } else if (isNewBotConversation) {
+      content = (
         <KContainer.View padding={'1.5rem'} paddingB={0}>
           <KButton.Solid
             size="md"
@@ -210,102 +228,117 @@ export const ChatComposer = memo(
           />
         </KContainer.View>
       );
-    }
-
-    return (
-      <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
-        <ChatCurrentQuotedMessage />
-        <ChatQuickActions
-          visible
-          actions={DEFAULT_QUICK_ACTIONS}
-          onActionPress={(action) =>
-            console.log('[ChatComposer] quick action:', action.id)
-          }
-        />
-
-        {compose.showLinkPreview && (
-          <ChatLinkPreview
-            metadata={compose.urlMetadata}
-            isLoading={compose.isMetadataLoading}
-            onDismiss={compose.dismissPreview}
+    } else {
+      content = (
+        <KContainer.View background={'#F9F9FA'}>
+          <ChatCurrentQuotedMessage />
+          <ChatQuickActions
+            visible
+            actions={DEFAULT_QUICK_ACTIONS}
+            onActionPress={(action) =>
+              console.log('[ChatComposer] quick action:', action.id)
+            }
           />
-        )}
-
-        <AttachmentPreview
-          visible={
-            compose.isImagePreviewVisible || compose.isFilePreviewVisible
-          }
-          attachments={attachments}
-          onRemove={onRemove}
-        />
-
-        <KContainer.View
-          row
-          alignItems
-          paddingH="0.75rem"
-          paddingT="0.75rem"
-          paddingB="0.75rem"
-          style={inputRowStyle}
-        >
-          <KContainer.Touchable
-            onPress={toggleAttachmentVisibility}
-            center
-            br="round"
-          >
-            <KImage.VectorIcons
-              name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
-              size={24}
-              color={
-                isAttachmentOpen
-                  ? KColors.palette.primary.w400
-                  : KColors.palette.gray.w600
-              }
+
+          {compose.showLinkPreview && (
+            <ChatLinkPreview
+              metadata={compose.urlMetadata}
+              isLoading={compose.isMetadataLoading}
+              onDismiss={compose.dismissPreview}
             />
-          </KContainer.Touchable>
-
-          <ChatMessageInput
-            value={compose.text}
-            placeholder="Nhập tin nhắn..."
-            onChangeText={handleChangeText}
-            onFocus={handleInputFocus}
-            onBlur={handleInputBlur}
-            onContentSizeChange={handleInputContentSizeChange}
-            isInputFocused={isInputFocused}
-            isMultilineInput={isMultilineInput}
-            inputRef={inputRef}
-          />
+          )}
 
-          <KContainer.Touchable
-            onPress={compose.isUploading ? undefined : handleSend}
-            pointerEvents={compose.isUploading ? 'none' : 'auto'}
-            width={40}
-            height={40}
-            center
-            br="round"
-            background={
-              compose.isUploading
-                ? KColors.palette.gray.w400
-                : KColors.palette.primary.w400
+          <AttachmentPreview
+            visible={
+              compose.isImagePreviewVisible || compose.isFilePreviewVisible
             }
-            marginL="0.75rem"
-            opacity={compose.isUploading ? 0.6 : 1}
+            attachments={attachments}
+            onRemove={onRemove}
+          />
+
+          <KContainer.View
+            row
+            alignItems
+            paddingH="0.75rem"
+            paddingT="0.75rem"
+            paddingB="0.75rem"
+            style={inputRowStyle}
           >
-            <KImage.VectorIcons
-              name="send"
-              provider="MaterialCommunityIcons"
-              size={20}
-              color={KColors.white}
+            <KContainer.Touchable
+              onPress={toggleAttachmentVisibility}
+              center
+              br="round"
+            >
+              <KImage.VectorIcons
+                name={isAttachmentOpen ? 'close-circle-o' : 'plus-circle-o'}
+                size={24}
+                color={
+                  isAttachmentOpen
+                    ? 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}
+              isInputFocused={isInputFocused}
+              isMultilineInput={isMultilineInput}
+              inputRef={inputRef}
             />
-          </KContainer.Touchable>
+
+            <KContainer.Touchable
+              onPress={compose.isUploading ? undefined : handleSend}
+              pointerEvents={compose.isUploading ? 'none' : 'auto'}
+              width={40}
+              height={40}
+              center
+              br="round"
+              background={
+                compose.isUploading
+                  ? KColors.palette.gray.w400
+                  : KColors.palette.primary.w400
+              }
+              marginL="0.75rem"
+              opacity={compose.isUploading ? 0.6 : 1}
+            >
+              <KImage.VectorIcons
+                name="send"
+                provider="MaterialCommunityIcons"
+                size={20}
+                color={KColors.white}
+              />
+            </KContainer.Touchable>
+          </KContainer.View>
         </KContainer.View>
+      );
+    }
 
-        <Reanimated.View
-          style={[styles.accessorySlot, accessorySlotStyle]}
-          pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+    return (
+      <>
+        <KeyboardStickyView
+          ref={composerRef}
+          onLayout={onComposerLayout}
+          offset={{ closed: 0, opened: insets.bottom }}
+        >
+          {content}
+        </KeyboardStickyView>
+        <KContainer.VisibleView
+          visible={!isDisableCompose && !isNewBotConversation}
         >
-          <ChatAttachmentPanel actions={resolvedPannelActons} />
-        </Reanimated.View>
-      </KContainer.View>
+          <Reanimated.View
+            style={[styles.accessorySlot, accessorySlotStyle]}
+            pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+          >
+            <ChatAttachmentPanel actions={resolvedPannelActons} />
+          </Reanimated.View>
+        </KContainer.VisibleView>
+      </>
     );
   }
 );

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

@@ -1,7 +1,11 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { DeviceEventEmitter, Platform, StyleSheet } from 'react-native';
+import { DeviceEventEmitter, View } from 'react-native';
 
-import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import {
+  useKeyboardChatComposerInset,
+  useKeyboardScrollToEnd,
+} from '@legendapp/list/keyboard';
+import type { LegendListRef } from '@legendapp/list/react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer } from '@droppii/libs';
 import { useNavigation } from '@react-navigation/native';
@@ -123,10 +127,13 @@ const ChatDetail = memo(
 
     const insets = useSafeAreaInsets();
 
-    const keyboardVerticalOffset = useMemo(
-      () => Platform.select({ android: insets.bottom, default: 0 }),
-      [insets.bottom]
-    );
+    const listRef = useRef<LegendListRef>(null);
+    const composerRef = useRef<View>(null);
+    const { contentInsetEndAdjustment, onComposerLayout } =
+      useKeyboardChatComposerInset(listRef, composerRef);
+    const { freeze, scrollMessageToEnd } = useKeyboardScrollToEnd({
+      listRef,
+    });
 
     const handlePressUrl = useCallback(
       (url: string) => {
@@ -173,33 +180,34 @@ const ChatDetail = memo(
           onPress={handlePressPinnedMessageBar}
         />
 
-        <KeyboardAvoidingView
-          style={styles.keyboardAvoiding}
-          behavior="padding"
-          keyboardVerticalOffset={keyboardVerticalOffset}
-        >
-          <ChatListLegend
-            messages={messages}
-            conversationId={conversationId}
-            customMessageItemFactory={customMessageItemFactory}
-            isLoading={initLoading || isLoadingConversation}
-            onLoadMoreOld={getMoreOldMessages}
-            hasMoreOld={hasMoreOld}
-            moreOldLoading={moreOldLoading}
-            onLoadMoreNew={getMoreNewMessages}
-            hasMoreNew={hasMoreNew}
-            moreNewLoading={moreNewLoading}
-            onMediaPress={handleMediaPress}
-            onPressUrl={handlePressUrl}
-            onLongPress={handleMessageLongPress}
-          />
-
-          <ChatComposer
-            isEmptyMessage={messages?.length === 0}
-            pannelActions={pannelActions}
-            isDisableCompose={botStatus === DBotStatusValue.INACTIVE}
-          />
-        </KeyboardAvoidingView>
+        <ChatListLegend
+          messages={messages}
+          conversationId={conversationId}
+          customMessageItemFactory={customMessageItemFactory}
+          isLoading={initLoading || isLoadingConversation}
+          onLoadMoreOld={getMoreOldMessages}
+          hasMoreOld={hasMoreOld}
+          moreOldLoading={moreOldLoading}
+          onLoadMoreNew={getMoreNewMessages}
+          hasMoreNew={hasMoreNew}
+          moreNewLoading={moreNewLoading}
+          onMediaPress={handleMediaPress}
+          onPressUrl={handlePressUrl}
+          onLongPress={handleMessageLongPress}
+          listRef={listRef}
+          contentInsetEndAdjustment={contentInsetEndAdjustment}
+          freeze={freeze}
+          scrollMessageToEnd={scrollMessageToEnd}
+          keyboardOffset={insets.bottom}
+        />
+
+        <ChatComposer
+          isEmptyMessage={messages?.length === 0}
+          pannelActions={pannelActions}
+          isDisableCompose={botStatus === DBotStatusValue.INACTIVE}
+          composerRef={composerRef}
+          onComposerLayout={onComposerLayout}
+        />
 
         <MediaViewerModal ref={mediaViewerRef} />
         <MessageToolboxOverlay
@@ -216,8 +224,4 @@ const ChatDetail = memo(
 
 ChatDetail.displayName = 'ChatDetail';
 
-const styles = StyleSheet.create({
-  keyboardAvoiding: { flex: 1 },
-});
-
 export default ChatDetail;

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

@@ -1,11 +1,21 @@
-import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
 import { DeviceEventEmitter, StyleSheet, type View } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withSpring,
+  type SharedValue,
 } from 'react-native-reanimated';
-import { LegendList, type LegendListRef } from '@legendapp/list/react-native';
+import { KeyboardAwareLegendList } from '@legendapp/list/keyboard';
+import type { LegendListRef } from '@legendapp/list/react-native';
 import { KContainer, KColors, KSpacingValue, KLabel } from '@droppii/libs';
 import { precomputeLegendListData } from '../../utils/legendListMessage';
 import type { ChatListProps } from './types';
@@ -26,6 +36,17 @@ import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
 
+interface ChatListLegendInternalProps extends ChatListProps {
+  listRef: RefObject<LegendListRef | null>;
+  contentInsetEndAdjustment: SharedValue<number>;
+  freeze: SharedValue<boolean>;
+  scrollMessageToEnd: (opts: {
+    animated: boolean;
+    closeKeyboard: boolean;
+  }) => Promise<void>;
+  keyboardOffset: number;
+}
+
 export const ChatListLegend = memo(
   ({
     messages = [],
@@ -40,7 +61,12 @@ export const ChatListLegend = memo(
     onMediaPress,
     onPressUrl,
     onLongPress,
-  }: ChatListProps) => {
+    listRef,
+    contentInsetEndAdjustment,
+    freeze,
+    scrollMessageToEnd,
+    keyboardOffset,
+  }: ChatListLegendInternalProps) => {
     const currentUserId = useUserStore((s) => s.user?.userID);
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
@@ -58,7 +84,6 @@ export const ChatListLegend = memo(
     const { mutate: runFlow } = useRunFlow();
     const { mutate: resetFlow } = useResetFlow();
 
-    const listRef = useRef<LegendListRef>(null);
     const buttonOpacity = useSharedValue(0);
     const isAtBottomRef = useRef(true);
     const scrollDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
@@ -285,12 +310,12 @@ export const ChatListLegend = memo(
       if (hasMoreNew) {
         onLoadMoreOld?.(false);
       } else {
-        listRef.current?.scrollToEnd({ animated: true });
+        scrollMessageToEnd({ animated: true, closeKeyboard: false });
         buttonOpacity.value = withSpring(0, { duration: 300 });
         isAtBottomRef.current = true;
         setShowBadge(false);
       }
-    }, [buttonOpacity, onLoadMoreOld, hasMoreNew]);
+    }, [hasMoreNew, onLoadMoreOld, scrollMessageToEnd, buttonOpacity]);
 
     const animatedButtonStyle = useAnimatedStyle(() => ({
       opacity: buttonOpacity.value,
@@ -359,6 +384,7 @@ export const ChatListLegend = memo(
       conversationId,
       buttonOpacity,
       handleScrollToBottom,
+      listRef,
     ]);
 
     // if (isLoading) {
@@ -374,7 +400,7 @@ export const ChatListLegend = memo(
 
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
-        <LegendList
+        <KeyboardAwareLegendList
           ref={listRef}
           data={messages}
           renderItem={renderItem}
@@ -385,6 +411,9 @@ export const ChatListLegend = memo(
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           maintainScrollAtEnd={maintainScrollConfig}
+          contentInsetEndAdjustment={contentInsetEndAdjustment}
+          freeze={freeze}
+          keyboardOffset={keyboardOffset}
           scrollEventThrottle={16}
           onScroll={handleScroll}
           contentContainerStyle={styles.content}

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

@@ -1,22 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Keyboard } from 'react-native';
 import {
-  runOnJS,
-  useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import {
-  useKeyboardState,
-  useReanimatedKeyboardAnimation,
-} from 'react-native-keyboard-controller';
+import { useKeyboardState } from 'react-native-keyboard-controller';
 
 const ACCESSORY_ANIMATION_MS = 250;
-const ACCESSORY_SETTLE_MS = 150;
 
 interface UseChatComposerAnimationProps {
-  isAttachmentOpen: boolean;
   panelHeight: number;
   onAttachmentOpenChange: (isOpen: boolean) => void;
 }
@@ -26,23 +19,17 @@ interface UseChatComposerAnimationReturn {
   accessorySlotStyle: any;
   toggleAttachmentVisibility: () => void;
   openAttachment: () => void;
-  closeAttachment: () => void;
+  closeAttachment: (speedUp?: boolean) => void;
 }
 
 export const useChatComposerAnimation = ({
-  isAttachmentOpen,
   panelHeight,
   onAttachmentOpenChange,
 }: UseChatComposerAnimationProps): UseChatComposerAnimationReturn => {
-  const isSwitchingToAttachmentRef = useRef(false);
   const panelHeightSV = useSharedValue(panelHeight);
   const attachmentHeightSV = useSharedValue(0);
-  const switchKeyboardHeightSV = useSharedValue(0);
-  const isKeyboardToAttachmentSwitchSV = useSharedValue(false);
 
   const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
-  const keyboardHeight = useKeyboardState((state) => state.height);
-  const { progress: keyboardProgress } = useReanimatedKeyboardAnimation();
 
   useEffect(() => {
     panelHeightSV.value = panelHeight;
@@ -55,92 +42,18 @@ export const useChatComposerAnimation = ({
     onAttachmentOpenChange(true);
   }, [attachmentHeightSV, panelHeight, onAttachmentOpenChange]);
 
-  const closeAttachment = useCallback(() => {
-    attachmentHeightSV.value = withTiming(0, {
-      duration: ACCESSORY_ANIMATION_MS,
-    });
-    onAttachmentOpenChange(false);
-  }, [attachmentHeightSV, onAttachmentOpenChange]);
-
-  const finishKeyboardToAttachmentSwitch = useCallback(() => {
-    if (!isSwitchingToAttachmentRef.current) {
-      return;
-    }
-
-    isSwitchingToAttachmentRef.current = false;
-    isKeyboardToAttachmentSwitchSV.value = false;
-
-    const targetHeight = panelHeightSV.value;
-    const startHeight = switchKeyboardHeightSV.value;
-
-    if (Math.abs(startHeight - targetHeight) < 1) {
-      attachmentHeightSV.value = targetHeight;
-      return;
-    }
-
-    attachmentHeightSV.value = withTiming(targetHeight, {
-      duration: ACCESSORY_SETTLE_MS,
-    });
-  }, [
-    attachmentHeightSV,
-    isKeyboardToAttachmentSwitchSV,
-    panelHeightSV,
-    switchKeyboardHeightSV,
-  ]);
-
-  useEffect(() => {
-    if (!isKeyboardVisible && isSwitchingToAttachmentRef.current) {
-      finishKeyboardToAttachmentSwitch();
-    }
-  }, [finishKeyboardToAttachmentSwitch, isKeyboardVisible]);
-
-  useAnimatedReaction(
-    () => ({
-      switching: isKeyboardToAttachmentSwitchSV.value,
-      progress: keyboardProgress.value,
-    }),
-    (current, previous) => {
-      if (
-        current.switching &&
-        current.progress === 0 &&
-        (previous?.progress ?? 1) > 0
-      ) {
-        runOnJS(finishKeyboardToAttachmentSwitch)();
-      }
-    },
-    [finishKeyboardToAttachmentSwitch]
-  );
-
-  useEffect(() => {
-    // Close panel when keyboard becomes visible (unless doing keyboard↔panel switch)
-    // Don't depend on closeAttachment to avoid triggering effect when callback changes
-    if (
-      !isSwitchingToAttachmentRef.current &&
-      isKeyboardVisible &&
-      isAttachmentOpen
-    ) {
+  const closeAttachment = useCallback(
+    (speedUp = false) => {
       attachmentHeightSV.value = withTiming(0, {
-        duration: ACCESSORY_ANIMATION_MS,
+        duration: ACCESSORY_ANIMATION_MS / (speedUp ? 2 : 1),
       });
       onAttachmentOpenChange(false);
-    }
-  }, [
-    isAttachmentOpen,
-    isKeyboardVisible,
-    attachmentHeightSV,
-    onAttachmentOpenChange,
-  ]);
+    },
+    [attachmentHeightSV, onAttachmentOpenChange]
+  );
 
   const accessorySlotStyle = useAnimatedStyle(() => {
-    if (isKeyboardToAttachmentSwitchSV.value) {
-      return {
-        height: switchKeyboardHeightSV.value * (1 - keyboardProgress.value),
-      };
-    }
-
-    return {
-      height: attachmentHeightSV.value,
-    };
+    return { height: attachmentHeightSV.value };
   });
 
   const toggleAttachmentVisibility = useCallback(() => {
@@ -152,24 +65,16 @@ export const useChatComposerAnimation = ({
       return;
     }
 
-    if (isKeyboardVisible && keyboardHeight > 0) {
-      // Dismiss keyboard first, then open attachment
+    if (isKeyboardVisible) {
       Keyboard.dismiss();
-      isSwitchingToAttachmentRef.current = true;
-      switchKeyboardHeightSV.value = keyboardHeight;
-      isKeyboardToAttachmentSwitchSV.value = true;
       onAttachmentOpenChange(true);
-      return;
     }
 
     openAttachment();
   }, [
     closeAttachment,
     isKeyboardVisible,
-    keyboardHeight,
-    isKeyboardToAttachmentSwitchSV,
     onAttachmentOpenChange,
-    switchKeyboardHeightSV,
     openAttachment,
     attachmentHeightSV,
   ]);

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

@@ -134,7 +134,12 @@ const styles = StyleSheet.create({
   },
   pinBadge: {
     position: 'absolute',
-    top: -8,
+    // Capped at the inter-row gap (messageRowLeft/Right's marginBottom) so the
+    // badge never overlaps the row above: LegendList's non-sticky item cells
+    // don't carry a zIndex, so cross-row paint order follows recycled view-slot
+    // order, not visual position — any real overlap can end up hidden behind
+    // the row above depending on scroll history.
+    top: -4,
     right: -8,
     width: 24,
     height: 20,