@droppii-org/chat-mobile 0.2.35 → 0.2.38

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

@@ -0,0 +1,150 @@
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useChatDetailContext } from '../../context';
+import {
+  getMessagePreview,
+  getReplySenderName,
+  parseUrlMetadata,
+} from '../../utils/messageUtils';
+import { trans } from '../../translation';
+import { useUserStore } from '../../store';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { getFileIcon, getMimeType } from '../../utils/imageUtils';
+
+export const ChatCurrentQuotedMessage = memo(() => {
+  const { quotedMessage, conversation, setQuotedMessage } =
+    useChatDetailContext();
+
+  const currentUserId = useUserStore((s) => s.user?.userID);
+
+  const imageUrl = useMemo(() => {
+    switch (quotedMessage?.contentType) {
+      case MessageType.PictureMessage:
+        return quotedMessage?.pictureElem?.snapshotPicture?.url || '';
+      case MessageType.VideoMessage:
+        return quotedMessage?.videoElem?.snapshotUrl || '';
+      case MessageType.UrlTextMessage:
+        const metadata = parseUrlMetadata(quotedMessage?.ex);
+        return metadata?.image || '';
+      default:
+        return '';
+    }
+  }, [quotedMessage]);
+
+  const iconSource = useMemo(() => {
+    if (quotedMessage?.contentType !== MessageType.FileMessage) return '';
+    const mimeType = getMimeType(quotedMessage?.fileElem?.fileName || '');
+    return getFileIcon(mimeType);
+  }, [quotedMessage]);
+
+  if (!quotedMessage) return null;
+
+  return (
+    <KContainer.View style={styles.container}>
+      <KContainer.View style={styles.dot} />
+      <KContainer.VisibleView visible={!!imageUrl}>
+        <KContainer.View style={styles.imageContainer}>
+          <KImage.Base uri={imageUrl} style={styles.imageContainer} />
+          <KContainer.VisibleView
+            visible={quotedMessage?.contentType === MessageType.VideoMessage}
+          >
+            <KContainer.View style={styles.playIconContainer}>
+              <KContainer.View style={styles.playIcon}>
+                <KImage.VectorIcons
+                  name="play-b"
+                  size={12}
+                  color={KColors.white}
+                />
+              </KContainer.View>
+            </KContainer.View>
+          </KContainer.VisibleView>
+        </KContainer.View>
+      </KContainer.VisibleView>
+      <KContainer.VisibleView visible={!!iconSource}>
+        <KImage.Base
+          uri={iconSource}
+          style={styles.icon}
+          resizeMode="contain"
+        />
+      </KContainer.VisibleView>
+      <KContainer.View style={styles.content}>
+        <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+          {trans('chat:reply_to', {
+            name: getReplySenderName(
+              quotedMessage,
+              currentUserId,
+              conversation
+            ),
+          })}
+        </KLabel.Text>
+        <KLabel.Text
+          typo="TextSmNormal"
+          color={KColors.gray.light}
+          numberOfLines={1}
+        >
+          {getMessagePreview(quotedMessage)}
+        </KLabel.Text>
+      </KContainer.View>
+      <KContainer.Touchable onPress={() => setQuotedMessage(undefined)}>
+        <KImage.VectorIcons name="close-o" size={16} />
+      </KContainer.Touchable>
+    </KContainer.View>
+  );
+});
+
+ChatCurrentQuotedMessage.displayName = 'ChatCurrentQuotedMessage';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: KSpacingValue['0.25rem'],
+    paddingHorizontal: KSpacingValue['0.5rem'],
+    backgroundColor: KColors.opacity.grayLight[10],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    justifyContent: 'space-between',
+  },
+  dot: {
+    width: 3,
+    height: '100%',
+    backgroundColor: KColors.palette.grayCool.w200,
+    borderRadius: KRadiusValue.x,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: KSpacingValue['0.25rem'],
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  imageContainer: {
+    width: 42,
+    height: 42,
+    borderRadius: KRadiusValue['2x'],
+  },
+  playIconContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playIcon: {
+    borderRadius: 8,
+    padding: KSpacingValue['0.25rem'],
+    backgroundColor: KColors.hexToRgba(KColors.black, 0.6),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

@@ -8,6 +8,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useChatMessages } from '../../hooks/useChatMessages';
 import { usePinMessage } from '../../hooks/message/usePinMessage';
 import { PinnedMessageBar } from './PinnedMessageBar';
+import { openPinnedMessagesSheet } from './PinnedMessagesSheet';
 import {
   MediaViewerModal,
   type MediaViewerModalHandle,
@@ -21,12 +22,13 @@ import type { ChatDetailProps } from './types';
 import { normalizeUrl } from '../../utils/url';
 import { MessageToolboxOverlay } from './messageToolbox/MessageToolboxOverlay';
 import type { MeasuredRect, MessageToolboxRef } from './messageToolbox/types';
-import { DBotStatusValue, type DMessageItem } from '../../types/chat';
+import { DBotStatusValue } from '../../types/chat';
 import {
   useGetConversationDetail,
   useGetStatusConversationBot,
 } from '../../hooks/conversation/useGetConversationDetail';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 const ChatDetail = memo(
   ({
@@ -133,12 +135,20 @@ const ChatDetail = memo(
     );
 
     const handleMessageLongPress = useCallback(
-      (message: DMessageItem, rect: MeasuredRect) => {
+      (message: MessageItem, rect: MeasuredRect) => {
         messageToolboxRef.current?.show(message, rect);
       },
       []
     );
 
+    const handlePressPinnedMessageBar = useCallback(() => {
+      openPinnedMessagesSheet({
+        currentUserId,
+        unpinMessage,
+        customMessageItemFactory,
+      });
+    }, [currentUserId, unpinMessage, customMessageItemFactory]);
+
     return (
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
@@ -154,6 +164,7 @@ const ChatDetail = memo(
         <PinnedMessageBar
           messages={pinnedMessages}
           currentUserId={currentUserId}
+          onPress={handlePressPinnedMessageBar}
         />
 
         <KeyboardAvoidingView

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

@@ -9,7 +9,6 @@ import { LegendList, type LegendListRef } from '@legendapp/list/react-native';
 import { KContainer, KColors, KSpacingValue, KLabel } from '@droppii/libs';
 import { precomputeLegendListData } from '../../utils/legendListMessage';
 import type { ChatListProps } from './types';
-import type { DMessageItem } from '../../types/chat';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
 import { LegendChatLoadEarlier } from './legend/LegendChatLoadEarlier';
@@ -20,6 +19,7 @@ import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
 import type { IRunConversationFlowPayload } from '../../types/flows';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { messageStyles } from './legend/messageTypes';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 export const ChatListLegend = memo(
   ({
@@ -90,7 +90,7 @@ export const ChatListLegend = memo(
     );
 
     const handleMessageLongPress = useCallback(
-      (messageId: string, message: DMessageItem) => {
+      (messageId: string, message: MessageItem) => {
         const node = rowRefsMap.current.get(messageId);
         node?.measureInWindow((x, y, width, height) => {
           onLongPress?.(message, { x, y, width, height });
@@ -115,7 +115,7 @@ export const ChatListLegend = memo(
         try {
           if (!item) return null;
 
-          const message = item as DMessageItem;
+          const message = item as MessageItem;
           const isOutgoing = message.sendID === currentUserId;
           const isLastIncoming =
             !isOutgoing &&

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

@@ -13,69 +13,68 @@ import {
   getMessagePreview,
   getPinnedMessagePreview,
 } from '../../utils/messageUtils';
-import type { DMessageItem } from '../../types/chat';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 interface PinnedMessageBarProps {
-  messages: DMessageItem[];
+  messages: MessageItem[];
   currentUserId?: string;
+  onPress?: () => void;
 }
 
-const PinnedMessageThumbnail = memo(
-  ({ message }: { message: DMessageItem }) => {
-    const preview = useMemo(() => getPinnedMessagePreview(message), [message]);
+const PinnedMessageThumbnail = memo(({ message }: { message: MessageItem }) => {
+  const preview = useMemo(() => getPinnedMessagePreview(message), [message]);
 
-    if (preview.mediaType === 'image' && preview.thumbnailUrl) {
-      return (
-        <KImage.Base
-          uri={preview.thumbnailUrl}
-          style={styles.thumbnail}
-          resizeMode="cover"
-        />
-      );
-    }
-
-    if (preview.mediaType === 'video') {
-      return (
-        <KContainer.View style={styles.thumbnail}>
-          {preview.thumbnailUrl && (
-            <KImage.Base
-              uri={preview.thumbnailUrl}
-              style={styles.thumbnail}
-              resizeMode="cover"
-            />
-          )}
-          <KContainer.View style={styles.videoOverlay} center>
-            <KImage.VectorIcons
-              name="play-circle"
-              provider="MaterialCommunityIcons"
-              size={16}
-              color={KColors.white}
-            />
-          </KContainer.View>
-        </KContainer.View>
-      );
-    }
+  if (preview.mediaType === 'image' && preview.thumbnailUrl) {
+    return (
+      <KImage.Base
+        uri={preview.thumbnailUrl}
+        style={styles.thumbnail}
+        resizeMode="cover"
+      />
+    );
+  }
 
-    if (preview.mediaType === 'file' && preview.fileIcon) {
-      return (
-        <KContainer.View marginL="0.75rem">
+  if (preview.mediaType === 'video') {
+    return (
+      <KContainer.View style={styles.thumbnail}>
+        {preview.thumbnailUrl && (
           <KImage.Base
-            uri={preview.fileIcon}
-            style={styles.fileIcon}
-            resizeMode="contain"
+            uri={preview.thumbnailUrl}
+            style={styles.thumbnail}
+            resizeMode="cover"
+          />
+        )}
+        <KContainer.View style={styles.videoOverlay} center>
+          <KImage.VectorIcons
+            name="play-circle"
+            provider="MaterialCommunityIcons"
+            size={16}
+            color={KColors.white}
           />
         </KContainer.View>
-      );
-    }
+      </KContainer.View>
+    );
+  }
 
-    return null;
+  if (preview.mediaType === 'file' && preview.fileIcon) {
+    return (
+      <KContainer.View marginL="0.75rem">
+        <KImage.Base
+          uri={preview.fileIcon}
+          style={styles.fileIcon}
+          resizeMode="contain"
+        />
+      </KContainer.View>
+    );
   }
-);
+
+  return null;
+});
 
 PinnedMessageThumbnail.displayName = 'PinnedMessageThumbnail';
 
 export const PinnedMessageBar = memo(
-  ({ messages, currentUserId }: PinnedMessageBarProps) => {
+  ({ messages, currentUserId, onPress }: PinnedMessageBarProps) => {
     if (messages.length === 0) {
       return null;
     }
@@ -87,7 +86,11 @@ export const PinnedMessageBar = memo(
     const { subtitleKey } = getPinnedMessagePreview(latest);
 
     return (
-      <KContainer.View style={styles.container}>
+      <KContainer.Touchable
+        activeOpacity={0.7}
+        onPress={onPress}
+        style={styles.container}
+      >
         <PinnedMessageThumbnail message={latest} />
 
         <KContainer.View row alignItems flex paddingR="0.75rem">
@@ -118,6 +121,7 @@ export const PinnedMessageBar = memo(
               badge={`+${remainingCount}`}
               skipConvertBadge
               badgeSize={{ width: 26, height: 20 }}
+              // eslint-disable-next-line react-native/no-inline-styles
               wrapperLabelTextStyle={{ paddingHorizontal: 3 }}
             />
           )}
@@ -127,7 +131,7 @@ export const PinnedMessageBar = memo(
             color={KColors.gray.normal}
           />
         </KContainer.View>
-      </KContainer.View>
+      </KContainer.Touchable>
     );
   }
 );

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

@@ -0,0 +1,243 @@
+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 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={unpinMessage}
+          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

@@ -6,7 +6,6 @@ import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { runOnJS } from 'react-native-reanimated';
-import type { DMessageItem } from '../../../types/chat';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
 import { TextMessage } from '../../../components/messages/textMessage';
 import { ImageMessage } from '../../../components/messages/imageMessage';
@@ -18,6 +17,7 @@ import { RevokedMessage } from '../../../components/messages/revokedMessage';
 import { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 import { messageStyles } from './messageTypes';
+import QuotedMessage from '../../../components/messages/quotedMessage';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -25,14 +25,14 @@ type MessageProps = BaseLegendMessageProps & {
 };
 
 interface LegendChatMessageProps {
-  message: DMessageItem;
+  message: MessageItem;
   isOutgoing: boolean;
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
   onRetry?: (message: MessageItem) => void;
   onLongPress?: () => void;
-  customMessageItemFactory?: (m: DMessageItem) => ReactNode;
+  customMessageItemFactory?: (m: MessageItem) => ReactNode;
 }
 
 // OpenIM message types (not all exposed as MessageType enum)
@@ -43,7 +43,7 @@ const messageComponentMap: Partial<
 > = {
   [MessageType.TextMessage]: TextMessage,
   [MessageType.AtTextMessage]: TextMessage,
-  [MessageType.QuoteMessage]: TextMessage,
+  [MessageType.QuoteMessage]: QuotedMessage,
   [MessageType.UrlTextMessage]: LinkMessage,
   [MessageType.PictureMessage]: ImageMessage,
   [MessageType.VideoMessage]: VideoMessage,