Merge pull request #228 from ttt246/feature/update_extension_191

Update Extension

Extension/package.json

@@ -14,7 +14,8 @@
     "axios": "^1.4.0",
     "firebase": "^9.23.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

Extension/src/manifest.json

@@ -38,9 +38,11 @@
       "resources": [
         "content.styles.css",
         "icon-128.png",
-        "icon-34.png"
+        "icon-34.png",
+        "logo_panel.png",
+        "logo.png"
       ],
-      "matches": []
+      "matches": ["<all_urls>"]
     }
   ]
 }

Extension/src/pages/Panel/Message/index.css

@@ -1,10 +1,10 @@
 [data-theme='light'] {
-    --send-theme-color: #0a164d;
+    --send-theme-color: #8753e9;
     --receive-theme-color: #0d0c0d;
   }
 
   [data-theme='dark'] {
-    --send-theme-color: #0a164d;
+    --send-theme-color: #8753e9;
     --receive-theme-color: #333333;
   }
 
@@ -25,8 +25,6 @@
 .message_received {
     width: fit-content;
     padding: 5px;
-    border-radius: 5px;
-    background-color: var(--receive-theme-color);
 }
 
 

Extension/src/pages/Panel/Panel.css

@@ -23,14 +23,18 @@
 }
 
 .header {
-  padding-left: 10px;
+  height: 55px;
   text-align: left;
+  padding-top: 5px;
 }
 
 .footer {
   padding: 10px;
-  justify-self: end;
   background-color: var(--theme-color);
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  color: grey;
 }
 
 .content {
@@ -57,4 +61,19 @@
 .divider {
   margin: 0;
   background-color: grey;
+}
+
+.footer-btn {
+  padding: 5px;
+  background-color: inherit;
+  border: 0;
+  color: grey;
+  height: 25px;
+  cursor: pointer;
+}
+
+.footer-btn:hover {
+  background-color: #8753e9;
+  border: 1px solid inherit;
+  border-radius: 10px;
 }

Extension/src/pages/Panel/Panel.jsx

@@ -1,11 +1,23 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {Divider, Input, Layout} from 'antd';
-import {SendOutlined} from '@ant-design/icons';
+import {
+    Divider,
+    Input,
+    Layout,
+    Tooltip
+} from 'antd';
 import { getDatabase, onValue, ref } from "firebase/database";
 
 import Message from './Message'
 import './Panel.css';
 import app from './FirebaseApp/firebase-app'
+import Browser from 'webextension-polyfill'
+import {
+    SettingOutlined,
+    SyncOutlined,
+    SoundOutlined,
+    CopyOutlined,
+    MessageOutlined
+} from '@ant-design/icons'
 
 const {Footer, Content} = Layout;
 const URL_BASE = 'https://ttt246-brain.hf.space/'
@@ -26,12 +38,14 @@ const confs = {
         "temperature": 0.6
     }
 }
+const logoUrl = Browser.runtime.getURL('logo_panel.png')
+
 const Panel = () => {
     const [question, setQuestion] = useState("");
     const [messages, setMessages] = useState([]);
     const [isLoading, setLoadingStatus] = useState(false);
     const chat_box = useRef(null);
-
+   
     const handleQuestionUpdated = (event) => {
         if (event.key === "Enter" && !isLoading) {
             addMessage(question, true);
@@ -315,7 +329,7 @@ const Panel = () => {
     return (
         <Layout className="main-layout" data-theme={isDarkMode ? 'dark': 'light'}>
             <div className="header">
-                <h4>RisingBrowser</h4>
+                <img src={logoUrl} height="50px" alt="no image" />
             </div>
             <Divider className="divider"/>
             <Content className="content" ref={chat_box}>
@@ -328,11 +342,36 @@ const Panel = () => {
             </Content>
             <Divider className="divider"/>
             <Footer className="footer">
+                <Tooltip title="Settings" arrow="show" placement="bottom">
+                    <div className="footer-btn">
+                        <SettingOutlined />
+                    </div>
+                </Tooltip>
                 <Input
-                    addonAfter={<SendOutlined/>}
                     value={question}
                     onChange={handleQuestionChange}
-                    onKeyDown={handleQuestionUpdated}/>
+                    onKeyDown={handleQuestionUpdated}
+                />
+                <Tooltip title="re-send" arrow="show" placement="bottom">
+                    <div className="footer-btn">
+                        <SyncOutlined />
+                    </div>
+                </Tooltip>
+                <Tooltip title="voice recognition" arrow="show" placement="bottom">
+                    <div className="footer-btn">
+                        <SoundOutlined />
+                    </div>
+                </Tooltip>
+                <Tooltip title="copy" arrow="show" placement="bottom">
+                    <div className="footer-btn">
+                        <CopyOutlined />
+                    </div>
+                </Tooltip>
+                <Tooltip title="message" arrow="show" placement="bottom">
+                    <div className="footer-btn">
+                        <MessageOutlined />
+                    </div>
+                </Tooltip>
             </Footer>
         </Layout>
     );

Extension/webpack.config.js

@@ -144,7 +144,7 @@ var options = {
           from: 'src/manifest.json',
           to: path.join(__dirname, 'build'),
           force: true,
-          transform: function (content, path) {
+          transform: function (content) {
             // generates the manifest file using the package.json informations
             return Buffer.from(
               JSON.stringify({
@@ -184,6 +184,24 @@ var options = {
         },
       ],
     }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/img/logo_panel.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/img/logo.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
       filename: 'newtab.html',