From a05cb2d4d77c62d861cf6ac62c685c9e3b237adf Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Wed, 16 Apr 2025 23:29:00 +0200
Subject: [PATCH] Implement dynamic rendering of ChatGPT web model options in
 settings

---
 options/mzta-options.html |  2 +-
 options/mzta-options.js   | 62 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/options/mzta-options.html b/options/mzta-options.html
index 0423168f..cd835aab 100644
--- a/options/mzta-options.html
+++ b/options/mzta-options.html
@@ -123,7 +123,7 @@
       <tr class="conntype_chatgpt_web">
         <td><label>
           <span>__MSG_prefs_OptionText_chatgpt_web_model__</span>
-          <br><table title="__MSG_prefs_OptionText_chatgpt_web_model_tooltip__"><tr><td><i class="small_info"><nobr>__MSG_AllowedValues__:</nobr></i></td><td><i class="small_info"> &nbsp; <nobr class="conntype_chatgpt_web_option">gpt-4o</nobr> &nbsp; <nobr class="conntype_chatgpt_web_option">gpt-4o-mini</nobr> &nbsp; <nobr class="conntype_chatgpt_web_option">gpt-4</nobr> &nbsp; <nobr class="conntype_chatgpt_web_option">o1</nobr> &nbsp; <nobr class="conntype_chatgpt_web_option">o3-mini</nobr> &nbsp; <nobr class="conntype_chatgpt_web_option">o3-mini-high</nobr></i></td></tr></table>
+          <br><table title="__MSG_prefs_OptionText_chatgpt_web_model_tooltip__"><tr id="chatgpt_web_models_list"></tr></table>
         </label></td>
         <td>
           <label>
diff --git a/options/mzta-options.js b/options/mzta-options.js
index 19994820..a4b58b39 100644
--- a/options/mzta-options.js
+++ b/options/mzta-options.js
@@ -28,6 +28,8 @@ let taLog = new taLogger("mzta-options",true);
 let _isThunderbird128OrGreater = true;
 let permission_all_urls = false;
 
+const ChatGPTWeb_models = ['gpt-4o', 'gpt-4o-mini', 'gpt-4', 'o1', 'o3-mini', 'o3-mini-high'];
+
 function saveOptions(e) {
   e.preventDefault();
   let options = {};
@@ -309,6 +311,48 @@ async function disable_GetCalendarEvent(){
   no_sparks_tr.style.display = (is_spark_present || (conntype_select.value === "chatgpt_web")) ? 'none' : 'table-row';
 }
 
+
+function getChatGPTWebModelsList_HTML(values, targetRowId) {
+  const rowElement = document.getElementById(targetRowId);
+  if (!rowElement) return;
+
+  // Clears any existing td elements
+  rowElement.innerHTML = '';
+
+  // First TD: label
+  const labelTd = document.createElement('td');
+  const label = document.createElement('i');
+  label.className = 'small_info';
+  const labelNobr = document.createElement('nobr');
+  labelNobr.textContent = browser.i18n.getMessage("AllowedValues") + ":";
+  label.appendChild(labelNobr);
+  labelTd.appendChild(label);
+
+  // Second TD: values
+  const valuesTd = document.createElement('td');
+  const valuesContainer = document.createElement('i');
+  valuesContainer.className = 'small_info';
+
+  values.forEach(value => {
+    const nbspBefore = document.createTextNode(' \u00A0 '); // " &nbsp; "
+    const valueNobr = document.createElement('nobr');
+    valueNobr.className = 'conntype_chatgpt_web_option';
+    valueNobr.textContent = value;
+    const nbspAfter = document.createTextNode(' \u00A0 ');
+
+    valuesContainer.appendChild(nbspBefore);
+    valuesContainer.appendChild(valueNobr);
+    valuesContainer.appendChild(nbspAfter);
+  });
+
+  valuesTd.appendChild(valuesContainer);
+
+  // Adds the td elements to the row
+  rowElement.appendChild(labelTd);
+  rowElement.appendChild(valuesTd);
+}
+  
+
 document.addEventListener('DOMContentLoaded', async () => {
   await restoreOptions();
 
@@ -327,14 +371,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   document.querySelectorAll(".option-input").forEach(element => {
     element.addEventListener("change", saveOptions);
   });
-  document.querySelectorAll(".conntype_chatgpt_web_option").forEach(element => {
-    element.addEventListener("click", () => {
-      let el = document.getElementById("chatgpt_web_model");
-      el.value = element.textContent;
-      el.dispatchEvent(new Event('change'), { bubbles: true });
-    });
-  });
-
+  
   let addtags_el = document.getElementById('add_tags');
   let addtags_info_btn = document.getElementById('btnManageTagsInfo');
   addtags_el.addEventListener('click', (event) => {
@@ -456,6 +493,15 @@ document.addEventListener('DOMContentLoaded', async () => {
     permission_all_urls = await messenger.permissions.request({ origins: ["<all_urls>"] });
   });
 
+  getChatGPTWebModelsList_HTML(ChatGPTWeb_models, 'chatgpt_web_models_list');
+  document.querySelectorAll(".conntype_chatgpt_web_option").forEach(element => {
+    element.addEventListener("click", () => {
+      let el = document.getElementById("chatgpt_web_model");
+      el.value = element.textContent;
+      el.dispatchEvent(new Event('change'), { bubbles: true });
+    });
+  });
+
   let conntype_select = document.getElementById("connection_type");
   conntype_select.addEventListener("change", showConnectionOptions);
   conntype_select.addEventListener("change", warn_ChatGPT_APIKeyEmpty);