@droppii-org/chat-mobile 0.2.23 → 0.2.25

package/src/components/messages/linkMessage/index.tsx

@@ -7,18 +7,10 @@ import {
   KColors,
   KSpacingValue,
 } from '@droppii/libs';
-import type { DMessageItem } from '../../../types/chat';
 import type { IUrlMetadata } from '../../../types/common';
 import { formatMessageTime } from '../types';
+import type { BaseLegendMessageProps } from '../types';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
-
-interface BaseLegendMessageProps {
-  message: DMessageItem;
-  isOutgoing: boolean;
-  createdAtTime: number;
-  onPressUrl?: (url: string) => void;
-}
-
 const parseUrlMetadata = (ex?: string): IUrlMetadata | undefined => {
   if (!ex) return undefined;
   try {
@@ -80,7 +72,7 @@ export const LinkMessage = memo(
     isOutgoing,
     createdAtTime,
     onPressUrl,
-  }: BaseLegendMessageProps) => {
+  }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const content = message?.urlTextElem?.content;
     const urls = message?.urlTextElem?.urls ?? [];
     const metadata = parseUrlMetadata(message.ex);
@@ -147,15 +139,17 @@ export const LinkMessage = memo(
           )}
         </KContainer.View>
 
-        {!isOutgoing && timeLabel ? (
-          <KLabel.Text
-            typo="TextXsNormal"
-            color={CHAT_BUBBLE_COLORS.timestamp}
-            marginL="0.25rem"
-          >
-            {timeLabel}
-          </KLabel.Text>
-        ) : null}
+        <KContainer.View row alignItems style={{ gap: 4, marginTop: 2 }}>
+          {!isOutgoing && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL="0.25rem"
+            >
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
+        </KContainer.View>
       </KContainer.View>
     );
   }

package/src/components/messages/mergedMessage/index.tsx

@@ -3,7 +3,6 @@ import { KContainer } from '@droppii/libs';
 import { MergedImageGrid } from '../../MergedImageGrid';
 import { messageStyles } from '../styles';
 import type { BaseLegendMessageProps } from '../types';
