@droppii-org/chat-mobile 0.2.81 → 0.2.83

package/src/components/messages/linkMessage/index.tsx

@@ -1,16 +1,12 @@
 import { memo } from 'react';
 import { StyleSheet } from 'react-native';
-import {
-  KContainer,
-  KImage,
-  KLabel,
-  KColors,
-  KSpacingValue,
-} from '@droppii/libs';
-import type { BaseLegendMessageProps } from '../types';
+import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
+import { formatMessageTime, type BaseLegendMessageProps } from '../types';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { parseUrlMetadata } from '../../../utils/messageUtils';
+import { splitTextByUrls } from '../../../utils/url';
 import { messageStyles } from '../styles';
+import { LinkPreviewCard } from './LinkPreviewCard';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
 
@@ -18,121 +14,82 @@ const renderTextWithLinks = (
   content: string,
   urls: string[],
   onPressUrl?: (url: string) => void
-) => {
-  if (!urls.length) {
-    return <KLabel.Text typo="TextMdNormal">{content}</KLabel.Text>;
-  }
-
-  const parts: { text: string; isUrl: boolean }[] = [];
-  let remaining = content;
-
-  for (const url of urls) {
-    const idx = remaining.indexOf(url);
-    if (idx === -1) continue;
-    if (idx > 0) parts.push({ text: remaining.slice(0, idx), isUrl: false });
-    parts.push({ text: url, isUrl: true });
-    remaining = remaining.slice(idx + url.length);
-  }
-
-  if (remaining) parts.push({ text: remaining, isUrl: false });
-
-  return (
-    <KLabel.Text typo="TextMdNormal">
-      {parts.map((part, i) =>
-        part.isUrl ? (
-          <KLabel.Text
-            key={i}
-            onPress={() => onPressUrl?.(part.text)}
-            color={KColors.primary.normal}
-            typo="TextMdMedium"
-          >
-            {part.text}
-          </KLabel.Text>
-        ) : (
-          <KLabel.Text typo="TextMdNormal" key={i}>
-            {part.text}
-          </KLabel.Text>
-        )
-      )}
-    </KLabel.Text>
-  );
-};
+) => (
+  <KLabel.Text typo="TextMdNormal">
+    {splitTextByUrls(content, urls).map((part, i) =>
+      part.isUrl ? (
+        <KLabel.Text
+          key={i}
+          onPress={() => onPressUrl?.(part.text)}
+          color={KColors.primary.normal}
+          typo="TextMdMedium"
+        >
+          {part.text}
+        </KLabel.Text>
+      ) : (
+        <KLabel.Text typo="TextMdNormal" key={i}>
+          {part.text}
+        </KLabel.Text>
+      )
+    )}
+  </KLabel.Text>
+);
 
 export const LinkMessage = memo(
   ({
     message,
     isOutgoing,
+    createdAtTime,
     onPressUrl,
     isHighlighted,
+    isTimeRevealed,
     groupPosition,
   }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const content = message?.urlTextElem?.content;
     const urls = message?.urlTextElem?.urls ?? [];
     const metadata = parseUrlMetadata(message.ex);
+    const timeLabel = formatMessageTime(createdAtTime);
 
     return (
-      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+      <>
+        <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+          <KContainer.View
+            style={[
+              styles.bubble,
+              isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+              isHighlighted && messageStyles.bubbleHighlighted,
+              getTailCornerStyle(isOutgoing, groupPosition),
+            ]}
+          >
+            {!!content?.trim() && (
+              <KContainer.View style={styles.textRow}>
+                {renderTextWithLinks(content, urls, onPressUrl)}
+              </KContainer.View>
+            )}
+
+            {!!metadata && (
+              <LinkPreviewCard metadata={metadata} onPressUrl={onPressUrl} />
+            )}
+          </KContainer.View>
+        </BubbleTailRow>
+
         <KContainer.View
-          style={[
-            styles.bubble,
-            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
-            isHighlighted && messageStyles.bubbleHighlighted,
-            getTailCornerStyle(isOutgoing, groupPosition),
-          ]}
+          row
+          alignItems
+          style={[styles.timeLabel, isOutgoing && styles.timeLabelRight]}
         >
-          {!!content?.trim() && (
-            <KContainer.View style={styles.textRow}>
-              {renderTextWithLinks(content, urls, onPressUrl)}
-            </KContainer.View>
-          )}
-
-          {!!metadata && (
-            <KContainer.Touchable
-              style={styles.card}
-              onPress={() => metadata.url && onPressUrl?.(metadata.url)}
+          {isTimeRevealed && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL={isOutgoing ? undefined : '0.25rem'}
+              marginR={isOutgoing ? '0.25rem' : undefined}
             >
-              {!!metadata.image && (
-                <KContainer.View style={styles.cardThumb}>
-                  <KImage.Base
-                    uri={metadata.image}
-                    style={StyleSheet.absoluteFill}
-                    resizeMode="cover"
-                  />
-                </KContainer.View>
-              )}
-              <KContainer.View style={styles.cardBody}>
-                {!!metadata.title && (
-                  <KLabel.Text
-                    typo="TextNmMedium"
-                    color={KColors.palette.gray.w900}
-                    numberOfLines={1}
-                  >
-                    {metadata.title}
-                  </KLabel.Text>
-                )}
-                {!!metadata.url && (
-                  <KLabel.Text
-                    typo="TextXsMedium"
-                    color={KColors.palette.primary.w400}
-                    numberOfLines={1}
-                  >
-                    {metadata.url}
-                  </KLabel.Text>
-                )}
-                {!!metadata.description && (
-                  <KLabel.Text
-                    typo="TextXsNormal"
-                    color={KColors.gray.normal}
-                    numberOfLines={2}
-                  >
-                    {metadata.description}
-                  </KLabel.Text>
-                )}
-              </KContainer.View>
-            </KContainer.Touchable>
-          )}
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
         </KContainer.View>
-      </BubbleTailRow>
+      </>
     );
   }
 );
@@ -157,20 +114,6 @@ const styles = StyleSheet.create({
   textRow: {
     paddingHorizontal: KSpacingValue['0.25rem'],
   },
-  card: {
-    borderRadius: KSpacingValue['0.75rem'],
-    borderWidth: 1,
-    borderColor: 'rgba(57,62,64,0.1)',
-    backgroundColor: KColors.white,
-    overflow: 'hidden',
-  },
-  cardThumb: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-  },
-  cardBody: {
-    paddingHorizontal: KSpacingValue['0.75rem'],
-    paddingVertical: KSpacingValue['0.5rem'],
-    gap: 2,
-  },
+  timeLabel: { gap: 4, marginTop: 2 },
+  timeLabelRight: { justifyContent: 'flex-end' },
 });

