Use radio buttons for mock tool choices

This commit is contained in:
akhisud3195 2025-02-17 15:16:50 +05:30
parent 2efe076226
commit c4e6f1d607

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { WorkflowTool } from "../../../lib/types/workflow_types"; import { WorkflowTool } from "../../../lib/types/workflow_types";
import { Accordion, AccordionItem, Button, Checkbox, Select, SelectItem, Switch } from "@nextui-org/react"; import { Accordion, AccordionItem, Button, Checkbox, Select, SelectItem, Switch, RadioGroup, Radio } from "@nextui-org/react";
import { z } from "zod"; import { z } from "zod";
import { ActionButton, Pane } from "./pane"; import { ActionButton, Pane } from "./pane";
import { EditableField } from "../../../lib/components/editable-field"; import { EditableField } from "../../../lib/components/editable-field";
@ -8,6 +8,8 @@ import { Divider } from "@nextui-org/react";
import { Label } from "../../../lib/components/label"; import { Label } from "../../../lib/components/label";
import { TrashIcon, XIcon } from "lucide-react"; import { TrashIcon, XIcon } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Link as NextUILink } from "@nextui-org/react";
import Link from "next/link";
export function ParameterConfig({ export function ParameterConfig({
param, param,
@ -225,28 +227,70 @@ export function ToolConfig({
<Divider /> <Divider />
<Checkbox <Label label="TOOL RESPONSES" />
key="mockInPlayground"
size="sm" <div className="ml-4 flex flex-col gap-2">
isSelected={tool.mockInPlayground ?? false} <RadioGroup
onValueChange={(value) => handleUpdate({ defaultValue="mock"
...tool, value={tool.mockInPlayground ? "mock" : "api"}
mockInPlayground: value onValueChange={(value) => handleUpdate({
})} ...tool,
> mockInPlayground: value === "mock",
Mock tool in Playground autoSubmitMockedResponse: value === "mock" ? true : undefined
</Checkbox> })}
{tool.mockInPlayground && <Checkbox orientation="horizontal"
key="autoSubmitMockedResponse" classNames={{
size="sm" wrapper: "gap-8",
isSelected={tool.autoSubmitMockedResponse ?? false} label: "text-sm"
onValueChange={(value) => handleUpdate({ }}
...tool, >
autoSubmitMockedResponse: value <Radio
})} value="mock"
> size="sm"
Auto-submit mocked response classNames={{
</Checkbox>} base: "max-w-[50%]",
label: "text-sm font-normal"
}}
>
Mock tool responses in playground
</Radio>
<Radio
value="api"
size="sm"
classNames={{
base: "max-w-[50%]",
label: "text-sm font-normal"
}}
>
Connect tool to your API
</Radio>
</RadioGroup>
{tool.mockInPlayground && (
<div className="ml-0">
<Checkbox
key="autoSubmitMockedResponse"
size="sm"
classNames={{
label: "text-xs font-normal"
}}
isSelected={tool.autoSubmitMockedResponse ?? true}
onValueChange={(value) => handleUpdate({
...tool,
autoSubmitMockedResponse: value
})}
>
Auto-submit mocked response in playground
</Checkbox>
</div>
)}
{!tool.mockInPlayground && (
<div className="ml-0 text-danger text-xs">
Please configure your webhook in the <strong>Integrate</strong> page if you haven&apos;t already.
</div>
)}
</div>
<Divider /> <Divider />