@droppii-org/chat-mobile 0.2.34 → 0.2.37

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

@@ -0,0 +1,244 @@
+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';
+import type { DMessageItem } from '../../types/chat';
+
+interface PinnedMessageToolboxRef {
+  show: (message: DMessageItem, rect: MeasuredRect) => void;
+  hide: () => void;
+}
+
+interface PinnedMessageToolboxOverlayProps {
+  currentUserId?: string;
+  unpinMessage: (message: MessageItem) => void | Promise<void>;
+  customMessageItemFactory?: (item: DMessageItem) => 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<DMessageItem | undefined>(
+        undefined
+      );
+      const [rect, setRect] = useState<MeasuredRect | null>(null);
+
+      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 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: DMessageItem) => 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 handleLongPress = useCallback(
+      (messageId: string, message: DMessageItem) => {
+        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={unpinMessage}
+          customMessageItemFactory={customMessageItemFactory}
+        />
+      </KContainer.View>
+    );
+  }
+);
+
+PinnedMessagesSheetContent.displayName = 'PinnedMessagesSheetContent';
+
+export interface OpenPinnedMessagesSheetParams {
+  currentUserId?: string;
+  unpinMessage: (message: MessageItem) => void | Promise<void>;
+  customMessageItemFactory?: (item: DMessageItem) => 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/messageToolbox/MessageToolboxMenu.tsx

@@ -11,12 +11,14 @@ interface MessageToolboxMenuProps {
   showUnpinMessage?: boolean;
   showRetryMessage?: boolean;
   showRevokeMessage?: boolean;
-  onCopyMessage: () => void;
-  onCopyMessageLink: () => void;
-  onPinMessage: () => void;
-  onUnpinMessage: () => void;
-  onRetryMessage: () => void;
-  onRevokeMessage: () => void;
+  showViewOriginalMessage?: boolean;
+  onCopyMessage?: () => void;
+  onCopyMessageLink?: () => void;
+  onPinMessage?: () => void;
+  onUnpinMessage?: () => void;
+  onRetryMessage?: () => void;
+  onRevokeMessage?: () => void;
+  onViewOriginalMessage?: () => void;
 }
 
 export const MessageToolboxMenu = memo(
@@ -27,12 +29,14 @@ export const MessageToolboxMenu = memo(
     showUnpinMessage,
     showRetryMessage,
     showRevokeMessage,
+    showViewOriginalMessage,
     onCopyMessage,
     onCopyMessageLink,
     onPinMessage,
     onUnpinMessage,
     onRetryMessage,
     onRevokeMessage,
+    onViewOriginalMessage,
   }: MessageToolboxMenuProps) => {
     return (
       <KContainer.View style={styles.card}>
@@ -68,6 +72,14 @@ export const MessageToolboxMenu = memo(
           onPress={onUnpinMessage}
         />
 
+        <MessageToolboxItem
+          icon="chat-square-o"
+          color={KColors.gray.dark}
+          label={trans('chat:view_original_message')}
+          visible={showViewOriginalMessage}
+          onPress={onViewOriginalMessage}
+        />
+
         <MessageToolboxItem
           icon="arrow-reload-o"
           color={KColors.danger.normal}

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

@@ -74,6 +74,7 @@ export const MessageToolboxWrapper = memo(
     const containerStyles = useAnimatedStyle(() => ({
       top: Math.max(rect.y, insets.top) + topOffset,
       left: rect.x,
+      width: rect.width,
       gap: MENU_GAP,
       transform: [{ translateY: translateY.value }],
     }));

package/src/store/conversation.ts

@@ -12,6 +12,7 @@ export interface ConversationStore {
   map: Record<ConversationID, ConversationItem>;
   /** Signal incremented when a truly new conversation arrives and a full refetch is needed. */
   newConversationSignal: number;
+  updateConversation(id: ConversationID, data: Partial<ConversationItem>): void;
   updateConversations(conversations: ConversationItem[]): void;
   /**
    * Patches existing conversations with real-time data from OpenIM events.
@@ -34,6 +35,17 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
 
     return get().map[id];
   },
+  updateConversation(id, data) {
+    const existing = get().map[id];
+    if (!existing) return;
+
+    set(
+      sortConversation({
+        ...get().map,
+        [id]: { ...existing, ...data },
+      })
+    );
+  },
   updateConversations(conversations) {
     set(
       sortConversation(

package/src/translation/resources/i18n.ts

@@ -1,7 +1,8 @@
 const i18nKey: Record<string, string> = {
   'thread_card_bot_crm_name': 'Droppii Hỗ Trợ',
   'thread_card_fallback_name': 'Người dùng',
-  'chat:file_too_large': 'Tệp quá lớn. Tối đa 10MB',
+  'chat:file_too_large':
+    'Tệp tải lên không hợp lệ. Kích thước tệp không được vượt quá {{maxSize}}MB',
   'chat:file_max_count': 'Chỉ có thể đính kèm tối đa 3 tệp',
   'chat:file_pick_failed': 'Không thể chọn tệp',
   'chat:file_upload_failed': 'Lỗi tải tệp lên',
@@ -47,6 +48,10 @@ const i18nKey: Record<string, string> = {
   '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"',
+  'chat:view_original_message': 'Xem tin nhắn gốc',
   'msg_type_image': '[Hình ảnh]',
   'msg_type_voice': '[Tin nhắn thoại]',
   'msg_type_video': '[Video]',

package/src/types/chat.ts

@@ -28,6 +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 };
 }
 
 export interface ChatContextType {

package/src/utils/UIUtils.ts

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