package/src/components/messages/quotedMessage/QuotedMessagePreviewStrip.tsx

@@ -0,0 +1,168 @@
+import { memo, useCallback, useMemo } from 'react';
+import { DeviceEventEmitter, StyleSheet } from 'react-native';
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  getMessagePreviewParts,
+  getReplySenderName,
+  parseUrlMetadata,
+} from '../../../utils/messageUtils';
+import { getFileIcon, getMimeType } from '../../../utils/imageUtils';
+import { useUserStore } from '../../../store';
+import { useChatDetailContext } from '../../../context';
+import { ChatEvent } from '../../../types/events';
+
+interface QuotedMessagePreviewStripProps {
+  quotedMessage?: MessageItem;
+}
+
+/**
+ * The "replying to ..." strip — shared by QuotedMessage (message.quoteElem)
+ * and TextMessage (message.atTextElem?.quoteMessage, for the mention+quote
+ * combo). Extracted so both content types render the exact same preview
+ * instead of two copies drifting apart.
+ */
+export const QuotedMessagePreviewStrip = memo(
+  ({ quotedMessage }: QuotedMessagePreviewStripProps) => {
+    const { conversation } = useChatDetailContext();
+    const currentUserId = useUserStore((s) => s.user?.userID);
+    const messagePreview = getMessagePreviewParts(quotedMessage);
+
+    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]);
+
+    const handlePress = useCallback(() => {
+      DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+        clientMessageId: quotedMessage?.clientMsgID || '',
+      });
+    }, [quotedMessage]);
+
+    return (
+      <KContainer.Touchable
+        style={styles.quotedContainer}
+        onPress={handlePress}
+      >
+        <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 flexS={1} style={styles.content}>
+          <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+            {getReplySenderName(
+              quotedMessage,
+              currentUserId,
+              conversation,
+              true
+            )}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextSmNormal"
+            color={KColors.gray.light}
+            numberOfLines={1}
+            {...messagePreview.textProps}
+          >
+            {messagePreview.text}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+QuotedMessagePreviewStrip.displayName = 'QuotedMessagePreviewStrip';
+
+const styles = StyleSheet.create({
+  quotedContainer: {
+    backgroundColor: KColors.white,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    borderTopRightRadius: KRadiusValue['3x'],
+    borderBottomRightRadius: KRadiusValue['3x'],
+    paddingRight: KSpacingValue['0.5rem'],
+    maxWidth: '100%',
+  },
+  dot: {
+    width: 3,
+    height: '100%',
+    backgroundColor: KColors.palette.grayCool.w200,
+    borderRadius: KRadiusValue.x,
+    marginRight: -2,
+  },
+  content: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+    paddingVertical: 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/components/messages/quotedMessage/index.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { messageStyles } from '../styles';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
-import { type BaseLegendMessageProps } from '../types';
+import { formatMessageTime, type BaseLegendMessageProps } from '../types';
 import {
   KColors,
   KContainer,
@@ -27,7 +27,14 @@ import { ChatEvent } from '../../../types/events';
 interface QuotedMessageProps extends BaseLegendMessageProps {}
 
 const QuotedMessage = memo((props: QuotedMessageProps) => {
-  const { message, isOutgoing, isHighlighted, groupPosition } = props || {};
+  const {
+    message,
+    isOutgoing,
+    createdAtTime,
+    isHighlighted,
+    isTimeRevealed,
+    groupPosition,
+  } = props || {};
 
   const { conversation } = useChatDetailContext();
 
@@ -36,6 +43,7 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
   const quotedMessage = message?.quoteElem?.quoteMessage;
 
   const messagePreview = getMessagePreviewParts(quotedMessage);
+  const timeLabel = formatMessageTime(createdAtTime);
 
   const imageUrl = useMemo(() => {
     switch (quotedMessage?.contentType) {
@@ -64,72 +72,93 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
   }, [quotedMessage]);
 
   return (
-    <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
-      <KContainer.View
-        style={[
-          messageStyles.bubble,
-          styles.container,
-          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
-          isHighlighted && messageStyles.bubbleHighlighted,
-          getTailCornerStyle(isOutgoing, groupPosition),
-        ]}
-      >
-        <KContainer.Touchable
-          style={styles.quotedContainer}
-          onPress={handlePressQuotedMessage}
+    <>
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            styles.container,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+            isHighlighted && messageStyles.bubbleHighlighted,
+            getTailCornerStyle(isOutgoing, groupPosition),
+          ]}
         >
-          <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.Touchable
+            style={styles.quotedContainer}
+            onPress={handlePressQuotedMessage}
+          >
+            <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.View>
-              </KContainer.VisibleView>
+                </KContainer.VisibleView>
+              </KContainer.View>
+            </KContainer.VisibleView>
+            <KContainer.VisibleView visible={!!iconSource}>
+              <KImage.Base
+                uri={iconSource}
+                style={styles.icon}
+                resizeMode="contain"
+              />
+            </KContainer.VisibleView>
+            <KContainer.View flexS={1} style={styles.content}>
+              <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+                {getReplySenderName(
+                  quotedMessage,
+                  currentUserId,
+                  conversation,
+                  true
+                )}
+              </KLabel.Text>
+              <KLabel.Text
+                typo="TextSmNormal"
+                color={KColors.gray.light}
+                numberOfLines={1}
+                {...messagePreview.textProps}
+              >
+                {messagePreview.text}
+              </KLabel.Text>
             </KContainer.View>
-          </KContainer.VisibleView>
-          <KContainer.VisibleView visible={!!iconSource}>
-            <KImage.Base
-              uri={iconSource}
-              style={styles.icon}
-              resizeMode="contain"
-            />
-          </KContainer.VisibleView>
-          <KContainer.View flexS={1} style={styles.content}>
-            <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
-              {getReplySenderName(
-                quotedMessage,
-                currentUserId,
-                conversation,
-                true
-              )}
-            </KLabel.Text>
-            <KLabel.Text
-              typo="TextSmNormal"
-              color={KColors.gray.light}
-              numberOfLines={1}
-              {...messagePreview.textProps}
-            >
-              {messagePreview.text}
-            </KLabel.Text>
-          </KContainer.View>
-        </KContainer.Touchable>
-        <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
-          {message?.quoteElem?.text || ''}
-        </KLabel.Text>
+          </KContainer.Touchable>
+          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+            {message?.quoteElem?.text || ''}
+          </KLabel.Text>
+        </KContainer.View>
+      </BubbleTailRow>
+
+      <KContainer.View
+        row
+        alignItems
+        style={[styles.timeLabel, isOutgoing && styles.timeLabelRight]}
+      >
+        {isTimeRevealed && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL={isOutgoing ? undefined : '0.25rem'}
+            marginR={isOutgoing ? '0.25rem' : undefined}
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
       </KContainer.View>
-    </BubbleTailRow>
+    </>
   );
 });
 
@@ -187,4 +216,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  timeLabel: { gap: 4, marginTop: 2 },
+  timeLabelRight: { justifyContent: 'flex-end' },
 });

package/src/components/messages/stickerMessage/index.tsx

@@ -1,22 +1,49 @@
 import { memo } from 'react';
-import type { BaseLegendMessageProps } from '../types';
-import { KContainer, KImage } from '@droppii/libs';
+import { formatMessageTime, type BaseLegendMessageProps } from '../types';
+import { KContainer, KImage, KLabel } from '@droppii/libs';
 import { StyleSheet } from 'react-native';
 import { BubbleTailRow } from '../BubbleTailRow';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 
 export const STICKER_SIZE = 120;
 export const StickerMessage = memo(
-  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+  ({
+    message,
+    isOutgoing,
+    createdAtTime,
+    isTimeRevealed,
+  }: BaseLegendMessageProps) => {
+    const timeLabel = formatMessageTime(createdAtTime);
+
     return (
-      <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
-        <KContainer.View style={styles.message}>
-          <KImage.Base
-            uri={message?.stickerElem?.content || ''}
-            width={STICKER_SIZE}
-            height={STICKER_SIZE}
-          />
+      <>
+        <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
+          <KContainer.View style={styles.message}>
+            <KImage.Base
+              uri={message?.stickerElem?.content || ''}
+              width={STICKER_SIZE}
+              height={STICKER_SIZE}
+            />
+          </KContainer.View>
+        </BubbleTailRow>
+
+        <KContainer.View
+          row
+          alignItems
+          style={[styles.timeLabel, isOutgoing && styles.timeLabelRight]}
+        >
+          {isTimeRevealed && timeLabel ? (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={CHAT_BUBBLE_COLORS.timestamp}
+              marginL={isOutgoing ? undefined : '0.25rem'}
+              marginR={isOutgoing ? '0.25rem' : undefined}
+            >
+              {timeLabel}
+            </KLabel.Text>
+          ) : null}
         </KContainer.View>
-      </BubbleTailRow>
+      </>
     );
   }
 );
@@ -28,4 +55,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  timeLabel: { gap: 4, marginTop: 2 },
+  timeLabelRight: { justifyContent: 'flex-end' },
 });