@planningcenter/chat-react-native 4.0.1-qa-staging.0 → 4.0.1-qa-staging.2

package/src/components/conversation/reply_shadow_message.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { some } from 'lodash'
-import React from 'react'
+import React, { memo } from 'react'
 import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import {
@@ -37,18 +37,20 @@ interface ReplyShadowMessageProps extends MessageResource {
   nextRendersAuthor: boolean
 }
 
-export function ReplyShadowMessage({
+export const ReplyShadowMessage = memo(function ReplyShadowMessageRow({
   conversation_id,
   inReplyScreen,
   messageId,
+  replyRoot,
   isReplyShadowMessage,
   nextRendersAuthor,
 }: ReplyShadowMessageProps) {
-  const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })
+  const fetched = useConversationMessage({ conversation_id, messageId, enabled: !replyRoot })
+  const message = replyRoot ?? fetched.message
 
   if (inReplyScreen) return null
-  if (isLoading) return <ShadowMessageFallback text="Loading..." />
-  if (isError || !message) return <ShadowMessageFallback text="Message deleted" />
+  if (!message && fetched.isLoading) return <ShadowMessageFallback text="Loading..." />
+  if (!message) return <ShadowMessageFallback text="Message deleted" />
 
   const enrichedMessage = {
     ...message,
@@ -57,7 +59,7 @@ export function ReplyShadowMessage({
   }
 
   return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />
-}
+})
 
 interface ShadowMessageContentProps extends MessageResource {
   conversation_id: number
@@ -82,7 +84,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
       conversation_id,
-      reply_root_id: message.replyRootId,
+      reply_root_id: message.replyRootId ?? message.id,
       reply_root_author_name: message.author.name,
     })
   }

package/src/components/primitive/form_sheet.tsx

@@ -85,6 +85,7 @@ interface FormSheetRootProps {
   style?: StyleProp<ViewStyle>
   contentStyle?: StyleProp<ViewStyle>
   showAndroidSheetGrabber?: boolean
+  fitToContents?: boolean
 }
 
 export function FormSheetRoot({
@@ -92,8 +93,9 @@ export function FormSheetRoot({
   style,
   contentStyle,
   showAndroidSheetGrabber = true,
+  fitToContents = false,
 }: FormSheetRootProps) {
-  const styles = useStyles()
+  const styles = useStyles({ fitToContents })
 
   return (
     <View style={[styles.container, style]} collapsable={false}>
@@ -298,16 +300,21 @@ FormSheetAction.displayName = 'FormSheet.Action'
 interface Styles {
   appearance?: FormSheetActionAppearanceUnion
   disabled?: boolean
+  fitToContents?: boolean
 }
 
-const useStyles = ({ appearance = 'neutral', disabled = false }: Styles = {}) => {
+const useStyles = ({
+  appearance = 'neutral',
+  disabled = false,
+  fitToContents = false,
+}: Styles = {}) => {
   const { colors } = useTheme()
   const { height } = useWindowDimensions()
   const { bottom, top } = useSafeAreaInsets()
   const headerHeight = useHeaderHeight()
 
   const containerHeight = Platform.select({
-    ios: height - top - headerHeight,
+    ios: fitToContents ? undefined : height - top - headerHeight,
     default: null,
   })
 

package/src/hooks/__tests__/use_message_create_or_update.test.tsx

@@ -0,0 +1,110 @@
+import { InfiniteData, QueryClientProvider, notifyManager } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { chatQueryClient } from '../../contexts/api_provider'
+import type { ApiCollection, MessageResource } from '../../types'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
+import { useMessageCreateOrUpdate } from '../use_message_create_or_update'
+
+jest.mock('../../contexts/api_provider', () => {
+  const { QueryClient } = require('@tanstack/react-query')
+  // gcTime 0 so nothing outlives the test and keeps jest from exiting
+  return {
+    chatQueryClient: new QueryClient({
+      defaultOptions: { queries: { gcTime: 0 }, mutations: { gcTime: 0 } },
+    }),
+  }
+})
+
+const mockPost = jest.fn()
+jest.mock('../use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
+}))
+
+jest.mock('../use_current_person', () => ({
+  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
+}))
+
+// Flush TanStack's batched state updates inside act, as its own tests do
+notifyManager.setNotifyFunction(fn => act(fn))
+
+type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const conversationId = 7
+const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={chatQueryClient}>{children}</QueryClientProvider>
+)
+
+const pendingMessagesInCache = () =>
+  (chatQueryClient.getQueryData<MessagesQueryData>(queryKey)?.pages[0].data ?? []).filter(
+    m => m.pending
+  )
+
+const sentKey = (call: number): string =>
+  mockPost.mock.calls[call][0].data.data.attributes.idempotent_key
+
+// What the cache held when each request went out, i.e. after onMutate ran
+let pendingAtSend: MessageResource[][]
+
+describe('useMessageCreateOrUpdate idempotent key', () => {
+  beforeEach(() => {
+    chatQueryClient.clear()
+    chatQueryClient.setQueryData<MessagesQueryData>(queryKey, {
+      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0 } }],
+      pageParams: [],
+    })
+    pendingAtSend = []
+    mockPost.mockReset()
+    mockPost.mockImplementation(async request => {
+      pendingAtSend.push(pendingMessagesInCache())
+      const key = request.data.data.attributes.idempotent_key
+      return { data: { type: 'Message', id: `real-${key}`, idempotentKey: key, mine: true } }
+    })
+  })
+
+  it('gives the optimistic message the same key that is sent to the server', async () => {
+    const { result } = renderHook(() => useMessageCreateOrUpdate({ conversationId }), { wrapper })
+
+    await act(() => result.current.mutateAsync({ text: 'ok' }))
+
+    expect(sentKey(0)).toEqual(expect.any(String))
+    expect(pendingAtSend[0].map(m => m.idempotentKey)).toEqual([sentKey(0)])
+  })
+
+  it('mints a distinct key for each send, even with identical text', async () => {
+    const { result } = renderHook(() => useMessageCreateOrUpdate({ conversationId }), { wrapper })
+
+    await act(() =>
+      Promise.all([
+        result.current.mutateAsync({ text: 'ok' }),
+        result.current.mutateAsync({ text: 'ok' }),
+      ])
+    )
+
+    expect(sentKey(0)).not.toBe(sentKey(1))
+    expect(pendingAtSend[1].map(m => m.idempotentKey).sort()).toEqual(
+      [sentKey(0), sentKey(1)].sort()
+    )
+  })
+
+  it('reuses the original key when retrying a failed send', async () => {
+    const failed = {
+      type: 'Message',
+      id: '01FAILED-temp',
+      text: 'ok',
+      idempotentKey: 'original-key',
+      error: 'Failed to send message',
+    } as MessageResource
+    const { result } = renderHook(
+      () => useMessageCreateOrUpdate({ conversationId, message: failed }),
+      { wrapper }
+    )
+
+    await act(() => result.current.mutateAsync({ text: 'ok' }))
+
+    expect(sentKey(0)).toBe('original-key')
+    expect(pendingAtSend[0].map(m => m.idempotentKey)).toEqual(['original-key'])
+  })
+})

