Skip to main content

​
Overview

Fetches messages for a conversation with cursor-based pagination. Can be used for the main message stream or for a specific thread (by passing parentId). Messages are stored in Redux and kept in sync by ChatProvider socket events.
Requires ChatProvider in the component tree.

​
Usage Example

import { useChatMessages } from "@replyke/react-js";

function MessageList({ conversationId }: { conversationId: string }) {
  const { messages, loading, hasMore, loadOlder } = useChatMessages({
    conversationId,
  });

  return (
    <div>
      {hasMore && (
        <button onClick={loadOlder} disabled={loading}>
          Load older messages
        </button>
      )}
      {messages.map((msg) => (
        <div key={msg.id}>
          <strong>{msg.user?.name ?? "Deleted user"}</strong>: {msg.content}
        </div>
      ))}
    </div>
  );
}

​
Props

​
conversationId
string
required
The ID of the conversation to load messages for.
​
parentId
string | null
When provided, loads thread replies for this parent message ID instead of the main stream. Replies are sorted ascending (oldest first); loadOlder fetches newer replies.
​
limit
number
Number of messages per page. Defaults to 50.
​
includeFiles
boolean
When true, the server populates the files field on each message. Omitted by default to keep payloads small.

​
Returns

​
messages
ChatMessage[]
The loaded messages in ascending order (oldest first). See ChatMessage.
​
loading
boolean
true while a fetch is in progress.
​
hasMore
boolean
true if there are more messages to load.
​
loadOlder
() => Promise<void>
For the main stream: fetches messages older than the oldest currently loaded. For threads: fetches replies newer than the newest currently loaded. No-ops if loading is true or hasMore is false.

​
Notes

  • New messages that arrive via the socket (message:created) are appended to the store automatically — no manual refetch needed.
  • For integration guidance, see Chat: Messages.