@droppii-org/chat-mobile 0.2.79 → 0.2.81

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

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 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 { useFileDownload } from '../../../hooks/useFileDownload';
 import {
@@ -12,7 +14,7 @@ import {
 } from '../../../utils/imageUtils';
 import { trans } from '../../../translation';
 export const FileMessage = memo(
-  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+  ({ message, isOutgoing, groupPosition }: BaseLegendMessageProps) => {
     const fileName = message.fileElem?.fileName || '[File]';
     const fileSize = message.fileElem?.fileSize ?? 0;
     const url =
@@ -49,97 +51,102 @@ export const FileMessage = memo(
     const isDownloading = state.status === 'downloading';
 
     return (
-      <KContainer.View
-        padding={'0.5rem'}
-        style={[
-          styles.wrapper,
-          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
-        ]}
-      >
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
         <KContainer.View
-          row
-          alignItems
-          br={'3x'}
-          paddingR={'0.75rem'}
-          paddingV={'0.25rem'}
-          background={KColors.white}
+          padding={'0.5rem'}
+          style={[
+            styles.wrapper,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+            getTailCornerStyle(isOutgoing, groupPosition),
+          ]}
         >
-          <KContainer.VisibleView visible={isDownloading}>
-            <KContainer.Touchable
-              center
-              br="round"
-              style={styles.cancelBtn}
-              width={32}
-              height={32}
-              onPress={handleDownload}
-            >
-              <KContainer.View
+          <KContainer.View
+            row
+            alignItems
+            br={'3x'}
+            paddingR={'0.75rem'}
+            paddingV={'0.25rem'}
+            background={KColors.white}
+          >
+            <KContainer.VisibleView visible={isDownloading}>
+              <KContainer.Touchable
                 center
                 br="round"
-                style={styles.cancelBtnIconContainer}
-                width={26}
-                height={26}
+                style={styles.cancelBtn}
+                width={32}
+                height={32}
+                onPress={handleDownload}
               >
-                <KImage.VectorIcons
-                  name="close"
-                  provider="MaterialCommunityIcons"
-                  size={24}
-                  color={KColors.white}
-                />
-              </KContainer.View>
-            </KContainer.Touchable>
-          </KContainer.VisibleView>
-          <KContainer.VisibleView visible={!isDownloading}>
-            <KImage.Base
-              uri={iconSource}
-              style={styles.fileIcon}
-              resizeMode="contain"
-            />
-          </KContainer.VisibleView>
+                <KContainer.View
+                  center
+                  br="round"
+                  style={styles.cancelBtnIconContainer}
+                  width={26}
+                  height={26}
+                >
+                  <KImage.VectorIcons
+                    name="close"
+                    provider="MaterialCommunityIcons"
+                    size={24}
+                    color={KColors.white}
+                  />
+                </KContainer.View>
+              </KContainer.Touchable>
+            </KContainer.VisibleView>
+            <KContainer.VisibleView visible={!isDownloading}>
+              <KImage.Base
+                uri={iconSource}
+                style={styles.fileIcon}
+                resizeMode="contain"
+              />
+            </KContainer.VisibleView>
 
-          {/* File name + size/progress */}
-          <KContainer.View flexS={1}>
-            <KLabel.Text
-              typo="TextSmMedium"
-              color={CHAT_BUBBLE_COLORS.text}
-              numberOfLines={1}
-              ellipsizeMode="middle"
-            >
-              {fileName}
-            </KLabel.Text>
-            <KLabel.Text
-              typo="TextXsNormal"
-              color={subtitleColor}
-              numberOfLines={1}
-            >
-              {subtitle}
-            </KLabel.Text>
-          </KContainer.View>
+            {/* File name + size/progress */}
+            <KContainer.View flexS={1}>
+              <KLabel.Text
+                typo="TextSmMedium"
+                color={CHAT_BUBBLE_COLORS.text}
+                numberOfLines={1}
+                ellipsizeMode="middle"
+              >
+                {fileName}
+              </KLabel.Text>
+              <KLabel.Text
+                typo="TextXsNormal"
+                color={subtitleColor}
+                numberOfLines={1}
+              >
+                {subtitle}
+              </KLabel.Text>
+            </KContainer.View>
 
-          {/* Eye (view) button */}
-          <KImage.VectorIcons
-            name="eye-outline"
-            provider="MaterialCommunityIcons"
-            onPress={handleView}
-            size={20}
-            color={KColors.palette.gray.w600}
-            containerStyle={styles.viewIcon}
-          />
+            {/* Eye (view) button */}
+            <KImage.VectorIcons
+              name="eye-outline"
+              provider="MaterialCommunityIcons"
+              onPress={handleView}
+              size={20}
+              color={KColors.palette.gray.w600}
+              containerStyle={styles.viewIcon}
+            />
 
-          <KImage.VectorIcons
-            name={'download-o'}
-            provider="DroppiiNew"
-            onPress={isDownloading ? undefined : handleDownload}
-            size={20}
-            color={
-              state.status === 'error'
-                ? (KColors.palette.danger?.w400 ?? '#FF3B30')
-                : KColors.palette.gray.w600
-            }
-            containerStyle={isDownloading ? styles.disabledIcon : undefined}
-          />
+            <KImage.VectorIcons
+              name={'download-o'}
+              provider="DroppiiNew"
+              onPress={isDownloading ? undefined : handleDownload}
+              size={20}
+              color={
+                state.status === 'error'
+                  ? (KColors.palette.danger?.w400 ?? '#FF3B30')
+                  : KColors.palette.gray.w600
+              }
+              containerStyle={isDownloading ? styles.disabledIcon : undefined}
+            />
+          </KContainer.View>
         </KContainer.View>
-      </KContainer.View>
+      </BubbleTailRow>
     );
   }
 );

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

@@ -3,6 +3,7 @@ import { StyleSheet, useWindowDimensions } from 'react-native';
 import { KContainer, KImage } from '@droppii/libs';
 import ChatImageDimens from '../../../utils/chatImageDimens';
 import { messageStyles } from '../styles';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 const DEFAULT_DIMS = { width: 300, height: 300 };
 
@@ -72,7 +73,7 @@ export const resolveImageDisplayDims = (
 };
 
 export const ImageMessage = memo(
-  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
     const windowWidth = useWindowDimensions().width;
     const [isLoading, setIsLoading] = useState(true);
     const pictureElem = (message as any).pictureElem;
@@ -130,28 +131,30 @@ export const ImageMessage = memo(
     );
 
     return (
-      <KContainer.View style={styles.wrapper}>
-        <KContainer.Touchable
-          onPress={handlePress}
-          style={[
-            messageStyles.imageBubble,
-            styles.imageContainer,
-            {
-              width: imageDimensions.width,
-              height: imageDimensions.height,
-            },
-          ]}
-        >
-          <KImage.Base
-            uri={optimizedUrl}
-            width={imageDimensions.width}
-            height={imageDimensions.height}
-            style={[messageStyles.imageBubble]}
-            onLoad={handleLoad}
-          />
-          {isLoading && <KContainer.View style={styles.skeleton} />}
-        </KContainer.Touchable>
-      </KContainer.View>
+      <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
+        <KContainer.View style={styles.wrapper}>
+          <KContainer.Touchable
+            onPress={handlePress}
+            style={[
+              messageStyles.imageBubble,
+              styles.imageContainer,
+              {
+                width: imageDimensions.width,
+                height: imageDimensions.height,
+              },
+            ]}
+          >
+            <KImage.Base
+              uri={optimizedUrl}
+              width={imageDimensions.width}
+              height={imageDimensions.height}
+              style={[messageStyles.imageBubble]}
+              onLoad={handleLoad}
+            />
+            {isLoading && <KContainer.View style={styles.skeleton} />}
+          </KContainer.Touchable>
+        </KContainer.View>
+      </BubbleTailRow>
     );
   }
 );

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

@@ -7,11 +7,12 @@ import {
   KColors,
   KSpacingValue,
 } from '@droppii/libs';
-import { formatMessageTime } from '../types';
 import type { BaseLegendMessageProps } from '../types';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { parseUrlMetadata } from '../../../utils/messageUtils';
 import { messageStyles } from '../styles';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 
 const renderTextWithLinks = (
   content: string,
@@ -61,22 +62,22 @@ export const LinkMessage = memo(
   ({
     message,
     isOutgoing,
-    createdAtTime,
     onPressUrl,
     isHighlighted,
+    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}>
         <KContainer.View
           style={[
             styles.bubble,
             isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
             isHighlighted && messageStyles.bubbleHighlighted,
+            getTailCornerStyle(isOutgoing, groupPosition),
           ]}
         >
           {!!content?.trim() && (
@@ -131,19 +132,7 @@ export const LinkMessage = memo(
             </KContainer.Touchable>
           )}
         </KContainer.View>
-
-        <KContainer.View row alignItems style={styles.timeLabel}>
-          {!isOutgoing && timeLabel ? (
-            <KLabel.Text
-              typo="TextXsNormal"
-              color={CHAT_BUBBLE_COLORS.timestamp}
-              marginL="0.25rem"
-            >
-              {timeLabel}
-            </KLabel.Text>
-          ) : null}
-        </KContainer.View>
-      </>
+      </BubbleTailRow>
     );
   }
 );
@@ -184,5 +173,4 @@ const styles = StyleSheet.create({
     paddingVertical: KSpacingValue['0.5rem'],
     gap: 2,
   },
-  timeLabel: { gap: 4, marginTop: 2 },
 });

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

@@ -2,9 +2,16 @@ import { memo } from 'react';
 import { KContainer } from '@droppii/libs';
 import { MergedImageGrid } from '../../MergedImageGrid';
 import { messageStyles } from '../styles';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 export const MergedMessage = memo(
-  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
+  ({
+    message,
+    isOutgoing,
+    onMediaPress,
+    groupPosition,
+  }: BaseLegendMessageProps) => {
     const mergeElem = (message as any).mergeElem;
 
     if (!mergeElem?.multiMessage) {
@@ -17,20 +24,25 @@ export const MergedMessage = memo(
     );
 
     return (
-      <KContainer.View
-        style={[
-          messageStyles.bubble,
-          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
-        ]}
-      >
-        {imageMessages.length > 0 && (
-          <MergedImageGrid
-            images={imageMessages}
-            maxDisplay={3}
-            onMediaPress={onMediaPress}
-          />
-        )}
-      </KContainer.View>
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+            getTailCornerStyle(isOutgoing, groupPosition),
+          ]}
+        >
+          {imageMessages.length > 0 && (
+            <MergedImageGrid
+              images={imageMessages}
+              maxDisplay={3}
+              onMediaPress={onMediaPress}
+            />
+          )}
+        </KContainer.View>
+      </BubbleTailRow>
     );
   }
 );

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

