mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-06-09 19:45:17 +02:00
Add section cards inside tools config
This commit is contained in:
akhisud3195
parent
e1f1120d92
commit
46a539a786
4 changed files with 333 additions and 156 deletions
|
|
@ -401,12 +401,8 @@ export function AgentConfig({
|
|||
<div className="flex flex-col gap-4 pb-4 pt-0">
|
||||
{/* Identity Section Card */}
|
||||
<SectionCard
|
||||
title={
|
||||
<>
|
||||
<UserIcon className="w-5 h-5 text-indigo-500" />
|
||||
<span className="text-base font-semibold">Identity</span>
|
||||
</>
|
||||
}
|
||||
icon={<UserIcon className="w-5 h-5 text-indigo-500" />}
|
||||
title="Identity"
|
||||
labelWidth="md:w-32"
|
||||
className="mb-1"
|
||||
>
|
||||
|
|
@ -449,12 +445,8 @@ export function AgentConfig({
|
|||
</SectionCard>
|
||||
{/* Behavior Section Card */}
|
||||
<SectionCard
|
||||
title={
|
||||
<>
|
||||
<Settings className="w-5 h-5 text-indigo-500" />
|
||||
<span className="text-base font-semibold">Behavior</span>
|
||||
</>
|
||||
}
|
||||
icon={<Settings className="w-5 h-5 text-indigo-500" />}
|
||||
title="Behavior"
|
||||
labelWidth="md:w-32"
|
||||
className="mb-1"
|
||||
>
|
||||
|
|
@ -603,12 +595,8 @@ export function AgentConfig({
|
|||
</SectionCard>
|
||||
{/* RAG Data Sources Section Card */}
|
||||
<SectionCard
|
||||
title={
|
||||
<>
|
||||
<DatabaseIcon className="w-5 h-5 text-indigo-500" />
|
||||
<span className="text-base font-semibold">RAG</span>
|
||||
</>
|
||||
}
|
||||
icon={<DatabaseIcon className="w-5 h-5 text-indigo-500" />}
|
||||
title="RAG"
|
||||
labelWidth="md:w-32"
|
||||
className="mb-1"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@
|
|||
import { WorkflowTool } from "../../../lib/types/workflow_types";
|
||||
import { Checkbox, Select, SelectItem, RadioGroup, Radio } from "@heroui/react";
|
||||
import { z } from "zod";
|
||||
import { ImportIcon, XIcon, PlusIcon, FolderIcon } from "lucide-react";
|
||||
import { ImportIcon, XIcon, PlusIcon, FolderIcon} from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Panel } from "@/components/common/panel-common";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import clsx from "clsx";
|
||||
import { SectionCard } from "@/components/common/section-card";
|
||||
import { ToolParamCard } from "@/components/common/tool-param-card";
|
||||
import { UserIcon, Settings, Settings2 } from "lucide-react";
|
||||
import { EditableField } from "@/app/lib/components/editable-field";
|
||||
|
||||
// Update textarea styles with improved states
|
||||
const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
|
||||
|
|
@ -256,6 +260,9 @@ export function ToolConfig({
|
|||
if (value.length === 0) {
|
||||
return "Name cannot be empty";
|
||||
}
|
||||
if (value !== tool.name && usedToolNames.has(value)) {
|
||||
return "This name is already taken";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -297,23 +304,23 @@ export function ToolConfig({
|
|||
};
|
||||
|
||||
return (
|
||||
<Panel
|
||||
<Panel
|
||||
title={
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-gray-100">
|
||||
{tool.name}
|
||||
</div>
|
||||
{tool.isMcp && (
|
||||
<div className="flex items-center gap-2 text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
|
||||
<div className="flex items-center gap-2 text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
|
||||
<ImportIcon className="w-4 h-4 text-blue-700 dark:text-blue-400" />
|
||||
<span className="text-xs">MCP: {tool.mcpServerName}</span>
|
||||
<span>MCP: {tool.mcpServerName}</span>
|
||||
</div>
|
||||
)}
|
||||
{tool.isLibrary && (
|
||||
<div className="flex items-center gap-2 text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
|
||||
<div className="flex items-center gap-2 text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full text-gray-700 dark:text-gray-300">
|
||||
<FolderIcon className="w-4 h-4 text-blue-700 dark:text-blue-400" />
|
||||
<span className="text-xs">Library Tool</span>
|
||||
<span>Library Tool</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -329,114 +336,115 @@ export function ToolConfig({
|
|||
</div>
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col gap-6 p-4">
|
||||
{!isReadOnly && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Name
|
||||
</label>
|
||||
<div className={clsx(
|
||||
"border rounded-lg focus-within:ring-2",
|
||||
nameError
|
||||
? "border-red-500 focus-within:ring-red-500/20"
|
||||
: "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
|
||||
)}>
|
||||
<Textarea
|
||||
<div className="flex flex-col gap-4 pb-4 pt-4 p-4">
|
||||
{/* Identity Section */}
|
||||
<SectionCard
|
||||
icon={<UserIcon className="w-5 h-5 text-indigo-500" />}
|
||||
title="Identity"
|
||||
labelWidth="md:w-32"
|
||||
className="mb-1"
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Name</label>
|
||||
<div className="flex-1">
|
||||
<EditableField
|
||||
value={tool.name}
|
||||
useValidation={true}
|
||||
updateOnBlur={true}
|
||||
onChange={(value) => {
|
||||
setNameError(validateToolName(value));
|
||||
if (!validateToolName(value)) {
|
||||
handleUpdate({
|
||||
...tool,
|
||||
name: value
|
||||
});
|
||||
}
|
||||
}}
|
||||
validate={(value) => {
|
||||
const error = validateToolName(value);
|
||||
setNameError(error);
|
||||
return { valid: !error, errorMessage: error || undefined };
|
||||
}}
|
||||
onValidatedChange={(value) => {
|
||||
handleUpdate({
|
||||
...tool,
|
||||
name: value
|
||||
});
|
||||
}}
|
||||
placeholder="Enter tool name..."
|
||||
className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
|
||||
autoResize
|
||||
showSaveButton={true}
|
||||
showDiscardButton={true}
|
||||
error={nameError}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Description</label>
|
||||
<div className="flex-1">
|
||||
<EditableField
|
||||
value={tool.description || ""}
|
||||
onChange={(value) => handleUpdate({ ...tool, description: value })}
|
||||
multiline={true}
|
||||
placeholder="Describe what this tool does..."
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
{nameError && (
|
||||
<p className="text-sm text-red-500">{nameError}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Description
|
||||
</label>
|
||||
<Textarea
|
||||
value={tool.description}
|
||||
onChange={(e) => handleUpdate({
|
||||
...tool,
|
||||
description: e.target.value
|
||||
})}
|
||||
placeholder="Describe what this tool does..."
|
||||
disabled={isReadOnly}
|
||||
className={textareaStyles}
|
||||
autoResize
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isReadOnly && (
|
||||
<div className="space-y-4">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Tool Mode
|
||||
</label>
|
||||
|
||||
<RadioGroup
|
||||
defaultValue="mock"
|
||||
value={tool.mockTool ? "mock" : "api"}
|
||||
onValueChange={(value) => handleUpdate({
|
||||
...tool,
|
||||
mockTool: value === "mock",
|
||||
autoSubmitMockedResponse: value === "mock" ? true : undefined
|
||||
})}
|
||||
orientation="horizontal"
|
||||
classNames={{
|
||||
wrapper: "flex gap-12 pl-3",
|
||||
label: "text-sm"
|
||||
}}
|
||||
>
|
||||
<Radio
|
||||
value="mock"
|
||||
classNames={{
|
||||
base: "px-2 py-1 data-[selected=true]:bg-indigo-50 dark:data-[selected=true]:bg-indigo-950/50 rounded-lg transition-colors",
|
||||
label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
|
||||
}}
|
||||
>
|
||||
Mock tool responses
|
||||
</Radio>
|
||||
<Radio
|
||||
value="api"
|
||||
classNames={{
|
||||
base: "px-2 py-1 data-[selected=true]:bg-indigo-50 dark:data-[selected=true]:bg-indigo-900/50 rounded-lg transition-colors",
|
||||
label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
|
||||
}}
|
||||
>
|
||||
Connect tool to your API
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tool.mockTool && (
|
||||
<div className={`space-y-4 ${dividerStyles} pt-6`}>
|
||||
<div className="space-y-4">
|
||||
<label className={sectionHeaderStyles}>
|
||||
Mock Settings
|
||||
</label>
|
||||
<div className="pl-3 space-y-4">
|
||||
</SectionCard>
|
||||
{/* Behavior Section */}
|
||||
<SectionCard
|
||||
icon={<Settings className="w-5 h-5 text-indigo-500" />}
|
||||
title="Behavior"
|
||||
labelWidth="md:w-32"
|
||||
className="mb-1"
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
{!isReadOnly && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Tool Mode</label>
|
||||
<RadioGroup
|
||||
defaultValue="mock"
|
||||
value={tool.mockTool ? "mock" : "api"}
|
||||
onValueChange={(value) => handleUpdate({
|
||||
...tool,
|
||||
mockTool: value === "mock",
|
||||
autoSubmitMockedResponse: value === "mock" ? true : undefined
|
||||
})}
|
||||
orientation="horizontal"
|
||||
classNames={{
|
||||
wrapper: "flex flex-col md:flex-row gap-2 md:gap-8 pl-0 md:pl-3",
|
||||
label: "text-sm"
|
||||
}}
|
||||
>
|
||||
<Radio
|
||||
value="mock"
|
||||
classNames={{
|
||||
base: "px-2 py-1 rounded-lg transition-colors",
|
||||
label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
|
||||
}}
|
||||
>
|
||||
Mock tool responses
|
||||
</Radio>
|
||||
<Radio
|
||||
value="api"
|
||||
classNames={{
|
||||
base: "px-2 py-1 rounded-lg transition-colors",
|
||||
label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
|
||||
}}
|
||||
>
|
||||
Connect tool to your API
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
{tool.mockTool && (
|
||||
<div className="flex flex-col gap-2 pl-0 md:pl-3 mt-2">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Mock Response Schema</label>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 mb-1">Describe the response the mock tool should return. This will be shown in the chat when the tool is called. You can also provide a JSON schema for the response.</span>
|
||||
<EditableField
|
||||
value={tool.mockInstructions || ''}
|
||||
onChange={(value) => handleUpdate({
|
||||
...tool,
|
||||
mockInstructions: value
|
||||
})}
|
||||
multiline={true}
|
||||
placeholder="Mock response instructions..."
|
||||
className="w-full text-xs p-2 bg-white dark:bg-gray-900"
|
||||
/>
|
||||
<Checkbox
|
||||
size="sm"
|
||||
isSelected={tool.autoSubmitMockedResponse ?? true}
|
||||
|
|
@ -444,37 +452,41 @@ export function ToolConfig({
|
|||
...tool,
|
||||
autoSubmitMockedResponse: value
|
||||
})}
|
||||
disabled={isReadOnly}
|
||||
className="mt-2"
|
||||
>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-300">
|
||||
Automatically send mock response in chat
|
||||
</span>
|
||||
</Checkbox>
|
||||
|
||||
<Textarea
|
||||
value={tool.mockInstructions || ''}
|
||||
onChange={(e) => handleUpdate({
|
||||
...tool,
|
||||
mockInstructions: e.target.value
|
||||
})}
|
||||
placeholder="Describe the response the mock tool should return..."
|
||||
className={textareaStyles}
|
||||
autoResize
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`space-y-4 ${dividerStyles} pt-6`}>
|
||||
<label className={sectionHeaderStyles}>
|
||||
Parameters
|
||||
</label>
|
||||
<div className="pl-3 space-y-3">
|
||||
{renderParameters()}
|
||||
</div>
|
||||
|
||||
{!isReadOnly && (
|
||||
<div className="pl-3">
|
||||
</SectionCard>
|
||||
{/* Parameters Section */}
|
||||
<SectionCard
|
||||
icon={<Settings2 className="w-5 h-5 text-indigo-500" />}
|
||||
title="Parameters"
|
||||
labelWidth="md:w-32"
|
||||
className="mb-1"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
{tool.parameters?.properties && Object.entries(tool.parameters.properties).map(([paramName, param]) => (
|
||||
<ToolParamCard
|
||||
key={paramName}
|
||||
param={{
|
||||
name: paramName,
|
||||
description: param.description,
|
||||
type: param.type,
|
||||
required: tool.parameters?.required?.includes(paramName) ?? false
|
||||
}}
|
||||
handleUpdate={handleParamUpdate}
|
||||
handleDelete={handleParamDelete}
|
||||
handleRename={handleParamRename}
|
||||
readOnly={isReadOnly}
|
||||
/>
|
||||
))}
|
||||
{!isReadOnly && (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
|
|
@ -488,7 +500,6 @@ export function ToolConfig({
|
|||
description: ''
|
||||
}
|
||||
};
|
||||
|
||||
handleUpdate({
|
||||
...tool,
|
||||
parameters: {
|
||||
|
|
@ -498,13 +509,13 @@ export function ToolConfig({
|
|||
}
|
||||
});
|
||||
}}
|
||||
className="hover:bg-indigo-100 dark:hover:bg-indigo-900 hover:shadow-indigo-500/20 dark:hover:shadow-indigo-400/20 hover:shadow-lg transition-all"
|
||||
className="hover:bg-indigo-100 dark:hover:bg-indigo-900 hover:shadow-indigo-500/20 dark:hover:shadow-indigo-400/20 hover:shadow-lg transition-all mt-2"
|
||||
>
|
||||
Add Parameter
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -2,25 +2,57 @@ import React, { useState } from "react";
|
|||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
|
||||
interface SectionCardProps {
|
||||
icon?: React.ReactNode;
|
||||
title: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
labelWidth?: string; // e.g., 'md:w-32'
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
chevronSize?: string;
|
||||
}
|
||||
|
||||
export function SectionCard({ title, children, labelWidth = 'md:w-32', className = '' }: SectionCardProps) {
|
||||
export function SectionCard({ icon, title, children, labelWidth = 'md:w-32', className = '', style, chevronSize = 'w-4 h-4' }: SectionCardProps) {
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
|
||||
React.useEffect(() => {
|
||||
const btn = document.getElementById(`section-card-header-${title && typeof title === 'string' ? title : ''}`);
|
||||
if (btn) {
|
||||
console.log('SectionCard header button:', btn, btn.getBoundingClientRect(), window.getComputedStyle(btn));
|
||||
const chevron = btn.querySelector('svg');
|
||||
if (chevron) {
|
||||
console.log('Chevron:', chevron, chevron.getBoundingClientRect(), window.getComputedStyle(chevron));
|
||||
}
|
||||
const iconEl = btn.querySelector('.section-card-icon');
|
||||
if (iconEl) {
|
||||
console.log('Icon:', iconEl, iconEl.getBoundingClientRect(), window.getComputedStyle(iconEl));
|
||||
}
|
||||
const label = btn.querySelector('span');
|
||||
if (label) {
|
||||
console.log('Label:', label, label.getBoundingClientRect(), window.getComputedStyle(label));
|
||||
}
|
||||
}
|
||||
}, [title]);
|
||||
|
||||
return (
|
||||
<div className={`rounded-lg shadow border border-zinc-200 dark:border-zinc-800 p-6 bg-white dark:bg-gray-900 ${className}`}>
|
||||
<div className={`rounded-lg shadow border border-zinc-200 dark:border-zinc-800 p-6 bg-white dark:bg-gray-900 ${className}`}
|
||||
style={style}
|
||||
>
|
||||
<button
|
||||
id={`section-card-header-${title && typeof title === 'string' ? title : ''}`}
|
||||
type="button"
|
||||
className={`flex items-center gap-2 ${labelWidth} ${expanded ? 'mb-6' : 'mb-1'} focus:outline-none select-none`}
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
{expanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
|
||||
{title}
|
||||
<span className={`flex-none shrink-0`}>
|
||||
{expanded ? <ChevronDown className={`${chevronSize} text-gray-400`} /> : <ChevronRight className={`${chevronSize} text-gray-400`} />}
|
||||
</span>
|
||||
{icon && (
|
||||
<div className="section-card-icon flex items-center justify-center w-6 h-6 flex-none shrink-0">
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-semibold flex-1 text-left">{title}</span>
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
|
|
|
|||
146
apps/rowboat/components/common/tool-param-card.tsx
Normal file
146
apps/rowboat/components/common/tool-param-card.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { ChevronDown, ChevronRight, Trash2 } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectItem } from "@heroui/react";
|
||||
import { Checkbox } from "@heroui/react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { EditableField } from "@/app/lib/components/editable-field";
|
||||
|
||||
export function ToolParamCard({
|
||||
param,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleRename,
|
||||
readOnly
|
||||
}: {
|
||||
param: {
|
||||
name: string,
|
||||
description: string,
|
||||
type: string,
|
||||
required: boolean
|
||||
},
|
||||
handleUpdate: (name: string, data: {
|
||||
description: string,
|
||||
type: string,
|
||||
required: boolean
|
||||
}) => void,
|
||||
handleDelete: (name: string) => void,
|
||||
handleRename: (oldName: string, newName: string) => void,
|
||||
readOnly?: boolean
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [localName, setLocalName] = useState(param.name);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalName(param.name);
|
||||
}, [param.name]);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-gray-900 mb-1">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 w-full px-4 py-2 focus:outline-none select-none"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
{expanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
|
||||
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex-1 text-left truncate">{param.name}</span>
|
||||
{!readOnly && (
|
||||
<Button
|
||||
variant="tertiary"
|
||||
size="sm"
|
||||
onClick={e => { e.stopPropagation(); handleDelete(param.name); }}
|
||||
startContent={<Trash2 className="w-4 h-4" />}
|
||||
className="ml-2"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
maxHeight: expanded ? 9999 : 0,
|
||||
overflow: "hidden",
|
||||
transition: "max-height 0.2s cubic-bezier(0.4,0,0.2,1)"
|
||||
}}
|
||||
>
|
||||
{expanded && (
|
||||
<div className="flex flex-col gap-4 px-4 pb-4 pt-2">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Name</label>
|
||||
<div className="flex-1">
|
||||
<EditableField
|
||||
value={localName}
|
||||
onChange={(value: string) => {
|
||||
setLocalName(value);
|
||||
if (value && value !== param.name) {
|
||||
handleRename(param.name, value);
|
||||
}
|
||||
}}
|
||||
multiline={false}
|
||||
showSaveButton={true}
|
||||
showDiscardButton={true}
|
||||
className="w-full"
|
||||
locked={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Description</label>
|
||||
<div className="flex-1">
|
||||
<EditableField
|
||||
value={param.description}
|
||||
onChange={(value: string) => handleUpdate(param.name, {
|
||||
...param,
|
||||
description: value
|
||||
})}
|
||||
multiline={true}
|
||||
placeholder="Describe this parameter..."
|
||||
className="w-full"
|
||||
locked={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row md:items-start gap-1 md:gap-0">
|
||||
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Type</label>
|
||||
<div className="flex-1">
|
||||
<Select
|
||||
variant="bordered"
|
||||
className="w-52"
|
||||
size="sm"
|
||||
selectedKeys={new Set([param.type])}
|
||||
onSelectionChange={keys => {
|
||||
handleUpdate(param.name, {
|
||||
...param,
|
||||
type: Array.from(keys)[0] as string
|
||||
});
|
||||
}}
|
||||
isDisabled={readOnly}
|
||||
>
|
||||
{['string', 'number', 'boolean', 'array', 'object'].map(type => (
|
||||
<SelectItem key={type}>{type}</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
size="sm"
|
||||
isSelected={param.required}
|
||||
onValueChange={() => handleUpdate(param.name, {
|
||||
...param,
|
||||
required: !param.required
|
||||
})}
|
||||
isDisabled={readOnly}
|
||||
className="mt-2"
|
||||
>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">Required parameter</span>
|
||||
</Checkbox>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue