@droppii-org/chat-mobile 0.2.24 → 0.2.25

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

@@ -1,9 +1,39 @@
 import { memo, useState, useCallback, useMemo } from 'react';
-import { StyleSheet, Image, useWindowDimensions } from 'react-native';
+import { StyleSheet, useWindowDimensions } from 'react-native';
 import { KContainer, KImage } from '@droppii/libs';
 import ChatImageDimens from '../../../utils/chatImageDimens';
 import { messageStyles } from '../styles';
 import type { BaseLegendMessageProps } from '../types';
+const DEFAULT_DIMS = { width: 300, height: 300 };
+
+// Module-level cache: survives component unmount/remount (e.g. status updates)
+// Bounded to ~500 entries (~40KB) — evicts oldest when full
+const MAX_CACHE = 500;
+const dimsCache = new Map<string, { width: number; height: number }>();
+const cacheDims = (url: string, dims: { width: number; height: number }) => {
+  if (dimsCache.size >= MAX_CACHE) {
+    dimsCache.delete(dimsCache.keys().next().value!);
+  }
+  dimsCache.set(url, dims);
+};
+
+const calcDisplayDims = (
+  imgWidth: number,
+  imgHeight: number,
+  windowWidth: number
+) => {
+  const aspectRatio = imgWidth / imgHeight;
+  const horizontalBuffer = 16;
+  const maxWidth = Math.floor(windowWidth * 0.75 - horizontalBuffer);
+  let finalWidth = maxWidth;
+  let finalHeight = maxWidth / aspectRatio;
+  const maxHeight = 500;
+  if (finalHeight > maxHeight) {
+    finalHeight = maxHeight;
+    finalWidth = finalHeight * aspectRatio;
+  }
+  return { width: Math.round(finalWidth), height: Math.round(finalHeight) };
+};
 
 export const ImageMessage = memo(
   ({ message, onMediaPress }: BaseLegendMessageProps) => {
@@ -15,60 +45,46 @@ export const ImageMessage = memo(
       pictureElem?.bigPicture?.url ||
       pictureElem?.sourcePicture?.url;
 
-    // Calculate dimensions respecting aspect ratio and 80% device width
-    const imageDimensions = useMemo(() => {
-      if (!rawImageUrl) return { width: 250, height: 250 };
-
-      const responseWidth =
-        pictureElem?.width ||
-        pictureElem?.bigPicture?.width ||
-        pictureElem?.snapshotPicture?.width;
-      const responseHeight =
-        pictureElem?.height ||
-        pictureElem?.bigPicture?.height ||
-        pictureElem?.snapshotPicture?.height;
+    const metaWidth =
+      pictureElem?.bigPicture?.width ||
+      pictureElem?.snapshotPicture?.width ||
+      pictureElem?.width;
+    const metaHeight =
+      pictureElem?.bigPicture?.height ||
+      pictureElem?.snapshotPicture?.height ||
+      pictureElem?.height;
+
+    // Fallback dims from onLoad when metadata is missing (zero extra request)
+    const cachedDims = rawImageUrl
+      ? (dimsCache.get(rawImageUrl) ?? null)
+      : null;
+    const [loadedDims, setLoadedDims] = useState<{
+      width: number;
+      height: number;
+    } | null>(cachedDims);
 
-      let imgWidth = responseWidth;
-      let imgHeight = responseHeight;
-
-      // If no dimensions in response, try to resolve from image source
-      if (!imgWidth || !imgHeight) {
-        try {
-          const source = Image.resolveAssetSource({ uri: rawImageUrl });
-          imgWidth = source?.width || 300;
-          imgHeight = source?.height || 300;
-        } catch {
-          // Fallback to default if resolution fails
-          imgWidth = 300;
-          imgHeight = 300;
+    const imageDimensions = useMemo(() => {
+      if (!rawImageUrl) return DEFAULT_DIMS;
+      const srcWidth = metaWidth || loadedDims?.width;
+      const srcHeight = metaHeight || loadedDims?.height;
+      if (!srcWidth || !srcHeight) return DEFAULT_DIMS;
+      return calcDisplayDims(srcWidth, srcHeight, windowWidth);
+    }, [metaWidth, metaHeight, loadedDims, rawImageUrl, windowWidth]);
+
+    const handleLoad = useCallback(
+      (e: any) => {
+        setIsLoading(false);
+        if (!metaWidth || !metaHeight) {
+          const { width, height } = e?.nativeEvent ?? {};
+          if (width && height) {
+            const dims = { width, height };
+            if (rawImageUrl) cacheDims(rawImageUrl, dims);
+            setLoadedDims(dims);
+          }
         }
-      }
-
-      const aspectRatio = imgWidth / imgHeight;
-      // Account for all margins/padding: use 75% of window width with buffer
-      const horizontalBuffer = 16; // Left and right combined buffer
-      const maxWidth = Math.floor(windowWidth * 0.75 - horizontalBuffer);
-
-      // Calculate final dimensions
-      let finalWidth = maxWidth;
-      let finalHeight = maxWidth / aspectRatio;
-
-      // Cap maximum height to avoid overly tall images
-      const maxHeight = 500;
-      if (finalHeight > maxHeight) {
-        finalHeight = maxHeight;
-        finalWidth = finalHeight * aspectRatio;
-      }
-
-      return {
-        width: Math.round(finalWidth),
-        height: Math.round(finalHeight),
-      };
-    }, [pictureElem, rawImageUrl, windowWidth]);
-
-    const handleLoadEnd = useCallback(() => {
-      setIsLoading(false);
-    }, []);
+      },
+      [metaWidth, metaHeight, rawImageUrl]
+    );
 
     const handlePress = useCallback(() => {
       onMediaPress?.([{ url: rawImageUrl }], 0);
@@ -78,12 +94,12 @@ export const ImageMessage = memo(
       return null;
     }
 
-    // Use dynamic optimization matching calculated dimensions
     const optimizedUrl = ChatImageDimens.getOptimizedImageUrlWithDimensions(
       rawImageUrl,
       imageDimensions.width,
       imageDimensions.height
     );
+
     return (
       <KContainer.View style={[messageStyles.wrapper, styles.wrapper]}>
         <KContainer.Touchable
@@ -102,9 +118,8 @@ export const ImageMessage = memo(
             width={imageDimensions.width}
             height={imageDimensions.height}
             style={[messageStyles.imageBubble]}
-            onLoadEnd={handleLoadEnd}
+            onLoad={handleLoad}
           />
-
           {isLoading && <KContainer.View style={styles.skeleton} />}
         </KContainer.Touchable>
       </KContainer.View>
@@ -116,7 +131,6 @@ ImageMessage.displayName = 'ImageMessage';
 
 const styles = StyleSheet.create({
   wrapper: {
-    // paddingRight: 8,
     overflow: 'hidden',
   },
   skeleton: {

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

@@ -1,7 +1,7 @@
 const MB = 1024 * 1024;
 
 export const UPLOAD_LIMITS = {
-  image: 5 * MB,
+  image: 15 * MB,
   video: 200 * MB,
   file: 50 * MB,
 } as const;

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,
   };
 };