- add gpt-4-turbo support

jessedi0n · Apr 10, 2024 · e517c6e · e517c6e
1 parent b1e0fce
commit e517c6e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/background.js b/background.js
@@ -4,7 +4,7 @@ let chatHistory;
 // Listen for when the extension is installed
 chrome.runtime.onInstalled.addListener(function () {
     // Set default API model
-    let defaultModel = "gpt-3.5-turbo-1106";
+    let defaultModel = "gpt-4-turbo";
     chrome.storage.local.set({ apiModel: defaultModel });
 
     // Set empty chat history

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "OpenAI ChatGPT Chrome Extension",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "description": "Have a seamless ChatGPT experience or generate stunning images, all without ever having to leave your favorite website.",
     "default_locale": "en",
     "icons": {

diff --git a/popup/popup.html b/popup/popup.html
@@ -14,9 +14,10 @@
                 <span id="model-dropdown-btn-text"></span>
             </button>
             <div id="model-dropdown-content">
-                <a id="gpt-3.5-turbo-1106" class="model-dropdown-btn">GPT-3.5-Turbo (fastest)</a>
-                <a id="gpt-4" class="model-dropdown-btn">GPT-4 (cleverest)</a>
-                <a id="dall-e-3" class="model-dropdown-btn">DALL-E 3 (images)</a>
+                <a id="gpt-3.5-turbo" class="model-dropdown-btn">GPT-3.5-Turbo</a>
+                <a id="gpt-4" class="model-dropdown-btn">GPT-4</a>
+                <a id="gpt-4-turbo" class="model-dropdown-btn">GPT-4-Turbo</a>
+                <a id="dall-e-3" class="model-dropdown-btn">DALL-E 3</a>
             </div>
         </div>
         <div id="action-btn-container">

diff --git a/popup/popup.js b/popup/popup.js
@@ -76,9 +76,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Listen for messages from the background script
     chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
-        if (message.answer) {
+        if (message.answer || message.imageUrl) {
             // Display the assistant's response
-            displayMessage('assistant', message.answer);
+            displayMessage('assistant', message.answer || message.imageUrl);
         } else if (message.error) {
             // Display the error message
             displayMessage('system', message.error);
@@ -163,28 +163,11 @@ document.addEventListener('DOMContentLoaded', function () {
             }
 
         } else { // if it's not an image, it's a text message
-            // Check if the message contains code blocks
-            content = content.replace(/```(\w+)([\s\S]*?)```/g, function (match, lang, code) {
-                // Create a code element
-                var codeElement = document.createElement('code');
-                // remove the first line break from the code
-                code = code.replace(/^\n/, '');
-                //
-                codeElement.innerText = code;
-
-                // Create a container for the code element
-                var codeContainer = document.createElement('div');
-                codeContainer.appendChild(codeElement);
-
-                // Set the class of the container based on the language (optional)
-                codeContainer.className = 'code-block';
-
-                // Return the HTML content with the replaced code
-                return codeContainer.outerHTML;
-            });
+            // format the message content
+            content = formatMessageContent(content);
 
-            // Append the replaced content to the message container
-            messageElement.innerText = content;
+            // add the message content to the message element
+            messageElement.innerHTML = content;
 
             // add a copy button to the message if it's from the assistant
             if (role === 'assistant') {
@@ -234,6 +217,28 @@ document.addEventListener('DOMContentLoaded', function () {
         messageElement.scrollIntoView();
     }
 
+    function formatMessageContent(text) {
+        return text.replace(/```(\w+)([\s\S]*?)```/g, function (match, lang, code) {
+            // Create a code element
+            var codeElement = document.createElement('code');
+            // remove the first line break from the code
+            code = code.replace(/^\n/, '');
+
+            // Add the code to the code element
+            codeElement.innerText = code;
+
+            // Create a container for the code element
+            var codeContainer = document.createElement('div');
+            codeContainer.appendChild(codeElement);
+
+            // Set the class of the container based on the language (optional)
+            codeContainer.className = 'code-block';
+
+            // Return the HTML content with the replaced code
+            return codeContainer.outerHTML;
+        });
+    }
+
     // Function to display an array of messages
     function displayMessages(messages) {
         for (const message of messages) {
@@ -316,6 +321,7 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 
+    // Function to set the active model in the dropdown
     function setActiveModel(model) {
         // add active class to the button and remove it from the other buttons
         dropdownButtons.forEach(function (button) {
@@ -333,4 +339,4 @@ document.addEventListener('DOMContentLoaded', function () {
             setActiveModel(result.apiModel);
         }
     });
-});
+});