vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add help text to other nodes (#967)

Browse Source
This commit is contained in:
Shuchang Zheng
2024-10-14 07:45:40 -07:00
committed by GitHub
parent 354d113686
commit 628321e7ba
15 changed files with 91 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/CodeBlockNode.tsx
View File

@@ -57,7 +57,7 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
}}
/>
</div>
<div className="space-y-1">
<div className="space-y-2">
<Label className="text-xs text-slate-300">Code Input</Label>
<CodeEditor
language="python"

2
skyvern-frontend/src/routes/workflows/editor/nodes/CodeBlockNode/types.ts
View File

@@ -11,5 +11,5 @@ export type CodeBlockNode = Node<CodeBlockNodeData, "codeBlock">;
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;

10
skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx
View File

@@ -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<DownloadNode>) {
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -53,8 +54,11 @@ function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
/>
</div>
<div className="space-y-4">
<div className="space-y-1">
<Label className="text-sm text-slate-400">File URL</Label>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label className="text-sm text-slate-400">File Path</Label>
<HelpTooltip content={helpTooltipContent["url"]} />
</div>
<Input value={data.url} disabled className="nopan text-xs" />
</div>
</div>

4
skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts
View File

@@ -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;

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

@@ -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<FileParserNode>) {
const { updateNodeData } = useReactFlow();
@@ -57,8 +59,11 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
/>
</div>
<div className="space-y-4">
<div className="space-y-1">
<span className="text-sm text-slate-400">File URL</span>
<div className="space-y-2">
<div className="flex gap-2">
<Label className="text-xs text-slate-300">File URL</Label>
<HelpTooltip content={helpTooltipContent["fileUrl"]} />
</div>
<Input
value={inputs.fileUrl}
onChange={(event) => {

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

@@ -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;

16
skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
View File

@@ -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<LoopNode>) {
const { updateNodeData } = useReactFlow();
@@ -105,10 +106,13 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
}}
/>
</div>
<div className="space-y-1">
<Label className="text-xs text-slate-300">
Loop Value Parameter
</Label>
<div className="space-y-2">
<div className="flex gap-2">
<Label className="text-xs text-slate-300">
Loop Value Parameter
</Label>
<HelpTooltip content={helpTooltipContent["loopValue"]} />
</div>
<Select
value={data.loopValue}
onValueChange={(value) => {
@@ -116,7 +120,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
}}
>
<SelectTrigger>
<SelectValue placeholder="Select a parameter" />
<SelectValue placeholder="Select the parameter to iterate over" />
</SelectTrigger>
<SelectContent>
{[...parameterKeys, ...outputParameterKeys].map(

5
skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/types.ts
View File

@@ -17,3 +17,8 @@ export const loopNodeDefaultData: LoopNodeData = {
export function isLoopNode(node: Node): node is LoopNode {
return node.type === "loop";
}
export const helpTooltipContent = {
loopValue:
"Define this parameterized field with a parameter key to let Skyvern know the core value you're iterating over.",
} as const;

16
skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
View File

@@ -8,7 +8,8 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
import { useState } from "react";
import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import type { SendEmailNode } from "./types";
import { helpTooltipContent, type SendEmailNode } from "./types";
import { HelpTooltip } from "@/components/HelpTooltip";
function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
const { updateNodeData } = useReactFlow();
@@ -69,7 +70,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
}}
/>
</div>
<div className="space-y-1">
<div className="space-y-2">
<Label className="text-xs text-slate-300">Recipients</Label>
<Input
onChange={(event) => {
@@ -84,7 +85,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
/>
</div>
<Separator />
<div className="space-y-1">
<div className="space-y-2">
<Label className="text-xs text-slate-300">Subject</Label>
<Input
onChange={(event) => {
@@ -98,7 +99,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
className="nopan text-xs"
/>
</div>
<div className="space-y-1">
<div className="space-y-2">
<Label className="text-xs text-slate-300">Body</Label>
<Input
onChange={(event) => {
@@ -113,8 +114,11 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
/>
</div>
<Separator />
<div className="space-y-1">
<Label className="text-xs text-slate-300">File Attachments</Label>
<div className="space-y-2">
<div className="flex gap-2">
<Label className="text-xs text-slate-300">File Attachments</Label>
<HelpTooltip content={helpTooltipContent["fileAttachments"]} />
</div>
<Input
value={inputs.fileAttachments}
onChange={(event) => {

5
skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/types.ts
View File

@@ -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;

29
skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
View File

@@ -480,23 +480,18 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
}}
/>
</div>
<div className="flex items-center justify-between">
<TaskNodeDisplayModeSwitch
value={displayMode}
onChange={(mode) => {
setDisplayMode(mode);
if (workflowPermanentId) {
localStorage.setItem(
getLocalStorageKey(workflowPermanentId, label),
mode,
);
}
}}
/>
{displayMode === "basic" && (
<HelpTooltip content={helpTooltipContent["base"]} />
)}
</div>
<TaskNodeDisplayModeSwitch
value={displayMode}
onChange={(mode) => {
setDisplayMode(mode);
if (workflowPermanentId) {
localStorage.setItem(
getLocalStorageKey(workflowPermanentId, label),
mode,
);
}
}}
/>
{displayMode === "basic" && basicContent}
{displayMode === "advanced" && advancedContent}
</div>

10
skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/TextPromptNode.tsx
View File

@@ -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<TextPromptNode>) {
const { updateNodeData } = useReactFlow();
@@ -63,8 +64,11 @@ function TextPromptNode({ id, data }: NodeProps<TextPromptNode>) {
}}
/>
</div>
<div className="space-y-1">
<Label className="text-xs text-slate-300">Prompt</Label>
<div className="space-y-2">
<div className="flex gap-2">
<Label className="text-xs text-slate-300">Prompt</Label>
<HelpTooltip content={helpTooltipContent["prompt"]} />
</div>
<AutoResizingTextarea
onChange={(event) => {
if (!editable) {

5
skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts
View File

@@ -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.",
};

10
skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx
View File

@@ -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<UploadNode>) {
const deleteNodeCallback = useDeleteNodeCallback();
@@ -53,8 +54,11 @@ function UploadNode({ id, data }: NodeProps<UploadNode>) {
/>
</div>
<div className="space-y-4">
<div className="space-y-1">
<Label className="text-sm text-slate-400">File Path</Label>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label className="text-sm text-slate-400">File Path</Label>
<HelpTooltip content={helpTooltipContent["path"]} />
</div>
<Input value={data.path} className="nopan text-xs" disabled />
</div>
</div>

4
skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts
View File

@@ -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;