package/src/hooks/use_conversation_messages.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { MessageResource } from '../types'
+import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -10,7 +11,10 @@ export const useConversationMessages = (
   const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      opts
+      {
+        structuralSharing: replaceEqualById,
+        ...opts,
+      }
     )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -11,6 +11,7 @@ import {
   updateCacheWithMessage,
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
+  updateCacheReplyRoots,
   getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
@@ -44,6 +45,7 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       data,
       currentPersonId: currentPerson.id,
     })
+    const isReplyRootUpdate = e.event === 'message.updated' && data.reply_root_id === data.sort_key
 
     if (e.event === 'message.created' && data.author_id) {
       removeAllTypingEventsByAuthorId(data.author_id)
@@ -62,6 +64,11 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
         data.reply_root_id
       )
       updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+
+      if (isReplyRootUpdate) {
+        updateCacheReplyRoots(queryClient, messagesQueryKey, message)
+        updateCacheReplyRoots(queryClient, threadedMessagesQueryKey, message)
+      }
     }
 
     // Update individual message query cache so reply shadow messages update immediately

package/src/hooks/use_message_create_or_update.ts

@@ -22,6 +22,14 @@ interface Props {
   replyRootId?: string | null
 }
 
+interface MessageMutationVariables {
+  text: string
+  attachments?: DenormalizedAttachmentResourceForCreate[]
+  idempotentKey?: string
+}
+
+type ResolvedMessageMutationVariables = MessageMutationVariables & { idempotentKey: string }
+
 export function useMessageCreateOrUpdate({ conversationId, message, replyRootId }: Props) {
   const messageId = message?.id || null
   const isEditing = !isNewMessage(message)
@@ -29,13 +37,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   const currentPerson = useCurrentPerson()
 
   const mutation = useMutation({
-    mutationFn: ({
-      text,
-      attachments,
-    }: {
-      text: string
-      attachments?: DenormalizedAttachmentResourceForCreate[]
-    }) => {
+    mutationFn: ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
       const requestParams = getMessagesRequestArgs({ conversation_id: conversationId })
       const fieldsWithValueJoined = Object.fromEntries(
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
@@ -46,7 +48,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         ...(!isEditing && replyRootId ? { reply_root: { id: replyRootId } } : {}),
       }
       if (!isEditing) {
-        const idempotentKey = insecureUUID()
         attributes.idempotent_key = idempotentKey
         startMessageCreationTracking(idempotentKey)
       }
@@ -71,13 +72,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         })
       }
     },
