From 68728e77f3348d44d58448df2cce45c50b0549d8 Mon Sep 17 00:00:00 2001
From: mic <m@micz.it>
Date: Thu, 12 Sep 2024 20:45:16 +0200
Subject: [PATCH] openai comp api option html elements added. see #126

---
 _locales/de/messages.json |  4 ++--
 _locales/en/messages.json | 32 ++++++++++++++++++++++++++++++--
 _locales/fr/messages.json |  4 ++--
 _locales/it/messages.json |  4 ++--
 options/mzta-options.css  | 22 ++++++++++++++--------
 options/mzta-options.html | 31 +++++++++++++++++++++++++++++--
 options/mzta-options.js   | 12 +++++++++++-
 7 files changed, 90 insertions(+), 19 deletions(-)

diff --git a/_locales/de/messages.json b/_locales/de/messages.json
index 1e710736..9e6fe576 100644
--- a/_locales/de/messages.json
+++ b/_locales/de/messages.json
@@ -451,7 +451,7 @@
     "message": "Ollama API (Lokales LLM)",
     "description": ""
   },
-  "prefs_Ollama_Host": {
+  "prefs_API_Host": {
     "message": "Host-Adresse",
     "description": ""
   },
@@ -499,7 +499,7 @@
     "message": "Warten auf die Serverantwort.",
     "description": ""
   },
-  "prefs_Ollama_Host_Info": {
+  "prefs_API_Host_Info": {
     "message": "Etwas wie",
     "description": ""
   }
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b9e257de..e1370d9f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -451,7 +451,11 @@
     "message": "Ollama API (Local LLM)",
     "description": ""
   },
-  "prefs_Ollama_Host": {
+  "prefs_Connection_type_OpenAI_Comp_API": {
+    "message": "OpenAI Compatible API",
+    "description": ""
+  },
+  "prefs_API_Host": {
     "message": "Host Address",
     "description": ""
   },
@@ -499,8 +503,32 @@
     "message": "Waiting for the server response",
     "description": ""
   },
-  "prefs_Ollama_Host_Info": {
+  "prefs_API_Host_Info": {
     "message": "Something like",
     "description": ""
+  },
+  "OpenAIComp_Models": {
+    "message": "OpenAI Compatible API Models",
+    "description": ""
+  },
+  "OpenAIComp_Models_Fetch": {
+    "message": "Update OpenAI Compatible API Models list",
+    "description": ""
+  },
+  "OpenAIComp_Models_Error_fetching": {
+    "message": "Error trying to fetch OpenAI Compatible API models",
+    "description": ""
+  },
+  "OpenAIComp_empty_host": {
+    "message": "You've not added an Host Address for the OpenAI Compatible API. Please insert one in the options page.",
+    "description": ""
+  },
+  "OpenAIComp_empty_model": {
+    "message": "You've not choosen a model for the OpenAI Compatible API. Please choose one in the options page.",
+    "description": ""
+  },
+  "OpenAIComp_api_connecting": {
+    "message": "Attempting to connect to the OpenAI Compatible API Local Server using the host",
+    "description": ""
   }
 }
\ No newline at end of file
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
index 6bb390db..438b8913 100644
--- a/_locales/fr/messages.json
+++ b/_locales/fr/messages.json
@@ -451,7 +451,7 @@
     "message": "API Ollama (LLM local)",
     "description": ""
   },
-  "prefs_Ollama_Host": {
+  "prefs_API_Host": {
     "message": "Adresse de l'hôte",
     "description": ""
   },
@@ -499,7 +499,7 @@
     "message": "En attente de la réponse du serveur",
     "description": ""
   },
-  "prefs_Ollama_Host_Info": {
+  "prefs_API_Host_Info": {
     "message": "Quelque chose comme",
     "description": ""
   }
diff --git a/_locales/it/messages.json b/_locales/it/messages.json
index b0a83815..1bd28e5c 100644
--- a/_locales/it/messages.json
+++ b/_locales/it/messages.json
@@ -451,7 +451,7 @@
     "message": "API Ollama (LLM Locale)",
     "description": ""
   },
-  "prefs_Ollama_Host": {
+  "prefs_API_Host": {
     "message": "Indirizzo dell'host",
     "description": ""
   },
@@ -499,7 +499,7 @@
     "message": "In attesa della risposta del server",
     "description": ""
   },
