Refactor chatView component and improve error handling (#2144)

* Refactor chatView component to handle artifacts in chat messages, fixing bug on streamed messages after refresh

* Improve error handling and error messages in CustomNodes hooks to provide more informative and user-friendly error messages. This ensures that users are aware of any unexpected errors that occur while updating or adding components, and prompts them to try again. This change also aligns with recent improvements in error handling across the codebase.

* ♻️ (utils.ts): remove unnecessary trailing commas in function parameters

* ✨ (frontend): add constants for error messages in CustomNodes hooks
♻️ (frontend): refactor error handling in CustomNodes hooks to use constants

* feat: Add constants for error messages in CustomNodes hooks

Refactor error handling in CustomNodes hooks to use constants for error messages. This improves code readability and maintainability, ensuring consistent error messages are displayed to users. This change aligns with recent improvements in error handling across the codebase.

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Add missing click event in codeAreaModalComponent.spec.ts

* refactor: Update cURL code generation to use icon-Copy test ID for button click

* refactor: Improve error handling and error messages in CustomNodes hooks

* refactor: Remove unnecessary click event in logs.spec.ts

* refactor: Fix XPath selectors in textInputOutput.spec.ts

* fix python api test

* refactor: Update cURL code generation to use icon-Copy test ID for button click

* fix save component

* refactor: Update API key selection in userSettings.spec.ts

* refactor: Update promptModalComponent.spec.ts

* refactor: Update chatInputOutput.spec.ts for zoom out functionality

* refactor: Add return_message option to ChatInput build_config

* fix streaming

* update example

* update example name

* refactor: Update chatInputOutputUser.spec.ts test to improve readability and maintainability

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>

src/frontend/tests/end-to-end/chatInputOutput.spec.ts

@@ -28,27 +28,55 @@ test("chat_io_teste", async ({ page }) => {
   );
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(3000);
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat output");
+  await page.waitForTimeout(1000);
 
-  // Create the DataTransfer and File
-  const dataTransfer = await page.evaluateHandle((data) => {
-    const dt = new DataTransfer();
-    // Convert the buffer to a hex array
-    const file = new File([data], "ChatTest.json", {
-      type: "application/json",
-    });
-    dt.items.add(file);
-    return dt;
-  }, jsonContent);
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsChat Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  // Click and hold on the first element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[10]/button/div/div',
+    )
+    .hover();
+  await page.mouse.down();
+
+  // Move to the second element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[4]/div/button/div/div',
+    )
+    .hover();
+
+  // Release the mouse
+  await page.mouse.up();
 
-  // Now dispatch
-  await page.dispatchEvent(
-    '//*[@id="react-flow-id"]/div[1]/div[1]/div',
-    "drop",
-    {
-      dataTransfer,
-    },
-  );
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();
   await page.getByPlaceholder("Send a message...").click();

src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts

@@ -56,10 +56,15 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .getByTestId("textarea-input_value")
     .nth(1)
     .fill(
-      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
     );
+  await page.getByText("Playground", { exact: true }).last().click();
   await page.getByTestId("icon-LucideSend").click();
   await page.getByText("Close", { exact: true }).click();
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("advanced-button-modal").click();
+  await page.getByTestId("showsender_name").click();
+  await page.getByText("Save Changes", { exact: true }).click();
 
   await page
     .getByTestId("popover-anchor-input-sender_name")
@@ -87,9 +92,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     await page
       .getByText(
         "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
-        { exact: true }
+        { exact: true },
       )
-      .isVisible()
+      .isVisible(),
   );
 });
 
@@ -199,7 +204,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
 
   const jsonContent = readFileSync(
     "src/frontend/tests/end-to-end/assets/chain.png",
-    "utf-8"
+    "utf-8",
   );
 
   // Create the DataTransfer and File

src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts

@@ -40,6 +40,7 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTestId("div-generic-node").click();
+
   await page.getByTestId("code-button-modal").click();
 
   const wCode =