@droppii-org/chat-mobile 0.2.78 → 0.2.80

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/screens/chat-detail/types.d.ts

@@ -40,7 +40,6 @@ export interface ChatDetailHeaderProps {
     onPressAvatar?: () => void;
     conversationId: string;
     targetUserId?: string;
-    targetGroupId?: string;
 }
 export interface ChatQuickActionsRenderParams {
     actions: DChatQuickAction[];

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/store/conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/store/conversation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,cAAc,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CACpB,EAAE,CAAC,EAAE,cAAc,EACnB,MAAM,CAAC,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,MAAM,GACf,IAAI,CAAC;IACR,sBAAsB,IAAI,gBAAgB,GAAG,SAAS,CAAC;IACvD,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAC9C,6FAA6F;IAC7F,qBAAqB,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC9E,mBAAmB,CAAC,aAAa,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAC7D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7C,sCAAsC;IACtC,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/C,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,oBAAoB,gFAwE9B,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,gBAAgB,GAAG,SAE/D,CAAC"}
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/store/conversation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,cAAc,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CACpB,EAAE,CAAC,EAAE,cAAc,EACnB,MAAM,CAAC,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,MAAM,GACf,IAAI,CAAC;IACR,sBAAsB,IAAI,gBAAgB,GAAG,SAAS,CAAC;IACvD,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;IAC9C,6FAA6F;IAC7F,qBAAqB,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC9E,mBAAmB,CAAC,aAAa,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAC7D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7C,sCAAsC;IACtC,uBAAuB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/C,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,oBAAoB,gFAoE9B,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,gBAAgB,GAAG,SAE/D,CAAC"}

package/lib/typescript/src/translation/resources/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAqNA,wBAEE"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAyNA,wBAEE"}

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

@@ -1 +1 @@
-{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/utils/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AAEvC,eAAO,MAAM,mBAAmB,GAC9B,GAAG,gBAAgB,EACnB,GAAG,gBAAgB,WAcpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EACxB,WAAW,MAAM,EACjB,aAAa,MAAM,WAUpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC;;;CAKrE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,eAAe,gBAAgB,QAWvD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,eAAe,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,UAAU,CAAC,YAGvE,CAAC"}
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/utils/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AAEvC,eAAO,MAAM,mBAAmB,GAC9B,GAAG,gBAAgB,EACnB,GAAG,gBAAgB,WAcpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EACxB,WAAW,MAAM,EACjB,aAAa,MAAM,WAUpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC;;;CAQrE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,eAAe,gBAAgB,QAWvD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,eAAe,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,UAAU,CAAC,YAGvE,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.78",
+  "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 };
+};

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