From 1199685fcd9b7b7cedc4b0582228df8335d4729c Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Thu, 10 Apr 2025 17:15:57 +0400
Subject: [PATCH] fix: chat message input fix

---
 .../components/MessageInput/MessageInput.tsx     | 16 ++++++++++++++--
 src/pages/ClientsPage/contexts/ChatContext.tsx   | 10 +++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Chat/components/MessageInput/MessageInput.tsx b/src/components/Chat/components/MessageInput/MessageInput.tsx
index a12fb63..10167c4 100644
--- a/src/components/Chat/components/MessageInput/MessageInput.tsx
+++ b/src/components/Chat/components/MessageInput/MessageInput.tsx
@@ -3,9 +3,12 @@ import { IconCheck, IconPaperclip, IconSend2, IconX } from "@tabler/icons-react"
 import { useChatContext } from "../../../../pages/ClientsPage/contexts/ChatContext.tsx";
 import ActionIconCopy from "../../../ActionIconCopy/ActionIconCopy.tsx";
 import SelectedFile from "../SelectedFile/SelectedFile.tsx";
+import React, { useRef } from "react";
 
 
 const MessageInput = () => {
+    const formRef = useRef<HTMLFormElement>(null);
+
     const {
         submitMessage,
         chat,
@@ -13,14 +16,22 @@ const MessageInput = () => {
         files,
         fileDialog,
         isMessageSending,
+        isMessageEmpty,
     } = useChatContext();
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            formRef.current?.requestSubmit();
+        }
+    };
+
     const getFiles = files.map(file => (
         <SelectedFile key={file.name} file={file} />
     ));
 
     return (
-        <form onSubmit={form.onSubmit(values => submitMessage(values))}>
+        <form ref={formRef} onSubmit={form.onSubmit(values => submitMessage(values))}>
             <Stack gap={"xs"}>
                 <Divider />
                 {getFiles}
@@ -42,6 +53,7 @@ const MessageInput = () => {
                     </Tooltip>
                     <Textarea
                         {...form.getInputProps("message")}
+                        onKeyDown={handleKeyDown}
                         w={"100%"}
                         minRows={1}
                         maxRows={4}
@@ -58,7 +70,7 @@ const MessageInput = () => {
                     <Button
                         variant={"default"}
                         type="submit"
-                        disabled={isMessageSending}
+                        disabled={isMessageSending || isMessageEmpty}
                     >
                         {form.values.messageId ? (
                             <IconCheck />
diff --git a/src/pages/ClientsPage/contexts/ChatContext.tsx b/src/pages/ClientsPage/contexts/ChatContext.tsx
index 27b074d..51c46f4 100644
--- a/src/pages/ClientsPage/contexts/ChatContext.tsx
+++ b/src/pages/ClientsPage/contexts/ChatContext.tsx
@@ -29,6 +29,7 @@ type ChatContextState = {
     filesHandlers: UseListStateHandlers<File>;
     fileDialog: FileDialog;
     isMessageSending: boolean;
+    isMessageEmpty: boolean;
 };
 
 const ChatContext = createContext<ChatContextState | undefined>(undefined);
@@ -56,6 +57,8 @@ const useChatContextState = () => {
         },
     });
 
+    const isMessageEmpty = form.values.message.trim().length === 0 && files.length === 0;
+
     const setChatValue = (chat: ChatSchema | null) => {
         if (chat) {
             setFirstItemIndex(10000);
@@ -114,7 +117,7 @@ const useChatContextState = () => {
     }, [chat]);
 
     const sendMessageWithFiles = (values: MessageForm) => {
-        if (!chat) return;
+        if (!chat || isMessageSending) return;
         setIsMessageSending(true);
 
         ChatService.sendMessagesWithFiles({
@@ -137,7 +140,7 @@ const useChatContextState = () => {
     };
 
     const sendTextMessage = (values: MessageForm) => {
-        if (!chat) return;
+        if (!chat || isMessageEmpty || isMessageSending) return;
         setIsMessageSending(true);
 
         ChatService.sendTextMessage({
@@ -160,7 +163,7 @@ const useChatContextState = () => {
     };
 
     const editMessage = (values: MessageForm) => {
-        if (!chat) return;
+        if (!chat || isMessageSending) return;
         setIsMessageSending(true);
 
         ChatService.editMessage({
@@ -207,6 +210,7 @@ const useChatContextState = () => {
         filesHandlers,
         fileDialog,
         isMessageSending,
+        isMessageEmpty,
     };
 };