@planningcenter/chat-react-native 3.45.1-qa-staging.5 → 3.45.1-qa-staging.7

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/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 = [

package/src/utils/cache/__tests__/messages_cache.test.ts

@@ -0,0 +1,89 @@
+import { InfiniteData, QueryClient } from '@tanstack/react-query'
+import type { ApiCollection, MessageResource } from '../../../types'
+import type { PersonResource } from '../../../types/resources/person'
+import { updateCacheWithMessage } from '../messages_cache'
+
+type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const queryKey = ['messages']
+const author = { type: 'Person', id: 1, name: 'Me', avatar: null } as unknown as PersonResource
+
+const message = (overrides: Partial<MessageResource>): MessageResource =>
+  ({
+    type: 'Message',
+    text: 'ok',
+    html: '',
+    createdAt: '2026-01-01T00:00:00Z',
+    deletedAt: null,
+    textEditedAt: null,
+    mine: true,
+    attachments: [],
+    author,
+    reactionCounts: [],
+    replyCount: 0,
+    replyRootId: null,
+    messageType: 'user',
+    ...overrides,
+  }) as MessageResource
+
+const seed = (queryClient: QueryClient, ...messages: MessageResource[]) =>
+  queryClient.setQueryData<MessagesQueryData>(queryKey, {
+    pages: [
+      { data: messages, links: {}, meta: { count: messages.length, totalCount: messages.length } },
+    ],
+    pageParams: [],
+  })
+
+const idsInCache = (queryClient: QueryClient) =>
+  queryClient.getQueryData<MessagesQueryData>(queryKey)!.pages[0].data.map(m => m.id)
+
+const echo = (queryClient: QueryClient, overrides: Partial<MessageResource>) =>
+  updateCacheWithMessage(queryClient, queryKey, message(overrides), 'message.created')
+
+describe('updateCacheWithMessage on message.created', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = new QueryClient()
+    seed(
+      queryClient,
+      message({ id: '01B-temp', idempotentKey: 'key-b', pending: true }),
+      message({ id: '01A-temp', idempotentKey: 'key-a', pending: true })
+    )
+  })
+
+  it('swaps out only the pending message with the same idempotent key', () => {
+    echo(queryClient, { id: '01A', idempotentKey: 'key-a' })
+
+    expect(idsInCache(queryClient)).toEqual(['01A', '01B-temp'])
+  })
+
+  it('does not swap out a pending message that only shares the same text', () => {
+    echo(queryClient, { id: '01C', idempotentKey: 'key-c', text: 'ok' })
+
+    expect(idsInCache(queryClient)).toEqual(['01C', '01B-temp', '01A-temp'])
+  })
+
+  it('swaps out an attachment-only pending message, which has no text to match', () => {
+    seed(
+      queryClient,
+      message({ id: '01D-temp', idempotentKey: 'key-d', text: null, pending: true })
+    )
+
+    echo(queryClient, { id: '01D', idempotentKey: 'key-d', text: null })
+
+    expect(idsInCache(queryClient)).toEqual(['01D'])
+  })
+
+  it('leaves pending messages alone when the echo carries no key', () => {
+    echo(queryClient, { id: '01E', idempotentKey: null })
+
+    expect(idsInCache(queryClient)).toEqual(['01E', '01B-temp', '01A-temp'])
+  })
+
+  it("leaves pending messages alone when the echo is someone else's", () => {
+    echo(queryClient, { id: '01F', idempotentKey: 'key-a', mine: false })
+
+    expect(idsInCache(queryClient)).toEqual(['01F', '01B-temp', '01A-temp'])
+  })
+})

package/src/utils/cache/__tests__/messages_cache_reply_roots.test.ts

