stream-chat-react 12.13.1 → 12.15.0

package/README.md

@@ -42,46 +42,35 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 
 ## Installation
 
-### Install with NPM
+### With NPM
 
-`npm install react react-dom stream-chat stream-chat-react`
+`npm install stream-chat stream-chat-react`
 
-### Install with Yarn
+### With Yarn
 
-`yarn add react react-dom stream-chat stream-chat-react`
+`yarn add stream-chat stream-chat-react`
 
-### Install via CDN
-
-```
-<script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat-react"></script>
-```
-
-## Example Apps
+## Example Applications
 
 We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://getstream.io/chat/demos/) on our website. Also, the code is [open source](https://github.com/GetStream/website-react-examples/).
 
-## Docs
+## Documentation
 
 We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
 
-The React components are created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/js/) on our website.
-
-##  TypeScript Support
+The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
 
-As of version `5.0.0`, the component library has been converted to TypeScript. Please read the [TypeScript guide](https://github.com/GetStream/stream-chat-react/wiki/Typescript-support) for details and implementation assistance.
+## Component Reusability
 
-##  Component Reusability
-
-For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `MessageTeam`, without affecting any logic in the app.
+For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
 
 ```jsx
-<Channel Message={MessageTeam}>
+<Channel>
   <Window>
     <ChannelHeader />
-    <MessageList />
+    <WithComponents overrides={{ Message: CustomMessageUI }}>
+      <MessageList />
+    </WithComponents>
     <MessageInput />
   </Window>
   <Thread />
@@ -90,11 +79,18 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
+
+```css title="index.css"
+@layer stream, stream-overrides;
 
-```js
-import 'stream-chat-react/dist/css/v2/index.css';
-import './App.css';
+@import 'stream-chat-react/css/v2/index.css' layer(stream);
+/* or */
+@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
+
+@layer stream-overrides {
+  /* your overrides */
+}
 ```
 
 ## Internationalization
@@ -106,6 +102,7 @@ Our library supports auto-translation for various user languages. Please read ou
 We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first. See our license file for more details.
 
 ## We are hiring!
+
 We recently closed a [$38 million Series B funding round](https://techcrunch.com/2021/03/04/stream-raises-38m-as-its-chat-and-activity-feed-apis-power-communications-for-1b-users/) and are actively growing.
 Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
 
@@ -113,10 +110,10 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 
 ## Acknowledgements
 
-### Lamejs
+### lamejs
 
 This project uses `lamejs` library under the LGPL license to convert the recorded audio to mp3 format.
 The library source code is dynamically imported and used only if audio recording is enabled.
 
 You can obtain the source code for `lamejs` from the [lamejs repository](https://github.com/gideonstele/lamejs) that is a fork of [the original JS library](https://github.com/zhuker/lamejs).
-You can find the source code for LAME at https://lame.sourceforge.net  and its license at: https://lame.sourceforge.net/license.txt
+You can find the source code for LAME at https://lame.sourceforge.net and its license at: https://lame.sourceforge.net/license.txt

package/dist/components/Channel/Channel.d.ts

@@ -6,7 +6,7 @@ import type { ChannelQueryOptions, EventAPIResponse, Message, MessageResponse, C
 import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];
@@ -29,7 +29,10 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
     doSendMessageRequest?: (channel: StreamChannel<StreamChatGenerics>, message: Message<StreamChatGenerics>, options?: SendMessageOptions) => ReturnType<StreamChannel<StreamChatGenerics>['sendMessage']> | void;
     /** Custom action handler to override the default `client.updateMessage` request function (advanced usage only) */
     doUpdateMessageRequest?: (cid: string, updatedMessage: UpdatedMessage<StreamChatGenerics>, options?: UpdateMessageOptions) => ReturnType<StreamChat<StreamChatGenerics>['updateMessage']>;
-    /** If true, chat users will be able to drag and drop file uploads to the entire channel window */
+    /**
+     * @deprecated Use `WithDragAndDropUpload` instead (wrap draggable-to elements with this component).
+     * @description If true, chat users will be able to drag and drop file uploads to the entire channel window
+     */
     dragAndDropWindow?: boolean;
     /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
     EmptyPlaceholder?: React.ReactElement;
@@ -63,7 +66,10 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
     onMentionsClick?: OnMentionAction<StreamChatGenerics>;
     /** Custom action handler function to run on hover of an @mention in a message */
     onMentionsHover?: OnMentionAction<StreamChatGenerics>;
-    /** If `dragAndDropWindow` prop is true, the props to pass to the MessageInput component (overrides props placed directly on MessageInput) */
+    /**
+     * @deprecated Use `WithDragAndDropUpload` instead (wrap draggable-to elements with this component).
+     * @description If `dragAndDropWindow` prop is `true`, the props to pass to the `MessageInput` component (overrides props placed directly on `MessageInput`)
+     */
     optionalMessageInputProps?: MessageInputProps<StreamChatGenerics, V>;
     /** You can turn on/off thumbnail generation for video attachments */
     shouldGenerateVideoThumbnail?: boolean;

package/dist/components/Channel/Channel.js

@@ -787,6 +787,7 @@ const ChannelInner = (props) => {
         LoadingIndicator: props.LoadingIndicator,
         Message: props.Message,
         MessageActions: props.MessageActions,
+        MessageBlocked: props.MessageBlocked,
         MessageBouncePrompt: props.MessageBouncePrompt,
         MessageDeleted: props.MessageDeleted,
         MessageListNotifications: props.MessageListNotifications,
@@ -838,6 +839,7 @@ const ChannelInner = (props) => {
         props.DateSeparator,
         props.EditMessageInput,
         props.EmojiPicker,
+        props.emojiSearchIndex,
         props.EmptyStateIndicator,
         props.FileUploadIcon,
         props.GiphyPreviewMessage,
@@ -847,6 +849,7 @@ const ChannelInner = (props) => {
         props.LoadingIndicator,
         props.Message,
         props.MessageActions,
+        props.MessageBlocked,
         props.MessageBouncePrompt,
         props.MessageDeleted,
         props.MessageListNotifications,
@@ -866,11 +869,14 @@ const ChannelInner = (props) => {
         props.QuotedMessage,
         props.QuotedMessagePreview,
         props.QuotedPoll,
+        props.reactionOptions,
         props.ReactionSelector,
         props.ReactionsList,
         props.ReactionsListModal,
         props.SendButton,
         props.StartRecordingAudioButton,
+        props.StopAIGenerationButton,
+        props.StreamedMessageText,
         props.ThreadHead,
         props.ThreadHeader,
         props.ThreadStart,
@@ -880,10 +886,6 @@ const ChannelInner = (props) => {
         props.UnreadMessagesNotification,
         props.UnreadMessagesSeparator,
         props.VirtualMessage,
-        props.StopAIGenerationButton,
-        props.StreamedMessageText,
-        props.emojiSearchIndex,
-        props.reactionOptions,
     ]);
     const typingContextValue = useCreateTypingContext({
         typing,

package/dist/components/Chat/hooks/useChat.js

@@ -24,11 +24,12 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
+        const version = "12.15.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.13.1-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/Message/MessageBlocked.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MessageBlocked: () => React.JSX.Element;

package/dist/components/Message/MessageBlocked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useUserRole } from './hooks/useUserRole';
+import { useTranslationContext } from '../../context/TranslationContext';
+import { useMessageContext } from '../../context';
+export const MessageBlocked = () => {
+    const { message } = useMessageContext();
+    const { t } = useTranslationContext('MessageBlocked');
+    const { isMyMessage } = useUserRole(message);
+    const messageClasses = clsx('str-chat__message str-chat__message-simple str-chat__message--blocked', message.type, {
+        'str-chat__message--me str-chat__message-simple--me': isMyMessage,
+        'str-chat__message--other': !isMyMessage,
+    });
+    return (React.createElement("div", { className: messageClasses, "data-testid": 'message-blocked-component', key: message.id },
+        React.createElement("div", { className: 'str-chat__message--blocked-inner' }, t('Message was blocked by moderation policies'))));
+};

package/dist/components/Message/MessageSimple.js

@@ -3,12 +3,13 @@ import clsx from 'clsx';
 import { MessageErrorIcon } from './icons';
 import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
+import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
 import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
 import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
 import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
 import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
-import { areMessageUIPropsEqual, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
+import { areMessageUIPropsEqual, isMessageBlocked, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
@@ -32,7 +33,7 @@ const MessageSimpleWithContext = (props) => {
     const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageOptions = DefaultMessageOptions, 
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead
-    MessageActions = MessageOptions, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
+    MessageActions = MessageOptions, MessageBlocked = DefaultMessageBlocked, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, StreamedMessageText = DefaultStreamedMessageText, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
@@ -42,6 +43,9 @@ const MessageSimpleWithContext = (props) => {
     if (message.deleted_at || message.type === 'deleted') {
         return React.createElement(MessageDeleted, { message: message });
     }
+    if (isMessageBlocked(message)) {
+        return React.createElement(MessageBlocked, null);
+    }
     const showMetadata = !groupedByUser || endOfGroup;
     const showReplyCountButton = !threadList && !!message.reply_count;
     const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;

package/dist/components/Message/utils.d.ts

@@ -77,4 +77,5 @@ export declare const mapToUserNameOrId: TooltipUsernameMapper;
 export declare const getReadByTooltipText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(users: UserResponse<StreamChatGenerics>[], t: TFunction, client: StreamChat<StreamChatGenerics>, tooltipUserNameMapper: TooltipUsernameMapper) => string;
 export declare const isOnlyEmojis: (text?: string) => boolean;
 export declare const isMessageBounced: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'type' | 'moderation' | 'moderation_details'>) => boolean;
+export declare const isMessageBlocked: (message: Pick<StreamMessage, 'type' | 'moderation' | 'moderation_details'>) => boolean;
 export declare const isMessageEdited: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: Pick<StreamMessage<StreamChatGenerics>, 'message_text_updated_at'>) => boolean;

package/dist/components/Message/utils.js

@@ -310,4 +310,7 @@ export const isOnlyEmojis = (text) => {
 export const isMessageBounced = (message) => message.type === 'error' &&
     (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
         message.moderation?.action === 'bounce');
+export const isMessageBlocked = (message) => message.type === 'error' &&
+    (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_REMOVE' ||
+        message.moderation?.action === 'remove');
 export const isMessageEdited = (message) => !!message.message_text_updated_at;

package/dist/components/MessageInput/MessageInput.js

@@ -8,6 +8,7 @@ import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useComponentContext, } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
+import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 const MessageInputProvider = (props) => {
     const cooldownTimerState = useCooldownTimer();
     const messageInputState = useMessageInputState(props);
@@ -18,6 +19,8 @@ const MessageInputProvider = (props) => {
         ...props,
         emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,
     });
+    // @ts-expect-error generics to be removed
+    useRegisterDropHandlers(messageInputContextValue);
     return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
 };
 const UnMemoizedMessageInput = (props) => {

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,6 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import clsx from 'clsx';
-import { useDropzone } from 'react-dropzone';
 import { AttachmentSelector as DefaultAttachmentSelector, SimpleAttachmentSelector, } from './AttachmentSelector';
 import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
@@ -14,15 +12,14 @@ import { RecordingAttachmentType } from '../MediaRecorder/classes';
 import { useChatContext } from '../../context/ChatContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { AIStates, useAIState } from '../AIStateIndicator';
+import { WithDragAndDropUpload } from './WithDragAndDropUpload';
 export const MessageInputFlat = () => {
-    const { t } = useTranslationContext('MessageInputFlat');
-    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, maxFilesLeft, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, uploadNewFiles, } = useMessageInputContext('MessageInputFlat');
+    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, } = useMessageInputContext('MessageInputFlat');
     const { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, } = useComponentContext('MessageInputFlat');
-    const { acceptedFiles = [], multipleUploads, quotedMessage, } = useChannelStateContext('MessageInputFlat');
+    const { quotedMessage } = useChannelStateContext('MessageInputFlat');
     const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
     const { channel } = useChatContext('MessageInputFlat');
     const { aiState } = useAIState(channel);
@@ -32,17 +29,6 @@ export const MessageInputFlat = () => {
         setShowRecordingPermissionDeniedNotification(false);
     }, []);
     const failedUploadsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
-    const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
-        mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
-        return mediaTypeMap;
-    }, {}), [acceptedFiles]);
-    const { getRootProps, isDragActive, isDragReject } = useDropzone({
-        accept,
-        disabled: !isUploadEnabled || maxFilesLeft === 0,
-        multiple: multipleUploads,
-        noClick: true,
-        onDrop: uploadNewFiles,
-    });
     useEffect(() => {
         const handleQuotedMessageUpdate = (e) => {
             if (e.message?.id !== quotedMessage?.id)
@@ -79,35 +65,29 @@ export const MessageInputFlat = () => {
         : StopAIGenerationButtonOverride;
     const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) &&
         !!StopAIGenerationButton;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ...getRootProps({ className: 'str-chat__message-input' }) },
-            recordingEnabled &&
-                recordingController.permissionState === 'denied' &&
-                showRecordingPermissionDeniedNotification && (React.createElement(RecordingPermissionDeniedNotification, { onClose: closePermissionDeniedNotification, permissionName: RecordingPermission.MIC })),
-            findAndEnqueueURLsToEnrich && (React.createElement(LinkPreviewList, { linkPreviews: Array.from(linkPreviews.values()) })),
-            isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
-                    'str-chat__dropzone-container--not-accepted': isDragReject,
-                }) },
-                !isDragReject && React.createElement("p", null, t('Drag your files here')),
-                isDragReject && React.createElement("p", null, t('Some of the files will not be accepted')))),
-            displayQuotedMessage && React.createElement(QuotedMessagePreviewHeader, null),
-            React.createElement("div", { className: 'str-chat__message-input-inner' },
-                React.createElement(AttachmentSelector, null),
-                React.createElement("div", { className: 'str-chat__message-textarea-container' },
-                    displayQuotedMessage && (React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage })),
-                    isUploadEnabled &&
-                        !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (React.createElement(AttachmentPreviewList, null)),
-                    React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
-                        React.createElement(ChatAutoComplete, null),
-                        EmojiPicker && React.createElement(EmojiPicker, null))),
-                shouldDisplayStopAIGeneration ? (React.createElement(StopAIGenerationButton, { onClick: stopGenerating })) : (!hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
-                    React.createElement(SendButton, { disabled: !numberOfUploads &&
-                            !text.length &&
-                            attachments.length - failedUploadsCount === 0, sendMessage: handleSubmit }),
-                    recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
-                            (!asyncMessagesMultiSendEnabled &&
-                                attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {
-                            recordingController.recorder?.start();
-                            setShowRecordingPermissionDeniedNotification(true);
-                        } })))))))))));
+    return (React.createElement(WithDragAndDropUpload, { className: 'str-chat__message-input', component: 'div' },
+        recordingEnabled &&
+            recordingController.permissionState === 'denied' &&
+            showRecordingPermissionDeniedNotification && (React.createElement(RecordingPermissionDeniedNotification, { onClose: closePermissionDeniedNotification, permissionName: RecordingPermission.MIC })),
+        findAndEnqueueURLsToEnrich && (React.createElement(LinkPreviewList, { linkPreviews: Array.from(linkPreviews.values()) })),
+        displayQuotedMessage && React.createElement(QuotedMessagePreviewHeader, null),
+        React.createElement("div", { className: 'str-chat__message-input-inner' },
+            React.createElement(AttachmentSelector, null),
+            React.createElement("div", { className: 'str-chat__message-textarea-container' },
+                displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
+                isUploadEnabled &&
+                    !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (React.createElement(AttachmentPreviewList, null)),
+                React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
+                    React.createElement(ChatAutoComplete, null),
+                    EmojiPicker && React.createElement(EmojiPicker, null))),
+            shouldDisplayStopAIGeneration ? (React.createElement(StopAIGenerationButton, { onClick: stopGenerating })) : (!hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
+                React.createElement(SendButton, { disabled: !numberOfUploads &&
+                        !text.length &&
+                        attachments.length - failedUploadsCount === 0, sendMessage: handleSubmit }),
+                recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
+                        (!asyncMessagesMultiSendEnabled &&
+                            attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {
+                        recordingController.recorder?.start();
+                        setShowRecordingPermissionDeniedNotification(true);
+                    } }))))))))));
 };

