diff --git a/skyvern-frontend/src/components/WorkflowBlockInput.tsx b/skyvern-frontend/src/components/WorkflowBlockInput.tsx index 44c3cb8b..6fa6612c 100644 --- a/skyvern-frontend/src/components/WorkflowBlockInput.tsx +++ b/skyvern-frontend/src/components/WorkflowBlockInput.tsx @@ -3,14 +3,43 @@ import { cn } from "@/util/utils"; import { Input } from "./ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect"; +import { useEdges, useNodes } from "@xyflow/react"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "./ui/tooltip"; type Props = Omit, "onChange"> & { onChange: (value: string) => void; nodeId: string; + isFirstInputInNode?: boolean; }; function WorkflowBlockInput(props: Props) { const { nodeId, onChange, ...inputProps } = props; + const edges = useEdges(); + const nodes = useNodes(); + + function isInsideFirstNode() { + const node = nodes.find((node) => node.id === nodeId); + if (!node) { + return; + } + const incomingEdge = edges.find((edge) => edge.target === node.id); + if (!incomingEdge) { + return; + } + const source = incomingEdge.source; + const sourceNode = nodes.find((node) => node.id === source); + if (!sourceNode) { + return; + } + return !node.parentId && sourceNode.type === "start"; + } + + const showInputTooltip = isInsideFirstNode() && props.isFirstInputInNode; return (
@@ -23,11 +52,19 @@ function WorkflowBlockInput(props: Props) { />
- -
- -
-
+ + + + +
+ +
+
+
+ Add parameters using the + button +
+
+ , @@ -10,10 +17,32 @@ type Props = Omit< > & { onChange: (value: string) => void; nodeId: string; + isFirstInputInNode?: boolean; }; function WorkflowBlockInputTextarea(props: Props) { const { nodeId, onChange, ...textAreaProps } = props; + const edges = useEdges(); + const nodes = useNodes(); + + function isInsideFirstNode() { + const node = nodes.find((node) => node.id === nodeId); + if (!node) { + return; + } + const incomingEdge = edges.find((edge) => edge.target === node.id); + if (!incomingEdge) { + return; + } + const source = incomingEdge.source; + const sourceNode = nodes.find((node) => node.id === source); + if (!sourceNode) { + return; + } + return !node.parentId && sourceNode.type === "start"; + } + + const showInputTooltip = isInsideFirstNode() && props.isFirstInputInNode; return (
@@ -26,11 +55,18 @@ function WorkflowBlockInputTextarea(props: Props) { />
- -
- -
-
+ + + + +
+ +
+
+
+ Add parameters using the + button +
+
) {
{ handleChange("url", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx index e722a4c6..c3ae0316 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx @@ -97,6 +97,7 @@ function ExtractionNode({ id, data }: NodeProps) { />
{ if (!editable) { diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx index 4e787863..e4f324c5 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx @@ -105,6 +105,7 @@ function FileDownloadNode({ id, data }: NodeProps) {
{ handleChange("url", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx index 0c9e9b9a..db07b4da 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx @@ -102,6 +102,7 @@ function LoginNode({ id, data }: NodeProps) {
{ handleChange("url", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx index 56d2c818..a268e118 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx @@ -104,6 +104,7 @@ function LoopNode({ id, data }: NodeProps) { { diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx index 28545c93..4526fd9a 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx @@ -104,6 +104,7 @@ function NavigationNode({ id, data }: NodeProps) { { handleChange("url", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx index 0e6a63ef..1b0a86e3 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/PDFParserNode/PDFParserNode.tsx @@ -82,6 +82,7 @@ function PDFParserNode({ id, data }: NodeProps) { { diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx index 52ace3cc..a3afc26d 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx @@ -79,6 +79,7 @@ function SendEmailNode({ id, data }: NodeProps) {
{ handleChange("recipients", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx index 07a94b65..e77ed30d 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx @@ -125,6 +125,7 @@ function TaskNode({ id, data }: NodeProps) {
{ handleChange("url", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx index e3f9d9ff..ffd4300a 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx @@ -1,4 +1,3 @@ -import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea"; import { HelpTooltip } from "@/components/HelpTooltip"; import { Checkbox } from "@/components/ui/checkbox"; import { Label } from "@/components/ui/label"; @@ -24,6 +23,7 @@ import { NodeActionMenu } from "../NodeActionMenu"; import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect"; import { WorkflowBlockIcon } from "../WorkflowBlockIcon"; import { type TextPromptNode } from "./types"; +import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea"; function TextPromptNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -88,13 +88,15 @@ function TextPromptNode({ id, data }: NodeProps) { - { + { if (!editable) { return; } - setInputs({ ...inputs, prompt: event.target.value }); - updateNodeData(id, { prompt: event.target.value }); + setInputs({ ...inputs, prompt: value }); + updateNodeData(id, { prompt: value }); }} value={inputs.prompt} placeholder="What do you want to generate?" diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx index a127e4cc..891da148 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx @@ -88,6 +88,7 @@ function ValidationNode({ id, data }: NodeProps) {
{ handleChange("completeCriterion", value); diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx index cb949cbc..ebd40203 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx @@ -1,5 +1,4 @@ import { HelpTooltip } from "@/components/HelpTooltip"; -import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback"; import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler"; @@ -11,6 +10,7 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; import { WorkflowBlockIcon } from "../WorkflowBlockIcon"; import type { WaitNode } from "./types"; +import { WorkflowBlockInput } from "@/components/WorkflowBlockInput"; function WaitNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -79,16 +79,18 @@ function WaitNode({ id, data }: NodeProps) {
- { + onChange={(value) => { if (!editable) { return; } - handleChange("waitInSeconds", Number(event.target.value)); + handleChange("waitInSeconds", Number(value)); }} className="nopan text-xs" />