@@ -1,6 +1,8 @@
 import { memo, useCallback, useMemo } from 'react';
 import { messageStyles } from '../styles';
-import { formatMessageTime, type BaseLegendMessageProps } from '../types';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
+import { type BaseLegendMessageProps } from '../types';
 import {
   KColors,
   KContainer,
@@ -25,7 +27,7 @@ import { ChatEvent } from '../../../types/events';
 interface QuotedMessageProps extends BaseLegendMessageProps {}
 
 const QuotedMessage = memo((props: QuotedMessageProps) => {
-  const { message, isOutgoing, createdAtTime, isHighlighted } = props || {};
+  const { message, isOutgoing, isHighlighted, groupPosition } = props || {};
 
   const { conversation } = useChatDetailContext();
 
@@ -35,8 +37,6 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
 
   const messagePreview = getMessagePreviewParts(quotedMessage);
 
-  const timeLabel = formatMessageTime(createdAtTime);
-
   const imageUrl = useMemo(() => {
     switch (quotedMessage?.contentType) {
       case MessageType.PictureMessage:
@@ -64,13 +64,14 @@ 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
@@ -128,19 +129,7 @@ const QuotedMessage = memo((props: QuotedMessageProps) => {
           {message?.quoteElem?.text || ''}
         </KLabel.Text>
       </KContainer.View>
-
-      <KContainer.View row alignItems style={styles.timeLabel}>
-        {!isOutgoing && timeLabel ? (
-          <KLabel.Text
-            typo="TextXsNormal"
-            color={CHAT_BUBBLE_COLORS.timestamp}
-            marginL="0.25rem"
-          >
-            {timeLabel}
-          </KLabel.Text>
-        ) : null}
-      </KContainer.View>
-    </>
+    </BubbleTailRow>
   );
 });
 
@@ -198,5 +187,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  timeLabel: { gap: 4, marginTop: 2 },
 });

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

@@ -3,21 +3,30 @@ import { KContainer, KLabel } from '@droppii/libs';
 import { trans } from '../../../translation';
 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';
 
-export const RevokedMessage = memo(({ isOutgoing }: BaseLegendMessageProps) => {
-  return (
-    <KContainer.View
-      style={[
-        messageStyles.bubble,
-        isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
-      ]}
-    >
-      <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.timestamp}>
-        {trans('msg_type_revoke')}
-      </KLabel.Text>
-    </KContainer.View>
-  );
-});
+export const RevokedMessage = memo(
+  ({ isOutgoing, groupPosition }: BaseLegendMessageProps) => {
+    return (
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+            getTailCornerStyle(isOutgoing, groupPosition),
+          ]}
+        >
+          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.timestamp}>
+            {trans('msg_type_revoke')}
+          </KLabel.Text>
+        </KContainer.View>
+      </BubbleTailRow>
+    );
+  }
+);
 
 RevokedMessage.displayName = 'RevokedMessage';

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

