remove orgwalls for caching (#3357)

This commit is contained in:
Shuchang Zheng
2025-09-04 09:01:16 -07:00
committed by GitHub
parent d37068933d
commit f3392899e2
4 changed files with 127 additions and 141 deletions

View File

@@ -48,7 +48,6 @@ import {
MAX_SCREENSHOT_SCROLLS_DEFAULT, MAX_SCREENSHOT_SCROLLS_DEFAULT,
MAX_STEPS_DEFAULT, MAX_STEPS_DEFAULT,
} from "@/routes/workflows/editor/nodes/Taskv2Node/types"; } from "@/routes/workflows/editor/nodes/Taskv2Node/types";
import { OrgWalled } from "@/components/Orgwalled";
function createTemplateTaskFromTaskGenerationParameters( function createTemplateTaskFromTaskGenerationParameters(
values: TaskGenerationApiResponse, values: TaskGenerationApiResponse,
@@ -471,23 +470,22 @@ function PromptBox() {
/> />
</div> </div>
</div> </div>
<OrgWalled className="p-0">
<div className="flex gap-16"> <div className="flex gap-16">
<div className="w-48 shrink-0"> <div className="w-48 shrink-0">
<div className="text-sm">Generate Script</div> <div className="text-sm">Generate Script</div>
<div className="text-xs text-slate-400"> <div className="text-xs text-slate-400">
Whether to generate scripts for this task run (on Whether to generate scripts for this task run (on
success). success).
</div>
</div> </div>
<Switch
checked={generateScript}
onCheckedChange={(checked) => {
setGenerateScript(Boolean(checked));
}}
/>
</div> </div>
</OrgWalled> <Switch
checked={generateScript}
onCheckedChange={(checked) => {
setGenerateScript(Boolean(checked));
}}
/>
</div>
<div className="flex gap-16"> <div className="flex gap-16">
<div className="w-48 shrink-0"> <div className="w-48 shrink-0">
<div className="text-sm">Publish Workflow</div> <div className="text-sm">Publish Workflow</div>

View File

@@ -30,7 +30,6 @@ import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
import { cn } from "@/util/utils"; import { cn } from "@/util/utils";
import { WorkflowApiResponse } from "../types/workflowTypes"; import { WorkflowApiResponse } from "../types/workflowTypes";
import { CacheKeyValuesResponse } from "@/routes/workflows/types/scriptTypes"; import { CacheKeyValuesResponse } from "@/routes/workflows/types/scriptTypes";
import { OrgWalled } from "@/components/Orgwalled";
interface Dom { interface Dom {
input: React.MutableRefObject<HTMLInputElement | null>; input: React.MutableRefObject<HTMLInputElement | null>;
@@ -126,64 +125,62 @@ function WorkflowHeader({
<div className="flex h-full items-center justify-end gap-4"> <div className="flex h-full items-center justify-end gap-4">
{user && workflow.generate_script && ( {user && workflow.generate_script && (
// (cacheKeyValues?.total_count ?? 0) > 0 && ( // (cacheKeyValues?.total_count ?? 0) > 0 && (
<OrgWalled className="p-0"> <div
<div tabIndex={1}
tabIndex={1} className="flex max-w-[15rem] items-center justify-center gap-1 rounded-md border border-input pr-1 focus-within:ring-1 focus-within:ring-ring"
className="flex max-w-[15rem] items-center justify-center gap-1 rounded-md border border-input pr-1 focus-within:ring-1 focus-within:ring-ring" >
> <Input
<Input ref={dom.input}
ref={dom.input} className="focus-visible:transparent focus-visible:none h-[2.75rem] text-ellipsis whitespace-nowrap border-none focus-visible:outline-none focus-visible:ring-0"
className="focus-visible:transparent focus-visible:none h-[2.75rem] text-ellipsis whitespace-nowrap border-none focus-visible:outline-none focus-visible:ring-0" onChange={(e) => {
onChange={(e) => { setChosenCacheKeyValue(e.target.value);
setChosenCacheKeyValue(e.target.value); onCacheKeyValuesFilter(e.target.value);
onCacheKeyValuesFilter(e.target.value); }}
}} onMouseDown={() => {
onMouseDown={() => { if (!cacheKeyValuesPanelOpen) {
if (!cacheKeyValuesPanelOpen) { onCacheKeyValuesClick();
onCacheKeyValuesClick(); }
} }}
}} onKeyDown={(e) => {
onKeyDown={(e) => { if (e.key === "Enter") {
if (e.key === "Enter") { const numFiltered = cacheKeyValues?.values?.length ?? 0;
const numFiltered = cacheKeyValues?.values?.length ?? 0;
if (numFiltered === 1) { if (numFiltered === 1) {
const first = cacheKeyValues?.values?.[0]; const first = cacheKeyValues?.values?.[0];
if (first) { if (first) {
setChosenCacheKeyValue(first); setChosenCacheKeyValue(first);
onCacheKeyValueAccept(first); onCacheKeyValueAccept(first);
}
return;
} }
return;
setChosenCacheKeyValue(chosenCacheKeyValue);
onCacheKeyValueAccept(chosenCacheKeyValue);
} }
onCacheKeyValuesKeydown(e);
}} setChosenCacheKeyValue(chosenCacheKeyValue);
placeholder="Code Key Value" onCacheKeyValueAccept(chosenCacheKeyValue);
value={chosenCacheKeyValue ?? undefined} }
onBlur={(e) => { onCacheKeyValuesKeydown(e);
onCacheKeyValuesBlurred(e.target.value); }}
setChosenCacheKeyValue(e.target.value); placeholder="Code Key Value"
value={chosenCacheKeyValue ?? undefined}
onBlur={(e) => {
onCacheKeyValuesBlurred(e.target.value);
setChosenCacheKeyValue(e.target.value);
}}
/>
{cacheKeyValuesPanelOpen ? (
<ChevronUpIcon
className="h-6 w-6 cursor-pointer"
onClick={onCacheKeyValuesClick}
/>
) : (
<ChevronDownIcon
className="h-6 w-6 cursor-pointer"
onClick={() => {
dom.input.current?.focus();
onCacheKeyValuesClick();
}} }}
/> />
{cacheKeyValuesPanelOpen ? ( )}
<ChevronUpIcon </div>
className="h-6 w-6 cursor-pointer"
onClick={onCacheKeyValuesClick}
/>
) : (
<ChevronDownIcon
className="h-6 w-6 cursor-pointer"
onClick={() => {
dom.input.current?.focus();
onCacheKeyValuesClick();
}}
/>
)}
</div>
</OrgWalled>
)} )}
{isGlobalWorkflow ? ( {isGlobalWorkflow ? (
<Button <Button

View File

@@ -7,7 +7,6 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { DotsHorizontalIcon } from "@radix-ui/react-icons"; import { DotsHorizontalIcon } from "@radix-ui/react-icons";
import { OrgWalled } from "@/components/Orgwalled";
type Props = { type Props = {
isDeletable?: boolean; isDeletable?: boolean;
@@ -45,18 +44,14 @@ function NodeActionMenu({
Delete Block Delete Block
</DropdownMenuItem> </DropdownMenuItem>
)} )}
{isScriptable && ( {isScriptable && onShowScript && (
<OrgWalled className="p-0"> <DropdownMenuItem
{onShowScript && ( onSelect={() => {
<DropdownMenuItem onShowScript();
onSelect={() => { }}
onShowScript(); >
}} {showScriptText ?? "Show Code"}
> </DropdownMenuItem>
{showScriptText ?? "Show Code"}
</DropdownMenuItem>
)}
</OrgWalled>
)} )}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

View File

@@ -30,7 +30,6 @@ import { ModelSelector } from "@/components/ModelSelector";
import { WorkflowModel } from "@/routes/workflows/types/workflowTypes"; import { WorkflowModel } from "@/routes/workflows/types/workflowTypes";
import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "../Taskv2Node/types"; import { MAX_SCREENSHOT_SCROLLS_DEFAULT } from "../Taskv2Node/types";
import { KeyValueInput } from "@/components/KeyValueInput"; import { KeyValueInput } from "@/components/KeyValueInput";
import { OrgWalled } from "@/components/Orgwalled";
import { placeholders } from "@/routes/workflows/editor/helpContent"; import { placeholders } from "@/routes/workflows/editor/helpContent";
import { useToggleScriptForNodeCallback } from "@/routes/workflows/hooks/useToggleScriptForNodeCallback"; import { useToggleScriptForNodeCallback } from "@/routes/workflows/hooks/useToggleScriptForNodeCallback";
import { useWorkflowSettingsStore } from "@/store/WorkflowSettingsStore"; import { useWorkflowSettingsStore } from "@/store/WorkflowSettingsStore";
@@ -163,18 +162,16 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
<div className="relative"> <div className="relative">
<div className="absolute right-[-0.5rem] top-[-0.25rem]"> <div className="absolute right-[-0.5rem] top-[-0.25rem]">
<div> <div>
<OrgWalled className="p-0"> <Button variant="link" size="icon" onClick={showAllScripts}>
<Button variant="link" size="icon" onClick={showAllScripts}> <TooltipProvider>
<TooltipProvider> <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <LightningBoltIcon className="h-4 w-4 text-[gold]" />
<LightningBoltIcon className="h-4 w-4 text-[gold]" /> </TooltipTrigger>
</TooltipTrigger> <TooltipContent>Show all code</TooltipContent>
<TooltipContent>Show all code</TooltipContent> </Tooltip>
</Tooltip> </TooltipProvider>
</TooltipProvider> </Button>
</Button>
</OrgWalled>
</div> </div>
</div> </div>
<header className="mb-6 mt-2">Start</header> <header className="mb-6 mt-2">Start</header>
@@ -227,58 +224,57 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
}} }}
/> />
</div> </div>
<OrgWalled className="p-0 hover:p-0">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Label>Generate Code</Label> <Label>Generate Code</Label>
<HelpTooltip content="Generate & use cached code for faster execution." /> <HelpTooltip content="Generate & use cached code for faster execution." />
<Switch <Switch
className="ml-auto" className="ml-auto"
checked={inputs.useScriptCache} checked={inputs.useScriptCache}
onCheckedChange={(value) => { onCheckedChange={(value) => {
handleChange("useScriptCache", value); handleChange("useScriptCache", value);
}}
/>
</div>
</div>
{inputs.useScriptCache && (
<div className="flex flex-col gap-4 rounded-md bg-slate-elevation4 p-4 pl-4">
<div className="space-y-2">
<div className="flex gap-2">
<Label>Code Key (optional)</Label>
<HelpTooltip content="A static or dynamic key for directing code generation." />
</div>
<WorkflowBlockInputTextarea
nodeId={id}
onChange={(value) => {
const v = value.length ? value : null;
handleChange("scriptCacheKey", v);
}} }}
value={inputs.scriptCacheKey ?? ""}
placeholder={
placeholders["scripts"]["scriptKey"]
}
className="nopan text-xs"
/> />
</div> </div>
</div> <div className="space-y-2">
{inputs.useScriptCache && ( <div className="flex items-center gap-2">
<div className="flex flex-col gap-4 rounded-md bg-slate-elevation4 p-4 pl-4"> <Label>Fallback To AI On Failure</Label>
<div className="space-y-2"> <HelpTooltip content="If cached code fails, fallback to AI." />
<div className="flex gap-2"> <Switch
<Label>Code Key (optional)</Label> className="ml-auto"
<HelpTooltip content="A static or dynamic key for directing code generation." /> checked={inputs.aiFallback}
</div> onCheckedChange={(value) => {
<WorkflowBlockInputTextarea handleChange("aiFallback", value);
nodeId={id}
onChange={(value) => {
const v = value.length ? value : null;
handleChange("scriptCacheKey", v);
}} }}
value={inputs.scriptCacheKey ?? ""}
placeholder={
placeholders["scripts"]["scriptKey"]
}
className="nopan text-xs"
/> />
</div> </div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Fallback To AI On Failure</Label>
<HelpTooltip content="If cached code fails, fallback to AI." />
<Switch
className="ml-auto"
checked={inputs.aiFallback}
onCheckedChange={(value) => {
handleChange("aiFallback", value);
}}
/>
</div>
</div>
</div> </div>
)} </div>
</div> )}
</OrgWalled> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Label>Save &amp; Reuse Session</Label> <Label>Save &amp; Reuse Session</Label>