@droppii-org/chat-mobile 0.2.7 → 0.2.8

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

@@ -0,0 +1,291 @@
+import { useCallback } from 'react';
+import RNFS from 'react-native-fs';
+import { isVideoFromPicker } from '../../../utils/imageUtils';
+import VideoThumbnailUtil from '../../../utils/videoThumbnail';
+import { ImageUploadAPI } from '../../../services/imageUpload';
+import UIUtils from '../../../utils/ui';
+import type { DMessageItem } from '../../../types/chat';
+
+interface AttachmentItem {
+  image: any;
+  uploadedUrl?: string;
+  uploadProgress?: number;
+  error?: any;
+  isUploading?: boolean;
+}
+
+interface UseAttachmentSendHandlerProps {
+  selectedImages: AttachmentItem[];
+  sendAttachments: (
+    items: any[],
+    _: any,
+    onMessageSent?: (message: DMessageItem) => void
+  ) => Promise<boolean>;
+  clearAllImages: () => void;
+  onSend?: () => void;
+  onMessageSent?: (message: DMessageItem) => void;
+  textMessage?: string;
+  urlMetadata?: any;
+  onSendText?: (text: string, urlMetadata?: any) => void;
+}
+
+export const useAttachmentSendHandler = ({
+  selectedImages,
+  sendAttachments,
+  clearAllImages,
+  onSend,
+  onMessageSent,
+  textMessage,
+  urlMetadata,
+  onSendText,
+}: UseAttachmentSendHandlerProps) => {
+  const handleSend = useCallback(async () => {
+    console.log('[ChatComposer] handleSend called', {
+      selectedImagesCount: selectedImages.length,
+      selectedImagesData: selectedImages.map((img: any) => ({
+        filename: img.image.filename,
+        isUploading: img.isUploading,
+        uploadedUrl: img.uploadedUrl ? 'SET' : 'MISSING',
+        uploadProgress: img.uploadProgress,
+      })),
+    });
+
+    // Separate images and videos from selectedImages
+    const actualImages = selectedImages.filter(
+      (img: any) => !isVideoFromPicker(img.image)
+    );
+    const videosFromGallery = selectedImages.filter((img: any) =>
+      isVideoFromPicker(img.image)
+    );
+
+    console.log('🎬 [ChatComposer] Separation result:', {
+      actualImagesCount: actualImages.length,
+      videosFromGalleryCount: videosFromGallery.length,
+      videosFromGalleryList: videosFromGallery.map((v: any) => ({
+        filename: v.image.filename,
+        uploadedUrl: v.uploadedUrl,
+      })),
+    });
+
+    const uploadedImages = actualImages.filter((img: any) => img.uploadedUrl);
+    const uploadedVideosFromGallery = videosFromGallery.filter(
+      (vid: any) => vid.uploadedUrl
+    );
+
+    // Auto-generate thumbnails for gallery videos
+    const galleryVideoThumbnails: Record<
+      string,
+      { url: string; size: number }
+    > = {};
+
+    if (uploadedVideosFromGallery.length > 0) {
+      console.log(
+        '[ChatComposer] Auto-generating thumbnails for gallery videos...'
+      );
+
+      for (const vidItem of uploadedVideosFromGallery) {
+        let cachedVideoPath: string | null = null;
+        try {
+          const originalVideoPath = vidItem.image.path;
+          const videoDuration = (vidItem.image as any).duration || 0;
+          const videoMime = (vidItem.image as any).mime;
+          const filename = vidItem.image.filename || 'video.mp4';
+
+          console.log('[ChatComposer] Generating thumbnail for:', {
+            filename,
+            originalVideoPath,
+            videoDuration,
+            videoMime,
+            uploadedUrl: vidItem.uploadedUrl,
+          });
+
+          // Copy video to persistent location
+          const ext = filename.split('.').pop() || 'mp4';
+          const cachedFileName = `thumb-cache-${Date.now()}-${Math.random()
+            .toString(36)
+            .slice(2)}.${ext}`;
+          cachedVideoPath = `${RNFS.DocumentDirectoryPath}/${cachedFileName}`;
+
+          console.log('[ChatComposer] Copying video to cache:', {
+            from: originalVideoPath,
+            to: cachedVideoPath,
+          });
+
+          await RNFS.copyFile(originalVideoPath, cachedVideoPath);
+          console.log('[ChatComposer] Video cached successfully');
+
+          // Use smaller time offset if video is very short
+          const timeMs = Math.min(1000, Math.floor(videoDuration / 2));
+
+          console.log('[ChatComposer] Thumbnail settings:', {
+            timeMs,
+            quality: 80,
+            videoPath: cachedVideoPath,
+          });
+
+          // Generate thumbnail from cached copy
+          const thumbnail = await VideoThumbnailUtil.generateThumbnail(
+            cachedVideoPath,
+            { time: timeMs, quality: 80 }
+          );
+
+          if (!thumbnail) {
+            throw new Error('Failed to generate thumbnail');
+          }
+
+          console.log('[ChatComposer] Thumbnail generated:', {
+            path: thumbnail.path,
+            width: thumbnail.width,
+            height: thumbnail.height,
+          });
+
+          // Upload thumbnail
+          const baseName = vidItem.image.filename?.split('.')[0] || 'video';
+          const uploadedThumbnail = await ImageUploadAPI.uploadImageFile(
+            {
+              path: thumbnail.path,
+              filename: `thumb-${baseName}.jpg`,
+              size: 0,
+              width: thumbnail.width || 320,
+              height: thumbnail.height || 180,
+              mime: 'image/jpeg',
+            },
+            (progress) => {
+              console.log('[ChatComposer] Thumbnail upload progress:', {
+                percentage: progress,
+              });
+            }
+          );
+
+          if (!uploadedThumbnail?.url) {
+            throw new Error('No thumbnail URL returned');
+          }
+
+          // Store thumbnail data
+          galleryVideoThumbnails[vidItem.image.path] = {
+            url: uploadedThumbnail.url,
+            size: uploadedThumbnail.size || 0,
+          };
+
+          console.log('[ChatComposer] Thumbnail ready:', {
+            url: uploadedThumbnail.url,
+            size: uploadedThumbnail.size,
+          });
+          console.log(
+            `✅ [ChatComposer] THUMBNAIL URL: ${uploadedThumbnail.url}`
+          );
+        } catch (error) {
+          console.error('[ChatComposer] Thumbnail generation error:', error);
+          UIUtils.toast.open({
+            title: 'Thumbnail Error',
+            message: `Failed to generate thumbnail for ${vidItem.image.filename}`,
+            theme: 'danger',
+          });
+          return;
+        } finally {
+          // Cleanup cached video file
+          if (cachedVideoPath) {
+            try {
+              await RNFS.unlink(cachedVideoPath);
+              console.log('[ChatComposer] Cleaned up cached video:', {
+                path: cachedVideoPath,
+              });
+            } catch (err) {
+              console.warn('[ChatComposer] Failed to clean cached video:', err);
+            }
+          }
+        }
+      }
+    }
+
+    const allUploadedVideos = [...uploadedVideosFromGallery];
+
+    console.log('[ChatComposer] handleSend summary:', {
+      actualImages: actualImages.length,
+      uploadedImages: uploadedImages.length,
+      videosFromGallery: videosFromGallery.length,
+      uploadedVideosFromGallery: uploadedVideosFromGallery.length,
+      allUploadedVideos: allUploadedVideos.length,
+    });
+
+    // Log thumbnail URLs
+    if (uploadedVideosFromGallery.length > 0) {
+      uploadedVideosFromGallery.forEach((vid: any) => {
+        const thumbnail = galleryVideoThumbnails[vid.image.path];
+        console.log(`✅ [ChatComposer] Gallery Video Thumbnail:`, {
+          filename: vid.image.filename,
+          thumbnailUrl: thumbnail?.url || 'NOT FOUND',
+          videoUrl: vid.uploadedUrl,
+        });
+      });
+    }
+
+    // Send images and videos if any
+    if (uploadedImages.length > 0 || allUploadedVideos.length > 0) {
+      const attachmentItems = [
+        ...uploadedImages.map((img: any) => ({
+          ...img,
+          type: 'image' as const,
+        })),
+        // Videos from gallery picker with auto-generated thumbnails
+        ...uploadedVideosFromGallery.map((vid: any) => {
+          const thumbnail = galleryVideoThumbnails[vid.image.path];
+          return {
+            type: 'video' as const,
+            video: vid.image,
+            uploadProgress: vid.uploadProgress,
+            error: vid.error,
+            isUploading: vid.isUploading,
+            uploadedUrl: vid.uploadedUrl,
+            thumbnailUrl: thumbnail?.url,
+            thumbnailSize: thumbnail?.size,
+          };
+        }),
+      ];
+
+      console.log('[ChatComposer] Sending attachments...', {
+        imagesCount: uploadedImages.length,
+        videosCount: uploadedVideosFromGallery.length,
+        hasTextMessage: !!textMessage,
+      });
+
+      const success = await sendAttachments(
+        attachmentItems,
+        undefined,
+        onMessageSent
+      );
+
+      console.log('[ChatComposer] Attachments send result:', { success });
+
+      if (success) {
+        clearAllImages();
+        console.log('[ChatComposer] Images cleared after successful send');
+
+        // Send text message after attachments (follows attachment priority order)
+        // Note: urlMetadata is only passed if preview is still visible (not dismissed)
+        if (textMessage && onSendText) {
+          console.log('[ChatComposer] Sending text message after attachments', {
+            hasPreview: !!urlMetadata,
+            previewUrl: urlMetadata?.url,
+          });
+          onSendText(textMessage, urlMetadata);
+        }
+      }
+      return;
+    }
+
+    // Send text message only if no attachments
+    onSend?.();
+  }, [
+    selectedImages,
+    sendAttachments,
+    clearAllImages,
+    onSend,
+    onMessageSent,
+    textMessage,
+    urlMetadata,
+    onSendText,
+  ]);
+
+  return { handleSend };
+};

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

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useRef } 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';
+
+const ACCESSORY_ANIMATION_MS = 250;
+const ACCESSORY_SETTLE_MS = 150;
+
+interface UseChatComposerAnimationProps {
+  isAttachmentOpen: boolean;
+  panelHeight: number;
+  onAttachmentOpenChange: (isOpen: boolean) => void;
+}
+
+interface UseChatComposerAnimationReturn {
+  attachmentHeightSV: any;
+  accessorySlotStyle: any;
+  toggleAttachmentVisibility: () => void;
+  openAttachment: () => void;
+  closeAttachment: () => 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;
+  }, [panelHeight, panelHeightSV]);
+
+  const openAttachment = useCallback(() => {
+    attachmentHeightSV.value = withTiming(panelHeight, {
+      duration: ACCESSORY_ANIMATION_MS,
+    });
+    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
+    ) {
+      attachmentHeightSV.value = withTiming(0, {
+        duration: ACCESSORY_ANIMATION_MS,
+      });
+      onAttachmentOpenChange(false);
+    }
+  }, [
+    isAttachmentOpen,
+    isKeyboardVisible,
+    attachmentHeightSV,
+    onAttachmentOpenChange,
+  ]);
+
+  const accessorySlotStyle = useAnimatedStyle(() => {
+    if (isKeyboardToAttachmentSwitchSV.value) {
+      return {
+        height: switchKeyboardHeightSV.value * (1 - keyboardProgress.value),
+      };
+    }
+
+    return {
+      height: attachmentHeightSV.value,
+    };
+  });
+
+  const toggleAttachmentVisibility = useCallback(() => {
+    // Use animated value as source of truth, not stale state
+    const isOpen = attachmentHeightSV.value > 0;
+
+    if (isOpen) {
+      closeAttachment();
+      return;
+    }
+
+    if (isKeyboardVisible && keyboardHeight > 0) {
+      // Dismiss keyboard first, then open attachment
+      Keyboard.dismiss();
+      isSwitchingToAttachmentRef.current = true;
+      switchKeyboardHeightSV.value = keyboardHeight;
+      isKeyboardToAttachmentSwitchSV.value = true;
+      onAttachmentOpenChange(true);
+      return;
+    }
+
+    openAttachment();
+  }, [
+    closeAttachment,
+    isKeyboardVisible,
+    keyboardHeight,
+    isKeyboardToAttachmentSwitchSV,
+    onAttachmentOpenChange,
+    switchKeyboardHeightSV,
+    openAttachment,
+    attachmentHeightSV,
+  ]);
+
+  return {
+    attachmentHeightSV,
+    accessorySlotStyle,
+    toggleAttachmentVisibility,
+    openAttachment,
+    closeAttachment,
+  };
+};

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

