From af1a3ba570a9a2645abe4d1907c562a9e0f9019c Mon Sep 17 00:00:00 2001
From: Sylvain Utard <sylvain.utard@gmail.com>
Date: Wed, 19 Mar 2025 11:50:25 +0100
Subject: [PATCH] Add enum support

This adds support for
[enum](https://json-schema.org/understanding-json-schema/reference/enum)
on `string` property.
---
 client/src/components/DynamicJsonForm.tsx |  1 +
 client/src/components/StringInput.tsx     | 51 +++++++++++++++++++++++
 client/src/components/ToolsTab.tsx        | 26 ++++++------
 3 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/StringInput.tsx

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index a15b57ec5..99a25fc5b 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -17,6 +17,7 @@ export type JsonSchemaType = {
   description?: string;
   properties?: Record<string, JsonSchemaType>;
   items?: JsonSchemaType;
+  enum?: string[];
 };
 
 type JsonObject = { [key: string]: JsonValue };
diff --git a/client/src/components/StringInput.tsx b/client/src/components/StringInput.tsx
new file mode 100644
index 000000000..7ab87553e
--- /dev/null
+++ b/client/src/components/StringInput.tsx
@@ -0,0 +1,51 @@
+import { Textarea } from "@/components/ui/textarea";
+import { JsonSchemaType } from "./DynamicJsonForm";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+
+interface Props {
+  id: string;
+  name: string;
+  property: JsonSchemaType;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const StringInput = ({ id, name, property, value, onChange }: Props) => {
+  if (property.enum?.length) {
+    return (
+      <Select
+        value={value}
+        onValueChange={(value) => {
+          onChange(value);
+        }}
+      >
+        <SelectTrigger id={id} name={name}>
+          <SelectValue placeholder={property.description} />
+        </SelectTrigger>
+        <SelectContent>
+          {property.enum.map((item) => (
+            <SelectItem key={item} value={item}>
+              {item}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  return (
+    <Textarea
+      id={id}
+      name={name}
+      placeholder={property.description}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+};
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 777db80c7..7c61c666e 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -4,7 +4,6 @@ import { Checkbox } from "@/components/ui/checkbox";
 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,
@@ -16,6 +15,7 @@ import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { StringInput } from "./StringInput";
 
 const ToolsTab = ({
   tools,
@@ -192,19 +192,17 @@ const ToolsTab = ({
                           </label>
                         </div>
                       ) : prop.type === "string" ? (
-                        <Textarea
-                          id={key}
-                          name={key}
-                          placeholder={prop.description}
-                          value={(params[key] as string) ?? ""}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]: e.target.value,
-                            })
-                          }
-                          className="mt-1"
-                        />
+                        <div className="mt-1">
+                          <StringInput
+                            id={key}
+                            name={key}
+                            property={prop}
+                            value={(params[key] as string) ?? ""}
+                            onChange={(value) =>
+                              setParams({ ...params, [key]: value })
+                            }
+                          />
+                        </div>
                       ) : prop.type === "object" || prop.type === "array" ? (
                         <div className="mt-1">
                           <DynamicJsonForm