@droppii-org/chat-mobile 0.2.82 → 0.2.84

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

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
-import type { BaseLegendMessageProps } from '../types';
+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';
@@ -39,35 +39,57 @@ 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 && (
-            <LinkPreviewCard metadata={metadata} onPressUrl={onPressUrl} />
-          )}
+          {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>
+      </>
     );
   }
 );
@@ -93,20 +115,5 @@ const styles = StyleSheet.create({
     paddingHorizontal: KSpacingValue['0.25rem'],
   },
   timeLabel: { gap: 4, marginTop: 2 },
-  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,
-  },
+  timeLabelRight: { justifyContent: 'flex-end' },
 });

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

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

@@ -1,5 +1,5 @@
 import { memo, useMemo } from 'react';
-import { Text } from 'react-native';
+import { Text, StyleSheet } from 'react-native';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
 import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { getMessageText } from '../../../utils/legendListMessage';
@@ -7,8 +7,7 @@ import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
-import type { BaseLegendMessageProps } from '../types';
-import { StyleSheet } from 'react-native';
+import { formatMessageTime, type BaseLegendMessageProps } from '../types';
 import { tokenize } from '../../../utils/mentions';
 import { deserializeMentionRanges } from '../../../utils/mentionSerializer';
 import type { IMessageItemEx } from '../../../types/chat';
