@droppii-org/chat-mobile 0.2.39 → 0.2.41

package/src/core/useChatListener.ts

@@ -12,14 +12,12 @@ import { useCallback, useEffect } from 'react';
 import { useConversationStore } from '../store/conversation';
 import { ToastFlashMessage } from '../utils/toastFlashMessage';
 import { useUserStore } from '../store/user';
-import { getLastMessageText, truncateMiddle } from '../utils/messageUtils';
+import { getLastMessageText } from '../utils/messageUtils';
 import { useChatContext } from '../context';
 import isEmpty from 'lodash/isEmpty';
 import { markMessageRevoked, useMessageStore } from '../store/message';
 import { syncPinnedMessagesOnEvent } from '../hooks/message/usePinMessage';
 
-const MAX_TOAST_FILE_NAME_LENGTH = 40;
-
 export const useChatListener = () => {
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
   const currentUserId = useUserStore((s) => s.user?.userID);
@@ -55,22 +53,8 @@ export const useChatListener = () => {
           const latestMsg: MessageItem = JSON.parse(
             conversation.latestMsg || '{}'
           );
-          const messageForToast =
-            latestMsg.contentType === MessageType.FileMessage &&
-            latestMsg.fileElem?.fileName
-              ? {
-                  ...latestMsg,
-                  fileElem: {
-                    ...latestMsg.fileElem,
-                    fileName: truncateMiddle(
-                      latestMsg.fileElem.fileName,
-                      MAX_TOAST_FILE_NAME_LENGTH
-                    ),
-                  },
-                }
-              : latestMsg;
           const lastMessageText = getLastMessageText(
-            messageForToast,
+            latestMsg,
             currentUserId,
             conversation
           );
@@ -78,6 +62,7 @@ export const useChatListener = () => {
             key: conversation.conversationID,
             title: conversation.showName || 'New Message',
             body: lastMessageText,
+            ellipsizeMiddle: latestMsg.contentType === MessageType.FileMessage,
             onPress: () => {
               ToastFlashMessage.hide(conversation.conversationID);
               onPressFlashMessage?.(conversation);

package/src/hooks/message/useSendMessage.ts

@@ -207,8 +207,6 @@ export const useSendMessage = () => {
       clientMsgID: message.clientMsgID,
     });
 
-    // TODO: Handle revoked quoted message
-
     markMessageRevoked(message.clientMsgID);
   }, []);
 

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

@@ -13,7 +13,13 @@ import {
   getMessagePreviewParts,
   getPinnedMessagePreview,
 } from '../../utils/messageUtils';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+
+const HIDDEN_PREVIEW_TEXT_TYPES = new Set([
+  MessageType.PictureMessage,
+  MessageType.VideoMessage,
+  MessageType.MergeMessage,
+]);
 
 interface PinnedMessageBarProps {
   messages: MessageItem[];
@@ -85,6 +91,7 @@ export const PinnedMessageBar = memo(
     const remainingCount = messages.length - 1;
     const { subtitleKey } = getPinnedMessagePreview(latest);
     const messagePreview = getMessagePreviewParts(latest);
+    const hidePreviewText = HIDDEN_PREVIEW_TEXT_TYPES.has(latest.contentType);
 
     return (
       <KContainer.Touchable
@@ -96,13 +103,15 @@ export const PinnedMessageBar = memo(
 
         <KContainer.View row alignItems flex paddingR="0.75rem">
           <KContainer.View style={styles.content}>
-            <KLabel.Text
-              typo="TextNmMedium"
-              numberOfLines={1}
-              {...messagePreview.textProps}
-            >
-              {messagePreview.text}
-            </KLabel.Text>
+            {!hidePreviewText && (
+              <KLabel.Text
+                typo="TextNmMedium"
+                numberOfLines={1}
+                {...messagePreview.textProps}
+              >
+                {messagePreview.text}
+              </KLabel.Text>
+            )}
 
             <KContainer.View row alignItems paddingR="0.75rem">
               <KImage.VectorIcons

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

@@ -1,127 +1,29 @@
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import { memo, useCallback } 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 { StyleSheet } from 'react-native';
+import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  KContainer,
+  KLabel,
+  KColors,
+  KImage,
+  KSpacingValue,
+} 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)',
-  },
-});
+import { formatMessageTime } from './legend/messageTypes';
+
+// Text/quote/link bubbles already render their own timestamp for incoming
+// messages (see textMessage, quotedMessage, linkMessage) — skip the external
+// label for those to avoid showing the time twice.
+const SELF_RENDERS_TIME_FOR_INCOMING = new Set([
+  MessageType.TextMessage,
+  MessageType.AtTextMessage,
+  MessageType.QuoteMessage,
+  MessageType.UrlTextMessage,
+]);
 
 interface PinnedMessagesSheetContentProps {
   currentUserId?: string;
@@ -136,19 +38,25 @@ const PinnedMessagesSheetContent = memo(
     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: MessageItem) => {
-        const node = rowRefsMap.current.get(messageId);
-        node?.measureInWindow((x, y, width, height) => {
-          toolboxRef.current?.show(message, { x, y, width, height });
-        });
+
+    const handleUnpinMessage = useCallback(
+      async (message: MessageItem) => {
+        await unpinMessage(message);
+        if (usePinnedMessageStore.getState().messages.length === 0) {
+          UIUtils.bottomSheet.dismiss();
+        }
       },
-      []
+      [unpinMessage]
     );
 
+    const handlePressMessage = useCallback(() => {
+      UIUtils.bottomSheet.dismiss();
+      UIUtils.alert.open({
+        title: trans('chat:view_original_message'),
+        message: trans('chat:scroll_to_message_todo'),
+      });
+    }, []);
+
     return (
       <KContainer.View paddingV="0.5rem">
         <KLabel.Text
@@ -164,28 +72,58 @@ const PinnedMessagesSheetContent = memo(
           const isOutgoing = message.sendID === currentUserId;
           const messageId = message.clientMsgID || message.serverMsgID;
           const createdAtTime = message.sendTime || message.createTime;
-          const timeLabel = formatMessageTime(createdAtTime);
+          const hasInternalTimeLabel =
+            !isOutgoing &&
+            SELF_RENDERS_TIME_FOR_INCOMING.has(message.contentType);
+          const timeLabel = hasInternalTimeLabel
+            ? ''
+            : formatMessageTime(createdAtTime);
+
+          const unpinButton = (
+            <KContainer.Touchable
+              center
+              br="round"
+              width={28}
+              height={28}
+              background={KColors.background}
+              style={
+                isOutgoing ? styles.unpinButtonLeft : styles.unpinButtonRight
+              }
+              onPress={() => handleUnpinMessage(message)}
+            >
+              <KImage.VectorIcons
+                name="thumbtack-off-o"
+                provider="DroppiiNew"
+                size={14}
+                color={KColors.gray.dark}
+              />
+            </KContainer.Touchable>
+          );
 
           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
-              }
+              style={isOutgoing ? styles.rowRight : styles.rowLeft}
             >
-              <LegendChatMessage
-                message={message}
-                isOutgoing={isOutgoing}
-                createdAtTime={createdAtTime}
-                onLongPress={() => handleLongPress(messageId, message)}
-                customMessageItemFactory={customMessageItemFactory}
-              />
+              <KContainer.View
+                style={[
+                  styles.messageRow,
+                  isOutgoing ? styles.messageRowRight : styles.messageRowLeft,
+                ]}
+              >
+                {isOutgoing && unpinButton}
+
+                <LegendChatMessage
+                  message={message}
+                  isOutgoing={isOutgoing}
+                  createdAtTime={createdAtTime}
+                  onPress={handlePressMessage}
+                  customMessageItemFactory={customMessageItemFactory}
+                />
+
+                {!isOutgoing && unpinButton}
+              </KContainer.View>
+
               {!!timeLabel && (
                 <KLabel.Text
                   typo="TextXsNormal"
@@ -198,13 +136,6 @@ const PinnedMessagesSheetContent = memo(
             </KContainer.View>
           );
         })}
-
-        <PinnedMessageToolboxOverlay
-          ref={toolboxRef}
-          currentUserId={currentUserId}
-          unpinMessage={unpinMessage}
-          customMessageItemFactory={customMessageItemFactory}
-        />
       </KContainer.View>
     );
   }
@@ -212,6 +143,40 @@ const PinnedMessagesSheetContent = memo(
 
 PinnedMessagesSheetContent.displayName = 'PinnedMessagesSheetContent';
 
+const UNPIN_BUTTON_GAP = KSpacingValue['0.5rem'];
+
+const styles = StyleSheet.create({
+  rowLeft: {
+    width: '100%',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.25rem'],
+    alignItems: 'flex-start',
+  },
+  rowRight: {
+    width: '100%',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.25rem'],
+    alignItems: 'flex-end',
+  },
+  messageRow: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  messageRowLeft: {
+    justifyContent: 'flex-start',
+  },
+  messageRowRight: {
+    justifyContent: 'flex-end',
+  },
+  unpinButtonLeft: {
+    marginRight: UNPIN_BUTTON_GAP,
+  },
+  unpinButtonRight: {
+    marginLeft: UNPIN_BUTTON_GAP,
+  },
+});
+
 export interface OpenPinnedMessagesSheetParams {
   currentUserId?: string;
   unpinMessage: (message: MessageItem) => void | Promise<void>;

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}
+        />
+      ),
+    },
+  });
+};