Merge pull request #11 from minhhungit/Feature/EmptyChat

- Allow configuration of both OpenAI and Groq API, with the ability t…
minhhungit · Jul 23, 2024 · 1c30b55 · 1c30b55
2 parents 444114d + a7f604e
commit 1c30b55
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 83 deletions.
diff --git a/background.js b/background.js
@@ -5,7 +5,6 @@ function clearTabStorage(tabId){
   chrome.storage.local.set(obj);
 }
 
-
 function setTabItems(tabId, items, cb){
   let tabIdKey = `store_tab_${tabId}`;
 
@@ -84,12 +83,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       messages: list all current messages of all roles, include system, user, assistant 
     }
     */
-    chrome.storage.sync.get(['apiUrl', 'apiKey', 'modelName', 'temperature', 'maxToken'], (items) => {
-      const apiUrl = items.apiUrl;
-      const apiKey = items.apiKey;
-      const modelName = items.modelName;
-      const temperature = items.temperature || 0;
-      const maxToken = items.maxToken || 4096;
+    chrome.storage.sync.get([
+      'completionProvider',
+      'groqApiUrl', 'groqApiKey', 'groqModelName', 'groqTemperature', 'groqMaxToken', 
+      'openAiApiUrl', 'openAiApiKey', 'openAiModelName', 'openAiTemperature', 'openAiMaxToken'
+    ], (items) => {
+      const completionProvider = items.completionProvider || 'groq';
+
+      const apiUrl = completionProvider == "groq" ? items.groqApiUrl : items.openAiApiUrl;
+      const apiKey = completionProvider == "groq" ? items.groqApiKey :items.openAiApiKey;
+      const modelName = completionProvider == "groq" ? items.groqModelName : items.openAiModelName;
+      const temperature = completionProvider == "groq" ? (items.groqTemperature || 0) : (items.openAiTemperature || 0);
+      const maxToken = completionProvider == "groq" ? (items.groqMaxToken || 8192) : (items.openAiMaxToken || 4096);
 
       if (!apiUrl || !apiKey || !modelName) {
         //console.error("API URL or API Key or Model Name not configured.");
@@ -190,8 +195,10 @@ YÊU CẦU KHI DỊCH:
 - Nếu không có yêu cầu đặc biệt, hãy trả lời bằng ngôn ngữ của câu hỏi mà bạn nhận được
 - Câu trả lời phải là định dạng Markdown
 - Chỉ trả lời kết quả, đừng thêm những câu ở đầu như: 'Here is the translation:', 'Here is the translated content:'...."
+`
+
+/*
 - Chỉ dịch và không tự ý thêm thông tin gì, nhưng nên có 1 bảng tóm tắt giải thích các từ vựng, loại từ, phiên âm IPA UK/US ở dưới cùng cùng với tên chuyên ngành. 
-- Nếu được yêu cầu dịch từ hoặc văn bản, câu trả lời của bạn nên có 2 phần:
 
 ### Kết quả dịch
 - Hiển thị cả bản gốc và bản dịch (nếu câu cần dịch quá dài thì chỉ hiển thị bản dịch)
@@ -224,7 +231,8 @@ YÊU CẦU KHI DỊCH:
 **Ghi chú văn hóa và sử dụng đặc biệt:**
 - Ghi chú văn hóa: Giải thích các khác biệt văn hóa hoặc các cách sử dụng đặc biệt của từ trong các ngữ cảnh khác nhau.
 - Phong cách sử dụng: Chỉ rõ xem từ đó là trang trọng, thân mật, chuyên ngành hay thông dụng.
-`
+*/
+
               });
 
               requestObj.messages.push({
@@ -265,27 +273,23 @@ ${request.selectionText}`
             requestObj.messages.push({
               role: "user",
               content: `Bạn sẽ đóng vai là một chuyên gia về ngôn ngữ, có hiểu biết sâu sắc văn hóa bản địa, đặc biệt là tiếng Anh và tiếng Việt, bạn sẽ giúp sửa lỗi tiếng Anh.
-              - Câu trả lời phải là định dạng markdown
-              - Đừng đưa ra những câu "introduce prompt words or opening remarks" trong câu trả lời. Hãy đi thẳng vào câu trả lời. Đừng lan man, dài dòng.
-              - Nếu không có yêu cầu đặc biệt, hãy trả lời bằng ngôn ngữ của câu hỏi mà bạn nhận được
-              - Khi sửa lỗi, câu trả lời của bạn nên có 2 phần:
-### Câu đúng
+- Câu trả lời phải là định dạng markdown
+- Đừng đưa ra những câu "introduce prompt words or opening remarks" trong câu trả lời. Hãy đi thẳng vào câu trả lời. Đừng lan man, dài dòng.
+- Nếu không có yêu cầu đặc biệt, hãy trả lời bằng ngôn ngữ của câu hỏi mà bạn nhận được
 - Từ hoặc câu văn sau khi đã sửa chính xác (ngôn ngữ của câu đã sửa là ngôn ngữ của câu được yêu cầu sửa), ví dụ, bạn được yêu cầu sửa 1 câu tiếng Anh, thì bạn phải trả lời lại 1 câu tiếng Anh đã sửa hoàn chỉnh.
 - markdown format, bôi đậm những chỗ đã sửa để highlight, phần giải thích nên được tổ chức tốt, dễ đọc, có outline...
-- Nếu câu văn không có lỗi gì, thì chỉ cần nói là không có lỗi, đừng cố bịa ra câu trả lời.
-- Tách bạch của đã sửa với những thông tin phụ để tăng tính nhận diện, hỗ trợ cho người học dễ hiểu hơn, trực quan hơn
+- Nếu câu văn không có lỗi gì, thì chỉ cần nói là không có lỗi, đừng cố bịa ra câu trả lời.`});
 
-### Thông tin bổ sung
-**Giải thích lỗi và sửa lỗi:**
-- Mô tả lỗi: Giải thích ngắn gọn lỗi mà người học đã mắc phải (ví dụ: sai ngữ pháp, sai chính tả, sử dụng từ không chính xác, v.v.).
-- Nguyên nhân phổ biến: Cung cấp thông tin về lý do tại sao lỗi này thường xảy ra và làm sao để tránh nó.
-- Cách sửa: Cung cấp giải pháp cụ thể để sửa lỗi.
-- Ví dụ đúng: Cung cấp ví dụ minh họa cách sử dụng đúng.
-
-**Quy tắc ngữ pháp liên quan:**
-- Quy tắc ngữ pháp: Cung cấp quy tắc ngữ pháp liên quan đến lỗi để người học có thể nắm rõ hơn.
-- Ghi chú ngữ pháp: Giải thích chi tiết hơn về các quy tắc ngữ pháp phức tạp nếu cần.`
-            });
+// ### Thông tin bổ sung
+// **Giải thích lỗi và sửa lỗi:**
+// - Mô tả lỗi: Giải thích ngắn gọn lỗi mà người học đã mắc phải (ví dụ: sai ngữ pháp, sai chính tả, sử dụng từ không chính xác, v.v.).
+// - Nguyên nhân phổ biến: Cung cấp thông tin về lý do tại sao lỗi này thường xảy ra và làm sao để tránh nó.
+// - Cách sửa: Cung cấp giải pháp cụ thể để sửa lỗi.
+// - Ví dụ đúng: Cung cấp ví dụ minh họa cách sử dụng đúng.
+
+// **Quy tắc ngữ pháp liên quan:**
+// - Quy tắc ngữ pháp: Cung cấp quy tắc ngữ pháp liên quan đến lỗi để người học có thể nắm rõ hơn.
+// - Ghi chú ngữ pháp: Giải thích chi tiết hơn về các quy tắc ngữ pháp phức tạp nếu cần.
 
             requestObj.messages.push({
               role: "user",
@@ -320,18 +324,20 @@ ${request.selectionText}`
             requestObj.messages.push({
               role: "system",
               content: `You are a knowledgeable and engaging teacher. 
-              Your goal is to educate the user about various topics they might be interested in. 
+              Your goal is to educate the user about various topics they might be interested in.
+              Make sure the content is well-organized and easy to read, with clear main headings and subheadings that provide detailed supplementary information to guide learners through each section, making it easy for them to follow along. 
               Provide clear explanations, examples, and answer any questions the user may have. 
-              Make sure to break down complex concepts into simpler terms and relate them to real-world applications when possible. 
+              Make sure to break down complex concepts into simpler terms and relate them to real-world applications when possible.               
               Be patient, encouraging, and responsive to the user's level of understanding. 
               Adapt your teaching style based on the user's feedback and engagement. 
               Always strive to make learning enjoyable and accessible.
+              IMPORTANT: Be honest, don't make things up.
               IMPORTANT: You must always answer in Vietnamese, unless otherwise is requested.`
             });
 
             requestObj.messages.push({
               role: "user",
-              content: `OK, please teach me this (always answer me in Vietnamese please):\n
+              content: `OK, please teach me this (always answer me in Vietnamese please from now):\n
 ${request.selectionText}`
             });
           }else{
@@ -507,25 +513,26 @@ chrome.contextMenus.onClicked.addListener((info, tab) => {
 
     //reset chat message
     setTabItems(tab.id, {
-      chatMessages: []
+      chatMessages: [],
+      lastSelectedCommand: info.menuItemId
     }, ()=>{
-
+      // Send the message to the content script 
+      chrome.tabs.sendMessage(tab.id, { 
+        type: info.menuItemId, 
+        selectionText: info.selectionText,
+        isNewChat: true
+      }, (response) => { 
+        // Handle the response from background.js (via content.js)
+        // if (response.error) {
+        //   console.error(response.error);
+        //   alert("An error occurred: " + response.error); 
+        // } else {
+        //   alert(response.result);
+        // }
+      });
     });
 
-    // Send the message to the content script 
-    chrome.tabs.sendMessage(tab.id, { 
-      type: info.menuItemId, 
-      selectionText: info.selectionText,
-      isNewChat: true
-    }, (response) => { 
-      // Handle the response from background.js (via content.js)
-      // if (response.error) {
-      //   console.error(response.error);
-      //   alert("An error occurred: " + response.error); 
-      // } else {
-      //   alert(response.result);
-      // }
-    });
+
 
     // clearTabStorage(tab.id);
 

diff --git a/content.js b/content.js
@@ -99,8 +99,13 @@ const playAudio = (audioUrl) => {
       document.body.appendChild(modal);
     }
 
-    if (request.isNewChat){
+    chrome.runtime.sendMessage({ type: 'getTabItems', itemNames: ['lastSelectedCommand', 'chatMessages'] }, (storageResponse) => {
+      const lastSelectedCommand = storageResponse.lastSelectedCommand;
+      modal.shadowRoot.querySelector('.title-sub').innerText = `[${lastSelectedCommand}]`;
+    })
 
+    if (request.isNewChat){
+      clearAllMessagesHtml();
     }
 
     // Show the modal
@@ -299,6 +304,11 @@ function addMessageIntoModal(request, role, rawMessage, hideDefaultMessage, isEr
     document.body.appendChild(modal);
   }
 
+  chrome.runtime.sendMessage({ type: 'getTabItems', itemNames: ['lastSelectedCommand', 'chatMessages'] }, (storageResponse) => {
+    const lastSelectedCommand = storageResponse.lastSelectedCommand;
+    modal.shadowRoot.querySelector('.title-sub').innerText = `[${lastSelectedCommand}]`;
+  })
+
   // Convert Markdown to HTML
   //const converter = new showdown.Converter(); 
   // var converter = new showdown.Converter({extensions: ['table', 'youtube', 'prettify']});
@@ -484,8 +494,14 @@ function addMessageIntoModal(request, role, rawMessage, hideDefaultMessage, isEr
 
     if (actionEditButton.innerText == "Edit"){
 
+      selectedMessageElm.classList.add("edit-chat-message");
+
        // Create a new input textbox element
       let inputTextbox = document.createElement('textarea');
+      inputTextbox.addEventListener("keydown", function (event) {
+        event.stopPropagation();
+      });
+
       inputTextbox.placeholder = "Type your message here...";
       inputTextbox.rows = 4;
       inputTextbox.style.width = '100%';
@@ -510,6 +526,7 @@ function addMessageIntoModal(request, role, rawMessage, hideDefaultMessage, isEr
       }      
     }
     else{
+      selectedMessageElm.classList.remove("edit-chat-message");
       marked.setOptions({
           breaks: true // Enable GFM line breaks
       });
@@ -981,6 +998,10 @@ function createModal(request) {
       font-family: monospace;
       font-size: 14px;
     }
+
+    .chat-message.edit-chat-message{
+      width: 70% !important;
+    }
   
     .message-actions {
       position: absolute;
@@ -1055,6 +1076,11 @@ function createModal(request) {
       margin: 0;
     }
   
+    .dialog-head .title .title-sub{
+      font-size: 0.7em;
+      color: #35dbba;
+    }
+
     .dialog-footer{
       height: 10px;
       background-color: #eee;
@@ -1116,14 +1142,19 @@ function createModal(request) {
     </style>
     <div class="modal-container">
       <div class="dialog-head">
-        <h3 class="title">AI Chatbot</h3>
+        <h3 class="title">AI Chatbot <span class="title-sub"></span></h3>
         <div class="caption-bar-actions">
           <button class="caption-bar-action-button print-chat-button" title="Print">🖶 Print</button>
           <button class="caption-bar-action-button minimize-dialog-button" title="Minimize">⇘</button>
           <button class="caption-bar-action-button close-dialog-button" title="Close">⤫</button>
         </div>
       </div>
       <div class="chat-messages"></div>
+      <div class="parameters" style="display: none">
+        <div>
+          <label for="chat-temperature">Temperature (0.0 - 2.0):</label> <input type="number" id="chat-temperature" min="0" max="2" step="0.1">
+        </div>
+      </div>
       <div class="chat-input-container">
         <textarea class="chat-input" rows="4" placeholder="Type your message here..."></textarea>
         <button class="send-button">Send</button>
@@ -1133,6 +1164,26 @@ function createModal(request) {
     <button class="maximize-dialog-button hide">AI Chatbot</button>
   `;
 
+  //console.log(modal.shadowRoot.querySelector('.title-sub'));
+
+  // chrome.storage.sync.get([
+  //   'completionProvider',
+  //   'groqTemperature',
+  //   'openAiTemperature',
+  //   'lastSelectedCommand'
+  // ], (items) => {
+  //   //const completionProvider = items.completionProvider || 'groq';
+  //   //const temperature = completionProvider == "groq" ? (items.groqTemperature || 0) : (items.openAiTemperature || 0);
+
+
+  //   modal.shadowRoot.querySelector('.title-sub').innerText = `[${lastSelectedCommand}]`;
+  //   //modal.shadowRoot.querySelector('#chat-temperature').innerText = `[${temperature}]`;
+
+  //   //chrome.runtime.sendMessage({ type: 'setTabItems', itemNames: {chatTemperature: temperature, chatProvider: completionProvider} }, (res) => {});    
+  // });
+
+
+
   // Function to load html2canvas script
 
   function loadHtml2Canvas() {
@@ -1193,7 +1244,7 @@ function createModal(request) {
       maximizeButton.classList.remove('hide');
   });
 
-  shadow.querySelector('.print-chat-button').addEventListener('click', () => {
+  shadow.querySelector('.print-chat-button').addEventListener('click', (e) => {
     printChat(shadow.querySelector('.chat-messages'));
 
     //loadHtml2Canvas();
@@ -1319,9 +1370,11 @@ function makeDraggable(elmnt, headElmt) {
     elmnt.onmousedown = dragMouseDown;
   }
 
-  function dragMouseDown(e) {
+  function dragMouseDown(e) {    
     e = e || window.event;
     e.preventDefault();
+    e.stopPropagation();
+
     // get the mouse cursor position at startup:
     pos3 = e.clientX;
     pos4 = e.clientY;
@@ -1333,6 +1386,8 @@ function makeDraggable(elmnt, headElmt) {
   function elementDrag(e) {
     e = e || window.event;
     e.preventDefault();
+    e.stopPropagation();
+
     // calculate the new cursor position:
     pos1 = pos3 - e.clientX;
     pos2 = pos4 - e.clientY;

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "Web Summarizer & Translator",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "Summarize and translate web pages and selected text.",
     "permissions": [
       "storage",