diff --git a/client/package.json b/client/package.json index 7b020ec8b..b59deff29 100644 --- a/client/package.json +++ b/client/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.1", "class-variance-authority": "^0.7.0", diff --git a/client/src/App.tsx b/client/src/App.tsx index d14ebedea..bd5273c64 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -207,7 +207,7 @@ const App = () => { Notifications - + Tools @@ -243,7 +243,10 @@ const App = () => { listTools={listTools} callTool={callTool} selectedTool={selectedTool} - setSelectedTool={setSelectedTool} + setSelectedTool={(tool) => { + setSelectedTool(tool); + setToolResult(""); + }} toolResult={toolResult} error={error} /> diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx index 7b3c35856..97cb926d9 100644 --- a/client/src/components/PromptsTab.tsx +++ b/client/src/components/PromptsTab.tsx @@ -5,6 +5,7 @@ import { TabsContent } from "@/components/ui/tabs"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { useState } from "react"; +import { Label } from "@/components/ui/label"; export type Prompt = { name: string; @@ -98,7 +99,9 @@ const PromptsTab = ({ )} {selectedPrompt.arguments?.map((arg) => (
+ diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index 11bee3976..9cd090c77 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -1,12 +1,18 @@ import { TabsContent } from "@/components/ui/tabs"; import { Button } from "@/components/ui/button"; -import { Textarea } from "@/components/ui/textarea"; +import { Input } from "@/components/ui/input"; import { Send, AlertCircle } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { useState } from "react"; +import { Label } from "@/components/ui/label"; export type Tool = { name: string; + description: string; + inputSchema: { + type: string; + properties: Record; + }; }; const ToolsTab = ({ @@ -26,7 +32,7 @@ const ToolsTab = ({ toolResult: string; error: string | null; }) => { - const [params, setParams] = useState(""); + const [params, setParams] = useState>({}); return ( @@ -46,6 +52,9 @@ const ToolsTab = ({ onClick={() => setSelectedTool(tool)} > {tool.name} + + {tool.description} +
))} @@ -67,22 +76,47 @@ const ToolsTab = ({ ) : selectedTool ? (
-