feat: Add YouTube transcript extraction component and frontend integration (#4502)

* add new youtube transcripts component

* [autofix.ci] apply automated fixes

* ✨ (youtube-transcripts.spec.ts): add integration test for youtube transcripts component in the frontend to ensure user can interact with it successfully

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/icons/Youtube/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import YouTubeIcon from "./youtube";
+
+export const YouTubeSvgIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <YouTubeIcon ref={ref} {...props} />;
+});

src/frontend/src/utils/styleUtils.ts

@@ -6,6 +6,7 @@ import { MilvusIcon } from "@/icons/Milvus";
 import Perplexity from "@/icons/Perplexity/Perplexity";
 import { TavilyIcon } from "@/icons/Tavily";
 import { UnstructuredIcon } from "@/icons/Unstructured";
+import YouTubeIcon from "@/icons/Youtube/youtube";
 import { ZepMemoryIcon } from "@/icons/ZepMemory";
 import { AthenaIcon } from "@/icons/athena/index";
 import { freezeAllIcon } from "@/icons/freezeAll";
@@ -658,6 +659,7 @@ export const nodeIconsLucide: iconsType = {
   GithubIcon,
   FaGithub,
   FaApple,
+  YouTube: YouTubeIcon,
   Milvus: MilvusIcon,
   ExaSearch: ExaIcon,
   ZepMemory: ZepMemoryIcon,

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

@@ -40,6 +40,8 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.getByTestId("sidebar-legacy-switch").isVisible({ timeout: 5000 });
   await page.getByTestId("sidebar-legacy-switch").click();
 
+  await page.waitForTimeout(1000);
+
   await page
     .getByTestId("prototypesPython Function")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));

src/frontend/tests/extended/integrations/youtube-transcripts.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test } from "@playwright/test";
+
+test("user should be able to use youtube transcripts component", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  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 Flow", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.getByTestId("sidebar-search-input").click();
+  await page.getByTestId("sidebar-search-input").fill("youtube");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="toolsYouTube Transcripts"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTestId("fit_view").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("textarea_str_url")
+    .fill("https://www.youtube.com/watch?v=VqhCQZaH4Vs");
+
+  await page.getByTestId("textarea_str_language").fill("en");
+
+  await page.getByTestId("button_run_youtube transcripts").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByTestId("output-inspection-data").first().click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByRole("gridcell").first().click();
+
+  const value = await page.getByPlaceholder("Empty").inputValue();
+  expect(value.length).toBeGreaterThan(10);
+  expect(value.toLowerCase()).toContain("i see trees of green");
+  expect(value.toLowerCase()).toContain(
+    "and i think to myself what a wonderful world",
+  );
+});