fix: image not been sent on ChatInputComponent during runtime of building a flow (#3862)

* refactor: Refactor file path rewriting logic

This commit refactors the logic for rewriting file paths in the `rewrite_file_path` function. The function now splits the file path by "/" and checks if it has at least two parts. If it does, it creates a consistent file path by concatenating the last two parts. If not, it returns the original file path. This change improves the consistency of file paths in the codebase.

Refactor the file path rewriting logic in the `rewrite_file_path` function.

* refactor: Refactor file path rewriting logic and treat file paths in InterfaceVertex

* Refactor file path rewriting logic and treat file paths in InterfaceVertex

* Refactor file path rewriting logic and treat file paths in InterfaceVertex

* Refactor file path rewriting logic and treat file paths in InterfaceVertex

* ✨ (general-bugs-shard-3836.spec.ts): update test description to be more specific about the tool used for sending images on chat
📝 (general-bugs-shard-3836.spec.ts): remove unused import of readFileSync from fs module

* ✅ (test_rewrite_file_path.py): add unit tests for the rewrite_file_path function to ensure correct behavior with various file path scenarios

* ♻️ (utils.py): refactor file_path function to handle both forward and backward slashes and extract file path after drive letter if present

* style: fix single quotes, commas, and spaces

---------

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

src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import { readFileSync } from "fs";
 import path from "path";

src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts

@@ -0,0 +1,114 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("user must be able to send an image on chat using advanced tool on ChatInputComponent", async ({
+  page,
+}) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForSelector("text=Chat Input", { timeout: 30000 });
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByTestId("showfiles").click();
+  await page.getByText("Close").last().click();
+
+  await page.waitForTimeout(500);
+
+  const userQuestion = "What is this image?";
+  await page.getByTestId("textarea_str_input_value").fill(userQuestion);
+
+  const filePath = "tests/assets/chain.png";
+
+  await page.click('[data-testid="inputfile_file_files"]');
+
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent("filechooser"),
+    page.click('[data-testid="inputfile_file_files"]'),
+  ]);
+
+  await fileChooser.setFiles(filePath);
+
+  await page.keyboard.press("Escape");
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForTimeout(500);
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.waitForSelector("text=chain.png", { timeout: 30000 });
+
+  expect(await page.getByAltText("generated image").isVisible()).toBeTruthy();
+
+  expect(
+    await page.getByTestId(`chat-message-User-${userQuestion}`).isVisible(),
+  ).toBeTruthy();
+
+  const textContents = await page
+    .getByTestId("div-chat-message")
+    .allTextContents();
+
+  expect(textContents[0]).toContain("chain");
+});