stream-chat-react 12.14.0 → 12.15.0

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

@@ -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/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "12.14.0";
+        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'

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/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;