@droppii-org/chat-mobile 0.2.79 → 0.2.80

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

@@ -6,6 +6,7 @@ import ChatImageDimens, {
 } from '../../../utils/chatImageDimens';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
+import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
 const formatDuration = (durationMs: number): string => {
   const totalSeconds = Math.floor(durationMs / 1000);
@@ -15,7 +16,7 @@ const formatDuration = (durationMs: number): string => {
 };
 
 export const VideoMessage = memo(
-  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
     const videoElem = message?.videoElem;
     const videoUrl = videoElem?.videoUrl;
     const duration = videoElem?.duration;
@@ -29,13 +30,15 @@ export const VideoMessage = memo(
 
     if (!videoUrl) {
       return (
-        <KContainer.View
-          style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
-        >
-          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
-            📹 [Video unavailable]
-          </KLabel.Text>
-        </KContainer.View>
+        <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
+          <KContainer.View
+            style={[messageStyles.bubble, messageStyles.videoPlaceholder]}
+          >
+            <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+              📹 [Video unavailable]
+            </KLabel.Text>
+          </KContainer.View>
+        </BubbleTailRow>
       );
     }
 
@@ -44,7 +47,7 @@ export const VideoMessage = memo(
     );
 
     return (
-      <>
+      <BubbleTailRow isOutgoing={isOutgoing} withTail={false}>
         <KContainer.Touchable
           onPress={handlePress}
           style={[
@@ -80,7 +83,7 @@ export const VideoMessage = memo(
             </KContainer.View>
           )}
         </KContainer.Touchable>
-      </>
+      </BubbleTailRow>
     );
   }
 );

package/src/hooks/groups/useDismissGroup.tsx

@@ -14,6 +14,7 @@ export function useDismissGroup({ onSuccess }: UseDismissGroupProps) {
         header: {
           title: { text: trans('group:dismiss_confirm_title') },
           alignment: 'center',
+          showCloseButton: true,
         },
         body: {
           renderContent: () => {

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

@@ -32,7 +32,11 @@ import {
   KRadiusValue,
   KImage,
 } from '@droppii/libs';
-import { precomputeLegendListData } from '../../utils/legendListMessage';
+import {
+  precomputeLegendListData,
+  type GroupPosition,
+} from '../../utils/legendListMessage';
+import { getMessageRenderId } from '../../utils/message';
 import type { ChatListProps } from './types';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
@@ -50,7 +54,7 @@ import { ChatEvent, type ScrollToMessagePayload } from '../../types/events';
 import { useMessageStore } from '../../store/message';
 import { useChatContext } from '../../context';
 import { messageStyles } from './legend/messageTypes';
-import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { MessageType, PeerType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useUserStore } from '../../store';
 import { ChatMessageAPI } from '../../services';
@@ -60,10 +64,19 @@ import ChatImageDimens, {
   CHAT_IMAGE_VIEW_SOURCE,
 } from '../../utils/chatImageDimens';
 
-// Row wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`)
-// adds only a bottom margin — no vertical padding — so a fixed-size item's true
-// rendered height is `content height + this margin`.
-const ROW_MARGIN_BOTTOM = KSpacingValue['0.25rem'];
+// Cluster spacing: a wide gap after the message that closes a cluster, a tight
+// one between messages inside it. These override the flat margin on the row
+// wrapper (`messageRowLeft`/`messageRowRight` in `components/messages/styles.ts`),
+// which adds only a bottom margin and no vertical padding — so a fixed-size
+// item's true rendered height stays `content height + this margin`, and
+// getFixedItemSize can keep folding it in.
+const ROW_MARGIN_CLUSTER_END = KSpacingValue['0.5rem'];
+const ROW_MARGIN_IN_CLUSTER = KSpacingValue['0.25rem'];
+
+const getRowMarginBottom = (position: GroupPosition): number =>
+  position === 'last' || position === 'solo'
+    ? ROW_MARGIN_CLUSTER_END
+    : ROW_MARGIN_IN_CLUSTER;
 
 // KeyboardAwareLegendList auto scroll when modal opened
 // TODO: Convert toolbox to absolute view
@@ -103,12 +116,23 @@ export const ChatListLegend = memo(
     const currentUserId = useUserStore((s) => s.user?.userID);
     const windowWidth = useWindowDimensions().width;
     // Precompute all message data in single pass (O(n))
+    const { isBotConversation, conversationFlow, conversation } =
+      useChatDetailContext();
+
+    // Avatar and sender name only appear in real group chats — a bot thread is
+    // a Group session too, but reads as a single counterpart.
+    const isGroupConversation =
+      conversation?.peerType === PeerType.Group && !isBotConversation;
+
     const messageDataMap = useMemo(
-      () => precomputeLegendListData(messages),
-      [messages]
+      () =>
+        precomputeLegendListData(messages, {
+          isBotConversation,
+          currentUserId,
+        }),
+      [messages, isBotConversation, currentUserId]
     );
 
-    const { isBotConversation, conversationFlow } = useChatDetailContext();
     const { retryMessage } = useSendMessage();
 
     const lastMessageId = useMemo(() => {
@@ -163,17 +187,22 @@ export const ChatListLegend = memo(
           const isLastMessage =
             (message.clientMsgID || message.serverMsgID) === lastMessageId;
           const isLastIncoming = !isOutgoing && isLastMessage;
-          const messageId =
-            message.clientMsgID ||
-            message.serverMsgID ||
-            `temp-${message.sendTime || message.createTime}-${index}`;
+          const messageId = getMessageRenderId(message, index);
 
           const messageData = messageDataMap.get(messageId);
           if (!messageData) {
             return null;
           }
 
-          const { dayStart, createdAt } = messageData;
+          const { dayStart, timeBreak, createdAt, groupPosition } = messageData;
+
+          const showSenderGutter = isGroupConversation && !isOutgoing;
+          const showName =
+            showSenderGutter &&
+            (groupPosition === 'first' || groupPosition === 'solo');
+          const showAvatar =
+            showSenderGutter &&
+            (groupPosition === 'last' || groupPosition === 'solo');
 
           let flowInputButtonsNodes: GroupChild<'input-buttons'>[] = [];
           if (
@@ -188,17 +217,20 @@ export const ChatListLegend = memo(
 
           return (
             <>
-              {dayStart && <LegendChatDay createdAt={createdAt} />}
+              {(dayStart || timeBreak) && (
+                <LegendChatDay createdAt={createdAt} timeOnly={!dayStart} />
+              )}
               <KContainer.View
                 ref={(node: View | null) => {
                   if (node) rowRefsMap.current.set(messageId, node);
                   else rowRefsMap.current.delete(messageId);
                 }}
-                style={
+                style={[
                   isOutgoing
                     ? messageStyles.messageRowRight
-                    : messageStyles.messageRowLeft
-                }
+                    : messageStyles.messageRowLeft,
+                  { marginBottom: getRowMarginBottom(groupPosition) },
+                ]}
                 collapsable={false}
               >
                 <LegendChatMessage
@@ -215,6 +247,10 @@ export const ChatListLegend = memo(
                   }
                   customMessageItemFactory={customMessageItemFactory}
                   isHighlighted={highlightedId === messageId}
+                  showName={showName}
+                  showAvatar={showAvatar}
+                  showSenderGutter={showSenderGutter}
+                  groupPosition={groupPosition}
                 />
               </KContainer.View>
               {flowInputButtonsNodes && flowInputButtonsNodes.length > 0 && (
@@ -242,6 +278,7 @@ export const ChatListLegend = memo(
         currentUserId,
         lastMessageId,
         messageDataMap,
+        isGroupConversation,
         isBotConversation,
         onMediaPress,
         onPressUrl,
@@ -303,12 +340,22 @@ export const ChatListLegend = memo(
     const getFixedItemSize = useCallback(
       (item: MessageItem, index: number): number | undefined => {
         const message = item;
-        const messageId =
-          message.clientMsgID ||
-          message.serverMsgID ||
-          `temp-${message.sendTime || message.createTime}-${index}`;
+        const messageId = getMessageRenderId(message, index);
 
-        if (messageDataMap.get(messageId)?.dayStart) return undefined;
+        const messageData = messageDataMap.get(messageId);
+        // Both separators add chrome above the row that this function does not
+        // account for, and a resolved size is never re-measured.
+        if (messageData?.dayStart || messageData?.timeBreak) return undefined;
+
+        // Incoming rows in a group chat carry an avatar column and a sender
+        // name whose height this function cannot predict — measure them.
+        if (isGroupConversation && message.sendID !== currentUserId) {
+          return undefined;
+        }
+
+        const rowMargin = getRowMarginBottom(
+          messageData?.groupPosition ?? 'solo'
+        );
 
         // Resolve the content-type candidate FIRST — for every type other
         // than these three the result is `undefined` regardless of anything
@@ -319,17 +366,16 @@ export const ChatListLegend = memo(
         switch (message.contentType) {
           case MessageType.PictureMessage:
             candidateSize =
-              resolveImageDisplayDims(message, windowWidth).height +
-              ROW_MARGIN_BOTTOM;
+              resolveImageDisplayDims(message, windowWidth).height + rowMargin;
             break;
           case MessageType.VideoMessage:
             candidateSize =
               ChatImageDimens.getDimensions(
                 CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail
-              ).height + ROW_MARGIN_BOTTOM;
+              ).height + rowMargin;
             break;
           case MessageType.StickerMessage:
-            candidateSize = STICKER_SIZE + ROW_MARGIN_BOTTOM;
+            candidateSize = STICKER_SIZE + rowMargin;
             break;
           default:
             return undefined;
@@ -361,6 +407,7 @@ export const ChatListLegend = memo(
         messageDataMap,
         customMessageItemFactory,
         currentUserId,
+        isGroupConversation,
         lastMessageId,
         isBotConversation,
         conversationFlow?.flowCurrentStep,
@@ -368,6 +415,28 @@ export const ChatListLegend = memo(
       ]
     );
 
+    // LegendList memoises each rendered item on [itemKey, item, extraData], so
+    // an item whose own object is unchanged will not re-render. Cluster
+    // position depends on a message's NEIGHBOURS, which can change while the
+    // message itself does not — prepending older history is enough to turn a
+    // 'first' into a 'middle'. messageDataMap is memoised on exactly the inputs
+    // that can move those boundaries, so including it here is what keeps a
+    // stale tail from being left behind.
+    const listExtraData = useMemo(
+      () => ({
+        messageDataMap,
+        flowStepId: conversationFlow?.flowCurrentStep?.id ?? '',
+        lastMessageId,
+        highlightedId,
+      }),
+      [
+        messageDataMap,
+        conversationFlow?.flowCurrentStep?.id,
+        lastMessageId,
+        highlightedId,
+      ]
+    );
+
     const handleStartReached = useCallback(() => {
       if (__DEV__) {
         console.log('[LegendList] onStartReached triggered', {
@@ -525,7 +594,7 @@ export const ChatListLegend = memo(
           getFixedItemSize={getFixedItemSize}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
           recycleItems={false}
-          extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}-${highlightedId ?? ''}`}
+          extraData={listExtraData}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           freeze={freeze}

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

@@ -46,25 +46,35 @@ const formatDayLabel = (createdAt: number): string | null => {
 
 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 const LegendChatDay = memo(({ createdAt }: LegendChatDayProps) => {
-  const dateStr = useMemo(
-    () => (createdAt == null ? null : formatDayLabel(createdAt)),
-    [createdAt]
-  );
+export const LegendChatDay = memo(
+  ({ createdAt, timeOnly = false }: LegendChatDayProps) => {
+    const dateStr = useMemo(() => {
+      if (createdAt == null) return null;
+      if (!timeOnly) return formatDayLabel(createdAt);
 
-  if (!dateStr) return null;
+      const date = new Date(createdAt);
+      return Number.isNaN(date.getTime()) ? null : formatTime(date);
+    }, [createdAt, timeOnly]);
 
-  return (
-    <KContainer.View center marginV="0.5rem">
-      <KContainer.View>
-        <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
-          {dateStr}
-        </KLabel.Text>
+    if (!dateStr) return null;
+
+    return (
+      <KContainer.View center marginV="0.5rem">
+        <KContainer.View>
+          <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+            {dateStr}
+          </KLabel.Text>
+        </KContainer.View>
       </KContainer.View>
-    </KContainer.View>
-  );
-});
+    );
+  }
+);
 
 LegendChatDay.displayName = 'LegendChatDay';

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

@@ -1,4 +1,10 @@
-import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KColors,
+  KLabel,
+  KSpacingValue,
+} from '@droppii/libs';
 import { StyleSheet } from 'react-native';
 import { memo, useCallback, useMemo } from 'react';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
@@ -20,7 +26,10 @@ import type { BaseLegendMessageProps } from '../../../components/messages/types'
 import { messageStyles } from './messageTypes';
 import QuotedMessage from '../../../components/messages/quotedMessage';
 import { StickerMessage } from '../../../components/messages/stickerMessage';
-import { GROUP_NOTIFICATION_TEXT } from '../../../utils/messageUtils';
+import { GROUP_NOTIFICATION_TYPES } from '../../../utils/messageUtils';
+import type { GroupPosition } from '../../../utils/legendListMessage';
+import { Avatar } from '../../../components/Avatar';
+import { TAIL_WIDTH } from '../../../components/messages/BubbleTail';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -38,18 +47,20 @@ 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;
 }
 
-// Notification-style messages (group created/renamed/member changes/etc.)
-// are system banners, not user-authored text — they render centered,
-// full-width, without a bubble, avatar/status chrome, or left/right
-// alignment (see SYSTEM_MESSAGE_TYPES below). Driven by the same lookup
-// messageUtils uses to build their preview/thread text, so adding a new
-// notification content type there is enough to cover both places.
-const GROUP_NOTIFICATION_TYPES = Object.keys(GROUP_NOTIFICATION_TEXT).map(
-  Number
-) as MessageType[];
-
 const messageComponentMap: Partial<
   Record<MessageType, ComponentType<MessageProps>>
 > = {
@@ -88,6 +99,10 @@ export const LegendChatMessage = memo(
     onLongPress,
     customMessageItemFactory,
     isHighlighted,
+    showName = false,
+    showAvatar = false,
+    showSenderGutter = false,
+    groupPosition,
   }: LegendChatMessageProps) => {
     const handlePress = useCallback(() => {
       onPress?.(message);
@@ -127,12 +142,34 @@ export const LegendChatMessage = memo(
 
     return (
       <KContainer.View style={messageStyles.wrapper} row alignItems>
+        {showSenderGutter && (
+          <KContainer.View style={styles.avatarGutter}>
+            {showAvatar && (
+              <Avatar
+                size="sm"
+                source={message.senderFaceUrl}
+                fullName={message.senderNickname}
+              />
+            )}
+          </KContainer.View>
+        )}
         <MessageStatusIndicator
           message={message}
           isOutgoing={isOutgoing}
           onRetry={onRetry}
         />
         <KContainer.View style={styles.content}>
+          {showName && !!message.senderNickname && (
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.gray.normal}
+              numberOfLines={1}
+              marginB={2}
+              style={styles.senderName}
+            >
+              {message.senderNickname}
+            </KLabel.Text>
+          )}
           <LongPressWrapper onPress={handlePress} onLongPress={handleLongPress}>
             <MessageComponent
               message={message}
@@ -141,6 +178,7 @@ export const LegendChatMessage = memo(
               onMediaPress={hasMediaPress ? onMediaPress : undefined}
               onPressUrl={hasUrlPress ? onPressUrl : undefined}
               isHighlighted={isHighlighted}
+              groupPosition={groupPosition}
             />
           </LongPressWrapper>
 
@@ -161,10 +199,22 @@ export const LegendChatMessage = memo(
 
 LegendChatMessage.displayName = 'LegendChatMessage';
 
+const AVATAR_SIZE = 24;
+
 const styles = StyleSheet.create({
   content: {
     position: 'relative',
   },
+  // Bubbles sit behind a TAIL_WIDTH gutter (see BubbleTailRow); the name has to
+  // clear the same gutter or it hangs to the left of the bubble it labels.
+  senderName: {
+    marginLeft: TAIL_WIDTH,
+  },
+  avatarGutter: {
+    width: AVATAR_SIZE,
+    marginRight: KSpacingValue['0.25rem'],
+    alignSelf: 'flex-end',
+  },
   systemMessageWrapper: {
     width: '100%',
     marginVertical: KSpacingValue['0.25rem'],

package/src/utils/legendListMessage.ts

@@ -1,4 +1,6 @@
 import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import { GROUP_NOTIFICATION_TYPES } from './messageUtils';
+import { getMessageRenderId, getMessageTime } from './message';
 
 /**
  * Extract message text based on content type
@@ -39,41 +41,148 @@ export 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;
+}
+
+/** Two messages further apart than this never share a cluster. */
+const GROUP_TIME_GAP = 300_000; // 5 minutes
+
+/** Virtual sender for bot conversations — see getGroupKey. */
+const BOT_GROUP_KEY = '__bot__';
+
+const startOfDay = (timestamp: number): number => {
+  const date = new Date(timestamp);
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+};
+
+/**
+ * System banners (group created/renamed/member changes) and anything without a
+ * sender are not user-authored, so they never join a cluster and always break
+ * the runs on both sides of them.
+ */
+const isSystemMessage = (message: MessageItem): boolean =>
+  GROUP_NOTIFICATION_TYPES.includes(message.contentType) || !message.sendID;
+
+/**
+ * Identity two messages must share to cluster together. In a bot conversation
+ * every incoming message is treated as one virtual sender: replies come from
+ * the bot and from human agents under different sendIDs, but read as a single
+ * continuous voice.
+ */
+const getGroupKey = (
+  message: MessageItem,
+  isBotConversation: boolean,
+  currentUserId?: string
+): string => {
+  const isOutgoing = message.sendID === currentUserId;
+  if (isBotConversation && !isOutgoing) return BOT_GROUP_KEY;
+  return message.sendID;
+};
+
+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 const precomputeLegendListData = (
-  messages: MessageItem[]
+  messages: MessageItem[],
+  { isBotConversation = false, currentUserId }: PrecomputeOptions = {}
 ): Map<string, PrecomputedMessageData> => {
   const dataMap = new Map<string, PrecomputedMessageData>();
+
+  // Pass 1 — identity, timestamp, day divider.
+  const dayStarts: boolean[] = [];
+  const ids: string[] = [];
+  // Resolved timestamps, reused by pass 2. Shared with the list's sort key so
+  // cluster boundaries are computed over the same ordering that gets rendered.
+  const timestamps: number[] = [];
   let lastDay: number | null = null;
 
   messages.forEach((message, index) => {
-    // Get message ID - use timestamp as fallback for newly sent messages
-    const messageId =
-      message.clientMsgID ||
-      message.serverMsgID ||
-      `temp-${message.sendTime || message.createTime}-${index}`;
+    const messageId = getMessageRenderId(message, index);
+
+    // A message still in flight can reach us with no usable timestamp at all.
+    // Left as 0 it lands on the epoch, which reads as a different calendar day
+    // from its neighbours — that inserts a bogus divider AND splits the cluster,
+    // stranding a tail on the message before it. Anchor it to the previous
+    // message instead, which is where it belongs in both senses.
+    const rawCreatedAt = getMessageTime(message);
+    const createdAt =
+      rawCreatedAt > 0 ? rawCreatedAt : (timestamps[index - 1] ?? rawCreatedAt);
+    const day = startOfDay(createdAt);
 
-    const createdAt = message.sendTime || message.createTime;
-    const day = new Date(createdAt).getDate();
+    const prevTimestamp = timestamps[index - 1];
+
+    ids[index] = messageId;
+    timestamps[index] = createdAt;
+    dayStarts[index] = lastDay !== day;
+    lastDay = day;
 
     dataMap.set(messageId, {
       messageId,
-      dayStart: lastDay !== day,
+      dayStart: dayStarts[index]!,
+      timeBreak:
+        prevTimestamp !== undefined &&
+        createdAt - prevTimestamp > GROUP_TIME_GAP,
       createdAt,
+      groupPosition: 'solo',
     });
+  });
 
-    lastDay = day;
+  // Pass 2 — cluster position, now that every day divider is known.
+  messages.forEach((message, index) => {
+    const entry = dataMap.get(ids[index]!);
+    if (!entry) return;
+    if (isSystemMessage(message)) return; // stays 'solo'
+
+    const key = getGroupKey(message, isBotConversation, currentUserId);
+    const prev = messages[index - 1];
+    const next = messages[index + 1];
+
+    const joinsPrev =
+      !!prev &&
+      !isSystemMessage(prev) &&
+      getGroupKey(prev, isBotConversation, currentUserId) === key &&
+      timestamps[index]! - timestamps[index - 1]! <= GROUP_TIME_GAP &&
+      // A divider above THIS message separates it from the one before it.
+      !dayStarts[index];
+
+    const joinsNext =
+      !!next &&
+      !isSystemMessage(next) &&
+      getGroupKey(next, isBotConversation, currentUserId) === key &&
+      timestamps[index + 1]! - timestamps[index]! <= GROUP_TIME_GAP &&
+      !dayStarts[index + 1];
+
+    entry.groupPosition = joinsPrev
+      ? joinsNext
+        ? 'middle'
+        : 'last'
+      : joinsNext
+        ? 'first'
+        : 'solo';
   });
 
   return dataMap;
@@ -90,7 +199,7 @@ export const computeDayStarts = (
   let lastDay: number | null = null;
 
   messages.forEach((message) => {
-    const day = new Date(message.sendTime || message.createTime).getDate();
+    const day = startOfDay(getMessageTime(message));
     const messageId = message.clientMsgID || message.serverMsgID || '';
     dayStartMap.set(messageId, lastDay !== day);
     lastDay = day;