feature(#191): update UI...

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

@@ -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

@@ -30,8 +30,11 @@
 
 .footer {
   padding: 10px;
-  justify-self: end;
   background-color: var(--theme-color);
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  color: grey;
 }
 
 .content {
@@ -58,4 +61,18 @@
 .divider {
   margin: 0;
   background-color: grey;
+}
+
+.footer-btn {
+  padding: 3px;
+  background-color: inherit;
+  border: 0;
+  color: grey;
+  height: 25px;
+}
+
+.footer-btn:hover {
+  background-color: #8753e9;
+  border: 1px solid inherit;
+  border-radius: 10px;
 }

Extension/src/pages/Panel/Panel.jsx

@@ -1,12 +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/'
@@ -34,7 +45,7 @@ const Panel = () => {
     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);
@@ -318,7 +329,7 @@ const Panel = () => {
     return (
         <Layout className="main-layout" data-theme={isDarkMode ? 'dark': 'light'}>
             <div className="header">
-                <img src={logoUrl} height="48px" alt="no image" />
+                <img src={logoUrl} height="50px" alt="no image" />
             </div>
             <Divider className="divider"/>
             <Content className="content" ref={chat_box}>
@@ -331,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>
     );