-    onMutate: async ({
-      text,
-      attachments,
-    }: {
-      text: string
-      attachments?: DenormalizedAttachmentResourceForCreate[]
-    }) => {
+    onMutate: async ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
       if (message && isEditing) {
         const optimisticMessage = optimisticallyUpdateMessage({
           conversationId,
@@ -96,6 +91,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         attachments,
         currentPerson,
         replyRootId,
+        idempotentKey,
       })
 
       return { message: optimisticMessage }
@@ -155,7 +151,24 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
     },
   })
 
-  return mutation
+  const resolveVariables = (
+    variables: MessageMutationVariables
+  ): ResolvedMessageMutationVariables => ({
+    ...variables,
+    idempotentKey: variables.idempotentKey ?? message?.idempotentKey ?? insecureUUID(),
+  })
+
+  const mutate = (
+    variables: MessageMutationVariables,
+    options?: Parameters<typeof mutation.mutate>[1]
+  ) => mutation.mutate(resolveVariables(variables), options)
+
+  const mutateAsync = (
+    variables: MessageMutationVariables,
+    options?: Parameters<typeof mutation.mutateAsync>[1]
+  ) => mutation.mutateAsync(resolveVariables(variables), options)
+
+  return { ...mutation, mutate, mutateAsync }
 }
 
 /**

package/src/screens/conversation_screen.tsx

@@ -1,4 +1,3 @@
-import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   CommonActions,
@@ -11,24 +10,21 @@ import {
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Badge, Icon, Text } from '../components'
+import { Badge, Icon } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
-import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
-import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
-import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
 import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
-import { useTheme } from '../hooks'
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
@@ -45,10 +41,6 @@ import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
-import { getRelativeDateStatus } from '../utils/date'
-import { groupMessages, type DateSeparator } from '../utils/group_messages'
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
-import { isSystemMessage } from '../utils/system_messages'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -101,16 +93,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({
-    ms: messages,
-    inReplyScreen: !!reply_root_id,
-  })
-  const noMessages = messagesWithSeparators.length === 0
+  const noMessages = messages.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
-  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
   const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
@@ -181,54 +168,19 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             <ConversationStartBanner conversation={conversation} hasMessages={false} />
           </View>
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            data={messagesWithSeparators}
-            keyExtractor={item => item.id}
+          <MessageList
+            listRef={listRef}
+            conversation={conversation}
+            conversationId={conversation_id}
+            messages={messages}
+            replyRootId={reply_root_id}
+            hasNextPage={hasNextPage}
+            onEndReached={() => fetchNextPage()}
             onScroll={trackScroll}
             onLayout={onLayout}
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
-            scrollEventThrottle={10}
-            ListFooterComponent={
-              hasNextPage ? null : (
-                <ConversationStartBanner conversation={conversation} hasMessages={true} />
-              )
-            }
-            renderItem={({ item }) => {
-              if (item.type === 'DateSeparator') {
-                return <InlineDateSeparator {...item} />
-              }
-
-              if (item.type === 'ReplyShadowMessage') {
-                return (
-                  <ReplyShadowMessage
-                    {...(item as any)}
-                    conversation_id={conversation_id}
-                    inReplyScreen={!!reply_root_id}
-                  />
-                )
-              }
-
-              if (isSystemMessage(item)) {
-                return <SystemMessage message={item} conversationId={conversation_id} />
-              }
-
-              return (
-                <Message
-                  {...item}
-                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
-                  conversation_id={conversation_id}
-                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
-                  inReplyScreen={!!reply_root_id}
-                />
-              )
-            }}
-            onEndReached={() => fetchNextPage()}
-            ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
@@ -295,44 +247,6 @@ function ConversationBottomBar({
   )
 }
 
-function InlineDateSeparator({ date }: DateSeparator) {
-  const styles = useDateSeparatorStyles()
-  const { isThisYear } = getRelativeDateStatus(date)
-  const showYear = !isThisYear
-  const dateStamp = formatDate(date, { style: 'long', year: showYear })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.separator} />
-      <Text variant="footnote" style={styles.dateText}>
-        {dateStamp}
-      </Text>
-      <View style={styles.separator} />
-    </View>
-  )
-}
-
-const useDateSeparatorStyles = () => {
-  const theme = useTheme()
-  return StyleSheet.create({
-    container: {
-      alignItems: 'center',
-      flexDirection: 'row',
-      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
-      paddingVertical: 16,
-    },
-    separator: {
-      flex: 1,
-      height: 1,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.borderColorDefaultBase,
-    },
-    dateText: {
-      paddingHorizontal: 8,
-    },
-  })
-}
-
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
@@ -429,13 +343,6 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'center',
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
-    listHeader: {
-      // Just whitespace to provide space where the typing indicator can be
-      height: 16,
-    },
   })
 }
 

package/src/screens/conversation_select_type_screen.tsx

@@ -1,5 +1,5 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React, { useLayoutEffect } from 'react'
+import React from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCurrentPerson } from '../hooks/use_current_person'
 import { useConversationTypeAccess } from '../hooks/use_new_conversation_entry'
@@ -10,6 +10,7 @@ import { Haptic } from '../utils/native_adapters'
 
 export const ConversationSelectTypeScreenOptions = getFormSheetScreenOptions({
   headerTitle: 'New conversation',
+  sheetAllowedDetents: 'fitToContents',
 })
 
 export type ConversationSelectTypeScreenProps = StaticScreenProps<{
@@ -34,13 +35,6 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
   const filterParams = { chat_group_graph_id, group_source_app_name }
   const showDirectMessageOption = directMessagesEligible
 
-  // sheetAllowedDetents depends on DM eligibility, which isn't known until render, so it's set
-  // here instead of in the static ConversationSelectTypeScreenOptions. useLayoutEffect applies
-  // it before paint so the sheet never visibly resizes after opening.
-  useLayoutEffect(() => {
-    navigation.setOptions({ sheetAllowedDetents: showDirectMessageOption ? [0.3] : [0.25] })
-  }, [navigation, showDirectMessageOption])
-
   const handleFilterPress = () => {
     if (!newConversationFromFilter) return
 
@@ -82,7 +76,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
     navigateToNewConversationType('ConversationSelectDirectMessageRecipients')
 
   return (
-    <FormSheet.Root>
+    <FormSheet.Root fitToContents>
       <FormSheet.Header>
         <FormSheet.HeaderTitle>Start a conversation by</FormSheet.HeaderTitle>
       </FormSheet.Header>

package/src/types/resources/message.ts

@@ -17,6 +17,8 @@ export interface MessageResource {
   reactionCounts: ReactionCountResource[]
   replyCount: number
   replyRootId?: string | null
+  replyRoot?: MessageResource | null
+  idempotentKey?: string | null
   messageType: string
   personIdsForSystemEvent?: number[] | null
   systemTextParts?: { names: string[]; overflowCount: number; action: string } | null

package/src/utils/__tests__/group_messages.test.ts

@@ -124,6 +124,54 @@ describe('groupMessages — nextRendersAuthor mirrors the newer enriched neighbo
   })
 })
 
+describe('groupMessages — reply roots', () => {
+  const findShadow = (items: ReturnType<typeof groupMessages>, id: string) =>
+    items.find(item => 'type' in item && item.type === 'ReplyShadowMessage' && item.id === id)
+
+  it('carries the root from the page onto the reply and its shadow', () => {
+    const messages = [
+      message('03', { replyRootId: 'rootA' }),
+      message('02'),
+      message('rootA', { replyRootId: 'rootA', text: 'fresh' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect((findEnriched(enriched, '03') as MessageResource).replyRoot?.text).toBe('fresh')
+    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { id: 'rootA' } })
+  })
+
+  it('prefers the page copy of the root over the reply’s included snapshot', () => {
+    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'stale' })
+    const messages = [
+      message('03', { replyRootId: 'rootA', replyRoot: snapshot }),
+      message('02'),
+      message('rootA', { replyRootId: 'rootA', text: 'fresh' }),
+    ]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { text: 'fresh' } })
+  })
+
+  it('falls back to the included snapshot when the root is not on the page', () => {
+    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'included' })
+    const messages = [message('02', { replyRootId: 'rootA', replyRoot: snapshot })]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: { text: 'included' } })
+  })
+
+  it('leaves replyRoot null when the root is neither on the page nor included', () => {
+    const messages = [message('02', { replyRootId: 'rootA' })]
+
+    const enriched = groupMessages({ ms: messages })
+
+    expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: null })
+  })
+})
+
 describe('groupMessages — system messages', () => {
   it('flags lastInGroup true and renderAuthor false on system messages', () => {
     const messages = [