@droppii-org/chat-mobile 0.2.23 → 0.2.25

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

@@ -17,107 +17,35 @@ 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 { useFileAttachment } from '../../hooks/useFileAttachment';
-import { useSendAttachment } from '../../hooks/useSendAttachment';
+import {
+  DEFAULT_ATTACHMENT_ACTIONS,
+  DEFAULT_Chat_QUICK_ACTIONS,
+  getAttachmentPanelHeight,
+} from './constants';
+import type { DChatAttachmentAction } from './types';
 import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
-import { useAttachmentSendHandler } from './hooks/useAttachmentSendHandler';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
 import { trans } from '../../translation';
 import { useRunFlow } from '../../hooks/flows/useFlow';
 import { ReactFlowsNodeTypes } from '../../types/flows';
 import { useAttachmentMapping } from './hooks/useAttachmentMapping';
 import type { AttachmentType } from '../../types/attachment';
+import { useChatCompose } from '../../hooks/useChatCompose';
+
+interface ChatComposerInternalProps {
+  isEmptyMessage?: boolean;
+}
 
 export const ChatComposer = memo(
-  ({
-    value,
-    placeholder = 'Nhập tin nhắn...',
-    onChangeText,
-    onSend,
-    onMessageSent,
-    onPressEmoji: _onPressEmoji,
-    showQuickActions = true,
-    quickActions,
-    attachmentActions,
-    onQuickActionPress,
-    onAttachmentAction,
-    renderQuickAction,
-    renderQuickActions,
-    renderAttachmentAction,
-    attachmentColumns,
-    isEmptyMessage = false,
-  }: ChatComposerProps) => {
+  ({ isEmptyMessage = false }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
-    const hasAttachmentActions = !!attachmentActions?.length;
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
     const { mutate: runFlow, isPending } = useRunFlow();
 
-    // Link preview
-    const {
-      isVisible: showLinkPreview,
-      metadata: urlMetadata,
-      isLoading: isMetadataLoading,
-      dismiss: handleDismissPreview,
-    } = useLinkPreview(value);
-
-    // Image attachment
-    const {
-      selectedImages,
-      isImagePreviewVisible,
-      handleImageAttach,
-      handleImageRemove,
-      clearAllImages,
-    } = useImageAttachment();
-
-    // File attachment
-    const {
-      selectedFiles,
-      isFilePreviewVisible,
-      handleFileAttach,
-      handleFileRemove,
-      clearAllFiles,
-    } = useFileAttachment();
-
-    // 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,
-      selectedFiles,
-      sendAttachments,
-      clearAllImages,
-      clearAllFiles,
-      onSend,
-      onMessageSent,
-      textMessage: (value ?? '').trim(),
-      urlMetadata: showLinkPreview ? urlMetadata : undefined,
-      onSendText: handleSendText,
-    });
+    const compose = useChatCompose();
 
-    // Composer state
     const {
       isAttachmentOpen,
       setIsAttachmentOpen,
@@ -126,21 +54,13 @@ export const ChatComposer = memo(
       setIsInputWrapped,
       isMultilineInput,
       inputRef,
-    } = useChatComposerState(value as string);
+    } = useChatComposerState(compose.text);
 
-    // Panel height calculation
     const panelHeight = useMemo(
-      () =>
-        hasAttachmentActions
-          ? getAttachmentPanelHeight(
-              attachmentActions.length,
-              attachmentColumns
-            )
-          : 0,
-      [attachmentActions, attachmentColumns, hasAttachmentActions]
+      () => getAttachmentPanelHeight(DEFAULT_ATTACHMENT_ACTIONS.length),
+      []
     );
 
-    // Animation
     const { accessorySlotStyle, toggleAttachmentVisibility, closeAttachment } =
       useChatComposerAnimation({
         isAttachmentOpen,
@@ -148,70 +68,18 @@ export const ChatComposer = memo(
         onAttachmentOpenChange: setIsAttachmentOpen,
       });
 
-    // Check if any attachments are currently uploading or have errors
-    const isUploadingAttachments = useMemo(
-      () =>
-        selectedImages.some((img: any) => img.isUploading) ||
-        selectedFiles.some((f) => f.isUploading || !!f.error),
-      [selectedImages, selectedFiles]
-    );
-
-    // Send handler - includes attachment and preview link features
-    const handleSend = useCallback(() => {
-      const hasAttachments =
-        selectedImages.length > 0 || selectedFiles.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 ? urlMetadata : undefined;
-      const hasPreview = !!previewMetadata;
-
-      // Prevent sending while files are uploading
-      if (isUploadingAttachments) {
-        console.warn(
-          '[ChatComposer] Cannot send message while files are uploading'
-        );
-        return;
-      }
-
-      // 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;
-      }
-
-      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);
+    const handleSend = useCallback(async () => {
+      if (compose.isUploading || !compose.canSend) return;
+      try {
+        await compose.send();
+      } catch (error) {
+        if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
       }
-    }, [
-      onSend,
-      urlMetadata,
-      showLinkPreview,
-      selectedImages,
-      selectedFiles,
-      handleAttachmentSend,
-      value,
-      isUploadingAttachments,
-    ]);
+    }, [compose]);
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
-      // Close attachment panel with animation when input is focused
-      if (isAttachmentOpen) {
-        closeAttachment();
-      }
+      if (isAttachmentOpen) closeAttachment();
     }, [closeAttachment, isAttachmentOpen, setIsInputFocused]);
 
     const handleInputBlur = useCallback(() => {
@@ -220,13 +88,13 @@ export const ChatComposer = memo(
 
     const handleChangeText = useCallback(
       (text?: string) => {
-        onChangeText?.(text);
+        compose.setText(text ?? '');
       },
-      [onChangeText]
+      [compose]
     );
 
     const handleInputContentSizeChange = useCallback(
-      (event: any) => {
+      (event: { nativeEvent: { contentSize: { height: number } } }) => {
         const { height } = event.nativeEvent.contentSize;
         setIsInputWrapped(height > WRAPPED_HEIGHT_THRESHOLD);
       },
@@ -242,69 +110,57 @@ export const ChatComposer = memo(
       });
     }, [runFlow, conversationFlow]);
 
-    // Reset wrapped state when value is cleared
     useEffect(() => {
-      if (!value) {
-        setIsInputWrapped(false);
-      }
-    }, [value, setIsInputWrapped]);
+      if (!compose.text) setIsInputWrapped(false);
+    }, [compose.text, setIsInputWrapped]);
 
