From 7d3f544e63a27d962b91506a4612814d9bf1da76 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Tue, 13 Aug 2024 01:09:14 +0300
Subject: [PATCH] Refactor extension install menu

---
 public/scripts/extensions.js                  | 44 ++++++++++---------
 public/scripts/extensions/shared.js           | 15 +------
 .../scripts/templates/installExtension.html   |  7 +++
 3 files changed, 32 insertions(+), 34 deletions(-)
 create mode 100644 public/scripts/templates/installExtension.html

diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js
index e9c1f63b8..330256ca0 100644
--- a/public/scripts/extensions.js
+++ b/public/scripts/extensions.js
@@ -989,6 +989,28 @@ export async function writeExtensionField(characterId, key, value) {
     }
 }
 
+/**
+ * Prompts the user to enter the Git URL of the extension to import.
+ * After obtaining the Git URL, makes a POST request to '/api/extensions/install' to import the extension.
+ * If the extension is imported successfully, a success message is displayed.
+ * If the extension import fails, an error message is displayed and the error is logged to the console.
+ * After successfully importing the extension, the extension settings are reloaded and a 'EXTENSION_SETTINGS_LOADED' event is emitted.
+ * @param {string} [suggestUrl] Suggested URL to install
+ * @returns {Promise<void>}
+ */
+export async function openThirdPartyExtensionMenu(suggestUrl = '') {
+    const html = await renderTemplateAsync('installExtension');
+    const input = await callGenericPopup(html, POPUP_TYPE.INPUT, suggestUrl ?? '');
+
+    if (!input) {
+        console.debug('Extension install cancelled');
+        return;
+    }
+
+    const url = String(input).trim();
+    await installExtension(url);
+}
+
 jQuery(async function () {
     await addExtensionsButtonAndMenu();
     $('#extensionsMenuButton').css('display', 'flex');
@@ -1004,28 +1026,8 @@ jQuery(async function () {
 
     /**
      * Handles the click event for the third-party extension import button.
-     * Prompts the user to enter the Git URL of the extension to import.
-     * After obtaining the Git URL, makes a POST request to '/api/extensions/install' to import the extension.
-     * If the extension is imported successfully, a success message is displayed.
-     * If the extension import fails, an error message is displayed and the error is logged to the console.
-     * After successfully importing the extension, the extension settings are reloaded and a 'EXTENSION_SETTINGS_LOADED' event is emitted.
      *
      * @listens #third_party_extension_button#click - The click event of the '#third_party_extension_button' element.
      */
-    $('#third_party_extension_button').on('click', async () => {
-        const html = `<h3>Enter the Git URL of the extension to install</h3>
-    <br>
-    <p><b>Disclaimer:</b> Please be aware that using external extensions can have unintended side effects and may pose security risks. Always make sure you trust the source before importing an extension. We are not responsible for any damage caused by third-party extensions.</p>
-    <br>
-    <p>Example: <tt> https://github.com/author/extension-name </tt></p>`;
-        const input = await callGenericPopup(html, POPUP_TYPE.INPUT, '');
-
-        if (!input) {
-            console.debug('Extension install cancelled');
-            return;
-        }
-
-        const url = String(input).trim();
-        await installExtension(url);
-    });
+    $('#third_party_extension_button').on('click', () => openThirdPartyExtensionMenu());
 });
diff --git a/public/scripts/extensions/shared.js b/public/scripts/extensions/shared.js
index adc9a846e..b50908940 100644
--- a/public/scripts/extensions/shared.js
+++ b/public/scripts/extensions/shared.js
@@ -1,5 +1,5 @@
 import { getRequestHeaders } from '../../script.js';
-import { extension_settings } from '../extensions.js';
+import { extension_settings, openThirdPartyExtensionMenu } from '../extensions.js';
 import { oai_settings } from '../openai.js';
 import { SECRET_KEYS, secret_state } from '../secrets.js';
 import { textgen_types, textgenerationwebui_settings } from '../textgen-settings.js';
@@ -202,18 +202,7 @@ export function isWebLlmSupported() {
                 timeOut: 0,
                 extendedTimeOut: 0,
                 preventDuplicates: true,
-                onclick: () => {
-                    const button = document.getElementById('third_party_extension_button');
-                    if (button) {
-                        button.click();
-                    }
-
-                    const input = document.querySelector('dialog textarea');
-
-                    if (input instanceof HTMLTextAreaElement) {
-                        input.value = 'https://github.com/SillyTavern/Extension-WebLLM';
-                    }
-                },
+                onclick: () => openThirdPartyExtensionMenu('https://github.com/SillyTavern/Extension-WebLLM'),
             });
             sessionStorage.setItem(warningKey, '1');
         }
diff --git a/public/scripts/templates/installExtension.html b/public/scripts/templates/installExtension.html
new file mode 100644
index 000000000..55e71dff0
--- /dev/null
+++ b/public/scripts/templates/installExtension.html
@@ -0,0 +1,7 @@
+<h3>Enter the Git URL of the extension to install</h3>
+<br>
+<p><b>Disclaimer:</b> Please be aware that using external extensions can have unintended side effects and may pose
+    security risks. Always make sure you trust the source before importing an extension. We are not responsible for any
+    damage caused by third-party extensions.</p>
+<br>
+<p>Example: <tt> https://github.com/author/extension-name </tt></p>