From 93afbb24906afef22ded4e054fce8a42ca2401c1 Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Mon, 22 Jul 2024 23:36:12 +0200
Subject: [PATCH] managing model in the options page. see #92

---
 options/mzta-options-default.js |  1 +
 options/mzta-options.html       | 14 ++++++++++++++
 options/mzta-options.js         | 26 ++++++++++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/options/mzta-options-default.js b/options/mzta-options-default.js
index bfcc95e1..a3443ce1 100644
--- a/options/mzta-options-default.js
+++ b/options/mzta-options-default.js
@@ -24,4 +24,5 @@ export const prefs_default = {
     default_chatgpt_lang: '',
     connection_type: 'chatgpt_web',     //Other values: 'chatgpt_api'
     api_key_chatgpt: '',
+    model_chatgpt: '',
 }
\ No newline at end of file
diff --git a/options/mzta-options.html b/options/mzta-options.html
index 66030506..3695b873 100644
--- a/options/mzta-options.html
+++ b/options/mzta-options.html
@@ -108,6 +108,20 @@
           </label>
         </td>
       </tr>
+      <tr class="conntype_chatgpt_api">
+        <td>
+          <label>
+            <span>__MSG_ChatGPT_Models__</span>
+          </label>
+        </td>
+        <td>
+          <button id="btnUpdateChatGPTModels">__MSG_ChatGPT_Models_Fetch__</button><br>
+          <label>
+            <select id="model_chatgpt" name="model_chatgpt" class="option-input">
+            </select>
+          </label>
+        </td>
+      </tr>
     </table>
     <div id="btn_custom_prompts">
         <button id="btnManagePrompts">__MSG_prefs_OptionText_btnManagePrompts__</button>
diff --git a/options/mzta-options.js b/options/mzta-options.js
index c7fb38f8..b47338b8 100644
--- a/options/mzta-options.js
+++ b/options/mzta-options.js
@@ -18,6 +18,7 @@
 
 
 import { prefs_default } from './mzta-options-default.js';
+import { OpenAI } from '../js/api/openai.js';
 
 function saveOptions(e) {
   e.preventDefault();
@@ -121,6 +122,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     element.addEventListener("change", saveOptions);
   });
   showConnectionOptions();
+  
   document.getElementById('btnManagePrompts').addEventListener('click', () => {
     // check if the tab is already there
     browser.tabs.query({url: browser.runtime.getURL('../customprompts/mzta-custom-prompts.html')}).then((tabs) => {
@@ -133,7 +135,31 @@ document.addEventListener('DOMContentLoaded', async () => {
       }
     })
   });
+
   document.getElementById("connection_type").addEventListener("change", showConnectionOptions);
   document.getElementById("connection_type").addEventListener("change", warnAPIKeyEmpty);
   document.getElementById("api_key_chatgpt").addEventListener("change", warnAPIKeyEmpty);
+
+  let prefs = await browser.storage.sync.get({api_key_chatgpt: '', model_chatgpt: ''});
+  let openai = new OpenAI(prefs.api_key_chatgpt, true);
+  let select_model_chatgpt = document.getElementById('model_chatgpt');
+
+  const option = document.createElement('option');
+  option.value = prefs.model_chatgpt;
+  option.text = prefs.model_chatgpt;
+  select_model_chatgpt.appendChild(option);
+
+  document.getElementById('btnUpdateChatGPTModels').addEventListener('click', () => {
+    openai.fetchModels().then((data) => {
+      console.log(">>>>>>>>> ChatGPT models: " + JSON.stringify(data));
+      data.forEach(model => {
+        if (!Array.from(select_model_chatgpt.options).some(option => option.value === model.id)) {
+          const option = document.createElement('option');
+          option.value = model.id;
+          option.text = model.id;
+          select_model_chatgpt.appendChild(option);
+        }
+      });
+    })
+  });
 }, { once: true });