diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index d5451348b5..0216e0f3e7 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -68,7 +68,6 @@ function isWithinClusterBoundary({ direction: 'prev' | 'next' }): boolean { if (!isFromSameSender) return true - if (isPending && adjacentMessage) return false if (ChatBskyConvoDefs.isMessageView(adjacentMessage)) { const thisDate = new Date(currentSentAt) const adjDate = new Date(adjacentMessage.sentAt) @@ -76,7 +75,10 @@ function isWithinClusterBoundary({ direction === 'next' ? adjDate.getTime() - thisDate.getTime() : thisDate.getTime() - adjDate.getTime() - return diff > CLUSTERED_MESSAGE_THRESHOLD_MS + const isOutsideThreshold = diff > CLUSTERED_MESSAGE_THRESHOLD_MS + // For pending messages, still check the time threshold + if (isPending) return isOutsideThreshold + return isOutsideThreshold } return true } @@ -386,7 +388,11 @@ let MessageItem = ({ return ( <> {hasLargeGapFromPrev && } - + {showAvatar ? ( )} {rt.text.length > 0 && ( @@ -450,10 +456,7 @@ let MessageItem = ({ a.py_sm, a.px_md, { - marginTop: - hasEmbedAndText || !isFirstInCluster - ? CLUSTERED_MESSAGE_GAP - : 0, + marginTop: hasEmbedAndText ? CLUSTERED_MESSAGE_GAP : 0, backgroundColor: isFromSelf ? isPending ? pendingColor diff --git a/src/components/dms/MessageItemEmbed.tsx b/src/components/dms/MessageItemEmbed.tsx index 24918ef3af..7f7abf16c0 100644 --- a/src/components/dms/MessageItemEmbed.tsx +++ b/src/components/dms/MessageItemEmbed.tsx @@ -6,22 +6,21 @@ import {atoms as a, native, useTheme, web} from '#/alf' import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' import {MessageContextProvider} from './MessageContext' -const CLUSTERED_MESSAGE_GAP = 2 const BORDER_RADIUS = 20 const SQUARED_BORDER_RADIUS = 4 let MessageItemEmbed = ({ embed, isFromSelf, + isGroupChat, squaredTopCorner, squaredBottomCorner, - isFirstInCluster, }: { embed: $Typed isFromSelf: boolean + isGroupChat: boolean squaredTopCorner: boolean squaredBottomCorner: boolean - isFirstInCluster: boolean }): React.ReactNode => { const t = useTheme() const screen = useWindowDimensions() @@ -30,18 +29,19 @@ let MessageItemEmbed = ({