Input Submit Handler

In this example, we demonstrate how to provide custom logic and override the MessageInput component’s default submit handler function. Our custom handler function will bold any message text.

overrideSubmitHandler Prop

The MessageInput component accepts an overrideSubmitHandler prop, which allows you to add custom logic to the conclusion of the underlying textarea element’s handleSubmit function.

You do not have to implement your custom submit handler, if the only thing you need is to pass custom message data to the underlying API call. In that case you can use the handleSubmit function from the MessageInputContext. The handleSubmit function allows you to pass custom message data through its second parameter customMessageData. This applies to sending a new message as well as updating an existing one. In order for this to work, you will have to implement custom message input components and pass them to Channel props EditMessageInput or Input respectively.

The overrideSubmitHandler function receives three arguments, the message to be sent, the cid (channel type prepended to channel id) for the currently active channel and optionally custom message data. The message object (the first argument) is of the following type:

type MessageToSend = {
  attachments?: MessageAttachments;
  error?: ErrorFromResponse<APIErrorResponse>;
  errorStatusCode?: number;
  id?: string;
  mentioned_users?: UserResponse[];
  parent?: StreamMessage;
  parent_id?: string;
  status?: string;
  text?: string;
};

Call the sendMessage function from the ChannelActionContext within your custom function to ensure a message is sent to the active channel.

Custom Function

For this example, we will take the input text entered by the user and wrap it in two asterisks to render bold markdown. Once we’ve added the markdown characters, we call the sendMessage function with the updated message object.

const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
  const boldMessage = {
    ...message,
    text: `**${message.text}**`,
  };

  sendMessage(boldMessage);
};

Implementation

Now that we have our custom function, we can add the overrideSubmitHandler prop to the MessageInput component and begin sending bold text to our MessageList.

Since sendMessage is drawn from the ChannelActionContext, we must create an inner component that is a child of Channel and call the useChannelActionContext custom hook.

The Code

const ChannelInner: React.FC = () => {
  const { sendMessage } = useChannelActionContext();

  const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
    const boldMessage = {
      ...message,
      text: `**${message.text}**`,
    };

    sendMessage(boldMessage);
  };

  return (
    <>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput overrideSubmitHandler={overrideSubmitHandler} />
      </Window>
      <Thread />
    </>
  );
};

const App = () => (
  <Chat client={chatClient}>
    <ChannelList />
    <Channel>
      <ChannelInner />
    </Channel>
  </Chat>
);

The Result

Adding custom message data

If you would like to store custom data on your message objects, you can pass additional parameters to the sendMessage function you retrieve from ChannelActionContext.

Now, the overrideSubmitHandler implementation may change as follows:

import React from 'react';
import {
  ChannelHeader,
  MessageList,
  MessageInput,
  Window,
  MessageToSend,
  useChannelActionContext,
} from 'stream-chat-react';

const ChannelInner = () => {
  const { sendMessage } = useChannelActionContext();

  const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
    sendMessage(message, { important: true });
  };

  return (
    <Window>
      <ChannelHeader />
      <MessageList />
      <MessageInput focus overrideSubmitHandler={overrideSubmitHandler} />
    </Window>
  );
};

In your browser’s Developer tools Network tab you can now observe, that the message payload includes the custom field:

Attachment Previews in Message Input

Storing message drafts