@droppii-org/chat-mobile 0.2.24 → 0.2.26

package/src/screens/chat-detail/messageToolbox/MessageToolboxMenu.tsx

@@ -0,0 +1,114 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import { trans } from '../../../translation';
+
+interface MessageToolboxMenuProps {
+  showCopyMessage?: boolean;
+  showCopyMessageLink?: boolean;
+  showRetryMessage?: boolean;
+  onCopyMessage: () => void;
+  onCopyMessageLink: () => void;
+  onRetryMessage: () => void;
+}
+
+export const MessageToolboxMenu = memo(
+  ({
+    showCopyMessage,
+    showCopyMessageLink,
+    showRetryMessage,
+    onCopyMessage,
+    onCopyMessageLink,
+    onRetryMessage,
+  }: MessageToolboxMenuProps) => {
+    if (!showCopyMessage && !showCopyMessageLink && !showRetryMessage) {
+      return null;
+    }
+
+    return (
+      <KContainer.View style={styles.card}>
+        <KContainer.VisibleView visible={!!showCopyMessage}>
+          <KContainer.Touchable style={styles.row} onPress={onCopyMessage}>
+            <KImage.VectorIcons
+              name="copy-o"
+              provider="DroppiiNew"
+              size={24}
+              color={KColors.gray.dark}
+            />
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.gray.dark}
+              marginL="0.75rem"
+            >
+              {trans('chat:copy_message')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+
+        <KContainer.VisibleView visible={!!showCopyMessageLink}>
+          <KContainer.Touchable style={styles.row} onPress={onCopyMessageLink}>
+            <KImage.VectorIcons
+              name="link-o"
+              provider="DroppiiNew"
+              size={24}
+              color={KColors.gray.dark}
+            />
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.gray.dark}
+              marginL="0.75rem"
+            >
+              {trans('chat:copy_message_link')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+
+        <KContainer.VisibleView visible={!!showRetryMessage}>
+          <KContainer.Touchable style={styles.row} onPress={onRetryMessage}>
+            <KImage.VectorIcons
+              name="arrow-reload-o"
+              provider="DroppiiNew"
+              size={24}
+              color={KColors.danger.normal}
+            />
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.danger.normal}
+              marginL="0.75rem"
+            >
+              {trans('chat:retry_message')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.VisibleView>
+      </KContainer.View>
+    );
+  }
+);
+
+MessageToolboxMenu.displayName = 'MessageToolboxMenu';
+
+const styles = StyleSheet.create({
+  card: {
+    minWidth: 220,
+    paddingVertical: KSpacingValue['0.5rem'],
+    borderRadius: KSpacingValue['1rem'],
+    backgroundColor: KColors.white,
+    shadowColor: KColors.black,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: KSpacingValue['1rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+  },
+});

package/src/screens/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { Modal, Pressable, StyleSheet } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { UIUtils } from '../../../utils/UIUtils';
+import { trans } from '../../../translation';
+import { LegendChatMessage } from '../legend/LegendChatMessage';
+import { MessageToolboxMenu } from './MessageToolboxMenu';
+import {
+  getCopyableMessageText,
+  useMessageToolboxItems,
+} from './messageToolbox.utils';
+import type { DMessageItem } from '../../../types/chat';
+import type { MeasuredRect, MessageToolboxRef } from './types';
+import { MessageToolboxWrapper } from './MessageToolboxWrapper';
+import type { ReactNode } from 'react';
+import { useSendMessage } from '../../../hooks/message/useSendMessage';
+
+interface MessageToolboxOverlayProps {
+  currentUserId?: string;
+  customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+}
+
+export const MessageToolboxOverlay = forwardRef<
+  MessageToolboxRef,
+  MessageToolboxOverlayProps
+>(({ currentUserId = '', customMessageItemFactory }, ref) => {
+  const [visible, setVisible] = useState(false);
+  const [message, setMessage] = useState<DMessageItem | undefined>(undefined);
+  const [rect, setRect] = useState<MeasuredRect | null>(null);
+  const toolboxItems = useMessageToolboxItems(message);
+  const { retryMessage } = useSendMessage();
+  console.log(message);
+
+  const hide = useCallback(() => {
+    setVisible(false);
+    setMessage(undefined);
+    setRect(null);
+  }, []);
+
+  const show = useCallback((msg: DMessageItem, msgRect: MeasuredRect) => {
+    setMessage(msg);
+    setRect(msgRect);
+    setVisible(true);
+  }, []);
+
+  useImperativeHandle(ref, () => ({ show, hide }), [show, hide]);
+
+  const handleCopyMessage = useCallback(() => {
+    if (!message) return;
+    const text = getCopyableMessageText(message);
+    if (text) {
+      Clipboard.setString(text);
+      UIUtils.toast.open({
+        title: trans('chat:copy_message_success'),
+        theme: 'success',
+      });
+    }
+    hide();
+  }, [message, hide]);
+
+  const handleCopyMessageLink = useCallback(() => {
+    if (!message) return;
+    // UI-only for now: real shareable deeplink format (BR-001) is not decided yet.
+    const placeholderLink = `${message.recvID || message.groupID}:${message.clientMsgID ?? message.serverMsgID ?? ''}`;
+    Clipboard.setString(placeholderLink);
+    UIUtils.toast.open({
+      title: trans('chat:copy_message_link_success'),
+      theme: 'success',
+    });
+    hide();
+  }, [message, hide]);
+
+  const handleRetryMessage = useCallback(() => {
+    if (!message) return;
+    retryMessage(message);
+    hide();
+  }, [message, hide, retryMessage]);
+
+  if (!visible || !message || !rect) {
+    return null;
+  }
+
+  const isOutgoing = message.sendID === currentUserId;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      statusBarTranslucent
+      animationType="fade"
+      onRequestClose={hide}
+    >
+      <Pressable style={styles.backdrop} onPress={hide} />
+
+      <MessageToolboxWrapper
+        rect={rect}
+        isOutgoing={isOutgoing}
+        message={
+          <LegendChatMessage
+            message={message}
+            isOutgoing={isOutgoing}
+            createdAtTime={message.sendTime || message.createTime}
+            customMessageItemFactory={customMessageItemFactory}
+          />
+        }
+        toolbox={
+          <MessageToolboxMenu
+            {...toolboxItems}
+            onCopyMessage={handleCopyMessage}
+            onCopyMessageLink={handleCopyMessageLink}
+            onRetryMessage={handleRetryMessage}
+          />
+        }
+      />
+    </Modal>
+  );
+});
+
+MessageToolboxOverlay.displayName = 'MessageToolboxOverlay';
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.75)',
+  },
+});

