fix: update all outdated components at once (#4763)

* update components to update

* Added update all components

* Update the logic for updating all components

* Added dismiss functionality

* Removed node from components to update when updated

* ✨ (list/index.tsx): add data-testid attribute to list card component for testing purposes

✨ (reactflow): create edges to connect different nodes for data flow in the chatbot application.

📝 (Prompt): Update prompt template with dynamic variables for better customization and flexibility.

📝 (code): update code in ChatInput component to import necessary modules and classes for chat inputs handling
♻️ (code): refactor code in ChatInput component to improve readability and maintainability by organizing imports and defining class attributes clearly

📝 (input.py): Update input fields display names and information for better clarity and understanding
📝 (input.py): Update file input field to support multiple file types and be a list of files
📝 (input.py): Update sender options to be more descriptive as "Machine" and "User" instead of constants
📝 (input.py): Update sender_name input field information to clarify it is the name of the sender
📝 (input.py): Update session_id input field information to explain its purpose and usage
📝 (input.py): Update files input field information to clarify it is for files to be sent with the message
📝 (input.py): Update input_value input field information to clarify it is the text message to be passed as input
📝 (input.py): Update should_store_message input field information to explain its purpose of storing messages in history
📝 (input.py): Update message_response method to handle storing messages based on conditions and updating status

📝 (metadata): Update metadata fields in ChatInput component for better clarity and consistency
📝 (OpenAIModel): Add OpenAI API Key field to the template for configuring the OpenAI model usage

📝 (LCModelComponent): Update OpenAIModelComponent inputs and add support for new features and configurations to enhance text generation capabilities.

📝 (file.py): Update comments and documentation for better clarity and understanding of the code
♻️ (file.py): Refactor code to improve readability and maintainability by restructuring the logic and removing unnecessary code blocks

📝 (schema.json): Update schema for the Output of the model to enable JSON mode and improve functionality
📝 (ChatOutput): Display a chat message in the Playground for better user interaction and experience

📝 (ChatOutput): Update ChatOutput class inputs and outputs structure for better organization and readability.

✨ (frontend): Add a new file 'outdated_flow.json' to store outdated flow data for frontend tests.

✨ (outdated-actions.spec.ts): add test to ensure user can update outdated components in the application

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* fix tests

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/frontend/tests/extended/features/outdated-actions.spec.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
+
+test("user must be able to update outdated components", async ({ page }) => {
+  await page.goto("/");
+
+  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.locator("span").filter({ hasText: "Close" }).first().click();
+
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  // Read your file into a buffer.
+  const jsonContent = readFileSync("tests/assets/outdated_flow.json", "utf-8");
+
+  // 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], "outdated_flow.json", {
+      type: "application/json",
+    });
+    dt.items.add(file);
+    return dt;
+  }, jsonContent);
+
+  // Now dispatch
+  await page.getByTestId("cards-wrapper").dispatchEvent("drop", {
+    dataTransfer,
+  });
+
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("list-card").first().click();
+
+  await page.waitForSelector("text=components are ready to update", {
+    timeout: 30000,
+    state: "visible",
+  });
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  expect(outdatedComponents).toBeGreaterThan(0);
+
+  await page.getByText("Update All", { exact: true }).click();
+
+  await page.waitForTimeout(3000);
+
+  outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  expect(outdatedComponents).toBe(0);
+});