package/dist/components/MessageInput/WithDragAndDropUpload.d.ts

@@ -0,0 +1,37 @@
+import React, { CSSProperties, ElementType, PropsWithChildren } from 'react';
+import { MessageInputContextValue } from '../../context';
+export declare const useDragAndDropUploadContext: () => {
+    subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;
+};
+/**
+ * @private This hook should be used only once directly in the `MessageInputProvider` to
+ * register `uploadNewFiles` functions of the rendered `MessageInputs`. Each `MessageInput`
+ * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
+ * component.
+ */
+export declare const useRegisterDropHandlers: ({ uploadNewFiles }: MessageInputContextValue) => void;
+/**
+ * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
+ *
+ * @example
+ * ```tsx
+ * <Channel>
+ *  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
+ *    <Window>
+ *      <MessageList />
+ *      <MessageInput />
+ *    </Window>
+ *  </WithDragAndDropUpload>
+ *  <Thread />
+ * <Channel>
+ * ```
+ */
+export declare const WithDragAndDropUpload: ({ children, className, component: Component, style, }: PropsWithChildren<{
+    /**
+     * @description An element to render as a wrapper onto which drag & drop functionality will be applied.
+     * @default 'div'
+     */
+    component?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+}>) => React.JSX.Element;

package/dist/components/MessageInput/WithDragAndDropUpload.js

