mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-04-28 09:56:23 +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
|
|
@ -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