added default LLM in extension settings

Author: code-forge-temple

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "scribe-pal",
-    "version": "1.4.3",
+    "version": "1.5.0",
     "description": "ScribePal is an intelligent browser extension that leverages AI to empower your web experience.",
     "author": "Code Forge Temple",
     "type": "module",

package.json

@@ -19,4 +19,5 @@ export const MESSAGE_TYPES = {
     DELETE_MODEL: "deleteModel",
     TOGGLE_CHAT_VISIBILITY: "toggleChatVisibility",
     CAPTURE_VISIBLE_TAB: "captureVisibleTab",
+    ACTION_DEFAULT_LLM_UPDATED: "actionDefaultLlmUpdated",
 } as const;

src/common/constants.ts

@@ -24,6 +24,12 @@
             <input type="text" id="keyboard-shortcut" disabled>
             <button id="save-keyboard-shortcut">Update...</button>
         </div>
+        <div class="menu-item input-with-button">
+            <label for="default-llm">Default LLM:</label>
+            <select id="default-llm">
+            </select>
+            <button id="save-default-llm">Save</button>
+        </div>
     </div>
     <ul class="list-group">
         <li id="showChat" class="menu-item list-group-item">

src/popup/popup.html

@@ -54,7 +54,7 @@ $menu-item-border-bottom: 1px;
     transform: rotate(180deg);
 }
 
-$extra-settings-items: 1; // TODO: if we add more settings, we need to update this value
+$extra-settings-items: 2; // TODO: if we add more settings, we need to update this value
 
 .extra-settings {
     overflow: hidden;
@@ -84,13 +84,23 @@ $extra-settings-items: 1; // TODO: if we add more settings, we need to update th
         min-width: 110px;
     }
 
