new: Big Change, Add support for Extensions 😍

extension/html/rpc/extensionPage.js

@@ -1,18 +1,25 @@
-const { client,extension } = require('./client.js');
+const { extensionClient } = require('./client.js');
+const extension = require("./extension_grpc_web_pb.js");
+
 const { renderForm } = require('./formRenderer.js');
 const { listExtensions } = require('./extensionList.js');
 var currentExtensionId=undefined;
 function openExtensionPage(extensionId) {
     currentExtensionId=extensionId;
         $("#extension-list-container").hide();
-    $("#extension-page-container").show();
-    const request = new extension.ExtensionRequest();
-    request.setExtensionId(extensionId);
+        $("#extension-page-container").show();
+        $("#connection-page").hide();
+    connect()
+}
 
-    const stream = client.connect(request, {});
+function connect() {
+    const request = new extension.ExtensionRequest();
+    request.setExtensionId(currentExtensionId);
+
+    const stream = extensionClient.connect(request, {});
     
     stream.on('data', (response) => {
-        
+        console.log('Receving ',response);
         if (response.getExtensionId() === currentExtensionId) {
             ui=JSON.parse(response.getJsonUi())
             if(response.getType()== proto.hiddifyrpc.ExtensionResponseType.SHOW_DIALOG) {
@@ -27,25 +34,29 @@ function openExtensionPage(extensionId) {
     
     stream.on('error', (err) => {
         console.error('Error opening extension page:', err);
+        // openExtensionPage(extensionId);
     });
     
     stream.on('end', () => {
         console.log('Stream ended');
+        setTimeout(connect, 1000);
+        
     });
 }
 
 async function handleSubmitButtonClick(event) {
     event.preventDefault();
+    bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
     const formData = new FormData(event.target.closest('form'));
     const request = new extension.ExtensionRequest();
-
+    const datamap=request.getDataMap()
     formData.forEach((value, key) => {
-        request.getDataMap()[key] = value;
+        datamap.set(key,value);
     });
     request.setExtensionId(currentExtensionId);
 
     try {
-        await client.submitForm(request, {});
+        await extensionClient.submitForm(request, {});
         console.log('Form submitted successfully.');
     } catch (err) {
         console.error('Error submitting form:', err);
@@ -58,7 +69,9 @@ async function handleCancelButtonClick(event) {
     request.setExtensionId(currentExtensionId);
 
     try {
-        await client.cancel(request, {});
+        bootstrap.Modal.getOrCreateInstance("#extension-dialog").hide();
+            
+        await extensionClient.cancel(request, {});
         console.log('Extension cancelled successfully.');
     } catch (err) {
         console.error('Error cancelling extension:', err);
@@ -71,7 +84,7 @@ async function handleStopButtonClick(event) {
     request.setExtensionId(currentExtensionId);
 
     try {
-        await client.stop(request, {});
+        await extensionClient.stop(request, {});
         console.log('Extension stopped successfully.');
         currentExtensionId = undefined;
         listExtensions(); // Return to the extension list