@droppii-org/chat-mobile 0.2.7 → 0.2.8

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

@@ -1,51 +1,39 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Keyboard,
-  Platform,
-  StyleSheet,
-  TextInput,
-  type NativeSyntheticEvent,
-  type TextInputContentSizeChangeEventData,
-} from 'react-native';
-import Reanimated, {
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import {
-  useKeyboardState,
-  useReanimatedKeyboardAnimation,
-} from 'react-native-keyboard-controller';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import Reanimated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
-import { ChatQuickActions } from './ChatQuickActions';
-import { ChatAttachmentPanel } from './ChatAttachmentPanel';
-import { ChatLinkPreview } from './ChatLinkPreview';
-import { getAttachmentPanelHeight } from './constants';
-import type { ChatComposerProps } from './types';
-import { useLinkPreview } from '../../hooks/useLinkPreview/useLinkPreview';
+import { KContainer, KColors, KImage } from '@droppii/libs';
 
-const ACCESSORY_ANIMATION_MS = 250;
-const ACCESSORY_SETTLE_MS = 150;
 const IS_IOS = Platform.OS === 'ios';
-const INPUT_FONT_SIZE = 16;
 const INPUT_LINE_HEIGHT = 22.4;
-const INPUT_MAX_HEIGHT = INPUT_LINE_HEIGHT * 5;
-// Android's onContentSizeChange includes paddingVertical (4*2=8) in reported height
 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 { getAttachmentPanelHeight } from './constants';
+import type { ChatComposerProps } from './types';
+import { useLinkPreview } from '../../hooks/useLinkPreview/useLinkPreview';
+import { useImageAttachment } from '../../hooks/useImageAttachment';
+import { useSendAttachment } from '../../hooks/useSendAttachment';
+import { useChatComposerState } from './hooks/useChatComposerState';
+import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
+import { useAttachmentSendHandler } from './hooks/useAttachmentSendHandler';
+import { isVideoFromPicker } from '../../utils/imageUtils';
+
 export const ChatComposer = memo(
   ({
     value,
     placeholder = 'Nhập tin nhắn...',
     onChangeText,
     onSend,
-    onPressAttach,
-    onPressEmoji,
+    onMessageSent,
+    onPressEmoji: _onPressEmoji,
     showQuickActions = true,
     quickActions,
     attachmentActions,
@@ -56,14 +44,10 @@ export const ChatComposer = memo(
     renderAttachmentAction,
     attachmentColumns,
   }: ChatComposerProps) => {
-    const hasAttachmentActions = !!attachmentActions?.length;
-    const inputRef = useRef<TextInput>(null);
-    const isSwitchingToAttachmentRef = useRef(false);
-    const [isAttachmentOpen, setIsAttachmentOpen] = useState(false);
-    const [isInputFocused, setIsInputFocused] = useState(false);
-    const [isInputWrapped, setIsInputWrapped] = useState(false);
     const insets = useSafeAreaInsets();
+    const hasAttachmentActions = !!attachmentActions?.length;
 
+    // Link preview
     const {
       isVisible: showLinkPreview,
       metadata: urlMetadata,
@@ -71,10 +55,58 @@ export const ChatComposer = memo(
       dismiss: handleDismissPreview,
     } = useLinkPreview(value);
 
-    const isKeyboardVisible = useKeyboardState((state) => state.isVisible);
-    const keyboardHeight = useKeyboardState((state) => state.height);
-    const { progress: keyboardProgress } = useReanimatedKeyboardAnimation();
+    // Image attachment
+    const {
+      selectedImages,
+      isImagePreviewVisible,
+      handleImageAttach,
+      handleImageRemove,
+      clearAllImages,
+    } = useImageAttachment();
+
+    // Send attachment
+    const { send: sendAttachments } = useSendAttachment();
+
+    // Callback to send text message (with optional preview link)
+    // This is used when sending text after attachments
+    const handleSendText = useCallback(
+      (text: string, previewMetadata?: any) => {
+        // Send with the captured text and preview metadata
+        // Note: ChatDetail's handleSend will read currentInput, but for text sent
+        // after attachments, we want to use the captured text instead
+        // So we pass it via a special handling in the metadata
+        const metadataWithText = previewMetadata
+          ? { ...previewMetadata, _capturedText: text }
+          : undefined;
+        onSend?.(metadataWithText);
+      },
+      [onSend]
+    );
+
+    // Attachment send handler
+    const { handleSend: handleAttachmentSend } = useAttachmentSendHandler({
+      selectedImages,
+      sendAttachments,
+      clearAllImages,
+      onSend,
+      onMessageSent,
+      textMessage: (value ?? '').trim(),
+      urlMetadata: showLinkPreview ? urlMetadata : undefined,
+      onSendText: handleSendText,
+    });
 
+    // Composer state
+    const {
+      isAttachmentOpen,
+      setIsAttachmentOpen,
+      isInputFocused,
+      setIsInputFocused,
+      setIsInputWrapped,
+      isMultilineInput,
+      inputRef,
+    } = useChatComposerState(value as string);
+
+    // Panel height calculation
     const panelHeight = useMemo(
       () =>
         hasAttachmentActions
@@ -86,194 +118,119 @@ export const ChatComposer = memo(
       [attachmentActions, attachmentColumns, hasAttachmentActions]
     );
 
-    const attachmentHeightSV = useSharedValue(0);
-    const panelHeightSV = useSharedValue(panelHeight);
-    const switchKeyboardHeightSV = useSharedValue(0);
-    const isKeyboardToAttachmentSwitchSV = useSharedValue(false);
-
-    useEffect(() => {
-      panelHeightSV.value = panelHeight;
-    }, [panelHeight, panelHeightSV]);
-
-    const openAttachment = useCallback(() => {
-      attachmentHeightSV.value = withTiming(panelHeight, {
-        duration: ACCESSORY_ANIMATION_MS,
+    // Animation
+    const { accessorySlotStyle, toggleAttachmentVisibility, closeAttachment } =
+      useChatComposerAnimation({
+        isAttachmentOpen,
+        panelHeight,
+        onAttachmentOpenChange: setIsAttachmentOpen,
       });
-      setIsAttachmentOpen(true);
-    }, [attachmentHeightSV, panelHeight]);
-
-    const closeAttachment = useCallback(() => {
-      attachmentHeightSV.value = withTiming(0, {
-        duration: ACCESSORY_ANIMATION_MS,
-      });
-      setIsAttachmentOpen(false);
-    }, [attachmentHeightSV]);
-
-    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]
+    // Check if any attachments are currently uploading
+    const isUploadingAttachments = useMemo(
+      () => selectedImages.some((img: any) => img.isUploading),
+      [selectedImages]
     );
 
-    useEffect(() => {
-      if (isSwitchingToAttachmentRef.current) {
-        return;
-      }
-
-      if (isKeyboardVisible && isAttachmentOpen) {
-        closeAttachment();
-      }
-    }, [closeAttachment, isAttachmentOpen, isKeyboardVisible]);
-
-    const accessorySlotStyle = useAnimatedStyle(() => {
-      if (isKeyboardToAttachmentSwitchSV.value) {
-        return {
-          height: switchKeyboardHeightSV.value * (1 - keyboardProgress.value),
-        };
-      }
-
-      return {
-        height: attachmentHeightSV.value,
-      };
-    });
-
+    // Send handler - includes attachment and preview link features
     const handleSend = useCallback(() => {
-      onSend?.(showLinkPreview ? urlMetadata : undefined);
-    }, [onSend, urlMetadata, showLinkPreview]);
-
-    const handleToggleAttachment = useCallback(() => {
-      if (!hasAttachmentActions) {
+      const hasAttachments = selectedImages.length > 0;
+      const hasText = (value ?? '').trim().length > 0;
+      // Only send metadata if preview is CURRENTLY visible (user didn't dismiss it)
+      const previewMetadata = showLinkPreview ? urlMetadata : undefined;
+      const hasPreview = !!previewMetadata;
+
+      // Prevent sending while files are uploading
+      if (isUploadingAttachments) {
+        console.warn(
+          '[ChatComposer] Cannot send message while files are uploading'
+        );
         return;
       }
 
-      if (isAttachmentOpen) {
-        closeAttachment();
+      // Validate: must have at least one of: attachments, text, or preview link
+      if (!hasAttachments && !hasText && !hasPreview) {
+        console.warn(
+          '[ChatComposer] No attachments, text, or preview link to send'
+        );
         return;
       }
 
-      onPressAttach?.();
-      inputRef.current?.blur();
-
-      if (isKeyboardVisible && keyboardHeight > 0) {
-        isSwitchingToAttachmentRef.current = true;
-        switchKeyboardHeightSV.value = keyboardHeight;
-        isKeyboardToAttachmentSwitchSV.value = true;
-        setIsAttachmentOpen(true);
-        Keyboard.dismiss();
-        return;
+      if (hasAttachments) {
+        // Send attachments (+ text if present, handled in attachment handler)
+        handleAttachmentSend();
+      } else {
+        // Send text/preview link only
+        console.log('[ChatComposer] handleSend - text message:', {
+          hasText,
+          hasPreview,
+          previewUrl: previewMetadata?.url,
+        });
+
+        onSend?.(previewMetadata);
       }
-
-      openAttachment();
     }, [
-      closeAttachment,
-      isAttachmentOpen,
-      isKeyboardVisible,
-      keyboardHeight,
-      isKeyboardToAttachmentSwitchSV,
-      onPressAttach,
-      hasAttachmentActions,
-      openAttachment,
-      switchKeyboardHeightSV,
+      onSend,
+      urlMetadata,
+      showLinkPreview,
+      selectedImages,
+      handleAttachmentSend,
+      value,
+      isUploadingAttachments,
     ]);
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
-
-      if (!isAttachmentOpen) {
-        return;
+      // Close attachment panel with animation when input is focused
+      if (isAttachmentOpen) {
+        closeAttachment();
       }
-
-      closeAttachment();
-    }, [closeAttachment, isAttachmentOpen]);
+    }, [closeAttachment, isAttachmentOpen, setIsInputFocused]);
 
     const handleInputBlur = useCallback(() => {
       setIsInputFocused(false);
-    }, []);
+    }, [setIsInputFocused]);
+
+    const handleChangeText = useCallback(
+      (text?: string) => {
+        onChangeText?.(text);
+      },
+      [onChangeText]
+    );
 
     const handleInputContentSizeChange = useCallback(
-      (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      (event: any) => {
         const { height } = event.nativeEvent.contentSize;
         setIsInputWrapped(height > WRAPPED_HEIGHT_THRESHOLD);
       },
-      []
+      [setIsInputWrapped]
     );
 
-    const isMultilineInput = useMemo(() => {
-      if (!value) {
-        return false;
-      }
-
-      return value.includes('\n') || isInputWrapped;
-    }, [isInputWrapped, value]);
-
+    // Reset wrapped state when value is cleared
     useEffect(() => {
       if (!value) {
         setIsInputWrapped(false);
       }
-    }, [value]);
-
-    const renderEmojiNode = useCallback(
-      () => (
-        <KContainer.Touchable marginR="0.5rem" onPress={onPressEmoji}>
-          <KImage.VectorIcons
-            name="sticker-o"
-            size={24}
-            color={KColors.gray.normal}
-          />
-        </KContainer.Touchable>
-      ),
-      [onPressEmoji]
+    }, [value, setIsInputWrapped]);
+
+    // Attachment action handler
+    const handleAttachmentActionInternal = useCallback(
+      async (action: any) => {
+        if (action.id === 'gallery') {
+          await handleImageAttach();
+        } else {
+          onAttachmentAction?.(action);
+        }
+      },
+      [onAttachmentAction, handleImageAttach]
     );
 
+    // Input row padding
     const inputRowStyle = useMemo(
       () => ({
-        paddingBottom:
-          isAttachmentOpen || isKeyboardVisible ? 8 : insets.bottom + 12,
+        paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12,
       }),
-      [insets.bottom, isAttachmentOpen, isKeyboardVisible]
+      [insets.bottom, isAttachmentOpen]
     );
 
     return (
@@ -286,13 +243,39 @@ export const ChatComposer = memo(
           renderQuickActions={renderQuickActions}
         />
 
-        {showLinkPreview ? (
+        {showLinkPreview && (
           <ChatLinkPreview
             metadata={urlMetadata}
             isLoading={isMetadataLoading}
             onDismiss={handleDismissPreview}
           />
-        ) : null}
+        )}
+
+        <AttachmentPreview
+          visible={isImagePreviewVisible}
+          attachments={selectedImages.map((img: any) => {
+            const isVideo = isVideoFromPicker(img.image);
+            return {
+              type: isVideo ? ('video' as const) : ('image' as const),
+              metadata: {
+                path: img.image.path,
+                filename: img.image.filename,
+                size: img.image.size,
+                width: img.image.width,
+                height: img.image.height,
+                ...(isVideo && { duration: (img.image as any).duration }),
+              },
+              uploadProgress: img.uploadProgress,
+              error: img.error,
+              isUploading: img.isUploading,
+              uploadedUrl: img.uploadedUrl,
+              ...(isVideo && { thumbnailUrl: img.thumbnailUrl }),
+            };
+          })}
+          onRemove={(type, index) => {
+            handleImageRemove(index);
+          }}
+        />
 
         <KContainer.View
           row
@@ -302,9 +285,9 @@ export const ChatComposer = memo(
           paddingB="0.75rem"
           style={inputRowStyle}
         >
-          {hasAttachmentActions ? (
+          {hasAttachmentActions && (
             <KContainer.Touchable
-              onPress={handleToggleAttachment}
+              onPress={toggleAttachmentVisibility}
               center
               br="round"
             >
@@ -318,65 +301,35 @@ export const ChatComposer = memo(
                 }
               />
             </KContainer.Touchable>
-          ) : null}
-
-          <KContainer.View
-            flex
-            marginL={hasAttachmentActions ? '0.75rem' : undefined}
-            style={styles.inputWrapper}
-          >
-            <KContainer.View
-              row
-              alignItems={isMultilineInput ? 'flex-end' : 'center'}
-              brW={1}
-              brC={
-                isInputFocused
-                  ? KColors.palette.primary.w400
-                  : KColors.palette.gray.w100
-              }
-              background={KColors.white}
-              paddingL="0.75rem"
-              style={styles.inputContainer}
-            >
-              <KContainer.View marginR="0.75rem">
-                <KImage.VectorIcons
-                  name="chat-suggest-o"
-                  size={24}
-                  color={KColors.gray.normal}
-                />
-              </KContainer.View>
-
-              <TextInput
-                ref={inputRef}
-                placeholder={placeholder}
-                placeholderTextColor={KColors.palette.gray.w200}
-                value={value}
-                onChangeText={onChangeText}
-                onFocus={handleInputFocus}
-                onBlur={handleInputBlur}
-                onContentSizeChange={handleInputContentSizeChange}
-                multiline
-                blurOnSubmit={false}
-                scrollEnabled
-                allowFontScaling={false}
-                underlineColorAndroid={KColors.transparent}
-                selectionColor={KColors.selector}
-                textAlignVertical={isMultilineInput ? 'top' : 'center'}
-                style={[styles.textInput]}
-              />
-
-              {renderEmojiNode()}
-            </KContainer.View>
-          </KContainer.View>
+          )}
+
+          <ChatMessageInput
+            value={value as string}
+            placeholder={placeholder}
+            onChangeText={handleChangeText}
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            onContentSizeChange={handleInputContentSizeChange}
+            isInputFocused={isInputFocused}
+            isMultilineInput={isMultilineInput}
+            // onEmojiPress={onPressEmoji}
+            inputRef={inputRef}
+          />
 
           <KContainer.Touchable
-            onPress={handleSend}
+            onPress={isUploadingAttachments ? undefined : handleSend}
+            pointerEvents={isUploadingAttachments ? 'none' : 'auto'}
             width={40}
             height={40}
             center
             br="round"
-            background={KColors.palette.primary.w400}
+            background={
+              isUploadingAttachments
+                ? KColors.palette.gray.w400
+                : KColors.palette.primary.w400
+            }
             marginL="0.75rem"
+            opacity={isUploadingAttachments ? 0.6 : 1}
           >
             <KImage.VectorIcons
               name="send"
@@ -387,7 +340,7 @@ export const ChatComposer = memo(
           </KContainer.Touchable>
         </KContainer.View>
 
-        {hasAttachmentActions ? (
+        {hasAttachmentActions && (
           <Reanimated.View
             style={[styles.accessorySlot, accessorySlotStyle]}
             pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
@@ -395,11 +348,11 @@ export const ChatComposer = memo(
             <ChatAttachmentPanel
               actions={attachmentActions}
               columns={attachmentColumns}
-              onActionPress={onAttachmentAction}
+              onActionPress={handleAttachmentActionInternal}
               renderAction={renderAttachmentAction}
             />
           </Reanimated.View>
-        ) : null}
+        )}
       </KContainer.View>
     );
   }
@@ -412,22 +365,4 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: KColors.palette.gray.w25,
   },
-  inputWrapper: {
-    overflow: 'hidden',
-  },
-  inputContainer: {
-    borderRadius: KSpacingValue['1.25rem'],
-    minHeight: 48,
-    paddingVertical: KSpacingValue['0.25rem'],
-  },
-  textInput: {
-    flex: 1,
-    maxHeight: INPUT_MAX_HEIGHT,
-    fontSize: INPUT_FONT_SIZE,
-    lineHeight: INPUT_LINE_HEIGHT,
-    color: KColors.palette.gray.w900,
-    paddingVertical: IS_IOS ? 0 : 4,
-    paddingHorizontal: IS_IOS ? 2 : 0,
-    includeFontPadding: false,
-  },
 });