Improve PromptInput component (#3266)

* allow typing while streaming + refactor props

* remove duplicate function

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx

@@ -24,8 +24,7 @@ const MAX_EDIT_STACK_SIZE = 100;
 export default function PromptInput({
   submit,
   onChange,
-  inputDisabled,
-  buttonDisabled,
+  isStreaming,
   sendCommand,
   attachments = [],
 }) {
@@ -49,11 +48,6 @@ export default function PromptInput({
     setPromptInput(e?.detail ?? "");
   }
 
-  function resetTextAreaHeight() {
-    if (!textareaRef.current) return;
-    textareaRef.current.style.height = "auto";
-  }
-
   useEffect(() => {
     if (!!window)
       window.addEventListener(PROMPT_INPUT_EVENT, handlePromptUpdate);
@@ -62,9 +56,9 @@ export default function PromptInput({
   }, []);
 
   useEffect(() => {
-    if (!inputDisabled && textareaRef.current) textareaRef.current.focus();
+    if (!isStreaming && textareaRef.current) textareaRef.current.focus();
     resetTextAreaHeight();
-  }, [inputDisabled]);
+  }, [isStreaming]);
 
   /**
    * Save the current state before changes
@@ -115,6 +109,7 @@ export default function PromptInput({
     // Is simple enter key press w/o shift key
     if (event.keyCode === 13 && !event.shiftKey) {
       event.preventDefault();
+      if (isStreaming) return;
       return submit(event);
     }
 
@@ -264,7 +259,6 @@ export default function PromptInput({
                   handlePasteEvent(e);
                 }}
                 required={true}
-                disabled={inputDisabled}
                 onFocus={() => setFocused(true)}
                 onBlur={(e) => {
                   setFocused(false);
@@ -274,7 +268,7 @@ export default function PromptInput({
                 className={`border-none cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow ${textSizeClass}`}
                 placeholder={"Send a message"}
               />
-              {buttonDisabled ? (
+              {isStreaming ? (
                 <StopGenerationButton />
               ) : (
                 <>

frontend/src/components/WorkspaceChat/ChatContainer/index.jsx

@@ -282,8 +282,7 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
         <PromptInput
           submit={handleSubmit}
           onChange={handleMessageChange}
-          inputDisabled={loadingResponse}
-          buttonDisabled={loadingResponse}
+          isStreaming={loadingResponse}
           sendCommand={sendCommand}
           attachments={files}
         />