fix: "Start Here" button not working as expected + fe tests (#3910)

* ✅ (general-bugs-shard-3909.spec.ts): add test case to ensure user can create a new flow by clicking on "Start Here" button

* ✨ (componentsComponent/index.tsx): Add NewFlowModal component to allow users to create a new flow
📝 (componentsComponent/index.tsx): Update ComponentsComponent to handle opening and closing of NewFlowModal

* ✨ (emptyComponent/index.tsx): refactor EmptyComponent to use useIsFetching hook from @tanstack/react-query for loading state and pass handleOpenModal as a prop to improve code readability and maintainability

* ✨ (componentsComponent/index.tsx): refactor handleOpenModal function to improve code readability and maintainability

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

@@ -0,0 +1,72 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("user must be able to create a new flow clicking on Start Here button", 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.getByText("Close").last().click();
+
+  await page.getByTestId("add-folder-button").click();
+
+  await page.getByText("New Folder").last().click();
+
+  await page.waitForSelector("text=start here", { timeout: 30000 });
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    (
+      await page.waitForSelector("text=start here", {
+        timeout: 30000,
+      })
+    ).isVisible(),
+  );
+
+  await page.getByText("Start Here", { exact: true }).click();
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector("text=playground", { timeout: 30000 });
+  await page.waitForSelector("text=api", { timeout: 30000 });
+  await page.waitForSelector("text=share", { timeout: 30000 });
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    await page.getByTestId("button_run_chat output").isVisible(),
+  ).toBeTruthy();
+  expect(await page.getByTestId("button_run_openai").isVisible()).toBeTruthy();
+  expect(await page.getByTestId("button_run_prompt").isVisible()).toBeTruthy();
+  expect(
+    await page.getByTestId("button_run_chat input").isVisible(),
+  ).toBeTruthy();
+});