From a3ec95389c5644e1ba4c75afb69bb021bfbf970a Mon Sep 17 00:00:00 2001
From: yoannchb-pro <71560747+yoannchb-pro@users.noreply.github.com>
Date: Mon, 18 Mar 2024 22:52:26 -0400
Subject: [PATCH] custom gpt model - select to datalist

---
 extension/popup/index.html       |  3 ++-
 extension/popup/js/gptVersion.js | 16 +++++++++-------
 extension/popup/js/index.js      |  2 +-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/extension/popup/index.html b/extension/popup/index.html
index 36da2a1..714bde1 100644
--- a/extension/popup/index.html
+++ b/extension/popup/index.html
@@ -47,7 +47,8 @@
       </div>
       <div class="line center">
         <label for="model" class="textLabel">GPT Model<span class="required">*</span>:</label>
-        <select name="model" id="model" disabled></select>
+        <input type="text" id="model" list="models" disabled />
+        <datalist id="models"></datalist>
       </div>
       <div class="line center">
         <label for="code" class="textLabel">Code:</label>
diff --git a/extension/popup/js/gptVersion.js b/extension/popup/js/gptVersion.js
index 8fff3d2..6deb01b 100644
--- a/extension/popup/js/gptVersion.js
+++ b/extension/popup/js/gptVersion.js
@@ -20,20 +20,22 @@ modelInput.addEventListener('input', checkCanIncludeImages);
 /**
  * Get the list of chatgpt versions
  */
-function getLastChatGPTVersion(selectedModel) {
+function getLastChatGPTVersion() {
   const apiKeySelector = document.querySelector('#apiKey');
-  const selectModel = document.querySelector('#model');
+  const inputModel = document.querySelector('#model');
+  const modelsList = document.querySelector('#models');
 
   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) {
-      selectModel.setAttribute('disabled', true);
+      inputModel.setAttribute('disabled', true);
+      modelsList.setAttribute('disabled', true);
       return;
     }
 
-    selectModel.innerHTML = '';
+    inputModel.innerHTML = '';
 
     try {
       const req = await fetch('https://api.openai.com/v1/models', {
@@ -49,8 +51,7 @@ function getLastChatGPTVersion(selectedModel) {
         const opt = document.createElement('option');
         opt.value = model.id;
         opt.textContent = model.id;
-        opt.selected = selectedModel && model.id === selectedModel;
-        selectModel.appendChild(opt);
+        modelsList.appendChild(opt);
       }
 
       checkCanIncludeImages();
@@ -59,7 +60,8 @@ function getLastChatGPTVersion(selectedModel) {
       showMessage({ msg: 'Failed to fetch last ChatGPT version', error: true });
     }
 
-    selectModel.removeAttribute('disabled');
+    inputModel.removeAttribute('disabled');
+    modelsList.removeAttribute('disabled');
   }
 
   // Check if the api key is set
diff --git a/extension/popup/js/index.js b/extension/popup/js/index.js
index 5efa82a..d7c2515 100644
--- a/extension/popup/js/index.js
+++ b/extension/popup/js/index.js
@@ -84,6 +84,6 @@ chrome.storage.sync.get(['moodleGPT']).then(function (storage) {
   }
 
   handleModeChange();
-  getLastChatGPTVersion(config?.model);
+  getLastChatGPTVersion();
   checkCanIncludeImages();
 });