@droppii-org/chat-mobile 0.2.24 → 0.2.26

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,14 +72,14 @@ 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);
     const timeLabel = formatMessageTime(createdAtTime);
 
     return (
-      <KContainer.View style={styles.wrapper}>
+      <>
         <KContainer.View
           style={[
             styles.bubble,
@@ -147,16 +139,18 @@ 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>
+        <KContainer.View row alignItems style={styles.timeLabel}>
+          {!isOutgoing && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL="0.25rem"
+            >
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
+        </KContainer.View>
+      </>
     );
   }
 );
@@ -197,4 +191,5 @@ const styles = StyleSheet.create({
     paddingVertical: KSpacingValue['0.5rem'],
     gap: 2,
   },
+  timeLabel: { gap: 4, marginTop: 2 },
 });

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;
@@ -18,23 +17,19 @@ export const MergedMessage = memo(
     );
 
     return (
-      <KContainer.View style={messageStyles.wrapper}>
-        <KContainer.View
-          style={[
-            messageStyles.bubble,
-            isOutgoing
-              ? messageStyles.bubbleSent
-              : messageStyles.bubbleReceived,
-          ]}
-        >
-          {imageMessages.length > 0 && (
-            <MergedImageGrid
-              images={imageMessages}
-              maxDisplay={3}
-              onMediaPress={onMediaPress}
-            />
-          )}
-        </KContainer.View>
+      <KContainer.View
+        style={[
+          messageStyles.bubble,
+          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
+        ]}
+      >
+        {imageMessages.length > 0 && (
+          <MergedImageGrid
+            images={imageMessages}
+            maxDisplay={3}
+            onMediaPress={onMediaPress}
+          />
+        )}
       </KContainer.View>
     );
   }

package/src/components/messages/styles.ts

@@ -36,4 +36,16 @@ export const messageStyles = StyleSheet.create({
     bottom: 0,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
   },
+  messageRowLeft: {
+    width: '100%',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.25rem'],
+    alignItems: 'flex-start',
+  },
+  messageRowRight: {
+    width: '100%',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.25rem'],
+    alignItems: 'flex-end',
+  },
 });

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

@@ -1,19 +1,13 @@
 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';
+import { StyleSheet } from 'react-native';
 export const TextMessage = memo(
-  ({ message, isOutgoing, createdAtTime }: TextMessageProps) => {
+  ({ message, isOutgoing, createdAtTime }: BaseLegendMessageProps) => {
     const messageText = getMessageText(message);
     const timeLabel = formatMessageTime(createdAtTime);
 
@@ -22,7 +16,7 @@ export const TextMessage = memo(
     }
 
     return (
-      <KContainer.View style={messageStyles.wrapper}>
+      <>
         <KContainer.View
           style={[
             messageStyles.bubble,
@@ -36,18 +30,24 @@ 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>
+        <KContainer.View row alignItems style={styles.timeLabel}>
+          {!isOutgoing && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL={'0.25rem'}
+            >
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
+        </KContainer.View>
+      </>
     );
   }
 );
 
 TextMessage.displayName = 'TextMessage';
+
+const styles = StyleSheet.create({
+  timeLabel: { gap: 4, marginTop: 2 },
+});

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);
@@ -30,14 +29,12 @@ export const VideoMessage = memo(
 
     if (!videoUrl) {
       return (
-        <KContainer.View style={messageStyles.wrapper}>
-          <KContainer.View
-            style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
-          >
-            <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
-              📹 [Video unavailable]
-            </KLabel.Text>
-          </KContainer.View>
+        <KContainer.View
+          style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
+        >
+          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+            📹 [Video unavailable]
+          </KLabel.Text>
         </KContainer.View>
       );
     }
@@ -47,7 +44,7 @@ export const VideoMessage = memo(
     );
 
     return (
-      <KContainer.View style={messageStyles.wrapper}>
+      <>
         <KContainer.Touchable
           onPress={handlePress}
           style={[
@@ -83,7 +80,7 @@ export const VideoMessage = memo(
             </KContainer.View>
           )}
         </KContainer.Touchable>
-      </KContainer.View>
+      </>
     );
   }
 );

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