Add draft version of enhanced object input editing

2025-01-27 21:05:11 -07:00
parent 361f9d109b
commit a4469f7895
6 changed files with 363 additions and 45 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -27,11 +27,14 @@
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
+    "@types/prismjs": "^1.26.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.447.0",
+    "prismjs": "^1.29.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
+    "react-simple-code-editor": "^0.14.1",
    "react-toastify": "^10.0.6",
    "serve-handler": "^6.1.6",
    "tailwind-merge": "^2.5.3",
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -0,0 +1,230 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import JsonEditor from "./JsonEditor";
+
+export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+
+export type JsonSchemaType = {
+  type: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
+  description?: string;
+  properties?: Record<string, JsonSchemaType>;
+  items?: JsonSchemaType;
+};
+
+type JsonObject = { [key: string]: JsonValue };
+
+interface DynamicJsonFormProps {
+  schema: JsonSchemaType;
+  value: JsonValue;
+  onChange: (value: JsonValue) => void;
+  maxDepth?: number;
+}
+
+const formatFieldLabel = (key: string): string => {
+  return key
+    .replace(/([A-Z])/g, ' $1') // Insert space before capital letters
+    .replace(/_/g, ' ') // Replace underscores with spaces
+    .replace(/^\w/, c => c.toUpperCase()); // Capitalize first letter
+};
+
+const DynamicJsonForm = ({
+  schema,
+  value,
+  onChange,
+  maxDepth = 3
+}: DynamicJsonFormProps) => {
+  const [isJsonMode, setIsJsonMode] = useState(false);
+  const [jsonError, setJsonError] = useState<string>();
+
+  const generateDefaultValue = (propSchema: JsonSchemaType): JsonValue => {
+    switch (propSchema.type) {
+      case 'string':
+        return '';
+      case 'number':
+      case 'integer':
+        return 0;
+      case 'boolean':
+        return false;
+      case 'array':
+        return [];
+      case 'object': {
+        const obj: JsonObject = {};
+        if (propSchema.properties) {
+          Object.entries(propSchema.properties).forEach(([key, prop]) => {
+            obj[key] = generateDefaultValue(prop);
+          });
+        }
+        return obj;
+      }
+      default:
+        return null;
+    }
+  };
+
+  const renderFormFields = (
+    propSchema: JsonSchemaType,
+    currentValue: JsonValue,
+    path: string[] = [],
+    depth: number = 0
+  ) => {
+    if (depth >= maxDepth && (propSchema.type === 'object' || propSchema.type === 'array')) {
+      // Render as JSON editor when max depth is reached
+      return (
+        <JsonEditor
+          value={JSON.stringify(currentValue ?? generateDefaultValue(propSchema), null, 2)}
+          onChange={(newValue) => {
+            try {
+              const parsed = JSON.parse(newValue);
+              handleFieldChange(path, parsed);
+              setJsonError(undefined);
+            } catch (err) {
+              setJsonError(err instanceof Error ? err.message : 'Invalid JSON');
+            }
+          }}
+          error={jsonError}
+        />
+      );
+    }
+
+    switch (propSchema.type) {
+      case 'string':
+      case 'number':
+      case 'integer':
+        return (
+          <Input
+            type={propSchema.type === 'string' ? 'text' : 'number'}
+            value={(currentValue as string | number) ?? ''}
+            onChange={(e) => handleFieldChange(path, 
+              propSchema.type === 'string' ? e.target.value : Number(e.target.value)
+            )}
+            placeholder={propSchema.description}
+          />
+        );
+      case 'boolean':
+        return (
+          <Input
+            type="checkbox"
+            checked={(currentValue as boolean) ?? false}
+            onChange={(e) => handleFieldChange(path, e.target.checked)}
+            className="w-4 h-4"
+          />
+        );
+      case 'object':
+        if (!propSchema.properties) return null;
+        return (
+          <div className="space-y-4 border rounded-md p-4">
+            {Object.entries(propSchema.properties).map(([key, prop]) => (
+              <div key={key} className="space-y-2">
+                <Label>{formatFieldLabel(key)}</Label>
+                {renderFormFields(
+                  prop,
+                  (currentValue as JsonObject)?.[key],
+                  [...path, key],
+                  depth + 1
+                )}
+              </div>
+            ))}
+          </div>
+        );
+      case 'array': {
+        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+        if (!propSchema.items) return null;
+        return (
+          <div className="space-y-2">
+            {arrayValue.map((item, index) => (
+              <div key={index} className="flex items-center gap-2">
+                {renderFormFields(
+                  propSchema.items as JsonSchemaType,
+                  item,
+                  [...path, index.toString()],
+                  depth + 1
+                )}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const newArray = [...arrayValue];
+                    newArray.splice(index, 1);
+                    handleFieldChange(path, newArray);
+                  }}
+                >
+                  Remove
+                </Button>
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                handleFieldChange(
+                  path,
+                  [...arrayValue, generateDefaultValue(propSchema.items as JsonSchemaType)]
+                );
+              }}
+            >
+              Add Item
+            </Button>
+          </div>
+        );
+      }
+      default:
+        return null;
+    }
+  };
+
+  const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
+    if (path.length === 0) {
+      onChange(fieldValue);
+      return;
+    }
+
+    const newValue = { ...(typeof value === 'object' && value !== null && !Array.isArray(value) ? value : {}) } as JsonObject;
+    let current: JsonObject = newValue;
+    
+    for (let i = 0; i < path.length - 1; i++) {
+      const key = path[i];
+      if (!(key in current)) {
+        current[key] = {};
+      }
+      current = current[key] as JsonObject;
+    }
+    
+    current[path[path.length - 1]] = fieldValue;
+    onChange(newValue);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setIsJsonMode(!isJsonMode)}
+        >
+          {isJsonMode ? "Switch to Form" : "Switch to JSON"}
+        </Button>
+      </div>
+
+      {isJsonMode ? (
+        <JsonEditor
+          value={JSON.stringify(value ?? generateDefaultValue(schema), null, 2)}
+          onChange={(newValue) => {
+            try {
+              onChange(JSON.parse(newValue));
+              setJsonError(undefined);
+            } catch (err) {
+              setJsonError(err instanceof Error ? err.message : 'Invalid JSON');
+            }
+          }}
+          error={jsonError}
+        />
+      ) : (
+        renderFormFields(schema, value)
+      )}
+    </div>
+  );
+};
+
+export default DynamicJsonForm;
--- a/client/src/components/JsonEditor.tsx
+++ b/client/src/components/JsonEditor.tsx
@@ -0,0 +1,61 @@
+import Editor from 'react-simple-code-editor';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-json';
+import 'prismjs/themes/prism.css';
+import { Button } from "@/components/ui/button";
+
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+}
+
+const JsonEditor = ({ value, onChange, error }: JsonEditorProps) => {
+  const formatJson = (json: string): string => {
+    try {
+      return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+      return json;
+    }
+  };
+
+  return (
+    <div className="relative space-y-2">
+      <div className="flex justify-end">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onChange(formatJson(value))}
+        >
+          Format JSON
+        </Button>
+      </div>
+      <div
+        className={`border rounded-md ${
+          error ? 'border-red-500' : 'border-gray-200 dark:border-gray-800'
+        }`}
+      >
+        <Editor
+          value={value}
+          onValueChange={onChange}
+          highlight={code =>
+            Prism.highlight(code, Prism.languages.json, 'json')
+          }
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 14,
+            backgroundColor: 'transparent',
+            minHeight: '100px',
+          }}
+          className="w-full"
+        />
+      </div>
+      {error && (
+        <p className="text-sm text-red-500 mt-1">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default JsonEditor;
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -4,6 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
 import {
  ListToolsResult,
  Tool,
@@ -15,6 +16,12 @@ import ListPane from "./ListPane";

 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";

+type SchemaProperty = {
+  type: string;
+  description?: string;
+  properties?: Record<string, SchemaProperty>;
+};
+
 const ToolsTab = ({
  tools,
  listTools,
@@ -150,22 +157,21 @@ const ToolsTab = ({
                {selectedTool.description}
              </p>
              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                ([key, value]) => (
-                  <div key={key}>
-                    <Label
-                      htmlFor={key}
-                      className="block text-sm font-medium text-gray-700"
-                    >
-                      {key}
-                    </Label>
-                    {
-                      /* @ts-expect-error value type is currently unknown */
-                      value.type === "string" ? (
+                ([key, value]) => {
+                  const prop = value as SchemaProperty;
+                  return (
+                    <div key={key}>
+                      <Label
+                        htmlFor={key}
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        {key}
+                      </Label>
+                      {prop.type === "string" ? (
                        <Textarea
                          id={key}
                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
+                          placeholder={prop.description}
                          onChange={(e) =>
                            setParams({
                              ...params,
@@ -174,54 +180,44 @@ const ToolsTab = ({
                          }
                          className="mt-1"
                        />
-                      ) : /* @ts-expect-error value type is currently unknown */
-                      value.type === "object" ? (
-                        <Textarea
-                          id={key}
-                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
-                          onChange={(e) => {
-                            try {
-                              const parsed = JSON.parse(e.target.value);
+                      ) : prop.type === "object" ? (
+                        <div className="mt-1">
+                          <DynamicJsonForm
+                            schema={{
+                              type: 'object',
+                              properties: prop.properties,
+                              description: prop.description,
+                            } as JsonSchemaType}
+                            value={params[key] as JsonValue ?? {}}
+                            onChange={(newValue: JsonValue) => {
                              setParams({
                                ...params,
-                                [key]: parsed,
+                                [key]: newValue,
                              });
-                            } catch (err) {
-                              // If invalid JSON, store as string - will be validated on submit
-                              setParams({
-                                ...params,
-                                [key]: e.target.value,
-                              });
-                            }
-                          }}
-                          className="mt-1"
-                        />
+                            }}
+                          />
+                        </div>
                      ) : (
                        <Input
-                          // @ts-expect-error value type is currently unknown
-                          type={value.type === "number" ? "number" : "text"}
+                          type={prop.type === "number" ? "number" : "text"}
                          id={key}
                          name={key}
-                          // @ts-expect-error value type is currently unknown
-                          placeholder={value.description}
+                          placeholder={prop.description}
                          onChange={(e) =>
                            setParams({
                              ...params,
                              [key]:
-                                // @ts-expect-error value type is currently unknown
-                                value.type === "number"
+                                prop.type === "number"
                                  ? Number(e.target.value)
                                  : e.target.value,
                            })
                          }
                          className="mt-1"
                        />
-                      )
-                    }
-                  </div>
-                ),
+                      )}
+                    </div>
+                  );
+                }
              )}
              <Button onClick={() => callTool(selectedTool.name, params)}>
                <Send className="w-4 h-4 mr-2" />
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,11 +40,14 @@
        "@radix-ui/react-select": "^2.1.2",
        "@radix-ui/react-slot": "^1.1.0",
        "@radix-ui/react-tabs": "^1.1.1",
+        "@types/prismjs": "^1.26.5",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.1",
        "lucide-react": "^0.447.0",
+        "prismjs": "^1.29.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
+        "react-simple-code-editor": "^0.14.1",
        "react-toastify": "^10.0.6",
        "serve-handler": "^6.1.6",
        "tailwind-merge": "^2.5.3",
@@ -2320,6 +2323,12 @@
        "undici-types": "~6.20.0"
      }
    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/prop-types": {
      "version": "15.7.13",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -5116,6 +5125,15 @@
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -5292,6 +5310,16 @@
        }
      }
    },
+    "node_modules/react-simple-code-editor": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz",
+      "integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
--- a/server/package.json
+++ b/server/package.json
@@ -16,7 +16,7 @@
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js",
-    "dev": "tsx watch --clear-screen=false src/index.ts"
+    "dev": "node --import tsx --watch --watch-preserve-output src/index.ts"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",