@droppii-org/chat-mobile 0.2.24 → 0.2.26

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,10 @@ import {
 import type { ChatDetailProps } from './types';
 import { ChatDetailProvider } from '../../context/ChatDetailContext';
 import { normalizeUrl } from '../../utils/url';
+// import { ChatMessageAPI } from '../../services/message';
+import { MessageToolboxOverlay } from './messageToolbox/MessageToolboxOverlay';
+import type { MeasuredRect, MessageToolboxRef } from './messageToolbox/types';
+import type { DMessageItem } from '../../types/chat';
 
 const ChatDetail = memo(
   ({
@@ -44,6 +48,7 @@ const ChatDetail = memo(
   }: ChatDetailProps) => {
     const navigation = useNavigation();
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
+    const messageToolboxRef = useRef<MessageToolboxRef>(null);
     const conversation = useConversation(conversationId);
 
     const handleBackDefault = useCallback(() => {
@@ -73,6 +78,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);
@@ -99,6 +115,13 @@ const ChatDetail = memo(
       [onPressUrl]
     );
 
+    const handleMessageLongPress = useCallback(
+      (message: DMessageItem, rect: MeasuredRect) => {
+        messageToolboxRef.current?.show(message, rect);
+      },
+      []
+    );
+
     return (
       <ChatDetailProvider>
         <KContainer.Page flex edges={['bottom']}>
@@ -131,12 +154,18 @@ const ChatDetail = memo(
               hasMoreEarlier={hasMoreEarlier}
               onMediaPress={handleMediaPress}
               onPressUrl={handlePressUrl}
+              onLongPress={handleMessageLongPress}
             />
 
             <ChatComposer isEmptyMessage={messages?.length === 0} />
           </KeyboardAvoidingView>
 
           <MediaViewerModal ref={mediaViewerRef} />
+          <MessageToolboxOverlay
+            ref={messageToolboxRef}
+            currentUserId={currentUserId}
+            customMessageItemFactory={customMessageItemFactory}
+          />
         </KContainer.Page>
       </ChatDetailProvider>
     );

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, type View } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -18,6 +18,8 @@ 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';
+import { messageStyles } from './legend/messageTypes';
 
 export const ChatListLegend = memo(
   ({
@@ -25,7 +27,6 @@ export const ChatListLegend = memo(
     currentUserId = '',
     customMessageItemFactory,
     onLoadEarlier,
-    isLoading,
     isLoadingEarlier,
     hasMoreEarlier,
     onLoadNewer,
@@ -33,6 +34,7 @@ export const ChatListLegend = memo(
     hasMoreNewer,
     onMediaPress,
     onPressUrl,
+    onLongPress,
   }: ChatListProps) => {
     // Precompute all message data in single pass (O(n))
     const messageDataMap = useMemo(
@@ -41,6 +43,7 @@ export const ChatListLegend = memo(
     );
 
     const { isBotConversation, conversationFlow } = useChatDetailContext();
+    const { retryMessage } = useSendMessage();
 
     const lastMessageId = useMemo(() => {
       const last = messages[messages.length - 1];
@@ -59,6 +62,7 @@ export const ChatListLegend = memo(
     const itemHeightsRef = useRef<Map<string, number>>(new Map());
     const avgItemHeightRef = useRef(120);
     const heightDebounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+    const rowRefsMap = useRef<Map<string, View | null>>(new Map());
     const [showBadge, setShowBadge] = useState(false);
 
     const handleItemLayout = useCallback(
@@ -85,6 +89,16 @@ export const ChatListLegend = memo(
       []
     );
 
+    const handleMessageLongPress = useCallback(
+      (messageId: string, message: DMessageItem) => {
+        const node = rowRefsMap.current.get(messageId);
+        node?.measureInWindow((x, y, width, height) => {
+          onLongPress?.(message, { x, y, width, height });
+        });
+      },
+      [onLongPress]
+    );
+
     const onRunFlow = useCallback(
       (payload: IRunConversationFlowPayload) => {
         runFlow(payload);
@@ -129,10 +143,15 @@ export const ChatListLegend = memo(
             <>
               {dayStart && <LegendChatDay createdAt={createdAt} />}
               <KContainer.View
-                style={[
-                  styles.messageRow,
-                  isOutgoing ? styles.messageRowRight : styles.messageRowLeft,
-                ]}
+                ref={(node: View | null) => {
+                  if (node) rowRefsMap.current.set(messageId, node);
+                  else rowRefsMap.current.delete(messageId);
+                }}
+                style={
+                  isOutgoing
+                    ? messageStyles.messageRowRight
+                    : messageStyles.messageRowLeft
+                }
                 onLayout={(e) =>
                   handleItemLayout(messageId, e.nativeEvent.layout.height)
                 }
@@ -143,6 +162,12 @@ export const ChatListLegend = memo(
                   createdAtTime={createdAt}
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
+                  onRetry={retryMessage}
+                  onLongPress={
+                    onLongPress
+                      ? () => handleMessageLongPress(messageId, message)
+                      : undefined
+                  }
                   customMessageItemFactory={customMessageItemFactory}
                 />
                 {!!flowInputButtonsNode && (
@@ -174,11 +199,14 @@ export const ChatListLegend = memo(
         isBotConversation,
         onMediaPress,
         onPressUrl,
+        onLongPress,
+        handleMessageLongPress,
         customMessageItemFactory,
         onResetFlow,
         onRunFlow,
         conversationFlow?.flowCurrentStep,
         handleItemLayout,
+        retryMessage,
       ]
     );
 
@@ -327,16 +355,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 +374,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}
@@ -396,17 +424,6 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
   },
-  messageRow: {
-    width: '100%',
-    paddingHorizontal: KSpacingValue['0.75rem'],
-    marginBottom: KSpacingValue['0.25rem'],
-  },
-  messageRowLeft: {
-    alignItems: 'flex-start',
-  },
-  messageRowRight: {
-    alignItems: 'flex-end',
-  },
   content: {
     paddingVertical: KSpacingValue['0.75rem'],
     flexGrow: 1,

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

@@ -1,9 +1,10 @@
 import { KColors } from '@droppii/libs';
 import type { DChatQuickAction, DChatAttachmentAction } from './types';
+import { opacityToSolid } from '../../utils/ui';
 
 export const CHAT_BUBBLE_COLORS = {
-  received: 'rgba(131, 137, 157, 0.1)',
-  sent: 'rgba(0, 81, 255, 0.1)',
+  received: opacityToSolid('#83899d1a', KColors.white, 0.1),
+  sent: opacityToSolid('#0051ff1a', KColors.white, 0.1),
   text: KColors.gray.dark,
   timestamp: KColors.gray.light,
   dayLabel: KColors.gray.light,

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

@@ -1,6 +1,10 @@
-import { memo } from 'react';
-import type { ComponentType, ReactNode } from 'react';
+import { KContainer } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
 import type { DMessageItem } from '../../../types/chat';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
 import { TextMessage } from '../../../components/messages/textMessage';
@@ -9,10 +13,13 @@ 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';
+import { messageStyles } from './messageTypes';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
+  onLongPress?: () => void;
 };
 
 interface LegendChatMessageProps {
@@ -21,6 +28,8 @@ interface LegendChatMessageProps {
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
+  onRetry?: (message: MessageItem) => void;
+  onLongPress?: () => void;
   customMessageItemFactory?: (m: DMessageItem) => ReactNode;
 }
 
@@ -46,10 +55,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,12 +62,18 @@ export const LegendChatMessage = memo(
     createdAtTime,
     onMediaPress,
     onPressUrl,
+    onRetry,
+    onLongPress,
     customMessageItemFactory,
   }: LegendChatMessageProps) => {
-    console.log('customMessageItemFactory', customMessageItemFactory);
     const customNode = customMessageItemFactory?.(message);
+
     if (customNode) {
-      return customNode;
+      return (
+        <LongPressWrapper onLongPress={onLongPress}>
+          {customNode}
+        </LongPressWrapper>
+      );
     }
 
     const MessageComponent: ComponentType<MessageProps> =
@@ -74,15 +85,49 @@ 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 style={messageStyles.wrapper} row alignItems>
+        <MessageStatusIndicator
+          message={message}
+          isOutgoing={isOutgoing}
+          onRetry={onRetry}
+        />
+        <LongPressWrapper onLongPress={onLongPress}>
+          <MessageComponent
+            message={message}
+            isOutgoing={isOutgoing}
+            createdAtTime={createdAtTime}
+            onMediaPress={hasMediaPress ? onMediaPress : undefined}
+            onPressUrl={hasUrlPress ? onPressUrl : undefined}
+          />
+        </LongPressWrapper>
+      </KContainer.View>
     );
   }
 );
 
 LegendChatMessage.displayName = 'LegendChatMessage';
+
+const LongPressWrapper = ({
+  children,
+  onLongPress,
+}: PropsWithChildren<{ onLongPress?: () => void }>) => {
+  const longPressGesture = useMemo(
+    () =>
+      onLongPress
+        ? Gesture.LongPress().onStart(() => {
+            runOnJS(onLongPress)();
+          })
+        : null,
+    [onLongPress]
+  );
+
+  if (!longPressGesture) {
+    return children;
+  }
+
+  return (
+    <GestureDetector gesture={longPressGesture}>
+      <KContainer.View>{children}</KContainer.View>
+    </GestureDetector>
+  );
+};