From 3b66808e7d210812b5a2253dc50343b1d485edf6 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <kushagra20103@gmail.com>
Date: Wed, 24 Apr 2024 10:06:56 +0530
Subject: [PATCH] feat(message-input): prevent message when loading

---
 ui/components/Chat.tsx           | 2 +-
 ui/components/MessageInput.tsx   | 9 ++++++---
 ui/components/SettingsDialog.tsx | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/components/Chat.tsx b/ui/components/Chat.tsx
index 61ab3ab..294520b 100644
--- a/ui/components/Chat.tsx
+++ b/ui/components/Chat.tsx
@@ -77,7 +77,7 @@ const Chat = ({
           className="bottom-24 lg:bottom-10 fixed z-40"
           style={{ width: dividerWidth }}
         >
-          <MessageInput sendMessage={sendMessage} />
+          <MessageInput loading={loading} sendMessage={sendMessage} />
         </div>
       )}
     </div>
diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
index 051afbc..baf6095 100644
--- a/ui/components/MessageInput.tsx
+++ b/ui/components/MessageInput.tsx
@@ -6,8 +6,10 @@ import { Attach, CopilotToggle } from './MessageInputActions';
 
 const MessageInput = ({
   sendMessage,
+  loading,
 }: {
   sendMessage: (message: string) => void;
+  loading: boolean;
 }) => {
   const [copilotEnabled, setCopilotEnabled] = useState(false);
   const [message, setMessage] = useState('');
@@ -25,12 +27,13 @@ const MessageInput = ({
   return (
     <form
       onSubmit={(e) => {
+        if (loading) return;
         e.preventDefault();
         sendMessage(message);
         setMessage('');
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
+        if (e.key === 'Enter' && !e.shiftKey && !loading) {
           e.preventDefault();
           sendMessage(message);
           setMessage('');
@@ -58,7 +61,7 @@ const MessageInput = ({
             setCopilotEnabled={setCopilotEnabled}
           />
           <button
-            disabled={message.trim().length === 0}
+            disabled={message.trim().length === 0 || loading}
             className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
           >
             <ArrowUp className="bg-background" size={17} />
@@ -74,7 +77,7 @@ const MessageInput = ({
               setCopilotEnabled={setCopilotEnabled}
             />
             <button
-              disabled={message.trim().length === 0}
+              disabled={message.trim().length === 0 || loading}
               className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
             >
               <ArrowUp className="bg-background" size={17} />
diff --git a/ui/components/SettingsDialog.tsx b/ui/components/SettingsDialog.tsx
index e5ec51e..c62c967 100644
--- a/ui/components/SettingsDialog.tsx
+++ b/ui/components/SettingsDialog.tsx
@@ -168,7 +168,7 @@ const SettingsDialog = ({
                       <p className="text-white/70 text-sm">OpenAI API Key</p>
                       <input
                         type="text"
-                        placeholder='OpenAI API Key'
+                        placeholder="OpenAI API Key"
                         defaultValue={config.openeaiApiKey}
                         onChange={(e) =>
                           setConfig({
@@ -183,7 +183,7 @@ const SettingsDialog = ({
                       <p className="text-white/70 text-sm">Ollama API URL</p>
                       <input
                         type="text"
-                        placeholder='Ollama API URL'
+                        placeholder="Ollama API URL"
                         defaultValue={config.ollamaApiUrl}
                         onChange={(e) =>
                           setConfig({