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

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.

Type
(queryMessageLimit?: number) => Promise<void>

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

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:

Field	Type	Optional	Description
updateChannelUiUnreadState	boolean	yes	Signal, whether the channelUnreadUiState should be updated. The local state update is prevented when the Channel component is mounted. This is in order to keep the UI indicating the original unread state, when the user opens a channel. If the value for updateChannelUiUnreadState is not provided, the state is updated.

Type
(options?: MarkReadWrapperOptions) => void

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