channel-action-context.mdx

id	sidebar_position	title
channel_action_context	3	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.

Type
function

closeThread

The function to close the currently open Thread.

Type
function

dispatch

The dispatch function for the ChannelStateReducer.

Type
ChannelStateReducerAction

editMessage

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

Type
function

jumpToLatestMessage

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

Type
() => Promise<void>

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>
);

Type
(messageId: string) => Promise<void>

loadMore

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

Type
function

loadMoreNewer

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

Type
(limit?: number) => Promise<number>

loadMoreThread

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

Type
function

onMentionsClick

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

Type
function

onMentionsHover

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

Type
function

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.

Type
function

removeMessage

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

Type
function

retrySendMessage

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

Type
function

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.

Type
function

setQuotedMessage

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

Type
function

updateMessage

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

Type
function