Update tools UI and consolidate editable fields over heroUI (#185)

* Make UI UX fixes to tools and tool configs

* Fix font sizing and dark mode issues for tool labels

* Use heroUI input fields and consolidate editable fields into input-field

* Add auto focus to instructions and examples for agents
This commit is contained in:
Akhilesh Sudhakar 2025-07-29 11:32:31 +05:30 committed by GitHub
parent 86fb4824b2
commit 4fd06f9761
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 807 additions and 579 deletions

View file

@ -5,7 +5,7 @@ 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";
import { InputField } from "@/app/lib/components/input-field";
export function ToolParamCard({
param,
@ -71,7 +71,7 @@ export function ToolParamCard({
<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
<InputField type="text"
value={localName}
onChange={(value: string) => {
setLocalName(value);
@ -80,8 +80,7 @@ export function ToolParamCard({
}
}}
multiline={false}
showSaveButton={true}
showDiscardButton={true}
className="w-full"
locked={readOnly}
/>
@ -90,7 +89,8 @@ export function ToolParamCard({
<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
<InputField
type="text"
value={param.description}
onChange={(value: string) => handleUpdate(param.name, {
...param,