frontend support llm selector for fileparser (#3281)

skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx

@@ -13,6 +13,7 @@ import { WorkflowDataSchemaInputGroup } from "@/components/DataSchemaInputGroup/
 import { dataSchemaExampleForFileExtraction } from "../types";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
+import { ModelSelector } from "@/components/ModelSelector";
 
 function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
   const { updateNodeData } = useReactFlow();
@@ -28,6 +29,7 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
   const [inputs, setInputs] = useState({
     fileUrl: data.fileUrl,
     jsonSchema: data.jsonSchema,
+    model: data.model,
   });
 
   function handleChange(key: string, value: unknown) {
@@ -103,6 +105,13 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
             }}
             suggestionContext={{}}
           />
+          <ModelSelector
+            className="nopan w-52 text-xs"
+            value={inputs.model}
+            onChange={(value) => {
+              handleChange("model", value);
+            }}
+          />
         </div>
       </div>
     </div>

skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/types.ts

@@ -1,11 +1,15 @@
 import type { Node } from "@xyflow/react";
 import { NodeBaseData } from "../types";
 import { AppNode } from "..";
-import { debuggableWorkflowBlockTypes } from "@/routes/workflows/types/workflowTypes";
+import {
+  debuggableWorkflowBlockTypes,
+  WorkflowModel,
+} from "@/routes/workflows/types/workflowTypes";
 
 export type FileParserNodeData = NodeBaseData & {
   fileUrl: string;
   jsonSchema: string;
+  model: WorkflowModel | null;
 };
 
 export type FileParserNode = Node<FileParserNodeData, "fileParser">;

skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx

@@ -13,6 +13,7 @@ import { NodeHeader } from "../components/NodeHeader";
 import { useParams } from "react-router-dom";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
+import { ModelSelector } from "@/components/ModelSelector";
 
 function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
   const { updateNodeData } = useReactFlow();
@@ -28,6 +29,7 @@ function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
   const [inputs, setInputs] = useState({
     fileUrl: data.fileUrl,
     jsonSchema: data.jsonSchema,
+    model: data.model,
   });
 
   function handleChange(key: string, value: unknown) {
@@ -102,6 +104,13 @@ function PDFParserNode({ id, data }: NodeProps<PDFParserNode>) {
             }}
             suggestionContext={{}}
           />
+          <ModelSelector
+            className="nopan w-52 text-xs"
+            value={inputs.model}
+            onChange={(value) => {
+              handleChange("model", value);
+            }}
+          />
         </div>
       </div>
     </div>

skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/types.ts

@@ -1,11 +1,15 @@
 import type { Node } from "@xyflow/react";
 import { NodeBaseData } from "../types";
 import { AppNode } from "..";
-import { debuggableWorkflowBlockTypes } from "@/routes/workflows/types/workflowTypes";
+import {
+  debuggableWorkflowBlockTypes,
+  WorkflowModel,
+} from "@/routes/workflows/types/workflowTypes";
 
 export type PDFParserNodeData = NodeBaseData & {
   fileUrl: string;
   jsonSchema: string;
+  model: WorkflowModel | null;
 };
 
 export type PDFParserNode = Node<PDFParserNodeData, "pdfParser">;

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -472,6 +472,7 @@ function convertToNode(
           ...commonData,
           fileUrl: block.file_url,
           jsonSchema: JSON.stringify(block.json_schema, null, 2),
+          model: block.model,
         },
       };
     }
@@ -485,6 +486,7 @@ function convertToNode(
           ...commonData,
           fileUrl: block.file_url,
           jsonSchema: JSON.stringify(block.json_schema, null, 2),
+          model: block.model,
         },
       };
     }