@droppii-org/chat-mobile 0.2.79 → 0.2.80

package/lib/typescript/src/components/messages/BubbleTailRow.d.ts

@@ -0,0 +1,25 @@
+import { type PropsWithChildren } from 'react';
+import type { GroupPosition } from '../../utils/legendListMessage';
+export type BubbleTailRowProps = PropsWithChildren<{
+    isOutgoing: boolean;
+    groupPosition?: GroupPosition;
+    /**
+     * Set false for media bubbles, which carry no tail but still need the gutter
+     * so they line up with the text bubbles around them.
+     */
+    withTail?: boolean;
+}>;
+/**
+ * Places the tail beside the bubble that closes a cluster.
+ *
+ * The gutter on the tail side is always TAIL_WIDTH wide, whether or not it
+ * actually holds a tail. That keeps every bubble in a cluster starting at the
+ * same offset while leaving the row's own padding intact — the tail occupies
+ * reserved space rather than overhanging into the margin.
+ *
+ * The tail is a real sibling rather than an absolutely positioned overlay: it
+ * sits outside the bubble's edge, and `overflow: visible` is unreliable on
+ * Android for views carrying elevation — which the neighbouring pin badge does.
+ */
+export declare const BubbleTailRow: import("react").MemoExoticComponent<({ isOutgoing, groupPosition, withTail, children, }: BubbleTailRowProps) => import("react").JSX.Element>;
+//# sourceMappingURL=BubbleTailRow.d.ts.map

package/lib/typescript/src/components/messages/BubbleTailRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleTailRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/messages/BubbleTailRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IACjD,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,2FAMrB,kBAAkB,iCAqBtB,CAAC"}

package/lib/typescript/src/components/messages/bubbleTail.utils.d.ts

@@ -0,0 +1,11 @@
+import type { ViewStyle } from 'react-native';
+import type { GroupPosition } from '../../utils/legendListMessage';
+/** Only the message closing a cluster carries a tail. */
+export declare const hasBubbleTail: (position?: GroupPosition) => boolean;
+/**
+ * The corner the tail hangs off must be square, otherwise the tail's straight
+ * 18px edge meets the bubble's rounded corner and leaves a visible notch.
+ * Every other corner keeps its normal radius.
+ */
+export declare const getTailCornerStyle: (isOutgoing: boolean, position?: GroupPosition) => ViewStyle | undefined;
+//# sourceMappingURL=bubbleTail.utils.d.ts.map

package/lib/typescript/src/components/messages/bubbleTail.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubbleTail.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/messages/bubbleTail.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE,yDAAyD;AACzD,eAAO,MAAM,aAAa,GAAI,WAAW,aAAa,KAAG,OACb,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAY,OAAO,EACnB,WAAW,aAAa,KACvB,SAAS,GAAG,SAKd,CAAC"}

package/lib/typescript/src/components/messages/fileMessage/index.d.ts

@@ -1,3 +1,3 @@
 import type { BaseLegendMessageProps } from '../types';
