@droppii-org/chat-mobile 0.2.24 → 0.2.25

package/src/hooks/useChatCompose.ts

@@ -66,11 +66,17 @@ export function useChatCompose() {
         (v) => v.uploadedUrl
       ) as unknown as VideoWithUploadStatus[];
 
-      // Generate + upload thumbnails for gallery videos
+      // 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 (uploadedVideos.length > 0) {
-        videoThumbnails =
-          await generateAndUploadVideoThumbnails(uploadedVideos);
+      if (videosMissingThumbnail.length > 0) {
+        videoThumbnails = await generateAndUploadVideoThumbnails(
+          videosMissingThumbnail
+        );
       }
 
       // Send images + videos
@@ -98,51 +104,54 @@ export function useChatCompose() {
                 error: vid.error,
                 isUploading: vid.isUploading,
                 uploadedUrl: vid.uploadedUrl,
-                thumbnailUrl: thumb?.url,
-                thumbnailSize: thumb?.size,
+                thumbnailUrl: vid.thumbnailUrl ?? thumb?.url,
+                thumbnailSize: vid.thumbnailSize ?? thumb?.size,
               };
             }
           ),
         ];
 
-        const success = await sendAttachments(attachmentItems, undefined);
-        if (success) {
-          // Release all picker temp files to free native memory.
-          ImagePicker.clean().catch(() => {});
-          clearAllImages();
-        }
+        // 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
+      // 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
       );
-      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
-        );
+      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
+          );
+        }
       }
