From 9a0b126f121364fa38e87afc4dc47542d9f90520 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Wed, 19 Mar 2025 23:00:27 +0530
Subject: [PATCH] Allow chat input on web app while Khoj responds to speed
 interactions

Previously the chat input area didn't allow inputting text while Khoj is
researching and generating response.

This change allows the user to add their next text while Khoj
responds. This should speed up interaction cycles as user can have
their next query ready to send when Khoj finishes its response.
---
 .../components/chatInputArea/chatInputArea.tsx    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index aa440cec..8eb776e1 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -682,7 +682,12 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                             autoFocus={true}
                             value={message}
                             onKeyDown={(e) => {
-                                if (e.key === "Enter" && !e.shiftKey && !props.isMobileWidth) {
+                                if (
+                                    e.key === "Enter" &&
+                                    !e.shiftKey &&
+                                    !props.isMobileWidth &&
+                                    !props.sendDisabled
+                                ) {
                                     setImageUploaded(false);
                                     setImagePaths([]);
                                     e.preventDefault();
@@ -690,7 +695,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                                 }
                             }}
                             onChange={(e) => setMessage(e.target.value)}
-                            disabled={props.sendDisabled || recording}
+                            disabled={recording}
                         />
                     </div>
                     <div className="flex items-end pb-2">
@@ -753,7 +758,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                             </TooltipProvider>
                         )}
                         <Button
-                            className={`${(!message || recording) && "hidden"} ${props.agentColor ? convertToBGClass(props.agentColor) : "bg-orange-300 hover:bg-orange-500"} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
+                            className={`${(!message || recording || props.sendDisabled) && "hidden"} ${props.agentColor ? convertToBGClass(props.agentColor) : "bg-orange-300 hover:bg-orange-500"} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
                             disabled={props.sendDisabled || !props.isLoggedIn}
                             onClick={onSendMessage}
                         >
@@ -789,8 +794,8 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent className="text-xs">
-                            Research Mode allows you to get more deeply researched,
-                            detailed responses. Response times may be longer.
+                            Research Mode allows you to get more deeply researched, detailed
+                            responses. Response times may be longer.
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>