@droppii-org/chat-mobile 0.2.44 → 0.2.46

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,

package/src/store/pinnedMessage.ts

@@ -4,7 +4,12 @@ import { create } from 'zustand';
 export interface PinnedMessageStore {
   messages: MessageItem[];
   totalCount: number;
-  setMessages: (messages: MessageItem[], totalCount: number) => void;
+  remainingPinCount: number;
+  setMessages: (
+    messages: MessageItem[],
+    totalCount: number,
+    remainingPinCount: number
+  ) => void;
   addMessage: (message: MessageItem) => void;
   removeMessage: (clientMsgID: string) => void;
   reset: () => void;
@@ -14,25 +19,34 @@ export const usePinnedMessageStore = create<PinnedMessageStore>()(
   (set, get) => ({
     messages: [],
     totalCount: 0,
+    remainingPinCount: 0,
 
-    setMessages: (messages, totalCount) => {
-      set({ messages, totalCount });
+    setMessages: (messages, totalCount, remainingPinCount) => {
+      set({ messages, totalCount, remainingPinCount });
     },
 
     addMessage: (message) => {
       const messages = [message, ...get().messages];
-      set({ messages, totalCount: messages.length });
+      set({
+        messages,
+        totalCount: messages.length,
+        remainingPinCount: Math.max(0, get().remainingPinCount - 1),
+      });
     },
 
     removeMessage: (clientMsgID) => {
       const messages = get().messages.filter(
         (msg) => msg.clientMsgID !== clientMsgID
       );
-      set({ messages, totalCount: messages.length });
+      set({
+        messages,
+        totalCount: messages.length,
+        remainingPinCount: get().remainingPinCount + 1,
+      });
     },
 
     reset: () => {
-      set({ messages: [], totalCount: 0 });
+      set({ messages: [], totalCount: 0, remainingPinCount: 0 });
     },
   })
 );

package/src/translation/resources/i18n.ts

@@ -46,7 +46,7 @@ const i18nKey: Record<string, string> = {
   'chat:pinned_link_subtitle': 'Từ {{sender}}',
   'chat:pin_limit_title': 'Không thể ghim thêm tin nhắn',
   'chat:pin_limit_desc':
-    'Chỉ được ghim tối đa 5 tin nhắn. Vui lòng bỏ ghim một tin nhắn hiện có trước khi ghim tin nhắn mới.',
+    'Chỉ được ghim tối đa {{maxCount}} tin nhắn. Vui lòng bỏ ghim một tin nhắn hiện có trước khi ghim tin nhắn mới.',
   'chat:pin_limit_primary': 'Đã hiểu',
   'chat:pinned_messages_title': 'Tin nhắn đã ghim',
   'chat:pinned_messages_hint':