-      if (uploadedFiles.length > 0) clearAllFiles();
     }
 
     // --- Text / link preview ---
     if (text.trim() || urlMeta) {
-      await sendMessage({
-        files: [],
-        plainText: text.trim(),
-        urlMetadata: 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,

package/src/hooks/useChatMessages.ts

@@ -11,6 +11,8 @@ import {
   mergeMessages,
 } from '../utils/message';
 import { useMessageStore } from '../store/message';
+import { useUserStore } from '../store/user';
+import { useChatContext } from '../context';
 
 type UseChatMessagesOptions = {
   conversationId: string;
@@ -30,7 +32,11 @@ export function useChatMessages({
   const pushNewMessage = useMessageStore((s) => s.pushNewMessage);
   const reset = useMessageStore((s) => s.reset);
 
-  const [currentUserId, setCurrentUserId] = useState<string>();
+  const { applicationType } = useChatContext();
+  const cachedUserId = useUserStore((s) => s.user?.userID);
+  const [currentUserId, setCurrentUserId] = useState<string | undefined>(
+    cachedUserId
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
   const [isLoadingNewer, setIsLoadingNewer] = useState(false);
@@ -46,27 +52,60 @@ export function useChatMessages({
     setError(null);
 
     try {
-      const [history, userId] = await Promise.all([
+      // Fetch userId and history independently so an offline SDK state
+      // doesn't block reading local SQLite history.
+      const [historyResult, userIdResult] = await Promise.allSettled([
         ChatMessageAPI.fetchHistoryMessages(conversationId, {
           count: pageSize,
+          applicationType,
         }),
         ChatMessageAPI.getCurrentUserId(),
       ]);
 
-      const initialMessages = history.messageList as DMessageItem[];
-
-      setCurrentUserId(userId);
-      setMessages(mergeMessages([], initialMessages), !history.isEnd);
+      if (userIdResult.status === 'fulfilled') {
+        setCurrentUserId(userIdResult.value);
+      }
 
-      ChatMessageAPI.markConversationAsRead(conversationId).catch(
-        () => undefined
-      );
+      if (historyResult.status === 'fulfilled') {
+        const initialMessages = historyResult.value
+          .messageList as DMessageItem[];
+        setMessages(
+          mergeMessages([], initialMessages),
+          !historyResult.value.isEnd
+        );
+        ChatMessageAPI.markConversationAsRead(conversationId).catch(
+          () => undefined
+        );
+      } else {
+        // Fallback: try searchLocalMessages to verify local SQLite is accessible offline
+        console.warn(
+          '[useChatMessages] getAdvancedHistoryMessageList failed, trying searchLocalMessages fallback:',
+          historyResult.reason
+        );
+        const localResult = await ChatMessageAPI.searchLocalMessages(
+          conversationId,
+          { count: pageSize }
+        );
+        const localMessages = (localResult?.searchResultItems ?? []).flatMap(
+          (item: any) => item.messageList ?? []
+        ) as DMessageItem[];
+        console.log(
+          '[useChatMessages] searchLocalMessages fallback result:',
+          localMessages.length,
+          'messages'
+        );
+        if (localMessages.length > 0) {
+          setMessages(mergeMessages([], localMessages), false);
+        } else {
+          throw historyResult.reason;
+        }
+      }
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setIsLoading(false);
     }
-  }, [conversationId, pageSize, setMessages]);
+  }, [applicationType, conversationId, pageSize, setMessages]);
 
   const onLoadEarlier = useCallback(async () => {
     if (isLoadingEarlier || !hasMoreEarlier || !messages.length) return;
@@ -148,6 +187,11 @@ export function useChatMessages({
 
   const appendIncomingMessages = useCallback(
     (incoming: MessageItem[]) => {
+      console.log('[Listener] OnRecvNewMessages', {
+        total: incoming.length,
+        conversationId: conversationIdRef.current,
+        clientMsgIDs: incoming.map((m) => m.clientMsgID),
+      });
       const relevant = incoming.filter((message) =>
         belongsToConversation(message, conversationIdRef.current)
       );

package/src/hooks/useFileAttachment.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { ImageUploadAPI } from '../services/imageUpload';
 import DeviceUtils from '../utils/device';
-import UIUtils from '../utils/ui';
+import { UIUtils } from '../utils/UIUtils';
 import { trans } from '../translation';
 import { MAX_FILE_SIZE } from '../services/attachmentHandlers';
 

package/src/hooks/useFileDownload.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Platform, Share } from 'react-native';
 import RNFS from 'react-native-fs';
 import FileViewer from 'react-native-file-viewer';
-import UIUtils from '../utils/ui';
+import { UIUtils } from '../utils/UIUtils';
 import { trans } from '../translation';
 
 export type DownloadStatus = 'idle' | 'downloading' | 'done' | 'error';

package/src/hooks/useImageAttachment.ts

@@ -4,7 +4,7 @@ import type {
   Video as PickedVideo,
 } from 'react-native-image-crop-picker';
 import DeviceUtils from '../utils/device';
-import UIUtils from '../utils/ui';
+import { UIUtils } from '../utils/UIUtils';
 import { trans } from '../translation';
 import { getMimeType, isVideoFromPicker } from '../utils/imageUtils';
 import { UPLOAD_CONCURRENCY, UPLOAD_LIMITS } from '../config/uploadLimits';
@@ -86,9 +86,14 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
       } catch (error: unknown) {
         const msg =
           error instanceof Error
-            ? error.message
+            ? error?.message
             : trans('chat:image_upload_failed');
         updateImageStatus(index, { isUploading: false, error: msg });
+        UIUtils.toast.open({
+          title: trans('chat:image_upload_failed'),
+          message: trans('chat:generic_error'),
+          theme: 'danger',
+        });
       }
     },
     [updateImageStatus]
@@ -171,11 +176,14 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
 
         const oversizedItems = images.filter((img) => !isWithinLimit(img));
         if (oversizedItems.length > 0) {
+          const isVideo = oversizedItems.some(isVideoFromPicker);
+          const maxSize = Math.floor(
+            (isVideo ? UPLOAD_LIMITS.video : UPLOAD_LIMITS.image) / 1024 / 1024
+          );
           UIUtils.toast.open({
             title: trans(
-              oversizedItems.some(isVideoFromPicker)
-                ? 'chat:video_too_large'
-                : 'chat:image_too_large'
+              isVideo ? 'chat:video_too_large' : 'chat:image_too_large',
+              { maxSize: String(maxSize) }
             ),
             theme: 'danger',
           });

package/src/index.tsx

@@ -52,3 +52,5 @@ export type {
 } from './screens/chat-detail';
 
 export type { PeerType } from '@droppii/openim-rn-client-sdk';
+
+export { registerUIUtils, UIUtils } from './utils/UIUtils';

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

@@ -23,6 +23,7 @@ import {
 import type { ChatDetailProps } from './types';
 import { ChatDetailProvider } from '../../context/ChatDetailContext';
 import { normalizeUrl } from '../../utils/url';
+// import { ChatMessageAPI } from '../../services/message';
 
 const ChatDetail = memo(
   ({
@@ -73,6 +74,17 @@ const ChatDetail = memo(
       useConversationStore.getState().setCurrentConversation(conversationId);
     }, [conversationId]);
 
+    // useEffect(() => {
+    //   if (!conversationId) return;
+    //   ChatMessageAPI.searchLocalMessages(conversationId, { count: 20 })
+    //     .then((result) => {
+    //       console.log('[TEST searchLocalMessages] success:', result);
+    //     })
+    //     .catch((err) => {
+    //       console.log('[TEST searchLocalMessages] error:', err);
+    //     });
+    // }, [conversationId]);
+
     const resolvedTitle = title ?? getConversationTitle(conversation);
     const resolvedAvatarUri =
       avatarUri ?? getConversationAvatarUri(conversation);

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

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo, useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -18,6 +18,7 @@ import { getFlowInputButtonsNode } from '../../utils/flows';
 import { InputButtonFlow } from '../../components/flows/inputButtons';
 import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
 import type { IRunConversationFlowPayload } from '../../types/flows';
+import { useSendMessage } from '../../hooks/message/useSendMessage';
 
 export const ChatListLegend = memo(
   ({
@@ -25,7 +26,6 @@ export const ChatListLegend = memo(
     currentUserId = '',
     customMessageItemFactory,
     onLoadEarlier,
-    isLoading,
     isLoadingEarlier,
     hasMoreEarlier,
     onLoadNewer,
@@ -41,6 +41,7 @@ export const ChatListLegend = memo(
     );
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
+    const { retryMessage } = useSendMessage();
 
     const lastMessageId = useMemo(() => {
       const last = messages[messages.length - 1];
@@ -143,6 +144,7 @@ export const ChatListLegend = memo(
                   createdAtTime={createdAt}
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
+                  onRetry={retryMessage}
                   customMessageItemFactory={customMessageItemFactory}
                 />
                 {!!flowInputButtonsNode && (
@@ -179,6 +181,7 @@ export const ChatListLegend = memo(
         onRunFlow,
         conversationFlow?.flowCurrentStep,
         handleItemLayout,
+        retryMessage,
       ]
     );
 
@@ -327,16 +330,16 @@ export const ChatListLegend = memo(
       };
     }, []);
 
-    if (isLoading) {
-      return (
-        <KContainer.View flex center background={KColors.white}>
-          <ActivityIndicator
-            color={KColors.palette.primary.w400}
-            size="small"
-          />
-        </KContainer.View>
-      );
-    }
+    // if (isLoading) {
+    //   return (
+    //     <KContainer.View flex center background={KColors.white}>
+    //       <ActivityIndicator
+    //         color={KColors.palette.primary.w400}
+    //         size="small"
+    //       />
+    //     </KContainer.View>
+    //   );
+    // }
 
     return (
       <KContainer.View flex background={KColors.white} style={styles.container}>
@@ -346,7 +349,7 @@ export const ChatListLegend = memo(
           renderItem={renderItem}
           estimatedItemSize={avgItemHeightRef.current}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems={false}
+          recycleItems={true}
           extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}

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

@@ -1,6 +1,8 @@
 import { memo } from 'react';
 import type { ComponentType, ReactNode } from 'react';
+import { KContainer } from '@droppii/libs';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../../../types/chat';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
 import { TextMessage } from '../../../components/messages/textMessage';
@@ -9,6 +11,7 @@ import { VideoMessage } from '../../../components/messages/videoMessage';
 import { FileMessage } from '../../../components/messages/fileMessage';
 import { LinkMessage } from '../../../components/messages/linkMessage';
 import { MergedMessage } from '../../../components/messages/mergedMessage';
+import { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 
 type MessageProps = BaseLegendMessageProps & {
@@ -21,6 +24,7 @@ interface LegendChatMessageProps {
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
+  onRetry?: (message: MessageItem) => void;
   customMessageItemFactory?: (m: DMessageItem) => ReactNode;
 }
 
@@ -46,10 +50,6 @@ const MEDIA_TYPES: number[] = [
   MERGED_MESSAGE_TYPE,
 ];
 
-/**
- * Dispatcher component - renders the appropriate message component
- * based on message type. Extensible for new message types.
- */
 export const LegendChatMessage = memo(
   ({
     message,
@@ -57,9 +57,9 @@ export const LegendChatMessage = memo(
     createdAtTime,
     onMediaPress,
     onPressUrl,
+    onRetry,
     customMessageItemFactory,
   }: LegendChatMessageProps) => {
-    console.log('customMessageItemFactory', customMessageItemFactory);
     const customNode = customMessageItemFactory?.(message);
     if (customNode) {
       return customNode;
@@ -74,13 +74,20 @@ export const LegendChatMessage = memo(
       onPressUrl && message?.contentType === MessageType.UrlTextMessage;
 
     return (
-      <MessageComponent
-        message={message}
-        isOutgoing={isOutgoing}
-        createdAtTime={createdAtTime}
-        onMediaPress={hasMediaPress ? onMediaPress : undefined}
-        onPressUrl={hasUrlPress ? onPressUrl : undefined}
-      />
+      <KContainer.View row alignItems>
+        <MessageStatusIndicator
+          message={message}
+          isOutgoing={isOutgoing}
+          onRetry={onRetry}
+        />
+        <MessageComponent
+          message={message}
+          isOutgoing={isOutgoing}
+          createdAtTime={createdAtTime}
+          onMediaPress={hasMediaPress ? onMediaPress : undefined}
+          onPressUrl={hasUrlPress ? onPressUrl : undefined}
+        />
+      </KContainer.View>
     );
   }
 );

package/src/services/attachmentOrchestrator.ts

@@ -1,4 +1,8 @@
-import OpenIMSDK, { type MessageItem } from '@droppii/openim-rn-client-sdk';
+import OpenIMSDK, {
+  MessageStatus,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+
 import type {
   Attachment,
   AttachmentSendOptions,
@@ -30,7 +34,6 @@ export namespace AttachmentOrchestratorService {
     }
 
     // 1. Validate all attachments
-    console.log('[AttachmentOrchestrator] Validating prepared attachments...');
     for (const att of attachments) {
       try {
         const handler = getAttachmentHandler(att.type);
@@ -267,32 +270,53 @@ export namespace AttachmentOrchestratorService {
       }
     );
 
-    for (let i = 0; i < allMessages.length; i++) {
-      const message = allMessages[i] as MessageItem;
-      console.log(
-        '[AttachmentOrchestrator] Sending message',
-        i + 1,
-        'of',
-        allMessages.length
-      );
+    const recvID = currentConversation.userID || '';
+    const groupID = currentConversation.groupID || '';
 
-      const result = await OpenIMSDK.sendMessageNotOss({
-        recvID: currentConversation.userID || '',
-        groupID: currentConversation.groupID || '',
-        message,
+    // Push all messages as "Sending" immediately so the user sees every
+    // bubble right away, instead of waiting for each network call in turn.
+    for (const m of allMessages) {
+      useMessageStore.getState().pushNewMessage({
+        ...(m as MessageItem),
+        status: MessageStatus.Sending,
       });
+    }
 
-      lastMsgId = result?.clientMsgID || result?.serverMsgID || '';
-      console.log('[AttachmentOrchestrator] Message sent:', {
-        messageId: lastMsgId,
-        index: i + 1,
-      });
+    const sendResults = await Promise.allSettled(
+      allMessages.map(async (m) => {
+        const message = m as MessageItem;
+        const result = await OpenIMSDK.sendMessageNotOss({
+          recvID,
+          groupID,
+          message,
+        });
 
-      if (result) {
-        useMessageStore.getState().pushNewMessage(result);
+        if (result) {
+          useMessageStore.getState().deleteOneMessage(message.clientMsgID);
+          useMessageStore.getState().pushNewMessage(result);
+        }
+        return result?.clientMsgID || result?.serverMsgID || '';
+      })
+    );
+
+    let firstSendError: unknown;
+    for (let i = 0; i < sendResults.length; i++) {
+      const settled = sendResults[i]!;
+      if (settled.status === 'fulfilled') {
+        lastMsgId = settled.value || lastMsgId;
+      } else {
+        firstSendError = firstSendError ?? settled.reason;
+        useMessageStore.getState().updateOneMessage({
+          ...(allMessages[i] as MessageItem),
+          status: MessageStatus.Failed,
+        });
       }
     }
 
+    if (!lastMsgId && firstSendError) {
+      throw firstSendError;
+    }
+
     return lastMsgId;
   }
 }

package/src/services/message.ts

@@ -20,16 +20,15 @@ export namespace ChatMessageAPI {
       count?: number;
       startClientMsgID?: string;
       lastMinSeq?: number;
+      applicationType?: string;
     }
   ): Promise<HistoryMessageResult> {
-    return OpenIMSDK.getAdvancedHistoryMessageList({
+    return OpenIMSDK.getAdvancedHistoryMessageListApp({
       conversationID,
       count: options?.count ?? DEFAULT_PAGE_SIZE,
       startClientMsgID: options?.startClientMsgID ?? '',
       viewType: ViewType.History,
-      // ...(options?.startClientMsgID
-      //   ? { lastMinSeq: options.lastMinSeq ?? 0 }
-      //   : {}),
+      applicationType: options?.applicationType ?? '',
     }) as Promise<HistoryMessageResult>;
   }
 
@@ -50,6 +49,24 @@ export namespace ChatMessageAPI {
     return sentMessage;
   }
 
+  export async function searchLocalMessages(
+    conversationID: string,
+    options?: {
+      keywordList?: string[];
+      messageTypeList?: number[];
+      pageIndex?: number;
+      count?: number;
+    }
+  ) {
+    return OpenIMSDK.searchLocalMessages({
+      conversationID,
+      keywordList: options?.keywordList ?? ['a'],
+      messageTypeList: options?.messageTypeList,
+      pageIndex: options?.pageIndex ?? 1,
+      count: options?.count ?? 20,
+    });
+  }
+
   export async function markConversationAsRead(conversationID: string) {
     return OpenIMSDK.markConversationMessageAsRead(conversationID);
   }

package/src/translation/resources/i18n.ts

@@ -11,10 +11,13 @@ const i18nKey: Record<string, string> = {
   'chat:file_download_failed': 'Tải tệp thất bại',
   'chat:file_open_failed': 'Không thể mở tệp này',
   'chat:image_preview': 'Xem trước ảnh',
-  'chat:image_too_large': 'Ảnh quá lớn. Tối đa 5MB',
-  'chat:video_too_large': 'Video quá lớn. Tối đa 200MB',
+  'chat:image_too_large':
+    'Hình ảnh tải lên không hợp lệ. Kích thước hình ảnh không được vượt quá {{maxSize}}MB',
+  'chat:video_too_large':
+    'Video tải lên không hợp lệ. Kích thước video không được vượt quá {{maxSize}}MB',
   'chat:image_sent': 'Đã gửi ảnh',
-  'chat:image_upload_failed': 'Lỗi tải ảnh',
+  'chat:image_upload_failed': 'Có lỗi xảy ra vui lòng thử lại',
+  'chat:generic_error': 'Có lỗi xảy ra vui lòng thử lại',
   'chat:failed_to_send_message': 'Không thể gửi tin nhắn. Thử lại?',
   'chat:filename': 'Tên tệp',
   'chat:file_size': 'Kích thước',

package/src/types/chat.ts

@@ -20,6 +20,12 @@ type LogGA = (
   provider?: `${keyof typeof EventProvider}`
 ) => void;
 
+export interface ChatUIAdapter {
+  toast?: { open: (params: any) => void };
+  alert?: { open: (params: any) => void };
+  popup?: { open: (params: any) => void };
+}
+
 export interface ChatContextType {
   logGA?: LogGA;
   applicationType: DChatApplicationType;