Add tooltips for input field help icons

Author: imigueldiaz

_locales/en/messages.json

@@ -140,6 +140,38 @@
 "errorTopkTopp": {
   "message": "topK and topP are mutually exclusive.",
   "description": "Error message when topK and topP are not between 0 and 1."
+},
+"apiKeyTip": {
+  "message": "Your Perplexity API key can be found in your account settings.",
+  "description": "Tip for the API key input field."
+},
+"modelTip": {
+  "message": "The model to use for generating the abstract.",
+  "description": "Tip for the model input field."
+},
+"temperatureTip": {
+  "message": "The temperature to use for generating the abstract. Higher values will result in more creative text, while lower values will result in more conservative text.",
+  "description": "Tip for the temperature input field."
+},
+"frequencyPenaltyTip": {
+  "message": "The frequency penalty to use for generating the abstract. Higher values will result in more diverse text, while lower values will result in more repetitive text.",
+  "description": "Tip for the frequency penalty input field."
+},
+"presencePenaltyTip": {
+  "message": "The presence penalty to use for generating the abstract. Higher values will result in more focused text, while lower values will result in more general text.",
+  "description": "Tip for the presence penalty input field."
+},
+"topkTip": {
+  "message": "The top-k value to use for generating the abstract. Higher values will result in more focused text, while lower values will result in more general text.",
+  "description": "Tip for the top-k input field."
+},
+"toppTip": {
+  "message": "The top-p value to use for generating the abstract. Higher values will result in more focused text, while lower values will result in more general text.",
+  "description": "Tip for the top-p input field."
+},
+"maxTokensTip": {
+  "message": "The maximum number of tokens to generate for the abstract. Higher values will result in longer text, while lower values will result in shorter text.",
+  "description": "Tip for the max tokens input field."
 }
 
 }

_locales/es/messages.json

@@ -140,5 +140,38 @@
   "errorTopkTopp": {
     "message": "topK y topP son mutuamente exclusivos.",
     "description": "Mensaje de error para topK y topP."
+  },
+  "apiKeyTip": {
+    "message": "Tu clave de Perplexity API se puede encontrar en la página de ajustes de tu cuenta de Perplexity.",
+    "description": "Consejo para obtener una clave API de Perplexity."
+  },
+  "modelTip": {
+    "message": "El modelo de Perplexity AI que se utilizará para generar el resumen.",
+    "description": "Consejo para seleccionar un modelo."
+  },
+  "temperatureTip": {
+    "message": "La temperatura de muestreo para la generación de texto. Un valor más alto da como resultado texto más diverso.",
+    "description": "Consejo para seleccionar una temperatura."
+  },
+  "frequencyPenaltyTip": {
+    "message": "Un valor más alto penaliza las palabras clave que aparecen con demasiada frecuencia.",
+    "description": "Consejo para seleccionar una penalización de frecuencia."
+  },
+  "presencePenaltyTip": {
+    "message": "Un valor más alto penaliza las palabras clave que no aparecen en el texto.",
+    "description": "Consejo para seleccionar una penalización de presencia."
+  },
+  "topkTip": {
+    "message": "Un valor más alto da como resultado una mayor diversidad de palabras clave.",
+    "description": "Consejo para seleccionar un valor topK."
+  },
+  "toppTip": {
+    "message": "Un valor más alto da como resultado una mayor diversidad de palabras clave.",
+    "description": "Consejo para seleccionar un valor topP."
+  },
+  "maxTokensTip": {
+    "message": "El número máximo de tokens en el resumen.",
+    "description": "Consejo para seleccionar el número máximo de tokens."
   }
+
 }

_locales/fr/messages.json

@@ -140,5 +140,39 @@
   "errorTopkTopp": {
     "message": "top_k et top_p ne peuvent pas être définis en même temps.",
     "description": "Message d'erreur pour top_k et top_p."
+  },
+  "apiKeyTip": {
+    "message": "Vous pouvez obtenir tu clé API Perplexity sur ton compte Perplexity AI.",
+    "description": "Conseil pour obtenir une clé API."
+  },
+  "modelTip": {
+    "message": "Le modèle à utiliser pour générer le résumé.",
+    "description": "Conseil pour le modèle."
+  },
+  "temperatureTip": {
+    "message": "La température à utiliser pour générer le résumé.",
+    "description": "Conseil pour la température."
+  },
+  "frequencyPenaltyTip": {
+    "message": "La fréquence des mots-clés à utiliser pour générer le résumé.",
+    "description": "Conseil pour la fréquence des mots-clés."
+  },
+  "presencePenaltyTip": {
+    "message": "La présence des mots-clés à utiliser pour générer le résumé.",
+    "description": "Conseil pour la présence des mots-clés."
+  },
+  "topkTip": {
+    "message": "Le nombre de mots-clés à utiliser pour générer le résumé.",
+    "description": "Conseil pour le nombre de mots-clés."
+  },
+  "toppTip": {
+    "message": "La probabilité cumulative des mots-clés à utiliser pour générer le résumé.",
+    "description": "Conseil pour la probabilité cumulative des mots-clés."
+  },
+  "maxTokensTip": {
+    "message": "Le nombre maximum de jetons à générer pour le résumé.",
+    "description": "Conseil pour le nombre maximum de jetons."
   }
+
+
 }

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_extensionName__",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "__MSG_extensionDescription__",
   "default_locale": "en",
   "homepage_url": "https://github.com/imigueldiaz/firefox-quick-abstract",

popup/extension.html

