feature(#195): implement setting page

Extension/src/pages/Background/index.js

@@ -20,7 +20,6 @@ chrome.contextMenus.onClicked.addListener(function(info) {
 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 });
         });
     }

Extension/src/pages/Panel/Panel.jsx

@@ -20,11 +20,6 @@ import {
 } from '@ant-design/icons'
 
 const {Footer, Content} = Layout;
-const URL_BASE = 'https://ttt246-brain.hf.space/'
-const URL_SEND_NOTIFICATION = URL_BASE + 'sendNotification'
-const URL_BROWSER_ITEM = URL_BASE + 'browser/item'
-const URL_ASK_WEBSITE = URL_BASE + 'browser/ask'
-const URL_DELETE_RTD = URL_BASE + 'auto_task/delete'
 
 let prompt = ""
 
@@ -35,12 +30,24 @@ const Panel = () => {
     const [messages, setMessages] = useState([]);
     const [isLoading, setLoadingStatus] = useState(false);
     const chat_box = useRef(null);
-    const [confs, setConfs] = useState(null);
+    const [confs, setConfs] = useState({});
+    const [hostname, setHostname] = useState("")
 
     useEffect(() => {
         // Send a message to background script to get the storage value
         chrome.runtime.sendMessage({ method: 'getLocalStorage' }, (response) => {
-            setConfs(response.data);
+            setHostname(response.data.host_name)
+            setConfs({
+                openai_key: response.data.openai_key,
+                pinecone_key: response.data.pinecone_key,
+                pinecone_env: response.data.pinecone_env,
+                firebase_key: response.data.firebase_key,
+                token: response.data.token,
+                uuid: response.data.uuid,
+                settings: {
+                    temperature: response.data.temperature
+                }
+            });
         });
     }, []);
    
@@ -101,7 +108,7 @@ const Panel = () => {
         }
         setQuestion("")
 
-        sendRequest(params, URL_SEND_NOTIFICATION).then(data => {            
+        sendRequest(params, `${hostname}/sendNotification`).then(data => {
             if (data.result === undefined || data.result == null) {
                 return
             }
@@ -192,7 +199,7 @@ const Panel = () => {
             "prompt": prompt,
             "items": scrapeATags()
         }
-        sendRequest(params, URL_BROWSER_ITEM).then(data => {
+        sendRequest(params, `${hostname}/browser/item`).then(data => {
             window.open(data.result.content, '_blank', 'noreferrer')
         }).catch(err => {
             console.error((err))
@@ -205,7 +212,7 @@ const Panel = () => {
             "prompt": prompt,
             "items": scrapeWebsites()
         }
-        sendRequest(params, URL_ASK_WEBSITE).then(data => {
+        sendRequest(params, `${hostname}/browser/ask`).then(data => {
             addMessage(data.result.content, false)            
         }).catch(err => {
             console.error((err))
@@ -220,7 +227,7 @@ const Panel = () => {
             }
         }
 
-        sendRequest(params, URL_DELETE_RTD).then(data => {
+        sendRequest(params, `${hostname}/auto_task/delete`).then(data => {
             console.log(data.result)
         }).catch(err => {   
             console.error(err)         

Extension/src/pages/Popup/Popup.css

@@ -11,7 +11,7 @@
 .main-layout {
     display: flex;
     flex-direction: column;
-    height: 490px; /* Set the height of the layout to be 100% of the viewport */
+    height: 520px; /* Set the height of the layout to be 100% of the viewport */
     width: 400px;
     background-color: var(--theme-color);
     color: var(--font-color);
@@ -69,4 +69,29 @@
     border: 1px solid white !important;
     color: var(--font-color) !important;
     border-radius: 10px !important;
+}
+
+.custom-label {
+    width: 120px;
+    background-color: #202020 !important;
+    height: 33px;
+}
+
+.upload-file {
+    display: flex;
+    gap: 10px;
+}
+
+.ant-btn {
+    background-color: inherit;
+    border: 0;
+    color: var(--font-color);
+}
+
+.ant-upload-list-item-name {
+    color: var(--font-color);
+}
+
+.anticon {
+    color: var(--font-color) !important;
 }

Extension/src/pages/Popup/Popup.jsx

@@ -1,9 +1,13 @@
-import React, {useState} from 'react';import {
+import React, {useState, useEffect} from 'react';
+import {
     Divider,
     Input,
     Layout,
-    Button
+    Button,
+    Upload,
+    message
 } from 'antd';
+import  { UploadOutlined } from '@ant-design/icons'
 import './Popup.css';
 
 const {Footer, Content} = Layout;
@@ -16,11 +20,59 @@ const Popup = () => {
     const [token,setToken] = useState("")
     const [uuid,setUuid] = useState("")
     const [temperature,setTemperature] = useState(0)
+    const [firebaseCred, setFirebaseCred] = useState([])
 
     /// Check if the user's system is in dark mode
     const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     let isDarkMode = darkModeMediaQuery.matches;
 
+    useEffect(() => {
+        // Send a message to background script to get the storage value
+        chrome.runtime.sendMessage({ method: 'getLocalStorage' }, (response) => {
+            setOpenaiKey(response.data.openai_key);
+            setPineconeKey(response.data.pinecone_key)
+            setPineconeEnv(response.data.pinecone_env)
+            setFirebaseKey(response.data.firebase_key)
+            setToken(response.data.token)
+            setUuid(response.data.uuid)
+            setTemperature(response.data.temperature)
+            setHostName(response.data.host_name)
+        });
+    }, []);
+
+    const getBase64 = (file, callback) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => callback(reader.result);
+        reader.onerror = error => {
+            message.error('File reading was failed.', error);
+        };
+    };
+
+    const handleUploadChange = (info) => {
+        let fileList = [...info.fileList];
+
+        // Remove non-json and old files
+        fileList = fileList.filter(file => {
+            if (file.type.includes('json')) {
+                if (file.originFileObj) {
+                    getBase64(file.originFileObj, result =>{
+                        const firebaseCredInfo = result.split(',')
+                        setFirebaseKey(firebaseCredInfo[1])
+                    });
+                }
+                return true;
+            } else {
+                message.error(`${file.name} is not an json file.`);
+                return false;
+            }
+        });
+        fileList = fileList.slice(-1);
+
+        setFirebaseCred([...fileList]);
+    };
+
+
     const handleThemeChange = (e) => {
         isDarkMode = e.matches;
     };
@@ -48,7 +100,6 @@ const Popup = () => {
     }
 
     return (
-
         <Layout className="main-layout" data-theme={isDarkMode ? 'dark': 'light'}>
             <div className="header">
                 <h1>Settings</h1>
@@ -83,13 +134,6 @@ const Popup = () => {
                     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"
@@ -115,6 +159,12 @@ const Popup = () => {
                     className="custom-input"
                     onChange={(e) => setTemperature(e.target.value)}
                 />
+                <div className="upload-file">
+                    <Input className="custom-label" value="Firebase Key" disabled />
+                    <Upload fileList={firebaseCred} onChange={(info) =>handleUploadChange(info)}>
+                        <Button icon={<UploadOutlined />}>Upload</Button>
+                    </Upload>
+                </div>
             </Content>
             <Divider className="divider"/>
             <Footer className="footer">