@@ -0,0 +1,71 @@
+import { InfiniteData, QueryClient } from '@tanstack/react-query'
+import type { ApiCollection } from '../../../types'
+import type { MessageResource } from '../../../types/resources/message'
+import type { PersonResource } from '../../../types/resources/person'
+import { updateCacheReplyRoots } from '../messages_cache'
+
+const author = { id: 1, type: 'Person', name: 'A', avatar: null } as unknown as PersonResource
+
+const message = (id: string, overrides: Partial<MessageResource> = {}): MessageResource =>
+  ({
+    type: 'Message',
+    id,
+    text: `msg ${id}`,
+    html: '',
+    createdAt: '2026-01-01T00:00:00Z',
+    deletedAt: null,
+    textEditedAt: null,
+    mine: false,
+    attachments: [],
+    author,
+    reactionCounts: [],
+    replyCount: 0,
+    replyRootId: null,
+    messageType: 'message',
+    ...overrides,
+  }) as MessageResource
+
+const queryKey = ['messages']
+
+const seedPages = (queryClient: QueryClient, messages: MessageResource[]) => {
+  queryClient.setQueryData<InfiniteData<ApiCollection<MessageResource>>>(queryKey, {
+    pageParams: [{}],
+    pages: [{ data: messages, links: {}, meta: { count: messages.length, totalCount: 1 } }],
+  })
+}
+
+const pageMessages = (queryClient: QueryClient) =>
+  queryClient.getQueryData<InfiniteData<ApiCollection<MessageResource>>>(queryKey)!.pages[0].data
+
+describe('updateCacheReplyRoots', () => {
+  it('merges a root update into every reply carrying that root', () => {
+    const queryClient = new QueryClient()
+    const root = message('rootA', { replyRootId: 'rootA', text: 'before' })
+    seedPages(queryClient, [
+      message('03', { replyRootId: 'rootA', replyRoot: root }),
+      message('02', { replyRootId: 'rootB', replyRoot: message('rootB', { text: 'other' }) }),
+      message('01', { replyRootId: 'rootA', replyRoot: root }),
+    ])
+
+    updateCacheReplyRoots(
+      queryClient,
+      queryKey,
+      message('rootA', { replyRootId: 'rootA', text: 'after', deletedAt: '2026-01-02T00:00:00Z' })
+    )
+
+    const [newest, other, oldest] = pageMessages(queryClient)
+    expect(newest.replyRoot).toMatchObject({ text: 'after', deletedAt: '2026-01-02T00:00:00Z' })
+    expect(oldest.replyRoot).toMatchObject({ text: 'after' })
+    expect(other.replyRoot?.text).toBe('other')
+  })
+
+  it('leaves the cache untouched when no reply carries the root', () => {
+    const queryClient = new QueryClient()
+    seedPages(queryClient, [message('01', { replyRootId: 'rootB' })])
+    const before = pageMessages(queryClient)
+
+    updateCacheReplyRoots(queryClient, queryKey, message('rootA', { replyRootId: 'rootA' }))
+
+    expect(pageMessages(queryClient)).toBe(before)
+  })
+})

package/src/utils/cache/messages_cache.ts

@@ -4,7 +4,11 @@ import { ApiCollection, ApiResource, MessageResource } from '../../types'
 import { JoltReactionEvent } from '../../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../request/get_messages'