@@ -29,11 +28,14 @@ export const TextMessage = memo(
   ({
     message,
     isOutgoing,
+    createdAtTime,
     isHighlighted,
+    isTimeRevealed,
     onPressUrl,
     groupPosition,
   }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const messageText = getMessageText(message);
+    const timeLabel = formatMessageTime(createdAtTime);
 
     const isAtTextMessage = message.contentType === MessageType.AtTextMessage;
 
@@ -106,39 +108,58 @@ export const TextMessage = memo(
     };
 
     return (
-      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+      <>
+        <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+          <KContainer.View
+            style={[
+              messageStyles.bubble,
+              styles.bubbleContent,
+              isOutgoing
+                ? messageStyles.bubbleSent
+                : messageStyles.bubbleReceived,
+              isHighlighted && messageStyles.bubbleHighlighted,
+              getTailCornerStyle(isOutgoing, groupPosition),
+            ]}
+          >
+            {quotedMessage && (
+              <QuotedMessagePreviewStrip quotedMessage={quotedMessage} />
+            )}
+            <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+              {segments
+                ? segments.map((segment, index) =>
+                    segment.type === 'mention' ? (
+                      <Text key={segment.mention.id} style={mentionTextStyle}>
+                        {`@${segment.mention.displayName}`}
+                      </Text>
+                    ) : (
+                      renderTextRun(segment.text, `seg-${index}`)
+                    )
+                  )
+                : messageText}
+            </KLabel.Text>
+            {!!urlMetadata && (
+              <LinkPreviewCard metadata={urlMetadata} onPressUrl={onPressUrl} />
+            )}
+          </KContainer.View>
+        </BubbleTailRow>
+
         <KContainer.View
-          style={[
-            messageStyles.bubble,
-            styles.bubbleContent,
-            isOutgoing
-              ? messageStyles.bubbleSent
-              : messageStyles.bubbleReceived,
-            isHighlighted && messageStyles.bubbleHighlighted,
-            getTailCornerStyle(isOutgoing, groupPosition),
-          ]}
+          row
+          alignItems
+          style={[styles.timeLabel, isOutgoing && styles.timeLabelRight]}
         >
-          {quotedMessage && (
-            <QuotedMessagePreviewStrip quotedMessage={quotedMessage} />
-          )}
-          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
-            {segments
-              ? segments.map((segment, index) =>
-                  segment.type === 'mention' ? (
-                    <Text key={segment.mention.id} style={mentionTextStyle}>
-                      {`@${segment.mention.displayName}`}
-                    </Text>
-                  ) : (
-                    renderTextRun(segment.text, `seg-${index}`)
-                  )
-                )
-              : messageText}
-          </KLabel.Text>
-          {!!urlMetadata && (
-            <LinkPreviewCard metadata={urlMetadata} onPressUrl={onPressUrl} />
-          )}
+          {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>
+      </>
     );
   }
 );
@@ -148,6 +169,7 @@ TextMessage.displayName = 'TextMessage';
 const styles = StyleSheet.create({
   bubbleContent: { gap: 4 },
   timeLabel: { gap: 4, marginTop: 2 },
+  timeLabelRight: { justifyContent: 'flex-end' },
 });
 
 // Same highlight color as the composer (MentionHighlightAdapter) and the

package/src/components/messages/types.ts

@@ -7,6 +7,7 @@ export interface BaseLegendMessageProps {
   isOutgoing: boolean;
   createdAtTime: number;
   isHighlighted?: boolean;
+  isTimeRevealed?: boolean;
   /** Position within its same-sender cluster — drives the bubble tail. */
   groupPosition?: GroupPosition;
   onMediaPress?: (items: MediaItem[], index?: number) => void;

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

@@ -59,7 +59,6 @@ import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
 import { resolveImageDisplayDims } from '../../components/messages/imageMessage';
-import { STICKER_SIZE } from '../../components/messages/stickerMessage';
 import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
@@ -151,6 +150,11 @@ export const ChatListLegend = memo(
     const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
       null
     );
+    // Single revealed message at a time: tapping a message shows its own
+    // time below it, tapping it again (or a different message) hides/moves it.
+    const [revealedMessageId, setRevealedMessageId] = useState<string | null>(
+      null
+    );
 
     const { applicationType } = useChatContext();
     const searchMessages = useMessageStore((s) => s.searchMessages);
@@ -176,7 +180,10 @@ export const ChatListLegend = memo(
     const onResetFlow = useCallback(() => {
       resetFlow();
     }, [resetFlow]);
-    console.info('dwqdqwdqw');
+
+    const handleMessagePress = useCallback((messageId: string) => {
+      setRevealedMessageId((prev) => (prev === messageId ? null : messageId));
+    }, []);
 
     const renderItem = useCallback(
       ({ item, index }: any) => {
@@ -241,6 +248,7 @@ export const ChatListLegend = memo(
                   onMediaPress={onMediaPress}
                   onPressUrl={onPressUrl}
                   onRetry={retryMessage}
+                  onPress={() => handleMessagePress(messageId)}
                   onLongPress={
                     onLongPress
                       ? () => handleMessageLongPress(messageId, message)
@@ -248,6 +256,7 @@ export const ChatListLegend = memo(
                   }
                   customMessageItemFactory={customMessageItemFactory}
                   isHighlighted={highlightedId === messageId}
+                  isTimeRevealed={revealedMessageId === messageId}
                   showName={showName}
                   showAvatar={showAvatar}
                   showSenderGutter={showSenderGutter}
@@ -292,6 +301,8 @@ export const ChatListLegend = memo(
         conversationFlow?.havingBotMessage,
         retryMessage,
         highlightedId,
+        revealedMessageId,
+        handleMessagePress,
       ]
     );
 
@@ -375,9 +386,10 @@ export const ChatListLegend = memo(
                 CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
               ).height + rowMargin;
             break;
-          case MessageType.StickerMessage:
-            candidateSize = STICKER_SIZE + rowMargin;
-            break;
+          // StickerMessage is intentionally NOT fixed-size here: it now renders
+          // an optional revealed-time label below it (tap-to-reveal-time), so
+          // its true height can change after the first render — falls through
+          // to dynamic measurement like text/link/quote/file do.
           default:
             return undefined;
         }
@@ -429,12 +441,14 @@ export const ChatListLegend = memo(
         flowStepId: conversationFlow?.flowCurrentStep?.id ?? '',
         lastMessageId,
         highlightedId,
+        revealedMessageId,
       }),
       [
         messageDataMap,
         conversationFlow?.flowCurrentStep?.id,
         lastMessageId,
         highlightedId,
+        revealedMessageId,
       ]
     );
 

package/src/screens/chat-detail/components/ChatMessageInput.tsx

@@ -125,12 +125,12 @@ export const ChatMessageInput = memo(
             textAlignVertical={isMultilineInput ? 'top' : 'center'}
             style={[styles.textInput]}
           >
-            {hasMentions && (
+            {hasMentions ? (
               <MentionHighlightAdapter
                 text={value ?? ''}
                 mentions={mentions!}
               />
-            )}
+            ) : null}
           </TextInput>
 
           {renderEmojiNode()}

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

@@ -9,6 +9,8 @@ const formatTime = (date: Date) =>
     hour12: false,
   });
 
+const pad2 = (value: number): string => String(value).padStart(2, '0');
+
 const formatDayLabel = (createdAt: number): string | null => {
   const date = new Date(createdAt);
   if (Number.isNaN(date.getTime())) return null;
@@ -30,18 +32,13 @@ const formatDayLabel = (createdAt: number): string | null => {
     return `${formatTime(date)} Hôm qua`;
   }
 
+  const dayMonth = `${pad2(date.getDate())}/${pad2(date.getMonth() + 1)}`;
+
   if (messageDay.getFullYear() === today.getFullYear()) {
-    return `${formatTime(date)} ${date.toLocaleDateString('vi-VN', {
-      day: 'numeric',
-      month: 'long',
-    })}`;
+    return `${formatTime(date)} ${dayMonth}`;
   }
 
-  return `${formatTime(date)} ${date.toLocaleDateString('vi-VN', {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  })}`;
+  return `${formatTime(date)} ${dayMonth}/${date.getFullYear()}`;
 };
 
 interface LegendChatDayProps {