From 8a9c73e98cc61f371280bc7f4a1129dcf649ab99 Mon Sep 17 00:00:00 2001
From: yoannchb-pro <71560747+yoannchb-pro@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:04:00 -0400
Subject: [PATCH] better datalist

---
 extension/popup/index.html       |  2 +-
 extension/popup/js/gptVersion.js | 78 ++++++++++++--------------------
 extension/popup/js/index.js      |  1 -
 3 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/extension/popup/index.html b/extension/popup/index.html
index 714bde1..3871c91 100644
--- a/extension/popup/index.html
+++ b/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">
diff --git a/extension/popup/js/gptVersion.js b/extension/popup/js/gptVersion.js
index 6deb01b..703f1ec 100644
--- a/extension/popup/js/gptVersion.js
+++ b/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,60 +17,38 @@ 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 (!apiKey) return;
 
-  // 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;
-    }
+  inputModel.innerHTML = '';
 
-    inputModel.innerHTML = '';
-
-    try {
-      const req = await fetch('https://api.openai.com/v1/models', {
-        headers: {
-          Authorization: `Bearer ${apiKey}`
-        }
-      });
-      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
-      const models = rep.data.filter(model => model.id.startsWith('gpt'));
-
-      for (const model of models) {
-        const opt = document.createElement('option');
-        opt.value = model.id;
-        opt.textContent = model.id;
-        modelsList.appendChild(opt);
+  try {
+    const req = await fetch('https://api.openai.com/v1/models', {
+      headers: {
+        Authorization: `Bearer ${apiKey}`
       }
+    });
+    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 first
+    const models = rep.data.filter(model => model.id.startsWith('gpt'));
 
-      checkCanIncludeImages();
-    } catch (err) {
-      console.error(err);
-      showMessage({ msg: 'Failed to fetch last ChatGPT version', error: true });
+    for (const model of models) {
+      const opt = document.createElement('option');
+      opt.value = model.id;
+      opt.textContent = model.id;
+      modelsList.appendChild(opt);
     }
 
-    inputModel.removeAttribute('disabled');
-    modelsList.removeAttribute('disabled');
+    checkCanIncludeImages();
+  } catch (err) {
+    console.error(err);
+    showMessage({ msg: 'Failed to fetch last ChatGPT versions', error: true });
   }
-
-  // Check if the api key is set
-  apiKeySelector.addEventListener('blur', function () {
-    apiKey = apiKeySelector.value.trim();
-    getGptVersions();
-  });
-
-  getGptVersions();
 }
+
+inputModel.addEventListener('focus', populateDatalistWithGptVersions);
diff --git a/extension/popup/js/index.js b/extension/popup/js/index.js
index d7c2515..5b69638 100644
--- a/extension/popup/js/index.js
+++ b/extension/popup/js/index.js
@@ -84,6 +84,5 @@ chrome.storage.sync.get(['moodleGPT']).then(function (storage) {
   }
 
   handleModeChange();
-  getLastChatGPTVersion();
   checkCanIncludeImages();
 });