refactor: Improve async handling and file clearing logic (#8835)

* fix chat image sent

* 🐛 (chat-input.tsx): fix issue where files were not being cleared immediately after sending a message
📝 (chat-input.tsx): refactor code to improve readability and maintainability by extracting filesToSend logic into a separate variable

* Delete diff_output_ts.txt

* ♻️ (chat-input.tsx): refactor code to store and restore files when sending a message to prevent losing files if an error occurs during sending.

* ✅ (fileUploadComponent.spec.ts): update timeout values for better test reliability and performance

* ✅ (fileUploadComponent.spec.ts): update test assertion to check for the correct attribute value to ensure accurate testing

---------

Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx

@@ -166,18 +166,20 @@ export default function ChatInput({
 
   const send = async () => {
     const storedChatValue = chatValue;
+    const filesToSend = files
+      .map((file) => file.path ?? "")
+      .filter((file) => file !== "");
+    const storedFiles = [...files];
+    setFiles([]);
     try {
       await sendMessage({
         repeat: 1,
-        files: files
-          .map((file) => file.path ?? "")
-          .filter((file) => file !== ""),
+        files: filesToSend,
       });
     } catch (error) {
       setChatValueStore(storedChatValue);
+      setFiles(storedFiles);
     }
-
-    setFiles([]);
   };
 
   const checkSendingOk = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx

@@ -7,7 +7,7 @@ import { cn } from "../../../../../../utils/utils";
 
 interface NoInputViewProps {
   isBuilding: boolean;
-  sendMessage: (args: { repeat: number }) => void;
+  sendMessage: (args: { repeat: number }) => Promise<void>;
   stopBuilding: () => void;
 }
 
@@ -23,8 +23,8 @@ const NoInputView: React.FC<NoInputViewProps> = ({
           <Button
             data-testid="button-send"
             className="font-semibold"
-            onClick={() => {
-              sendMessage({
+            onClick={async () => {
+              await sendMessage({
                 repeat: 1,
               });
             }}

src/frontend/src/modals/IOModal/playground-modal.tsx

@@ -356,7 +356,7 @@ export default function IOModal({
       setOpen={setOpen}
       disable={disable}
       type={isPlayground ? "full-screen" : undefined}
-      onSubmit={() => sendMessage({ repeat: 1 })}
+      onSubmit={async () => await sendMessage({ repeat: 1 })}
       size="x-large"
       className="!rounded-[12px] p-0"
     >

src/frontend/tests/core/unit/fileUploadComponent.spec.ts

@@ -304,19 +304,18 @@ test(
       await page.dispatchEvent('[data-testid="drag-files-component"]', "drop", {
         dataTransfer,
       });
-
       await expect(page.getByText(`${newTxtFile}.txt`).last()).toBeVisible({
         timeout: 1000,
       });
 
       await expect(
         page.getByTestId(`checkbox-${newTxtFile}`).last(),
-      ).toHaveAttribute("data-state", "checked", { timeout: 1000 });
+      ).toHaveAttribute("data-state", "checked", { timeout: 3000 });
 
       await page.getByTestId("select-files-modal-button").click();
       await expect(page.getByText(`${renamedJsonFile}.txt`).first()).toBeHidden(
         {
-          timeout: 1000,
+          timeout: 3000,
         },
       );
       await expect(page.getByText(`${newTxtFile}.txt`).first()).toBeVisible({
@@ -324,16 +323,6 @@ test(
       });
       await page.getByTestId(`remove-file-button-${renamedTxtFile}`).click();
 
-      await page
-        .getByTestId("handle-file-shownode-raw content-right")
-        .first()
-        .click();
-
-      await page
-        .getByTestId("handle-chatoutput-noshownode-inputs-target")
-        .first()
-        .click();
-
       await page
         .getByRole("button", { name: "Playground", exact: true })
         .click();