Adjust

src/GenTradeAgent/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@vicons/ionicons5": "^0.13.0",
     "vuex": "^4.0.2"
   },
   "devDependencies": {

src/GenTradeAgent/src/renderer/src/App.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
 import TradingMain from './components/TradingMain.vue'
-import StatusBar from './components/StatusBar.vue'
+import FootBar from './components/FootBar.vue'
 import 'vfonts/Lato.css'
 import {
   NConfigProvider,
   NModalProvider,
   NMessageProvider,
   NDialogProvider,
   NNotificationProvider,
-  NLoadingBarProvider
+  NLoadingBarProvider,
 } from 'naive-ui'
 </script>
 
 <template>
-  <n-config-provider :theme-overrides="{ common: { fontWeightStrong: '600' } }">
+  <n-config-provider :theme-overrides="{ common: { fontWeightStrong: '600' } }" :theme="null">
     <n-modal-provider>
       <n-dialog-provider>
         <n-message-provider>
           <n-notification-provider>
             <n-loading-bar-provider>
               <div class="app-main">
                 <TradingMain class="app-trading" />
-                <StatusBar class="app-status" />
+                <FootBar class="app-status" />
               </div>
             </n-loading-bar-provider>
           </n-notification-provider>
@@ -41,14 +41,10 @@ import {
 
 .app-trading {
   flex-grow: 1;
-  border: #e5e5e5;
-  border-style: solid;
-  border-width: thin;
-  background: #f3f3f3;
 }
 
 .app-status {
   height: 30px;
-  background: #f3f3f3;
+  background-color: var(--color-background-mute);
 }
 </style>

src/GenTradeAgent/src/renderer/src/assets/base.css

@@ -24,9 +24,9 @@
 }
 
 :root {
-  --color-background: var(--ev-c-black);
-  --color-background-soft: var(--ev-c-black-soft);
-  --color-background-mute: var(--ev-c-black-mute);
+  --color-background: var(--ev-c-white);
+  --color-background-soft: var(--ev-c-white-soft);
+  --color-background-mute: var(--ev-c-white-mute);
 
   --color-text: var(--ev-c-gray-1);
 }

src/GenTradeAgent/src/renderer/src/components/FootBar.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="foot-main">
+    <div class="foot-notification">
+      <span>{{ nodifyMessage }}</span>
+    </div>
+    <n-space class="foot-status">
+      <span class="status-icon">Version v0.1</span>
+      <n-button text style="font-size: 18px">
+        <n-icon>
+          <Clock20Regular />
+        </n-icon>
+      </n-button>
+      <n-button text style="font-size: 18px">
+        <n-icon>
+          <PlugConnected20Filled />
+        </n-icon>
+      </n-button>
+    </n-space>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PlugConnected20Filled, Clock20Regular } from '@vicons/fluent'
+import { NIcon, NSpace, NButton } from 'naive-ui'
+import { useStore } from '../store'
+
+const store = useStore()
+
+const nodifyMessage = ref('Notification Message')
+store.watch(
+  (state) => state.notifyMessage,
+  (value) => {
+    nodifyMessage.value = value
+  }
+)
+
+</script>
+<style lang="scss" scoped>
+.foot-main {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.foot-notification {
+  flex-grow: 1;
+  align-content: center;
+}
+
+.foot-status {
+  padding-right: 10px;
+  height: 100%;
+  align-content: center;
+}
+</style>

src/GenTradeAgent/src/renderer/src/components/TradingChatAgent.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- <span style="color: blue; align-self: center">Agentic</span> -->
   <div class="chat-agent-all">
+    <div class="chat-title-box">
+      <span >From Agentic Server::</span>
+    </div>
     <n-log class="chat-agent-output" :log="placeholder_output" :font-size="12" />
     <n-input
       v-model:value="prompt"
@@ -37,16 +40,19 @@ adoption and acceptance of digital assets worldwide.`)
 
 const prompt = ref('')
 
-onMounted(() => {
-
-})
+onMounted(() => {})
 
 const handleInput = (v: string) => {
   console.log(v)
 }
 </script>
 
 <style lang="scss" scoped>
+.chat-title-box {
+  height: 25px;
+  margin-bottom: 2px;
+  align-items: center;
+}
 .chat-agent-all {
   width: 100%;
   display: flex;

src/GenTradeAgent/src/renderer/src/components/TradingDashboard.vue

@@ -36,7 +36,7 @@ onMounted(() => {
   const chartOptions = {
     layout: {
       textColor: 'black',
-      backgroundColor: { type: 'solid', color: 'white' },
+      background: { color: 'white' },
       attributionLogo: false
     },
     localization: {

src/GenTradeAgent/src/renderer/src/components/TradingMain.vue

@@ -37,11 +37,10 @@
         :native-scrollbar="false"
         :width="400"
         show-trigger="arrow-circle"
-        content-style="padding: 1px;"
         :show-collapsed-content="false"
         bordered
       >
-        <TradingChatAgent style="height: calc(100vh - 32px)" />
+        <TradingChatAgent class="pane-agent" />
       </n-layout-sider>
     </n-layout>
   </n-space>
@@ -103,12 +102,6 @@ const handleUpdateCurrentAsset = (value: string) => {
 const handleUpdateCurrentInterval = (value: string) => {
   store.commit('updateCurrentInterval', value)
 }
-
-
-
-
-
-
 </script>
 
 <style lang="scss" scoped>
@@ -118,7 +111,6 @@ const handleUpdateCurrentInterval = (value: string) => {
 }
 
 .pane-dashboard {
-  //background-color: #f3f3f3;
   height: 100%;
   display: flex;
   padding: 2px;
@@ -138,8 +130,8 @@ const handleUpdateCurrentInterval = (value: string) => {
 }
 
 .pane-agent {
-  background-color: #f3f3f3 !important;
+  height: calc(100vh - 30px);
   display: flex;
-  padding: 4px;
+  padding: 5px;
 }
 </style>

src/GenTradeAgent/src/renderer/src/store.ts

@@ -10,21 +10,23 @@ export interface ohlcvData {
   vol: number
 }
 
-export interface State {
+export interface IState {
   ohlcvDB: { [asset: string]: { [interval: string]: ohlcvData[] } }
   currentAsset: string
   currentOhlcv: ohlcvData[]
   currentInterval: string
+  notifyMessage: string
 }
 
-export const keyStore: InjectionKey<Store<State>> = Symbol()
+export const keyStore: InjectionKey<Store<IState>> = Symbol()
 
-export const store = createStore<State>({
+export const store = createStore<IState>({
   state: () => ({
     ohlcvDB: { btc: { '1h': [] } },
     currentAsset: 'btc',
     currentOhlcv: [],
-    currentInterval: '1h'
+    currentInterval: '1h',
+    notifyMessage: 'Last message'
   }),
   mutations: {
     updateOhlcvDB(state, newOhlcvDB) {
@@ -42,6 +44,9 @@ export const store = createStore<State>({
       console.log('updateCurrentInterval')
       state.currentInterval = newInterval
       state.currentOhlcv = state.ohlcvDB[state.currentAsset][state.currentInterval]
+    },
+    updateNotification(state, notifyMessage) {
+      state.notifyMessage = notifyMessage
     }
   }
 })