@@ -53,7 +53,9 @@
           <fieldset role="group" aria-labelledby="api-settings">
             <legend id="api-settings"></legend>
             <label for="apiKey" id="apiKeyLabel"></label>
-            <input type="password" id="apiKey" name="apiKey" value="pplx-xxxxxxxxxxx" aria-required="true"><br>
+
+            <input type="password" id="apiKey" name="apiKey" value="pplx-xxxxxxxxxxx" aria-required="true">
+            <span class="help-icon" data-tooltip-i18n="apiKeyTip">?</span><br>
             <label for="model" id="modelLabel"></label>
             <select id="model" name="model" aria-required="true">
               <optgroup label="Perplexity Models">
@@ -67,36 +69,43 @@
                 <option value="mistral-7b-instruct">mistral-7b-instruct (7B)</option>
                 <option value="mixtral-8x7b-instruct">mixtral-8x7b-instruct (8x7B)</option>
               </optgroup>
-            </select>
+            </select><span class="help-icon" data-tooltip-i18n="modelTip">?</span>
 
             <div class="input-row">
               <div class="input-group">
                 <label for="temperature" id="tempLabel"></label>
                 <input type="number" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="true">
+                <span class="help-icon" data-tooltip-i18n="temperatureTip">?</span>
+
               </div>
               <div class="input-group">
                 <label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
                 <input type="number" id="maxTokens" name="maxTokens" value="" step="1" min="1" max="2048" aria-required="true">
+                <span class="help-icon" data-tooltip-i18n="maxTokensTip">?</span>
               </div>
             </div>
             <div class="input-row">
               <div class="input-group">
                 <label for="topP" id="topPLabel">Top-p</label>
                 <input type="number" id="topP" name="topP" value="" step="0.01" min="0" max="1" aria-required="true">
+                <span class="help-icon" data-tooltip-i18n="toppTip">?</span>
               </div>
               <div class="input-group">
                 <label for="topK" id="topKLabel">Top-k</label>
                 <input type="number" id="topK" name="topK" value="" step="1" min="1" max="2048" aria-required="true">
+                <span class="help-icon" data-tooltip-i18n="topkTip">?</span>
               </div>
             </div>
             <div class="input-row">
               <div class="input-group">
                 <label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
                 <input type="number" id="frequencyPenalty" name="frequencyPenalty" value="" step="0.1" min="-2" max="2" aria-required="true">
+                <span class="help-icon" data-tooltip-i18n="frequencyPenaltyTip">?</span>
               </div>
               <div class="input-group">
                 <label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
                 <input type="number" id="presencePenalty" name="presencePenalty" value="" step="0.1" min="0" max="2" aria-required="true">
+                <span class="help-icon" data-tooltip-i18n="presencePenaltyTip">?</span>
               </div>
             </div>
             <div class="button-row">

popup/popup.js

@@ -386,7 +386,7 @@ async function copyToClipboard(text) {
   }
 }
 
-
+// Load the initial text in the popup
 function loadInitialText() {
   let initialText = browser.i18n.getMessage('initialText');
 
@@ -411,6 +411,14 @@ document.getElementById('resume').addEventListener('click', triggerAPI);
 // Add event listeners to the tabs to load the initial text.
 document.querySelector("#popupTab").addEventListener("click", loadInitialText);
 
+// Loop the help icons and set the tooltip text
+document.querySelectorAll('.help-icon').forEach(icon => {
+  const tooltipKey = icon.getAttribute('data-tooltip-i18n');
+  const tooltipMessage = browser.i18n.getMessage(tooltipKey);
+  icon.setAttribute('data-tooltip', tooltipMessage);
+});
+
+
 // Add an event listener to the popup's elements.
 document.addEventListener("DOMContentLoaded", function() { 
   // Set the focus on the resume button

style/style.css

@@ -9,7 +9,7 @@ body {
   height: 620px;
   display: flex;
   flex-direction: column;
-  overflow-y: hidden;
+  overflow: hidden;
 }
 body#popup {
   padding: 5px;
@@ -116,7 +116,7 @@ button.ok:hover {
 #options-form input[type="text"],
 #options-form input[type="number"],
 #options-form input[type="password"] {
-  width: 90%;
+  width: 80%;
   padding: 8px;
   margin-bottom: 8px;
   background-color: #FFFFFF;
@@ -127,6 +127,10 @@ button.ok:hover {
   font-size: 13px;
 }
 
+#apiKey {
+  width: 90%!important;
+}
+
 #options-form select {
   width: 100%;
   padding: 8px;
@@ -345,6 +349,50 @@ img#logo {
   }
 }
 
+.help-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: #007AFF;
+  color: #FFFFFF;
+  font-size: 12px;
+  font-weight: bold;
+  margin-left: 2px;
+  cursor: help;
+  position: relative;
+}
+
+.help-icon::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-95%);
+  padding: 8px;
+  background-color: #2C2C2E;
+  color: #F2F2F7;
+  border-radius: 8px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.8s ease-in-out;
+  z-index: 1;
+  width: 200px;
+  border : 1px solid #4a4a4a;
+  box-shadow: 0 0 10px 0 #4a4a4a
+
+
+}
+
+.help-icon:hover::before {
+  opacity: 1;
+  visibility: visible;
+}
+
 /* Dark Mode */
 
 @media (prefers-color-scheme: dark) {
@@ -446,5 +494,13 @@ img#logo {
     background-color: #2c2c2e;
     border-bottom: 1px solid #007AFF55;
 
+  }
+    .help-icon {
+    background-color: #4A90E2;
+  }
+
+  .help-icon::before {
+    background-color: #1C1C1E;
+    color: #F2F2F7;
   }
 }