Skip to content

Commit 628321e

Browse files
wintonzhengwintonzheng
authored
Add help text to other nodes (#967)
1 parent 354d113 commit 628321e

File tree

15 files changed

+91
-43
lines changed

15 files changed

+91
-43
lines changed

‎skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
5757
}}
5858
/>
5959
</div>
60-
<div className="space-y-1">
60+
<div className="space-y-2">
6161
<Label className="text-xs text-slate-300">Code Input</Label>
6262
<CodeEditor
6363
language="python"

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export type CodeBlockNode = Node<CodeBlockNodeData, "codeBlock">;
1111
export const codeBlockNodeDefaultData: CodeBlockNodeData = {
1212
editable: true,
1313
label: "",
14-
code: "",
14+
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`,
1515
} as const;

‎skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { DownloadIcon } from "@radix-ui/react-icons";
66
import { Handle, NodeProps, Position } from "@xyflow/react";
77
import { EditableNodeTitle } from "../components/EditableNodeTitle";
88
import { NodeActionMenu } from "../NodeActionMenu";
9-
import type { DownloadNode } from "./types";
9+
import { helpTooltipContent, type DownloadNode } from "./types";
10+
import { HelpTooltip } from "@/components/HelpTooltip";
1011

1112
function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
1213
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -53,8 +54,11 @@ function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
5354
/>
5455
</div>
5556
<div className="space-y-4">
56-
<div className="space-y-1">
57-
<Label className="text-sm text-slate-400">File URL</Label>
57+
<div className="space-y-2">
58+
<div className="flex items-center gap-2">
59+
<Label className="text-sm text-slate-400">File Path</Label>
60+
<HelpTooltip content={helpTooltipContent["url"]} />
61+
</div>
5862
<Input value={data.url} disabled className="nopan text-xs" />
5963
</div>
6064
</div>

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

+4
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ export const downloadNodeDefaultData: DownloadNodeData = {
1414
label: "",
1515
url: SKYVERN_DOWNLOAD_DIRECTORY,
1616
} as const;
17+
18+
export const helpTooltipContent = {
19+
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.",
20+
} as const;

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
66
import { useState } from "react";
77
import { EditableNodeTitle } from "../components/EditableNodeTitle";
88
import { NodeActionMenu } from "../NodeActionMenu";
9-
import type { FileParserNode } from "./types";
9+
import { helpTooltipContent, type FileParserNode } from "./types";
10+
import { Label } from "@/components/ui/label";
11+
import { HelpTooltip } from "@/components/HelpTooltip";
1012

1113
function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
1214
const { updateNodeData } = useReactFlow();
@@ -57,8 +59,11 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
5759
/>
5860
</div>
5961
<div className="space-y-4">
60-
<div className="space-y-1">
61-
<span className="text-sm text-slate-400">File URL</span>
62+
<div className="space-y-2">
63+
<div className="flex gap-2">
64+
<Label className="text-xs text-slate-300">File URL</Label>
65+
<HelpTooltip content={helpTooltipContent["fileUrl"]} />
66+
</div>
6267
<Input
6368
value={inputs.fileUrl}
6469
onChange={(event) => {

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

+5
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,8 @@ export const fileParserNodeDefaultData: FileParserNodeData = {
1313
label: "",
1414
fileUrl: "",
1515
} as const;
16+
17+
export const helpTooltipContent = {
18+
fileUrl:
19+
"Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
20+
} as const;

‎skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ import { useWorkflowParametersState } from "../../useWorkflowParametersState";
2323
import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
2424
import { EditableNodeTitle } from "../components/EditableNodeTitle";
2525
import { NodeActionMenu } from "../NodeActionMenu";
26-
import type { LoopNode } from "./types";
26+
import { helpTooltipContent, type LoopNode } from "./types";
27+
import { HelpTooltip } from "@/components/HelpTooltip";
2728

2829
function LoopNode({ id, data }: NodeProps<LoopNode>) {
2930
const { updateNodeData } = useReactFlow();
@@ -105,18 +106,21 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
105106
}}
106107
/>
107108
</div>
108-
<div className="space-y-1">
109-
<Label className="text-xs text-slate-300">
110-
Loop Value Parameter
111-
</Label>
109+
<div className="space-y-2">
110+
<div className="flex gap-2">
111+
<Label className="text-xs text-slate-300">
112+
Loop Value Parameter
113+
</Label>
114+
<HelpTooltip content={helpTooltipContent["loopValue"]} />
115+
</div>
112116
<Select
113117
value={data.loopValue}
114118
onValueChange={(value) => {
115119
updateNodeData(id, { loopValue: value });
116120
}}
117121
>
118122
<SelectTrigger>
119-
<SelectValue placeholder="Select a parameter" />
123+
<SelectValue placeholder="Select the parameter to iterate over" />
120124
</SelectTrigger>
121125
<SelectContent>
122126
{[...parameterKeys, ...outputParameterKeys].map(

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

+5
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,8 @@ export const loopNodeDefaultData: LoopNodeData = {
1717
export function isLoopNode(node: Node): node is LoopNode {
1818
return node.type === "loop";
1919
}
20+
21+
export const helpTooltipContent = {
22+
loopValue:
23+
"Define this parameterized field with a parameter key to let Skyvern know the core value you're iterating over.",
24+
} as const;

‎skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
88
import { useState } from "react";
99
import { EditableNodeTitle } from "../components/EditableNodeTitle";
1010
import { NodeActionMenu } from "../NodeActionMenu";
11-
import type { SendEmailNode } from "./types";
11+
import { helpTooltipContent, type SendEmailNode } from "./types";
12+
import { HelpTooltip } from "@/components/HelpTooltip";
1213

1314
function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
1415
const { updateNodeData } = useReactFlow();
@@ -69,7 +70,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
6970
}}
7071
/>
7172
</div>
72-
<div className="space-y-1">
73+
<div className="space-y-2">
7374
<Label className="text-xs text-slate-300">Recipients</Label>
7475
<Input
7576
onChange={(event) => {
@@ -84,7 +85,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
8485
/>
8586
</div>
8687
<Separator />
87-
<div className="space-y-1">
88+
<div className="space-y-2">
8889
<Label className="text-xs text-slate-300">Subject</Label>
8990
<Input
9091
onChange={(event) => {
@@ -98,7 +99,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
9899
className="nopan text-xs"
99100
/>
100101
</div>
101-
<div className="space-y-1">
102+
<div className="space-y-2">
102103
<Label className="text-xs text-slate-300">Body</Label>
103104
<Input
104105
onChange={(event) => {
@@ -113,8 +114,11 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
113114
/>
114115
</div>
115116
<Separator />
116-
<div className="space-y-1">
117-
<Label className="text-xs text-slate-300">File Attachments</Label>
117+
<div className="space-y-2">
118+
<div className="flex gap-2">
119+
<Label className="text-xs text-slate-300">File Attachments</Label>
120+
<HelpTooltip content={helpTooltipContent["fileAttachments"]} />
121+
</div>
118122
<Input
119123
value={inputs.fileAttachments}
120124
onChange={(event) => {

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

+5
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,8 @@ export const sendEmailNodeDefaultData: SendEmailNodeData = {
3737
smtpUsernameSecretParameterKey: SMTP_USERNAME_PARAMETER_KEY,
3838
smtpPasswordSecretParameterKey: SMTP_PASSWORD_PARAMETER_KEY,
3939
} as const;
40+
41+
export const helpTooltipContent = {
42+
fileAttachments:
43+
"Since we're in beta this section isn't fully customizable yet, contact us if you'd like to integrate it into your workflow.",
44+
} as const;

‎skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx

+12-17
Original file line numberDiff line numberDiff line change
@@ -480,23 +480,18 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
480480
}}
481481
/>
482482
</div>
483-
<div className="flex items-center justify-between">
484-
<TaskNodeDisplayModeSwitch
485-
value={displayMode}
486-
onChange={(mode) => {
487-
setDisplayMode(mode);
488-
if (workflowPermanentId) {
489-
localStorage.setItem(
490-
getLocalStorageKey(workflowPermanentId, label),
491-
mode,
492-
);
493-
}
494-
}}
495-
/>
496-
{displayMode === "basic" && (
497-
<HelpTooltip content={helpTooltipContent["base"]} />
498-
)}
499-
</div>
483+
<TaskNodeDisplayModeSwitch
484+
value={displayMode}
485+
onChange={(mode) => {
486+
setDisplayMode(mode);
487+
if (workflowPermanentId) {
488+
localStorage.setItem(
489+
getLocalStorageKey(workflowPermanentId, label),
490+
mode,
491+
);
492+
}
493+
}}
494+
/>
500495
{displayMode === "basic" && basicContent}
501496
{displayMode === "advanced" && advancedContent}
502497
</div>

‎skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
1010
import { useState } from "react";
1111
import { EditableNodeTitle } from "../components/EditableNodeTitle";
1212
import { NodeActionMenu } from "../NodeActionMenu";
13-
import type { TextPromptNode } from "./types";
13+
import { helpTooltipContent, type TextPromptNode } from "./types";
14+
import { HelpTooltip } from "@/components/HelpTooltip";
1415

1516
function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
1617
const { updateNodeData } = useReactFlow();
@@ -63,8 +64,11 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
6364
}}
6465
/>
6566
</div>
66-
<div className="space-y-1">
67-
<Label className="text-xs text-slate-300">Prompt</Label>
67+
<div className="space-y-2">
68+
<div className="flex gap-2">
69+
<Label className="text-xs text-slate-300">Prompt</Label>
70+
<HelpTooltip content={helpTooltipContent["prompt"]} />
71+
</div>
6872
<AutoResizingTextarea
6973
onChange={(event) => {
7074
if (!editable) {

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

+5
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,8 @@ export const textPromptNodeDefaultData: TextPromptNodeData = {
1515
prompt: "",
1616
jsonSchema: "null",
1717
} as const;
18+
19+
export const helpTooltipContent = {
20+
prompt:
21+
"Write a prompt you would like passed into the LLM and specify the output format, if applicable.",
22+
};

‎skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { UploadIcon } from "@radix-ui/react-icons";
66
import { Handle, NodeProps, Position } from "@xyflow/react";
77
import { EditableNodeTitle } from "../components/EditableNodeTitle";
88
import { NodeActionMenu } from "../NodeActionMenu";
9-
import type { UploadNode } from "./types";
9+
import { helpTooltipContent, type UploadNode } from "./types";
10+
import { HelpTooltip } from "@/components/HelpTooltip";
1011

1112
function UploadNode({ id, data }: NodeProps<UploadNode>) {
1213
const deleteNodeCallback = useDeleteNodeCallback();
@@ -53,8 +54,11 @@ function UploadNode({ id, data }: NodeProps<UploadNode>) {
5354
/>
5455
</div>
5556
<div className="space-y-4">
56-
<div className="space-y-1">
57-
<Label className="text-sm text-slate-400">File Path</Label>
57+
<div className="space-y-2">
58+
<div className="flex items-center gap-2">
59+
<Label className="text-sm text-slate-400">File Path</Label>
60+
<HelpTooltip content={helpTooltipContent["path"]} />
61+
</div>
5862
<Input value={data.path} className="nopan text-xs" disabled />
5963
</div>
6064
</div>

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

+4
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ export const uploadNodeDefaultData: UploadNodeData = {
1414
label: "",
1515
path: SKYVERN_DOWNLOAD_DIRECTORY,
1616
} as const;
17+
18+
export const helpTooltipContent = {
19+
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.",
20+
} as const;

0 commit comments

Comments
 (0)