package/src/screens/chat-detail/messageToolbox/MessageToolboxWrapper.tsx

@@ -0,0 +1,99 @@
+import { useCallback, memo } from 'react';
+import {
+  View,
+  Platform,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+} from 'react-native';
+import {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import type { MeasuredRect } from './types';
+import { messageStyles } from '../legend/messageTypes';
+import Animated from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const MENU_GAP = 8;
+
+type MessageToolboxWrapperProps = {
+  isOutgoing?: boolean;
+  rect: MeasuredRect;
+  message?: React.ReactNode;
+  reaction?: React.ReactNode;
+  toolbox?: React.ReactNode;
+};
+
+export const MessageToolboxWrapper = memo(
+  ({
+    isOutgoing,
+    rect,
+    message,
+    reaction,
+    toolbox,
+  }: MessageToolboxWrapperProps) => {
+    const insets = useSafeAreaInsets();
+    const reactionHeight = useSharedValue(0);
+    const toolboxHeight = useSharedValue(0);
+    const topOffset = Platform.OS === 'android' ? insets.top : 0;
+    const { height: windowHeight } = useWindowDimensions();
+
+    const onToolboxLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        toolboxHeight.value = nativeEvent.layout.height;
+      },
+      [toolboxHeight]
+    );
+
+    const onReactionLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        reactionHeight.value = nativeEvent.layout.height;
+      },
+      [reactionHeight]
+    );
+
+    const translateY = useDerivedValue(() => {
+      const menuGap =
+        (reactionHeight.value > 0 ? MENU_GAP : 0) +
+        (toolboxHeight.value > 0 ? MENU_GAP : 0);
+
+      const overflowBottom =
+        Math.max(rect.y, insets.top) +
+        topOffset +
+        rect.height +
+        toolboxHeight.value +
+        (insets.bottom || 32) +
+        menuGap -
+        windowHeight;
+
+      return withTiming(Math.min(-overflowBottom, 0));
+    });
+
+    const containerStyles = useAnimatedStyle(() => ({
+      top: Math.max(rect.y, insets.top) + topOffset,
+      left: rect.x,
+      gap: MENU_GAP,
+      transform: [{ translateY: translateY.value }],
+    }));
+
+    return (
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          isOutgoing
+            ? messageStyles.messageRowRight
+            : messageStyles.messageRowLeft,
+          containerStyles,
+        ]}
+      >
+        <View pointerEvents="none">{message}</View>
+        <View onLayout={onReactionLayout}>{reaction}</View>
+        <View onLayout={onToolboxLayout}>{toolbox}</View>
+      </Animated.View>
+    );
+  }
+);
+
+MessageToolboxWrapper.displayName = 'MessageToolboxWrapper';

