openai comp apikey added in the options page

_locales/en/messages.json

@@ -574,5 +574,13 @@
   "prefs_OptionText_chatgpt_win_dims_info": {
     "message": "Set to 0 if you don't want to specify the window size.",
     "description": ""
+  },
+  "prefs_OpenAIComp_API_Key": {
+    "message": "OpenAI Comp API Key",
+    "description": ""
+  },
+  "Optional": {
+    "message": "Optional",
+    "description": ""
   }
 }

options/mzta-options-default.js

@@ -28,6 +28,7 @@ export const prefs_default = {
     ollama_model: '',
     openai_comp_host: '',   // For OpenAI Compatible API as LM-Studio
     openai_comp_model: '',
+    openai_comp_api_key: '',
     openai_comp_chat_name: 'OpenAI Comp',
     dynamic_menu_force_enter: false,
     dynamic_menu_order_alphabet: true,

options/mzta-options.css

@@ -109,12 +109,12 @@ tr.conntype_openai_comp_api, tr.conntype_openai_comp_api2{
     font-style: italic;
 }
 
-.chatgpt_api_key-container {
+.api_key-container {
     position: relative;
     width: 100%;
 }
 
-.chatgpt_api_key-container input {
+.api_key-container input {
     width: -moz-available;
     margin-right: 25px;
 }
@@ -128,7 +128,7 @@ input.option-input[type="text"]{
     width: -moz-available;
 }
 
-.chatgpt_api_key-container .toggle-icon {
+.api_key-container .toggle-icon {
     position: absolute;
     right: 0px;
     top: 50%;
@@ -173,4 +173,8 @@ input.option-input[type="text"]{
         background-color: rgb(89, 20, 129);
     }
 
+    .api_key-container .toggle-icon img {
+        filter: invert(1);
+    }
+
 }

options/mzta-options.html

@@ -104,11 +104,11 @@
           <span>__MSG_prefs_ChatGPT_API_Key__</span>
         </label></td>
         <td>
-          <div class="chatgpt_api_key-container">
+          <div class="api_key-container">
             <label>
               <input type="password" id="chatgpt_api_key" name="chatgpt_api_key" class="option-input"/>
             </label>
-            <span class="toggle-icon" id="togglePassword"><img src="../images/pwd-show.png" id="pwd-icon"></span>
+            <span class="toggle-icon" id="toggle_chatgpt_api_key"><img src="../images/pwd-show.png" id="pwd-icon_chatgpt_api_key"></span>
           </div>
         </td>
       </tr>
@@ -162,6 +162,20 @@
           </label>
         </td>
       </tr>
+      <tr class="conntype_openai_comp_api">
+        <td><label>
+          <span>__MSG_prefs_OpenAIComp_API_Key__</span>
+          <br><i style="font-size:smaller;">__MSG_Optional__</i>
+        </label></td>
+        <td>
+          <div class="api_key-container">
+            <label>
+              <input type="password" id="openai_comp_api_key" name="openai_comp_api_key" class="option-input"/>
+            </label>
+            <span class="toggle-icon" id="toggle_openai_comp_api_key"><img src="../images/pwd-show.png" id="pwd-icon_openai_comp_api_key"></span>
+          </div>
+        </td>
+      </tr>
       <tr class="conntype_openai_comp_api">
         <td>
           <label>

options/mzta-options.js

@@ -55,7 +55,7 @@ function saveOptions(e) {
 async function restoreOptions() {
   function setCurrentChoice(result) {
     document.querySelectorAll(".option-input").forEach(element => {
-      taLog.log("Options restoring " + element.id + " = " + (element.id=="chatgpt_api_key" ? "****************" : result[element.id]));
+      taLog.log("Options restoring " + element.id + " = " + (element.id=="chatgpt_api_key" || element.id=="openai_comp_api_key" ? "****************" : result[element.id]));
       switch (element.type) {
         case 'checkbox':
           element.checked = result[element.id] || false;
@@ -359,15 +359,26 @@ select_openai_comp_model.addEventListener("change", warn_OpenAIComp_HostEmpty);
   warn_Ollama_HostEmpty();
   warn_OpenAIComp_HostEmpty();
 
-  const passwordField = document.getElementById('chatgpt_api_key');
+  const passwordField_chatgpt_api_key = document.getElementById('chatgpt_api_key');
-  const toggleIcon = document.getElementById('togglePassword');
+  const toggleIcon_chatgpt_api_key = document.getElementById('toggle_chatgpt_api_key');
-  const icon_img = document.getElementById('pwd-icon');
+  const icon_img_chatgpt_api_key = document.getElementById('pwd-icon_chatgpt_api_key');
 
-  toggleIcon.addEventListener('click', () => {
+  toggleIcon_chatgpt_api_key.addEventListener('click', () => {
-      const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
+      const type = passwordField_chatgpt_api_key.getAttribute('type') === 'password' ? 'text' : 'password';
-      passwordField.setAttribute('type', type);
+      passwordField_chatgpt_api_key.setAttribute('type', type);
 
-      icon_img.src = type === 'password' ? "../images/pwd-show.png" : "../images/pwd-hide.png";
+      icon_img_chatgpt_api_key.src = type === 'password' ? "../images/pwd-show.png" : "../images/pwd-hide.png";
+  });
+
+  const passwordField_openai_comp_api_key = document.getElementById('openai_comp_api_key');
+  const toggleIcon_openai_comp_api_key = document.getElementById('toggle_openai_comp_api_key');
+  const icon_img_openai_comp_api_key = document.getElementById('pwd-icon_openai_comp_api_key');
+
+  toggleIcon_openai_comp_api_key.addEventListener('click', () => {
+      const type = passwordField_openai_comp_api_key.getAttribute('type') === 'password' ? 'text' : 'password';
+      passwordField_openai_comp_api_key.setAttribute('type', type);
+
+      icon_img_openai_comp_api_key.src = type === 'password' ? "../images/pwd-show.png" : "../images/pwd-hide.png";
   });
 
 }, { once: true });