diff --git a/extension/popup/index.html b/extension/popup/index.html
index 34b4612..36da2a1 100644
--- a/extension/popup/index.html
+++ b/extension/popup/index.html
@@ -47,13 +47,7 @@
-
-
+
diff --git a/extension/popup/js/gptVersion.js b/extension/popup/js/gptVersion.js
index 917c55e..4f566d6 100644
--- a/extension/popup/js/gptVersion.js
+++ b/extension/popup/js/gptVersion.js
@@ -18,36 +18,22 @@ function checkCanIncludeImages() {
modelInput.addEventListener('input', checkCanIncludeImages);
/**
- * Get the last ChatGPT version
+ * Get the list of chatgpt versions
*/
function getLastChatGPTVersion() {
const apiKeySelector = document.querySelector('#apiKey');
- const reloadModel = document.querySelector('#reloadModel');
+ const selectModel = document.querySelector('#model');
let apiKey = apiKeySelector.value?.trim();
// If the api key is set we enable the button to get the last chatgpt version
- function checkFiledApiKey() {
- if (apiKey) {
- reloadModel.removeAttribute('disabled');
- reloadModel.setAttribute('title', 'Get last ChatGPT version');
+ async function getGptVersions() {
+ if (!apiKey) {
+ selectModel.setAttribute('disabled', true);
return;
}
- reloadModel.setAttribute('disabled', true);
- reloadModel.setAttribute('title', 'Provide an api key first');
- }
- checkFiledApiKey();
-
- // Check if the api key is set
- apiKeySelector.addEventListener('input', function () {
- apiKey = apiKeySelector.value.trim();
- checkFiledApiKey();
- });
-
- // Event listener to handle a click on the relaod icon button
- reloadModel.addEventListener('click', async function () {
- if (!apiKey) return;
+ selectModel.innerHTML = '';
try {
const req = await fetch('https://api.openai.com/v1/models', {
@@ -57,13 +43,29 @@ 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
- const model = rep.data.find(model => model.id.startsWith('gpt'));
- modelInput.value = model.id;
+ 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;
+ selectModel.appendChild(opt);
+ }
checkCanIncludeImages();
} catch (err) {
console.error(err);
showMessage({ msg: 'Failed to fetch last ChatGPT version', error: true });
}
+
+ selectModel.removeAttribute('disabled');
+ }
+
+ // Check if the api key is set
+ apiKeySelector.addEventListener('blur', function () {
+ apiKey = apiKeySelector.value.trim();
+ getGptVersions();
});
+
+ getGptVersions();
}
diff --git a/extension/popup/style.css b/extension/popup/style.css
index 85b8c39..d44b084 100644
--- a/extension/popup/style.css
+++ b/extension/popup/style.css
@@ -68,7 +68,8 @@ a {
}
.line input[type='text'],
-.line input[type='password'] {
+.line input[type='password'],
+.line select {
flex: 1 1;
border: thin solid var(--color);
padding: 0.3rem 0.5rem;
@@ -77,6 +78,10 @@ a {
background-color: transparent;
}
+.line option {
+ color: #000;
+}
+
.line input[type='checkbox'] {
accent-color: var(--btn-color);
}