Seprated files and fixed button to get last chatgpt version
This commit is contained in:
@@ -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" />
|
||||
|
||||
@@ -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
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user