@planningcenter/chat-react-native 3.35.0-rc.3 → 3.35.0-rc.4

package/build/utils/highest_seen_tracker.js

@@ -0,0 +1,37 @@
+export const FLUSH_DELAY_MS = 2000;
+export function makeHighestSeenTracker(conversationId, send, flushDelayMs = FLUSH_DELAY_MS) {
+    let highest = null;
+    let lastSent = null;
+    let timer = null;
+    const fire = () => {
+        timer = null;
+        if (!highest || highest === lastSent)
+            return;
+        lastSent = highest;
+        send({ conversationId, sortKey: highest });
+    };
+    return {
+        onSeen(sortKey) {
+            if (highest && sortKey.localeCompare(highest) <= 0)
+                return;
+            highest = sortKey;
+            if (timer)
+                clearTimeout(timer);
+            timer = setTimeout(fire, flushDelayMs);
+        },
+        flushNow() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            fire();
+        },
+        cancel() {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+        },
+    };
+}
+//# sourceMappingURL=highest_seen_tracker.js.map

package/build/utils/highest_seen_tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highest_seen_tracker.js","sourceRoot":"","sources":["../../src/utils/highest_seen_tracker.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAA;AAIlC,MAAM,UAAU,sBAAsB,CACpC,cAAsB,EACtB,IAAY,EACZ,eAAuB,cAAc;IAErC,IAAI,OAAO,GAAkB,IAAI,CAAA;IACjC,IAAI,QAAQ,GAAkB,IAAI,CAAA;IAClC,IAAI,KAAK,GAAyC,IAAI,CAAA;IAEtD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,KAAK,GAAG,IAAI,CAAA;QACZ,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,QAAQ;YAAE,OAAM;QAC5C,QAAQ,GAAG,OAAO,CAAA;QAClB,IAAI,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAA;IAC5C,CAAC,CAAA;IAED,OAAO;QACL,MAAM,CAAC,OAAe;YACpB,IAAI,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC;gBAAE,OAAM;YAC1D,OAAO,GAAG,OAAO,CAAA;YACjB,IAAI,KAAK;gBAAE,YAAY,CAAC,KAAK,CAAC,CAAA;YAC9B,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;QACxC,CAAC;QACD,QAAQ;YACN,IAAI,KAAK,EAAE,CAAC;gBACV,YAAY,CAAC,KAAK,CAAC,CAAA;gBACnB,KAAK,GAAG,IAAI,CAAA;YACd,CAAC;YACD,IAAI,EAAE,CAAA;QACR,CAAC;QACD,MAAM;YACJ,IAAI,KAAK,EAAE,CAAC;gBACV,YAAY,CAAC,KAAK,CAAC,CAAA;gBACnB,KAAK,GAAG,IAAI,CAAA;YACd,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["export const FLUSH_DELAY_MS = 2000\n\ntype SendFn = (args: { conversationId: number; sortKey: string }) => void\n\nexport function makeHighestSeenTracker(\n  conversationId: number,\n  send: SendFn,\n  flushDelayMs: number = FLUSH_DELAY_MS\n) {\n  let highest: string | null = null\n  let lastSent: string | null = null\n  let timer: ReturnType<typeof setTimeout> | null = null\n\n  const fire = () => {\n    timer = null\n    if (!highest || highest === lastSent) return\n    lastSent = highest\n    send({ conversationId, sortKey: highest })\n  }\n\n  return {\n    onSeen(sortKey: string) {\n      if (highest && sortKey.localeCompare(highest) <= 0) return\n      highest = sortKey\n      if (timer) clearTimeout(timer)\n      timer = setTimeout(fire, flushDelayMs)\n    },\n    flushNow() {\n      if (timer) {\n        clearTimeout(timer)\n        timer = null\n      }\n      fire()\n    },\n    cancel() {\n      if (timer) {\n        clearTimeout(timer)\n        timer = null\n      }\n    },\n  }\n}\n"]}

package/build/utils/message_viewability.d.ts

