diff --git a/extension/popup/index.html b/extension/popup/index.html index caa943c..1c46e25 100644 --- a/extension/popup/index.html +++ b/extension/popup/index.html @@ -6,8 +6,15 @@ MoodleGPT + + + + + + + +
@@ -33,15 +41,15 @@
- +
- - -
-
- +
+
+ + +

Mode:

@@ -71,7 +83,7 @@

Settings:

-
+
diff --git a/extension/popup/js/gptVersion.js b/extension/popup/js/gptVersion.js new file mode 100644 index 0000000..6939351 --- /dev/null +++ b/extension/popup/js/gptVersion.js @@ -0,0 +1,49 @@ +"use strict"; + +/** + * Get the last ChatGPT version + */ +function getLastChatGPTVersion() { + const apiKeySelector = document.querySelector("#apiKey"); + const reloadModel = document.querySelector("#reloadModel"); + + let apiKey = apiKeySelector.value; + + // 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"); + 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; + + try { + const req = await fetch("https://api.openai.com/v1/models", { + headers: { + Authorization: `Bearer ${apiKey}`, + }, + }); + const rep = await req.json(); + const model = rep.data.find((model) => model.id.startsWith("gpt")); + document.querySelector("#model").value = model.id; + } catch (err) { + console.error(err); + showMessage("Failed to fetch last ChatGPT version"); + } + }); +} diff --git a/extension/popup/js/index.js b/extension/popup/js/index.js index 304002e..e4ee9c1 100644 --- a/extension/popup/js/index.js +++ b/extension/popup/js/index.js @@ -1,5 +1,4 @@ const saveBtn = document.querySelector(".save"); -const message = document.querySelector("#message"); /* inputs id */ const inputsText = ["apiKey", "code", "model"]; @@ -13,60 +12,6 @@ const inputsCheckbox = [ "timeout", ]; -const mode = document.querySelector("#mode"); -const modes = mode.querySelectorAll("button"); -let actualMode = "autocomplete"; -/* inputs id that need to be disabled for a specific mode */ -const disabledForThisMode = { - autocomplete: [], - clipboard: ["typing", "mouseover"], - "question-to-answer": ["typing", "infinite", "mouseover"], -}; - -/** - * Show message into the popup - * @param {string} messageTxt - * @param {boolean} valide - */ -function showMessage(messageTxt, valide) { - message.style.color = valide ? "limegreen" : "red"; - message.textContent = messageTxt; - message.style.display = "block"; - setTimeout(() => (message.style.display = "none"), 5000); -} - -/** - * Handle when a mode change to show specific input - */ -function handleModeChange() { - const needDisable = disabledForThisMode[actualMode]; - const dontNeedDisable = inputsCheckbox.filter( - (input) => !needDisable.includes(input) - ); - for (const id of needDisable) { - document.querySelector("#" + id).parentElement.style.display = "none"; - } - for (const id of dontNeedDisable) { - document.querySelector("#" + id).parentElement.style.display = null; - } -} - -/* Mode handler */ -modes.forEach((button) => { - button.addEventListener("click", function () { - const value = button.value; - actualMode = value; - for (const mode of modes) { - if (mode.value !== value) { - mode.classList.add("not-selected"); - } else { - mode.classList.remove("not-selected"); - } - } - handleModeChange(); - }); -}); - /* Save the configuration */ saveBtn.addEventListener("click", function () { const [apiKey, code, model] = inputsText.map((selector) => @@ -78,12 +23,12 @@ saveBtn.addEventListener("click", function () { return element.checked && element.parentElement.style.display !== "none"; }); - if (!apiKey || !code || !model) { + if (!apiKey || !model) { showMessage("Please complete all the form"); return; } - if (code.length < 3) { + if (code.length > 0 && code.length < 3) { showMessage("The code should at least contain 3 characters"); return; } @@ -107,51 +52,6 @@ saveBtn.addEventListener("click", function () { showMessage("Configuration saved", true); }); -/** - * Get the last ChatGPT version - */ -function getLastChatGPTVersion() { - const apiKeySelector = document.querySelector("#apiKey"); - const reloadModel = document.querySelector("#reloadModel"); - - let apiKey = apiKeySelector.value; - - function checkFiledApiKey() { - if (apiKey) { - reloadModel.removeAttribute("disabled"); - reloadModel.setAttribute("title", "Get last ChatGPT version"); - return; - } - - reloadModel.setAttribute("disabled", true); - reloadModel.setAttribute("title", "Provide an api key first"); - } - - checkFiledApiKey(); - - apiKeySelector.addEventListener("input", function () { - apiKey = apiKeySelector.value.trim(); - checkFiledApiKey(); - }); - - reloadModel.addEventListener("click", async function () { - if (!apiKey) return; - try { - const req = await fetch("https://api.openai.com/v1/models", { - headers: { - Authorization: `Bearer ${apiKey}`, - }, - }); - const rep = await req.json(); - const model = rep.data.find((model) => model.id.includes("gpt")); - document.querySelector("#model").value = model.root; - } catch (err) { - console.error(err); - showMessage("Failed to fetch last ChatGPT version"); - } - }); -} - /* we load back the configuration */ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { const config = storage.moodleGPT; diff --git a/extension/popup/js/modeHandler.js b/extension/popup/js/modeHandler.js new file mode 100644 index 0000000..705dd5f --- /dev/null +++ b/extension/popup/js/modeHandler.js @@ -0,0 +1,45 @@ +"use strict"; + +const mode = document.querySelector("#mode"); +const modes = mode.querySelectorAll("button"); + +let actualMode = "autocomplete"; + +/* inputs id that need to be disabled for a specific mode */ +const disabledForThisMode = { + autocomplete: [], + clipboard: ["typing", "mouseover"], + "question-to-answer": ["typing", "infinite", "mouseover"], +}; + +/** + * Handle when a mode change to show specific input or to hide them + */ +function handleModeChange() { + const needDisable = disabledForThisMode[actualMode]; + const dontNeedDisable = inputsCheckbox.filter( + (input) => !needDisable.includes(input) + ); + for (const id of needDisable) { + document.querySelector("#" + id).parentElement.style.display = "none"; + } + for (const id of dontNeedDisable) { + document.querySelector("#" + id).parentElement.style.display = null; + } +} + +/* Mode handler */ +for (const button of modes) { + button.addEventListener("click", function () { + const value = button.value; + actualMode = value; + for (const mode of modes) { + if (mode.value !== value) { + mode.classList.add("not-selected"); + } else { + mode.classList.remove("not-selected"); + } + } + handleModeChange(); + }); +} diff --git a/extension/popup/js/utils.js b/extension/popup/js/utils.js new file mode 100644 index 0000000..821646d --- /dev/null +++ b/extension/popup/js/utils.js @@ -0,0 +1,16 @@ +"use strict"; + +const message = document.querySelector("#message"); + +/** + * Show message into the popup + * @param {string} messageTxt + * @param {boolean} valide + * @param {boolean} infinite + */ +function showMessage(messageTxt, valide, infinite) { + message.style.color = valide ? "limegreen" : "red"; + message.textContent = messageTxt; + message.style.display = "block"; + if (!infinite) setTimeout(() => (message.style.display = "none"), 5000); +} diff --git a/extension/popup/js/version.js b/extension/popup/js/version.js index dd745a7..3f5ee5b 100644 --- a/extension/popup/js/version.js +++ b/extension/popup/js/version.js @@ -1,4 +1,6 @@ -const currentVersion = "1.0.3"; +"use strict"; + +const CURRENT_VERSION = "1.0.4"; const versionDisplay = document.querySelector("#version"); /** @@ -35,16 +37,16 @@ function setVersion(version, isCurrent = true) { } /** - * Check the extension neeed an update or no + * Check if the extension neeed an update or not */ async function notifyUpdate() { const lastVersion = await getLastVersion().catch((err) => { console.error(err); - return currentVersion; + return CURRENT_VERSION; }); const lastVertionSplitted = lastVersion.split("."); - const currentVersionSplitted = currentVersion.split("."); + const currentVersionSplitted = CURRENT_VERSION.split("."); const minVersionLength = Math.min( lastVertionSplitted.length, currentVersionSplitted.length @@ -55,7 +57,7 @@ async function notifyUpdate() { return setVersion(lastVersion, false); } - setVersion(currentVersion); + setVersion(CURRENT_VERSION); } notifyUpdate();