@@ -2,19 +2,24 @@ import { memo } from 'react';
 import type { BaseLegendMessageProps } from '../types';
 import { KContainer, KImage } from '@droppii/libs';
 import { StyleSheet } from 'react-native';
+import { BubbleTailRow } from '../BubbleTailRow';
 
 export const STICKER_SIZE = 120;
-export const StickerMessage = memo(({ message }: BaseLegendMessageProps) => {
-  return (
-    <KContainer.View style={styles.message}>
-      <KImage.Base
-        uri={message?.stickerElem?.content || ''}
-        width={STICKER_SIZE}
-        height={STICKER_SIZE}
-      />
-    </KContainer.View>
-  );
-});
+export const StickerMessage = memo(
+  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+    return (
+      <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>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   message: {

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

@@ -3,25 +3,24 @@ import { KContainer, KLabel } from '@droppii/libs';
 import { getMessageText } from '../../../utils/legendListMessage';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
-import { formatMessageTime } from '../types';
+import { getTailCornerStyle } from '../bubbleTail.utils';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
-import { StyleSheet } from 'react-native';
 export const TextMessage = memo(
   ({
     message,
     isOutgoing,
-    createdAtTime,
     isHighlighted,
+    groupPosition,
   }: BaseLegendMessageProps) => {
     const messageText = getMessageText(message);
-    const timeLabel = formatMessageTime(createdAtTime);
 
     if (!messageText?.trim()) {
       return null;
     }
 
     return (
-      <>
+      <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
         <KContainer.View
           style={[
             messageStyles.bubble,
@@ -29,31 +28,16 @@ export const TextMessage = memo(
               ? messageStyles.bubbleSent
               : messageStyles.bubbleReceived,
             isHighlighted && messageStyles.bubbleHighlighted,
+            getTailCornerStyle(isOutgoing, groupPosition),
           ]}
         >
           <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
             {messageText}
           </KLabel.Text>
         </KContainer.View>
-
-        <KContainer.View row alignItems style={styles.timeLabel}>
-          {!isOutgoing && timeLabel ? (
-            <KLabel.Text
-              typo="TextXsNormal"
-              color={CHAT_BUBBLE_COLORS.timestamp}
-              marginL={'0.25rem'}
-            >
-              {timeLabel}
-            </KLabel.Text>
-          ) : null}
-        </KContainer.View>
-      </>
+      </BubbleTailRow>
     );
   }
 );
 
 TextMessage.displayName = 'TextMessage';
-
-const styles = StyleSheet.create({
-  timeLabel: { gap: 4, marginTop: 2 },
-});

package/src/components/messages/types.ts

@@ -1,11 +1,14 @@
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type { GroupPosition } from '../../utils/legendListMessage';
 
 export interface BaseLegendMessageProps {
   message: MessageItem;
   isOutgoing: boolean;
   createdAtTime: number;
   isHighlighted?: boolean;
+  /** Position within its same-sender cluster — drives the bubble tail. */
+  groupPosition?: GroupPosition;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
 }