@@ -0,0 +1,40 @@
+import { useState, useMemo, useRef } from 'react';
+
+interface UseChatComposerStateReturn {
+  isAttachmentOpen: boolean;
+  setIsAttachmentOpen: (open: boolean) => void;
+  isInputFocused: boolean;
+  setIsInputFocused: (focused: boolean) => void;
+  isInputWrapped: boolean;
+  setIsInputWrapped: (wrapped: boolean) => void;
+  isMultilineInput: boolean;
+  inputRef: React.RefObject<any>;
+}
+
+export const useChatComposerState = (
+  value: string
+): UseChatComposerStateReturn => {
+  const [isAttachmentOpen, setIsAttachmentOpen] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [isInputWrapped, setIsInputWrapped] = useState(false);
+  const inputRef = useRef<any>(null);
+
+  const isMultilineInput = useMemo(() => {
+    if (!value) {
+      return false;
+    }
+
+    return value.includes('\n') || isInputWrapped;
+  }, [isInputWrapped, value]);
+
+  return {
+    isAttachmentOpen,
+    setIsAttachmentOpen,
+    isInputFocused,
+    setIsInputFocused,
+    isInputWrapped,
+    setIsInputWrapped,
+    isMultilineInput,
+    inputRef,
+  };
+};

package/src/screens/chat-detail/index.ts