@@ -0,0 +1,24 @@
+export interface ViewableEntry<Item> {
+    key: string;
+    isViewable: boolean;
+    item: Item;
+}
+export interface ViewabilityEvent<Item> {
+    viewableItems: ViewableEntry<Item>[];
+    changed: ViewableEntry<Item>[];
+    userHasScrolled: boolean;
+}
+export type ViewabilityObserver<Item> = (event: ViewabilityEvent<Item>) => void;
+export declare function reportViewableMessages<Item extends {
+    id?: string;
+    type?: string;
+}>(onMessageSeen: (id: string) => void): ViewabilityObserver<Item>;
+export declare function detectDividerExitTowardNewer<Item extends {
+    id?: string;
+    type?: string;
+}>({ dividerKey, initialMessageId, onExited, }: {
+    dividerKey: string;
+    initialMessageId: string | null;
+    onExited: () => void;
+}): ViewabilityObserver<Item>;
+//# sourceMappingURL=message_viewability.d.ts.map

package/build/utils/message_viewability.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_viewability.d.ts","sourceRoot":"","sources":["../../src/utils/message_viewability.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa,CAAC,IAAI;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;CACX;AAED,MAAM,WAAW,gBAAgB,CAAC,IAAI;IACpC,aAAa,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAA;IACpC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAA;IAC9B,eAAe,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,mBAAmB,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;AAE/E,wBAAgB,sBAAsB,CAAC,IAAI,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,EAChF,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAClC,mBAAmB,CAAC,IAAI,CAAC,CAS3B;AAED,wBAAgB,4BAA4B,CAAC,IAAI,SAAS;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,EACxF,UAAU,EACV,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAW5B"}

package/build/utils/message_viewability.js

@@ -0,0 +1,29 @@
+import { dividerExitedTowardNewer } from './unread_divider_helpers';
+export function reportViewableMessages(onMessageSeen) {
+    return ({ viewableItems, userHasScrolled }) => {
+        if (!userHasScrolled)
+            return;
+        for (const entry of viewableItems) {
+            if (entry.item?.type !== 'Message')
+                continue;
+            const id = entry.item?.id;
+            if (typeof id === 'string')
+                onMessageSeen(id);
+        }
+    };
+}
+export function detectDividerExitTowardNewer({ dividerKey, initialMessageId, onExited, }) {
+    return ({ viewableItems, changed, userHasScrolled }) => {
+        if (!userHasScrolled || !initialMessageId)
+            return;
+        const exited = dividerExitedTowardNewer({
+            changed,
+            viewableItems,
+            dividerKey,
+            initialMessageId,
+        });
+        if (exited)
+            onExited();
+    };
+}
+//# sourceMappingURL=message_viewability.js.map

package/build/utils/message_viewability.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message_viewability.js","sourceRoot":"","sources":["../../src/utils/message_viewability.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAgBnE,MAAM,UAAU,sBAAsB,CACpC,aAAmC;IAEnC,OAAO,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,EAAE;QAC5C,IAAI,CAAC,eAAe;YAAE,OAAM;QAC5B,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;YAClC,IAAI,KAAK,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS;gBAAE,SAAQ;YAC5C,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,CAAA;YACzB,IAAI,OAAO,EAAE,KAAK,QAAQ;gBAAE,aAAa,CAAC,EAAE,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,4BAA4B,CAA8C,EACxF,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,OAAO,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE;QACrD,IAAI,CAAC,eAAe,IAAI,CAAC,gBAAgB;YAAE,OAAM;QACjD,MAAM,MAAM,GAAG,wBAAwB,CAAC;YACtC,OAAO;YACP,aAAa;YACb,UAAU;YACV,gBAAgB;SACjB,CAAC,CAAA;QACF,IAAI,MAAM;YAAE,QAAQ,EAAE,CAAA;IACxB,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { dividerExitedTowardNewer } from './unread_divider_helpers'\n\nexport interface ViewableEntry<Item> {\n  key: string\n  isViewable: boolean\n  item: Item\n}\n\nexport interface ViewabilityEvent<Item> {\n  viewableItems: ViewableEntry<Item>[]\n  changed: ViewableEntry<Item>[]\n  userHasScrolled: boolean\n}\n\nexport type ViewabilityObserver<Item> = (event: ViewabilityEvent<Item>) => void\n\nexport function reportViewableMessages<Item extends { id?: string; type?: string }>(\n  onMessageSeen: (id: string) => void\n): ViewabilityObserver<Item> {\n  return ({ viewableItems, userHasScrolled }) => {\n    if (!userHasScrolled) return\n    for (const entry of viewableItems) {\n      if (entry.item?.type !== 'Message') continue\n      const id = entry.item?.id\n      if (typeof id === 'string') onMessageSeen(id)\n    }\n  }\n}\n\nexport function detectDividerExitTowardNewer<Item extends { id?: string; type?: string }>({\n  dividerKey,\n  initialMessageId,\n  onExited,\n}: {\n  dividerKey: string\n  initialMessageId: string | null\n  onExited: () => void\n}): ViewabilityObserver<Item> {\n  return ({ viewableItems, changed, userHasScrolled }) => {\n    if (!userHasScrolled || !initialMessageId) return\n    const exited = dividerExitedTowardNewer({\n      changed,\n      viewableItems,\n      dividerKey,\n      initialMessageId,\n    })\n    if (exited) onExited()\n  }\n}\n"]}

package/build/utils/unread_divider_helpers.d.ts

@@ -0,0 +1,18 @@
+type ViewableChangeEntry = {
+    key: string;
+    isViewable: boolean;
+};
+type ViewableItem = {
+    item: {
+        id?: string;
+        type?: string;
+    };
+};
+export declare function dividerExitedTowardNewer({ changed, viewableItems, dividerKey, initialMessageId, }: {
+    changed: ViewableChangeEntry[];
+    viewableItems: ViewableItem[];
+    dividerKey: string;
+    initialMessageId: string;
+}): boolean;
+export {};
+//# sourceMappingURL=unread_divider_helpers.d.ts.map

package/build/utils/unread_divider_helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread_divider_helpers.d.ts","sourceRoot":"","sources":["../../src/utils/unread_divider_helpers.ts"],"names":[],"mappings":"AAAA,KAAK,mBAAmB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAA;AAC/D,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAA;AAE5D,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,aAAa,EACb,UAAU,EACV,gBAAgB,GACjB,EAAE;IACD,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,EAAE,MAAM,CAAA;CACzB,GAAG,OAAO,CAWV"}

package/build/utils/unread_divider_helpers.js

@@ -0,0 +1,13 @@
+export function dividerExitedTowardNewer({ changed, viewableItems, dividerKey, initialMessageId, }) {
+    const dividerExited = changed.some(c => c.key === dividerKey && !c.isViewable);
+    if (!dividerExited)
+        return false;
+    const visibleMessageIds = viewableItems
+        .filter(v => v.item?.type === 'Message')
+        .map(v => v.item?.id)
+        .filter((id) => !!id);
+    if (visibleMessageIds.length === 0)
+        return false;
+    return visibleMessageIds.every(id => id.localeCompare(initialMessageId) > 0);
+}
+//# sourceMappingURL=unread_divider_helpers.js.map

