From a569e37a344e24d65d5a76df672bb21a078fe12c Mon Sep 17 00:00:00 2001
From: Richard Palethorpe <io@richiejp.com>
Date: Thu, 3 Apr 2025 14:27:23 +0100
Subject: [PATCH] fix(ui): Send number input as number JSON not string (#130)

* fix(ui): Submit number fields as numbers not text

* fix(ui): Remove some debug messages
---
 webui/react-ui/src/components/AgentForm.jsx      | 11 ++++++-----
 webui/react-ui/src/components/ConfigForm.jsx     | 11 ++++++++---
 .../agent-form-sections/MCPServersSection.jsx    | 11 ++++++++---
 .../react-ui/src/components/common/FormField.jsx | 16 +++++++++++-----
 .../components/common/FormFieldDefinition.jsx    |  3 ++-
 5 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/webui/react-ui/src/components/AgentForm.jsx b/webui/react-ui/src/components/AgentForm.jsx
index 5f79334..94e5e64 100644
--- a/webui/react-ui/src/components/AgentForm.jsx
+++ b/webui/react-ui/src/components/AgentForm.jsx
@@ -28,7 +28,10 @@ const AgentForm = ({
 
   // Handle input changes
   const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target;
+    const { name, value, type, checked } = e.target.name.target;
+    
+    // Convert value to number if it's a number input
+    const processedValue = type === 'number' ? Number(value) : value;
     
     if (name.includes('.')) {
       const [parent, child] = name.split('.');
@@ -36,13 +39,13 @@ const AgentForm = ({
         ...formData,
         [parent]: {
           ...formData[parent],
-          [child]: type === 'checkbox' ? checked : value
+          [child]: type === 'checkbox' ? checked : processedValue
         }
       });
     } else {
       setFormData({
         ...formData,
-        [name]: type === 'checkbox' ? checked : value
+        [name]: type === 'checkbox' ? checked : processedValue
       });
     }
   };
@@ -57,7 +60,6 @@ const AgentForm = ({
 
   // Handle navigation between sections
   const handleSectionChange = (section) => {
-    console.log('Changing section to:', section);
     setActiveSection(section);
   };
 
@@ -94,7 +96,6 @@ const AgentForm = ({
   };
   
   const handleAddDynamicPrompt = () => {
-    console.log('Adding dynamic prompt');
     setFormData({
       ...formData,
       dynamicPrompts: [
diff --git a/webui/react-ui/src/components/ConfigForm.jsx b/webui/react-ui/src/components/ConfigForm.jsx
index 3ea5401..7ff1f7a 100644
--- a/webui/react-ui/src/components/ConfigForm.jsx
+++ b/webui/react-ui/src/components/ConfigForm.jsx
@@ -57,10 +57,15 @@ const ConfigForm = ({
   };
 
   // Handle config field change
-  const handleConfigChange = (index, key, value) => {
+  const handleConfigChange = (index, e) => {
+    const { name: key, value, type, checked } = e.target;
     const item = items[index];
     const config = parseConfig(item);
-    config[key] = value;
+    
+    // Convert value to number if it's a number input
+    const processedValue = type === 'number' ? Number(value) : value;
+    
+    config[key] = type === 'checkbox' ? checked : processedValue;
     
     onChange(index, {
       ...item,
@@ -112,7 +117,7 @@ const ConfigForm = ({
           <FormFieldDefinition
             fields={fieldGroup.fields}
             values={parseConfig(item)}
-            onChange={(key, value) => handleConfigChange(index, key, value)}
+            onChange={(e) => handleConfigChange(index, e)}
             idPrefix={`${itemType}-${index}-`}
           />
         )}
diff --git a/webui/react-ui/src/components/agent-form-sections/MCPServersSection.jsx b/webui/react-ui/src/components/agent-form-sections/MCPServersSection.jsx
index 48b5c3d..a33fc6e 100644
--- a/webui/react-ui/src/components/agent-form-sections/MCPServersSection.jsx
+++ b/webui/react-ui/src/components/agent-form-sections/MCPServersSection.jsx
@@ -28,8 +28,13 @@ const MCPServersSection = ({
   ];
 
   // Handle field value changes for a specific server
-  const handleFieldChange = (index, name, value) => {
-    handleMCPServerChange(index, name, value);
+  const handleFieldChange = (index, e) => {
+    const { name, value, type, checked } = e.target;
+    
+    // Convert value to number if it's a number input
+    const processedValue = type === 'number' ? Number(value) : value;
+    
+    handleMCPServerChange(index, name, type === 'checkbox' ? checked : processedValue);
   };
 
   return (
@@ -56,7 +61,7 @@ const MCPServersSection = ({
             <FormFieldDefinition
               fields={getServerFields()}
               values={server}
-              onChange={(name, value) => handleFieldChange(index, name, value)}
+              onChange={(e) => handleFieldChange(index, e)}
               idPrefix={`mcp_server_${index}_`}
             />
           </div>
diff --git a/webui/react-ui/src/components/common/FormField.jsx b/webui/react-ui/src/components/common/FormField.jsx
index ed688ca..5e1dec4 100644
--- a/webui/react-ui/src/components/common/FormField.jsx
+++ b/webui/react-ui/src/components/common/FormField.jsx
@@ -16,6 +16,7 @@ import React from 'react';
  */
 const FormField = ({
   id,
+  name,
   label,
   type = 'text',
   value,
@@ -45,8 +46,9 @@ const FormField = ({
               <input
                 type="checkbox"
                 id={id}
+                name={name}
                 checked={value === true || value === 'true'}
-                onChange={(e) => onChange(e.target.checked ? 'true' : 'false')}
+                onChange={onChange}
               />
               {labelWithIndicator}
             </label>
@@ -59,8 +61,9 @@ const FormField = ({
             <label htmlFor={id}>{labelWithIndicator}</label>
             <select
               id={id}
+              name={name}
               value={value || ''}
-              onChange={(e) => onChange(e.target.value)}
+              onChange={onChange}
               className="form-control"
               required={required}
             >
@@ -79,8 +82,9 @@ const FormField = ({
             <label htmlFor={id}>{labelWithIndicator}</label>
             <textarea
               id={id}
+              name={name}
               value={value || ''}
-              onChange={(e) => onChange(e.target.value)}
+              onChange={onChange}
               className="form-control"
               placeholder={placeholder}
               required={required}
@@ -96,8 +100,9 @@ const FormField = ({
             <input
               type="number"
               id={id}
+              name={name}
               value={value || ''}
-              onChange={(e) => onChange(e.target.value)}
+              onChange={onChange}
               className="form-control"
               placeholder={placeholder}
               required={required}
@@ -115,8 +120,9 @@ const FormField = ({
             <input
               type={type}
               id={id}
+              name={name}
               value={value || ''}
-              onChange={(e) => onChange(e.target.value)}
+              onChange={onChange}
               className="form-control"
               placeholder={placeholder}
               required={required}
diff --git a/webui/react-ui/src/components/common/FormFieldDefinition.jsx b/webui/react-ui/src/components/common/FormFieldDefinition.jsx
index ccbe2a3..474bffa 100644
--- a/webui/react-ui/src/components/common/FormFieldDefinition.jsx
+++ b/webui/react-ui/src/components/common/FormFieldDefinition.jsx
@@ -25,10 +25,11 @@ const FormFieldDefinition = ({
         <div key={field.name} style={{ marginBottom: '16px' }}>
           <FormField
             id={`${idPrefix}${field.name}`}
+            name={field.name}
             label={field.label}
             type={field.type}
             value={safeValues[field.name] !== undefined ? safeValues[field.name] : field.defaultValue}
-            onChange={(value) => onChange(field.name, value)}
+            onChange={onChange}
             placeholder={field.placeholder || ''}
             helpText={field.helpText || ''}
             options={field.options || []}