@planningcenter/chat-react-native 3.18.0-rc.6 → 3.18.0-rc.8

package/build/types/jolt_events/reaction_events.d.ts

@@ -5,6 +5,7 @@ interface BaseReactionEventData extends Record<string, unknown> {
         author_id: number;
         conversation_id: number;
         message_sort_key: string;
+        reply_root_id?: string | null;
         created_at: string;
         organization_id: number;
         value: ReactionCountResource['value'];

package/build/types/jolt_events/reaction_events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reaction_events.d.ts","sourceRoot":"","sources":["../../../src/types/jolt_events/reaction_events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,UAAU,qBAAsB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC7D,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAA;QACjB,eAAe,EAAE,MAAM,CAAA;QACvB,gBAAgB,EAAE,MAAM,CAAA;QACxB,UAAU,EAAE,MAAM,CAAA;QAClB,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAA;QACrC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAED,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,EAAE,kBAAkB,CAAA;IACzB,IAAI,EAAE,qBAAqB,CAAA;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,EAAE,oBAAoB,CAAA;IAC3B,IAAI,EAAE,qBAAqB,CAAA;CAC5B"}
+{"version":3,"file":"reaction_events.d.ts","sourceRoot":"","sources":["../../../src/types/jolt_events/reaction_events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,UAAU,qBAAsB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC7D,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAA;QACjB,eAAe,EAAE,MAAM,CAAA;QACvB,gBAAgB,EAAE,MAAM,CAAA;QACxB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QAC7B,UAAU,EAAE,MAAM,CAAA;QAClB,eAAe,EAAE,MAAM,CAAA;QACvB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAA;QACrC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAED,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,EAAE,kBAAkB,CAAA;IACzB,IAAI,EAAE,qBAAqB,CAAA;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,EAAE,oBAAoB,CAAA;IAC3B,IAAI,EAAE,qBAAqB,CAAA;CAC5B"}

package/build/types/jolt_events/reaction_events.js.map

@@ -1 +1 @@
-{"version":3,"file":"reaction_events.js","sourceRoot":"","sources":["../../../src/types/jolt_events/reaction_events.ts"],"names":[],"mappings":"","sourcesContent":["import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'\nimport { ReactionCountResource } from '../resources/reaction'\n\ninterface BaseReactionEventData extends Record<string, unknown> {\n  data: {\n    author_id: number\n    conversation_id: number\n    message_sort_key: string\n    created_at: string\n    organization_id: number\n    value: ReactionCountResource['value']\n    author_name?: string\n    author_avatar?: string\n    count: number\n  }\n}\n\nexport interface ReactionCreatedEvent extends CustomMessage {\n  event: 'reaction.created'\n  data: BaseReactionEventData\n}\n\nexport interface ReactionDeletedEvent extends CustomMessage {\n  event: 'reaction.destroyed'\n  data: BaseReactionEventData\n}\n"]}
+{"version":3,"file":"reaction_events.js","sourceRoot":"","sources":["../../../src/types/jolt_events/reaction_events.ts"],"names":[],"mappings":"","sourcesContent":["import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'\nimport { ReactionCountResource } from '../resources/reaction'\n\ninterface BaseReactionEventData extends Record<string, unknown> {\n  data: {\n    author_id: number\n    conversation_id: number\n    message_sort_key: string\n    reply_root_id?: string | null\n    created_at: string\n    organization_id: number\n    value: ReactionCountResource['value']\n    author_name?: string\n    author_avatar?: string\n    count: number\n  }\n}\n\nexport interface ReactionCreatedEvent extends CustomMessage {\n  event: 'reaction.created'\n  data: BaseReactionEventData\n}\n\nexport interface ReactionDeletedEvent extends CustomMessage {\n  event: 'reaction.destroyed'\n  data: BaseReactionEventData\n}\n"]}

package/build/types/jolt_events/typing_events.d.ts

@@ -10,6 +10,7 @@ export interface TypingBroadcastDataAttributes {
     author_id: number;
     author_name: string;
     id: string;
+    reply_root_id: string | null;
 }
 export {};
 //# sourceMappingURL=typing_events.d.ts.map

package/build/types/jolt_events/typing_events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typing_events.d.ts","sourceRoot":"","sources":["../../../src/types/jolt_events/typing_events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAA;AAE1F,UAAU,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,IAAI,EAAE,6BAA6B,CAAA;CACpC;AAED,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,EAAE,kBAAkB,CAAA;IACzB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,EAAE,EAAE,MAAM,CAAA;CACX"}
+{"version":3,"file":"typing_events.d.ts","sourceRoot":"","sources":["../../../src/types/jolt_events/typing_events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAA;AAE1F,UAAU,mBAAoB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,IAAI,EAAE,6BAA6B,CAAA;CACpC;AAED,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,KAAK,EAAE,kBAAkB,CAAA;IACzB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B"}

package/build/types/jolt_events/typing_events.js.map

@@ -1 +1 @@
-{"version":3,"file":"typing_events.js","sourceRoot":"","sources":["../../../src/types/jolt_events/typing_events.ts"],"names":[],"mappings":"","sourcesContent":["import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'\n\ninterface TypingBroadcastData extends Record<string, unknown> {\n  data: TypingBroadcastDataAttributes\n}\n\nexport interface TypingBroadcastEvent extends CustomMessage {\n  event: 'typing.broadcast'\n  data: TypingBroadcastData\n}\n\nexport interface TypingBroadcastDataAttributes {\n  author_id: number\n  author_name: string\n  id: string\n}\n"]}
+{"version":3,"file":"typing_events.js","sourceRoot":"","sources":["../../../src/types/jolt_events/typing_events.ts"],"names":[],"mappings":"","sourcesContent":["import type { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'\n\ninterface TypingBroadcastData extends Record<string, unknown> {\n  data: TypingBroadcastDataAttributes\n}\n\nexport interface TypingBroadcastEvent extends CustomMessage {\n  event: 'typing.broadcast'\n  data: TypingBroadcastData\n}\n\nexport interface TypingBroadcastDataAttributes {\n  author_id: number\n  author_name: string\n  id: string\n  reply_root_id: string | null\n}\n"]}

package/build/utils/cache/messages_cache.d.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query';
+import { MessageResource } from '../../types';
+import { JoltReactionEvent } from '../../types/jolt_events';
+export declare function updateCacheWithMessage(queryClient: QueryClient, queryKey: unknown[], message: MessageResource, event: 'message.created' | 'message.updated'): void;
+export declare function updateCacheWithReaction(queryClient: QueryClient, queryKey: unknown[], event: JoltReactionEvent, currentPersonId: number): void;
+export declare function isTemporaryMessageId(messageId?: string | null): boolean;
+export declare function isNewMessage(message?: MessageResource): boolean;
+export declare function getThreadedMessagesQueryKey(conversationId: number, replyRootId: string): import("../../hooks/use_suspense_api").RequestQueryKey;
+//# sourceMappingURL=messages_cache.d.ts.map

package/build/utils/cache/messages_cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages_cache.d.ts","sourceRoot":"","sources":["../../../src/utils/cache/messages_cache.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAiB,eAAe,EAAE,MAAM,aAAa,CAAA;AAG5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAK3D,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,OAAO,EAAE,EACnB,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,iBAAiB,GAAG,iBAAiB,QAsC7C;AAED,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,OAAO,EAAE,EACnB,KAAK,EAAE,iBAAiB,EACxB,eAAe,EAAE,MAAM,QAuCxB;AAGD,wBAAgB,oBAAoB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAEvE;AACD,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,0DAMtF"}

package/build/utils/cache/messages_cache.js

@@ -0,0 +1,89 @@
+import { deleteRecordInPagesData } from './page_mutations';
+import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations';
+import { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource';
+import { getMessagesRequestArgs } from '../request/get_messages';
+import { getRequestQueryKey } from '../../hooks/use_suspense_api';
+export function updateCacheWithMessage(queryClient, queryKey, message, event) {
+    queryClient.setQueryData(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
+            let dataAfterTempRemoval = prev;
+            if (prev && message.text && message.mine) {
+                dataAfterTempRemoval = deleteRecordInPagesData({
+                    data: prev,
+                    record: message,
+                    matchFn: (existingMessage, _record) => {
+                        return (isTemporaryMessageId(existingMessage.id) &&
+                            existingMessage.text === message.text &&
+                            existingMessage.mine);
+                    },
+                });
+            }
+            return updateOrCreateRecordInPagesData({
+                data: dataAfterTempRemoval,
+                record: message,
+                processRecord: (record, current) => {
+                    return { ...current, ...record };
+                },
+            });
+        }
+        else {
+            return updateRecordInPagesData({
+                data: prev,
+                record: message,
+                processRecord: (record, current) => {
+                    return { ...current, ...record };
+                },
+            });
+        }
+    });
+}
+export function updateCacheWithReaction(queryClient, queryKey, event, currentPersonId) {
+    const message = { id: event.data.data.message_sort_key };
+    queryClient.setQueryData(queryKey, prev => updateRecordInPagesData({
+        data: prev,
+        record: message,
+        processRecord: (record, oldMessage) => {
+            const reactionCounts = oldMessage.reactionCounts || [];
+            let foundMatch = false;
+            let newReactionCounts = reactionCounts.map(reactionCount => {
+                if (reactionCount.value === event.data.data.value) {
+                    foundMatch = true;
+                    return transformReactionEventDataToReactionCountResource({
+                        data: event.data.data,
+                        oldData: reactionCount,
+                        event: event.event,
+                        currentPersonId,
+                    });
+                }
+                return reactionCount;
+            });
+            if (!foundMatch) {
+                const newReactionCount = transformReactionEventDataToReactionCountResource({
+                    data: event.data.data,
+                    event: event.event,
+                    currentPersonId,
+                });
+                if (newReactionCount?.count) {
+                    newReactionCounts = [...newReactionCounts, newReactionCount];
+                }
+            }
+            return { ...oldMessage, reactionCounts: newReactionCounts };
+        },
+    }));
+}
+export function isTemporaryMessageId(messageId) {
+    return !!messageId && messageId.endsWith('-temp');
+}
+export function isNewMessage(message) {
+    return !message?.id || isTemporaryMessageId(message.id);
+}
+export function getThreadedMessagesQueryKey(conversationId, replyRootId) {
+    const requestArgs = getMessagesRequestArgs({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+    });
+    return getRequestQueryKey(requestArgs);
+}
+//# sourceMappingURL=messages_cache.js.map

package/build/utils/cache/messages_cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages_cache.js","sourceRoot":"","sources":["../../../src/utils/cache/messages_cache.ts"],"names":[],"mappings":"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","sourcesContent":["import { InfiniteData, QueryClient } from '@tanstack/react-query'\nimport { ApiCollection, MessageResource } from '../../types'\nimport { deleteRecordInPagesData } from './page_mutations'\nimport { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'\nimport { JoltReactionEvent } from '../../types/jolt_events'\nimport { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource'\nimport { getMessagesRequestArgs } from '../request/get_messages'\nimport { getRequestQueryKey } from '../../hooks/use_suspense_api'\n\nexport function updateCacheWithMessage(\n  queryClient: QueryClient,\n  queryKey: unknown[],\n  message: MessageResource,\n  event: 'message.created' | 'message.updated'\n) {\n  queryClient.setQueryData<MessagesQueryData>(queryKey, prev => {\n    if (event === 'message.created') {\n      // Before adding the new message, remove any pending temporary messages\n      // with matching text to prevent duplicates from race conditions\n      let dataAfterTempRemoval = prev\n      if (prev && message.text && message.mine) {\n        dataAfterTempRemoval = deleteRecordInPagesData({\n          data: prev,\n          record: message,\n          matchFn: (existingMessage, _record) => {\n            return (\n              isTemporaryMessageId(existingMessage.id) &&\n              existingMessage.text === message.text &&\n              existingMessage.mine\n            )\n          },\n        })\n      }\n\n      return updateOrCreateRecordInPagesData({\n        data: dataAfterTempRemoval,\n        record: message,\n        processRecord: (record, current) => {\n          return { ...current, ...record }\n        },\n      })\n    } else {\n      return updateRecordInPagesData({\n        data: prev,\n        record: message,\n        processRecord: (record, current) => {\n          return { ...current, ...record }\n        },\n      })\n    }\n  })\n}\n\nexport function updateCacheWithReaction(\n  queryClient: QueryClient,\n  queryKey: unknown[],\n  event: JoltReactionEvent,\n  currentPersonId: number\n) {\n  const message = { id: event.data.data.message_sort_key } as MessageResource\n  queryClient.setQueryData<MessagesQueryData>(queryKey, prev =>\n    updateRecordInPagesData({\n      data: prev,\n      record: message,\n      processRecord: (record, oldMessage) => {\n        const reactionCounts = oldMessage.reactionCounts || []\n        let foundMatch = false\n        let newReactionCounts = reactionCounts.map(reactionCount => {\n          if (reactionCount.value === event.data.data.value) {\n            foundMatch = true\n            return transformReactionEventDataToReactionCountResource({\n              data: event.data.data,\n              oldData: reactionCount,\n              event: event.event,\n              currentPersonId,\n            })\n          }\n          return reactionCount\n        })\n\n        if (!foundMatch) {\n          const newReactionCount = transformReactionEventDataToReactionCountResource({\n            data: event.data.data,\n            event: event.event,\n            currentPersonId,\n          })\n\n          if (newReactionCount?.count) {\n            newReactionCounts = [...newReactionCounts, newReactionCount]\n          }\n        }\n\n        return { ...oldMessage, reactionCounts: newReactionCounts }\n      },\n    })\n  )\n}\n\ntype MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>\nexport function isTemporaryMessageId(messageId?: string | null): boolean {\n  return !!messageId && messageId.endsWith('-temp')\n}\nexport function isNewMessage(message?: MessageResource): boolean {\n  return !message?.id || isTemporaryMessageId(message.id)\n}\n\nexport function getThreadedMessagesQueryKey(conversationId: number, replyRootId: string) {\n  const requestArgs = getMessagesRequestArgs({\n    conversation_id: conversationId,\n    reply_root_id: replyRootId,\n  })\n  return getRequestQueryKey(requestArgs)\n}\n"]}

package/build/utils/cache/optimistically_create_message.d.ts

@@ -1,10 +1,11 @@
 import { CurrentPersonResource, MessageResource } from '../../types';
 import { DenormalizedAttachmentResourceForCreate } from '../../types/resources/denormalized_attachment_resource_for_create';
-export declare function optimisticallyCreateMessage({ conversationId, text, attachments, currentPerson, message, }: {
+export declare function optimisticallyCreateMessage({ conversationId, text, attachments, currentPerson, message, replyRootId, }: {
     conversationId: number;
     text: string;
     attachments?: DenormalizedAttachmentResourceForCreate[];
     currentPerson: CurrentPersonResource;
     message?: MessageResource;
+    replyRootId?: string | null;
 }): MessageResource;
 //# sourceMappingURL=optimistically_create_message.d.ts.map

package/build/utils/cache/optimistically_create_message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"optimistically_create_message.d.ts","sourceRoot":"","sources":["../../../src/utils/cache/optimistically_create_message.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,qBAAqB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKnF,OAAO,EAAE,uCAAuC,EAAE,MAAM,mEAAmE,CAAA;AAI3H,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,GACR,EAAE;IACD,cAAc,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,uCAAuC,EAAE,CAAA;IACvD,aAAa,EAAE,qBAAqB,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B,mBA4CA"}
+{"version":3,"file":"optimistically_create_message.d.ts","sourceRoot":"","sources":["../../../src/utils/cache/optimistically_create_message.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,qBAAqB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKnF,OAAO,EAAE,uCAAuC,EAAE,MAAM,mEAAmE,CAAA;AAI3H,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,EACP,WAAW,GACZ,EAAE;IACD,cAAc,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,uCAAuC,EAAE,CAAA;IACvD,aAAa,EAAE,qBAAqB,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,mBA+CA"}

package/build/utils/cache/optimistically_create_message.js

@@ -3,7 +3,7 @@ import { chatQueryClient } from '../../contexts/api_provider';
 import { updateOrCreateRecordInPagesData } from './page_mutations';
 import { convertAttachmentsForCreate } from '../convert_attachments_for_create';
 import { generatePlaceholderUlid } from '../generate_placeholder_ulid';
-export function optimisticallyCreateMessage({ conversationId, text, attachments, currentPerson, message, }) {
+export function optimisticallyCreateMessage({ conversationId, text, attachments, currentPerson, message, replyRootId, }) {
     const id = message?.id || generateTempMessageId();
     // Convert attachments to denormalized format for optimistic UI
     const decoratedAttachments = convertAttachmentsForCreate(attachments || []);
@@ -28,9 +28,12 @@ export function optimisticallyCreateMessage({ conversationId, text, attachments,
         lastInGroup: true,
         pending: true,
         replyCount: 0,
-        replyRootId: null,
+        replyRootId: replyRootId || null,
     };
-    const queryKey = getMessagesQueryKey({ conversation_id: conversationId });
+    const queryKey = getMessagesQueryKey({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+    });
     chatQueryClient.setQueryData(queryKey, data => updateOrCreateRecordInPagesData({
         data,
         record: optimisticMessage,

package/build/utils/cache/optimistically_create_message.js.map

@@ -1 +1 @@
-{"version":3,"file":"optimistically_create_message.js","sourceRoot":"","sources":["../../../src/utils/cache/optimistically_create_message.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,+BAA+B,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAG/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAEtE,MAAM,UAAU,2BAA2B,CAAC,EAC1C,cAAc,EACd,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,GAOR;IACC,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,IAAI,qBAAqB,EAAE,CAAA;IAEjD,+DAA+D;IAC/D,MAAM,oBAAoB,GAAqC,2BAA2B,CACxF,WAAW,IAAI,EAAE,CAClB,CAAA;IAED,+BAA+B;IAC/B,MAAM,iBAAiB,GAAoB;QACzC,GAAG,OAAO;QACV,IAAI,EAAE,SAAS;QACf,EAAE;QACF,IAAI;QACJ,IAAI,EAAE,EAAE,EAAE,2BAA2B;QACrC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;QACnC,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,oBAAoB;QACjC,oBAAoB,EAAE,WAAW,IAAI,EAAE;QACvC,MAAM,EAAE,aAAa;QACrB,cAAc,EAAE,EAAE;QAClB,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,IAAI;QAChB,sBAAsB,EAAE,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,IAAI;KAClB,CAAA;IAID,MAAM,QAAQ,GAAG,mBAAmB,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC,CAAA;IAEzE,eAAe,CAAC,YAAY,CAAY,QAAQ,EAAE,IAAI,CAAC,EAAE,CACvD,+BAA+B,CAAC;QAC9B,IAAI;QACJ,MAAM,EAAE,iBAAoC;KAC7C,CAAC,CACH,CAAA;IAED,OAAO,iBAAiB,CAAA;AAC1B,CAAC;AAED,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,0FAA0F;IAC1F,sEAAsE;IACtE,OAAO,GAAG,uBAAuB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,OAAO,CAAA;AAC9D,CAAC,CAAA","sourcesContent":["import { InfiniteData } from '@tanstack/react-query'\nimport { ApiCollection, CurrentPersonResource, MessageResource } from '../../types'\nimport { getMessagesQueryKey } from '../../utils/request/get_messages'\nimport { chatQueryClient } from '../../contexts/api_provider'\nimport { updateOrCreateRecordInPagesData } from './page_mutations'\nimport { convertAttachmentsForCreate } from '../convert_attachments_for_create'\nimport { DenormalizedAttachmentResourceForCreate } from '../../types/resources/denormalized_attachment_resource_for_create'\nimport { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { generatePlaceholderUlid } from '../generate_placeholder_ulid'\n\nexport function optimisticallyCreateMessage({\n  conversationId,\n  text,\n  attachments,\n  currentPerson,\n  message,\n}: {\n  conversationId: number\n  text: string\n  attachments?: DenormalizedAttachmentResourceForCreate[]\n  currentPerson: CurrentPersonResource\n  message?: MessageResource\n}) {\n  const id = message?.id || generateTempMessageId()\n\n  // Convert attachments to denormalized format for optimistic UI\n  const decoratedAttachments: DenormalizedAttachmentResource[] = convertAttachmentsForCreate(\n    attachments || []\n  )\n\n  // Create an optimistic message\n  const optimisticMessage: MessageResource = {\n    ...message,\n    type: 'Message',\n    id,\n    text,\n    html: '', // Will be filled by server\n    createdAt: new Date().toISOString(),\n    deletedAt: null,\n    textEditedAt: null,\n    mine: true,\n    attachments: decoratedAttachments,\n    attachmentsForCreate: attachments || [],\n    author: currentPerson,\n    reactionCounts: [],\n    renderAuthor: false,\n    renderTime: true,\n    myLatestInConversation: true,\n    lastInGroup: true,\n    pending: true,\n    replyCount: 0,\n    replyRootId: null,\n  }\n\n  // Add the optimistic message to the cache\n  type QueryData = InfiniteData<ApiCollection<MessageResource>>\n  const queryKey = getMessagesQueryKey({ conversation_id: conversationId })\n\n  chatQueryClient.setQueryData<QueryData>(queryKey, data =>\n    updateOrCreateRecordInPagesData({\n      data,\n      record: optimisticMessage as MessageResource,\n    })\n  )\n\n  return optimisticMessage\n}\n\nconst generateTempMessageId = () => {\n  // Put it 5 seconds in the future to account for server lag of previously created messages\n  // that are still pending. This gets overwritten by the server anyway.\n  return `${generatePlaceholderUlid({ offsetMs: 5000 })}-temp`\n}\n"]}
+{"version":3,"file":"optimistically_create_message.js","sourceRoot":"","sources":["../../../src/utils/cache/optimistically_create_message.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,+BAA+B,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAG/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAEtE,MAAM,UAAU,2BAA2B,CAAC,EAC1C,cAAc,EACd,IAAI,EACJ,WAAW,EACX,aAAa,EACb,OAAO,EACP,WAAW,GAQZ;IACC,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,IAAI,qBAAqB,EAAE,CAAA;IAEjD,+DAA+D;IAC/D,MAAM,oBAAoB,GAAqC,2BAA2B,CACxF,WAAW,IAAI,EAAE,CAClB,CAAA;IAED,+BAA+B;IAC/B,MAAM,iBAAiB,GAAoB;QACzC,GAAG,OAAO;QACV,IAAI,EAAE,SAAS;QACf,EAAE;QACF,IAAI;QACJ,IAAI,EAAE,EAAE,EAAE,2BAA2B;QACrC,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;QACnC,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,oBAAoB;QACjC,oBAAoB,EAAE,WAAW,IAAI,EAAE;QACvC,MAAM,EAAE,aAAa;QACrB,cAAc,EAAE,EAAE;QAClB,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,IAAI;QAChB,sBAAsB,EAAE,IAAI;QAC5B,WAAW,EAAE,IAAI;QACjB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,WAAW,IAAI,IAAI;KACjC,CAAA;IAID,MAAM,QAAQ,GAAG,mBAAmB,CAAC;QACnC,eAAe,EAAE,cAAc;QAC/B,aAAa,EAAE,WAAW;KAC3B,CAAC,CAAA;IAEF,eAAe,CAAC,YAAY,CAAY,QAAQ,EAAE,IAAI,CAAC,EAAE,CACvD,+BAA+B,CAAC;QAC9B,IAAI;QACJ,MAAM,EAAE,iBAAoC;KAC7C,CAAC,CACH,CAAA;IAED,OAAO,iBAAiB,CAAA;AAC1B,CAAC;AAED,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,0FAA0F;IAC1F,sEAAsE;IACtE,OAAO,GAAG,uBAAuB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,OAAO,CAAA;AAC9D,CAAC,CAAA","sourcesContent":["import { InfiniteData } from '@tanstack/react-query'\nimport { ApiCollection, CurrentPersonResource, MessageResource } from '../../types'\nimport { getMessagesQueryKey } from '../../utils/request/get_messages'\nimport { chatQueryClient } from '../../contexts/api_provider'\nimport { updateOrCreateRecordInPagesData } from './page_mutations'\nimport { convertAttachmentsForCreate } from '../convert_attachments_for_create'\nimport { DenormalizedAttachmentResourceForCreate } from '../../types/resources/denormalized_attachment_resource_for_create'\nimport { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { generatePlaceholderUlid } from '../generate_placeholder_ulid'\n\nexport function optimisticallyCreateMessage({\n  conversationId,\n  text,\n  attachments,\n  currentPerson,\n  message,\n  replyRootId,\n}: {\n  conversationId: number\n  text: string\n  attachments?: DenormalizedAttachmentResourceForCreate[]\n  currentPerson: CurrentPersonResource\n  message?: MessageResource\n  replyRootId?: string | null\n}) {\n  const id = message?.id || generateTempMessageId()\n\n  // Convert attachments to denormalized format for optimistic UI\n  const decoratedAttachments: DenormalizedAttachmentResource[] = convertAttachmentsForCreate(\n    attachments || []\n  )\n\n  // Create an optimistic message\n  const optimisticMessage: MessageResource = {\n    ...message,\n    type: 'Message',\n    id,\n    text,\n    html: '', // Will be filled by server\n    createdAt: new Date().toISOString(),\n    deletedAt: null,\n    textEditedAt: null,\n    mine: true,\n    attachments: decoratedAttachments,\n    attachmentsForCreate: attachments || [],\n    author: currentPerson,\n    reactionCounts: [],\n    renderAuthor: false,\n    renderTime: true,\n    myLatestInConversation: true,\n    lastInGroup: true,\n    pending: true,\n    replyCount: 0,\n    replyRootId: replyRootId || null,\n  }\n\n  // Add the optimistic message to the cache\n  type QueryData = InfiniteData<ApiCollection<MessageResource>>\n  const queryKey = getMessagesQueryKey({\n    conversation_id: conversationId,\n    reply_root_id: replyRootId,\n  })\n\n  chatQueryClient.setQueryData<QueryData>(queryKey, data =>\n    updateOrCreateRecordInPagesData({\n      data,\n      record: optimisticMessage as MessageResource,\n    })\n  )\n\n  return optimisticMessage\n}\n\nconst generateTempMessageId = () => {\n  // Put it 5 seconds in the future to account for server lag of previously created messages\n  // that are still pending. This gets overwritten by the server anyway.\n  return `${generatePlaceholderUlid({ offsetMs: 5000 })}-temp`\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.18.0-rc.6",
+  "version": "3.18.0-rc.8",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,5 +58,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "78fdeec4ebbeb3d824a7e105303831415a2c9441"
+  "gitHead": "fff0564227516dace7a52c0cb1896b23b6c0e395"
 }

package/src/components/conversation/message.tsx

@@ -22,11 +22,12 @@ import {
 import Animated from 'react-native-reanimated'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { MessageReadReceipts } from './message_read_receipts'
-import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
+import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { Haptic } from '../../utils/native_adapters'
 import { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from './reply_connectors'
 import { pluralize } from '../../utils'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
+import { isNewMessage } from '../../utils/cache/messages_cache'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -79,7 +80,6 @@ export function Message({
   const isReplyRootMessage = message.replyRootId === message.id
   const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
 
-  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
   const replyCountText = pluralize(message.replyCount, 'reply')
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
   const replyRootAuthorName = message.replyRootId
@@ -117,6 +117,10 @@ export function Message({
     }
   }
 
+  const handleMessagePress = () => {
+    setShowMessageMetaToggle(!showMessageMetaToggle)
+  }
+
   const handleMessageLongPress = () => {
     if (!isPersisted) return
 
@@ -129,6 +133,7 @@ export function Message({
       reply_root_author_name: replyRootAuthorName,
     })
   }
+
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
     Haptic.impactLight()
     navigation.navigate('Reactions', {
@@ -161,11 +166,12 @@ export function Message({
   return (
     <Pressable
       onLongPress={handleMessageLongPress}
-      onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}
+      onPress={handleMessagePress}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
       accessibilityHint="Long press to view message actions like reacting and copying."
+      disabled={isDeletedReplyRootMessage}
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
@@ -189,7 +195,7 @@ export function Message({
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
-          {renderAuthor && (
+          {renderAuthor && !isDeletedReplyRootMessage && (
             <Text variant="footnote" style={styles.authorName}>
               {message.author.name}
             </Text>
@@ -198,18 +204,26 @@ export function Message({
             style={styles.messageBubble}
             onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
-            <ErrorBoundary>
-              <MessageAttachments
-                attachments={message.attachments}
-                metaProps={metaProps}
-                onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
-                onMessageLongPress={handleMessageLongPress}
-              />
-            </ErrorBoundary>
-            {messageText && (
+            {isDeletedReplyRootMessage ? (
               <View style={styles.messageText}>
-                <MessageMarkdown text={messageText} />
+                <Text style={styles.replyRootDeletedText}>Message deleted</Text>
               </View>
+            ) : (
+              <>
+                <ErrorBoundary>
+                  <MessageAttachments
+                    attachments={message.attachments}
+                    metaProps={metaProps}
+                    onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
+                    onMessageLongPress={handleMessageLongPress}
+                  />
+                </ErrorBoundary>
+                {text && (
+                  <View style={styles.messageText}>
+                    <MessageMarkdown text={text} />
+                  </View>
+                )}
+              </>
             )}
           </View>
           {showReplyCountButton && (
@@ -223,7 +237,7 @@ export function Message({
               {replyCountText}
             </TextButton>
           )}
-          {hasReactions && (
+          {hasReactions && !isDeletedReplyRootMessage && (
             <View style={styles.messageReactions}>
               {reactionCounts.map(reaction => (
                 <MessageReaction
@@ -236,7 +250,7 @@ export function Message({
               ))}
             </View>
           )}
-          {showMessageMeta && (
+          {showMessageMeta && !isDeletedReplyRootMessage && (
             <View style={styles.messageMeta}>
               {message.mine && !pending && !error && (
                 <MessageReadReceipts
@@ -364,5 +378,9 @@ const useMessageStyles = ({ mine }: MessageResource) => {
     errorText: {
       color: colors.statusErrorText,
     },
+    replyRootDeletedText: {
+      color: colors.textColorDefaultSecondary,
+      fontStyle: 'italic',
+    },
   })
 }

package/src/components/conversation/message_form.tsx

@@ -1,9 +1,4 @@
-import {
-  RouteProp,
-  useNavigation,
-  useTheme as useNavigationTheme,
-  useRoute,
-} from '@react-navigation/native'
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import {
   Platform,
@@ -319,9 +314,7 @@ function MessageFormInput() {
     React.useContext(MessageFormContext)
   const attachmentError = attachmentUploader?.errorMessage
 
-  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
-  const conversationId = route.params.conversation_id
-  const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)
+  const broadcastTypingStatus = useBroadcastTypingStatus()
 
   const handleTextChange = (newText: string) => {
     setText(newText)

package/src/components/conversation/typing_indicator.tsx

@@ -41,16 +41,12 @@ const TypingDots = () => {
   )
 }
 
-interface TypingIndicatorProps {
-  conversationId: number
-}
-
 /**
  * Component to display typing indicators in a conversation
  * Shows "X is typing..." with animated dots
  */
-export const TypingIndicator = ({ conversationId }: TypingIndicatorProps) => {
-  const typingPeople = useTypingIndicators(conversationId)
+export const TypingIndicator = () => {
+  const typingPeople = useTypingIndicators()
   const styles = useStyles()
   const enabled = typingPeople.length > 0
 

package/src/contexts/conversation_context.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+
+interface ConversationContextValue {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+interface ConversationContextProviderProps extends PropsWithChildren {
+  conversationId: number
+  currentPageReplyRootId: string | null
+}
+
+const ConversationContext = createContext<ConversationContextValue>({
+  conversationId: 0,
+  currentPageReplyRootId: null,
+})
+
+export const ConversationContextProvider = ({
+  children,
+  conversationId,
+  currentPageReplyRootId,
+}: ConversationContextProviderProps) => {
+  const value = useMemo(
+    () => ({
+      conversationId,
+      currentPageReplyRootId,
+    }),
+    [conversationId, currentPageReplyRootId]
+  )
+
+  return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>
+}
+
+export const useConversationContext = () => useContext(ConversationContext)

package/src/hooks/use_broadcast_typing_status.ts

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react'
 import { useApiClient } from './use_api_client'
+import { useConversationContext } from '../contexts/conversation_context'
 
 const THROTTLE_INTERVAL = 3000 // 3 seconds
 
@@ -10,7 +11,8 @@ const THROTTLE_INTERVAL = 3000 // 3 seconds
  * after receiving a typing event. This is how we can show a steady typing indicator even
  * if the user types once every 2.9 seconds.
  */
-export const useBroadcastTypingStatus = (conversationId: string | number) => {
+export const useBroadcastTypingStatus = () => {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
   const apiClient = useApiClient()
   const lastBroadcastTime = useRef<number>(0)
 
@@ -26,12 +28,14 @@ export const useBroadcastTypingStatus = (conversationId: string | number) => {
     apiClient.chat
       .post({
         url: `/me/conversations/${conversationId}/broadcast_typing_status`,
-        data: { data: { type: 'TypingStatus', attributes: {} } },
+        data: {
+          data: { type: 'TypingStatus', attributes: { reply_root_id: currentPageReplyRootId } },
+        },
       })
       .catch(error => {
         console.error('Failed to broadcast typing status:', error)
       })
-  }, [apiClient, conversationId])
+  }, [apiClient.chat, conversationId, currentPageReplyRootId])
 
   return broadcastTypingStatus
 }

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,22 +1,21 @@
 import { ApiCollection, MessageResource } from '../types'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
-import {
-  deleteRecordInPagesData,
-  updateOrCreateRecordInPagesData,
-  updateRecordInPagesData,
-} from '../utils'
+import { deleteRecordInPagesData } from '../utils'
 import { MessageCreatedEvent, MessageDeletedEvent } from '../types/jolt_events/message_events'
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useCurrentPerson } from './use_current_person'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
-import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../utils/request/get_messages'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
-import { isTemporaryMessageId } from './use_message_create_or_update'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
 import { useApiClient } from './use_api_client'
+import {
+  updateCacheWithMessage,
+  updateCacheWithReaction,
+  getThreadedMessagesQueryKey,
+} from '../utils/cache/messages_cache'
 
 interface Props {
   conversationId: number
@@ -47,42 +46,17 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       }
     }
 
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev => {
-      if (e.event === 'message.created') {
-        // Before adding the new message, remove any pending temporary messages
-        // with matching text to prevent duplicates from race conditions
-        let dataAfterTempRemoval = prev
-        if (prev && message.text && message.mine) {
-          dataAfterTempRemoval = deleteRecordInPagesData({
-            data: prev,
-            record: message,
-            matchFn: (existingMessage, _record) => {
-              return (
-                isTemporaryMessageId(existingMessage.id) &&
-                existingMessage.text === message.text &&
-                existingMessage.mine
-              )
-            },
-          })
-        }
-
-        return updateOrCreateRecordInPagesData({
-          data: dataAfterTempRemoval,
-          record: message,
-          processRecord: (record, current) => {
-            return { ...current, ...record }
-          },
-        })
-      } else {
-        return updateRecordInPagesData({
-          data: prev,
-          record: message,
-          processRecord: (record, current) => {
-            return { ...current, ...record }
-          },
-        })
-      }
-    })
+    // Update the main conversation cache
+    updateCacheWithMessage(queryClient, messagesQueryKey, message, e.event)
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
+    }
   }
 
   const handleMessageDeleted = async (e: MessageDeletedEvent) => {
@@ -92,50 +66,34 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       currentPersonId: currentPerson.id,
     })
 
+    // Update the main conversation cache
     queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
       deleteRecordInPagesData({ data: prev, record: message })
     )
+
+    // If message has a reply_root_id, also update the threaded cache
+    if (data.reply_root_id) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(
+        conversationId,
+        data.reply_root_id
+      )
+      queryClient.setQueryData<QueryData>(threadedMessagesQueryKey, prev =>
+        deleteRecordInPagesData({ data: prev, record: message })
+      )
+    }
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    const { data } = e.data
-    const message = { id: data.message_sort_key } as MessageResource
-    queryClient.setQueryData<QueryData>(messagesQueryKey, prev =>
-      updateRecordInPagesData({
-        data: prev,
-        record: message,
-        processRecord: (record, oldMessage) => {
-          const reactionCounts = oldMessage.reactionCounts || []
-          let foundMatch = false
-          let newReactionCounts = reactionCounts.map(reactionCount => {
-            if (reactionCount.value === data.value) {
-              foundMatch = true
-              return transformReactionEventDataToReactionCountResource({
-                data,
-                oldData: reactionCount,
-                event: e.event,
-                currentPersonId: currentPerson.id,
-              })
-            }
-            return reactionCount
-          })
-
-          if (!foundMatch) {
-            const newReactionCount = transformReactionEventDataToReactionCountResource({
-              data,
-              event: e.event,
-              currentPersonId: currentPerson.id,
-            })
-
-            if (newReactionCount?.count) {
-              newReactionCounts = [...newReactionCounts, newReactionCount]
-            }
-          }
-
-          return { ...oldMessage, reactionCounts: newReactionCounts }
-        },
-      })
-    )
+    // Update the main conversation cache and capture the reply_root_id if present
+    updateCacheWithReaction(queryClient, messagesQueryKey, e, currentPerson.id)
+
+    const replyRootId = e.data.data.reply_root_id
+
+    // If the message has a reply_root_id, also update the threaded cache
+    if (replyRootId) {
+      const threadedMessagesQueryKey = getThreadedMessagesQueryKey(conversationId, replyRootId)
+      updateCacheWithReaction(queryClient, threadedMessagesQueryKey, e, currentPerson.id)
+    }
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {