@planningcenter/chat-react-native 3.35.0-rc.0 → 3.35.0-rc.2

package/build/utils/conversation_messages.js

@@ -0,0 +1,22 @@
+export const anchoredSeedPageParams = (anchor) => [
+    { where: { id_gte: anchor }, order: 'asc' },
+    { where: { id_lt: anchor }, order: 'desc' },
+];
+export const olderPageParam = (page) => {
+    const idLt = page.meta?.next?.idLt;
+    if (!idLt)
+        return undefined;
+    return { where: { id_lt: idLt }, order: 'desc' };
+};
+export const newerPageParam = (page) => {
+    const idGt = page.meta?.next?.idGt;
+    if (!idGt)
+        return undefined;
+    return { where: { id_gt: idGt }, order: 'asc' };
+};
+export const sortAndFilterMessages = (pages) => pages
+    .flatMap(page => page.data)
+    .filter(message => (!message.deletedAt || message.replyRootId) &&
+    (message.attachments?.length || message.text?.length))
+    .sort((a, b) => -a.id.localeCompare(b.id));
+//# sourceMappingURL=conversation_messages.js.map

package/build/utils/conversation_messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_messages.js","sourceRoot":"","sources":["../../src/utils/conversation_messages.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,MAAc,EAAuB,EAAE,CAAC;IAC7E,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;CAC5C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAoC,EACL,EAAE;IACjC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAA;IAClC,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,CAAA;IAC3B,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA;AAClD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAoC,EACL,EAAE;IACjC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAA;IAClC,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,CAAA;IAC3B,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;AACjD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAuC,EAAqB,EAAE,CAClG,KAAK;KACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;KAC1B,MAAM,CACL,OAAO,CAAC,EAAE,CACR,CAAC,CAAC,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,WAAW,CAAC;IAC3C,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,IAAI,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CACxD;KACA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA","sourcesContent":["import { ApiCollection, MessageResource } from '../types'\nimport { RequestData } from './client'\n\nexport type MessagesPageParam = Partial<RequestData> & {\n  order?: 'asc' | 'desc'\n}\n\nexport const anchoredSeedPageParams = (anchor: string): MessagesPageParam[] => [\n  { where: { id_gte: anchor }, order: 'asc' },\n  { where: { id_lt: anchor }, order: 'desc' },\n]\n\nexport const olderPageParam = (\n  page: ApiCollection<MessageResource>\n): MessagesPageParam | undefined => {\n  const idLt = page.meta?.next?.idLt\n  if (!idLt) return undefined\n  return { where: { id_lt: idLt }, order: 'desc' }\n}\n\nexport const newerPageParam = (\n  page: ApiCollection<MessageResource>\n): MessagesPageParam | undefined => {\n  const idGt = page.meta?.next?.idGt\n  if (!idGt) return undefined\n  return { where: { id_gt: idGt }, order: 'asc' }\n}\n\nexport const sortAndFilterMessages = (pages: ApiCollection<MessageResource>[]): MessageResource[] =>\n  pages\n    .flatMap(page => page.data)\n    .filter(\n      message =>\n        (!message.deletedAt || message.replyRootId) &&\n        (message.attachments?.length || message.text?.length)\n    )\n    .sort((a, b) => -a.id.localeCompare(b.id))\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.35.0-rc.0",
+  "version": "3.35.0-rc.2",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -65,5 +65,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "dd9252ef05d2542745a31cf10b45083a9a365834"
+  "gitHead": "eecec62a4683e528bb8e2f275d19fb9915544679"
 }

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

@@ -0,0 +1,109 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-hooks'
+import React, { Suspense } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ConversationContextProvider } from '../../contexts/conversation_context'
+import * as useApiClientModule from '../../hooks/use_api_client'
+import { useConversationMessages } from '../../hooks/use_conversation_messages'
+import { ApiCollection, MessageResource } from '../../types'
+
+const mockMessage = (id: string): MessageResource =>
+  ({
+    id,
+    type: 'Message',
+    text: `msg ${id}`,
+    attachments: [],
+    deletedAt: null,
+    replyRootId: null,
+  }) as MessageResource
+
+const apiResponse = (data: MessageResource[]): ApiCollection<MessageResource> => ({
+  data,
+  links: {},
+  meta: { count: data.length, totalCount: data.length, next: {} },
+})
+
+const createWrapper = (initialMessageId: string | null) => {
+  const queryClient = buildTestQueryClient()
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={null}>
+        <ConversationContextProvider
+          conversationId={123}
+          currentPageReplyRootId={null}
+          initialMessageId={initialMessageId}
+          initialMessageIdIsAnchor={!!initialMessageId}
+        >
+          {children}
+        </ConversationContextProvider>
+      </Suspense>
+    </QueryClientProvider>
+  )
+}
+
+const flushPromises = async () => {
+  await act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+const mockApiClient = (get: jest.Mock) => {
+  jest.spyOn(useApiClientModule, 'useApiClient').mockReturnValue({
+    chat: { get },
+  } as unknown as ReturnType<typeof useApiClientModule.useApiClient>)
+}
+
+describe('useConversationMessages', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('fires two parallel seed requests with id_gte/asc and id_lt/desc when anchored', async () => {
+    const get = jest.fn(({ data }: { data: { where?: Record<string, string> } }) => {
+      if (data.where?.id_gte === '01B') {
+        return Promise.resolve(apiResponse([mockMessage('01C'), mockMessage('01B')]))
+      }
+      if (data.where?.id_lt === '01B') {
+        return Promise.resolve(apiResponse([mockMessage('01A')]))
+      }
+      return Promise.resolve(apiResponse([]))
+    })
+    mockApiClient(get)
+
+    renderHook(() => useConversationMessages({ conversation_id: 123 }), {
+      wrapper: createWrapper('01B'),
+    })
+    await flushPromises()
+
+    expect(get).toHaveBeenCalledTimes(2)
+    const requested = get.mock.calls.map(
+      ([req]: [{ data: { where?: Record<string, string>; order?: string } }]) => ({
+        where: req.data.where,
+        order: req.data.order,
+      })
+    )
+    expect(requested).toEqual(
+      expect.arrayContaining([
+        { where: { id_gte: '01B' }, order: 'asc' },
+        { where: { id_lt: '01B' }, order: 'desc' },
+      ])
+    )
+  })
+
+  it('fires one fetch with no cursor when not anchored', async () => {
+    const get = jest.fn(() => Promise.resolve(apiResponse([mockMessage('01A')])))
+    mockApiClient(get)
+
+    renderHook(() => useConversationMessages({ conversation_id: 123 }), {
+      wrapper: createWrapper(null),
+    })
+    await flushPromises()
+
+    expect(get).toHaveBeenCalledTimes(1)
+    expect(get.mock.calls[0][0].data.where).toBeUndefined()
+  })
+})

package/src/__tests__/jest.ts

@@ -2,6 +2,10 @@ import { jestTransformPackages } from '../jest'
 
 describe('jestTransformPackages', () => {
   it('exports an array of package patterns', () => {
-    expect(jestTransformPackages).toEqual(['@planningcenter/chat-react-native', '@fortawesome'])
+    expect(jestTransformPackages).toEqual([
+      '@planningcenter/chat-react-native',
+      '@fortawesome',
+      'rn-emoji-keyboard',
+    ])
   })
 })

package/src/contexts/conversation_context.tsx

@@ -1,31 +1,57 @@
-import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 
 interface ConversationContextValue {
   conversationId: number
   currentPageReplyRootId: string | null
+  initialMessageId: string | null
+  setInitialMessageId: (id: string | null) => void
+  initialMessageIdIsAnchor: boolean
 }
 
 interface ConversationContextProviderProps extends PropsWithChildren {
   conversationId: number
   currentPageReplyRootId: string | null
+  initialMessageId?: string | null
+  initialMessageIdIsAnchor?: boolean
 }
 
 const ConversationContext = createContext<ConversationContextValue>({
   conversationId: 0,
   currentPageReplyRootId: null,
+  initialMessageId: null,
+  setInitialMessageId: () => {},
+  initialMessageIdIsAnchor: false,
 })
 
 export const ConversationContextProvider = ({
   children,
   conversationId,
   currentPageReplyRootId,
+  initialMessageId: initialMessageIdProp = null,
+  initialMessageIdIsAnchor = false,
 }: ConversationContextProviderProps) => {
+  const [initialMessageId, setInitialMessageId] = useState(initialMessageIdProp)
+
+  useEffect(() => {
+    setInitialMessageId(initialMessageIdProp)
+  }, [initialMessageIdProp])
+
   const value = useMemo(
     () => ({
       conversationId,
       currentPageReplyRootId,
+      initialMessageId,
+      setInitialMessageId,
+      initialMessageIdIsAnchor,
     }),
-    [conversationId, currentPageReplyRootId]
+    [conversationId, currentPageReplyRootId, initialMessageId, initialMessageIdIsAnchor]
   )
 
   return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>

package/src/hooks/use_conversation_messages.ts

@@ -1,28 +1,112 @@
+import {
+  AnyUseSuspenseInfiniteQueryOptions,
+  InfiniteData,
+  useSuspenseInfiniteQuery,
+  useSuspenseQueries,
+} from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { MessageResource } from '../types'
+import { useConversationContext } from '../contexts/conversation_context'
+import { ApiCollection, MessageResource } from '../types'
+import {
+  anchoredSeedPageParams,
+  MessagesPageParam,
+  newerPageParam,
+  olderPageParam,
+  sortAndFilterMessages,
+} from '../utils/conversation_messages'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
-import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
+import { useApiClient } from './use_api_client'
+import { throwResponseError } from './use_suspense_api'
+
+type Args = { conversation_id: number; reply_root_id?: string | null }
+
+export type ConversationMessagesOptions = Omit<
+  AnyUseSuspenseInfiniteQueryOptions,
+  | 'getNextPageParam'
+  | 'getPreviousPageParam'
+  | 'initialData'
+  | 'initialPageParam'
+  | 'queryFn'
+  | 'queryKey'
+>
 
 export const useConversationMessages = (
-  { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
-  opts?: SuspensePaginatorOptions
+  { conversation_id, reply_root_id }: Args,
+  opts?: ConversationMessagesOptions
 ) => {
-  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
-    getMessagesRequestArgs({ conversation_id, reply_root_id }),
-    opts
-  )
+  const apiClient = useApiClient()
+  const { initialMessageId } = useConversationContext()
+  const anchored = !reply_root_id && !!initialMessageId
+
+  const requestArgs = getMessagesRequestArgs({ conversation_id, reply_root_id })
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
-  const messages = useMemo(
-    () =>
-      data
-        .filter(
-          message =>
-            (!message.deletedAt || message.replyRootId) &&
-            (message.attachments?.length || message.text?.length)
-        )
-        .sort((a, b) => -a.id.localeCompare(b.id)),
-    [data]
-  )
-
-  return { messages, refetch, isRefetching, fetchNextPage, queryKey }
+
+  const fetchPage = (pageParam: MessagesPageParam) => {
+    const data = {
+      ...requestArgs.data,
+      ...(pageParam.where ? { where: pageParam.where } : {}),
+      ...(pageParam.order ? { order: pageParam.order } : {}),
+    }
+    return apiClient.chat
+      .get<ApiCollection<MessageResource>>({ url: requestArgs.url, data })
+      .catch(throwResponseError)
+  }
+
+  const seedPageParams = anchored ? anchoredSeedPageParams(initialMessageId) : []
+  const seedQueries = useSuspenseQueries({
+    queries: seedPageParams.map((pageParam, index) => ({
+      queryKey: [...queryKey, 'seed', index],
+      queryFn: () => fetchPage(pageParam),
+      staleTime: Infinity,
+      gcTime: 0,
+    })),
+  })
+
+  const initialData: InfiniteData<ApiCollection<MessageResource>, MessagesPageParam> | undefined =
+    anchored
+      ? {
+          pages: seedQueries.map(q => q.data),
+          pageParams: seedPageParams,
+        }
+      : undefined
+
+  const initialPageParam: MessagesPageParam = anchored ? seedPageParams[0] : {}
+
+  const {
+    data,
+    refetch,
+    isRefetching,
+    fetchNextPage,
+    hasNextPage,
+    fetchPreviousPage,
+    hasPreviousPage,
+  } = useSuspenseInfiniteQuery<
+    ApiCollection<MessageResource>,
+    Response,
+    InfiniteData<ApiCollection<MessageResource>, MessagesPageParam>,
+    typeof queryKey,
+    MessagesPageParam
+  >({
+    queryKey,
+    queryFn: ({ pageParam }) => fetchPage(pageParam),
+    initialPageParam,
+    initialData,
+    getNextPageParam: olderPageParam,
+    getPreviousPageParam: anchored ? newerPageParam : () => undefined,
+    ...(opts || {}),
+    ...(anchored ? { staleTime: Infinity, refetchOnMount: false } : {}),
+  })
+
+  const messages = useMemo(() => sortAndFilterMessages(data.pages), [data.pages])
+
+  return {
+    messages,
+    refetch,
+    isRefetching,
+    fetchOlderMessages: fetchNextPage,
+    hasMoreOlderMessages: hasNextPage,
+    fetchNewerMessages: fetchPreviousPage,
+    hasMoreNewerMessages: hasPreviousPage,
+    queryKey,
+  }
 }

package/src/hooks/use_features.ts

@@ -38,6 +38,7 @@ export const availableFeatures = {
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
   granular_notifications_ui: 'ROLLOUT_granular_notification_preferences_ui',
   custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
+  jump_to_unread: 'ROLLOUT_jump_to_unread',
 }
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/hooks/use_suspense_api.ts

@@ -90,7 +90,7 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data, totalCount }
 }
 
-const throwResponseError = (error: unknown) => {
+export const throwResponseError = (error: unknown) => {
   if (error instanceof Response) {
     throw new ResponseError(error as FailedResponse)
   }

package/src/jest.ts

@@ -14,4 +14,8 @@
  *     transformIgnorePatterns: [`node_modules/(?!${ignorePatterns})`],
  *   }
  */
-export const jestTransformPackages = ['@planningcenter/chat-react-native', '@fortawesome']
+export const jestTransformPackages = [
+  '@planningcenter/chat-react-native',
+  '@fortawesome',
+  'rn-emoji-keyboard',
+]

package/src/screens/conversation_screen.tsx

@@ -31,6 +31,7 @@ import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
+import { useFeatures } from '../hooks/use_features'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   normalizeAnalyticsMetadata,
@@ -50,6 +51,7 @@ export type ConversationRouteProps = {
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
+  message_id?: string
   title?: string
   subtitle?: string
   badge?: ConversationBadgeResource
@@ -60,19 +62,27 @@ export type ConversationRouteProps = {
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
-  const { conversation_id, reply_root_id } = route.params
+  const { conversation_id, message_id, reply_root_id } = route.params
 
   const { data: conversation } = useConversation({ conversation_id })
+  const { featureEnabled } = useFeatures()
 
   usePublishProductAnalyticsEvent('chat.mobile.conversations.show.opened', {
     reply_root_id,
     ...normalizeAnalyticsMetadata(conversation),
   })
 
+  const lastReadMessageSortKey = conversation.conversationMembership?.lastReadMessageSortKey ?? null
+  const jumpToUnreadAnchor = featureEnabled('jump_to_unread') ? lastReadMessageSortKey : null
+  const initialMessageId = message_id ?? jumpToUnreadAnchor
+  const initialMessageIdIsAnchor = !!initialMessageId && !message_id
+
   return (
     <ConversationContextProvider
       conversationId={conversation_id}
       currentPageReplyRootId={reply_root_id ?? null}
+      initialMessageId={initialMessageId}
+      initialMessageIdIsAnchor={initialMessageIdIsAnchor}
     >
       <ConversationScreenContent route={route} />
     </ConversationContextProvider>
@@ -85,7 +95,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
     route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
+  const { messages, refetch, isRefetching, fetchOlderMessages } = useConversationMessages({
     conversation_id,
     reply_root_id,
   })
@@ -204,7 +214,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
                 />
               )
             }}
-            onEndReached={() => fetchNextPage()}
+            onEndReached={() => fetchOlderMessages()}
             ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}

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

@@ -0,0 +1,105 @@
+import { ApiCollection, MessageResource } from '../../types'
+import {
+  anchoredSeedPageParams,
+  newerPageParam,
+  olderPageParam,
+  sortAndFilterMessages,
+} from '../conversation_messages'
+
+const message = (id: string, overrides: Partial<MessageResource> = {}): MessageResource =>
+  ({
+    id,
+    type: 'Message',
+    text: `msg ${id}`,
+    attachments: [],
+    deletedAt: null,
+    replyRootId: null,
+    ...overrides,
+  }) as MessageResource
+
+const page = (
+  data: MessageResource[],
+  next?: { idLt?: string; idGt?: string }
+): ApiCollection<MessageResource> => ({
+  data,
+  links: {},
+  meta: { count: data.length, totalCount: data.length, next },
+})
+
+describe('anchoredSeedPageParams', () => {
+  it('returns one ascending after-page and one descending before-page', () => {
+    expect(anchoredSeedPageParams('01ABC')).toEqual([
+      { where: { id_gte: '01ABC' }, order: 'asc' },
+      { where: { id_lt: '01ABC' }, order: 'desc' },
+    ])
+  })
+})
+
+describe('olderPageParam', () => {
+  it('returns id_lt cursor when meta.next.idLt is present', () => {
+    expect(olderPageParam(page([], { idLt: '01XYZ' }))).toEqual({
+      where: { id_lt: '01XYZ' },
+      order: 'desc',
+    })
+  })
+
+  it('returns undefined when meta.next.idLt is missing', () => {
+    expect(olderPageParam(page([], {}))).toBeUndefined()
+    expect(olderPageParam(page([], { idGt: '01XYZ' }))).toBeUndefined()
+  })
+})
+
+describe('newerPageParam', () => {
+  it('returns id_gt cursor when meta.next.idGt is present', () => {
+    expect(newerPageParam(page([], { idGt: '01XYZ' }))).toEqual({
+      where: { id_gt: '01XYZ' },
+      order: 'asc',
+    })
+  })
+
+  it('returns undefined when meta.next.idGt is missing', () => {
+    expect(newerPageParam(page([], {}))).toBeUndefined()
+    expect(newerPageParam(page([], { idLt: '01XYZ' }))).toBeUndefined()
+  })
+})
+
+describe('sortAndFilterMessages', () => {
+  it('flattens pages and sorts descending by id (newest first)', () => {
+    const pages = [page([message('01B'), message('01A')]), page([message('01D'), message('01C')])]
+
+    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01D', '01C', '01B', '01A'])
+  })
+
+  it('drops empty messages (no text, no attachments)', () => {
+    const pages = [page([message('01A'), message('01B', { text: '' })])]
+
+    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01A'])
+  })
+
+  it('drops deleted messages outside reply threads', () => {
+    const pages = [page([message('01A'), message('01B', { deletedAt: '2026-01-01T00:00:00Z' })])]
+
+    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01A'])
+  })
+
+  it('keeps deleted reply-thread messages so threads do not break', () => {
+    const pages = [
+      page([
+        message('01A'),
+        message('01B', { deletedAt: '2026-01-01T00:00:00Z', replyRootId: '01A' }),
+      ]),
+    ]
+
+    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01B', '01A'])
+  })
+
+  it('keeps messages with attachments even when text is empty', () => {
+    const pages = [
+      page([
+        message('01A', { text: '', attachments: [{ id: '1' }] as MessageResource['attachments'] }),
+      ]),
+    ]
+
+    expect(sortAndFilterMessages(pages).map(m => m.id)).toEqual(['01A'])
+  })
+})

package/src/utils/conversation_messages.ts

@@ -0,0 +1,37 @@
+import { ApiCollection, MessageResource } from '../types'
+import { RequestData } from './client'
+
+export type MessagesPageParam = Partial<RequestData> & {
+  order?: 'asc' | 'desc'
+}
+
+export const anchoredSeedPageParams = (anchor: string): MessagesPageParam[] => [
+  { where: { id_gte: anchor }, order: 'asc' },
+  { where: { id_lt: anchor }, order: 'desc' },
+]
+
+export const olderPageParam = (
+  page: ApiCollection<MessageResource>
+): MessagesPageParam | undefined => {
+  const idLt = page.meta?.next?.idLt
+  if (!idLt) return undefined
+  return { where: { id_lt: idLt }, order: 'desc' }
+}
+
+export const newerPageParam = (
+  page: ApiCollection<MessageResource>
+): MessagesPageParam | undefined => {
+  const idGt = page.meta?.next?.idGt
+  if (!idGt) return undefined
+  return { where: { id_gt: idGt }, order: 'asc' }
+}
+
+export const sortAndFilterMessages = (pages: ApiCollection<MessageResource>[]): MessageResource[] =>
+  pages
+    .flatMap(page => page.data)
+    .filter(
+      message =>
+        (!message.deletedAt || message.replyRootId) &&
+        (message.attachments?.length || message.text?.length)
+    )
+    .sort((a, b) => -a.id.localeCompare(b.id))

package/src/__tests__/hooks/use_conversation_messages.ts

@@ -1,55 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import { useConversationMessages } from '../../hooks/use_conversation_messages'
-import * as useSuspenseApi from '../../hooks/use_suspense_api'
-
-const mockMessages = [
-  {
-    id: '1',
-    text: 'Hello',
-    deletedAt: null,
-    attachments: [],
-  },
-  {
-    id: '2',
-    text: '',
-    deletedAt: null,
-    attachments: [{ id: 'a1' }],
-  },
-  {
-    id: '3',
-    text: '',
-    deletedAt: '2024-01-01',
-    attachments: [],
-  },
-  {
-    id: '4',
-    text: '',
-    deletedAt: null,
-    attachments: [],
-  },
-]
-
-describe('useConversationMessages', () => {
-  beforeEach(() => {
-    jest.spyOn(useSuspenseApi, 'useSuspensePaginator').mockReturnValue({
-      data: mockMessages,
-      refetch: jest.fn(),
-      isRefetching: false,
-      fetchNextPage: jest.fn(),
-    } as any)
-  })
-
-  afterEach(() => {
-    jest.restoreAllMocks()
-  })
-
-  it('filters out empty or deleted messages and sorts by id descending', () => {
-    const { result } = renderHook(() => useConversationMessages({ conversation_id: 123 }))
-    expect(result.current.messages).toEqual([
-      mockMessages[1], // id: '2'
-      mockMessages[0], // id: '1'
-    ])
-    // id: '3' is deleted and filtered out
-    // id: '4' is filtered out because it has no text or attachments
-  })
-})