-    const handleImageAttachRef = useRef(handleImageAttach);
-    handleImageAttachRef.current = handleImageAttach;
+    const addImagesRef = useRef(compose.addImages);
+    addImagesRef.current = compose.addImages;
     const debouncedImagePickerRef = useRef(
-      debounce(() => handleImageAttachRef.current(), 300, {
+      debounce(() => addImagesRef.current?.(), 300, {
         leading: true,
         trailing: false,
       })
     );
 
-    const handleFileAttachRef = useRef(handleFileAttach);
-    handleFileAttachRef.current = handleFileAttach;
+    const addFilesRef = useRef(compose.addFiles);
+    addFilesRef.current = compose.addFiles;
     const debouncedFilePickerRef = useRef(
-      debounce(() => handleFileAttachRef.current(), 300, {
+      debounce(() => addFilesRef.current?.(), 300, {
         leading: true,
         trailing: false,
       })
     );
 
-    // Attachment action handler
-    const handleAttachmentActionInternal = useCallback(
-      async (action: any) => {
+    const handleAttachmentAction = useCallback(
+      async (action: DChatAttachmentAction) => {
         if (action.id === 'gallery') {
           debouncedImagePickerRef.current();
         } else if (action.id === 'file') {
           debouncedFilePickerRef.current();
         } else {
-          onAttachmentAction?.(action);
+          console.log('[ChatComposer] attachment action:', action.id);
         }
       },
-      [onAttachmentAction]
+      []
     );
 
-    // Input row padding
     const inputRowStyle = useMemo(
-      () => ({
-        paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12,
-      }),
+      () => ({ paddingBottom: isAttachmentOpen ? 8 : insets.bottom + 12 }),
       [insets.bottom, isAttachmentOpen]
     );
 
     const attachments = useAttachmentMapping({
-      selectedImages,
-      selectedFiles,
+      selectedImages: compose.selectedImages,
+      selectedFiles: compose.selectedFiles,
     });
 
     const onRemove = useCallback(
       (type: AttachmentType, data: unknown) => {
-        switch (type) {
-          case 'file':
-            return handleFileRemove(data as string);
-
-          default:
-            return handleImageRemove(data as number);
-        }
+        if (type === 'file') return compose.removeFile(data as string);
+        return compose.removeImage(data as number);
       },
-      [handleImageRemove, handleFileRemove]
+      [compose]
     );
 
     if (
@@ -318,10 +174,7 @@ export const ChatComposer = memo(
             size="md"
             label={trans('start')}
             stretch
-            icon={{
-              vectorName: 'chat-square-o',
-              size: 20,
-            }}
+            icon={{ vectorName: 'chat-square-o', size: 20 }}
             loading={isPending}
             onPress={onStartConversationFlow}
           />
@@ -332,23 +185,25 @@ export const ChatComposer = memo(
     return (
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
         <ChatQuickActions
-          visible={showQuickActions}
-          actions={quickActions}
-          onActionPress={onQuickActionPress}
-          renderAction={renderQuickAction}
-          renderQuickActions={renderQuickActions}
+          visible
+          actions={DEFAULT_Chat_QUICK_ACTIONS}
+          onActionPress={(action) =>
+            console.log('[ChatComposer] quick action:', action.id)
+          }
         />
 
-        {showLinkPreview && (
+        {compose.showLinkPreview && (
           <ChatLinkPreview
-            metadata={urlMetadata}
-            isLoading={isMetadataLoading}
-            onDismiss={handleDismissPreview}
+            metadata={compose.urlMetadata}
+            isLoading={compose.isMetadataLoading}
+            onDismiss={compose.dismissPreview}
           />
         )}
 
         <AttachmentPreview
-          visible={isImagePreviewVisible || isFilePreviewVisible}
+          visible={
+            compose.isImagePreviewVisible || compose.isFilePreviewVisible
+          }
           attachments={attachments}
           onRemove={onRemove}
         />
@@ -361,51 +216,48 @@ export const ChatComposer = memo(
           paddingB="0.75rem"
           style={inputRowStyle}
         >
-          {hasAttachmentActions && (
-            <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>
-          )}
+          <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={value as string}
-            placeholder={placeholder}
+            value={compose.text}
+            placeholder="Nhập tin nhắn..."
             onChangeText={handleChangeText}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
             onContentSizeChange={handleInputContentSizeChange}
             isInputFocused={isInputFocused}
             isMultilineInput={isMultilineInput}
-            // onEmojiPress={onPressEmoji}
             inputRef={inputRef}
           />
 
           <KContainer.Touchable
-            onPress={isUploadingAttachments ? undefined : handleSend}
-            pointerEvents={isUploadingAttachments ? 'none' : 'auto'}
+            onPress={compose.isUploading ? undefined : handleSend}
+            pointerEvents={compose.isUploading ? 'none' : 'auto'}
             width={40}
             height={40}
             center
             br="round"
             background={
-              isUploadingAttachments
+              compose.isUploading
                 ? KColors.palette.gray.w400
                 : KColors.palette.primary.w400
             }
             marginL="0.75rem"
-            opacity={isUploadingAttachments ? 0.6 : 1}
+            opacity={compose.isUploading ? 0.6 : 1}
           >
             <KImage.VectorIcons
               name="send"
@@ -416,19 +268,15 @@ export const ChatComposer = memo(
           </KContainer.Touchable>
         </KContainer.View>
 
-        {hasAttachmentActions && (
-          <Reanimated.View
-            style={[styles.accessorySlot, accessorySlotStyle]}
-            pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
-          >
-            <ChatAttachmentPanel
-              actions={attachmentActions}
-              columns={attachmentColumns}
-              onActionPress={handleAttachmentActionInternal}
-              renderAction={renderAttachmentAction}
-            />
-          </Reanimated.View>
-        )}
+        <Reanimated.View
+          style={[styles.accessorySlot, accessorySlotStyle]}
+          pointerEvents={isAttachmentOpen ? 'auto' : 'none'}
+        >
+          <ChatAttachmentPanel
+            actions={DEFAULT_ATTACHMENT_ACTIONS}
+            onActionPress={handleAttachmentAction}
+          />
+        </Reanimated.View>
       </KContainer.View>
     );
   }