diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx index dd68b446..1100189e 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx @@ -57,7 +57,7 @@ function CodeBlockNode({ id, data }: NodeProps) { }} /> -
+
; export const codeBlockNodeDefaultData: CodeBlockNodeData = { editable: true, label: "", - code: "", + code: `# To assign a value to the output of this block,\n# assign the value to the variable 'result'\n# The final value of 'result' will be used as the output of this block\n\nresult = 5`, } as const; diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx index 96412716..c24dd3de 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx @@ -6,7 +6,8 @@ import { DownloadIcon } from "@radix-ui/react-icons"; import { Handle, NodeProps, Position } from "@xyflow/react"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import type { DownloadNode } from "./types"; +import { helpTooltipContent, type DownloadNode } from "./types"; +import { HelpTooltip } from "@/components/HelpTooltip"; function DownloadNode({ id, data }: NodeProps) { const [label, setLabel] = useNodeLabelChangeHandler({ @@ -53,8 +54,11 @@ function DownloadNode({ id, data }: NodeProps) { />
-
- +
+
+ + +
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts index 8d7e9c21..ae5f923f 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts @@ -14,3 +14,7 @@ export const downloadNodeDefaultData: DownloadNodeData = { label: "", url: SKYVERN_DOWNLOAD_DIRECTORY, } as const; + +export const helpTooltipContent = { + url: "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.", +} as const; diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx index c2e32fb8..30e7dc4f 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx @@ -6,7 +6,9 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react"; import { useState } from "react"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import type { FileParserNode } from "./types"; +import { helpTooltipContent, type FileParserNode } from "./types"; +import { Label } from "@/components/ui/label"; +import { HelpTooltip } from "@/components/HelpTooltip"; function FileParserNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -57,8 +59,11 @@ function FileParserNode({ id, data }: NodeProps) { />
-
- File URL +
+
+ + +
{ diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/types.ts index 7e1e3fa2..fbdfe8b6 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/types.ts @@ -13,3 +13,8 @@ export const fileParserNodeDefaultData: FileParserNodeData = { label: "", fileUrl: "", } as const; + +export const helpTooltipContent = { + fileUrl: + "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.", +} as const; 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 a2da8454..18615449 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx @@ -23,7 +23,8 @@ import { useWorkflowParametersState } from "../../useWorkflowParametersState"; import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import type { LoopNode } from "./types"; +import { helpTooltipContent, type LoopNode } from "./types"; +import { HelpTooltip } from "@/components/HelpTooltip"; function LoopNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -105,10 +106,13 @@ function LoopNode({ id, data }: NodeProps) { }} />
-
- +
+
+ + +
{ @@ -84,7 +85,7 @@ function SendEmailNode({ id, data }: NodeProps) { />
-
+
{ @@ -98,7 +99,7 @@ function SendEmailNode({ id, data }: NodeProps) { className="nopan text-xs" />
-
+
{ @@ -113,8 +114,11 @@ function SendEmailNode({ id, data }: NodeProps) { />
-
- +
+
+ + +
{ diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/types.ts index ee2e85fe..12d735e7 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/types.ts @@ -37,3 +37,8 @@ export const sendEmailNodeDefaultData: SendEmailNodeData = { smtpUsernameSecretParameterKey: SMTP_USERNAME_PARAMETER_KEY, smtpPasswordSecretParameterKey: SMTP_PASSWORD_PARAMETER_KEY, } as const; + +export const helpTooltipContent = { + fileAttachments: + "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.", +} as const; 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 b533f8d3..424e8008 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx @@ -480,23 +480,18 @@ function TaskNode({ id, data }: NodeProps) { }} />
-
- { - setDisplayMode(mode); - if (workflowPermanentId) { - localStorage.setItem( - getLocalStorageKey(workflowPermanentId, label), - mode, - ); - } - }} - /> - {displayMode === "basic" && ( - - )} -
+ { + setDisplayMode(mode); + if (workflowPermanentId) { + localStorage.setItem( + getLocalStorageKey(workflowPermanentId, label), + mode, + ); + } + }} + /> {displayMode === "basic" && basicContent} {displayMode === "advanced" && advancedContent}
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 72148d58..c8a808f6 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx @@ -10,7 +10,8 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react"; import { useState } from "react"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import type { TextPromptNode } from "./types"; +import { helpTooltipContent, type TextPromptNode } from "./types"; +import { HelpTooltip } from "@/components/HelpTooltip"; function TextPromptNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -63,8 +64,11 @@ function TextPromptNode({ id, data }: NodeProps) { }} />
-
- +
+
+ + +
{ if (!editable) { diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts index b5ad84b4..fbc76d7a 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts @@ -15,3 +15,8 @@ export const textPromptNodeDefaultData: TextPromptNodeData = { prompt: "", jsonSchema: "null", } as const; + +export const helpTooltipContent = { + prompt: + "Write a prompt you would like passed into the LLM and specify the output format, if applicable.", +}; diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx index fe3ca317..7ba0b078 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx @@ -6,7 +6,8 @@ import { UploadIcon } from "@radix-ui/react-icons"; import { Handle, NodeProps, Position } from "@xyflow/react"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import type { UploadNode } from "./types"; +import { helpTooltipContent, type UploadNode } from "./types"; +import { HelpTooltip } from "@/components/HelpTooltip"; function UploadNode({ id, data }: NodeProps) { const deleteNodeCallback = useDeleteNodeCallback(); @@ -53,8 +54,11 @@ function UploadNode({ id, data }: NodeProps) { />
-
- +
+
+ + +
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts index 5646ecf0..8c2a0022 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts @@ -14,3 +14,7 @@ export const uploadNodeDefaultData: UploadNodeData = { label: "", path: SKYVERN_DOWNLOAD_DIRECTORY, } as const; + +export const helpTooltipContent = { + path: "Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.", +} as const;