-import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'
+import {
+  updateAllRecordsInPagesData,
+  updateOrCreateRecordInPagesData,
+  updateRecordInPagesData,
+} from './page_mutations'
 import { deleteRecordInPagesData } from './page_mutations'
 
 export function updateCacheWithMessage(
@@ -15,20 +19,16 @@ export function updateCacheWithMessage(
 ) {
   queryClient.setQueryData<MessagesQueryData>(queryKey, prev => {
     if (event === 'message.created') {
-      // Before adding the new message, remove any pending temporary messages
-      // with matching text to prevent duplicates from race conditions
+      // Before adding the new message, remove its pending temporary counterpart.
+      // The Jolt echo can arrive before the HTTP response has swapped it out.
       let dataAfterTempRemoval = prev
-      if (prev && message.text && message.mine) {
+      if (prev && message.mine && message.idempotentKey) {
         dataAfterTempRemoval = deleteRecordInPagesData({
           data: prev,
           record: message,
-          matchFn: (existingMessage, _record) => {
-            return (
-              isTemporaryMessageId(existingMessage.id) &&
-              existingMessage.text === message.text &&
-              existingMessage.mine
-            )
-          },
+          matchFn: existingMessage =>
+            isTemporaryMessageId(existingMessage.id) &&
+            existingMessage.idempotentKey === message.idempotentKey,
         })
       }
 
@@ -70,6 +70,22 @@ export function updateCacheWithIndividualMessage(
   })
 }
 
+export function updateCacheReplyRoots(
+  queryClient: QueryClient,
+  queryKey: unknown[],
+  root: MessageResource
+) {
+  queryClient.setQueryData<MessagesQueryData>(queryKey, prev =>
+    updateAllRecordsInPagesData({
+      data: prev,
+      processRecord: message =>
+        message.replyRoot?.id === root.id
+          ? { ...message, replyRoot: mergeMessageUpdate(root, message.replyRoot) }
+          : message,
+    })
+  )
+}
+
 export function updateCacheWithReaction(
   queryClient: QueryClient,
   queryKey: unknown[],

package/src/utils/cache/optimistically_create_message.ts

@@ -15,6 +15,7 @@ export function optimisticallyCreateMessage({
   currentPerson,
   message,
   replyRootId,
+  idempotentKey,
 }: {
   conversationId: number
   text: string
@@ -22,6 +23,7 @@ export function optimisticallyCreateMessage({
   currentPerson: CurrentPersonResource
   message?: MessageResource
   replyRootId?: string | null
+  idempotentKey?: string
 }) {
   const id = message?.id || generateTempMessageId()
 
@@ -53,6 +55,7 @@ export function optimisticallyCreateMessage({
     pending: true,
     replyCount: 0,
     replyRootId: replyRootId || null,
+    idempotentKey,
   }
 
   // Add the optimistic message to the cache

package/src/utils/client/__tests__/transform_response.test.ts

@@ -0,0 +1,62 @@
+import transformResponse from '../transform_response'
+
+const person = (id: string, name: string) => ({
+  type: 'Person',
+  id,
+  attributes: { name, avatar: null },
+})
+
+const message = (
+  id: string,
+  { authorId, replyRootId }: { authorId: string; replyRootId: string | null }
+) => ({
+  type: 'Message',
+  id,
+  attributes: { text: `msg ${id}` },
+  relationships: {
+    author: { data: { type: 'Person', id: authorId } },
+    reply_root: { data: replyRootId ? { type: 'Message', id: replyRootId } : null },
+    reaction_counts: { data: [] },
+  },
+})
+
+const root = message('01ROOT', { authorId: '2', replyRootId: '01ROOT' })
+const reply = message('01REPLY', { authorId: '1', replyRootId: '01ROOT' })
+
+describe('transformResponse — reply_root include', () => {
+  it('attaches the included root and its author to a reply', () => {
+    const result = transformResponse({
+      data: [reply],
+      included: [root, person('1', 'Replier'), person('2', 'Root Author')],
+    })
+
+    const [transformedReply] = result.data
+    expect(transformedReply.replyRootId).toBe('01ROOT')
+    expect(transformedReply.replyRoot.id).toBe('01ROOT')
+    expect(transformedReply.replyRoot.text).toBe('msg 01ROOT')
+    expect(transformedReply.replyRoot.author.name).toBe('Root Author')
+  })
+
+  it('drops a record’s self reference so the result stays acyclic', () => {
+    const result = transformResponse({
+      data: [reply, root],
+      included: [root, person('1', 'Replier'), person('2', 'Root Author')],
+    })
+
+    const [transformedReply, transformedRoot] = result.data
+    expect(transformedReply.replyRoot.replyRoot).toBeNull()
+    expect(transformedRoot.replyRootId).toBe('01ROOT')
+    expect(transformedRoot.replyRoot).toBeNull()
+    expect(() => JSON.stringify(result)).not.toThrow()
+  })
+
+  it('leaves replyRoot null when the root is not included', () => {
+    const result = transformResponse({
+      data: [reply],
+      included: [person('1', 'Replier')],
+    })
+
+    expect(result.data[0].replyRootId).toBe('01ROOT')
+    expect(result.data[0].replyRoot).toBeNull()
+  })
+})

package/src/utils/client/transform_response.ts

@@ -32,7 +32,8 @@ const transformRelationships = relationships => {
   }, {})
 }
 
-const addIncludedRecords = (relationships, included, seen, parent) => {
+const addIncludedRecords = (record, included, seen, parent) => {
+  const { relationships } = record
   return Object.keys(relationships || {}).reduce((acc, key) => {
     const relationship = relationships[key]
     if (_.isArray(relationship.data)) {
@@ -43,13 +44,14 @@ const addIncludedRecords = (relationships, included, seen, parent) => {
       return _.set(
         acc,
         _.pluralize(key),
-        _.map(records, record => transformRecord(record, included, seen))
+        _.map(records, related => transformRecord(related, included, seen))
       )
     } else {
       const [id, type] = _.at(relationship, ['data.id', 'data.type'])
       if (id && type) {
-        const record = _.find(included, { id, type })
-        return _.set(acc, key, record ? transformRecord(record, included, seen) : null)
+        const isSelfReference = id === record.id && type === record.type
+        const related = isSelfReference ? undefined : _.find(included, { id, type })
+        return _.set(acc, key, related ? transformRecord(related, included, seen) : null)
       } else {
         return acc
       }
@@ -78,7 +80,7 @@ const transformRecord = (record, included, seen) => {
 
     seen.set(record, transformed)
 
-    return addIncludedRecords(relationships, included, seen, transformed)
+    return addIncludedRecords(record, included, seen, transformed)
   }
 }
 

package/src/utils/group_messages.ts

@@ -10,6 +10,7 @@ export type ReplyShadowMessage = {
   type: 'ReplyShadowMessage'
   id: string
   messageId: string
+  replyRoot: MessageResource | null
   isReplyShadowMessage: boolean
   nextRendersAuthor: boolean
 }
@@ -23,6 +24,7 @@ interface GroupMessagesProps {
 
 export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): EnrichedMessage[] {
   const items: EnrichedMessage[] = []
+  const messagesById = new Map(ms.map(message => [message.id, message]))
   let myLatestSeen = false
   let nextNeighborEnriched: MessageResource | undefined
 
@@ -41,7 +43,13 @@ export function groupMessages({ ms, inReplyScreen }: GroupMessagesProps): Enrich
     const isMyLatest = !myLatestSeen && message.mine
     if (isMyLatest) myLatestSeen = true
 
-    const enriched = enrichRegularMessage(message, prev, next, isMyLatest, !!inReplyScreen)
+    const enriched = enrichRegularMessage(
+      { ...message, replyRoot: resolveReplyRoot(message, messagesById) },
+      prev,
+      next,
+      isMyLatest,
+      !!inReplyScreen
+    )
     items.push(enriched)
 
     const shadow = replyShadowFor(enriched, prev)
@@ -61,6 +69,14 @@ function neighborsOf<T>(arr: T[], i: number): { prev: T | undefined; next: T | u
   return { prev: arr[i + 1], next: arr[i - 1] }
 }
 
+function resolveReplyRoot(
+  message: MessageResource,
+  messagesById: Map<string, MessageResource>
+): MessageResource | null {
+  if (!message.replyRootId || message.replyRootId === message.id) return null
+  return messagesById.get(message.replyRootId) ?? message.replyRoot ?? null
+}
+
 function enrichSystemMessage(
   message: MessageResource,
   next: MessageResource | undefined
@@ -171,6 +187,7 @@ function replyShadowFor(
     type: 'ReplyShadowMessage',
     id: `${message.id}-${message.replyRootId}`,
     messageId: message.replyRootId,
+    replyRoot: message.replyRoot ?? null,
     isReplyShadowMessage: true,
     nextRendersAuthor: message.renderAuthor ?? false,
   }

package/src/utils/jolt/transform_message_event_data_to_message_resource.ts

@@ -29,6 +29,7 @@ export function transformMessageEventDataToMessageResource({
     reactionCounts: [],
     replyCount: data.reply_count || 0,
     replyRootId: data.reply_root_id || null,
+    idempotentKey: data.idempotent_key ?? null,
     messageType: data.message_type,
     personIdsForSystemEvent: data.system_event_person_ids,
     systemTextParts: data.system_text_parts

package/src/utils/request/messages_data_options.ts

@@ -10,6 +10,7 @@ export const getMessageFields = {
     'reaction_counts',
     'reply_count',
     'reply_root',
+    'idempotent_key',
     'message_type',
     'person_ids_for_system_event',
     'system_text_parts',
@@ -18,4 +19,4 @@ export const getMessageFields = {
   ReactionCount: ['value', 'count', 'mine', 'message_id', 'author_ids'],
 }
 
-export const getMessagesInclude = ['author', 'reaction_counts']
+export const getMessagesInclude = ['author', 'reaction_counts', 'reply_root', 'reply_root.author']