feat(MessageInput): add drag & drop upload functionality

Added `react-dropzone` package to handle drag and drop upload functionality in MessageInputV2.
Added new phrases to be translated.

package.json

@@ -47,6 +47,7 @@
     "nanoid": "^3.3.4",
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
+    "react-dropzone": "^14.2.2",
     "react-fast-compare": "^3.2.0",
     "react-file-utils": "^1.2.0",
     "react-image-gallery": "^1.2.7",

src/components/MessageInput/MessageInputFlat.tsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useId, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { FileUploadButton, ImageDropzone, UploadButton } from 'react-file-utils';
 import type { Event } from 'stream-chat';
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';
+import { useDropzone } from 'react-dropzone';
+import zipObject from 'lodash/zipObject';
 
 import { EmojiPicker } from './EmojiPicker';
 import { CooldownTimer as DefaultCooldownTimer } from './hooks/useCooldownTimer';
@@ -171,12 +173,12 @@ const MessageInputV2 = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >() => {
   const {
-    acceptedFiles,
+    acceptedFiles = [],
     multipleUploads,
     quotedMessage,
   } = useChannelStateContext<StreamChatGenerics>('MessageInputV2');
 
-  //   const { t } = useTranslationContext('MessageInputV2');
+  const { t } = useTranslationContext('MessageInputV2');
 
   const {
     closeEmojiPicker,
@@ -209,6 +211,23 @@ const MessageInputV2 = <
 
   const id = useId();
 
+  const accept = useMemo(
+    () =>
+      zipObject(
+        acceptedFiles,
+        Array.from({ length: acceptedFiles.length }, () => []),
+      ),
+    [acceptedFiles],
+  );
+
+  const { getRootProps, isDragActive, isDragReject } = useDropzone({
+    accept,
+    disabled: !isUploadEnabled || maxFilesLeft === 0,
+    multiple: multipleUploads,
+    noClick: true,
+    onDrop: uploadNewFiles,
+  });
+
   return (
     <>
       <div className='str-chat__message-input'>
@@ -230,13 +249,24 @@ const MessageInputV2 = <
               <FileUploadIcon />
             </label>
           </div>
-          <div className='str-chat__message-textarea-container'>
+          <div {...getRootProps({ className: 'str-chat__message-textarea-container' })}>
             {quotedMessage && !quotedMessage.parent_id && (
               <QuotedMessagePreview quotedMessage={quotedMessage} />
             )}
 
             {isUploadEnabled && !!numberOfUploads && <AttachmentPreviewList />}
 
+            {isDragActive && (
+              <div
+                className={clsx('str-chat__dropzone-container', {
+                  'str-chat__dropzone-container--not-accepted': isDragReject,
+                })}
+              >
+                {!isDragReject && <p>{t<string>('Drag your files here')}</p>}
+                {isDragReject && <p>{t<string>('Some of the files will not be accepted')}</p>}
+              </div>
+            )}
+
             <div className='str-chat__message-textarea-with-emoji-picker'>
               <ChatAutoComplete />
 

src/i18n/de.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Verbindungsfehler, Wiederherstellung der Verbindung...",
   "Delete": "Löschen",
   "Delivered": "Zugestellt",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Nachricht bearbeiten",
   "Edit message request failed": "Anfrage zum Bearbeiten der Nachricht fehlgeschlagen",
   "Emoji matching": "Emoji passend",
@@ -50,6 +51,7 @@
   "Send message request failed": "Senden der Nachrichtenanfrage fehlgeschlagen",
   "Sending...": "Senden...",
   "Slow Mode ON": "Slow-Mode EIN",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Diese Nachricht wurde gelöscht...",
   "Thread": "Thread",
   "Type your message": "Nachricht eingeben",

src/i18n/en.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Connection failure, reconnecting now...",
   "Delete": "Delete",
   "Delivered": "Delivered",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Edit Message",
   "Edit message request failed": "Edit message request failed",
   "Emoji matching": "Emoji matching",
@@ -50,6 +51,7 @@
   "Send message request failed": "Send message request failed",
   "Sending...": "Sending...",
   "Slow Mode ON": "Slow Mode ON",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "This message was deleted...",
   "Thread": "Thread",
   "Type your message": "Type your message",

src/i18n/es.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Fallo de conexión, reconectando ahora ...",
   "Delete": "Borrar",
   "Delivered": "Entregado",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Editar mensaje",
   "Edit message request failed": "Error al editar la solicitud de mensaje",
   "Emoji matching": "Coincidencia de emoji",
@@ -50,6 +51,7 @@
   "Send message request failed": "Error al enviar la solicitud de mensaje",
   "Sending...": "Enviando...",
   "Slow Mode ON": "Modo lento activado",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Este mensaje fue eliminado ...",
   "Thread": "Hilo",
   "Type your message": "Escribe tu mensaje",

src/i18n/fr.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Échec de la connexion, reconnexion en cours...",
   "Delete": "Supprimer",
   "Delivered": "Publié",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Éditer un message",
   "Edit message request failed": "Échec de la demande de modification du message",
   "Emoji matching": "Correspondance emoji",
@@ -50,6 +51,7 @@
   "Send message request failed": "Échec de la demande d'envoi de message",
   "Sending...": "Envoi en cours...",
   "Slow Mode ON": "Mode lent activé",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Ce message a été supprimé...",
   "Thread": "Fil de discussion",
   "Type your message": "Saisissez votre message",

src/i18n/hi.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "कनेक्शन विफल रहा, अब पुनः कनेक्ट हो रहा है ...",
   "Delete": "डिलीट",
   "Delivered": "पहुंच गया",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "मैसेज में बदलाव करे",
   "Edit message request failed": "संदेश संपादित करने का अनुरोध विफल रहा",
   "Emoji matching": "इमोजी मिलान",
@@ -50,6 +51,7 @@
   "Send message request failed": "संदेश भेजने का अनुरोध विफल रहा",
   "Sending...": "भेजा जा रहा है",
   "Slow Mode ON": "स्लो मोड ऑन",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "मैसेज हटा दिया गया",
   "Thread": "रिप्लाई थ्रेड",
   "Type your message": "अपना मैसेज लिखे",

src/i18n/it.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Connessione fallitta, riconnessione in corso...",
   "Delete": "Cancella",
   "Delivered": "Consegnato",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Modifica messaggio",
   "Edit message request failed": "Richiesta di modifica del messaggio non riuscita",
   "Emoji matching": "Abbinamento emoji",
@@ -50,6 +51,7 @@
   "Send message request failed": "Invia messaggio di richiesta non riuscito",
   "Sending...": "Invio in corso...",
   "Slow Mode ON": "Modalità lenta attivata",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Questo messaggio é stato cancellato",
   "Thread": "Thread",
   "Type your message": "Scrivi il tuo messaggio",

src/i18n/ja.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "接続が失敗しました。再接続中...",
   "Delete": "消去",
   "Delivered": "配信しました",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "メッセージを編集",
   "Edit message request failed": "メッセージの編集要求が失敗しました",
   "Emoji matching": "絵文字マッチング",
@@ -50,6 +51,7 @@
   "Send message request failed": "メッセージ送信リクエストが失敗しました",
   "Sending...": "送信中...",
   "Slow Mode ON": "スローモードオン",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "このメッセージは削除されました...",
   "Thread": "スレッド",
   "Type your message": "メッセージを入力してください",

src/i18n/ko.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "연결 실패, 지금 다시 연결 중...",
   "Delete": "삭제",
   "Delivered": "배달됨",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "메시지 수정",
   "Edit message request failed": "메시지 수정 요청 실패",
   "Emoji matching": "이모티콘 매칭",
@@ -50,6 +51,7 @@
   "Send message request failed": "메시지 보내기 요청 실패",
   "Sending...": "배상중...",
   "Slow Mode ON": "슬로우 모드 켜짐",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "이 메시지는 삭제되었습니다...",
   "Thread": "스레드",
   "Type your message": "메시지 입력",

src/i18n/nl.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Probleem met de verbinding, opnieuw verbinding maken...",
   "Delete": "Verwijder",
   "Delivered": "Afgeleverd",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Pas bericht aan",
   "Edit message request failed": "Verzoek om bericht bewerken mislukt",
   "Emoji matching": "Emoji-overeenkomsten",
@@ -50,6 +51,7 @@
   "Send message request failed": "Verzoek om bericht te verzenden mislukt",
   "Sending...": "Aan het verzenden...",
   "Slow Mode ON": "Langzame modus aan",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Dit bericht was verwijderd",
   "Thread": "Draadje",
   "Type your message": "Type je bericht",

src/i18n/pt.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Falha de conexão, reconectando agora...",
   "Delete": "Excluir",
   "Delivered": "Entregue",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Editar Mensagem",
   "Edit message request failed": "O pedido de edição da mensagem falhou",
   "Emoji matching": "Emoji correspondente",
@@ -50,6 +51,7 @@
   "Send message request failed": "O pedido de envio de mensagem falhou",
   "Sending...": "Enviando...",
   "Slow Mode ON": "Modo lento LIGADO",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Esta mensagem foi excluída...",
   "Thread": "Fio",
   "Type your message": "Digite sua mensagem",

src/i18n/ru.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Ошибка соединения, переподключение...",
   "Delete": "Удалить",
   "Delivered": "Отправлено",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Редактировать сообщение",
   "Edit message request failed": "Не удалось изменить запрос сообщения",
   "Emoji matching": "Соответствие эмодзи",
@@ -50,6 +51,7 @@
   "Send message request failed": "Не удалось отправить запрос на отправку сообщения",
   "Sending...": "Отправка...",
   "Slow Mode ON": "Медленный режим включен",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Сообщение было удалено...",
   "Thread": "Ветка",
   "Type your message": "Ваше сообщение",

src/i18n/tr.json

@@ -8,6 +8,7 @@
   "Connection failure, reconnecting now...": "Bağlantı hatası, tekrar bağlanılıyor...",
   "Delete": "Sil",
   "Delivered": "İletildi",
+  "Drag your files here": "Drag your files here",
   "Edit Message": "Mesajı Düzenle",
   "Edit message request failed": "Mesaj düzenleme isteği başarısız oldu",
   "Emoji matching": "Emoji eşleştirme",
@@ -50,6 +51,7 @@
   "Send message request failed": "Mesaj gönderme isteği başarısız oldu",
   "Sending...": "Gönderiliyor...",
   "Slow Mode ON": "Yavaş Mod Açık",
+  "Some of the files will not be accepted": "Some of the files will not be accepted",
   "This message was deleted...": "Bu mesaj silindi",
   "Thread": "Konu",
   "Type your message": "Mesajınızı yazın",

yarn.lock

@@ -7097,6 +7097,13 @@ file-selector@^0.5.0:
   dependencies:
     tslib "^2.0.3"
 
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
+  dependencies:
+    tslib "^2.4.0"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -12920,6 +12927,15 @@ react-dropzone@^12.0.5:
     file-selector "^0.5.0"
     prop-types "^15.8.1"
 
+react-dropzone@^14.2.2:
+  version "14.2.2"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.2.tgz#a75a0676055fe9e2cb78578df4dedb4c42b54f98"
+  integrity sha512-5oyGN/B5rNhop2ggUnxztXBQ6q6zii+OMEftPzsxAR2hhpVWz0nAV+3Ktxo2h5bZzdcCKrpd8bfWAVsveIBM+w==
+  dependencies:
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
+
 react-error-boundary@^3.1.0:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
@@ -15278,6 +15294,11 @@ tslib@^2.0.1, tslib@^2.0.3, tslib@^2.2.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.17.1, tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"