ChannelActionContext

The ChannelActionContext is one of the context providers exposed in the Channel component and is consumable by all of the Channel children components. The context provides all of the action properties and handlers for a channel, and you can access these by calling the useChannelActionContext custom hook.

Basic Usage

Pull values from context with our custom hook:

const { closeThread, loadMoreThread } = useChannelActionContext();

Values

addNotification

Function to add a temporary notification to MessageList, and it will be removed after 5 seconds.

closeThread

The function to close the currently open Thread.

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 in the channel, if such message exists. If the message is not found, jumps to last read message. Does not jump if the last read message is not defined. The parameter queryMessageLimit specifies the message page size around the first unread message in case it is not found in the local app state and has to be retrieved through and API call.

jumpToLatestMessage

Used in conjunction with jumpToMessage. Restores the position of the message list back to the most recent messages.

jumpToMessage

When called, jumpToMessage causes the current message list to jump to the message with the id specified in the messageId parameter. 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

The function to load next page/batch of messages (used for pagination).

loadMoreNewer

The function to load next page/batch of messages (used for pagination).

loadMoreThread

The function to load next page/batch of messages in a currently active/open Thread (used for pagination).

markRead

Throttled function that executes the API request and updates the local channel read state for own user. The behavior can be configured via the single options parameter of type MarkReadWrapperOptions. The options parameter has the following structure:

onMentionsClick

Custom action handler function to execute when @mention is clicked, takes a DOM click event object and an array of mentioned users.

onMentionsHover

The function to execute when @mention is hovered in a message, takes a DOM click event object and an array of mentioned users.

openThread

The function to execute when replies count button is clicked, takes the parent message of the Thread to be opened and optionally a DOM 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.

setQuotedMessage

The function to send a QuotedMessage on a Channel, take a message object.

updateMessage

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