@@ -0,0 +1,85 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef, } from 'react';
+import { useChannelStateContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { useDropzone } from 'react-dropzone';
+import clsx from 'clsx';
+const DragAndDropUploadContext = React.createContext({
+    subscribeToDrop: null,
+});
+export const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);
+/**
+ * @private This hook should be used only once directly in the `MessageInputProvider` to
+ * register `uploadNewFiles` functions of the rendered `MessageInputs`. Each `MessageInput`
+ * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
+ * component.
+ */
+export const useRegisterDropHandlers = ({ uploadNewFiles }) => {
+    const { subscribeToDrop } = useDragAndDropUploadContext();
+    useEffect(() => {
+        const unsubscribe = subscribeToDrop?.(uploadNewFiles);
+        return unsubscribe;
+    }, [subscribeToDrop, uploadNewFiles]);
+};
+/**
+ * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
+ *
+ * @example
+ * ```tsx
+ * <Channel>
+ *  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
+ *    <Window>
+ *      <MessageList />
+ *      <MessageInput />
+ *    </Window>
+ *  </WithDragAndDropUpload>
+ *  <Thread />
+ * <Channel>
+ * ```
+ */
+export const WithDragAndDropUpload = ({ children, className, component: Component = 'div', style, }) => {
+    const dropHandlersRef = useRef(new Set());
+    const { acceptedFiles = [], multipleUploads } = useChannelStateContext();
+    const { t } = useTranslationContext();
+    const messageInputContext = useMessageInputContext();
+    const dragAndDropUploadContext = useDragAndDropUploadContext();
+    // if message input context is available, there's no need to use the queue
+    const isWithinMessageInputContext = typeof messageInputContext.uploadNewFiles === 'function';
+    const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
+        mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
+        return mediaTypeMap;
+    }, {}), [acceptedFiles]);
+    const subscribeToDrop = useCallback((fn) => {
+        dropHandlersRef.current.add(fn);
+        return () => {
+            dropHandlersRef.current.delete(fn);
+        };
+    }, []);
+    const handleDrop = useCallback((files) => {
+        dropHandlersRef.current.forEach((fn) => fn(files));
+    }, []);
+    const { getRootProps, isDragActive, isDragReject } = useDropzone({
+        accept,
+        // apply `disabled` rules if available, otherwise allow anything and
+        // let the `uploadNewFiles` handle the limitations internally
+        disabled: isWithinMessageInputContext
+            ? !messageInputContext.isUploadEnabled || messageInputContext.maxFilesLeft === 0
+            : false,
+        multiple: multipleUploads,
+        noClick: true,
+        onDrop: isWithinMessageInputContext ? messageInputContext.uploadNewFiles : handleDrop,
+    });
+    // nested WithDragAndDropUpload components render wrappers without functionality
+    // (MessageInputFlat has a default WithDragAndDropUpload)
+    if (dragAndDropUploadContext.subscribeToDrop !== null) {
+        return React.createElement(Component, { className: className }, children);
+    }
+    return (React.createElement(DragAndDropUploadContext.Provider, { value: {
+            subscribeToDrop,
+        } },
+        React.createElement(Component, { ...getRootProps({ className, style }) },
+            isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
+                    'str-chat__dropzone-container--not-accepted': isDragReject,
+                }) },
+                !isDragReject && React.createElement("p", null, t('Drag your files here')),
+                isDragReject && React.createElement("p", null, t('Some of the files will not be accepted')))),
+            children)));
+};

