Update static/js/project.js

static/js/project.js

@@ -1,3 +1,5 @@
+let currentParameters = [];
+
 function listProjects() {
     apiGet('/project/list')
         .then(data => {
@@ -96,7 +98,8 @@ function editIntent(name) {
             document.getElementById('intent-fallback').value = intent.fallback_error_message || '';
             document.getElementById('intent-prompt').value = intent.humanization_prompt || '';
             document.getElementById('intent-examples').value = (intent.examples || []).join(', ');
-            document.getElementById('intent-parameters').value = JSON.stringify(intent.parameters || [], null, 2);
+            currentParameters = intent.parameters || [];
+            populateParameterTable(currentParameters);
 
             $('#intentModal').modal('show');
         })
@@ -110,20 +113,13 @@ function saveIntent() {
     const fallback = document.getElementById('intent-fallback').value;
     const prompt = document.getElementById('intent-prompt').value;
     const examples = document.getElementById('intent-examples').value.split(',').map(e => e.trim());
-    let parameters = [];
-    try {
-        parameters = JSON.parse(document.getElementById('intent-parameters').value);
-    } catch (e) {
-        alert('Invalid JSON in parameters.');
-        return;
-    }
 
     const intentData = {
         action: action,
         fallback_error_message: fallback,
         humanization_prompt: prompt,
         examples: examples,
-        parameters: parameters
+        parameters: currentParameters
     };
 
     apiPost('/project/update_intent', {
@@ -149,3 +145,39 @@ function saveProject() {
 function publishProject() {
     alert('Publish logic will be implemented here.');
 }
+
+function populateParameterTable(parameters) {
+    const body = document.getElementById('parameter-body');
+    body.innerHTML = '';
+    parameters.forEach((param, index) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td><input type="text" class="form-control" value="${param.name || ''}" onchange="updateParam(${index}, 'name', this.value)"></td>
+            <td>
+                <select class="form-control" onchange="updateParam(${index}, 'type', this.value)">
+                    <option value="string" ${param.type === 'string' ? 'selected' : ''}>string</option>
+                    <option value="int" ${param.type === 'int' ? 'selected' : ''}>int</option>
+                    <option value="float" ${param.type === 'float' ? 'selected' : ''}>float</option>
+                </select>
+            </td>
+            <td><input type="text" class="form-control" value="${param.regex || ''}" onchange="updateParam(${index}, 'regex', this.value)"></td>
+            <td><input type="text" class="form-control" value="${param.validation_message || ''}" onchange="updateParam(${index}, 'validation_message', this.value)"></td>
+            <td><button class="btn btn-sm btn-danger" onclick="removeParameterRow(${index})">Delete</button></td>
+        `;
+        body.appendChild(row);
+    });
+}
+
+function addParameterRow() {
+    currentParameters.push({ name: '', type: 'string', regex: '', validation_message: '' });
+    populateParameterTable(currentParameters);
+}
+
+function removeParameterRow(index) {
+    currentParameters.splice(index, 1);
+    populateParameterTable(currentParameters);
+}
+
+function updateParam(index, key, value) {
+    currentParameters[index][key] = value;
+}