mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-07-25 12:01:04 +02:00
Merge branch 'main' into feat/vici-dial
This commit is contained in:
Abhishek Kumar
commit
9458fdb67e
27 changed files with 2118 additions and 157 deletions
|
|
@ -0,0 +1,540 @@
|
|||
"use client";
|
||||
|
||||
import { AlertTriangle, Loader2, Pencil } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { testToolApiV1ToolsToolUuidTestPost } from "@/client/sdk.gen";
|
||||
import type { ToolTestResponse } from "@/client/types.gen";
|
||||
import type { HttpMethod, PresetToolParameter, ToolParameter } from "@/components/http";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { detailFromError } from "@/lib/apiError";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
|
||||
import {
|
||||
generateSampleValue,
|
||||
isUnsafeHttpMethod,
|
||||
parseTestParameterValues,
|
||||
} from "./helpers";
|
||||
|
||||
type HttpToolTestDialogProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
toolUuid: string;
|
||||
httpMethod: HttpMethod;
|
||||
url: string;
|
||||
parameters: ToolParameter[];
|
||||
presetParameters: PresetToolParameter[];
|
||||
};
|
||||
|
||||
type TestParameter = ToolParameter | PresetToolParameter;
|
||||
type ParameterSource = "llm" | "preset";
|
||||
type JsonEditTarget = {
|
||||
source: ParameterSource;
|
||||
name: string;
|
||||
};
|
||||
|
||||
type ParameterFieldsProps = {
|
||||
idPrefix: string;
|
||||
parameters: TestParameter[];
|
||||
values: Record<string, string>;
|
||||
onValueChange: (name: string, value: string) => void;
|
||||
onEditJson: (name: string) => void;
|
||||
};
|
||||
|
||||
function defaultInputValue(parameter: TestParameter): string {
|
||||
if (
|
||||
"valueTemplate" in parameter &&
|
||||
parameter.valueTemplate &&
|
||||
!parameter.valueTemplate.includes("{{")
|
||||
) {
|
||||
return parameter.valueTemplate;
|
||||
}
|
||||
switch (parameter.type) {
|
||||
case "number":
|
||||
return "0";
|
||||
case "boolean":
|
||||
return "true";
|
||||
case "object":
|
||||
return "{}";
|
||||
case "array":
|
||||
return "[]";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function seedMissingValues(
|
||||
previous: Record<string, string>,
|
||||
parameters: TestParameter[]
|
||||
): Record<string, string> {
|
||||
const next = { ...previous };
|
||||
let changed = false;
|
||||
|
||||
for (const parameter of parameters) {
|
||||
if (!parameter.name || parameter.name in next) continue;
|
||||
next[parameter.name] = defaultInputValue(parameter);
|
||||
changed = true;
|
||||
}
|
||||
|
||||
return changed ? next : previous;
|
||||
}
|
||||
|
||||
function ParameterFields({
|
||||
idPrefix,
|
||||
parameters,
|
||||
values,
|
||||
onValueChange,
|
||||
onEditJson,
|
||||
}: ParameterFieldsProps) {
|
||||
if (parameters.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">No parameters configured.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{parameters.map((parameter) => {
|
||||
const inputId = `${idPrefix}-${parameter.name}`;
|
||||
const value = values[parameter.name] ?? defaultInputValue(parameter);
|
||||
|
||||
return (
|
||||
<div key={parameter.name} className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label htmlFor={inputId} className="text-sm font-mono">
|
||||
{parameter.name}
|
||||
</Label>
|
||||
<span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
|
||||
{parameter.type}
|
||||
</span>
|
||||
{parameter.required && <span className="text-xs text-destructive">required</span>}
|
||||
</div>
|
||||
{"description" in parameter && parameter.description && (
|
||||
<p className="text-xs text-muted-foreground">{parameter.description}</p>
|
||||
)}
|
||||
{"valueTemplate" in parameter && parameter.valueTemplate && (
|
||||
<p className="break-all text-xs text-muted-foreground">
|
||||
Configured preset: <code>{parameter.valueTemplate}</code>
|
||||
</p>
|
||||
)}
|
||||
{parameter.type === "boolean" ? (
|
||||
<select
|
||||
id={inputId}
|
||||
value={value}
|
||||
onChange={(event) => onValueChange(parameter.name, event.target.value)}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
|
||||
>
|
||||
<option value="true">true</option>
|
||||
<option value="false">false</option>
|
||||
</select>
|
||||
) : parameter.type === "number" ? (
|
||||
<Input
|
||||
id={inputId}
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(event) => onValueChange(parameter.name, event.target.value)}
|
||||
/>
|
||||
) : parameter.type === "object" || parameter.type === "array" ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onEditJson(parameter.name)}
|
||||
className="h-9 flex-1 truncate rounded-md border border-input bg-background px-3 py-1 text-left font-mono text-sm shadow-sm hover:bg-accent"
|
||||
>
|
||||
{!value || value === (parameter.type === "array" ? "[]" : "{}") ? (
|
||||
<span className="text-muted-foreground">Empty</span>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onEditJson(parameter.name)}
|
||||
aria-label={`Edit ${parameter.name}`}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Input
|
||||
id={inputId}
|
||||
value={value}
|
||||
onChange={(event) => onValueChange(parameter.name, event.target.value)}
|
||||
placeholder={`Enter ${parameter.name}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HttpToolTestDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
toolUuid,
|
||||
httpMethod,
|
||||
url,
|
||||
parameters,
|
||||
presetParameters,
|
||||
}: HttpToolTestDialogProps) {
|
||||
const { getAccessToken } = useAuth();
|
||||
const [llmParamValues, setLlmParamValues] = useState<Record<string, string>>({});
|
||||
const [presetParamValues, setPresetParamValues] = useState<Record<string, string>>({});
|
||||
const [result, setResult] = useState<ToolTestResponse | null>(null);
|
||||
const [isTesting, setIsTesting] = useState(false);
|
||||
const [testError, setTestError] = useState<string | null>(null);
|
||||
const [jsonEditTarget, setJsonEditTarget] = useState<JsonEditTarget | null>(null);
|
||||
const [jsonEditDraft, setJsonEditDraft] = useState("");
|
||||
const [jsonEditError, setJsonEditError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLlmParamValues((previous) => seedMissingValues(previous, parameters));
|
||||
}, [parameters]);
|
||||
|
||||
useEffect(() => {
|
||||
setPresetParamValues((previous) => seedMissingValues(previous, presetParameters));
|
||||
}, [presetParameters]);
|
||||
|
||||
const handleFillSampleValues = () => {
|
||||
setLlmParamValues((previous) => {
|
||||
const next = { ...previous };
|
||||
for (const parameter of parameters) {
|
||||
next[parameter.name] = generateSampleValue(parameter.type);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setPresetParamValues((previous) => {
|
||||
const next = { ...previous };
|
||||
for (const parameter of presetParameters) {
|
||||
next[parameter.name] = generateSampleValue(parameter.type);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const closeJsonEditDialog = () => {
|
||||
setJsonEditTarget(null);
|
||||
setJsonEditDraft("");
|
||||
setJsonEditError(null);
|
||||
};
|
||||
|
||||
const openJsonEditDialog = (source: ParameterSource, parameterName: string) => {
|
||||
const values = source === "llm" ? llmParamValues : presetParamValues;
|
||||
const current = values[parameterName] ?? "";
|
||||
let draft = current;
|
||||
|
||||
try {
|
||||
draft = JSON.stringify(JSON.parse(current), null, 2);
|
||||
} catch {
|
||||
// Keep incomplete or invalid JSON as-is. Validation is triggered
|
||||
// only when the user explicitly chooses Save or Format JSON.
|
||||
}
|
||||
|
||||
setJsonEditTarget({ source, name: parameterName });
|
||||
setJsonEditDraft(draft);
|
||||
setJsonEditError(null);
|
||||
};
|
||||
|
||||
const handleJsonEditDraftChange = (value: string) => {
|
||||
setJsonEditDraft(value);
|
||||
setJsonEditError(null);
|
||||
};
|
||||
|
||||
const handleFormatJson = () => {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonEditDraft);
|
||||
setJsonEditDraft(JSON.stringify(parsed, null, 2));
|
||||
setJsonEditError(null);
|
||||
} catch (caughtError) {
|
||||
setJsonEditError(caughtError instanceof Error ? caughtError.message : "Invalid JSON");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveJsonEdit = () => {
|
||||
if (jsonEditTarget === null) return;
|
||||
const target = jsonEditTarget;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(jsonEditDraft);
|
||||
const setValues = target.source === "llm" ? setLlmParamValues : setPresetParamValues;
|
||||
setValues((previous) => ({ ...previous, [target.name]: JSON.stringify(parsed) }));
|
||||
closeJsonEditDialog();
|
||||
} catch (caughtError) {
|
||||
setJsonEditError(caughtError instanceof Error ? caughtError.message : "Invalid JSON");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTestTool = async () => {
|
||||
try {
|
||||
setIsTesting(true);
|
||||
setTestError(null);
|
||||
setResult(null);
|
||||
|
||||
const llmParams = parseTestParameterValues(parameters, llmParamValues);
|
||||
const presetParams = parseTestParameterValues(presetParameters, presetParamValues);
|
||||
|
||||
const accessToken = await getAccessToken();
|
||||
const response = await testToolApiV1ToolsToolUuidTestPost({
|
||||
path: { tool_uuid: toolUuid },
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
body: {
|
||||
llm_params: llmParams,
|
||||
preset_params: presetParams,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.error) {
|
||||
setTestError(detailFromError(response.error, "Failed to test tool"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.data) setResult(response.data);
|
||||
} catch (caughtError) {
|
||||
setTestError(caughtError instanceof Error ? caughtError.message : "Failed to test tool");
|
||||
} finally {
|
||||
setIsTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isSuccess =
|
||||
result?.status === "success" &&
|
||||
(result.status_code == null || (result.status_code >= 200 && result.status_code < 300));
|
||||
const resultBadgeLabel = isSuccess ? "success" : result?.status === "success" ? "failed" : "error";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[90vh] max-w-3xl grid-rows-[auto_minmax(0,1fr)]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Test Tool</DialogTitle>
|
||||
<DialogDescription>
|
||||
Run the saved configuration against the real endpoint.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6 overflow-y-auto pr-1">
|
||||
<div className="rounded-lg border bg-muted/40 p-4">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Request
|
||||
</p>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="rounded bg-foreground px-2 py-1 font-mono text-xs font-semibold text-background">
|
||||
{httpMethod}
|
||||
</span>
|
||||
<code className="break-all pt-0.5 text-sm">{url}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isUnsafeHttpMethod(httpMethod) && (
|
||||
<div
|
||||
role="alert"
|
||||
className="flex gap-3 rounded-lg border border-amber-300 bg-amber-50 p-4 text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
|
||||
>
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">This performs a real external request</p>
|
||||
<p className="text-sm">
|
||||
Testing sends an actual {httpMethod} request to this endpoint. Any configured
|
||||
credential is used for the request, and the operation may modify external data.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Parameters</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Supply the values that would normally come from the model and configured presets.
|
||||
</p>
|
||||
</div>
|
||||
{(parameters.length > 0 || presetParameters.length > 0) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleFillSampleValues}
|
||||
>
|
||||
Fill sample values
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium">LLM Parameters</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Values the model would provide at call time.
|
||||
</p>
|
||||
</div>
|
||||
<ParameterFields
|
||||
idPrefix="llm-param"
|
||||
parameters={parameters}
|
||||
values={llmParamValues}
|
||||
onValueChange={(name, value) =>
|
||||
setLlmParamValues((previous) => ({ ...previous, [name]: value }))
|
||||
}
|
||||
onEditJson={(name) => openJsonEditDialog("llm", name)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium">Preset Parameters</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Resolved values that Dograh would normally derive from each configured preset.
|
||||
</p>
|
||||
</div>
|
||||
<ParameterFields
|
||||
idPrefix="preset-param"
|
||||
parameters={presetParameters}
|
||||
values={presetParamValues}
|
||||
onValueChange={(name, value) =>
|
||||
setPresetParamValues((previous) => ({ ...previous, [name]: value }))
|
||||
}
|
||||
onEditJson={(name) => openJsonEditDialog("preset", name)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleTestTool} disabled={isTesting}>
|
||||
{isTesting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Testing...
|
||||
</>
|
||||
) : (
|
||||
"Test Tool"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{testError && (
|
||||
<div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{testError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
{(result.request_method || result.request_url) && (
|
||||
<div className="space-y-1 overflow-auto rounded-lg bg-muted p-3 font-mono text-xs">
|
||||
<p className="font-medium text-foreground">
|
||||
{result.request_method} {result.request_url}
|
||||
</p>
|
||||
{result.request_headers && Object.keys(result.request_headers).length > 0 && (
|
||||
<pre className="whitespace-pre-wrap">
|
||||
Headers: {JSON.stringify(result.request_headers, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
{result.request_body != null && (
|
||||
<pre className="whitespace-pre-wrap">
|
||||
Body: {JSON.stringify(result.request_body, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
{result.request_params != null && (
|
||||
<pre className="whitespace-pre-wrap">
|
||||
Query:{" "}
|
||||
{Object.entries(result.request_params)
|
||||
.map(([key, value]) => `${key}=${value}`)
|
||||
.join(" ")}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${
|
||||
isSuccess
|
||||
? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
|
||||
: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
|
||||
}`}
|
||||
>
|
||||
<span>{isSuccess ? "✓" : "✗"}</span>
|
||||
{resultBadgeLabel}
|
||||
</span>
|
||||
{result.status_code != null && (
|
||||
<span className="text-sm text-muted-foreground">HTTP {result.status_code}</span>
|
||||
)}
|
||||
{result.duration_ms !== undefined && (
|
||||
<span className="rounded bg-muted px-2 py-0.5 font-mono text-xs text-muted-foreground">
|
||||
{result.duration_ms}ms
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{result.hint && (
|
||||
<div className="rounded border border-amber-200 bg-amber-100 p-3 text-sm text-amber-900 dark:border-amber-900/40 dark:bg-amber-900/20 dark:text-amber-400">
|
||||
{result.hint}
|
||||
</div>
|
||||
)}
|
||||
{result.error && (
|
||||
<div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{result.error}
|
||||
</div>
|
||||
)}
|
||||
{result.data != null && (
|
||||
<div className="max-h-80 overflow-auto rounded-lg bg-muted p-4 font-mono text-sm">
|
||||
<pre>{JSON.stringify(result.data, null, 2)}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={jsonEditTarget !== null}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) closeJsonEditDialog();
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit {jsonEditTarget?.name}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Edit the JSON value sent for this parameter when testing.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<textarea
|
||||
value={jsonEditDraft}
|
||||
onChange={(event) => handleJsonEditDraftChange(event.target.value)}
|
||||
rows={12}
|
||||
className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 font-mono text-sm shadow-sm"
|
||||
spellCheck={false}
|
||||
/>
|
||||
{jsonEditError && <p className="text-sm text-destructive">{jsonEditError}</p>}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleFormatJson}
|
||||
disabled={jsonEditDraft.length === 0}
|
||||
>
|
||||
Format JSON
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={closeJsonEditDialog}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSaveJsonEdit}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
buildHttpToolTestSnapshot,
|
||||
generateSampleValue,
|
||||
type HttpToolTestSnapshotFields,
|
||||
isUnsafeHttpMethod,
|
||||
parseTestParameterValues,
|
||||
} from "./helpers";
|
||||
|
||||
describe("generateSampleValue", () => {
|
||||
it.each([
|
||||
["string", "sample_text"],
|
||||
["number", "5"],
|
||||
["boolean", "true"],
|
||||
["array", "[]"],
|
||||
["object", "{}"],
|
||||
] as const)("returns %s sample input", (type, expected) => {
|
||||
expect(generateSampleValue(type)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe("isUnsafeHttpMethod", () => {
|
||||
it("treats GET as safe", () => {
|
||||
expect(isUnsafeHttpMethod("GET")).toBe(false);
|
||||
});
|
||||
|
||||
it.each(["POST", "PUT", "PATCH", "DELETE"] as const)("treats %s as unsafe", (method) => {
|
||||
expect(isUnsafeHttpMethod(method)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("parseTestParameterValues", () => {
|
||||
it("converts input strings to configured parameter types", () => {
|
||||
expect(
|
||||
parseTestParameterValues(
|
||||
[
|
||||
{ name: "query", type: "string", required: true },
|
||||
{ name: "limit", type: "number", required: true },
|
||||
{ name: "enabled", type: "boolean", required: true },
|
||||
{ name: "filters", type: "object", required: true },
|
||||
{ name: "tags", type: "array", required: true },
|
||||
],
|
||||
{
|
||||
query: "cart",
|
||||
limit: "5",
|
||||
enabled: "false",
|
||||
filters: '{"status":"open"}',
|
||||
tags: '["new"]',
|
||||
}
|
||||
)
|
||||
).toEqual({
|
||||
query: "cart",
|
||||
limit: 5,
|
||||
enabled: false,
|
||||
filters: { status: "open" },
|
||||
tags: ["new"],
|
||||
});
|
||||
});
|
||||
|
||||
it("reports the parameter containing invalid JSON", () => {
|
||||
expect(() =>
|
||||
parseTestParameterValues(
|
||||
[{ name: "filters", type: "object", required: true }],
|
||||
{ filters: "{" }
|
||||
)
|
||||
).toThrow("filters: invalid JSON");
|
||||
});
|
||||
|
||||
it("rejects missing required values", () => {
|
||||
expect(() =>
|
||||
parseTestParameterValues(
|
||||
[{ name: "customer_id", type: "string", required: true }],
|
||||
{ customer_id: "" }
|
||||
)
|
||||
).toThrow("customer_id: value is required");
|
||||
});
|
||||
});
|
||||
|
||||
describe("buildHttpToolTestSnapshot", () => {
|
||||
const base: HttpToolTestSnapshotFields = {
|
||||
name: "Search API",
|
||||
description: "Search for records",
|
||||
httpMethod: "GET",
|
||||
url: "https://api.example.com",
|
||||
credentialUuid: "",
|
||||
headers: [],
|
||||
parameters: [],
|
||||
presetParameters: [],
|
||||
timeoutMs: 5000,
|
||||
customMessage: "",
|
||||
customMessageType: "text",
|
||||
customMessageRecordingId: "",
|
||||
};
|
||||
|
||||
it("produces identical output for identical fields", () => {
|
||||
expect(buildHttpToolTestSnapshot(base)).toBe(buildHttpToolTestSnapshot({ ...base }));
|
||||
});
|
||||
|
||||
it("changes when a saved HTTP field changes", () => {
|
||||
expect(buildHttpToolTestSnapshot(base)).not.toBe(
|
||||
buildHttpToolTestSnapshot({ ...base, url: "https://api.example.com/v2" })
|
||||
);
|
||||
expect(buildHttpToolTestSnapshot(base)).not.toBe(
|
||||
buildHttpToolTestSnapshot({
|
||||
...base,
|
||||
parameters: [{ name: "q", type: "string", description: "", required: true }],
|
||||
})
|
||||
);
|
||||
expect(buildHttpToolTestSnapshot(base)).not.toBe(
|
||||
buildHttpToolTestSnapshot({ ...base, name: "Updated Search API" })
|
||||
);
|
||||
expect(buildHttpToolTestSnapshot(base)).not.toBe(
|
||||
buildHttpToolTestSnapshot({ ...base, description: "Updated description" })
|
||||
);
|
||||
expect(buildHttpToolTestSnapshot(base)).not.toBe(
|
||||
buildHttpToolTestSnapshot({ ...base, customMessage: "Done" })
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import type { HttpMethod, KeyValueItem, ParameterType, PresetToolParameter, ToolParameter } from "@/components/http";
|
||||
|
||||
const TYPE_SAMPLE_VALUES: Record<ParameterType, string> = {
|
||||
string: "sample_text",
|
||||
number: "5",
|
||||
boolean: "true",
|
||||
array: "[]",
|
||||
object: "{}",
|
||||
};
|
||||
|
||||
/**
|
||||
* Type-based sample value used to pre-fill test-dialog inputs. Parameters do
|
||||
* not currently include a schema, so objects and arrays can only be seeded
|
||||
* with valid empty JSON containers.
|
||||
*/
|
||||
export function generateSampleValue(type: ParameterType): string {
|
||||
return TYPE_SAMPLE_VALUES[type];
|
||||
}
|
||||
|
||||
/** Whether testing this method may change state on the external service. */
|
||||
export function isUnsafeHttpMethod(method: HttpMethod): boolean {
|
||||
return method !== "GET";
|
||||
}
|
||||
|
||||
export function parseTestParameterValues(
|
||||
parameters: Array<Pick<ToolParameter, "name" | "type" | "required">>,
|
||||
values: Record<string, string>
|
||||
): Record<string, unknown> {
|
||||
const parsedValues: Record<string, unknown> = {};
|
||||
|
||||
for (const parameter of parameters) {
|
||||
const rawValue = values[parameter.name];
|
||||
if (rawValue === undefined || rawValue === "") {
|
||||
if (parameter.required) throw new Error(`${parameter.name}: value is required`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (parameter.type === "number") {
|
||||
parsedValues[parameter.name] = Number(rawValue);
|
||||
} else if (parameter.type === "boolean") {
|
||||
parsedValues[parameter.name] = rawValue === "true";
|
||||
} else if (parameter.type === "object" || parameter.type === "array") {
|
||||
try {
|
||||
parsedValues[parameter.name] = JSON.parse(rawValue);
|
||||
} catch {
|
||||
throw new Error(`${parameter.name}: invalid JSON`);
|
||||
}
|
||||
} else {
|
||||
parsedValues[parameter.name] = rawValue;
|
||||
}
|
||||
}
|
||||
|
||||
return parsedValues;
|
||||
}
|
||||
|
||||
export type HttpToolTestSnapshotFields = {
|
||||
name: string;
|
||||
description: string;
|
||||
httpMethod: HttpMethod;
|
||||
url: string;
|
||||
credentialUuid: string;
|
||||
headers: KeyValueItem[];
|
||||
parameters: ToolParameter[];
|
||||
presetParameters: PresetToolParameter[];
|
||||
timeoutMs: number;
|
||||
customMessage: string;
|
||||
customMessageType: "text" | "audio";
|
||||
customMessageRecordingId: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Canonical string for HTTP API fields that affect the saved configuration
|
||||
* used by Test Tool.
|
||||
*/
|
||||
export function buildHttpToolTestSnapshot(fields: HttpToolTestSnapshotFields): string {
|
||||
const normalizedHeaders = Object.fromEntries(
|
||||
fields.headers.filter((header) => header.key).map((header) => [header.key, header.value])
|
||||
);
|
||||
return JSON.stringify({ ...fields, headers: normalizedHeaders });
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export {
|
||||
buildHttpToolTestSnapshot,
|
||||
generateSampleValue,
|
||||
type HttpToolTestSnapshotFields,
|
||||
isUnsafeHttpMethod,
|
||||
parseTestParameterValues,
|
||||
} from "./helpers";
|
||||
export { HttpToolTestDialog } from "./HttpToolTestDialog";
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
export { BuiltinToolConfig, type BuiltinToolConfigProps } from "./BuiltinToolConfig";
|
||||
export { EndCallToolConfig, type EndCallToolConfigProps } from "./EndCallToolConfig";
|
||||
export { buildHttpToolTestSnapshot, HttpToolTestDialog } from "./http-tool-test";
|
||||
export { HttpApiToolConfig, type HttpApiToolConfigProps } from "./HttpApiToolConfig";
|
||||
export { TransferCallToolConfig, type TransferCallToolConfigProps } from "./TransferCallToolConfig";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { ArrowLeft, Code, ExternalLink, Loader2, Save } from "lucide-react";
|
||||
import { ArrowLeft, Code, ExternalLink, FlaskConical, Loader2, Save } from "lucide-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
|
|
@ -38,6 +38,7 @@ import { Input } from "@/components/ui/input";
|
|||
import { Label } from "@/components/ui/label";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { TOOL_DOCUMENTATION_URLS } from "@/constants/documentation";
|
||||
import { useOrgConfig } from "@/context/OrgConfigContext";
|
||||
import { detailFromError } from "@/lib/apiError";
|
||||
|
|
@ -56,7 +57,14 @@ import {
|
|||
type ToolCategory,
|
||||
type TransferDestinationSource,
|
||||
} from "../config";
|
||||
import { BuiltinToolConfig, EndCallToolConfig, HttpApiToolConfig, TransferCallToolConfig } from "./components";
|
||||
import {
|
||||
buildHttpToolTestSnapshot,
|
||||
BuiltinToolConfig,
|
||||
EndCallToolConfig,
|
||||
HttpApiToolConfig,
|
||||
HttpToolTestDialog,
|
||||
TransferCallToolConfig,
|
||||
} from "./components";
|
||||
|
||||
function normalizeParameterType(value: string | null | undefined): ParameterType {
|
||||
switch (value) {
|
||||
|
|
@ -87,6 +95,8 @@ export default function ToolDetailPage() {
|
|||
const [error, setError] = useState<string | null>(null);
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
const [showCodeDialog, setShowCodeDialog] = useState(false);
|
||||
const [showTestDialog, setShowTestDialog] = useState(false);
|
||||
const [savedHttpTestSnapshot, setSavedHttpTestSnapshot] = useState<string | null>(null);
|
||||
|
||||
// Common form state
|
||||
const [name, setName] = useState("");
|
||||
|
|
@ -279,52 +289,73 @@ export default function ToolDetailPage() {
|
|||
// Populate HTTP API specific fields
|
||||
const config = tool.definition?.config as HttpApiToolDefinition["config"] | undefined;
|
||||
if (config) {
|
||||
setHttpMethod((config.method as HttpMethod) || "POST");
|
||||
setUrl(config.url || "");
|
||||
setCredentialUuid(config.credential_uuid || "");
|
||||
setTimeoutMs(config.timeout_ms || 5000);
|
||||
setCustomMessage(config.customMessage || "");
|
||||
setCustomMessageType(config.customMessageType || "text");
|
||||
setCustomMessageRecordingId(config.customMessageRecordingId || "");
|
||||
const loadedHttpMethod = (config.method as HttpMethod) || "POST";
|
||||
const loadedUrl = config.url || "";
|
||||
const loadedCredentialUuid = config.credential_uuid || "";
|
||||
const loadedTimeoutMs = config.timeout_ms || 5000;
|
||||
const loadedCustomMessage = config.customMessage || "";
|
||||
const loadedCustomMessageType = config.customMessageType || "text";
|
||||
const loadedCustomMessageRecordingId = config.customMessageRecordingId || "";
|
||||
setHttpMethod(loadedHttpMethod);
|
||||
setUrl(loadedUrl);
|
||||
setCredentialUuid(loadedCredentialUuid);
|
||||
setTimeoutMs(loadedTimeoutMs);
|
||||
setCustomMessage(loadedCustomMessage);
|
||||
setCustomMessageType(loadedCustomMessageType);
|
||||
setCustomMessageRecordingId(loadedCustomMessageRecordingId);
|
||||
|
||||
// Convert headers object to array
|
||||
if (config.headers) {
|
||||
setHeaders(
|
||||
Object.entries(config.headers).map(([key, value]) => ({
|
||||
key,
|
||||
value: value as string,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setHeaders([]);
|
||||
}
|
||||
const loadedHeaders = config.headers
|
||||
? Object.entries(config.headers).map(([key, value]) => ({
|
||||
key,
|
||||
value: value as string,
|
||||
}))
|
||||
: [];
|
||||
setHeaders(loadedHeaders);
|
||||
|
||||
// Load parameters
|
||||
let loadedParameters: ToolParameter[] = [];
|
||||
if (config.parameters && Array.isArray(config.parameters)) {
|
||||
setParameters(
|
||||
config.parameters.map((p) => ({
|
||||
name: p.name || "",
|
||||
type: normalizeParameterType(p.type),
|
||||
description: p.description || "",
|
||||
required: p.required ?? true,
|
||||
}))
|
||||
);
|
||||
loadedParameters = config.parameters.map((p) => ({
|
||||
name: p.name || "",
|
||||
type: normalizeParameterType(p.type),
|
||||
description: p.description || "",
|
||||
required: p.required ?? true,
|
||||
}));
|
||||
setParameters(loadedParameters);
|
||||
} else {
|
||||
setParameters([]);
|
||||
}
|
||||
|
||||
let loadedPresetParameters: PresetToolParameter[] = [];
|
||||
if (config.preset_parameters && Array.isArray(config.preset_parameters)) {
|
||||
setPresetParameters(
|
||||
config.preset_parameters.map((p) => ({
|
||||
name: p.name || "",
|
||||
type: normalizeParameterType(p.type),
|
||||
valueTemplate: p.value_template || "",
|
||||
required: p.required ?? true,
|
||||
}))
|
||||
);
|
||||
loadedPresetParameters = config.preset_parameters.map((p) => ({
|
||||
name: p.name || "",
|
||||
type: normalizeParameterType(p.type),
|
||||
valueTemplate: p.value_template || "",
|
||||
required: p.required ?? true,
|
||||
}));
|
||||
setPresetParameters(loadedPresetParameters);
|
||||
} else {
|
||||
setPresetParameters([]);
|
||||
}
|
||||
|
||||
setSavedHttpTestSnapshot(
|
||||
buildHttpToolTestSnapshot({
|
||||
name: tool.name,
|
||||
description: tool.description || "",
|
||||
httpMethod: loadedHttpMethod,
|
||||
url: loadedUrl,
|
||||
credentialUuid: loadedCredentialUuid,
|
||||
headers: loadedHeaders,
|
||||
parameters: loadedParameters,
|
||||
presetParameters: loadedPresetParameters,
|
||||
timeoutMs: loadedTimeoutMs,
|
||||
customMessage: loadedCustomMessage,
|
||||
customMessageType: loadedCustomMessageType,
|
||||
customMessageRecordingId: loadedCustomMessageRecordingId,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -443,6 +474,11 @@ export default function ToolDetailPage() {
|
|||
setError("All parameters must have a name");
|
||||
return;
|
||||
}
|
||||
const paramNames = parameters.map((p) => p.name.trim()).filter(Boolean);
|
||||
if (new Set(paramNames).size !== paramNames.length) {
|
||||
setError("Parameter names must be unique");
|
||||
return;
|
||||
}
|
||||
|
||||
const invalidPresetParams = presetParameters.filter(
|
||||
(p) => !p.name.trim() || !p.valueTemplate.trim()
|
||||
|
|
@ -628,6 +664,24 @@ export default function ToolDetailPage() {
|
|||
setTool(response.data);
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 3000);
|
||||
if (tool.category === "http_api") {
|
||||
setSavedHttpTestSnapshot(
|
||||
buildHttpToolTestSnapshot({
|
||||
name,
|
||||
description,
|
||||
httpMethod,
|
||||
url,
|
||||
credentialUuid,
|
||||
headers,
|
||||
parameters,
|
||||
presetParameters,
|
||||
timeoutMs,
|
||||
customMessage,
|
||||
customMessageType,
|
||||
customMessageRecordingId,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Failed to save tool");
|
||||
|
|
@ -729,6 +783,24 @@ const data = await response.json();`;
|
|||
const isTransferCallTool = tool.category === "transfer_call";
|
||||
const isBuiltinTool = tool.category === "calculator";
|
||||
const isMcpTool = tool.category === "mcp";
|
||||
const isHttpApiTool = tool.category === "http_api";
|
||||
const hasUnsavedHttpChanges =
|
||||
isHttpApiTool &&
|
||||
(savedHttpTestSnapshot === null ||
|
||||
buildHttpToolTestSnapshot({
|
||||
name,
|
||||
description,
|
||||
httpMethod,
|
||||
url,
|
||||
credentialUuid,
|
||||
headers,
|
||||
parameters,
|
||||
presetParameters,
|
||||
timeoutMs,
|
||||
customMessage,
|
||||
customMessageType,
|
||||
customMessageRecordingId,
|
||||
}) !== savedHttpTestSnapshot);
|
||||
const categoryConfig = getCategoryConfig(tool.category as ToolCategory);
|
||||
|
||||
return (
|
||||
|
|
@ -764,7 +836,7 @@ const data = await response.json();`;
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{!isEndCallTool && !isTransferCallTool && !isBuiltinTool && !isMcpTool && (
|
||||
{isHttpApiTool && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowCodeDialog(true)}
|
||||
|
|
@ -958,6 +1030,18 @@ const data = await response.json();`;
|
|||
/>
|
||||
)}
|
||||
|
||||
{isHttpApiTool && (
|
||||
<HttpToolTestDialog
|
||||
open={showTestDialog}
|
||||
onOpenChange={setShowTestDialog}
|
||||
toolUuid={toolUuid}
|
||||
httpMethod={httpMethod}
|
||||
url={url}
|
||||
parameters={parameters}
|
||||
presetParameters={presetParameters}
|
||||
/>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive">
|
||||
{error}
|
||||
|
|
@ -970,7 +1054,34 @@ const data = await response.json();`;
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<div className="flex justify-end gap-2 mt-6">
|
||||
{isHttpApiTool && (
|
||||
hasUnsavedHttpChanges ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="inline-flex" tabIndex={0}>
|
||||
<Button type="button" variant="outline" disabled>
|
||||
<FlaskConical className="w-4 h-4 mr-2" />
|
||||
Test Tool
|
||||
</Button>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
Save the tool before testing.
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowTestDialog(true)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<FlaskConical className="w-4 h-4 mr-2" />
|
||||
Test Tool
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
<Button onClick={handleSave} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
|
|
@ -1002,6 +1113,7 @@ const data = await response.json();`;
|
|||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ function RenderWorkflow({
|
|||
onConnect,
|
||||
onEdgesChange,
|
||||
onNodesChange,
|
||||
onDelete,
|
||||
} = useWorkflowState({
|
||||
initialWorkflowName,
|
||||
workflowId,
|
||||
|
|
@ -514,6 +515,7 @@ function RenderWorkflow({
|
|||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onDelete={onDelete}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
onConnect={isViewingHistoricalVersion ? undefined : onConnect}
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@ export const useWorkflowState = ({
|
|||
templateContextVariables,
|
||||
workflowConfigurations,
|
||||
initializeWorkflow,
|
||||
commitDeletion,
|
||||
setNodes,
|
||||
setEdges,
|
||||
setWorkflowName,
|
||||
|
|
@ -493,6 +494,10 @@ export const useWorkflowState = ({
|
|||
[setNodes],
|
||||
);
|
||||
|
||||
const onDelete = useCallback(() => {
|
||||
commitDeletion();
|
||||
}, [commitDeletion]);
|
||||
|
||||
const onRun = async (mode: string) => {
|
||||
if (!user?.id) return;
|
||||
const workflowRunName = `WR-${getRandomId()}`;
|
||||
|
|
@ -638,6 +643,7 @@ export const useWorkflowState = ({
|
|||
onConnect,
|
||||
onEdgesChange,
|
||||
onNodesChange,
|
||||
onDelete,
|
||||
onRun,
|
||||
saveTemplateContextVariables,
|
||||
saveWorkflowConfigurations,
|
||||
|
|
|
|||
|
|
@ -661,6 +661,11 @@ function GeneralSection({
|
|||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{selectedTurnStartStrategy?.description}
|
||||
{turnStartStrategy === "provisional_vad" && (
|
||||
<span className="ml-2 inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
|
||||
Experimental
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{turnStartStrategy === "min_words" && (
|
||||
|
|
|
|||
151
ui/src/app/workflow/[workflowId]/stores/workflowStore.test.ts
Normal file
151
ui/src/app/workflow/[workflowId]/stores/workflowStore.test.ts
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
|
||||
import { FlowEdge, FlowNode } from '@/components/flow/types';
|
||||
|
||||
import { useWorkflowStore } from './workflowStore';
|
||||
|
||||
const createNode = (id: string, x = 0): FlowNode => ({
|
||||
id,
|
||||
type: 'agentNode',
|
||||
position: { x, y: 0 },
|
||||
data: { name: id },
|
||||
});
|
||||
|
||||
const createEdge = (id: string, source: string, target: string): FlowEdge => ({
|
||||
id,
|
||||
source,
|
||||
target,
|
||||
data: { condition: 'always', label: id },
|
||||
});
|
||||
|
||||
const nodeIds = () => useWorkflowStore.getState().nodes.map((node) => node.id);
|
||||
|
||||
describe('workflow history', () => {
|
||||
beforeEach(() => {
|
||||
useWorkflowStore.getState().clearStore();
|
||||
useWorkflowStore.getState().initializeWorkflow(1, 'Initial', [], []);
|
||||
});
|
||||
|
||||
it('keeps every committed node state available to undo and redo', () => {
|
||||
const store = useWorkflowStore.getState();
|
||||
store.addNode(createNode('a'));
|
||||
store.addNode(createNode('b'));
|
||||
|
||||
store.undo();
|
||||
expect(nodeIds()).toEqual(['a']);
|
||||
|
||||
store.undo();
|
||||
expect(nodeIds()).toEqual([]);
|
||||
|
||||
store.redo();
|
||||
store.redo();
|
||||
expect(nodeIds()).toEqual(['a', 'b']);
|
||||
});
|
||||
|
||||
it('undoes a node and connected-edge deletion in one step', () => {
|
||||
const firstNode = createNode('a');
|
||||
const secondNode = createNode('b');
|
||||
const edge = createEdge('a-b', 'a', 'b');
|
||||
useWorkflowStore.getState().initializeWorkflow(
|
||||
1,
|
||||
'Initial',
|
||||
[firstNode, secondNode],
|
||||
[edge]
|
||||
);
|
||||
|
||||
// React Flow emits connected-edge removals before node removals, then onDelete.
|
||||
useWorkflowStore.getState().setEdges(
|
||||
[],
|
||||
[{ id: edge.id, type: 'remove' }]
|
||||
);
|
||||
useWorkflowStore.getState().setNodes(
|
||||
[secondNode],
|
||||
[{ id: firstNode.id, type: 'remove' }]
|
||||
);
|
||||
useWorkflowStore.getState().commitDeletion();
|
||||
expect(nodeIds()).toEqual(['b']);
|
||||
expect(useWorkflowStore.getState().edges).toEqual([]);
|
||||
expect(useWorkflowStore.getState().history).toHaveLength(2);
|
||||
|
||||
useWorkflowStore.getState().undo();
|
||||
expect(nodeIds()).toEqual(['a', 'b']);
|
||||
expect(useWorkflowStore.getState().edges).toEqual([edge]);
|
||||
|
||||
useWorkflowStore.getState().redo();
|
||||
expect(nodeIds()).toEqual(['b']);
|
||||
expect(useWorkflowStore.getState().edges).toEqual([]);
|
||||
});
|
||||
|
||||
it('coalesces active dragging into one committed final position', () => {
|
||||
const initialNode = createNode('a');
|
||||
useWorkflowStore.getState().initializeWorkflow(1, 'Initial', [initialNode], []);
|
||||
|
||||
for (const x of [10, 20]) {
|
||||
useWorkflowStore.getState().setNodes(
|
||||
[createNode('a', x)],
|
||||
[{ id: 'a', type: 'position', position: { x, y: 0 }, dragging: true }]
|
||||
);
|
||||
}
|
||||
useWorkflowStore.getState().setNodes(
|
||||
[createNode('a', 30)],
|
||||
[{ id: 'a', type: 'position', position: { x: 30, y: 0 }, dragging: false }]
|
||||
);
|
||||
|
||||
expect(useWorkflowStore.getState().history).toHaveLength(2);
|
||||
useWorkflowStore.getState().undo();
|
||||
expect(useWorkflowStore.getState().nodes[0].position.x).toBe(0);
|
||||
useWorkflowStore.getState().redo();
|
||||
expect(useWorkflowStore.getState().nodes[0].position.x).toBe(30);
|
||||
});
|
||||
|
||||
it('truncates redo history after a new edit', () => {
|
||||
useWorkflowStore.getState().addNode(createNode('a'));
|
||||
useWorkflowStore.getState().addNode(createNode('b'));
|
||||
useWorkflowStore.getState().undo();
|
||||
useWorkflowStore.getState().addNode(createNode('c'));
|
||||
|
||||
expect(nodeIds()).toEqual(['a', 'c']);
|
||||
expect(useWorkflowStore.getState().canRedo()).toBe(false);
|
||||
|
||||
useWorkflowStore.getState().undo();
|
||||
expect(nodeIds()).toEqual(['a']);
|
||||
useWorkflowStore.getState().redo();
|
||||
expect(nodeIds()).toEqual(['a', 'c']);
|
||||
});
|
||||
|
||||
it('keeps the current state at the end of the bounded history', () => {
|
||||
for (let index = 1; index <= 55; index += 1) {
|
||||
useWorkflowStore.getState().setWorkflowName(`Edit ${index}`);
|
||||
}
|
||||
|
||||
expect(useWorkflowStore.getState().history).toHaveLength(50);
|
||||
expect(useWorkflowStore.getState().historyIndex).toBe(49);
|
||||
|
||||
let undoCount = 0;
|
||||
while (useWorkflowStore.getState().canUndo()) {
|
||||
useWorkflowStore.getState().undo();
|
||||
undoCount += 1;
|
||||
}
|
||||
expect(undoCount).toBe(49);
|
||||
expect(useWorkflowStore.getState().workflowName).toBe('Edit 6');
|
||||
|
||||
while (useWorkflowStore.getState().canRedo()) {
|
||||
useWorkflowStore.getState().redo();
|
||||
}
|
||||
expect(useWorkflowStore.getState().workflowName).toBe('Edit 55');
|
||||
});
|
||||
|
||||
it('does not track selection-only changes', () => {
|
||||
const initialNode = createNode('a');
|
||||
useWorkflowStore.getState().initializeWorkflow(1, 'Initial', [initialNode], []);
|
||||
|
||||
useWorkflowStore.getState().setNodes(
|
||||
[{ ...initialNode, selected: true }],
|
||||
[{ id: 'a', type: 'select', selected: true }]
|
||||
);
|
||||
|
||||
expect(useWorkflowStore.getState().nodes[0].selected).toBe(true);
|
||||
expect(useWorkflowStore.getState().history).toHaveLength(1);
|
||||
expect(useWorkflowStore.getState().isDirty).toBe(false);
|
||||
});
|
||||
});
|
||||
|
|
@ -54,7 +54,7 @@ interface WorkflowActions {
|
|||
) => void;
|
||||
|
||||
// History management
|
||||
pushToHistory: () => void;
|
||||
commitDeletion: () => void;
|
||||
undo: () => void;
|
||||
redo: () => void;
|
||||
canUndo: () => boolean;
|
||||
|
|
@ -99,6 +99,30 @@ type WorkflowStore = WorkflowState & WorkflowActions;
|
|||
|
||||
const MAX_HISTORY_SIZE = 50;
|
||||
|
||||
const commitHistory = (
|
||||
state: Pick<WorkflowState, 'history' | 'historyIndex'>,
|
||||
snapshot: HistoryState
|
||||
): Pick<
|
||||
WorkflowState,
|
||||
'nodes' | 'edges' | 'workflowName' | 'history' | 'historyIndex' | 'isDirty'
|
||||
> => {
|
||||
const history = [
|
||||
...state.history.slice(0, state.historyIndex + 1),
|
||||
snapshot,
|
||||
];
|
||||
|
||||
if (history.length > MAX_HISTORY_SIZE) {
|
||||
history.shift();
|
||||
}
|
||||
|
||||
return {
|
||||
...snapshot,
|
||||
history,
|
||||
historyIndex: history.length - 1,
|
||||
isDirty: true,
|
||||
};
|
||||
};
|
||||
|
||||
// Create the store
|
||||
export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
||||
// Initial state
|
||||
|
|
@ -134,27 +158,14 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
|||
});
|
||||
},
|
||||
|
||||
pushToHistory: () => {
|
||||
const state = get();
|
||||
const currentState: HistoryState = {
|
||||
nodes: state.nodes,
|
||||
edges: state.edges,
|
||||
workflowName: state.workflowName,
|
||||
};
|
||||
|
||||
// Remove any forward history if we're not at the end
|
||||
const newHistory = state.history.slice(0, state.historyIndex + 1);
|
||||
newHistory.push(currentState);
|
||||
|
||||
// Limit history size
|
||||
if (newHistory.length > MAX_HISTORY_SIZE) {
|
||||
newHistory.shift();
|
||||
}
|
||||
|
||||
set({
|
||||
history: newHistory,
|
||||
historyIndex: newHistory.length - 1,
|
||||
});
|
||||
commitDeletion: () => {
|
||||
set((state) =>
|
||||
commitHistory(state, {
|
||||
nodes: state.nodes,
|
||||
edges: state.edges,
|
||||
workflowName: state.workflowName,
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
undo: () => {
|
||||
|
|
@ -200,10 +211,10 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
|||
setNodes: (nodes, changes) => {
|
||||
// Determine whether to push to history and set isDirty based on change types
|
||||
if (changes && changes.length > 0) {
|
||||
// Check for add/remove changes (always push to history)
|
||||
const hasAddRemoveChanges = changes.some(change =>
|
||||
change.type === 'add' || change.type === 'remove'
|
||||
);
|
||||
const hasAddChanges = changes.some(change => change.type === 'add');
|
||||
// React Flow emits edge and node removals separately. They are committed
|
||||
// together from onDelete after both live-state updates have completed.
|
||||
const hasRemoveChanges = changes.some(change => change.type === 'remove');
|
||||
|
||||
// Check for position changes - only push to history when drag ENDS (dragging: false)
|
||||
// but still mark as dirty during dragging
|
||||
|
|
@ -214,11 +225,16 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
|||
change.type === 'position' && change.dragging === true
|
||||
);
|
||||
|
||||
if (hasAddRemoveChanges || hasDragEndChanges) {
|
||||
get().pushToHistory();
|
||||
set({ nodes, isDirty: true });
|
||||
} else if (isActiveDragging) {
|
||||
// During active dragging, update nodes but don't push to history
|
||||
if (hasAddChanges || hasDragEndChanges) {
|
||||
set((state) =>
|
||||
commitHistory(state, {
|
||||
nodes,
|
||||
edges: state.edges,
|
||||
workflowName: state.workflowName,
|
||||
})
|
||||
);
|
||||
} else if (hasRemoveChanges || isActiveDragging) {
|
||||
// During active dragging or deletion, update nodes before committing.
|
||||
set({ nodes, isDirty: true });
|
||||
} else {
|
||||
// For selection changes or dimension updates, don't push to history or set dirty
|
||||
|
|
@ -231,49 +247,62 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
|||
},
|
||||
|
||||
addNode: (node) => {
|
||||
const state = get();
|
||||
get().pushToHistory();
|
||||
set({
|
||||
nodes: [...state.nodes, node],
|
||||
isDirty: true
|
||||
set((state) => {
|
||||
const nodes = [...state.nodes, node];
|
||||
return commitHistory(state, {
|
||||
nodes,
|
||||
edges: state.edges,
|
||||
workflowName: state.workflowName,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateNode: (nodeId, updates) => {
|
||||
const state = get();
|
||||
get().pushToHistory();
|
||||
set({
|
||||
nodes: state.nodes.map((node) =>
|
||||
set((state) => {
|
||||
const nodes = state.nodes.map((node) =>
|
||||
node.id === nodeId ? { ...node, ...updates } : node
|
||||
),
|
||||
isDirty: true,
|
||||
);
|
||||
return commitHistory(state, {
|
||||
nodes,
|
||||
edges: state.edges,
|
||||
workflowName: state.workflowName,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
deleteNode: (nodeId) => {
|
||||
const state = get();
|
||||
get().pushToHistory();
|
||||
set({
|
||||
nodes: state.nodes.filter((node) => node.id !== nodeId),
|
||||
edges: state.edges.filter(
|
||||
set((state) => {
|
||||
const nodes = state.nodes.filter((node) => node.id !== nodeId);
|
||||
const edges = state.edges.filter(
|
||||
(edge) => edge.source !== nodeId && edge.target !== nodeId
|
||||
),
|
||||
isDirty: true,
|
||||
);
|
||||
return commitHistory(state, {
|
||||
nodes,
|
||||
edges,
|
||||
workflowName: state.workflowName,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setEdges: (edges, changes) => {
|
||||
// Determine whether to push to history and set isDirty based on change types
|
||||
if (changes && changes.length > 0) {
|
||||
// Check if any changes are user-initiated (not just selections)
|
||||
const hasDirtyChanges = changes.some(change =>
|
||||
const hasImmediateHistoryChanges = changes.some(change =>
|
||||
change.type === 'add' ||
|
||||
change.type === 'remove' ||
|
||||
change.type === 'replace'
|
||||
);
|
||||
const hasRemoveChanges = changes.some(change => change.type === 'remove');
|
||||
|
||||
if (hasDirtyChanges) {
|
||||
get().pushToHistory();
|
||||
if (hasImmediateHistoryChanges) {
|
||||
set((state) =>
|
||||
commitHistory(state, {
|
||||
nodes: state.nodes,
|
||||
edges,
|
||||
workflowName: state.workflowName,
|
||||
})
|
||||
);
|
||||
} else if (hasRemoveChanges) {
|
||||
// React Flow calls onDelete after all edge and node removals.
|
||||
set({ edges, isDirty: true });
|
||||
} else {
|
||||
// For selection changes, don't push to history
|
||||
|
|
@ -286,37 +315,48 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
|||
},
|
||||
|
||||
addEdge: (edge) => {
|
||||
const state = get();
|
||||
get().pushToHistory();
|
||||
set({
|
||||
edges: [...state.edges, edge],
|
||||
isDirty: true
|
||||
set((state) => {
|
||||
const edges = [...state.edges, edge];
|
||||
return commitHistory(state, {
|
||||
nodes: state.nodes,
|
||||
edges,
|
||||
workflowName: state.workflowName,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateEdge: (edgeId, updates) => {
|
||||
const state = get();
|
||||
get().pushToHistory();
|
||||
set({
|
||||
edges: state.edges.map((edge) =>
|
||||
set((state) => {
|
||||
const edges = state.edges.map((edge) =>
|
||||
edge.id === edgeId ? { ...edge, ...updates } : edge
|
||||
),
|
||||
isDirty: true,
|
||||
);
|
||||
return commitHistory(state, {
|
||||
nodes: state.nodes,
|
||||
edges,
|
||||
workflowName: state.workflowName,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
deleteEdge: (edgeId) => {
|
||||
const state = get();
|
||||
get().pushToHistory();
|
||||
set({
|
||||
edges: state.edges.filter((edge) => edge.id !== edgeId),
|
||||
isDirty: true,
|
||||
set((state) => {
|
||||
const edges = state.edges.filter((edge) => edge.id !== edgeId);
|
||||
return commitHistory(state, {
|
||||
nodes: state.nodes,
|
||||
edges,
|
||||
workflowName: state.workflowName,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setWorkflowName: (workflowName) => {
|
||||
get().pushToHistory();
|
||||
set({ workflowName, isDirty: true });
|
||||
set((state) =>
|
||||
commitHistory(state, {
|
||||
nodes: state.nodes,
|
||||
edges: state.edges,
|
||||
workflowName,
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
setTemplateContextVariables: (templateContextVariables) => {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6040,6 +6040,88 @@ export type ToolResponse = {
|
|||
created_by?: CreatedByResponse | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* ToolTestRequest
|
||||
*
|
||||
* Request body for testing an HTTP API tool outside a live call.
|
||||
*/
|
||||
export type ToolTestRequest = {
|
||||
/**
|
||||
* Llm Params
|
||||
*
|
||||
* Values for parameters normally supplied by the model.
|
||||
*/
|
||||
llm_params?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
/**
|
||||
* Preset Params
|
||||
*
|
||||
* Resolved values for parameters normally supplied from presets.
|
||||
*/
|
||||
preset_params?: {
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* ToolTestResponse
|
||||
*
|
||||
* Result of testing an HTTP API tool.
|
||||
*/
|
||||
export type ToolTestResponse = {
|
||||
/**
|
||||
* Status
|
||||
*/
|
||||
status: string;
|
||||
/**
|
||||
* Status Code
|
||||
*/
|
||||
status_code?: number | null;
|
||||
/**
|
||||
* Data
|
||||
*/
|
||||
data?: unknown | null;
|
||||
/**
|
||||
* Error
|
||||
*/
|
||||
error?: string | null;
|
||||
/**
|
||||
* Hint
|
||||
*/
|
||||
hint?: string | null;
|
||||
/**
|
||||
* Request Method
|
||||
*/
|
||||
request_method: string;
|
||||
/**
|
||||
* Request Url
|
||||
*/
|
||||
request_url: string;
|
||||
/**
|
||||
* Request Headers
|
||||
*/
|
||||
request_headers?: {
|
||||
[key: string]: string;
|
||||
};
|
||||
/**
|
||||
* Request Body
|
||||
*/
|
||||
request_body?: {
|
||||
[key: string]: unknown;
|
||||
} | null;
|
||||
/**
|
||||
* Request Params
|
||||
*/
|
||||
request_params?: {
|
||||
[key: string]: unknown;
|
||||
} | null;
|
||||
/**
|
||||
* Duration Ms
|
||||
*/
|
||||
duration_ms: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* TransferCallConfig
|
||||
*
|
||||
|
|
@ -10856,6 +10938,50 @@ export type RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponses = {
|
|||
|
||||
export type RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponse = RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponses[keyof RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponses];
|
||||
|
||||
export type TestToolApiV1ToolsToolUuidTestPostData = {
|
||||
body: ToolTestRequest;
|
||||
headers?: {
|
||||
/**
|
||||
* Authorization
|
||||
*/
|
||||
authorization?: string | null;
|
||||
/**
|
||||
* X-Api-Key
|
||||
*/
|
||||
'X-API-Key'?: string | null;
|
||||
};
|
||||
path: {
|
||||
/**
|
||||
* Tool Uuid
|
||||
*/
|
||||
tool_uuid: string;
|
||||
};
|
||||
query?: never;
|
||||
url: '/api/v1/tools/{tool_uuid}/test';
|
||||
};
|
||||
|
||||
export type TestToolApiV1ToolsToolUuidTestPostErrors = {
|
||||
/**
|
||||
* Not found
|
||||
*/
|
||||
404: unknown;
|
||||
/**
|
||||
* Validation Error
|
||||
*/
|
||||
422: HttpValidationError;
|
||||
};
|
||||
|
||||
export type TestToolApiV1ToolsToolUuidTestPostError = TestToolApiV1ToolsToolUuidTestPostErrors[keyof TestToolApiV1ToolsToolUuidTestPostErrors];
|
||||
|
||||
export type TestToolApiV1ToolsToolUuidTestPostResponses = {
|
||||
/**
|
||||
* Successful Response
|
||||
*/
|
||||
200: ToolTestResponse;
|
||||
};
|
||||
|
||||
export type TestToolApiV1ToolsToolUuidTestPostResponse = TestToolApiV1ToolsToolUuidTestPostResponses[keyof TestToolApiV1ToolsToolUuidTestPostResponses];
|
||||
|
||||
export type UnarchiveToolApiV1ToolsToolUuidUnarchivePostData = {
|
||||
body?: never;
|
||||
headers?: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue