- {displayQuotedMessage && (
-
+ {findAndEnqueueURLsToEnrich && (
+
+ )}
+ {displayQuotedMessage &&
}
+
+
+
+
+ {displayQuotedMessage &&
}
+ {isUploadEnabled &&
+ !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (
+
)}
- {isUploadEnabled &&
- !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (
-
- )}
-
-
+
+
- {EmojiPicker && }
-
+ {EmojiPicker &&
}
- {shouldDisplayStopAIGeneration ? (
-
- ) : (
- !hideSendButton && (
- <>
- {cooldownRemaining ? (
-
+ {shouldDisplayStopAIGeneration ? (
+
+ ) : (
+ !hideSendButton && (
+ <>
+ {cooldownRemaining ? (
+
+ ) : (
+ <>
+
- ) : (
- <>
- a.type === RecordingAttachmentType.VOICE_RECORDING,
+ ))
}
- sendMessage={handleSubmit}
+ onClick={() => {
+ recordingController.recorder?.start();
+ setShowRecordingPermissionDeniedNotification(true);
+ }}
/>
- {recordingEnabled && (
- a.type === RecordingAttachmentType.VOICE_RECORDING,
- ))
- }
- onClick={() => {
- recordingController.recorder?.start();
- setShowRecordingPermissionDeniedNotification(true);
- }}
- />
- )}
-
- )}
-
- )
- )}
-
+ )}
+
+ )}
+
+ )
+ )}
-
+
);
};
diff --git a/src/components/MessageInput/WithDragAndDropUpload.tsx b/src/components/MessageInput/WithDragAndDropUpload.tsx
new file mode 100644
index 0000000000..29a77f2fb8
--- /dev/null
+++ b/src/components/MessageInput/WithDragAndDropUpload.tsx
@@ -0,0 +1,150 @@
+import React, {
+ CSSProperties,
+ ElementType,
+ PropsWithChildren,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import {
+ MessageInputContextValue,
+ useChannelStateContext,
+ useMessageInputContext,
+ useTranslationContext,
+} from '../../context';
+import { useDropzone } from 'react-dropzone';
+import clsx from 'clsx';
+
+const DragAndDropUploadContext = React.createContext<{
+ fileQueue: File[];
+ addFilesToQueue: ((files: File[]) => void) | null;
+ removeFilesFromQueue: ((files: File[]) => void) | null;
+}>({
+ addFilesToQueue: null,
+ fileQueue: [],
+ removeFilesFromQueue: null,
+});
+
+export const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);
+
+/**
+ * @private To maintain top -> bottom data flow, the drag-and-drop functionality allows dragging any files to the queue - the closest
+ * `MessageInputProvider` will be notified through `DragAndDropUploadContext.fileQueue` and starts the upload with `uploadNewAttachments`,
+ * forwarded files are removed from the queue immediately after.
+ */
+export const useHandleDragAndDropQueuedFiles = ({
+ uploadNewFiles,
+}: MessageInputContextValue) => {
+ const { fileQueue, removeFilesFromQueue } = useDragAndDropUploadContext();
+
+ useEffect(() => {
+ if (!removeFilesFromQueue) return;
+
+ uploadNewFiles(fileQueue);
+
+ removeFilesFromQueue(fileQueue);
+ }, [fileQueue, removeFilesFromQueue, uploadNewFiles]);
+};
+
+/**
+ * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
+ *
+ * @example
+ * ```tsx
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ```
+ */
+export const WithDragAndDropUpload = ({
+ children,
+ className,
+ component: Component = 'div',
+ 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;
+}>) => {
+ const [files, setFiles] = useState([]);
+ 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] ??= [];
+ return mediaTypeMap;
+ }, {}),
+ [acceptedFiles],
+ );
+
+ const addFilesToQueue = useCallback((files: File[]) => {
+ setFiles((cv) => cv.concat(files));
+ }, []);
+
+ const removeFilesFromQueue = useCallback((files: File[]) => {
+ if (!files.length) return;
+ setFiles((cv) => cv.filter((f) => files.indexOf(f) === -1));
+ }, []);
+
+ 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
+ : addFilesToQueue,
+ });
+
+ // nested WithDragAndDropUpload components render wrappers without functionality
+ // (MessageInputFlat has a default WithDragAndDropUpload)
+ if (dragAndDropUploadContext.removeFilesFromQueue !== null) {
+ return {children};
+ }
+
+ return (
+
+
+ {/* TODO: could be a replaceable component */}
+ {isDragActive && (
+
+ {!isDragReject &&
{t('Drag your files here')}
}
+ {isDragReject &&
{t('Some of the files will not be accepted')}
}
+