feature(#195): implement setting page

Extension/src/pages/Background/index.js

@@ -8,10 +8,21 @@ chrome.runtime.onInstalled.addListener(function() {
 });
 
 // Handle the context menu item click
-chrome.contextMenus.onClicked.addListener(function(info, tab) {
+chrome.contextMenus.onClicked.addListener(function(info) {
     if (info.menuItemId === 'risingExtension') {
         chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, { action: "open-modal" });
         });
     }
+});
+
+// Handle the local storage get value
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.method === 'getLocalStorage') {
+        chrome.storage.local.get(function(result) {
+            console.log('background result--------->', result)
+            sendResponse({ data: result });
+        });
+    }
+    return true; // Important for asynchronous sendMessage
 });

Extension/src/pages/Panel/Panel.css

@@ -4,8 +4,8 @@
 }
 
 [data-theme='dark'] {
-  --font-color: #aeafb2;
-  --theme-color: #0d0c0d;
+  --font-color: #e3e3e3;
+  --theme-color: #141414;
 }
 
 .main-layout {

Extension/src/pages/Panel/Panel.jsx

@@ -27,17 +27,7 @@ const URL_ASK_WEBSITE = URL_BASE + 'browser/ask'
 const URL_DELETE_RTD = URL_BASE + 'auto_task/delete'
 
 let prompt = ""
-const confs = {
-    "openai_key": "",
-    "pinecone_key": "",
-    "pinecone_env": "",
-    "firebase_key": "",
-    "token": "",
-    "uuid": "extension-uuid",
-    "settings": {
-        "temperature": 0.6
-    }
-}
+
 const logoUrl = Browser.runtime.getURL('logo_panel.png')
 
 const Panel = () => {
@@ -45,6 +35,14 @@ const Panel = () => {
     const [messages, setMessages] = useState([]);
     const [isLoading, setLoadingStatus] = useState(false);
     const chat_box = useRef(null);
+    const [confs, setConfs] = useState(null);
+
+    useEffect(() => {
+        // Send a message to background script to get the storage value
+        chrome.runtime.sendMessage({ method: 'getLocalStorage' }, (response) => {
+            setConfs(response.data);
+        });
+    }, []);
    
     const handleQuestionUpdated = (event) => {
         if (event.key === "Enter" && !isLoading) {

Extension/src/pages/Popup/Popup.css

@@ -1,3 +1,72 @@
-.popup {
-    text-align: center;
+[data-theme='light'] {
+    --font-color: #c9d1d9;
+    --theme-color: #333333;
+}
+
+[data-theme='dark'] {
+    --font-color: #e3e3e3;
+    --theme-color: #141414;
+}
+
+.main-layout {
+    display: flex;
+    flex-direction: column;
+    height: 490px; /* Set the height of the layout to be 100% of the viewport */
+    width: 400px;
+    background-color: var(--theme-color);
+    color: var(--font-color);
+}
+
+.header {
+    height: 55px;
+    text-align: left;
+    padding-top: 5px;
+    padding-left: 10px;
+}
+
+.divider {
+    margin: 0;
+    background-color: grey;
+}
+
+.content {
+    padding: 10px;
+}
+
+.footer {
+    padding: 10px;
+    background-color: var(--theme-color);
+    display: flex;
+    justify-content: flex-end;
+    gap: 15px;
+    align-items: center;
+    color: grey;
+}
+
+.custom-input {
+    margin-bottom: 15px;
+    background-color: #202020;
+    color: white;
+}
+
+.ant-input-group-addon {
+    color: var(--font-color) !important;
+    width: 120px !important;
+}
+
+.ant-input {
+    background-color: #202020;
+    color: var(--font-color) !important;
+}
+
+.footer-btn {
+    background-color: inherit;
+    color: var(--font-color);
+    border: 0;
+}
+
+.footer-btn:hover {
+    border: 1px solid white !important;
+    color: var(--font-color) !important;
+    border-radius: 10px !important;
 }

Extension/src/pages/Popup/Popup.jsx

@@ -1,12 +1,127 @@
-import React from 'react';
+import React, {useState} from 'react';import {
+    Divider,
+    Input,
+    Layout,
+    Button
+} from 'antd';
 import './Popup.css';
 
+const {Footer, Content} = Layout;
 const Popup = () => {
+    const [hostName,setHostName] = useState("")
+    const [openaiKey,setOpenaiKey] = useState("")
+    const [pineconeKey,setPineconeKey] = useState("")
+    const [pineconeEnv,setPineconeEnv] = useState("")
+    const [firebaseKey,setFirebaseKey] = useState("")
+    const [token,setToken] = useState("")
+    const [uuid,setUuid] = useState("")
+    const [temperature,setTemperature] = useState(0)
+
+    /// Check if the user's system is in dark mode
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    let isDarkMode = darkModeMediaQuery.matches;
+
+    const handleThemeChange = (e) => {
+        isDarkMode = e.matches;
+    };
+
+    // Listen for changes in the theme data
+    darkModeMediaQuery.addEventListener('change', handleThemeChange);
+
+    const handleSave = () => {
+        chrome.storage.local.set({
+            "host_name": hostName,
+            "openai_key": openaiKey,
+            "pinecone_key": pineconeKey,
+            "pinecone_env": pineconeEnv,
+            "firebase_key": firebaseKey,
+            "token": token,
+            "uuid": uuid,
+            "temperature": temperature
+        }, () => {
+            console.log('Successfully set to local storage')
+        })
+    }
+
+    const handleCancel = () => {
+
+    }
+
     return (
-        <div className="popup">
-            <h1>Rising</h1>
-            <h3>AI Assistance</h3>
-        </div>
+
+        <Layout className="main-layout" data-theme={isDarkMode ? 'dark': 'light'}>
+            <div className="header">
+                <h1>Settings</h1>
+            </div>
+            <Divider className="divider"/>
+            <Content className="content">
+                <Input
+                    name="hostName"
+                    addonBefore="Host Name"
+                    value={hostName}
+                    className="custom-input"
+                    onChange={(e) => setHostName(e.target.value)}
+                />
+                <Input
+                    name="openaiKey"
+                    addonBefore="OpenAI Key"
+                    value={openaiKey}
+                    className="custom-input"
+                    onChange={(e) => setOpenaiKey(e.target.value)}
+                />
+                <Input
+                    name="pineconeKey"
+                    addonBefore="Pinecone Key"
+                    value={pineconeKey}
+                    className="custom-input"
+                    onChange={(e) => setPineconeKey(e.target.value)}
+                />
+                <Input
+                    name="pineconeEnv"
+                    addonBefore="Pinecone Env"
+                    value={pineconeEnv}
+                    className="custom-input"
+                    onChange={(e) => setPineconeEnv(e.target.value)}
+                />
+                <Input
+                    name="firebaseKey"
+                    addonBefore="Firebase Key"
+                    value={firebaseKey}
+                    className="custom-input"
+                    onChange={(e) => setFirebaseKey(e.target.value)}
+                />
+                <Input
+                    name="token"
+                    addonBefore="Token"
+                    value={token}
+                    className="custom-input"
+                    onChange={(e) => setToken(e.target.value)}
+                />
+                <Input
+                    name="uuid"
+                    addonBefore="UUID"
+                    value={uuid}
+                    className="custom-input"
+                    onChange={(e) => setUuid(e.target.value)}
+                />
+                <Input
+                    name="temperature"
+                    addonBefore="Temperature"
+                    type="number"
+                    value={temperature}
+                    step="0.1"
+                    min="0"
+                    max="1"
+                    className="custom-input"
+                    onChange={(e) => setTemperature(e.target.value)}
+                />
+            </Content>
+            <Divider className="divider"/>
+            <Footer className="footer">
+                <Button className="footer-btn" onClick={handleSave}>Save</Button>
+                <Button className="footer-btn" onClick={handleCancel}>Cancel</Button>
+            </Footer>
+        </Layout>
     );
 };
 

Extension/src/pages/Popup/index.css

@@ -1,17 +1,3 @@
 body {
-  width: 200px;
-  height: 100px;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  position: relative;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    margin: 0;
 }