Reset text area size after submitting

[louisv20]

Title: Fix Input Box to Revert to Original Height on Submission in HomePage

Description:

This pull request addresses an issue where the input box (textarea) on the Home Page does not revert to its original height after submitting multiline text. This behavior leads to a poor user experience, as the input box remains expanded even when it is empty.

Goals:

1. Enhance User Experience: Ensure the input box reverts to its original height after text is submitted, maintaining a clean and consistent interface.
2. Maintain Functional Consistency: Align the behavior of the input box with user expectations, where the input field resets to its default state post-submission.
3. Improve Code Maintainability: Simplify the input box height management to prevent similar issues in future development.

Changes Made:

1. Updated the submit Function:

   • Added logic to reset the height of the textarea to "50px" after clearing the user input.
   • Ensured that this logic is executed each time the user submits a message.

2. Code Snippet Before Changes:

   const submit = (text: string) => {
    if (/\S/.test(userInput)) {
      setButtonsDisabled(true);
      if (welcomeBox !== <></>) {
        setWelcomeBox(<></>);
      }
      setMessages((prevMessages) => [
        ...prevMessages,
        <ShowHumanMessage
          key={`human-message-${prevMessages.length}`}
          response={text}
        />,
      ]);
      const preferredModel = localStorage.getItem("preferred-model");
      window.ipcRenderer.send("client-request-to-server", {
        request_type: "user-input",
        preferred_model: preferredModel,
        user_query: text,
      });
      setMessages((prevMessages) => [
        ...prevMessages,
        <ShowAiMessage setButtonsDisabled={setButtonsDisabled} />,
      ]);
      setUserInput("");
      // setButtonsDisabled(false);
    }
   };

3. Code Snippet After Changes:

   const submit = (text: string) => {
    if (/\S/.test(userInput)) {
      setButtonsDisabled(true);
      if (welcomeBox !== <></>) {
        setWelcomeBox(<></>);
      }
      setMessages((prevMessages) => [
        ...prevMessages,
        <ShowHumanMessage
          key={`human-message-${prevMessages.length}`}
          response={text}
        />,
      ]);
      const preferredModel = localStorage.getItem("preferred-model");
      window.ipcRenderer.send("client-request-to-server", {
        request_type: "user-input",
        preferred_model: preferredModel,
        user_query: text,
      });
      setMessages((prevMessages) => [
        ...prevMessages,
        <ShowAiMessage setButtonsDisabled={setButtonsDisabled} />,
      ]);
      setUserInput("");
      if (textareaRef.current) {
        textareaRef.current.style.height = "50px"; // Reset textarea height
      }
      // setButtonsDisabled(false);
    }
   };

Linked Issue:

This pull request addresses [Issue #32 ] where the input box height does not revert to its original state after text submission.

Testing and Validation:

Manual Testing:

• Verified that after submitting a message, the input box height resets to "50px".
• Tested with both single-line and multiline text to ensure consistent behavior.
• Ensured the application functions as expected without introducing new issues.

Notes:

• This change is crucial for maintaining a clean user interface, especially when users frequently submit multiline messages.
• Further enhancements can include making the default height configurable or adjusting dynamically based on screen size.

---

Please review the changes and provide feedback or approval for merging this fix into the main branch. Thank you!