From 76f1712045b22416161615d8b7b313f504d64d25 Mon Sep 17 00:00:00 2001 From: Shuchang Zheng Date: Mon, 2 Dec 2024 09:19:11 -0800 Subject: [PATCH] refactor: tooltips and placeholders (#1302) Co-authored-by: Muhammed Salih Altun --- .../src/routes/workflows/editor/constants.ts | 30 ----- .../routes/workflows/editor/helpContent.ts | 125 ++++++++++++++++++ .../editor/nodes/ActionNode/ActionNode.tsx | 31 ++--- .../nodes/DownloadNode/DownloadNode.tsx | 5 +- .../editor/nodes/DownloadNode/types.ts | 4 - .../nodes/ExtractionNode/ExtractionNode.tsx | 30 ++--- .../FileDownloadNode/FileDownloadNode.tsx | 33 +++-- .../nodes/FileParserNode/FileParserNode.tsx | 5 +- .../editor/nodes/FileParserNode/types.ts | 5 - .../editor/nodes/LoginNode/LoginNode.tsx | 42 +++--- .../editor/nodes/LoopNode/LoopNode.tsx | 5 +- .../workflows/editor/nodes/LoopNode/types.ts | 5 - .../nodes/NavigationNode/NavigationNode.tsx | 54 ++++---- .../nodes/SendEmailNode/SendEmailNode.tsx | 9 +- .../editor/nodes/SendEmailNode/types.ts | 5 - .../nodes/TaskNode/ParametersMultiSelect.tsx | 4 +- .../editor/nodes/TaskNode/TaskNode.tsx | 49 ++++--- .../TaskNode/TaskNodeParametersPanel.tsx | 4 +- .../workflows/editor/nodes/TaskNode/types.ts | 46 ------- .../nodes/TextPromptNode/TextPromptNode.tsx | 11 +- .../editor/nodes/TextPromptNode/types.ts | 5 - .../editor/nodes/UploadNode/UploadNode.tsx | 7 +- .../editor/nodes/UploadNode/types.ts | 4 - .../nodes/ValidationNode/ValidationNode.tsx | 7 +- .../editor/nodes/ValidationNode/types.ts | 7 - .../editor/nodes/WaitNode/WaitNode.tsx | 3 +- 26 files changed, 270 insertions(+), 265 deletions(-) create mode 100644 skyvern-frontend/src/routes/workflows/editor/helpContent.ts diff --git a/skyvern-frontend/src/routes/workflows/editor/constants.ts b/skyvern-frontend/src/routes/workflows/editor/constants.ts index bc219a47..4a38ffed 100644 --- a/skyvern-frontend/src/routes/workflows/editor/constants.ts +++ b/skyvern-frontend/src/routes/workflows/editor/constants.ts @@ -14,33 +14,3 @@ export const SMTP_USERNAME_AWS_KEY = "SKYVERN_SMTP_USERNAME_SES"; export const SMTP_PASSWORD_AWS_KEY = "SKYVERN_SMTP_PASSWORD_SES"; export const EMAIL_BLOCK_SENDER = "hello@skyvern.com"; - -export const commonHelpTooltipContent = { - maxRetries: - "Specify how many times you would like a task to retry upon failure.", - maxStepsOverride: - "Specify the maximum number of steps a task can take in total.", - completeOnDownload: - "Allow Skyvern to auto-complete the task when it downloads a file.", - fileSuffix: - "A file suffix that's automatically added to all downloaded files.", - errorCodeMapping: - "Knowing about why a task terminated can be important, specify error messages here.", - totpVerificationUrl: - "If you have an internal system for storing TOTP codes, link the endpoint here.", - totpIdentifier: - "If you are running multiple tasks or workflows at once, you will need to give the task an identifier to know that this TOTP goes with this task.", - continueOnFailure: - "Allow the workflow to continue if it encounters a failure.", - cacheActions: "Cache the actions of this task.", -} as const; - -export const commonFieldPlaceholders = { - url: "https://", - navigationGoal: 'Input text into "Name" field.', - maxRetries: "Default: 3", - maxStepsOverride: "Default: 10", - downloadSuffix: "Add an ID for downloaded files", - totpVerificationUrl: "Provide your 2FA endpoint", - totpIdentifier: "Add an ID that links your TOTP to the task", -} as const; diff --git a/skyvern-frontend/src/routes/workflows/editor/helpContent.ts b/skyvern-frontend/src/routes/workflows/editor/helpContent.ts new file mode 100644 index 00000000..e619e5f0 --- /dev/null +++ b/skyvern-frontend/src/routes/workflows/editor/helpContent.ts @@ -0,0 +1,125 @@ +export const baseHelpTooltipContent = { + url: "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.", + navigationGoal: + "Give Skyvern an objective. Make sure to include when the block is complete, when it should self-terminate, and any guardrails.", + parameters: + "Define placeholder values using the “parameters” drop down that you predefine or redefine run-to-run.", + dataExtractionGoal: + "Tell Skyvern what data you would like to scrape at the end of your run.", + dataSchema: "Specify a format for extracted data in JSON.", + maxRetries: + "Specify how many times you would like a block to retry upon failure.", + maxStepsOverride: + "Specify the maximum number of steps a block can take in total.", + completeOnDownload: + "Allow Skyvern to auto-complete the block when it downloads a file.", + fileSuffix: + "A file suffix that's automatically added to all downloaded files.", + errorCodeMapping: + "Knowing about why a block terminated can be important, specify error messages here.", + totpVerificationUrl: + "If you have an internal system for storing TOTP codes, link the endpoint here.", + totpIdentifier: + "If you are running multiple workflows at once, you will need to give the block an identifier to know that this TOTP goes with this block.", + continueOnFailure: + "Allow the workflow to continue if it encounters a failure.", + cacheActions: "Cache the actions of this block.", +} as const; + +export const basePlaceholderContent = { + url: "https://", + navigationGoal: "Tell Skyvern what to do.", + dataExtractionGoal: "What data do you need to extract?", + maxRetries: "Default: 3", + maxStepsOverride: "Default: 10", + downloadSuffix: "Add an ID for downloaded files", + totpVerificationUrl: "Provide your 2FA endpoint", + totpIdentifier: "Add an ID that links your TOTP to the block", +}; + +export const helpTooltips = { + task: baseHelpTooltipContent, + navigation: baseHelpTooltipContent, + extraction: { + ...baseHelpTooltipContent, + dataExtractionGoal: + "Tell Skyvern what data you would like to scrape. Use {{ parameter_name }} to specify parameters to use.", + }, + action: { + ...baseHelpTooltipContent, + navigationGoal: + "Specify a single step or action you'd like Skyvern to complete. Actions are one-off tasks like filling a field or interacting with a specific element on the page.\n\nCurrently supported actions are click, input text, upload file, and select. Use {{ parameter_name }} to specify parameters to use.", + }, + fileDownload: { + ...baseHelpTooltipContent, + navigationGoal: + "Give Skyvern an objective that describes how to download the file.", + }, + validation: baseHelpTooltipContent, + textPrompt: { + ...baseHelpTooltipContent, + prompt: + "Write a prompt you would like passed into the LLM and specify the output format, if applicable.", + }, + login: baseHelpTooltipContent, + loop: { + ...baseHelpTooltipContent, + loopValue: + "Define this parameterized field with a parameter key to let Skyvern know the core value you're iterating over.", + }, + sendEmail: { + ...baseHelpTooltipContent, + 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.", + }, + upload: { + ...baseHelpTooltipContent, + 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.", + }, + download: { + ...baseHelpTooltipContent, + 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.", + }, + codeBlock: baseHelpTooltipContent, + fileParser: { + ...baseHelpTooltipContent, + 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.", + }, + wait: { + ...baseHelpTooltipContent, + waitInSeconds: + "Specify a number for how many seconds to wait. Value must be between 0 and 300 seconds.", + }, +}; + +export const placeholders = { + task: basePlaceholderContent, + navigation: { + ...basePlaceholderContent, + navigationGoal: + "Give Skyvern an objective. Make sure to include when the task is complete, when it should self-terminate, and any guardrails.", + }, + extraction: { + ...basePlaceholderContent, + dataExtractionGoal: + "Extract the price of the product with id {{ product_id }}", + }, + action: { + ...basePlaceholderContent, + navigationGoal: 'Input {{ name }} into "Name" field.', + }, + fileDownload: { + navigationGoal: "Tell Skyvern which file to download.", + }, + validation: basePlaceholderContent, + textPrompt: basePlaceholderContent, + login: basePlaceholderContent, + loop: basePlaceholderContent, + sendEmail: basePlaceholderContent, + upload: basePlaceholderContent, + download: basePlaceholderContent, + codeBlock: basePlaceholderContent, + fileUrl: basePlaceholderContent, + wait: basePlaceholderContent, +}; diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx index 59f06621..27424495 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx @@ -21,10 +21,7 @@ import { errorMappingExampleValue } from "../types"; import { CodeEditor } from "@/routes/workflows/components/CodeEditor"; import { Switch } from "@/components/ui/switch"; import { ClickIcon } from "@/components/icons/ClickIcon"; -import { - commonFieldPlaceholders, - commonHelpTooltipContent, -} from "../../constants"; +import { placeholders, helpTooltips } from "../../helpContent"; const urlTooltip = "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off."; @@ -113,7 +110,7 @@ function ActionNode({ id, data }: NodeProps) { handleChange("url", event.target.value); }} value={inputs.url} - placeholder={commonFieldPlaceholders["url"]} + placeholder={placeholders["action"]["url"]} className="nopan text-xs" /> @@ -151,12 +148,12 @@ function ActionNode({ id, data }: NodeProps) { Max Retries ) { Error Messages ) { Continue on Failure
@@ -243,7 +240,7 @@ function ActionNode({ id, data }: NodeProps) { Cache Actions
@@ -265,7 +262,7 @@ function ActionNode({ id, data }: NodeProps) { Complete on Download
@@ -286,12 +283,12 @@ function ActionNode({ id, data }: NodeProps) { File Suffix
{ @@ -309,7 +306,7 @@ function ActionNode({ id, data }: NodeProps) { 2FA Verification URL ) { handleChange("totpVerificationUrl", event.target.value); }} value={inputs.totpVerificationUrl ?? ""} - placeholder={commonFieldPlaceholders["totpVerificationUrl"]} + placeholder={placeholders["action"]["totpVerificationUrl"]} className="nopan text-xs" /> @@ -330,7 +327,7 @@ function ActionNode({ id, data }: NodeProps) { 2FA Identifier ) { handleChange("totpIdentifier", event.target.value); }} value={inputs.totpIdentifier ?? ""} - placeholder={commonFieldPlaceholders["totpIdentifier"]} + placeholder={placeholders["action"]["totpIdentifier"]} className="nopan text-xs" /> 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 c24dd3de..47560d2c 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx @@ -6,8 +6,9 @@ import { DownloadIcon } from "@radix-ui/react-icons"; import { Handle, NodeProps, Position } from "@xyflow/react"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import { helpTooltipContent, type DownloadNode } from "./types"; +import type { DownloadNode } from "./types"; import { HelpTooltip } from "@/components/HelpTooltip"; +import { helpTooltips } from "../../helpContent"; function DownloadNode({ id, data }: NodeProps) { const [label, setLabel] = useNodeLabelChangeHandler({ @@ -57,7 +58,7 @@ 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 191b3623..7bb3f6a4 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/types.ts @@ -14,7 +14,3 @@ export const downloadNodeDefaultData: DownloadNodeData = { url: SKYVERN_DOWNLOAD_DIRECTORY, continueOnFailure: false, } 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/ExtractionNode/ExtractionNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx index aa96f772..770ead1f 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx @@ -20,17 +20,9 @@ import { dataSchemaExampleValue } from "../types"; import { CodeEditor } from "@/routes/workflows/components/CodeEditor"; import { Switch } from "@/components/ui/switch"; import type { ExtractionNode } from "./types"; -import { - commonFieldPlaceholders, - commonHelpTooltipContent, -} from "../../constants"; import { ExtractIcon } from "@/components/icons/ExtractIcon"; -const dataExtractionGoalTooltip = - "Tell Skyvern what data you would like to scrape. Use {{ parameter_name }} to specify parameters to use."; -const dataSchemaTooltip = "Specify a format for extracted data in JSON."; -const dataExtractionGoalPlaceholder = - "Extract the price of the product with id {{ product_id }}"; +import { helpTooltips, placeholders } from "../../helpContent"; function ExtractionNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -100,7 +92,9 @@ function ExtractionNode({ id, data }: NodeProps) { - + { @@ -110,7 +104,7 @@ function ExtractionNode({ id, data }: NodeProps) { handleChange("dataExtractionGoal", event.target.value); }} value={inputs.dataExtractionGoal} - placeholder={dataExtractionGoalPlaceholder} + placeholder={placeholders["extraction"]["dataExtractionGoal"]} className="nopan text-xs" /> @@ -118,7 +112,7 @@ function ExtractionNode({ id, data }: NodeProps) {
- +
) { Max Retries
) { Max Steps Override ) { Continue on Failure
@@ -242,7 +236,7 @@ function ExtractionNode({ id, data }: NodeProps) { Cache Actions
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx index 305565fb..478d5bad 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx @@ -17,14 +17,11 @@ import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChan import { DownloadIcon } from "@radix-ui/react-icons"; import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react"; import { useState } from "react"; -import { - commonFieldPlaceholders, - commonHelpTooltipContent, -} from "../../constants"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; import { errorMappingExampleValue } from "../types"; import type { FileDownloadNode } from "./types"; +import { helpTooltips, placeholders } from "../../helpContent"; const urlTooltip = "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off."; @@ -154,12 +151,12 @@ function FileDownloadNode({ id, data }: NodeProps) { Max Retries
) { Max Steps Override ) { Error Messages ) { Continue on Failure
@@ -273,7 +270,7 @@ function FileDownloadNode({ id, data }: NodeProps) { Cache Actions
@@ -295,12 +292,12 @@ function FileDownloadNode({ id, data }: NodeProps) { File Suffix
{ @@ -318,7 +315,7 @@ function FileDownloadNode({ id, data }: NodeProps) { 2FA Verification URL ) { handleChange("totpVerificationUrl", event.target.value); }} value={inputs.totpVerificationUrl ?? ""} - placeholder={commonFieldPlaceholders["totpVerificationUrl"]} + placeholder={ + placeholders["download"]["totpVerificationUrl"] + } className="nopan text-xs" /> @@ -339,7 +338,7 @@ function FileDownloadNode({ id, data }: NodeProps) { 2FA Identifier ) { handleChange("totpIdentifier", event.target.value); }} value={inputs.totpIdentifier ?? ""} - placeholder={commonFieldPlaceholders["totpIdentifier"]} + placeholder={placeholders["download"]["totpIdentifier"]} className="nopan text-xs" /> 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 30e7dc4f..f702091a 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx @@ -6,9 +6,10 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react"; import { useState } from "react"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import { helpTooltipContent, type FileParserNode } from "./types"; +import { type FileParserNode } from "./types"; import { Label } from "@/components/ui/label"; import { HelpTooltip } from "@/components/HelpTooltip"; +import { helpTooltips } from "../../helpContent"; function FileParserNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -62,7 +63,7 @@ function FileParserNode({ id, data }: NodeProps) {
- +
) { const { updateNodeData } = useReactFlow(); @@ -103,7 +93,7 @@ function LoginNode({ id, data }: NodeProps) {
- +
{ @@ -113,14 +103,14 @@ function LoginNode({ id, data }: NodeProps) { handleChange("url", event.target.value); }} value={inputs.url} - placeholder={urlPlaceholder} + placeholder={placeholders["login"]["url"]} className="nopan text-xs" />
- +
{ @@ -130,7 +120,7 @@ function LoginNode({ id, data }: NodeProps) { handleChange("navigationGoal", event.target.value); }} value={inputs.navigationGoal} - placeholder={navigationGoalPlaceholder} + placeholder={placeholders["login"]["navigationGoal"]} className="nopan text-xs" />
@@ -175,12 +165,12 @@ function LoginNode({ id, data }: NodeProps) { Max Retries
) { Max Steps Override ) { Error Messages ) { Continue on Failure
@@ -294,7 +284,7 @@ function LoginNode({ id, data }: NodeProps) { Cache Actions
@@ -316,7 +306,7 @@ function LoginNode({ id, data }: NodeProps) { 2FA Verification URL
) { handleChange("totpVerificationUrl", event.target.value); }} value={inputs.totpVerificationUrl ?? ""} - placeholder={commonFieldPlaceholders["totpVerificationUrl"]} + placeholder={placeholders["login"]["totpVerificationUrl"]} className="nopan text-xs" /> @@ -337,7 +327,7 @@ function LoginNode({ id, data }: NodeProps) { 2FA Identifier ) { handleChange("totpIdentifier", event.target.value); }} value={inputs.totpIdentifier ?? ""} - placeholder={commonFieldPlaceholders["totpIdentifier"]} + placeholder={placeholders["login"]["totpIdentifier"]} className="nopan text-xs" /> 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 1fd8ae81..bd95c41a 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx @@ -23,8 +23,9 @@ import { useWorkflowParametersState } from "../../useWorkflowParametersState"; import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import { helpTooltipContent, type LoopNode } from "./types"; +import type { LoopNode } from "./types"; import { HelpTooltip } from "@/components/HelpTooltip"; +import { helpTooltips } from "../../helpContent"; function LoopNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -111,7 +112,7 @@ function LoopNode({ id, data }: NodeProps) { - + ) { Max Steps Override ) { Error Messages ) { Continue on Failure
@@ -269,7 +261,7 @@ function NavigationNode({ id, data }: NodeProps) { Cache Actions
@@ -291,7 +283,7 @@ function NavigationNode({ id, data }: NodeProps) { Complete on Download
@@ -312,12 +304,12 @@ function NavigationNode({ id, data }: NodeProps) { File Suffix
{ @@ -335,7 +327,9 @@ function NavigationNode({ id, data }: NodeProps) { 2FA Verification URL ) { handleChange("totpVerificationUrl", event.target.value); }} value={inputs.totpVerificationUrl ?? ""} - placeholder={commonFieldPlaceholders["totpVerificationUrl"]} + placeholder={ + placeholders["navigation"]["totpVerificationUrl"] + } className="nopan text-xs" /> @@ -356,7 +352,7 @@ function NavigationNode({ id, data }: NodeProps) { 2FA Identifier ) { handleChange("totpIdentifier", event.target.value); }} value={inputs.totpIdentifier ?? ""} - placeholder={commonFieldPlaceholders["totpIdentifier"]} + placeholder={placeholders["navigation"]["totpIdentifier"]} className="nopan text-xs" /> diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx index 6abd7b62..688dbbc5 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx @@ -1,3 +1,4 @@ +import { HelpTooltip } from "@/components/HelpTooltip"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Separator } from "@/components/ui/separator"; @@ -6,10 +7,10 @@ import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChan import { EnvelopeClosedIcon } from "@radix-ui/react-icons"; import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react"; import { useState } from "react"; +import { helpTooltips } from "../../helpContent"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import { helpTooltipContent, type SendEmailNode } from "./types"; -import { HelpTooltip } from "@/components/HelpTooltip"; +import { type SendEmailNode } from "./types"; function SendEmailNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -117,7 +118,9 @@ function SendEmailNode({ id, data }: NodeProps) {
- +
; @@ -30,7 +30,7 @@ function ParametersMultiSelect({

Parameters

- +
) { const { updateNodeData } = useReactFlow(); @@ -113,7 +114,7 @@ function TaskNode({ id, data }: NodeProps) {
- +
{ @@ -123,7 +124,7 @@ function TaskNode({ id, data }: NodeProps) { handleChange("url", event.target.value); }} value={inputs.url} - placeholder={fieldPlaceholders["url"]} + placeholder={placeholders["task"]["url"]} className="nopan text-xs" />
@@ -131,7 +132,7 @@ function TaskNode({ id, data }: NodeProps) {
) { handleChange("navigationGoal", event.target.value); }} value={inputs.navigationGoal} - placeholder={fieldPlaceholders["navigationGoal"]} + placeholder={placeholders["task"]["navigationGoal"]} className="nopan text-xs" />
@@ -168,7 +169,7 @@ function TaskNode({ id, data }: NodeProps) { Data Extraction Goal
) { handleChange("dataExtractionGoal", event.target.value); }} value={inputs.dataExtractionGoal} - placeholder={fieldPlaceholders["dataExtractionGoal"]} + placeholder={placeholders["task"]["dataExtractionGoal"]} className="nopan text-xs" /> @@ -189,7 +190,9 @@ function TaskNode({ id, data }: NodeProps) { - + ) { - + ) { Max Steps Override ) { Error Messages ) { Continue on Failure
@@ -352,7 +355,9 @@ function TaskNode({ id, data }: NodeProps) { - +
) { Complete on Download
@@ -393,11 +398,11 @@ function TaskNode({ id, data }: NodeProps) { - +
{ @@ -415,7 +420,7 @@ function TaskNode({ id, data }: NodeProps) { 2FA Verification URL ) { handleChange("totpVerificationUrl", event.target.value); }} value={inputs.totpVerificationUrl ?? ""} - placeholder={fieldPlaceholders["totpVerificationUrl"]} + placeholder={placeholders["task"]["totpVerificationUrl"]} className="nopan text-xs" /> @@ -436,7 +441,7 @@ function TaskNode({ id, data }: NodeProps) { 2FA Identifier ) { handleChange("totpIdentifier", event.target.value); }} value={inputs.totpIdentifier ?? ""} - placeholder={fieldPlaceholders["totpIdentifier"]} + placeholder={placeholders["task"]["totpIdentifier"]} className="nopan text-xs" /> 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 096eb8e6..f844345c 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx @@ -1,7 +1,7 @@ import { MultiSelect } from "@/components/ui/multi-select"; import { useWorkflowParametersState } from "../../useWorkflowParametersState"; import { HelpTooltip } from "@/components/HelpTooltip"; -import { helpTooltipContent } from "./types"; +import { helpTooltips } from "../../helpContent"; type Props = { availableOutputParameters: Array; @@ -30,7 +30,7 @@ function TaskNodeParametersPanel({

Parameters

- +
) { const { updateNodeData } = useReactFlow(); @@ -81,7 +82,7 @@ function TextPromptNode({ id, data }: NodeProps) {
- +
{ 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 f0eeb746..bff6d0fd 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TextPromptNode/types.ts @@ -17,8 +17,3 @@ export const textPromptNodeDefaultData: TextPromptNodeData = { continueOnFailure: false, parameterKeys: [], } 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 7ba0b078..4c990b55 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/UploadNode.tsx @@ -1,13 +1,14 @@ +import { HelpTooltip } from "@/components/HelpTooltip"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback"; import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler"; import { UploadIcon } from "@radix-ui/react-icons"; import { Handle, NodeProps, Position } from "@xyflow/react"; +import { helpTooltips } from "../../helpContent"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; -import { helpTooltipContent, type UploadNode } from "./types"; -import { HelpTooltip } from "@/components/HelpTooltip"; +import { type UploadNode } from "./types"; function UploadNode({ id, data }: NodeProps) { const deleteNodeCallback = useDeleteNodeCallback(); @@ -57,7 +58,7 @@ 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 c313a3cb..f2bc75a3 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/UploadNode/types.ts @@ -15,7 +15,3 @@ export const uploadNodeDefaultData: UploadNodeData = { path: SKYVERN_DOWNLOAD_DIRECTORY, continueOnFailure: false, } 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; diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx index 6cf2fced..df513c25 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx @@ -1,5 +1,5 @@ import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react"; -import { helpTooltipContent, type ValidationNode } from "./types"; +import type { ValidationNode } from "./types"; import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler"; import { useState } from "react"; import { CheckCircledIcon } from "@radix-ui/react-icons"; @@ -20,6 +20,7 @@ import { AccordionTrigger, } from "@/components/ui/accordion"; import { Separator } from "@/components/ui/separator"; +import { helpTooltips } from "../../helpContent"; function ValidationNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -121,7 +122,7 @@ function ValidationNode({ id, data }: NodeProps) { Error Messages
) { Continue on Failure
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/types.ts index ed2868dd..f1a3183c 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/types.ts +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/types.ts @@ -20,13 +20,6 @@ export const validationNodeDefaultData: ValidationNodeData = { parameterKeys: [], }; -export const helpTooltipContent = { - errorCodeMapping: - "Knowing about why a block terminated can be important, specify error messages here.", - continueOnFailure: - "Allow the workflow to continue if it encounters a failure.", -} as const; - export function isValidationNode(node: Node): node is ValidationNode { return node.type === "validation"; } diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx index d8703b57..fbc44d3b 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/WaitNode/WaitNode.tsx @@ -9,6 +9,7 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; import type { WaitNode } from "./types"; import { HelpTooltip } from "@/components/HelpTooltip"; +import { helpTooltips } from "../../helpContent"; function WaitNode({ id, data }: NodeProps) { const { updateNodeData } = useReactFlow(); @@ -72,7 +73,7 @@ function WaitNode({ id, data }: NodeProps) { - +