Message Input UI

Message input is used for composing and editing messages. In this sense, it’s a primary component that users interact with in a chat, so it’s important to get it right.

Message input is a bit more complex than it might seem at first glance. Not just a text box with a “send” button, it has a lot of hidden features:

Updating the typing status
Uploading and previewing attachments
Displaying link previews
Auto-completing mentions, commands, emoji…

We can compose our message input UI from the pre-built components:

import {
  AttachmentPreviewList,
  LinkPreviewList,
  QuotedMessagePreview,
  SimpleAttachmentSelector,
  useComponentContext,
  useMessageInputContext,
} from "stream-chat-react";

const SendButtonWithCooldown = () => {
  const { handleSubmit, cooldownRemaining, setCooldownRemaining } =
    useMessageInputContext();

  return cooldownRemaining ? (
    <CooldownTimer
      cooldownInterval={cooldownRemaining}
      setCooldownRemaining={setCooldownRemaining}
    />
  ) : (
    <SendButton sendMessage={handleSubmit} />
  );
};

const CustomMessageInput = () => (
  <div className="message-input">
    <div className={"left-container"}>
      <SimpleAttachmentSelector />
    </div>
    <div className={"central-container"}>
      <QuotedMessagePreview />
      <LinkPreviewList />
      <AttachmentPreviewList />
      <TextareaComposer />
    </div>
    <div className={"right-container"}>
      <SendButtonWithCooldown />
    </div>
  </div>
);

Note that you should not render your custom message input directly, but instead pass it as a prop to either Channel or MessageInput component. That way, you can be sure that your input is wrapped with the necessary context providers, most importantly the MessageInputContext.

import {
  Chat,
  Channel,
  ChannelHeader,
  ChannelList,
  MessageList,
  Thread,
  Window,
  MessageInput,
} from "stream-chat-react";
import { CustomMessageInput } from "./CustomMessageInput";

export const App = () => (
  <Chat client={chatClient}>
    <ChannelList filters={filters} sort={sort} options={options} />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput Input={CustomMessageInput} />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

System Message

Link Previews in Message Input