better datalist

extension/popup/index.html

@@ -47,7 +47,7 @@
       </div>
       <div class="line center">
         <label for="model" class="textLabel">GPT Model<span class="required">*</span>:</label>
-        <input type="text" id="model" list="models" disabled />
+        <input type="text" id="model" list="models" />
         <datalist id="models"></datalist>
       </div>
       <div class="line center">

extension/popup/js/gptVersion.js

@@ -1,13 +1,15 @@
 'use strict';
 
-const modelInput = document.querySelector('#model');
+const apiKeySelector = document.querySelector('#apiKey');
+const inputModel = document.querySelector('#model');
+const modelsList = document.querySelector('#models');
 const imagesIntegrationLine = document.querySelector('#includeImages-line');
 
 /**
  * Check if the gpt version is at least 4 to show the option 'Include images'
  */
 function checkCanIncludeImages() {
-  const version = modelInput.value;
+  const version = inputModel.value;
   if (isCurrentVersionSupportingImages(version)) {
     imagesIntegrationLine.style.display = 'flex';
   } else {
@@ -15,25 +17,13 @@ function checkCanIncludeImages() {
   }
 }
 
-modelInput.addEventListener('input', checkCanIncludeImages);
+inputModel.addEventListener('input', checkCanIncludeImages);
 
-/**
- * Get the list of chatgpt versions
- */
-function getLastChatGPTVersion() {
-  const apiKeySelector = document.querySelector('#apiKey');
-  const inputModel = document.querySelector('#model');
-  const modelsList = document.querySelector('#models');
+// We populate the datalist of the chatgpt model
+async function populateDatalistWithGptVersions() {
+  const apiKey = apiKeySelector.value?.trim();
 
-  let apiKey = apiKeySelector.value?.trim();
-
-  // If the api key is set we enable the button to get the last chatgpt version
-  async function getGptVersions() {
-    if (!apiKey) {
-      inputModel.setAttribute('disabled', true);
-      modelsList.setAttribute('disabled', true);
-      return;
-    }
+  if (!apiKey) return;
 
   inputModel.innerHTML = '';
 
@@ -44,7 +34,7 @@ function getLastChatGPTVersion() {
       }
     });
     const rep = await req.json();
-      rep.data.sort((a, b) => b.id.localeCompare(a.id)); // we sort the model to get the best chatgpt version
+    rep.data.sort((a, b) => b.id.localeCompare(a.id)); // we sort the model to get the best chatgpt version first
     const models = rep.data.filter(model => model.id.startsWith('gpt'));
 
     for (const model of models) {
@@ -57,18 +47,8 @@ function getLastChatGPTVersion() {
     checkCanIncludeImages();
   } catch (err) {
     console.error(err);
-      showMessage({ msg: 'Failed to fetch last ChatGPT version', error: true });
+    showMessage({ msg: 'Failed to fetch last ChatGPT versions', error: true });
   }
-
-    inputModel.removeAttribute('disabled');
-    modelsList.removeAttribute('disabled');
-  }
-
-  // Check if the api key is set
-  apiKeySelector.addEventListener('blur', function () {
-    apiKey = apiKeySelector.value.trim();
-    getGptVersions();
-  });
-
-  getGptVersions();
 }
+
+inputModel.addEventListener('focus', populateDatalistWithGptVersions);

extension/popup/js/index.js

@@ -84,6 +84,5 @@ chrome.storage.sync.get(['moodleGPT']).then(function (storage) {
   }
 
   handleModeChange();
-  getLastChatGPTVersion();
   checkCanIncludeImages();
 });