hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: When tool type cannot be determined, use DynamicJsonForm

Browse Source
This commit is contained in:
Maxwell Gerber
2025-04-08 14:54:48 -07:00
parent 4053aa122d
commit 4bc44c4d19
2 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/DynamicJsonForm.tsx
View File

@@ -36,6 +36,7 @@ interface DynamicJsonFormProps {
value: JsonValue;
onChange: (value: JsonValue) => void;
maxDepth?: number;
onlyJSON?: boolean;
}
const DynamicJsonForm = ({
@@ -43,8 +44,9 @@ const DynamicJsonForm = ({
value,
onChange,
maxDepth = 3,
onlyJSON = false,
}: DynamicJsonFormProps) => {
const [isJsonMode, setIsJsonMode] = useState(false);
const [isJsonMode, setIsJsonMode] = useState(onlyJSON);
const [jsonError, setJsonError] = useState<string>();
// Store the raw JSON string to allow immediate feedback during typing
// while deferring parsing until the user stops typing
@@ -374,9 +376,11 @@ const DynamicJsonForm = ({
Format JSON
</Button>
)}
<Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
{isJsonMode ? "Switch to Form" : "Switch to JSON"}
</Button>
{!onlyJSON && (
<Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
{isJsonMode ? "Switch to Form" : "Switch to JSON"}
</Button>
)}
</div>
{isJsonMode ? (

46
client/src/components/ToolsTab.tsx
View File

@@ -40,7 +40,13 @@ const ToolsTab = ({
}) => {
const [params, setParams] = useState<Record<string, unknown>>({});
useEffect(() => {
setParams({});
const params = Object.entries(
selectedTool?.inputSchema.properties ?? [],
).map(([key, value]) => [
key,
generateDefaultValue(value as JsonSchemaType),
]);
setParams(Object.fromEntries(params));
}, [selectedTool]);
const renderToolResult = () => {
@@ -194,10 +200,7 @@ const ToolsTab = ({
description: prop.description,
items: prop.items,
}}
value={
(params[key] as JsonValue) ??
generateDefaultValue(prop)
}
value={params[key] as JsonValue}
onChange={(newValue: JsonValue) => {
setParams({
...params,
@@ -206,13 +209,9 @@ const ToolsTab = ({
}}
/>
</div>
) : (
) : prop.type === "number" || prop.type === "integer" ? (
<Input
type={
prop.type === "number" || prop.type === "integer"
? "number"
: "text"
}
type="number"
id={key}
name={key}
placeholder={prop.description}
@@ -220,15 +219,30 @@ const ToolsTab = ({
onChange={(e) =>
setParams({
...params,
[key]:
prop.type === "number" ||
prop.type === "integer"
? Number(e.target.value)
: e.target.value,
[key]: Number(e.target.value),
})
}
className="mt-1"
/>
) : (
<div className="mt-1">
<DynamicJsonForm
onlyJSON
schema={{
type: prop.type,
properties: prop.properties,
description: prop.description,
items: prop.items,
}}
value={params[key] as JsonValue}
onChange={(newValue: JsonValue) => {
setParams({
...params,
[key]: newValue,
});
}}
/>
</div>
)}
</div>
);