From 413e6a838fb2f317b2d5ba0f67d985fa10c008c9 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Mon, 7 Oct 2024 10:53:47 -0700
Subject: [PATCH] Task node section tooltips and misc updates (#917)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 .../src/components/HelpTooltip.tsx            | 26 ++++++
 .../editor/nodes/TaskNode/TaskNode.tsx        | 86 +++++++++++++------
 .../TaskNode/TaskNodeParametersPanel.tsx      | 19 +---
 .../workflows/editor/nodes/TaskNode/types.ts  |  8 ++
 4 files changed, 95 insertions(+), 44 deletions(-)
 create mode 100644 skyvern-frontend/src/components/HelpTooltip.tsx

diff --git a/skyvern-frontend/src/components/HelpTooltip.tsx b/skyvern-frontend/src/components/HelpTooltip.tsx
new file mode 100644
index 00000000..ab2f17d6
--- /dev/null
+++ b/skyvern-frontend/src/components/HelpTooltip.tsx
@@ -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 };
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 2f3dfdc0..c30ea97b 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
@@ -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>
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx
index efc9b7c7..5afa2182 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx
@@ -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}
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
index f3560f06..d1a69d08 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
@@ -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.",
+};