package/src/screens/chat-detail/messageToolbox/messageToolbox.utils.ts

@@ -0,0 +1,56 @@
+import { MessageStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+import type { DMessageItem } from '../../../types/chat';
+import { getMessageText } from '../../../utils/legendListMessage';
+
+// Copy message content is only offered for text and link messages.
+const COPYABLE_TEXT_TYPES: number[] = [
+  MessageType.TextMessage,
+  MessageType.AtTextMessage,
+  MessageType.QuoteMessage,
+  MessageType.UrlTextMessage,
+];
+
+export const isMessageRecalled = (message: DMessageItem): boolean =>
+  message.contentType === MessageType.RevokeMessage;
+
+export const isMessageSucceeded = (message: DMessageItem): boolean =>
+  message.status !== MessageStatus.Failed &&
+  message.status !== MessageStatus.Sending;
+
+// Failed or recalled messages never offer either copy action.
+export const isEligibleForToolbox = (message: DMessageItem): boolean =>
+  isMessageSucceeded(message) && !isMessageRecalled(message);
+
+export const isCopyMessageSupported = (message: DMessageItem): boolean =>
+  isEligibleForToolbox(message) &&
+  COPYABLE_TEXT_TYPES.includes(message.contentType);
+
+// All message types are supported, as long as the message is eligible.
+export const isCopyMessageLinkSupported = (message: DMessageItem): boolean =>
+  isEligibleForToolbox(message);
+
+export const isRetrySupported = (message: DMessageItem): boolean =>
+  message.status === MessageStatus.Failed;
+
+export const getCopyableMessageText = (message: DMessageItem): string => {
+  if (message.contentType === MessageType.UrlTextMessage) {
+    return message.urlTextElem?.content ?? '';
+  }
+  return getMessageText(message);
+};
+
+export const useMessageToolboxItems = (message?: DMessageItem) => {
+  if (message == null) {
+    return {};
+  }
+
+  const showCopyMessage = isCopyMessageSupported(message);
+  const showCopyMessageLink = isCopyMessageLinkSupported(message);
+  const showRetryMessage = isRetrySupported(message);
+
+  return {
+    showCopyMessage,
+    showCopyMessageLink,
+    showRetryMessage,
+  };
+};

package/src/screens/chat-detail/messageToolbox/types.ts

@@ -0,0 +1,13 @@
+import type { DMessageItem } from '../../../types/chat';
+
+export interface MeasuredRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface MessageToolboxRef {
+  show: (message: DMessageItem, rect: MeasuredRect) => void;
+  hide: () => void;
+}

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

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { DMessageItem } from '../../types/chat';
 import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import type { MeasuredRect } from './messageToolbox/types';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -72,6 +73,7 @@ export interface ChatListProps {
   hasMoreNewer?: boolean;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
+  onLongPress?: (message: DMessageItem, rect: MeasuredRect) => void;
 }
 
 export interface ChatDetailProps extends Omit<

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',
@@ -25,6 +28,11 @@ const i18nKey: Record<string, string> = {
   'chat:retry_failed': 'Thử lại thất bại',
   'chat:upload_in_progress': 'Đang tải ảnh lên',
   'chat:wait_or_cancel': 'Vui lòng chờ hoặc hủy bỏ',
+  'chat:copy_message': 'Sao chép tin nhắn',
+  'chat:copy_message_link': 'Sao chép đường dẫn tin nhắn',
+  'chat:copy_message_success': 'Sao chép tin nhắn thành công',
+  'chat:copy_message_link_success': 'Sao chép đường dẫn tin nhắn thành công',
+  'chat:retry_message': 'Gửi lại',
   'msg_type_image': '[Hình ảnh]',
   'msg_type_voice': '[Tin nhắn thoại]',
   'msg_type_video': '[Video]',

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;