Seprated files and fixed button to get last chatgpt version

This commit is contained in:
yoannchb-pro
2024-01-08 15:57:56 -05:00
parent 9cc2e68d5c
commit 65731fb51b
6 changed files with 138 additions and 114 deletions
+19 -7
View File
@@ -6,8 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MoodleGPT</title>
<link rel="stylesheet" href="style.css" />
<!-- Should always be at the top -->
<script src="./js/utils.js" defer></script>
<script src="./js/index.js" defer></script>
<script src="./js/modeHandler.js" defer></script>
<script src="./js/gptVersion.js" defer></script>
<script src="./js/version.js" defer></script>
<link rel="icon" type="image/png" href="../icon.png" />
<link
rel="stylesheet"
@@ -17,6 +24,7 @@
referrerpolicy="no-referrer"
/>
</head>
<body>
<main>
<div class="line center" style="margin-top: 1rem; margin-bottom: 1rem">
@@ -33,15 +41,15 @@
</div>
</div>
<div class="line center">
<label for="apiKey" class="textLabel">Api Key</label>
<label for="apiKey" class="textLabel"
>Api Key<span class="required">*</span>:</label
>
<input id="apiKey" type="text" />
</div>
<div class="line center">
<label for="code" class="textLabel">Code</label>
<input id="code" type="text" />
</div>
<div class="line center">
<label for="model" class="textLabel">GPT Model</label>
<label for="model" class="textLabel"
>GPT Model<span class="required">*</span>:</label
>
<input id="model" type="text" />
<i
id="reloadModel"
@@ -50,6 +58,10 @@
title="Provide an api key first"
></i>
</div>
<div class="line center">
<label for="code" class="textLabel">Code:</label>
<input id="code" type="text" />
</div>
<div class="line mt">
<i class="fa-solid fa-robot"></i>
<p>Mode:</p>
@@ -71,7 +83,7 @@
<i class="fa-solid fa-gear"></i>
<p>Settings:</p>
</div>
<div class="line center">
<div class="line center" style="gap: 2rem">
<div class="col">
<div class="line">
<input id="logs" type="checkbox" />
+49
View File
@@ -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");
}
});
}
+2 -102
View File
@@ -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;
+45
View File
@@ -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();
});
}
+16
View File
@@ -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);
}
+7 -5
View File
@@ -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();