package/dist/components/MessageInput/index.d.ts

@@ -11,4 +11,5 @@ export * from './MessageInput';
 export * from './MessageInputFlat';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
+export { WithDragAndDropUpload } from './WithDragAndDropUpload';
 export * from './types';

package/dist/components/MessageInput/index.js

@@ -10,4 +10,5 @@ export * from './MessageInput';
 export * from './MessageInputFlat';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
+export { WithDragAndDropUpload } from './WithDragAndDropUpload';
 export * from './types';

package/dist/context/ComponentContext.d.ts

@@ -59,6 +59,8 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     MessageActions?: React.ComponentType;
     /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
     MessageBouncePrompt?: React.ComponentType<MessageBouncePromptProps>;
+    /** Custom UI component for a moderation-blocked message, defaults to and accepts same props as: [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx) */
+    MessageBlocked?: React.ComponentType;
     /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
     MessageDeleted?: React.ComponentType<MessageDeletedProps<StreamChatGenerics>>;
     MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;

package/dist/context/MessageInputContext.js

@@ -1,10 +1,11 @@
 import React, { createContext, useContext } from 'react';
 export const MessageInputContext = createContext(undefined);
 export const MessageInputContextProvider = ({ children, value, }) => (React.createElement(MessageInputContext.Provider, { value: value }, children));
-export const useMessageInputContext = (componentName) => {
+export const useMessageInputContext = (
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+componentName) => {
     const contextValue = useContext(MessageInputContext);
     if (!contextValue) {
-        console.warn(`The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the ${componentName} component.`);
         return {};
     }
     return contextValue;