Skip to main content

​
Overview

A convenience hook that wraps useChatMessages and useSendMessage for a specific message thread. Returns the thread’s replies and a sendReply function that automatically sets parentMessageId.
Requires ChatProvider in the component tree.

​
Usage Example

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

function ThreadPanel({
  conversationId,
  messageId,
}: {
  conversationId: string;
  messageId: string;
}) {
  const { replies, loading, hasMore, loadMore, sendReply } = useMessageThread({
    conversationId,
    messageId,
  });
  const [text, setText] = useState("");

  const handleReply = async () => {
    if (!text.trim()) return;
    await sendReply({ content: text });
    setText("");
  };

  return (
    <div>
      {replies.map((reply) => (
        <div key={reply.id}>
          <strong>{reply.user?.name}</strong>: {reply.content}
        </div>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleReply}>Reply</button>
    </div>
  );
}

​
Props

​
conversationId
string
required
The ID of the conversation that contains the thread.
​
messageId
string
required
The ID of the parent message whose thread to load.

​
Returns

​
replies
ChatMessage[]
Thread replies in ascending order (oldest first). See ChatMessage.
​
loading
boolean
true while a fetch is in progress.
​
hasMore
boolean
true if there are more replies to load.
​
loadMore
() => Promise<void>
Fetches more replies (newer than the newest loaded). No-ops if loading is true or hasMore is false.
​
sendReply
(params: Omit<SendMessageParams, 'parentMessageId'>) => Promise<ChatMessage>
Sends a reply to this thread. Accepts the same parameters as useSendMessage except parentMessageId (set automatically). Returns the confirmed ChatMessage.

​
Notes