ChannelActionContext

ChannelActionContext is provided by Channel and exposes action handlers for the active channel. Access it with useChannelActionContext.

Best Practices

• Use context actions instead of calling client APIs directly to keep UI state in sync.
• Wrap action calls in user-initiated events to avoid accidental side effects.
• Prefer jumpToFirstUnreadMessage/jumpToLatestMessage for navigation to keep list state consistent.
• Treat markRead as the single source of read-state updates to avoid double-counting.
• Debounce or throttle custom action triggers to prevent rapid re-queries.

Basic Usage

Pull values from ChannelActionContext with our custom hook:

const { closeThread, loadMoreThread } = useChannelActionContext();

Values

addNotification

Adds a temporary notification to MessageList (removed after ~5 seconds).

closeThread

The function to close the currently open Thread.

deleteMessage

The function to trigger the delete message request.

dispatch

The dispatch function for the ChannelStateReducer.

editMessage

A function that takes a message to be edited, returns a Promise.

jumpToFirstUnreadMessage

Jumps to the first unread message. If not found locally, it can query around that message using queryMessageLimit. Falls back to the last read message when available.

jumpToLatestMessage

Restores the list to the most recent messages after jumpToMessage.

jumpToMessage

jumpToMessage scrolls to the message with the given messageId. Here's an example of a button, which, when clicked, searches for a given message and navigates to it:

const JumpToMessage = () => {
  const { jumpToMessage } = useChannelActionContext();

  return (
    <button
      data-testid="jump-to-message"
      onClick={async () => {
        // the filtering based on channelId is just for example purposes.
        const results = await chatClient.search(
          {
            id: { $eq: channelId },
          },
          "Message 29",
          { limit: 1, offset: 0 },
        );

        jumpToMessage(results.results[0].message.id);
      }}
    >
      Jump to message 29
    </button>
  );
};

// further down the line, add the JumpToMessage to the component tree as a child of `Channel`
// ...
return (
  <Channel channel={channel}>
    <JumpToMessage />
    <Window>
      <MessageList />
    </Window>
  </Channel>
);

loadMore

Loads the next page of messages (pagination).

loadMoreNewer

Loads newer messages (pagination).

loadMoreThread

Loads the next page of thread messages (pagination).

markRead

Throttled function that marks the channel read and updates local state. Configure behavior via the options parameter (MarkReadWrapperOptions):

onMentionsClick

Runs when an @mention is clicked; receives the DOM event and mentioned users.

onMentionsHover

Runs when an @mention is hovered; receives the DOM event and mentioned users.

openThread

Opens a thread for the parent message (optionally with the click event).

removeMessage

The function to remove a message from MessageList, handled by the Channel component. Takes a message object.

retrySendMessage

The function to resend a message, handled by the Channel component.

sendMessage

The function to send a message on Channel. Takes a message object with the basic message information as the first argument, and custom data as the second argument.

updateMessage

The function to update a message on Channel, takes a message object.