package/build/utils/unread_divider_helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread_divider_helpers.js","sourceRoot":"","sources":["../../src/utils/unread_divider_helpers.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,wBAAwB,CAAC,EACvC,OAAO,EACP,aAAa,EACb,UAAU,EACV,gBAAgB,GAMjB;IACC,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9E,IAAI,CAAC,aAAa;QAAE,OAAO,KAAK,CAAA;IAEhC,MAAM,iBAAiB,GAAG,aAAa;SACpC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC;SACvC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;SACpB,MAAM,CAAC,CAAC,EAAE,EAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACrC,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAA;IAEhD,OAAO,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;AAC9E,CAAC","sourcesContent":["type ViewableChangeEntry = { key: string; isViewable: boolean }\ntype ViewableItem = { item: { id?: string; type?: string } }\n\nexport function dividerExitedTowardNewer({\n  changed,\n  viewableItems,\n  dividerKey,\n  initialMessageId,\n}: {\n  changed: ViewableChangeEntry[]\n  viewableItems: ViewableItem[]\n  dividerKey: string\n  initialMessageId: string\n}): boolean {\n  const dividerExited = changed.some(c => c.key === dividerKey && !c.isViewable)\n  if (!dividerExited) return false\n\n  const visibleMessageIds = viewableItems\n    .filter(v => v.item?.type === 'Message')\n    .map(v => v.item?.id)\n    .filter((id): id is string => !!id)\n  if (visibleMessageIds.length === 0) return false\n\n  return visibleMessageIds.every(id => id.localeCompare(initialMessageId) > 0)\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.35.0-rc.3",
+  "version": "3.35.0-rc.4",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -52,9 +52,12 @@
   },
   "devDependencies": {
     "@react-native/eslint-config": "~0.83.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^13.2.0",
+    "@types/color": "^3.0.0",
     "@types/jest": "^29.5.14",
-    "@typescript-eslint/parser": "^8.32.0",
+    "@typescript-eslint/parser": "^8.36.0",
+    "color": "^3.1.2",
+    "eslint": "8.57.1",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "expo-module-scripts": "^55.0.0",
     "fast-text-encoding": "^1.0.6",
@@ -62,8 +65,11 @@
     "jest-fetch-mock": "^3.0.3",
     "msw": "^2.7.3",
     "prettier": "^3.4.2",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-svg": "15.15.3",
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "1955eec824c4a2ca101004e0dbbca5a6f862fa3b"
+  "gitHead": "033e05c3a604adc1e36af2b8673719455e9e0f86"
 }

package/src/__tests__/contexts/session_context.tsx

