add support for multi col row to ui

extension/html/index.html

@@ -73,7 +73,6 @@
         </div>
     </div>
     <script src="https://unpkg.com/ansi_up@5.0.0/ansi_up.js"></script>
-    <script src="https://unpkg.com/google-protobuf@3.20.1/dist/google-protobuf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

extension/html/rpc.js

@@ -706,9 +706,9 @@ function connect() {
         if (response.getExtensionId() === currentExtensionId) {
             ui = JSON.parse(response.getJsonUi())
             if (response.getType() == proto.hiddifyrpc.ExtensionResponseType.SHOW_DIALOG) {
-                renderForm(ui, "dialog",handleSubmitButtonClick,handleCancelButtonClick,undefined);
+                renderForm(ui, "dialog", handleSubmitButtonClick, undefined);
             } else {
-                renderForm(ui, "",handleSubmitButtonClick,handleCancelButtonClick,handleStopButtonClick);
+                renderForm(ui, "", handleSubmitButtonClick, handleStopButtonClick);
             }
 
 
@@ -727,15 +727,18 @@ function connect() {
     });
 }
 
-async function handleSubmitButtonClick(event) {
+async function handleSubmitButtonClick(event, button) {
     event.preventDefault();
     bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
+    const request = new extension.SendExtensionDataRequest();
+    request.setButton(button);
+    if (event.type != 'hidden.bs.modal') {
         const formData = new FormData(event.target.closest('form'));
-    const request = new extension.ExtensionRequest();
         const datamap = request.getDataMap()
         formData.forEach((value, key) => {
             datamap.set(key, value);
         });
+    }
     request.setExtensionId(currentExtensionId);
 
     try {
@@ -746,26 +749,12 @@ async function handleSubmitButtonClick(event) {
     }
 }
 
-async function handleCancelButtonClick(event) {
-    event.preventDefault();
-    const request = new extension.ExtensionRequest();
-    request.setExtensionId(currentExtensionId);
-
-    try {
-        bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
-            
-        await extensionClient.cancel(request, {});
-        console.log('Extension cancelled successfully.');
-    } catch (err) {
-        console.error('Error cancelling extension:', err);
-    }
-}
 
 async function handleStopButtonClick(event) {
     event.preventDefault();
     const request = new extension.ExtensionRequest();
     request.setExtensionId(currentExtensionId);
-
+    bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
     try {
         await extensionClient.stop(request, {});
         console.log('Extension stopped successfully.');
@@ -2762,7 +2751,7 @@ const ansi_up = new AnsiUp({
 });
 
 
-function renderForm(json, dialog, submitAction, cancelAction, stopAction) {
+function renderForm(json, dialog, submitAction, stopAction) {
     const container = document.getElementById(`extension-page-container${dialog}`);
     const formId = `dynamicForm${json.id}${dialog}`;
 
@@ -2778,37 +2767,26 @@ function renderForm(json, dialog, submitAction, cancelAction, stopAction) {
         document.getElementById("modalLabel").textContent = json.title;
     } else {
         const titleElement = createTitleElement(json);
-        if (stopAction != undefined) {
-            const stopButton = document.createElement('button');
-            stopButton.textContent = "Back";
-            stopButton.classList.add('btn', 'btn-danger');
-            stopButton.addEventListener('click', stopAction);
-            form.appendChild(stopButton);
-        }
         form.appendChild(titleElement);
     }
-    addElementsToForm(form, json);
+    addElementsToForm(form, json,submitAction);
-    const buttonGroup = createButtonGroup(json, submitAction, cancelAction);
+
     if (dialog === "dialog") {
         document.getElementById("modal-footer").innerHTML = '';
-        document.getElementById("modal-footer").appendChild(buttonGroup);
+        // if ($(form.lastChild).find("button").length > 0) {
+            
+        //     document.getElementById("modal-footer").appendChild(form.lastChild);
+            
+        // }
         const extensionDialog = document.getElementById("extension-dialog");
         const dialog = bootstrap.Modal.getOrCreateInstance(extensionDialog);
         dialog.show();
-
+        extensionDialog.addEventListener("hidden.bs.modal", (e)=>submitAction(e,"CloseDialog"));
-        extensionDialog.addEventListener("hidden.bs.modal", cancelAction);
-        // const dialog = bootstrap.Modal.getOrCreateInstance("#extension-dialog");
-        // dialog.show()
-        // dialog.on("hidden.bs.modal", () => {
-        //     cancelAction()
-        // })
-    } else {
-        form.appendChild(buttonGroup);
     }
 
 }
 
-function addElementsToForm(form, json) {
+function addElementsToForm(form, json,submitAction) {
 
 
 
@@ -2817,8 +2795,14 @@ function addElementsToForm(form, json) {
     form.appendChild(description);
     if (json.fields) {
         json.fields.forEach(field => {
-            const formGroup = createFormGroup(field);
+            div=document.createElement("div")
-            form.appendChild(formGroup);
+            div.classList.add("row")
+            form.appendChild(div)
+            for (let i = 0; i < field.length; i++) {
+                const formGroup = createFormGroup(field[i], submitAction);
+                formGroup.classList.add("col")
+                div.appendChild(formGroup);
+            }
         });
     }
 
@@ -2831,10 +2815,25 @@ function createTitleElement(json) {
     return title;
 }
 
-function createFormGroup(field) {
+function createFormGroup(field, submitAction) {
     const formGroup = document.createElement('div');
     formGroup.classList.add('mb-3');
+    if (field.type == "Button") {
+        const button = document.createElement('button');
+        button.textContent = field.label;
+        button.name=field.key
+        button.classList.add('btn');
+        if (field.key == "Submit") {
+            button.classList.add('btn-primary');
+        } else if (field.key == "Cancel") {
+            button.classList.add('btn-secondary');
+        }else{
+            button.classList.add('btn', 'btn-outline-secondary');
+        }
         
+        button.addEventListener('click', (e) => submitAction(e,field.key));
+        formGroup.appendChild(button);
+    } else {
         if (field.label && !field.labelHidden) {
             const label = document.createElement('label');
             label.textContent = field.label;
@@ -2844,6 +2843,7 @@ function createFormGroup(field) {
 
         const input = createInputElement(field);
         formGroup.appendChild(input);
+    }
     return formGroup;
 }
 

extension/html/rpc/extensionPage.js

@@ -23,9 +23,9 @@ function connect() {
         if (response.getExtensionId() === currentExtensionId) {
             ui = JSON.parse(response.getJsonUi())
             if (response.getType() == proto.hiddifyrpc.ExtensionResponseType.SHOW_DIALOG) {
-                renderForm(ui, "dialog",handleSubmitButtonClick,handleCancelButtonClick,undefined);
+                renderForm(ui, "dialog", handleSubmitButtonClick, undefined);
             } else {
-                renderForm(ui, "",handleSubmitButtonClick,handleCancelButtonClick,handleStopButtonClick);
+                renderForm(ui, "", handleSubmitButtonClick, handleStopButtonClick);
             }
 
 
@@ -44,15 +44,18 @@ function connect() {
     });
 }
 
-async function handleSubmitButtonClick(event) {
+async function handleSubmitButtonClick(event, button) {
     event.preventDefault();
     bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
+    const request = new extension.SendExtensionDataRequest();
+    request.setButton(button);
+    if (event.type != 'hidden.bs.modal') {
         const formData = new FormData(event.target.closest('form'));
-    const request = new extension.ExtensionRequest();
         const datamap = request.getDataMap()
         formData.forEach((value, key) => {
             datamap.set(key, value);
         });
+    }
     request.setExtensionId(currentExtensionId);
 
     try {
@@ -63,26 +66,12 @@ async function handleSubmitButtonClick(event) {
     }
 }
 
-async function handleCancelButtonClick(event) {
-    event.preventDefault();
-    const request = new extension.ExtensionRequest();
-    request.setExtensionId(currentExtensionId);
-
-    try {
-        bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
-            
-        await extensionClient.cancel(request, {});
-        console.log('Extension cancelled successfully.');
-    } catch (err) {
-        console.error('Error cancelling extension:', err);
-    }
-}
 
 async function handleStopButtonClick(event) {
     event.preventDefault();
     const request = new extension.ExtensionRequest();
     request.setExtensionId(currentExtensionId);
-
+    bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
     try {
         await extensionClient.stop(request, {});
         console.log('Extension stopped successfully.');

extension/html/rpc/formRenderer.js

@@ -5,7 +5,7 @@ const ansi_up = new AnsiUp({
 });
 
 
-function renderForm(json, dialog, submitAction, cancelAction, stopAction) {
+function renderForm(json, dialog, submitAction, stopAction) {
     const container = document.getElementById(`extension-page-container${dialog}`);
     const formId = `dynamicForm${json.id}${dialog}`;
 
@@ -21,37 +21,26 @@ function renderForm(json, dialog, submitAction, cancelAction, stopAction) {
         document.getElementById("modalLabel").textContent = json.title;
     } else {
         const titleElement = createTitleElement(json);
-        if (stopAction != undefined) {
-            const stopButton = document.createElement('button');
-            stopButton.textContent = "Back";
-            stopButton.classList.add('btn', 'btn-danger');
-            stopButton.addEventListener('click', stopAction);
-            form.appendChild(stopButton);
-        }
         form.appendChild(titleElement);
     }
-    addElementsToForm(form, json);
+    addElementsToForm(form, json,submitAction);
-    const buttonGroup = createButtonGroup(json, submitAction, cancelAction);
+
     if (dialog === "dialog") {
         document.getElementById("modal-footer").innerHTML = '';
-        document.getElementById("modal-footer").appendChild(buttonGroup);
+        // if ($(form.lastChild).find("button").length > 0) {
+            
+        //     document.getElementById("modal-footer").appendChild(form.lastChild);
+            
+        // }
         const extensionDialog = document.getElementById("extension-dialog");
         const dialog = bootstrap.Modal.getOrCreateInstance(extensionDialog);
         dialog.show();
-
+        extensionDialog.addEventListener("hidden.bs.modal", (e)=>submitAction(e,"CloseDialog"));
-        extensionDialog.addEventListener("hidden.bs.modal", cancelAction);
-        // const dialog = bootstrap.Modal.getOrCreateInstance("#extension-dialog");
-        // dialog.show()
-        // dialog.on("hidden.bs.modal", () => {
-        //     cancelAction()
-        // })
-    } else {
-        form.appendChild(buttonGroup);
     }
 
 }
 
-function addElementsToForm(form, json) {
+function addElementsToForm(form, json,submitAction) {
 
 
 
@@ -60,8 +49,14 @@ function addElementsToForm(form, json) {
     form.appendChild(description);
     if (json.fields) {
         json.fields.forEach(field => {
-            const formGroup = createFormGroup(field);
+            div=document.createElement("div")
-            form.appendChild(formGroup);
+            div.classList.add("row")
+            form.appendChild(div)
+            for (let i = 0; i < field.length; i++) {
+                const formGroup = createFormGroup(field[i], submitAction);
+                formGroup.classList.add("col")
+                div.appendChild(formGroup);
+            }
         });
     }
 
@@ -74,10 +69,25 @@ function createTitleElement(json) {
     return title;
 }
 
-function createFormGroup(field) {
+function createFormGroup(field, submitAction) {
     const formGroup = document.createElement('div');
     formGroup.classList.add('mb-3');
+    if (field.type == "Button") {
+        const button = document.createElement('button');
+        button.textContent = field.label;
+        button.name=field.key
+        button.classList.add('btn');
+        if (field.key == "Submit") {
+            button.classList.add('btn-primary');
+        } else if (field.key == "Cancel") {
+            button.classList.add('btn-secondary');
+        }else{
+            button.classList.add('btn', 'btn-outline-secondary');
+        }
         
+        button.addEventListener('click', (e) => submitAction(e,field.key));
+        formGroup.appendChild(button);
+    } else {
         if (field.label && !field.labelHidden) {
             const label = document.createElement('label');
             label.textContent = field.label;
@@ -87,6 +97,7 @@ function createFormGroup(field) {
 
         const input = createInputElement(field);
         formGroup.appendChild(input);
+    }
     return formGroup;
 }