@@ -1,6 +1,5 @@
 export { default as ChatDetail } from './ChatDetail';
 export { default as ChatDetailHeader } from './ChatDetailHeader';
-export { ChatList } from './ChatList';
 export { ChatComposer } from './ChatComposer';
 export { ChatQuickActions } from './ChatQuickActions';
 export { ChatAttachmentPanel } from './ChatAttachmentPanel';
@@ -33,7 +32,6 @@ export {
   DChatMessageType,
   CUSTOM_MESSAGE_DATA_TYPE,
 } from '../../types/message';
-export type { ChatMessageBubbleProps } from './messages/types';
 export {
   mapOpenIMMessageToGiftedChat,
   mapOpenIMMessagesToGiftedChat,

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

@@ -2,28 +2,33 @@ import { memo } from 'react';
 import type { ComponentType } from 'react';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../../../types/chat';
-import {
-  LegendTextMessage,
-  LegendImageMessage,
-  LegendVideoMessage,
-  LegendFileMessage,
-  LegendLinkMessage,
-} from './message-types';
+import type { MediaItem } from '../../../hooks/useMediaViewer';
+import { TextMessage } from '../../../components/messages/textMessage';
+import { ImageMessage } from '../../../components/messages/imageMessage';
+import { VideoMessage } from '../../../components/messages/videoMessage';
+import { FileMessage } from '../../../components/messages/fileMessage';
+import { LinkMessage } from '../../../components/messages/linkMessage';
+import { MergedMessage } from '../../../components/messages/mergedMessage';
 
 interface LegendChatMessageProps {
   message: DMessageItem;
   isOutgoing: boolean;
   createdAtTime: number;
+  onMediaPress?: (items: MediaItem[], index?: number) => void;
 }
 
+// OpenIM message types (not all exposed as MessageType enum)
+const MERGED_MESSAGE_TYPE = 107; // MergerMessage - merged/grouped messages
+
 const messageComponentMap: Partial<Record<MessageType, ComponentType<any>>> = {
-  [MessageType.TextMessage]: LegendTextMessage,
-  [MessageType.AtTextMessage]: LegendTextMessage,
-  [MessageType.QuoteMessage]: LegendTextMessage,
-  [MessageType.UrlTextMessage]: LegendLinkMessage,
-  [MessageType.PictureMessage]: LegendImageMessage,
-  [MessageType.VideoMessage]: LegendVideoMessage,
-  [MessageType.FileMessage]: LegendFileMessage,
+  [MessageType.TextMessage]: TextMessage,
+  [MessageType.AtTextMessage]: TextMessage,
+  [MessageType.QuoteMessage]: TextMessage,
+  [MessageType.UrlTextMessage]: LinkMessage,
+  [MessageType.PictureMessage]: ImageMessage,
+  [MessageType.VideoMessage]: VideoMessage,
+  [MessageType.FileMessage]: FileMessage,
+  [MERGED_MESSAGE_TYPE]: MergedMessage,
 };
 
 /**
@@ -31,17 +36,35 @@ const messageComponentMap: Partial<Record<MessageType, ComponentType<any>>> = {
  * based on message type. Extensible for new message types.
  */
 export const LegendChatMessage = memo(
-  ({ message, isOutgoing, createdAtTime }: LegendChatMessageProps) => {
+  ({
+    message,
+    isOutgoing,
+    createdAtTime,
+    onMediaPress,
+  }: LegendChatMessageProps) => {
     const MessageComponent =
-      messageComponentMap[message?.contentType] ?? LegendTextMessage;
-
-    return (
-      <MessageComponent
-        message={message}
-        isOutgoing={isOutgoing}
-        createdAtTime={createdAtTime}
-      />
-    );
+      messageComponentMap[message?.contentType] ?? TextMessage;
+
+    // Only pass onMediaPress to components that use it
+    const mediaTypes = [
+      MessageType.PictureMessage,
+      MessageType.VideoMessage,
+      MERGED_MESSAGE_TYPE,
+    ];
+    const hasMediaPress =
+      mediaTypes.includes(message?.contentType) && onMediaPress;
+
+    const props: any = {
+      message,
+      isOutgoing,
+      createdAtTime,
+    };
+
+    if (hasMediaPress) {
+      props.onMediaPress = onMediaPress;
+    }
+
+    return <MessageComponent {...props} />;
   }
 );
 

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

@@ -0,0 +1,13 @@
+/**
+ * Message type components - re-exports from components/messages
+ * Stateless message components live in components/messages
+ */
+
+export type { BaseLegendMessageProps } from '../../../components/messages/types';
+export { formatMessageTime } from '../../../components/messages/types';
+export { TextMessage } from '../../../components/messages/textMessage';
+export { ImageMessage } from '../../../components/messages/imageMessage';
+export { VideoMessage } from '../../../components/messages/videoMessage';
+export { FileMessage } from '../../../components/messages/fileMessage';
+export { MergedMessage } from '../../../components/messages/mergedMessage';
+export { messageStyles } from '../../../components/messages/styles';

package/src/screens/chat-detail/types.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+
+import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { DConversationItem, DMessageItem } from '../../types/chat';
 import type { IUrlMetadata } from '../../types/common';
 import type { PeerType } from '@droppii/openim-rn-client-sdk';
@@ -59,10 +61,11 @@ export interface ChatAttachmentPanelProps {
 export interface ChatComposerProps {
   value?: string;
   placeholder?: string;
-  onChangeText?: (text: string) => void;
+  onChangeText?: (text?: string) => void;
   onSend?: (urlMetadata?: IUrlMetadata) => void;
   onPressAttach?: () => void;
   onPressEmoji?: () => void;
+  onMessageSent?: (message: DMessageItem) => void;
   showQuickActions?: boolean;
   quickActions?: DChatQuickAction[];
   attachmentActions?: DChatAttachmentAction[];
@@ -85,6 +88,7 @@ export interface ChatListProps {
   onLoadNewer?: () => void;
   isLoadingNewer?: boolean;
   hasMoreNewer?: boolean;
+  onMediaPress?: (items: MediaItem[], index?: number) => void;
 }
 
 export interface ChatDetailProps extends Omit<

package/src/screens/inbox/MessagesTab.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react';
-import { GestureResponderEvent, ActivityIndicator } from 'react-native';
+import { type GestureResponderEvent, ActivityIndicator } from 'react-native';
 import { KContainer, KDivider, KLabel, KColors } from '@droppii/libs';
 import { useConversationList } from '../../hooks/useConversationList';
 import { ThreadCard } from '../../components/ThreadCard';