@droppii-org/chat-mobile 0.2.38 → 0.2.40

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

@@ -0,0 +1,253 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { ReactNode } from 'react';
+import { Modal, Pressable, StyleSheet, type View } from 'react-native';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+import { usePinnedMessageStore } from '../../store/pinnedMessage';
+import { LegendChatMessage } from './legend/LegendChatMessage';
+import { formatMessageTime, messageStyles } from './legend/messageTypes';
+import { MessageToolboxWrapper } from './messageToolbox/MessageToolboxWrapper';
+import { MessageToolboxMenu } from './messageToolbox/MessageToolboxMenu';
+import type { MeasuredRect } from './messageToolbox/types';
+
+interface PinnedMessageToolboxRef {
+  show: (message: MessageItem, rect: MeasuredRect) => void;
+  hide: () => void;
+}
+
+interface PinnedMessageToolboxOverlayProps {
+  currentUserId?: string;
+  unpinMessage: (message: MessageItem) => void | Promise<void>;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
+}
+
+// Mirrors MessageToolboxOverlay (used for the main chat list's long-press
+// menu) but restricted to the 2 actions relevant to an already-pinned
+// message: unpin and jump to the original message.
+const PinnedMessageToolboxOverlay = memo(
+  forwardRef<PinnedMessageToolboxRef, PinnedMessageToolboxOverlayProps>(
+    ({ currentUserId, unpinMessage, customMessageItemFactory }, ref) => {
+      const [visible, setVisible] = useState(false);
+      const [message, setMessage] = useState<MessageItem | undefined>(
+        undefined
+      );
+      const [rect, setRect] = useState<MeasuredRect | null>(null);
+
+      const hide = useCallback(() => {
+        setVisible(false);
+        setMessage(undefined);
+        setRect(null);
+      }, []);
+
+      const show = useCallback((msg: MessageItem, msgRect: MeasuredRect) => {
+        setMessage(msg);
+        setRect(msgRect);
+        setVisible(true);
+      }, []);
+
+      useImperativeHandle(ref, () => ({ show, hide }), [show, hide]);
+
+      const handleUnpinMessage = useCallback(() => {
+        if (!message) return;
+        hide();
+        unpinMessage(message);
+      }, [message, hide, unpinMessage]);
+
+      const handleViewOriginalMessage = useCallback(() => {
+        if (!message) return;
+        hide();
+        // TODO: implement navigating to / highlighting the original message
+      }, [message, hide]);
+
+      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
+                showUnpinMessage
+                showViewOriginalMessage
+                onUnpinMessage={handleUnpinMessage}
+                onViewOriginalMessage={handleViewOriginalMessage}
+              />
+            }
+          />
+        </Modal>
+      );
+    }
+  )
+);
+
+PinnedMessageToolboxOverlay.displayName = 'PinnedMessageToolboxOverlay';
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.75)',
+  },
+});
+
+interface PinnedMessagesSheetContentProps {
+  currentUserId?: string;
+  unpinMessage: (message: MessageItem) => void | Promise<void>;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
+}
+
+const PinnedMessagesSheetContent = memo(
+  ({
+    currentUserId,
+    unpinMessage,
+    customMessageItemFactory,
+  }: PinnedMessagesSheetContentProps) => {
+    const messages = usePinnedMessageStore((state) => state.messages);
+    const toolboxRef = useRef<PinnedMessageToolboxRef>(null);
+    const rowRefsMap = useRef<Map<string, View | null>>(new Map());
+
+    const handleUnpinMessage = useCallback(
+      async (message: MessageItem) => {
+        await unpinMessage(message);
+        if (usePinnedMessageStore.getState().messages.length === 0) {
+          UIUtils.bottomSheet.dismiss();
+        }
+      },
+      [unpinMessage]
+    );
+
+    const handleLongPress = useCallback(
+      (messageId: string, message: MessageItem) => {
+        const node = rowRefsMap.current.get(messageId);
+        node?.measureInWindow((x, y, width, height) => {
+          toolboxRef.current?.show(message, { x, y, width, height });
+        });
+      },
+      []
+    );
+
+    return (
+      <KContainer.View paddingV="0.5rem">
+        <KLabel.Text
+          typo="TextNmNormal"
+          color={KColors.gray.normal}
+          paddingH="0.75rem"
+          marginB="0.75rem"
+        >
+          {trans('chat:pinned_messages_hint')}
+        </KLabel.Text>
+
+        {messages.map((message) => {
+          const isOutgoing = message.sendID === currentUserId;
+          const messageId = message.clientMsgID || message.serverMsgID;
+          const createdAtTime = message.sendTime || message.createTime;
+          const timeLabel = formatMessageTime(createdAtTime);
+
+          return (
+            <KContainer.View
+              key={messageId}
+              ref={(node: View | null) => {
+                if (node) rowRefsMap.current.set(messageId, node);
+                else rowRefsMap.current.delete(messageId);
+              }}
+              style={
+                isOutgoing
+                  ? messageStyles.messageRowRight
+                  : messageStyles.messageRowLeft
+              }
+            >
+              <LegendChatMessage
+                message={message}
+                isOutgoing={isOutgoing}
+                createdAtTime={createdAtTime}
+                onLongPress={() => handleLongPress(messageId, message)}
+                customMessageItemFactory={customMessageItemFactory}
+              />
+              {!!timeLabel && (
+                <KLabel.Text
+                  typo="TextXsNormal"
+                  color={KColors.gray.light}
+                  marginT="0.25rem"
+                >
+                  {timeLabel}
+                </KLabel.Text>
+              )}
+            </KContainer.View>
+          );
+        })}
+
+        <PinnedMessageToolboxOverlay
+          ref={toolboxRef}
+          currentUserId={currentUserId}
+          unpinMessage={handleUnpinMessage}
+          customMessageItemFactory={customMessageItemFactory}
+        />
+      </KContainer.View>
+    );
+  }
+);
+
+PinnedMessagesSheetContent.displayName = 'PinnedMessagesSheetContent';
+
+export interface OpenPinnedMessagesSheetParams {
+  currentUserId?: string;
+  unpinMessage: (message: MessageItem) => void | Promise<void>;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
+}
+
+export const openPinnedMessagesSheet = ({
+  currentUserId,
+  unpinMessage,
+  customMessageItemFactory,
+}: OpenPinnedMessagesSheetParams) => {
+  UIUtils.bottomSheet.open({
+    header: {
+      title: { text: trans('chat:pinned_messages_title') },
+      alignment: 'left',
+      showCloseButton: true,
+    },
+    touchOutsideToDismiss: true,
+    body: {
+      renderContent: () => (
+        <PinnedMessagesSheetContent
+          currentUserId={currentUserId}
+          unpinMessage={unpinMessage}
+          customMessageItemFactory={customMessageItemFactory}
+        />
+      ),
+    },
+  });
+};

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