-export declare const FileMessage: import("react").MemoExoticComponent<({ message, isOutgoing }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const FileMessage: import("react").MemoExoticComponent<({ message, isOutgoing, groupPosition }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/fileMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/fileMessage/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAQvD,eAAO,MAAM,WAAW,gEACI,sBAAsB,iCAkIjD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/fileMessage/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAQvD,eAAO,MAAM,WAAW,+EACmB,sBAAsB,iCAuIhE,CAAC"}

package/lib/typescript/src/components/messages/imageMessage/index.d.ts

@@ -11,5 +11,5 @@ export declare const resolveImageDisplayDims: (message: unknown, windowWidth: nu
     width: number;
     height: number;
 };
-export declare const ImageMessage: import("react").MemoExoticComponent<({ message, onMediaPress }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const ImageMessage: import("react").MemoExoticComponent<({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/imageMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/imageMessage/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAgCvD;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAClC,SAAS,OAAO,EAChB,aAAa,MAAM,KAClB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAuBjC,CAAC;AAEF,eAAO,MAAM,YAAY,kEACK,sBAAsB,iCAkFnD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/imageMessage/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAgCvD;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAClC,SAAS,OAAO,EAChB,aAAa,MAAM,KAClB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAuBjC,CAAC;AAEF,eAAO,MAAM,YAAY,8EACiB,sBAAsB,iCAoF/D,CAAC"}

package/lib/typescript/src/components/messages/linkMessage/index.d.ts

@@ -1,5 +1,5 @@
 import type { BaseLegendMessageProps } from '../types';
-export declare const LinkMessage: import("react").MemoExoticComponent<({ message, isOutgoing, createdAtTime, onPressUrl, isHighlighted, }: BaseLegendMessageProps & {
+export declare const LinkMessage: import("react").MemoExoticComponent<({ message, isOutgoing, onPressUrl, isHighlighted, groupPosition, }: BaseLegendMessageProps & {
     onPressUrl?: (url: string) => void;
 }) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/linkMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/linkMessage/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAiDvD,eAAO,MAAM,WAAW,2GAOnB,sBAAsB,GAAG;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,iCAkFnE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/linkMessage/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAmDvD,eAAO,MAAM,WAAW,2GAOnB,sBAAsB,GAAG;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,iCAsEnE,CAAC"}

package/lib/typescript/src/components/messages/mergedMessage/index.d.ts

@@ -1,3 +1,3 @@
 import type { BaseLegendMessageProps } from '../types';
-export declare const MergedMessage: import("react").MemoExoticComponent<({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const MergedMessage: import("react").MemoExoticComponent<({ message, isOutgoing, onMediaPress, groupPosition, }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/mergedMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/mergedMessage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,eAAO,MAAM,aAAa,8EACgB,sBAAsB,iCA6B/D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/mergedMessage/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,eAAO,MAAM,aAAa,8FAMrB,sBAAsB,iCAkC1B,CAAC"}

package/lib/typescript/src/components/messages/quotedMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/quotedMessage/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAsB1E,UAAU,kBAAmB,SAAQ,sBAAsB;CAAG;AAE9D,QAAA,MAAM,aAAa,8CAAgB,kBAAkB,iCAsHnD,CAAC;AAIH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/quotedMessage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAsBvD,UAAU,kBAAmB,SAAQ,sBAAsB;CAAG;AAE9D,QAAA,MAAM,aAAa,8CAAgB,kBAAkB,iCAyGnD,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/lib/typescript/src/components/messages/revokedMessage/index.d.ts

@@ -1,3 +1,3 @@
 import type { BaseLegendMessageProps } from '../types';
-export declare const RevokedMessage: import("react").MemoExoticComponent<({ isOutgoing }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const RevokedMessage: import("react").MemoExoticComponent<({ isOutgoing, groupPosition }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/revokedMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/revokedMessage/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,cAAc,uDAAyB,sBAAsB,iCAaxE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/revokedMessage/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,cAAc,sEACO,sBAAsB,iCAmBvD,CAAC"}

package/lib/typescript/src/components/messages/stickerMessage/index.d.ts

@@ -1,4 +1,4 @@
 import type { BaseLegendMessageProps } from '../types';
 export declare const STICKER_SIZE = 120;
-export declare const StickerMessage: import("react").MemoExoticComponent<({ message }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const StickerMessage: import("react").MemoExoticComponent<({ message, isOutgoing }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/stickerMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/stickerMessage/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,cAAc,oDAAsB,sBAAsB,iCAUrE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/stickerMessage/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAKvD,eAAO,MAAM,YAAY,MAAM,CAAC;AAChC,eAAO,MAAM,cAAc,gEACC,sBAAsB,iCAajD,CAAC"}

package/lib/typescript/src/components/messages/textMessage/index.d.ts

@@ -1,3 +1,3 @@
 import type { BaseLegendMessageProps } from '../types';
-export declare const TextMessage: import("react").MemoExoticComponent<({ message, isOutgoing, createdAtTime, isHighlighted, }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const TextMessage: import("react").MemoExoticComponent<({ message, isOutgoing, isHighlighted, groupPosition, }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/textMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/textMessage/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,WAAW,+FAMnB,sBAAsB,iCAsC1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/textMessage/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,eAAO,MAAM,WAAW,+FAMnB,sBAAsB,iCA0B1B,CAAC"}

package/lib/typescript/src/components/messages/types.d.ts

@@ -1,10 +1,13 @@
 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;
 }
 export declare const formatMessageTime: (createdAt: number) => string;

package/lib/typescript/src/components/messages/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/messages/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,WAWlD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/messages/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wEAAwE;IACxE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,WAWlD,CAAC"}

package/lib/typescript/src/components/messages/videoMessage/index.d.ts

@@ -1,3 +1,3 @@
 import type { BaseLegendMessageProps } from '../types';
-export declare const VideoMessage: import("react").MemoExoticComponent<({ message, onMediaPress }: BaseLegendMessageProps) => import("react").JSX.Element>;
+export declare const VideoMessage: import("react").MemoExoticComponent<({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => import("react").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/messages/videoMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/videoMessage/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAQvD,eAAO,MAAM,YAAY,kEACK,sBAAsB,iCAoEnD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/messages/videoMessage/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAQvD,eAAO,MAAM,YAAY,8EACiB,sBAAsB,iCAsE/D,CAAC"}

package/lib/typescript/src/hooks/groups/useDismissGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDismissGroup.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/groups/useDismissGroup.tsx"],"names":[],"mappings":"AAMA,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AACD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB;6BA0C9C,MAAM;EA4B1B"}
+{"version":3,"file":"useDismissGroup.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/groups/useDismissGroup.tsx"],"names":[],"mappings":"AAMA,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AACD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB;6BA2C9C,MAAM;EA4B1B"}

package/lib/typescript/src/screens/chat-detail/ChatListLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatListLegend.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/ChatListLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAiB,EAKf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAU9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAqC7C,UAAU,2BAA4B,SAAQ,aAAa;IACzD,OAAO,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,kBAAkB,EAAE,CAAC,IAAI,EAAE;QACzB,QAAQ,EAAE,OAAO,CAAC;QAClB,aAAa,EAAE,OAAO,CAAC;KACxB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,6RAmBtB,2BAA2B,iCAmd/B,CAAC"}
+{"version":3,"file":"ChatListLegend.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/ChatListLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAiB,EAKf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAc9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA8C7C,UAAU,2BAA4B,SAAQ,aAAa;IACzD,OAAO,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,kBAAkB,EAAE,CAAC,IAAI,EAAE;QACzB,QAAQ,EAAE,OAAO,CAAC;QAClB,aAAa,EAAE,OAAO,CAAC;KACxB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,6RAmBtB,2BAA2B,iCA2gB/B,CAAC"}

package/lib/typescript/src/screens/chat-detail/legend/LegendChatDay.d.ts

@@ -1,6 +1,11 @@
 interface LegendChatDayProps {
     createdAt: number;
+    /**
+     * Render just the clock time, without the day. Used where a cluster broke on
+     * elapsed time inside a single day — the date is already on screen above.
+     */
+    timeOnly?: boolean;
 }
-export declare const LegendChatDay: import("react").MemoExoticComponent<({ createdAt }: LegendChatDayProps) => import("react").JSX.Element>;
+export declare const LegendChatDay: import("react").MemoExoticComponent<({ createdAt, timeOnly }: LegendChatDayProps) => import("react").JSX.Element>;
 export {};
 //# sourceMappingURL=LegendChatDay.d.ts.map

package/lib/typescript/src/screens/chat-detail/legend/LegendChatDay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendChatDay.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/legend/LegendChatDay.tsx"],"names":[],"mappings":"AA8CA,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,sDAAwB,kBAAkB,iCAiBlE,CAAC"}
+{"version":3,"file":"LegendChatDay.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/legend/LegendChatDay.tsx"],"names":[],"mappings":"AA8CA,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,gEACU,kBAAkB,iCAqBrD,CAAC"}

package/lib/typescript/src/screens/chat-detail/legend/LegendChatMessage.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
+import type { GroupPosition } from '../../../utils/legendListMessage';
 interface LegendChatMessageProps {
     message: MessageItem;
     isOutgoing: boolean;
@@ -12,7 +13,19 @@ interface LegendChatMessageProps {
     onLongPress?: () => void;
     customMessageItemFactory?: (m: MessageItem) => ReactNode;
     isHighlighted?: boolean;
+    /** Sender name above the bubble — first message of an incoming cluster. */
+    showName?: boolean;
+    /** Sender avatar beside the bubble — last message of an incoming cluster. */
+    showAvatar?: boolean;
+    /**
+     * Reserve the avatar column. True for every incoming message in a group
+     * conversation, not just the one carrying the avatar, so that the middle of
+     * a cluster stays aligned with its last message.
+     */
+    showSenderGutter?: boolean;
+    /** Position within its same-sender cluster — drives the bubble tail. */
+    groupPosition?: GroupPosition;
 }
-export declare const LegendChatMessage: import("react").MemoExoticComponent<({ message, isOutgoing, createdAtTime, onMediaPress, onPressUrl, onRetry, onPress, onLongPress, customMessageItemFactory, isHighlighted, }: LegendChatMessageProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>> | import("react").JSX.Element>;
+export declare const LegendChatMessage: import("react").MemoExoticComponent<({ message, isOutgoing, createdAtTime, onMediaPress, onPressUrl, onRetry, onPress, onLongPress, customMessageItemFactory, isHighlighted, showName, showAvatar, showSenderGutter, groupPosition, }: LegendChatMessageProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>> | import("react").JSX.Element>;
 export {};
 //# sourceMappingURL=LegendChatMessage.d.ts.map

package/lib/typescript/src/screens/chat-detail/legend/LegendChatMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendChatMessage.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/legend/LegendChatMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAqB/D,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,wBAAwB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,SAAS,CAAC;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAsCD,eAAO,MAAM,iBAAiB,kLAYzB,sBAAsB,wRAqE1B,CAAC"}
+{"version":3,"file":"LegendChatMessage.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/legend/LegendChatMessage.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAe/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAStE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,wBAAwB,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,SAAS,CAAC;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AA4BD,eAAO,MAAM,iBAAiB,yOAgBzB,sBAAsB,wRA4F1B,CAAC"}

package/lib/typescript/src/utils/legendListMessage.d.ts

@@ -3,18 +3,33 @@ import { type MessageItem } from '@droppii/openim-rn-client-sdk';
  * Extract message text based on content type
  */
 export declare const getMessageText: (message: MessageItem) => string;
+/** Where a message sits inside its run of consecutive same-sender messages. */
+export type GroupPosition = 'first' | 'middle' | 'last' | 'solo';
 export interface PrecomputedMessageData {
     messageId: string;
     dayStart: boolean;
+    /**
+     * More than GROUP_TIME_GAP has passed since the previous message. The list
+     * marks these with a time label: the cluster break is real but, unlike a day
+     * change, nothing else on screen would show why the run stopped.
+     */
+    timeBreak: boolean;
     createdAt: number;
+    groupPosition: GroupPosition;
+}
+export interface PrecomputeOptions {
+    isBotConversation?: boolean;
+    currentUserId?: string;
 }
 /**
- * Precompute all message rendering data in single pass O(n)
- * Eliminates redundant Date creation and type resolution during render
+ * Precompute per-message render data (day dividers + cluster position) so
+ * renderItem stays allocation-free.
  *
- * Returns: Map of messageId -> {dayStart, messageType, createdAt}
+ * Runs in two passes: day starts first, because cluster boundaries depend on
+ * them — a divider between two messages separates them however close in time
+ * they are.
  */
-export declare const precomputeLegendListData: (messages: MessageItem[]) => Map<string, PrecomputedMessageData>;
+export declare const precomputeLegendListData: (messages: MessageItem[], { isBotConversation, currentUserId }?: PrecomputeOptions) => Map<string, PrecomputedMessageData>;
 /**
  * Legacy: Use precomputeLegendListData instead
  * Kept for backward compatibility

package/lib/typescript/src/utils/legendListMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legendListMessage.d.ts","sourceRoot":"","sources":["../../../../src/utils/legendListMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,KAAG,MAkCrD,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,WAAW,EAAE,KACtB,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAwBpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,UAAU,WAAW,EAAE,KACtB,GAAG,CAAC,MAAM,EAAE,OAAO,CAYrB,CAAC"}
+{"version":3,"file":"legendListMessage.d.ts","sourceRoot":"","sources":["../../../../src/utils/legendListMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI9E;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,KAAG,MAkCrD,CAAC;AAEF,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,aAAa,CAAC;CAC9B;AAsCD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,WAAW,EAAE,EACvB,uCAA8C,iBAAsB,KACnE,GAAG,CAAC,MAAM,EAAE,sBAAsB,CA6EpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,UAAU,WAAW,EAAE,KACtB,GAAG,CAAC,MAAM,EAAE,OAAO,CAYrB,CAAC"}

package/lib/typescript/src/utils/message.d.ts

@@ -1,4 +1,21 @@
 import { type ConversationItem, type MessageItem } from '@droppii/openim-rn-client-sdk';
+/**
+ * Canonical timestamp for a message. `sendTime` is 0 until the SDK stamps an
+ * outgoing message, so `createTime` covers the in-flight window. This is the
+ * key the list is sorted by — anything reasoning about message order must use
+ * it too, or it will disagree with the order actually rendered.
+ */
+export declare const getMessageTime: (message: MessageItem) => number;
+/**
+ * Stable id for a message inside a rendered list.
+ *
+ * A message that has not round-tripped through the server yet may carry
+ * neither id, so position and timestamp stand in. Every consumer that looks a
+ * message up by id must derive it the same way — the precompute map is keyed
+ * on this, so a divergent formula silently misses and the message renders
+ * without its day divider or cluster position.
+ */
+export declare const getMessageRenderId: (message: MessageItem, index: number) => string;
 export declare const mergeMessages: (current: MessageItem[], incoming: MessageItem[]) => MessageItem[];
 export declare const normalizeCreatedMessage: (message: MessageItem | string) => MessageItem;
 export type HistoryPaginationAnchor = {

package/lib/typescript/src/utils/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/utils/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AASvC,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,WAAW,EAab,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,GAAG,MAAM,KAC5B,WAYF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,SAAS;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,kBAAkB,WAAW,KAC5B,MAMF,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,EAAE,KACtB,uBAAuB,GAAG,IAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,OASF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EACpB,iBAAiB,MAAM,EACvB,eAAe,MAAM,KACpB,OA2BF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe,gBAAgB;;;CAW5D,CAAC"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/utils/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAGvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,WACN,CAAC;AAK9C;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,EAAE,OAAO,MAAM,WACA,CAAC;AAEvE,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,WAAW,EAab,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,GAAG,MAAM,KAC5B,WAYF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,SAAS;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,kBAAkB,WAAW,KAC5B,MAMF,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,EAAE,KACtB,uBAAuB,GAAG,IAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EAAE,EACtB,UAAU,WAAW,EAAE,KACtB,OASF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EACpB,iBAAiB,MAAM,EACvB,eAAe,MAAM,KACpB,OA2BF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe,gBAAgB;;;CAW5D,CAAC"}

package/lib/typescript/src/utils/messageUtils.d.ts

@@ -9,6 +9,7 @@ export declare const GROUP_NOTIFICATION_TEXT: Partial<Record<MessageType, {
     previewKey: string;
     bySenderKey: string;
 }>>;
+export declare const GROUP_NOTIFICATION_TYPES: MessageType[];
 export interface ResolvedNotificationText {
     previewKey: string;
     bySenderKey: string;

package/lib/typescript/src/utils/messageUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/messageUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,WAAW,EAEX,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,KAAG,OACL,CAAC;AAKpD,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAC3C,MAAM,CAAC,WAAW,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAqEjE,CAAC;AA2BF,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,KACnB,wBAAwB,GAAG,SA8D7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,KAAG,MAYzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,UAAU,WAAW,KAAG,MAyFzD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,KACpB,SAUF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,KACpB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAGrC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,sBAAsB,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,KACnB,oBA0DF,CAAC;AAKF,eAAO,MAAM,6BAA6B,GACxC,SAAS,WAAW,KACnB,MAAM,GAAG,SAaX,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EACpB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,KAC9B,MAUF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,kBAAkB,GAAI,0EAKhC,wBAAwB,KAAG,MAyB7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,WAAW,EACrB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,EAC/B,SAAS,OAAO,KACf,MAOF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAS7D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAUhE,CAAC"}
+{"version":3,"file":"messageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/messageUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,WAAW,EAEX,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,KAAG,OACL,CAAC;AAKpD,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAC3C,MAAM,CAAC,WAAW,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CAqEjE,CAAC;AAMF,eAAO,MAAM,wBAAwB,EAEpB,WAAW,EAAE,CAAC;AA2B/B,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAQD,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,KACnB,wBAAwB,GAAG,SA8D7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,KAAG,MAYzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,UAAU,WAAW,KAAG,MAyFzD,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,WAAW,KACpB,SAUF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,UAAU,WAAW,KACpB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAGrC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,sBAAsB,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,KACnB,oBA0DF,CAAC;AAKF,eAAO,MAAM,6BAA6B,GACxC,SAAS,WAAW,KACnB,MAAM,GAAG,SAaX,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,EACpB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,KAC9B,MAUF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,6BAA6B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,kBAAkB,GAAI,0EAKhC,wBAAwB,KAAG,MAyB7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,WAAW,EACrB,gBAAgB,MAAM,EACtB,eAAe,gBAAgB,EAC/B,SAAS,OAAO,KACf,MAOF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,YAAY,GAAG,SAS7D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAUhE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",

package/src/components/messages/BubbleTail.tsx

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+export const TAIL_WIDTH = 4;
+const TAIL_HEIGHT = 18;
+
+// Traced from the design export (Vector 2.svg): a straight vertical edge that
+// continues the bubble's side, flaring outward toward the bottom.
+const TAIL_PATH =
+  'M2.6202 18H0V0C0.482375 4.5 0.657308 10.5 3.03348 14C4.56838 16.2608 4.15936 18 2.6202 18Z';
+
+export interface BubbleTailProps {
+  /**
+   * Solid bubble colour. The export carries fill-opacity 0.1, but
+   * CHAT_BUBBLE_COLORS is already flattened — reusing the translucent fill here
+   * would render the tail a different shade from the bubble it joins.
+   */
+  color: string;
+  /** Side of the bubble the tail hangs off. */
+  side: 'left' | 'right';
+}
+
+export const BubbleTail = memo(({ color, side }: BubbleTailProps) => (
+  <Svg
+    width={TAIL_WIDTH}
+    height={TAIL_HEIGHT}
+    viewBox={`0 0 ${TAIL_WIDTH} ${TAIL_HEIGHT}`}
+    fill="none"
+    style={side === 'left' ? { transform: [{ scaleX: -1 }] } : undefined}
+  >
+    <Path d={TAIL_PATH} fill={color} />
+  </Svg>
+));
+
+BubbleTail.displayName = 'BubbleTail';

package/src/components/messages/BubbleTailRow.tsx

@@ -0,0 +1,64 @@
+import { memo, type PropsWithChildren } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer } from '@droppii/libs';
+import { BubbleTail, TAIL_WIDTH } from './BubbleTail';
+import { hasBubbleTail } from './bubbleTail.utils';
+import { CHAT_BUBBLE_COLORS } from '../../screens/chat-detail/constants';
+import type { GroupPosition } from '../../utils/legendListMessage';
+
+export type BubbleTailRowProps = PropsWithChildren<{
+  isOutgoing: boolean;
+  groupPosition?: GroupPosition;
+  /**
+   * Set false for media bubbles, which carry no tail but still need the gutter
+   * so they line up with the text bubbles around them.
+   */
+  withTail?: boolean;
+}>;
+
+/**
+ * Places the tail beside the bubble that closes a cluster.
+ *
+ * The gutter on the tail side is always TAIL_WIDTH wide, whether or not it
+ * actually holds a tail. That keeps every bubble in a cluster starting at the
+ * same offset while leaving the row's own padding intact — the tail occupies
+ * reserved space rather than overhanging into the margin.
+ *
+ * The tail is a real sibling rather than an absolutely positioned overlay: it
+ * sits outside the bubble's edge, and `overflow: visible` is unreliable on
+ * Android for views carrying elevation — which the neighbouring pin badge does.
+ */
+export const BubbleTailRow = memo(
+  ({
+    isOutgoing,
+    groupPosition,
+    withTail = true,
+    children,
+  }: BubbleTailRowProps) => {
+    const gutter =
+      withTail && hasBubbleTail(groupPosition) ? (
+        <BubbleTail
+          side={isOutgoing ? 'right' : 'left'}
+          color={
+            isOutgoing ? CHAT_BUBBLE_COLORS.sent : CHAT_BUBBLE_COLORS.received
+          }
+        />
+      ) : (
+        <KContainer.View style={styles.gutter} />
+      );
+
+    return (
+      <KContainer.View row alignItems="flex-end">
+        {!isOutgoing && gutter}
+        {children}
+        {isOutgoing && gutter}
+      </KContainer.View>
+    );
+  }
+);
+
+BubbleTailRow.displayName = 'BubbleTailRow';
+
+const styles = StyleSheet.create({
+  gutter: { width: TAIL_WIDTH },
+});

package/src/components/messages/bubbleTail.utils.ts

@@ -0,0 +1,21 @@
+import type { ViewStyle } from 'react-native';
+import type { GroupPosition } from '../../utils/legendListMessage';
+
+/** Only the message closing a cluster carries a tail. */
+export const hasBubbleTail = (position?: GroupPosition): boolean =>
+  position === 'last' || position === 'solo';
+
+/**
+ * The corner the tail hangs off must be square, otherwise the tail's straight
+ * 18px edge meets the bubble's rounded corner and leaves a visible notch.
+ * Every other corner keeps its normal radius.
+ */
+export const getTailCornerStyle = (
+  isOutgoing: boolean,
+  position?: GroupPosition
+): ViewStyle | undefined => {
+  if (!hasBubbleTail(position)) return undefined;
+  return isOutgoing
+    ? { borderBottomRightRadius: 0 }
+    : { borderBottomLeftRadius: 0 };
+};