feat: enter to send in mobile UX on PC

src/common/component/TextInput/index.tsx

@@ -1,6 +1,8 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import TextareaAutoSize from "react-textarea-autosize";
+import { useKey } from 'rooks';
+import { isMobile } from '../../utils';
 
 import Button from "../styled/Button";
 
@@ -10,6 +12,7 @@ type Props = {
 }
 const TextInput = ({ sendMessage, placeholder }: Props) => {
   const { t } = useTranslation();
+  const inputRef = useRef(null);
   const [currMsg, setCurrMsg] = useState("");
   const handleMsgChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
     setCurrMsg(evt.target.value);
@@ -21,6 +24,19 @@ const TextInput = ({ sendMessage, placeholder }: Props) => {
     sendMessage(msg);
     setCurrMsg("");
   };
+
+  useKey(
+    "Enter",
+    (evt) => {
+      evt.preventDefault();
+      // return true;
+      handleSend();
+    },
+    {
+      when: !isMobile(),
+      target: inputRef,
+    }
+  );
   return (
     <div className='md:hidden relative mb-1 p-1 flex items-center w-full text-gray-600 dark:text-white bg-gray-200 dark:bg-gray-600 rounded-lg'>
       <TextareaAutoSize
@@ -31,7 +47,7 @@ const TextInput = ({ sendMessage, placeholder }: Props) => {
             e.currentTarget.value.length
           )
         }
-        // ref={inputRef}
+        ref={inputRef}
         className="p-1 w-full min-h-[28px] resize-none bg-transparent text-gray-800 dark:text-white text-sm break-all"
         maxRows={8}
         minRows={1}