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

Task node section tooltips and misc updates (#917)

Browse Source 
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Kerem Yilmaz
2024-10-07 10:53:47 -07:00
committed by GitHub
parent 07fb1a16ad
commit 413e6a838f
4 changed files with 95 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
skyvern-frontend/src/components/HelpTooltip.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
type Props = {
content: string;
};
function HelpTooltip({ content }: Props) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<QuestionMarkCircledIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">{content}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
export { HelpTooltip };

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

@@ -1,4 +1,5 @@
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { HelpTooltip } from "@/components/HelpTooltip";
import {
Accordion,
AccordionContent,
@@ -28,7 +29,11 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { TaskNodeDisplayModeSwitch } from "./TaskNodeDisplayModeSwitch";
import { TaskNodeParametersPanel } from "./TaskNodeParametersPanel";
import type { TaskNode, TaskNodeDisplayMode } from "./types";
import {
helpTooltipContent,
type TaskNode,
type TaskNodeDisplayMode,
} from "./types";
import { useParams } from "react-router-dom";
function getLocalStorageKey(workflowPermanentId: string, label: string) {
@@ -124,12 +129,16 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
const advancedContent = (
<>
<Accordion
type="multiple"
defaultValue={["content", "extraction", "limits", "totp"]}
>
<Accordion type="multiple" defaultValue={["content"]}>
<AccordionItem value="content">
<AccordionTrigger>Content</AccordionTrigger>
<AccordionTrigger>
<div className="flex w-full items-center justify-between">
<div>Content</div>
<div>
<HelpTooltip content={helpTooltipContent["base"]} />
</div>
</div>
</AccordionTrigger>
<AccordionContent className="pl-[1.5rem] pr-1">
<div className="space-y-4">
<div className="space-y-1">
@@ -173,7 +182,14 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
</AccordionContent>
</AccordionItem>
<AccordionItem value="extraction">
<AccordionTrigger>Extraction</AccordionTrigger>
<AccordionTrigger>
<div className="flex w-full items-center justify-between">
<div>Extraction</div>
<div>
<HelpTooltip content={helpTooltipContent["extraction"]} />
</div>
</div>
</AccordionTrigger>
<AccordionContent className="pl-[1.5rem] pr-1">
<div className="space-y-4">
<div className="space-y-1">
@@ -225,7 +241,14 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
</AccordionContent>
</AccordionItem>
<AccordionItem value="limits">
<AccordionTrigger>Limits</AccordionTrigger>
<AccordionTrigger>
<div className="flex w-full items-center justify-between">
<div>Limits</div>
<div>
<HelpTooltip content={helpTooltipContent["limits"]} />
</div>
</div>
</AccordionTrigger>
<AccordionContent className="pl-[1.5rem] pr-1 pt-1">
<div className="space-y-4">
<div className="flex items-center justify-between">
@@ -269,7 +292,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
</div>
<div className="flex items-center justify-between">
<Label className="text-xs font-normal text-slate-300">
Allow Downloads
Complete on Download
</Label>
<div className="w-44">
<Switch
@@ -336,7 +359,14 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
</AccordionContent>
</AccordionItem>
<AccordionItem value="totp">
<AccordionTrigger>Two Factor Authentication</AccordionTrigger>
<AccordionTrigger>
<div className="flex w-full items-center justify-between">
<div>Two-Factor Authentication</div>
<div>
<HelpTooltip content={helpTooltipContent["totp"]} />
</div>
</div>
</AccordionTrigger>
<AccordionContent className="pl-[1.5rem] pr-1">
<div className="space-y-4">
<div className="space-y-1">
@@ -351,13 +381,13 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
handleChange("totpVerificationUrl", event.target.value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder="https://"
placeholder="Link your 2FA storage endpoint"
className="nopan"
/>
</div>
<div className="space-y-1">
<Label className="text-xs text-slate-300">
TOTP Identifier
Unique Identifier
</Label>
<AutoResizingTextarea
onChange={(event) => {
@@ -367,7 +397,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
handleChange("totpIdentifier", event.target.value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder="Identifier"
placeholder="Add an ID that links your TOTP to the task"
className="nopan"
/>
</div>
@@ -415,19 +445,23 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
}}
/>
</div>
<TaskNodeDisplayModeSwitch
value={displayMode}
onChange={(mode) => {
setDisplayMode(mode);
if (workflowPermanentId) {
localStorage.setItem(
getLocalStorageKey(workflowPermanentId, label),
mode,
);
}
}}
/>
<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>
{displayMode === "basic" && basicContent}
{displayMode === "advanced" && advancedContent}
</div>

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

@@ -1,11 +1,4 @@
import { MultiSelect } from "@/components/ui/multi-select";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
import { useWorkflowParametersState } from "../../useWorkflowParametersState";
type Props = {
@@ -32,19 +25,9 @@ function TaskNodeParametersPanel({
});
return (
<div className="space-y-4">
<div className="space-y-1">
<header className="flex gap-2">
<h1 className="text-xs text-slate-300">Parameters</h1>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<QuestionMarkCircledIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent>
Select the parameters that will be passed to the task.
</TooltipContent>
</Tooltip>
</TooltipProvider>
</header>
<MultiSelect
value={parameters}

8
skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
View File

@@ -41,3 +41,11 @@ export const taskNodeDefaultData: TaskNodeData = {
export function isTaskNode(node: Node): node is TaskNode {
return node.type === "task";
}
export const helpTooltipContent = {
base: "Tell Skyvern what to do. This is the core of your task block, so make sure your prompt tells Skyvern when it has completed its task, any guardrails, and if there are cases where it should terminate the task early. Define placeholder values using the “parameters” drop down that you predefine or redefine run-to-run. This allows you to make a workflow generalizable to a variety of use cases that change with every run.",
extraction:
"Tell Skyvern what to extract and how it should be formatted, if applicable.",
limits:
"Give Skyvern limitations, such as number of retries on failure, the number of maximum steps, the option to download and append suffix identifiers, and return message for errors Skyvern encounters.",
totp: "Link your internal TOTP storage system to relay 2FA codes we encounter straight to Skyvern. If you have multiple tasks running simultaneously, make sure to link an identifier so Skyvern knows which TOTP URL goes with which task.",
};