-    input[type="text"] {
+    input[type="text"], select {
         flex-grow: 1;
         padding: 5px;
         border: 1px solid #ccc;
         border-radius: 4px 0 0 4px;
     }
 
+    select {
+        cursor: pointer;
+        width: auto;
+        padding: 4px 0px 4px 0px;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     button {
         padding: 6px 10px;
         background: #0078d7;
@@ -118,7 +128,7 @@ $extra-settings-items: 1; // TODO: if we add more settings, we need to update th
     .input-with-button {
         border-color: vars.$dark-theme-secondary-color;
 
-        input {
+        input, select {
             background: vars.$dark-theme-secondary-color;
             color: white;
             border-color: vars.$dark-theme-secondary-color !important;

src/popup/popup.scss

@@ -7,6 +7,7 @@
 
 import {browser} from "../common/browser";
 import {MESSAGE_TYPES} from "../common/constants";
+import {Model} from "../tab/utils/types";
 import "./popup.scss";
 
 
@@ -25,8 +26,8 @@ document.addEventListener("DOMContentLoaded", () => {
     const extraSettings = document.querySelector(".extra-settings");
 
     if (toggleBtn && extraSettings) {
-        toggleBtn.addEventListener("click", () => {
-            extraSettings.classList.toggle("collapsed");
+        toggleBtn.addEventListener("click", async () => {
+            const extraSettingsCollapsed = extraSettings.classList.toggle("collapsed");
             toggleBtn.classList.toggle("rotated");
 
             /* For Firefox */
@@ -36,6 +37,40 @@ document.addEventListener("DOMContentLoaded", () => {
                 document.documentElement.style.height = `${document.body.scrollHeight}px`;
             }, 500);
             /***************/
+
+            if(!extraSettingsCollapsed) {
+                const response = await browser.runtime.sendMessage({type: MESSAGE_TYPES.FETCH_MODELS});
+
+                if (response && response.models) {
+                    const {defaultLlm} = await browser.storage.local.get("defaultLlm");
+                    const defaultLlmSelect = document.getElementById("default-llm") as HTMLSelectElement;
+                    const models: Model[] = response.models;
+                    const defaultLlmOptions = models.map((model: Model) => {
+                        const option = document.createElement("option");
+
+                        option.value = model.name;
+                        option.textContent = model.name;
+
+                        if (defaultLlm && model.name === defaultLlm) {
+                            option.selected = true;
+                        }
+
+                        return option;
+                    });
+                    const defaultLlmLabel = document.createElement("option");
+
+                    defaultLlmLabel.value = "";
+                    defaultLlmLabel.textContent = "Select a model...";
+
+                    if(!defaultLlm) {
+                        defaultLlmLabel.selected = true;
+                    }
+
+                    defaultLlmSelect.innerHTML = "";
+                    defaultLlmSelect.append(defaultLlmLabel);
+                    defaultLlmSelect.append(...defaultLlmOptions);
+                }
+            }
         });
     }
 
@@ -128,6 +163,18 @@ document.getElementById("showChat")?.addEventListener("click", () => {
     });
 });
 
+document.getElementById("save-default-llm")?.addEventListener("click", () => {
+    const selectedLlm = (document.getElementById("default-llm") as HTMLSelectElement).value;
+
+    browser.storage.local.set({defaultLlm: selectedLlm}, () => {
+        showNotification("Saved", "Default LLM saved!");
+
+        browser.runtime.sendMessage({
+            type: MESSAGE_TYPES.ACTION_DEFAULT_LLM_UPDATED
+        });
+    });
+});
+
 document.getElementById("save-keyboard-shortcut")?.addEventListener("click", async () => {
     try {
         const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

src/popup/popup.ts

@@ -5,15 +5,16 @@
  *    See the LICENSE file in the project root for more information.    *
  ************************************************************************/
 
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Model} from '../../../../utils/types';
 import {EXTENSION_NAME, MESSAGE_TYPES} from '../../../../../common/constants';
 import {RichTextModal} from '../RichTextModal';
 import DeleteModelSvg from '../../../../assets/bin-full.svg';
 import {Tooltip} from '../Tooltip/Tooltip';
-import {polyfillRuntimeConnect} from '../../../../privilegedAPIs/privilegedAPIs';
+import {polyfillRuntimeConnect, polyfillStorageLocalGet} from '../../../../privilegedAPIs/privilegedAPIs';
 import styles from "./ChatHeader.scss?inline";
 import {withShadowStyles} from '../../../../utils/withShadowStyles';
+import {browser} from '../../../../../common/browser';
 
 
 type ChatHeaderProps = {
@@ -83,6 +84,32 @@ export const ChatHeader = withShadowStyles(({
         });
     }
 
+    useEffect(() => {
+        const updateDefaultLlm = () => {
+            if (!selectedModel) {
+                polyfillStorageLocalGet("defaultLlm").then((result: { defaultLlm: string }) => {
+                    if (result.defaultLlm) {
+                        onModelSelect(result.defaultLlm);
+                    }
+                });
+            }
+        };
+
+        const listener = (message: any) => {
+            if (message.type === MESSAGE_TYPES.ACTION_DEFAULT_LLM_UPDATED) {
+                updateDefaultLlm();
+            }
+        };
+
+        browser.runtime.onMessage.addListener(listener);
+
+        updateDefaultLlm();
+
+        return () => {
+            browser.runtime.onMessage.removeListener(listener);
+        };
+    }, [onModelSelect, selectedModel]);
+
     return (
         <>
             <div className="chat-box-header">
@@ -112,7 +139,7 @@ export const ChatHeader = withShadowStyles(({
                         }}
                         onMouseDown={(e) => e.stopPropagation()}
                     >
-                        <option value="">Select a model...</option>
+                        <option value="" disabled>Select a model...</option>
                         {models.map((model: Model, index: number) => (
                             <option key={index} value={model.name}>
                                 {model.name}

src/tab/components/ChatBox/components/ChatHeader/ChatHeader.tsx

@@ -43,10 +43,11 @@ browser.runtime.onMessage.addListener((
             break;
 
         case MESSAGE_TYPES.ACTION_UPDATE_THEME:
+        case MESSAGE_TYPES.ACTION_DEFAULT_LLM_UPDATED:
             (async () => {
                 const [{id: tabId}] = await browser.tabs.query({currentWindow: true, active: true});
 
-                browser.tabs.sendMessage(tabId, {type: MESSAGE_TYPES.ACTION_UPDATE_THEME});
+                browser.tabs.sendMessage(tabId, {type: request.type});
             })();
 
             break;