-
 export const MergedMessage = memo(
   ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
     const mergeElem = (message as any).mergeElem;

package/src/components/messages/textMessage/index.tsx

@@ -1,19 +1,12 @@
 import { memo } from 'react';
 import { KContainer, KLabel } from '@droppii/libs';
 import { getMessageText } from '../../../utils/legendListMessage';
-import type { DMessageItem } from '../../../types/chat';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import { formatMessageTime } from '../types';
-
-interface TextMessageProps {
-  message: DMessageItem;
-  isOutgoing: boolean;
-  createdAtTime: number;
-}
-
+import type { BaseLegendMessageProps } from '../types';
 export const TextMessage = memo(
-  ({ message, isOutgoing, createdAtTime }: TextMessageProps) => {
+  ({ message, isOutgoing, createdAtTime }: BaseLegendMessageProps) => {
     const messageText = getMessageText(message);
     const timeLabel = formatMessageTime(createdAtTime);
 
@@ -36,15 +29,17 @@ export const TextMessage = memo(
           </KLabel.Text>
         </KContainer.View>
 
-        {!isOutgoing && timeLabel ? (
-          <KLabel.Text
-            typo="TextXsNormal"
-            color={CHAT_BUBBLE_COLORS.timestamp}
-            marginL={'0.25rem'}
-          >
-            {timeLabel}
-          </KLabel.Text>
-        ) : null}
+        <KContainer.View row alignItems style={{ gap: 4, marginTop: 2 }}>
+          {!isOutgoing && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL={'0.25rem'}
+            >
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
+        </KContainer.View>
       </KContainer.View>
     );
   }

package/src/components/messages/videoMessage/index.tsx

@@ -7,7 +7,6 @@ import ChatImageDimens, {
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import type { BaseLegendMessageProps } from '../types';
-
 const formatDuration = (durationMs: number): string => {
   const totalSeconds = Math.floor(durationMs / 1000);
   const minutes = Math.floor(totalSeconds / 60);

package/src/config/uploadLimits.ts

@@ -0,0 +1,11 @@
+const MB = 1024 * 1024;
+
+export const UPLOAD_LIMITS = {
+  image: 15 * MB,
+  video: 200 * MB,
+  file: 50 * MB,
+} as const;
+
+// Max concurrent thumbnail generations and file uploads.
+// Keep low to avoid OOM on low-end devices.
+export const UPLOAD_CONCURRENCY = 2;

package/src/core/useChatListener.ts

@@ -2,30 +2,58 @@ import OpenIMSDK, {
   OpenIMEvent,
   type ConversationItem,
   type GroupMemberItem,
+  type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useCallback, useEffect } from 'react';
 import { useConversationStore } from '../store/conversation';
+import { useMessageStore } from '../store/message';
 
 export const useChatListener = () => {
+  const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
+
+  const onSendMessageProgress = useCallback(
+    ({ progress, message }: { progress: number; message: MessageItem }) => {
+      console.log('[Listener] SendMessageProgress', {
+        clientMsgID: message.clientMsgID,
+        status: message.status,
+        progress,
+      });
+      updateOneMessage(message);
+    },
+    [updateOneMessage]
+  );
+
   const onConversationChanged = useCallback(
     (conversations: ConversationItem[]) => {
-      console.log('onConversationChanged', conversations);
+      console.log('[Listener] OnConversationChanged', {
+        count: conversations.length,
+        ids: conversations.map((c) => c.conversationID),
+      });
       useConversationStore.getState().updateConversations(conversations);
     },
     []
   );
 
   const onNewConversation = useCallback((conversations: ConversationItem[]) => {
-    console.log('onNewConversation', conversations);
+    console.log('[Listener] OnNewConversation', {
+      count: conversations.length,
+      ids: conversations.map((c) => c.conversationID),
+    });
     useConversationStore.getState().updateConversations(conversations);
   }, []);
 
   const onGroupMemberAdded = useCallback((member: GroupMemberItem) => {
-    console.log('onGroupMemberAdded', member);
+    console.log('[Listener] OnGroupMemberAdded', {
+      userID: member.userID,
+      groupID: member.groupID,
+    });
   }, []);
 
   const onGroupMemberDeleted = useCallback((member: GroupMemberItem) => {
-    console.log('onGroupMemberDeleted', member);
+    console.log('[Listener] OnGroupMemberDeleted', {
+      userID: member.userID,
+      groupID: member.groupID,
+    });
   }, []);
 
   useEffect(() => {
@@ -37,6 +65,9 @@ export const useChatListener = () => {
     OpenIMSDK.on(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
     OpenIMSDK.on(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
 
+    // Message status
+    OpenIMSDK.on(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
+
     return () => {
       // Conversation
       OpenIMSDK.off(OpenIMEvent.OnConversationChanged, onConversationChanged);
@@ -45,6 +76,9 @@ export const useChatListener = () => {
       // Group members
       OpenIMSDK.off(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
       OpenIMSDK.off(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
+
+      // Message status
+      OpenIMSDK.off(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/core/useUserListener.ts

@@ -1,6 +1,7 @@
 import OpenIMSDK, {
   LoginStatus,
   OpenIMEvent,
+  type OpenIMEventBaseErrorType,
 } from '@droppii/openim-rn-client-sdk';
 import { useCallback, useEffect } from 'react';
 import { useUserStore } from '../store';
@@ -28,36 +29,45 @@ export const useUserListener = () => {
   }, [isLoggedIn, fetchAndUpdateUser]);
 
   const onConnecting = useCallback(() => {
+    console.log('[Listener] OnConnecting');
     useUserStore.getState().updateConnectStatus(LoginStatus.Logging);
   }, []);
 
   const onConnectSuccess = useCallback(() => {
+    console.log('[Listener] OnConnectSuccess');
     useUserStore.getState().updateConnectStatus(LoginStatus.Logged);
   }, []);
 
-  const onConnectFailed = useCallback(() => {
-    useUserStore.getState().updateConnectStatus(LoginStatus.Logout);
+  const onConnectFailed = useCallback((data: OpenIMEventBaseErrorType) => {
+    console.log('[Listener] OnConnectFailed', data);
   }, []);
 
-  const onSyncServerStart = useCallback(() => {
+  const onSyncServerStart = useCallback((isSyncing: boolean) => {
+    console.log('[Listener] OnSyncServerStart', { isSyncing });
     useUserStore.getState().updateSyncStatus(SyncStatus.Loading);
   }, []);
 
   const onSyncServerFinish = useCallback(() => {
+    console.log('[Listener] OnSyncServerFinish');
     useUserStore.getState().updateSyncStatus(SyncStatus.Success);
   }, []);
 
   const onSyncServerFailed = useCallback(() => {
+    console.log('[Listener] OnSyncServerFailed');
     useUserStore.getState().updateSyncStatus(SyncStatus.Failed);
   }, []);
 
+  const onUserToken = useCallback(() => {
+    console.log('[Listener] OnUserToken expired/invalid');
+  }, []);
+
   useEffect(() => {
     // User
     OpenIMSDK.on(OpenIMEvent.OnConnecting, onConnecting);
     OpenIMSDK.on(OpenIMEvent.OnConnectSuccess, onConnectSuccess);
     OpenIMSDK.on(OpenIMEvent.OnConnectFailed, onConnectFailed);
-    OpenIMSDK.on(OpenIMEvent.OnUserTokenExpired, onConnectFailed);
-    OpenIMSDK.on(OpenIMEvent.OnUserTokenInvalid, onConnectFailed);
+    OpenIMSDK.on(OpenIMEvent.OnUserTokenExpired, onUserToken);
+    OpenIMSDK.on(OpenIMEvent.OnUserTokenInvalid, onUserToken);
 
     // Sync
     OpenIMSDK.on(OpenIMEvent.OnSyncServerStart, onSyncServerStart);
@@ -69,8 +79,8 @@ export const useUserListener = () => {
       OpenIMSDK.off(OpenIMEvent.OnConnecting, onConnecting);
       OpenIMSDK.off(OpenIMEvent.OnConnectSuccess, onConnectSuccess);
       OpenIMSDK.off(OpenIMEvent.OnConnectFailed, onConnectFailed);
-      OpenIMSDK.on(OpenIMEvent.OnUserTokenExpired, onConnectFailed);
-      OpenIMSDK.on(OpenIMEvent.OnUserTokenInvalid, onConnectFailed);
+      OpenIMSDK.off(OpenIMEvent.OnUserTokenExpired, onUserToken);
+      OpenIMSDK.off(OpenIMEvent.OnUserTokenInvalid, onUserToken);
 
       // Sync
       OpenIMSDK.off(OpenIMEvent.OnSyncServerStart, onSyncServerStart);

package/src/hooks/message/useSendMessage.ts

@@ -1,23 +1,64 @@
 import { useCallback } from 'react';
 import type { UploadFileItem } from 'react-native-fs';
-import { useConversationStore } from '../../store';
-import type {
-  MessageItem,
-  MessageType,
-  OfflinePush,
-} from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../../store/conversation';
+import type { MessageItem, OfflinePush } from '@droppii/openim-rn-client-sdk';
+import { MessageStatus, MessageType } from '@droppii/openim-rn-client-sdk';
 import { extractUrls } from '../../utils/url';
 import OpenIMSDK from '@droppii/openim-rn-client-sdk';
 import type { IMessageItemEx } from '../../types/chat';
 import { useChatContext } from '../../context';
 import { generateContentBasedOnMessageType } from '../../utils/conversation';
 import { useMessageStore } from '../../store/message';
+
 import type { IUrlMetadata } from '../../types/common';
 import type { IRunConversationFlowPayload } from '../../types/flows';
 
+const buildSendParams = (
+  message: MessageItem,
+  recvID: string,
+  groupID: string,
+  extendMessageInfo: IMessageItemEx,
+  plainText: string
+) => ({
+  groupID,
+  recvID,
+  message: { ...message, ex: JSON.stringify(extendMessageInfo) || '{}' },
+  offlinePushInfo: generateOfflinePushInfo(message.contentType, plainText),
+});
+
 export const useSendMessage = () => {
   const applicationType = useChatContext().applicationType;
   const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
+  const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
+  const deleteOneMessage = useMessageStore((state) => state.deleteOneMessage);
+  const dispatchSend = useCallback(
+    async (
+      message: MessageItem,
+      recvID: string,
+      groupID: string,
+      extendMessageInfo: IMessageItemEx,
+      plainText: string
+    ) => {
+      pushNewMessage({ ...message, status: MessageStatus.Sending });
+
+      try {
+        const sent = await OpenIMSDK.sendMessage(
+          buildSendParams(
+            message,
+            recvID,
+            groupID,
+            extendMessageInfo,
+            plainText
+          )
+        );
+        deleteOneMessage(message.clientMsgID);
+        pushNewMessage(sent);
+      } catch {
+        updateOneMessage({ ...message, status: MessageStatus.Failed });
+      }
+    },
+    [pushNewMessage, updateOneMessage, deleteOneMessage]
+  );
 
   const sendMessage = useCallback(
     async ({
@@ -27,7 +68,7 @@ export const useSendMessage = () => {
       flow,
     }: {
       plainText?: string;
-      files?: UploadFileItem[]; //TODO
+      files?: UploadFileItem[];
       urlMetadata?: IUrlMetadata;
       flow?: IRunConversationFlowPayload;
     }) => {
@@ -41,7 +82,6 @@ export const useSendMessage = () => {
         if (!file) continue;
       }
 
-      // Allow empty text if urlMetadata (preview link) is present
       const hasText = !!plainText && plainText.trim() !== '';
       const hasPreview = !!urlMetadata?.url;
 
@@ -51,7 +91,6 @@ export const useSendMessage = () => {
         let message: MessageItem | null = null;
 
         if (isUrlMessage) {
-          // Create URL message even with empty text if preview exists
           message = await createUrlTextMessage(plainText || '', urls);
         } else if (hasText) {
           message = await createTextMessage(plainText);
@@ -68,27 +107,67 @@ export const useSendMessage = () => {
           flow,
         };
 
-        const successMessage = await OpenIMSDK.sendMessage({
-          groupID: groupID || '',
-          recvID: recvID || '',
-          message: {
-            ...message,
-            ex: JSON.stringify(extendMessageInfo) || '{}',
-          },
-          offlinePushInfo: generateOfflinePushInfo(
-            message.contentType,
-            plainText || ''
-          ),
-        });
-
-        pushNewMessage(successMessage);
+        await dispatchSend(
+          message,
+          recvID || '',
+          groupID || '',
+          extendMessageInfo,
+          plainText || ''
+        );
+      }
+    },
+    [applicationType, dispatchSend]
+  );
+
+  const retryMessage = useCallback(
+    async (message: MessageItem) => {
+      const { userID: recvID, groupID } =
+        useConversationStore.getState().getCurrentConversation() || {};
+      if (!recvID && !groupID) return;
+
+      updateOneMessage({ ...message, status: MessageStatus.Sending });
+
+      // Attachment messages were sent via sendMessageNotOss (URL already uploaded).
+      // Text/URL messages use sendMessage (SDK handles upload).
+      const isAttachment = (
+        [
+          MessageType.PictureMessage,
+          MessageType.VideoMessage,
+          MessageType.FileMessage,
+          MessageType.MergeMessage,
+        ] as MessageType[]
+      ).includes(message.contentType);
+
+      const params = {
+        recvID: recvID || '',
+        groupID: groupID || '',
+        message,
+      };
+
+      try {
+        const sent = isAttachment
+          ? await OpenIMSDK.sendMessageNotOss(params)
+          : await OpenIMSDK.sendMessage(
+              buildSendParams(
+                message,
+                recvID || '',
+                groupID || '',
+                JSON.parse(message.ex || '{}') as IMessageItemEx,
+                ''
+              )
+            );
+        deleteOneMessage(message.clientMsgID);
+        pushNewMessage(sent);
+      } catch {
+        updateOneMessage({ ...message, status: MessageStatus.Failed });
       }
     },
-    [applicationType, pushNewMessage]
+    [pushNewMessage, updateOneMessage, deleteOneMessage]
   );
 
   return {
     sendMessage,
+    retryMessage,
   };
 };
 

package/src/hooks/useChatCompose.ts

@@ -0,0 +1,195 @@
+import { useCallback, useMemo, useState } from 'react';
+import ImagePicker from 'react-native-image-crop-picker';
+import {
+  useImageAttachment,
+  type ImageWithUploadStatus,
+} from './useImageAttachment';
+import { useFileAttachment } from './useFileAttachment';
+import { useLinkPreview } from './useLinkPreview/useLinkPreview';
+import { useSendAttachment } from './useSendAttachment';
+import { useSendMessage } from './message/useSendMessage';
+import { isVideoFromPicker } from '../utils/imageUtils';
+import {
+  generateAndUploadVideoThumbnails,
+  type VideoWithUploadStatus,
+} from '../utils/videoThumbnailUpload';
+
+export function useChatCompose() {
+  const [text, setText] = useState('');
+
+  const imageAttachment = useImageAttachment();
+  const fileAttachment = useFileAttachment();
+  const linkPreview = useLinkPreview(text);
+  const { send: sendAttachments } = useSendAttachment();
+  const { sendMessage } = useSendMessage();
+
+  const isUploading = useMemo(
+    () =>
+      imageAttachment.selectedImages.some(
+        (img: ImageWithUploadStatus) => img.isUploading
+      ) || fileAttachment.selectedFiles.some((f) => f.isUploading || !!f.error),
+    [imageAttachment.selectedImages, fileAttachment.selectedFiles]
+  );
+
+  const canSend = useMemo(
+    () =>
+      (text.trim().length > 0 ||
+        imageAttachment.selectedImages.length > 0 ||
+        fileAttachment.selectedFiles.length > 0) &&
+      !isUploading,
+    [
+      text,
+      imageAttachment.selectedImages,
+      fileAttachment.selectedFiles,
+      isUploading,
+    ]
+  );
+
+  const send = useCallback(async () => {
+    const { selectedImages, clearAllImages } = imageAttachment;
+    const { selectedFiles, clearAllFiles } = fileAttachment;
+    const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
+
+    // --- Attachments ---
+    if (selectedImages.length > 0 || selectedFiles.length > 0) {
+      const actualImages = selectedImages.filter(
+        (img: ImageWithUploadStatus) => !isVideoFromPicker(img.image)
+      );
+      const videos = selectedImages.filter((img: ImageWithUploadStatus) =>
+        isVideoFromPicker(img.image)
+      );
+
+      const uploadedImages = actualImages.filter(
+        (img: ImageWithUploadStatus) => img.uploadedUrl
+      );
+      const uploadedVideos = videos.filter(
+        (v) => v.uploadedUrl
+      ) as unknown as VideoWithUploadStatus[];
+
+      // Thumbnails are generated + uploaded at pick time (useImageAttachment).
+      // Only fall back to generating here for videos that don't already have one
+      // (e.g. thumbnail generation failed or hadn't finished before send).
+      const videosMissingThumbnail = uploadedVideos.filter(
+        (v) => !v.thumbnailUrl
+      );
+      let videoThumbnails: Record<string, { url: string; size: number }> = {};
+      if (videosMissingThumbnail.length > 0) {
+        videoThumbnails = await generateAndUploadVideoThumbnails(
+          videosMissingThumbnail
+        );
+      }
+
+      // Send images + videos
+      if (uploadedImages.length > 0 || uploadedVideos.length > 0) {
+        const attachmentItems = [
+          ...uploadedImages.map((img: ImageWithUploadStatus) => ({
+            ...img,
+            type: 'image' as const,
+          })),
+          ...uploadedVideos.map(
+            (vid: VideoWithUploadStatus, vidIdx: number) => {
+              const videoId = vid.uploadedUrl || `video-${vidIdx}`;
+              const thumb = videoThumbnails[videoId];
+              return {
+                type: 'video' as const,
+                video: {
+                  path: vid.image.path,
+                  filename: vid.image.filename ?? undefined,
+                  size: vid.image.size ?? undefined,
+                  width: vid.image.width ?? undefined,
+                  height: vid.image.height ?? undefined,
+                  duration: vid.image.duration ?? undefined,
+                },
+                uploadProgress: vid.uploadProgress,
+                error: vid.error,
+                isUploading: vid.isUploading,
+                uploadedUrl: vid.uploadedUrl,
+                thumbnailUrl: vid.thumbnailUrl ?? thumb?.url,
+                thumbnailSize: vid.thumbnailSize ?? thumb?.size,
+              };
+            }
+          ),
+        ];
+
+        // Clear composer immediately — message is already in chat list with Sending status.
+        // User retries from the bubble, not the composer.
+        ImagePicker.clean().catch(() => {});
+        clearAllImages();
+        // Awaited so files (lower priority per attachment-priority config)
+        // only start sending after images/videos are done.
+        await sendAttachments(attachmentItems, undefined);
+      }
+
+      // Send each file as its own message (never merged), in priority order
+      // after images/videos, one at a time to preserve pick order.
+      const uploadedFiles = selectedFiles.filter(
+        (f) => f.uploadedUrl && !f.error
+      );
+      if (uploadedFiles.length > 0) {
+        clearAllFiles();
+        for (const file of uploadedFiles) {
+          await sendAttachments(
+            [
+              {
+                type: 'file' as const,
+                file: { path: file.uri, filename: file.name, size: file.size },
+                uploadProgress: 100,
+                error: null,
+                isUploading: false,
+                uploadedUrl: file.uploadedUrl,
+              },
+            ],
+            undefined
+          );
+        }
+      }
+    }
+
+    // --- Text / link preview ---
+    if (text.trim() || urlMeta) {
+      const plainText = text.trim();
+      // Clear composer immediately — message is already in chat list with Sending status.
+      // User retries from the bubble, not the composer.
+      setText('');
+      await sendMessage({ files: [], plainText, urlMetadata: urlMeta });
+    }
+  }, [
+    imageAttachment,
+    fileAttachment,
+    linkPreview.isVisible,
+    linkPreview.metadata,
+    sendAttachments,
+    sendMessage,
+    text,
+  ]);
+
+  return {
+    // Text
+    text,
+    setText,
+    // Attachments
+    selectedImages: imageAttachment.selectedImages,
+    selectedFiles: fileAttachment.selectedFiles,
+    isImagePreviewVisible: imageAttachment.isImagePreviewVisible,
+    isFilePreviewVisible: fileAttachment.isFilePreviewVisible,
+    addImages: imageAttachment.handleImageAttach,
+    addFiles: fileAttachment.handleFileAttach,
+    removeImage: imageAttachment.handleImageRemove,
+    removeFile: fileAttachment.handleFileRemove,
+    // Link preview
+    showLinkPreview: linkPreview.isVisible,
+    urlMetadata: linkPreview.metadata,
+    isMetadataLoading: linkPreview.isLoading,
+    dismissPreview: linkPreview.dismiss,
+    // Status
+    isUploading,
+    canSend,
+    // Actions
+    send,
+    clearAll: () => {
+      imageAttachment.clearAllImages();
+      fileAttachment.clearAllFiles();
+      setText('');
+    },
+  };
+}