Allow nested key/value pairs when creating APIEndpointAsset

chirps/asset/static/js/key_value_widget.js

@@ -24,9 +24,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
-
-
-function addKeyValuePair(container, key = '', value = '') {
+function addKeyValuePair(container, key = '', value = '', parentPair = null) {
     if (!container) {
         console.error('Container not found');
         return;
@@ -35,66 +33,90 @@ function addKeyValuePair(container, key = '', value = '') {
     keyInput.type = 'text';
     keyInput.placeholder = 'Key';
     keyInput.value = key;
-    keyInput.className = 'form-control mr-2';
+    keyInput.className = 'form-control mr-2 key-input';
 
     const valueInput = document.createElement('input');
     valueInput.type = 'text';
     valueInput.placeholder = 'Value';
     valueInput.value = value;
-    valueInput.className = 'form-control mr-2';
+    valueInput.className = 'form-control mr-2 value-input';
+
+    const addButton = document.createElement('button');
+    addButton.type = 'button';
+    addButton.textContent = 'Add Nested Key-Value Pair';
+    addButton.className = 'btn btn-secondary add-nested-key-value-pair';
+
+    const removeButton = document.createElement('button');
+    removeButton.type = 'button';
+    removeButton.textContent = 'Remove';
+    removeButton.className = 'btn btn-danger remove-key-value-pair ml-2';
 
     const pair = document.createElement('div');
-    pair.className = 'form-inline mb-2';
+    pair.className = 'form-inline mb-2 key-value-input';
     pair.appendChild(keyInput);
     pair.appendChild(valueInput);
-
-    // Add tooltip icon and message for the 'body' field with key 'data'
-    if (container.id.includes('body') && value === '%query%') {
-        const tooltipIcon = document.createElement('i');
-        tooltipIcon.className = 'fas fa-info-circle ml-2';
-        tooltipIcon.setAttribute('data-toggle', 'tooltip');
-        tooltipIcon.setAttribute('title', 'Chirps sends a POST request to the API endpoint.\n\nThe value %query% will be replaced by the request text.\n\nPlease update the key to match what is expected in the request.');
-
-        pair.appendChild(tooltipIcon);
-
-        // this value will be used to know where in the request to put our message, so don't let the user change it
-        valueInput.disabled = true;
+    pair.appendChild(addButton);
+    pair.appendChild(removeButton);
+
+    if (parentPair) {
+        parentPair.appendChild(pair);
+        pair.dataset.parentKey = parentPair.querySelector('.key-input').value;
+        pair.classList.add('nested-key-value');
+
+        // Add margin-left to visually show the nesting
+        pair.style.marginLeft = '20px';
+
+        // Remove the value field of the parent pair
+        const parentValueInput = parentPair.querySelector('.value-input');
+        parentPair.removeChild(parentValueInput);
+    } else {
+        container.appendChild(pair);
     }
 
-    if (value !== '%query%') {
-        const removeButton = document.createElement('button');
-        removeButton.type = 'button';
-        removeButton.textContent = 'Remove';
-        removeButton.className = 'btn btn-danger';
-
-        pair.appendChild(removeButton);
-
-        removeButton.addEventListener('click', () => {
-            container.removeChild(pair);
-            updateHiddenInput(container);
-        });
-    }
-
-    container.appendChild(pair);
-
     keyInput.addEventListener('input', () => {
         updateHiddenInput(container);
     });
 
     valueInput.addEventListener('input', () => {
         updateHiddenInput(container);
     });
+
+    addButton.addEventListener('click', () => {
+        addKeyValuePair(container, '', '', pair);
+    });
+
+    removeButton.addEventListener('click', () => {
+        (parentPair || container).removeChild(pair);
+        updateHiddenInput(container);
+    });
 }
 
 function updateHiddenInput(container) {
-    const pairs = {};
-    const keyValuePairs = container.querySelectorAll('div.form-inline');
+    function processKeyValuePairs(parentNode, parentKey = '') {
+        const keyValuePairs = parentNode.querySelectorAll(
+            parentKey ? `.key-value-input[data-parent-key="${parentKey}"]` : '.key-value-input:not([data-parent-key])'
+        );
 
-    keyValuePairs.forEach(pair => {
-        const keyInput = pair.querySelector('input:first-child');
-        const valueInput = pair.querySelector('input:nth-child(2)');
-        pairs[keyInput.value] = valueInput.value;
-    });
+        const pairs = {};
+
+        keyValuePairs.forEach(pair => {
+            const keyInput = pair.querySelector('.key-input');
+            const valueInput = pair.querySelector('.value-input');
+
+            if (keyInput.value && valueInput.value) {
+                pairs[keyInput.value] = valueInput.value;
+                const nestedPairs = processKeyValuePairs(pair, keyInput.value);
+
+                if (Object.keys(nestedPairs).length > 0) {
+                    pairs[keyInput.value] = nestedPairs;
+                }
+            }
+        });
+
+        return pairs;
+    }
+
+    const pairs = processKeyValuePairs(container);
 
     const hiddenInput = container.parentElement.querySelector('input[type="hidden"]');
     hiddenInput.value = JSON.stringify(pairs);

chirps/asset/tests.py

@@ -12,6 +12,7 @@
 from django.test import TestCase
 from django.urls import reverse
 from embedding.models import Embedding
+from parameterized import parameterized
 
 
 class AssetTests(TestCase):
@@ -127,7 +128,23 @@ def test_pinecone_asset_creation(self):
         response = self.client.post(reverse('asset_create', args=['Pinecone']), form_data)
         self.assertRedirects(response, reverse('asset_dashboard'))
 
-    def test_api_endpoint_asset_creation(self):
+    @parameterized.expand(
+        [
+            ('Flat headers and body', {'Content-Type': 'application/json'}, {'data': '%query%'}),
+            (
+                'Nested headers and flat body',
+                {'Content-Type': 'application/json', 'custom': {'nested': 'yes'}},
+                {'data': '%query%'},
+            ),
+            ('Flat headers and nested body', {'Content-Type': 'application/json'}, {'data': {'nested': 'yes'}}),
+            (
+                'Nested headers and nested body',
+                {'Content-Type': 'application/json', 'custom': {'nested': 'yes'}},
+                {'data': {'nested': 'yes'}},
+            ),
+        ]
+    )
+    def test_api_endpoint_asset_creation(self, _, headers, body):
         """Test the creation of an API Endpoint asset with the dropdown."""
         self.client.post(
             reverse('login'),
@@ -143,8 +160,8 @@ def test_api_endpoint_asset_creation(self):
             'url': 'https://api.example.com/endpoint',
             'authentication_method': 'Bearer',
             'api_key': 'example-api-key',
-            'headers': '{"Content-Type": "application/json"}',
-            'body': '{"data": "%query%"}',
+            'headers': json.dumps(headers),
+            'body': json.dumps(body),
             'timeout': '30',
         }
         form = APIEndpointAssetForm(data=form_data)

requirements.txt

@@ -11,6 +11,7 @@ fakeredis==2.16.0
 langchain==0.0.275
 mantium-client
 openai==0.27.8
+parameterized==0.9.0
 pinecone-client
 pytest
 python-dotenv