From 2d17b0f3c8d620b64ba8c0b627469fcd0ac5fbc2 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Mon, 6 Nov 2023 20:45:47 +0800
Subject: [PATCH] refactor: msg input in mobile

---
 src/components/MessageInput/index.tsx        |  2 +-
 src/components/Send/Toolbar.tsx              |  2 +-
 src/components/Send/UploadFileList/index.tsx |  6 ++--
 src/components/Send/index.tsx                | 34 +++++++++++---------
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/MessageInput/index.tsx b/src/components/MessageInput/index.tsx
index 3acebced..e19886e3 100644
--- a/src/components/MessageInput/index.tsx
+++ b/src/components/MessageInput/index.tsx
@@ -84,7 +84,7 @@ export default function MessageInput({
     <>
       <div
         ref={editorContainerRef}
-        className="input w-full pr-14 md:pr-0 max-h-[50vh] overflow-auto text-sm text-gray-600 dark:text-white"
+        className="input w-full pr-0 max-h-[50vh] overflow-auto text-sm text-gray-600 dark:text-white"
       >
         <Plate
           // @ts-ignore
diff --git a/src/components/Send/Toolbar.tsx b/src/components/Send/Toolbar.tsx
index b51d7367..4aa47aea 100644
--- a/src/components/Send/Toolbar.tsx
+++ b/src/components/Send/Toolbar.tsx
@@ -52,7 +52,7 @@ const Toolbar: FC<Props> = ({
 
   const isMarkdown = mode == "markdown";
   return (
-    <div className={`hidden md:flex flex-col md:flex-row items-center justify-end gap-2.5`}>
+    <div className={`flex  items-center justify-end gap-2.5`}>
       <div className="flex cursor-pointer gap-3.5">
         <Tooltip placement="top" tip="Markdown">
           <MarkdownIcon
diff --git a/src/components/Send/UploadFileList/index.tsx b/src/components/Send/UploadFileList/index.tsx
index b7e8c6e5..30ee96a5 100644
--- a/src/components/Send/UploadFileList/index.tsx
+++ b/src/components/Send/UploadFileList/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Waveform } from "@uiball/loaders";
 
 import { ChatContext } from "@/types/common";
@@ -52,7 +52,7 @@ export default function UploadFileList({ context, id }: { context: ChatContext;
               className="group relative flex flex-col bg-gray-100 dark:bg-gray-700 rounded p-2"
               key={url}
             >
-              <div className="flex-center w-40 h-40">
+              <div className="flex-center w-20 h-20 md:w-40 md:h-40">
                 {shouldPreviewImage(type) ? (
                   converting ? (
                     <Waveform size={18} lineWeight={3} speed={1} color="#aaa" />
@@ -63,7 +63,7 @@ export default function UploadFileList({ context, id }: { context: ChatContext;
                   getFileIcon(type, name)
                 )}
               </div>
-              <h4 className="w-40 mt-4 mb-0.5 font-semibold text-sm text-gray-800 dark:text-gray-100 truncate">
+              <h4 className="w-20 md:w-40 mt-1 md:mt-4 mb-0.5 md:font-semibold text-xs md:text-sm text-gray-800 dark:text-gray-100 truncate">
                 {name}
               </h4>
               <span className="text-xs text-gray-500">{formatBytes(size)}</span>
diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index 1bbe374d..e1742cae 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -13,7 +13,7 @@ import useSendMessage from "@/hooks/useSendMessage";
 import useUploadFile from "@/hooks/useUploadFile";
 import useUserOperation from "@/hooks/useUserOperation";
 import StyledButton from "../styled/Button";
-import TextInput from "../TextInput";
+// import TextInput from "../TextInput";
 import Replying from "./Replying";
 import Toolbar from "./Toolbar";
 import UploadFileList from "./UploadFileList";
@@ -80,22 +80,24 @@ const Send: FC<IProps> = ({
     }
   };
   const handleSendMessage = async () => {
-    if (!id || !msg.text.trim()) return;
-    // send text msgs
+    if (!id) return;
     if (editorRef.current) {
       editorRef.current.reset();
     }
-    const { text, mentions } = msg;
-    const properties = { mentions };
-    properties.local_id = +new Date();
-    await sendMessage({
-      id,
-      reply_mid: replying_mid,
-      type: "text",
-      content: text,
-      from_uid,
-      properties
-    });
+    if (msg.text.trim()) {
+      // send text msg
+      const { text, mentions } = msg;
+      const properties = { mentions };
+      properties.local_id = +new Date();
+      await sendMessage({
+        id,
+        reply_mid: replying_mid,
+        type: "text",
+        content: text,
+        from_uid,
+        properties
+      });
+    }
     // send files
     if (uploadFiles.length !== 0) {
       uploadFiles.forEach((fileInfo) => {
@@ -154,11 +156,11 @@ const Send: FC<IProps> = ({
   return (
     <>
       {/* mobile input */}
-      <TextInput sendMessage={handleSendMessage} placeholder={placeholder} />
+      {/* <TextInput sendMessage={handleSendMessage} placeholder={placeholder} /> */}
       {/* PC input */}
       <div
         className={clsx(
-          `send hidden md:block relative bg-gray-200 rounded-lg w-full dark:bg-gray-600 ${mode} ${
+          `send mb-2 md:mb-0 relative bg-gray-200 rounded-lg w-full dark:bg-gray-600 ${mode} ${
             markdownFullscreen ? "fullscreen" : ""
           } ${replying_mid ? "reply" : ""} ${context}`,
           isMarkdownMode && markdownFullscreen && "-mt-9"