@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react-native'
 import React, { useContext, Suspense } from 'react'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import {

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

@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react-native'
 import React, { Suspense } from 'react'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import { useAsyncStorage } from '../../hooks/use_async_storage'

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

@@ -1,5 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react-native'
 import React from 'react'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import { useApiClient } from '../../hooks/use_api_client'

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

@@ -1,5 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react-native'
 import React, { Suspense } from 'react'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import {

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

@@ -1,5 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query'
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react-native'
 import React, { Suspense } from 'react'
 import { buildTestQueryClient } from '../../__utils__/query_client'
 import { ConversationContextProvider } from '../../contexts/conversation_context'

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

@@ -0,0 +1,154 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { renderHook } from '@testing-library/react-native'
+import React, { useEffect } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import {
+  ConversationContextProvider,
+  useConversationContext,
+} from '../../contexts/conversation_context'
+import * as appStateModule from '../../hooks/use_app_state'
+import * as conversationsActionsModule from '../../hooks/use_conversations_actions'
+import * as featuresModule from '../../hooks/use_features'
+import { useMarkLatestMessageRead } from '../../hooks/use_mark_latest_message_read'
+import { ConversationResource } from '../../types'
+
+const conversation = {
+  id: 1,
+  type: 'Conversation',
+  unreadCount: 3,
+  unreadReactionCount: 0,
+  conversationMembership: { lastReadMessageSortKey: '01A' },
+} as unknown as ConversationResource
+
+interface WrapperProps {
+  replyRootId?: string | null
+  initialMessageIdIsAnchor?: boolean
+  atEndOfMessageHistory?: boolean
+}
+
+const createWrapper = ({
+  replyRootId = null,
+  initialMessageIdIsAnchor = false,
+  atEndOfMessageHistory = !initialMessageIdIsAnchor,
+}: WrapperProps = {}) => {
+  const queryClient = buildTestQueryClient()
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <ConversationContextProvider
+        conversationId={1}
+        currentPageReplyRootId={replyRootId}
+        initialMessageId={initialMessageIdIsAnchor ? '01A' : null}
+        initialMessageIdIsAnchor={initialMessageIdIsAnchor}
+      >
+        <AtEndPrimer atEndOfMessageHistory={atEndOfMessageHistory}>{children}</AtEndPrimer>
+      </ConversationContextProvider>
+    </QueryClientProvider>
+  )
+  return Wrapper
+}
+
+const AtEndPrimer = ({
+  atEndOfMessageHistory,
+  children,
+}: {
+  atEndOfMessageHistory: boolean
+  children: React.ReactNode
+}) => {
+  const { setAtEndOfMessageHistory } = useConversationContext()
+  useEffect(() => {
+    setAtEndOfMessageHistory(atEndOfMessageHistory)
+  }, [atEndOfMessageHistory, setAtEndOfMessageHistory])
+  return <>{children}</>
+}
+
+const mockFeatures = (enabled: boolean) => {
+  jest.spyOn(featuresModule, 'useFeatures').mockReturnValue({
+    features: [],
+    featureEnabled: () => enabled,
+  })
+}
+
+const mockMarkRead = () => {
+  const markRead = jest.fn()
+  jest.spyOn(conversationsActionsModule, 'useConversationsMarkRead').mockReturnValue({
+    markRead,
+    read: false,
+  } as unknown as ReturnType<typeof conversationsActionsModule.useConversationsMarkRead>)
+  return markRead
+}
+
+const mockAppState = (state: string = 'active') => {
+  jest.spyOn(appStateModule, 'useAppState').mockReturnValue(state)
+}
+
+describe('useMarkLatestMessageRead', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('fires markRead when JTU is off (backward compat preserved)', () => {
+    mockAppState()
+    mockFeatures(false)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper(),
+    })
+
+    expect(markRead).toHaveBeenCalledWith(true)
+  })
+
+  it('does NOT fire markRead when in a reply view (parity fix, ships flag-off)', () => {
+    mockAppState()
+    mockFeatures(false)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper({ replyRootId: 'root-1' }),
+    })
+
+    expect(markRead).not.toHaveBeenCalled()
+  })
+
+  it('does NOT fire markRead when JTU is active and user is not at end of history', () => {
+    mockAppState()
+    mockFeatures(true)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper({
+        initialMessageIdIsAnchor: true,
+        atEndOfMessageHistory: false,
+      }),
+    })
+
+    expect(markRead).not.toHaveBeenCalled()
+  })
+
+  it('fires markRead when JTU is active and user reaches end of history', () => {
+    mockAppState()
+    mockFeatures(true)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper({
+        initialMessageIdIsAnchor: true,
+        atEndOfMessageHistory: true,
+      }),
+    })
+
+    expect(markRead).toHaveBeenCalledWith(true)
+  })
+
+  it('does NOT fire when app state is not active', () => {
+    mockAppState('background')
+    mockFeatures(false)
+    const markRead = mockMarkRead()
+
+    renderHook(() => useMarkLatestMessageRead({ conversation }), {
+      wrapper: createWrapper(),
+    })
+
+    expect(markRead).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,54 @@
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { hasUnloadedNewerPages } from '../../../utils/cache/messages_cache'
+
+const queryKey = ['messages-test']
+
+const buildClient = (data: unknown) => {
+  const client = buildTestQueryClient()
+  client.setQueryData(queryKey, data)
+  return client
+}
+
+describe('hasUnloadedNewerPages', () => {
+  it('returns false when the query has no cached data', () => {
+    const client = buildTestQueryClient()
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+
+  it('returns false when pages[0] has no next.idGt cursor', () => {
+    const client = buildClient({
+      pageParams: [{}],
+      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0 } }],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+
+  it('returns false when next exists but idGt is absent', () => {
+    const client = buildClient({
+      pageParams: [{}],
+      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0, next: { idLt: '01A' } } }],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+
+  it('returns true when pages[0].meta.next.idGt is set', () => {
+    const client = buildClient({
+      pageParams: [{}],
+      pages: [
+        { data: [], links: {}, meta: { count: 0, totalCount: 0, next: { idGt: '01KQSTAY' } } },
+      ],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(true)
+  })
+
+  it('inspects only the first page (the newest side after sort)', () => {
+    const client = buildClient({
+      pageParams: [{}, {}],
+      pages: [
+        { data: [], links: {}, meta: { count: 0, totalCount: 0 } },
+        { data: [], links: {}, meta: { count: 0, totalCount: 0, next: { idGt: '01KQSTAY' } } },
+      ],
+    })
+    expect(hasUnloadedNewerPages(client, queryKey)).toBe(false)
+  })
+})

package/src/components/conversation/jump_to_bottom_button.tsx

@@ -1,12 +1,13 @@
 import { useEffect } from 'react'
-import { View, Pressable, StyleSheet } from 'react-native'
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native'
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  interpolate,
   Extrapolation,
+  interpolate,
   ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
+  withTiming,
 } from 'react-native-reanimated'
 import { useTheme } from '../../hooks'
 import { platformFontWeightMedium } from '../../utils'
@@ -15,11 +16,17 @@ import { Icon, Text } from '../display'
 interface JumpToBottomButtonProps {
   onPress: () => void
   visible: boolean
+  loading?: boolean
 }
 
-export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps) => {
+export const JumpToBottomButton = ({
+  onPress,
+  visible,
+  loading = false,
+}: JumpToBottomButtonProps) => {
   const styles = useStyles()
   const progress = useSharedValue(0)
+  const loadingProgress = useSharedValue(0)
 
   useEffect(() => {
     progress.value = withSpring(visible ? 1 : 0, {
@@ -31,6 +38,13 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
     })
   }, [visible, progress])
 
+  useEffect(() => {
+    loadingProgress.value = withTiming(loading ? 1 : 0, {
+      duration: 750,
+      reduceMotion: ReduceMotion.System,
+    })
+  }, [loading, loadingProgress])
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       opacity: progress.value,
@@ -45,16 +59,34 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
     }
   })
 
+  const iconStyle = useAnimatedStyle(() => ({ opacity: 1 - loadingProgress.value }))
+  const spinnerStyle = useAnimatedStyle(() => ({ opacity: loadingProgress.value }))
+
   return (
     <View>
-      <Animated.View style={[styles.container, animatedStyle]}>
+      <Animated.View
+        style={[styles.container, animatedStyle]}
+        pointerEvents={visible ? 'auto' : 'none'}
+      >
         <Pressable
           onPress={onPress}
+          disabled={loading}
+          accessibilityRole="button"
+          accessibilityLabel="Jump to most recent message"
+          accessibilityState={{ busy: loading }}
+          hitSlop={hitSlop}
           style={({ pressed }) => [styles.button, pressed && styles.pressed]}
         >
-          <Icon name="general.downArrow" style={styles.icon} />
+          <View style={styles.glyph}>
+            <Animated.View style={[styles.glyphLayer, iconStyle]}>
+              <Icon name="general.downArrow" style={styles.icon} />
+            </Animated.View>
+            <Animated.View style={[styles.glyphLayer, spinnerStyle]}>
+              <ActivityIndicator size="small" color={styles.icon.color} style={styles.spinner} />
+            </Animated.View>
+          </View>
           <Text variant="tertiary" style={styles.text}>
-            Jump to bottom
+            {loading ? 'Jumping to latest…' : 'Jump to bottom'}
           </Text>
         </Pressable>
       </Animated.View>
@@ -62,6 +94,8 @@ export const JumpToBottomButton = ({ onPress, visible }: JumpToBottomButtonProps
   )
 }
 
+const hitSlop = { top: 12, bottom: 12, left: 12, right: 12 }
+
 const useStyles = () => {
   const { colors } = useTheme()
 
@@ -93,10 +127,25 @@ const useStyles = () => {
       color: colors.fillColorNeutral100Inverted,
       fontWeight: platformFontWeightMedium,
     },
+    glyph: {
+      width: 14,
+      height: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    glyphLayer: {
+      position: 'absolute',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     icon: {
       color: colors.fillColorNeutral100Inverted,
       fontSize: 14,
     },
+    spinner: {
+      width: 14,
+      height: 14,
+    },
     pressed: {
       transform: [{ scale: 0.95 }],
     },

package/src/components/conversation/reply_shadow_message.tsx

@@ -28,7 +28,7 @@ import {
 import { Avatar, Icon, IconProps, Image, Text } from '../display'
 import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 
-interface ReplyShadowMessageProps extends MessageResource {
+interface ReplyShadowMessageProps {
   messageId: string
   conversation_id: number
   inReplyScreen?: boolean
@@ -86,7 +86,9 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
   }
 
   const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
-  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountText}`
+  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${
+    messageText || ''
+  } ${timestamp} ${replyCountText}`
 
   return (
     <Pressable