MessageBounceContext

MessageBounceContext holds a message that moderation bounced, with the three ways out of it: edit it, send it anyway, or delete it. MessageBounceProvider creates it for the message in MessageContext. Bounced messages explains what the user sees.

The default MessageUI renders the provider for you: clicking a bounced message opens a modal with MessageBouncePrompt inside MessageBounceProvider.

Best practices

• Change the prompt with the MessageBouncePrompt override. It keeps the default modal and its provider.
• Render MessageBounceProvider yourself only in a custom message UI, and only for a message that isMessageBounced(message) accepts. For any other message it logs a warning.
• Inside the modal, close it after an action with useModalContext().close(), as the default prompt does.

Basic usage

MessageBouncePrompt takes children, which replace its title and description and keep its three buttons. This prompt keeps the default buttons and changes the text:

import type { MessageBouncePromptProps } from "stream-chat-react";
import { MessageBouncePrompt, WithComponents } from "stream-chat-react";

const GuidelinesBouncePrompt = (props: MessageBouncePromptProps) => (
  <MessageBouncePrompt {...props}>
    <p>This message breaks our community guidelines.</p>
  </MessageBouncePrompt>
);

const overrides = { MessageBouncePrompt: GuidelinesBouncePrompt };

export const App = () => (
  <WithComponents overrides={overrides}>
    {/* the rest of the app */}
  </WithComponents>
);

For a prompt with buttons of your own, read the handlers with useMessageBounceContext(). Replacing the bounce prompt has an example.

Usage in a custom message UI

A custom MessageUI gets no bounce modal. Check the message with isMessageBounced() and render MessageBounceProvider around your own controls. These sit under the message text:

import {
  isMessageBounced,
  MessageBounceProvider,
  MessageText,
  useMessageBounceContext,
  useMessageContext,
} from "stream-chat-react";

const BounceActions = () => {
  const { handleDelete, handleEdit, handleRetry } = useMessageBounceContext();

  return (
    <div className="bounce-actions">
      <button onClick={handleEdit} type="button">
        Edit
      </button>
      <button onClick={handleRetry} type="button">
        Send anyway
      </button>
      <button onClick={handleDelete} type="button">
        Delete
      </button>
    </div>
  );
};

export const CustomMessage = () => {
  const { message } = useMessageContext();

  return (
    <div className="custom-message">
      <MessageText />
      {isMessageBounced(message) && (
        <MessageBounceProvider>
          <BounceActions />
        </MessageBounceProvider>
      )}
    </div>
  );
};

isMessageBounced(message) is true for a message of type error whose moderation action is bounce.

Values

ReactEventHandler is React's event handler type. handleEdit calls preventDefault() on the event.

Hooks

• useMessageBounceContext() returns the value. It throws outside a MessageBounceProvider.
• useModalContext() returns close() for the modal the prompt is in, and a close() that does nothing outside a modal.