@@ -31,6 +31,7 @@ interface LegendChatMessageProps {
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
   onRetry?: (message: MessageItem) => void;
+  onPress?: () => void;
   onLongPress?: () => void;
   customMessageItemFactory?: (m: MessageItem) => ReactNode;
 }
@@ -66,6 +67,7 @@ export const LegendChatMessage = memo(
     onMediaPress,
     onPressUrl,
     onRetry,
+    onPress,
     onLongPress,
     customMessageItemFactory,
   }: LegendChatMessageProps) => {
@@ -91,7 +93,7 @@ export const LegendChatMessage = memo(
           onRetry={onRetry}
         />
         <KContainer.View style={styles.content}>
-          <LongPressWrapper onLongPress={onLongPress}>
+          <LongPressWrapper onPress={onPress} onLongPress={onLongPress}>
             <MessageComponent
               message={message}
               isOutgoing={isOutgoing}
@@ -139,29 +141,40 @@ const styles = StyleSheet.create({
     elevation: 3,
     borderWidth: 1,
     borderColor: KColors.white,
+    zIndex: Number.MAX_SAFE_INTEGER,
   },
 });
 
 const LongPressWrapper = ({
   children,
+  onPress,
   onLongPress,
-}: PropsWithChildren<{ onLongPress?: () => void }>) => {
-  const longPressGesture = useMemo(
-    () =>
-      onLongPress
-        ? Gesture.LongPress().onStart(() => {
-            runOnJS(onLongPress)();
-          })
-        : null,
-    [onLongPress]
-  );
+}: PropsWithChildren<{ onPress?: () => void; onLongPress?: () => void }>) => {
+  const gesture = useMemo(() => {
+    const gestures = [
+      onLongPress &&
+        Gesture.LongPress().onStart(() => {
+          runOnJS(onLongPress)();
+        }),
+      onPress &&
+        Gesture.Tap().onStart(() => {
+          runOnJS(onPress)();
+        }),
+    ].filter(Boolean) as ReturnType<typeof Gesture.Tap>[];
+
+    if (!gestures.length) {
+      return null;
+    }
+
+    return gestures.length > 1 ? Gesture.Race(...gestures) : gestures[0];
+  }, [onPress, onLongPress]);
 
-  if (!longPressGesture) {
+  if (!gesture) {
     return children;
   }
 
   return (
-    <GestureDetector gesture={longPressGesture}>
+    <GestureDetector gesture={gesture}>
       <KContainer.View>{children}</KContainer.View>
     </GestureDetector>
   );

package/src/translation/resources/i18n.ts

@@ -43,15 +43,17 @@ const i18nKey: Record<string, string> = {
   'chat:pinned_image_subtitle': 'Hình ảnh từ {{sender}}',
   'chat:pinned_video_subtitle': 'Video từ {{sender}}',
   'chat:pinned_file_subtitle': 'Tài liệu từ {{sender}}',
-  'chat:pinned_link_subtitle': 'Liên kết từ {{sender}}',
+  'chat:pinned_link_subtitle': 'Từ {{sender}}',
   'chat:pin_limit_title': 'Không thể ghim thêm tin nhắn',
   'chat:pin_limit_desc':
     'Chỉ được ghim tối đa 5 tin nhắn. Vui lòng bỏ ghim một tin nhắn hiện có trước khi ghim tin nhắn mới.',
   'chat:pin_limit_primary': 'Đã hiểu',
   'chat:pinned_messages_title': 'Tin nhắn đã ghim',
   'chat:pinned_messages_hint':
-    'Nhấn giữ tin nhắn để chọn "Bỏ Ghim" hoặc "Xem tin nhắn gốc"',
+    'Nhấn vào tin nhắn để xem tin nhắn gốc, nhấn vào biểu tượng để bỏ ghim',
   'chat:view_original_message': 'Xem tin nhắn gốc',
+  'chat:scroll_to_message_todo':
+    'Tính năng di chuyển đến tin nhắn gốc sẽ sớm được cập nhật',
   'msg_type_image': '[Hình ảnh]',
   'msg_type_voice': '[Tin nhắn thoại]',
   'msg_type_video': '[Video]',

package/src/types/chat.ts

@@ -28,7 +28,7 @@ export interface ChatUIAdapter {
   toast?: { open: (params: any) => void };
   alert?: { open: (params: any) => void };
   popup?: { open: (params: any) => void };
-  bottomSheet?: { open: (params: any) => void };
+  bottomSheet?: { open: (params: any) => void; dismiss: () => void };
 }
 
 export interface ChatContextType {

package/src/utils/UIUtils.ts

@@ -10,7 +10,7 @@ const defaultAdapter: Required<ChatUIAdapter> = {
   toast: { open: openWithAlert },
   alert: { open: openWithAlert },
   popup: { open: openWithAlert },
-  bottomSheet: { open: openWithAlert },
+  bottomSheet: { open: openWithAlert, dismiss: () => {} },
 };
 
 let _adapter: ChatUIAdapter = {};
@@ -32,5 +32,7 @@ export const UIUtils: Required<ChatUIAdapter> = {
   bottomSheet: {
     open: (params) =>
       (_adapter.bottomSheet ?? defaultAdapter.bottomSheet).open(params),
+    dismiss: () =>
+      (_adapter.bottomSheet ?? defaultAdapter.bottomSheet).dismiss(),
   },
 };

package/src/utils/messageUtils.ts

@@ -12,6 +12,7 @@ import { formatDuration } from './dateTimeUtils';
 import { getFileIcon, getMimeType } from './imageUtils';
 import { trans } from '../translation';
 import type { IUrlMetadata } from '../types/common';
+import type { TextProps } from 'react-native';
 
 export const isMessageRevoked = (message: MessageItem): boolean =>
   message.contentType === MessageType.RevokeMessage;
@@ -46,14 +47,13 @@ export const getMessagePreview = (message?: MessageItem): string => {
         return '[Video]';
       }
 
-    case MessageType.FileMessage:
-      try {
-        const fileData = JSON.parse(message.content);
-        const fileName = fileData.fileName || fileData.name || 'File';
+    case MessageType.FileMessage: {
+      const fileName = message?.fileElem?.fileName;
+      if (fileName) {
         return `[File] ${fileName}`;
-      } catch {
-        return '[File]';
       }
+      return '[File]';
+    }
 
     case MessageType.MergeMessage:
       // Show image count for merged messages containing images
@@ -97,6 +97,27 @@ export const getMessagePreview = (message?: MessageItem): string => {
   }
 };
 
+export const getMessagePreviewTextProps = (
+  message?: MessageItem
+): TextProps => {
+  if (!message) return {};
+  switch (message.contentType) {
+    case MessageType.FileMessage:
+      return {
+        ellipsizeMode: 'middle',
+      };
+    default:
+      return {};
+  }
+};
+
+export const getMessagePreviewParts = (
+  message?: MessageItem
+): { text: string; textProps: TextProps } => ({
+  text: getMessagePreview(message),
+  textProps: getMessagePreviewTextProps(message),
+});
+
 export type PinnedMessageMediaType = 'image' | 'video' | 'file' | 'text';
 
 export interface PinnedMessagePreview {
@@ -233,3 +254,15 @@ export const parseUrlMetadata = (ex?: string): IUrlMetadata | undefined => {
     return undefined;
   }
 };
+
+export const truncateMiddle = (name: string, maxLength: number): string => {
+  const dotIndex = name.lastIndexOf('.');
+  const baseName = dotIndex !== -1 ? name.slice(0, dotIndex) : name;
+  const ext = dotIndex !== -1 ? name.slice(dotIndex) : '';
+
+  if (baseName.length <= maxLength) return name;
+
+  const headLen = Math.ceil((maxLength - 3) / 2);
+  const tailLen = Math.floor((maxLength - 3) / 2);
+  return `${baseName.slice(0, headLen)}...${tailLen > 0 ? baseName.slice(-tailLen) : ''}${ext}`;
+};