🐛 (chat.py): fix type annotation for 'data' parameter in retrieve_vertices_order function to allow None as a value

🐛 (constants.py): fix import statement for JsonSpec from langchain.tools.json.tool to langchain_community.tools.json.tool
🐛 (index.tsx): add data-testid attribute to the div element to improve testability
🐛 (buildUtils.ts): add debugger statement for debugging purposes
🐛 (chatInputOutput.spec.ts): fix click event target from "Run" to "Playground"
🐛 (fileUploadComponent.spec.ts): fix click event target from "Run" to "Playground"
🐛 (textInputOutput.spec.ts): fix click event target from "Run" to "Playground"

src/backend/base/langflow/api/v1/chat.py

@@ -54,7 +54,7 @@ async def try_running_celery_task(vertex, user_id):
 @router.post("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
 async def retrieve_vertices_order(
     flow_id: str,
-    data: Annotated[Optional[FlowDataRequest], Body(embed=True)] = None,
+    data: Optional[Annotated[Optional[FlowDataRequest], Body(embed=True)]] = None,
     stop_component_id: Optional[str] = None,
     start_component_id: Optional[str] = None,
     chat_service: "ChatService" = Depends(get_chat_service),

src/backend/base/langflow/interface/tools/constants.py

@@ -1,7 +1,7 @@
 from langchain import tools
 from langchain.agents import Tool
 from langchain.agents.load_tools import _BASE_TOOLS, _EXTRA_LLM_TOOLS, _EXTRA_OPTIONAL_TOOLS, _LLM_TOOLS
-from langchain.tools.json.tool import JsonSpec
+from langchain_community.tools.json.tool import JsonSpec
 
 from langflow.interface.importing.utils import import_class
 from langflow.interface.tools.custom import PythonFunctionTool

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -645,7 +645,11 @@ export default function GenericNode({
                   variant="secondary"
                   className={"group h-9 px-1.5"}
                 >
-                  <div>
+                  <div
+                    data-testid={
+                      `button_run_` + data?.node?.display_name.toLowerCase()
+                    }
+                  >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconStatus(buildStatus, validationStatus)}
                     </div>

src/frontend/src/utils/buildUtils.ts

@@ -1,11 +1,11 @@
 import { AxiosError } from "axios";
+import { Edge, Node } from "reactflow";
 import { BuildStatus } from "../constants/enums";
 import { getVerticesOrder, postBuildVertex } from "../controllers/API";
 import useAlertStore from "../stores/alertStore";
 import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 import { VertexLayerElementType } from "../types/zustand/flow";
-import { Edge, Node } from "reactflow";
 
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
@@ -52,8 +52,8 @@ export async function updateVerticesOrder(
   flowId: string,
   startNodeId?: string | null,
   stopNodeId?: string | null,
-  nodes?:Node[],
-  edges?:Edge[]
+  nodes?: Node[],
+  edges?: Edge[]
 ): Promise<{
   verticesLayers: VertexLayerElementType[][];
   verticesIds: string[];
@@ -64,12 +64,19 @@ export async function updateVerticesOrder(
     const setErrorData = useAlertStore.getState().setErrorData;
     let orderResponse;
     try {
-      orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId, nodes, edges);
+      orderResponse = await getVerticesOrder(
+        flowId,
+        startNodeId,
+        stopNodeId,
+        nodes,
+        edges
+      );
     } catch (error: any) {
       setErrorData({
         title: "Oops! Looks like you missed something",
         list: [error.response?.data?.detail ?? "Unknown Error"],
       });
+      debugger;
       useFlowStore.getState().setIsBuilding(false);
       throw new Error("Invalid nodes");
     }

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

@@ -45,7 +45,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   await page
     .getByTestId("input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
@@ -65,7 +65,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   await page.getByTestId("input-sender_name").nth(1).fill("TestSenderNameUser");
   await page.getByTestId("input-sender_name").nth(0).fill("TestSenderNameAI");
 
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByTestId("icon-LucideSend").click();
 
   valueUser = await page
@@ -138,7 +138,7 @@ test("chat_io_teste", async ({ page }) => {
     }
   );
   await page.getByLabel("fit view").click();
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByPlaceholder("Send a message...").click();
   await page.getByPlaceholder("Send a message...").fill("teste");
   await page.getByRole("button").nth(1).click();

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

@@ -79,7 +79,7 @@ test("dropDownComponent", async ({ page }) => {
   // Release the mouse
   await page.mouse.up();
 
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
   await page.waitForTimeout(3000);
   const textOutput = await page.getByPlaceholder("Empty").first().inputValue();

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

@@ -117,7 +117,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page
     .getByTestId("input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
 
   await page.waitForTimeout(5000);
@@ -138,7 +138,7 @@ test("TextInputOutputComponent", async ({ page }) => {
     .getByTestId("input-input_value")
     .nth(0)
     .fill("This is a test, again just to be sure!");
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
 
   await page.waitForTimeout(5000);