Stream Chat React SDK

The jumpToMessage(...) functionality (used for quoted-message jumps and other navigation) is designed to be render-driven to prevent visual glitches.

Key behaviors include:

• No Intermediate Scrolling: The list does not scroll the current (old) page before the target page is rendered.
• Direct Navigation: The list scrolls directly toward the target message.
• Directional Awareness: The animation uses the appropriate entry edge depending on whether the jump is to an older or newer page.

You can provide a custom UI for the Gallery component by passing a component to the GalleryUI prop. The custom component can then use the useGalleryContext hook to access navigation and state.

By default, the GalleryUI component handles:

• Rendering images via BaseImage or videos via a <video> element.
• Keyboard navigation (left/right arrow keys).
• A position indicator (e.g., "3 / 10").
• Loading and error states.

import { Gallery, GalleryUI } from './components/Gallery';

// Using the default UI
<Gallery items={items} GalleryUI={GalleryUI} />

The SDK provides a robust system for managing overlays:

• GlobalModal: The public surface for rendering top-level modals.
• DialogManagerProvider: A provider that manages dialog lifecycles. It includes a closeOnClickOutside prop to control whether clicking the backdrop closes the dialog.
• ContextMenu: Configurable via a dedicated transition configuration surface.
• WithComponents: The standard pattern for overriding modal components.

When a slash command is active in MessageInputFlat, the UI undergoes specific layout changes:

• The class str-chat__message-composer--command-active is applied.
• The attachment selector slot is hidden.
• AdditionalMessageComposerActions are collapsed.
• The audio-recording button in MessageComposerActions is hidden.

The library uses a provider/consumer pattern to separate business logic from UI rendering. For components with significant logic, you can swap out the UI layer without affecting the underlying functionality by using the WithComponents component and its overrides prop.

This allows you to pass a custom UI component (e.g., CustomMessageUI) to replace a standard component (e.g., MessageUI) within a specific part of the chat interface.

<Channel>
  <Window>
    <ChannelHeader />
    <WithComponents overrides={{ MessageUI: CustomMessageUI }}>
      <MessageList />
    </WithComponents>
    <MessageComposer />
  </Window>
  <Thread />
</Channel>

The ChannelHeader component does not manage sidebar visibility or include a built-in MenuIcon or sidebarCollapsed prop. Instead, the sidebar toggle is provided externally via the HeaderStartContent slot within the ComponentContext.

Applications should provide their own toggle implementation via WithComponents to control sidebar state, as the SDK does not own the sidebar's collapsed/expanded state.

Notifications can now include an optional tags?: string[] array in their model/options.

Panel Resolution Logic:

1. The system first prioritizes target:<panel> tags assigned internally by stream-chat-react.
2. If no matching target tags are found, it falls back to the origin.context.panel value for backward compatibility.

This allows for more granular control over where notifications appear by using specific tags.

Depending on your project structure, use one of the following patterns:

• New React App (Vite/CRA): Follow the standard Quick Start pattern by initializing the client at the top level of your application.
• Add Chat to Existing App: Integrate the <Chat> provider and client initialization into your existing component tree, ensuring the client is created only once.
• Custom Styling: Apply themes or custom CSS to override the default stream-chat-react/dist/css/v2/index.css styles.
• Custom Components: Replace default UI elements (like MessageList or MessageInput) with your own components by passing them as props or using the provided context.