feat: toast in md input mode

src/assets/icons/warning.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="16" fill="#FEF0C7"/>
+<path d="M15.9998 13.3333V16M15.9998 18.6667H16.0064M14.8598 9.90666L9.2131 19.3333C9.09668 19.5349 9.03508 19.7635 9.03443 19.9963C9.03378 20.2292 9.0941 20.4581 9.20939 20.6603C9.32468 20.8626 9.49092 21.0312 9.69157 21.1492C9.89223 21.2673 10.1203 21.3308 10.3531 21.3333H21.6464C21.8792 21.3308 22.1073 21.2673 22.308 21.1492C22.5086 21.0312 22.6749 20.8626 22.7902 20.6603C22.9054 20.4581 22.9658 20.2292 22.9651 19.9963C22.9645 19.7635 22.9029 19.5349 22.7864 19.3333L17.1398 9.90666C17.0209 9.71073 16.8536 9.54874 16.6539 9.43632C16.4542 9.32389 16.2289 9.26483 15.9998 9.26483C15.7706 9.26483 15.5453 9.32389 15.3456 9.43632C15.146 9.54874 14.9786 9.71073 14.8598 9.90666Z" stroke="#DC6803" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/routes/chat/Layout/index.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, FC, ReactElement } from "react";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import clsx from "clsx";
+import { toast } from "react-hot-toast";
 
 import ImagePreviewModal from "../../../common/component/ImagePreviewModal";
 import Send from "../../../common/component/Send";
@@ -12,6 +13,7 @@ import LoginTip from "./LoginTip";
 import useLicense from "../../../common/hook/useLicense";
 import LicenseUpgradeTip from "./LicenseOutdatedTip";
 import DnDTip from "./DnDTip";
+import IconWarning from '../../../assets/icons/warning.svg';
 
 interface Props {
   readonly?: boolean;
@@ -39,8 +41,9 @@ const Layout: FC<Props> = ({
   const { addStageFile } = useUploadFile({ context, id: to });
   const messagesContainer = useRef<HTMLDivElement>(null);
   const [previewImage, setPreviewImage] = useState(null);
-  const { selects, channelsData, usersData } = useAppSelector((store) => {
+  const { selects, channelsData, usersData, inputMode } = useAppSelector((store) => {
     return {
+      inputMode: store.ui.inputMode,
       selects: store.ui.selectMessages[`${context}_${to}`],
       channelsData: store.channels.byId,
       usersData: store.users.byId
@@ -50,6 +53,13 @@ const Layout: FC<Props> = ({
     () => ({
       accept: [NativeTypes.FILE],
       drop({ files }) {
+        // console.log("iii", inputMode);
+        if (inputMode !== "text") {
+          toast("DnD not allowed in this input mode", {
+            icon: <IconWarning className="w-5 h-5" />,
+          });
+          return;
+        };
         if (files.length) {
           const filesData = files.map((file) => {
             const { size, type, name } = file;
@@ -63,7 +73,7 @@ const Layout: FC<Props> = ({
         isActive: monitor.canDrop() && monitor.isOver()
       })
     }),
-    [context, to]
+    [context, to, inputMode]
   );
 
   useEffect(() => {
@@ -132,7 +142,7 @@ const Layout: FC<Props> = ({
         </main>
         {aside && <div className={clsx("z-50 p-3 absolute right-0 top-0 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
         {users && <div className="hidden md:block">{users}</div>}
-        {!readonly && isActive && (
+        {!readonly && inputMode == "text" && isActive && (
           <DnDTip context={context} name={name} />
         )}
       </section>