-  "prefs_Ollama_Host_Info": {
+  "prefs_API_Host_Info": {
     "message": "Qualcosa come",
     "description": ""
   }
diff --git a/options/mzta-options.css b/options/mzta-options.css
index 3f61ae19..cd8596b5 100644
--- a/options/mzta-options.css
+++ b/options/mzta-options.css
@@ -96,11 +96,13 @@ tr.conntype_chatgpt_web, tr.conntype_chatgpt_web2{
     background-color: rgb(255, 209, 183);
 }
 
-/* color to be used for a local LLM
-.conntype_chatgpt_web,.conntype_local_llm{
-    background-color: rgb(205, 255, 205);
+tr.conntype_ollama_api, tr.conntype_ollama_api2{
+    background-color: rgb(177, 238, 169);
+}
+
+tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
+    background-color: rgb(213, 169, 238);
 }
-*/
 
 #chatgpt_model_fetch_loading{
     display: none;
@@ -112,6 +114,11 @@ tr.conntype_chatgpt_web, tr.conntype_chatgpt_web2{
     font-style: italic;
 }
 
+#openai_comp_model_fetch_loading{
+    display: none;
+    font-style: italic;
+}
+
 @media (prefers-color-scheme: dark) {
     body {
         background-color: rgb(35, 34, 43);
@@ -135,9 +142,8 @@ tr.conntype_chatgpt_web, tr.conntype_chatgpt_web2{
         background-color: rgb(7, 58, 0);
     }
 
-    /* color to be used for a local LLM
-    .conntype_chatgpt_web,.conntype_local_llm{
-        background-color: rgb(0, 39, 0);
+    tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
+        background-color: rgb(89, 20, 129);
     }
-    */
+
 }
\ No newline at end of file
diff --git a/options/mzta-options.html b/options/mzta-options.html
index c7128883..eda50fca 100644
--- a/options/mzta-options.html
+++ b/options/mzta-options.html
@@ -71,6 +71,7 @@
               <option value="chatgpt_web">__MSG_prefs_Connection_type_ChatGTP_Web__</option>
               <option value="chatgpt_api">__MSG_prefs_Connection_type_ChatGTP_API__</option>
               <option value="ollama_api">__MSG_prefs_Connection_type_Ollama_API__</option>
+              <option value="openai_comp_api">__MSG_prefs_Connection_type_OpenAI_Comp_API__</option>
             </select>
           </label>
         </td>
@@ -114,8 +115,8 @@
       </tr>
       <tr class="conntype_ollama_api">
         <td><label>
-          <span>__MSG_prefs_Ollama_Host__</span>
-          <br><i style="font-size:smaller;">__MSG_prefs_Ollama_Host_Info__ http://127.0.0.1:11434</i>
+          <span>__MSG_prefs_API_Host__</span>
+          <br><i style="font-size:smaller;">__MSG_prefs_API_Host_Info__ http://127.0.0.1:11434</i>
         </label></td>
         <td>
           <label>
@@ -138,6 +139,32 @@
           </label>
         </td>
       </tr>
+      <tr class="conntype_openai_comp_api">
+        <td><label>
+          <span>__MSG_prefs_API_Host__</span>
+          <br><i style="font-size:smaller;">__MSG_prefs_API_Host_Info__ http://127.0.0.1:11434</i>
+        </label></td>
+        <td>
+          <label>
+            <input type="text" id="openai_comp_host" name="openai_comp_host" class="option-input" style="width:28em" />
+            &nbsp;<span></span>
+          </label>
+        </td>
+      </tr>
+      <tr class="conntype_openai_comp_api">
+        <td>
+          <label>
+            <span>__MSG_OpenAIComp_Models__</span>
+          </label>
+        </td>
+        <td>
+          <button id="btnUpdateOpenAICompModels">__MSG_OpenAIComp_Models_Fetch__</button> <span id="openai_comp_model_fetch_loading">__MSG_Loading__</span><br>
+          <label>
+            <select id="openai_comp_model" name="openai_comp_model" class="option-input">
+            </select>
+          </label>
+        </td>
+      </tr>
       <tr>
         <td><label>
           <span>__MSG_Debug__</span>
diff --git a/options/mzta-options.js b/options/mzta-options.js
index db1938a3..a4c53d25 100644
--- a/options/mzta-options.js
+++ b/options/mzta-options.js
@@ -93,11 +93,13 @@ function showConnectionOptions() {
   let chatgpt_web_display = 'table-row';
   let chatgpt_api_display = 'none';
   let ollama_api_display = 'none';
+  let openai_comp_api_display = 'none';
   let conntype_select = document.getElementById("connection_type");
   let parent = conntype_select.parentElement.parentElement.parentElement;
-    parent.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
+  parent.classList.toggle("conntype_chatgpt_web", (conntype_select.value === "chatgpt_web"));
   parent.classList.toggle("conntype_chatgpt_api", (conntype_select.value === "chatgpt_api"));
   parent.classList.toggle("conntype_ollama_api", (conntype_select.value === "ollama_api"));
+  parent.classList.toggle("conntype_openai_comp_api", (conntype_select.value === "openai_comp_api"));
   if (conntype_select.value === "chatgpt_web") {
     chatgpt_web_display = 'table-row';
   }else{
@@ -113,6 +115,11 @@ function showConnectionOptions() {
   }else{
     ollama_api_display = 'none';
   }
+  if (conntype_select.value === "openai_comp_api") {
+    openai_comp_api_display = 'table-row';
+  }else{
+    openai_comp_api_display = 'none';
+  }
   document.querySelectorAll(".conntype_chatgpt_web").forEach(element => {
     element.style.display = chatgpt_web_display;
   });
@@ -122,6 +129,9 @@ function showConnectionOptions() {
   document.querySelectorAll(".conntype_ollama_api").forEach(element => {
     element.style.display = ollama_api_display;
   });
+  document.querySelectorAll(".conntype_openai_comp_api").forEach(element => {
+    element.style.display = openai_comp_api_display;
+  });
 }
 
 function warn_ChatGPT_APIKeyEmpty() {