From 8a4f37ada0eb74b43abae9306dd5ed1070076b01 Mon Sep 17 00:00:00 2001
From: Huan He <140455389+huanhe4096@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:33:40 -0500
Subject: [PATCH] update 0.6.2

---
 README.md                           |  8 ++++++++
 web/src/App.vue                     | 10 +++++-----
 web/src/DataStore.js                |  6 +++---
 web/src/components/HeaderMenu.vue   | 11 +++++++++++
 web/src/components/ItemList.vue     |  1 +
 web/src/components/SettingPanel.vue | 22 ++++++++++++++++++----
 6 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 198e090..f898976 100644
--- a/README.md
+++ b/README.md
@@ -25,9 +25,17 @@ The translate, llama model, and other services can be started separately. Please
 
 # Updates
 
+## 0.6.2
+
+- Updated AI model selection
+- Fixed footer text
+- Updated visual layout
+- Updated default openai model
+
 ## 0.6.0
 
 - Add new template for loading taxonomy
+- Add dependency for loading prompt
 - Fixed layout
 - Fixed import loading issue
 
diff --git a/web/src/App.vue b/web/src/App.vue
index dc375dd..5c4e8b3 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 <div class="footer">
   <div>
     <i class="fa-regular fa-clipboard"></i>
-    {{ store.taxonomy_file?.fn }}:
+    {{ store.taxonomy_file?.name }}:
     <b>{{ store.taxonomy.length }}</b> taxonomies
     |
     <i class="fa fa-database"></i>
@@ -78,7 +78,7 @@ onMounted(() => {
   height: 4rem;
   display: flex;
   flex-direction: column;
-  background-color: #cacaca;
+  background-color: #dfdfdf;
 }
 .footer {
   position: absolute;
@@ -89,7 +89,7 @@ onMounted(() => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: #cacaca;
+  background-color: #dfdfdf;
   justify-content: space-between;
 }
 .oper-bar {
@@ -113,14 +113,14 @@ onMounted(() => {
   width: 25rem;
   height: calc(100vh - 7rem);
   overflow-y: hidden;
-  background-color: #f4f4f4;
+  background-color: #eaeaea;
 }
 .right {
   flex: 1;
   width: calc(100% - 25rem);
   padding: 10px;
   height: calc(100vh - 7rem);
-  background-color: #e4e4e4;
+  background-color: #f9f9f9;
   display: flex;
   flex-direction: row;
 }
diff --git a/web/src/DataStore.js b/web/src/DataStore.js
index da0a46a..dda565c 100644
--- a/web/src/DataStore.js
+++ b/web/src/DataStore.js
@@ -3,7 +3,7 @@ import { useToast } from "primevue/usetoast";
 
 export const useDataStore = defineStore('jarvis', {
 state: () => ({
-    version: '0.6.0',
+    version: '0.6.2',
     config: {
         api_server_url: "http://localhost:8123",
         api_server_token: "",
@@ -30,8 +30,8 @@ state: () => ({
                 // we need to know which service is used
                 // for ollama, vllm, 
                 "service_type": "openai",
-                "name": "OpenAI 4o mini",
-                "model_name": "gpt-4o-mini",
+                "name": "OpenAI 4o",
+                "model_name": "gpt-4o",
                 "endpoint": "https://api.openai.com/v1/chat/completions",
                 "enabled": true,
                 "api_key": ""
diff --git a/web/src/components/HeaderMenu.vue b/web/src/components/HeaderMenu.vue
index 395fb1e..62acebd 100644
--- a/web/src/components/HeaderMenu.vue
+++ b/web/src/components/HeaderMenu.vue
@@ -25,6 +25,17 @@ async function onTaxonomyFileChange(e) {
 }
 
 async function onPromptFileChange(e) {
+  // check if taxonomy are loaded
+  if (!store.taxonomy_file) {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Please load the taxonomy file first',
+      life: 3000
+    });
+    return;
+  }
+
   let { fh, file } = await fs_helper.fsOpenFile({
     types: [{
           description: 'Text File',
diff --git a/web/src/components/ItemList.vue b/web/src/components/ItemList.vue
index d3420ea..8a60338 100644
--- a/web/src/components/ItemList.vue
+++ b/web/src/components/ItemList.vue
@@ -230,6 +230,7 @@ const items = ref([
     overflow: hidden;
     width: 100%;
     text-overflow: ellipsis;
+    line-height: 0.9rem;
 }
 .current-item {
     background-color: #7abdf3;
diff --git a/web/src/components/SettingPanel.vue b/web/src/components/SettingPanel.vue
index b9c78e1..dc562a3 100644
--- a/web/src/components/SettingPanel.vue
+++ b/web/src/components/SettingPanel.vue
@@ -212,7 +212,7 @@ const toggle = (event) => {
 
                 <TabPanel value="chatbot">
                     <template v-for="model in store.config.ai_models">
-                    <div class="mb-3">
+                    <div class="mb-4">
                         <p class="m-0 section">
                             <i class="fa fa-cube"></i>
                             {{ model.name }}
@@ -223,8 +223,15 @@ const toggle = (event) => {
                         </div>
                         <div class="mb-2">
                             <InputText v-model="model.endpoint" 
-                                style="width: 100%;"
-                                class="w-100"/>
+                                class="w-full"/>
+                        </div>
+
+                        <div class="label">
+                            Model Name
+                        </div>
+                        <div class="mb-2">
+                            <InputText v-model="model.model_name" 
+                                class="w-full"/>
                         </div>
 
                         <div class="label w-full">
@@ -277,7 +284,8 @@ const toggle = (event) => {
 
                             <div>
                                 <span @click="onClickDeleteKeyword(keyword_index)"
-                                    class="text-red-100 cursor-pointer">
+                                    title="Delete this keyword"
+                                    class="text-red-100 cursor-pointer delete-link">
                                     <i class="fa fa-trash"></i>
                                 </span>
                             </div>
@@ -375,4 +383,10 @@ const toggle = (event) => {
     background-color: #f8f8f8;
     font-weight: bold;
 }
+.delete-link {
+    font-size: small;
+}
+.delete-link:hover {
+    color: red;
+}
 </style>
\ No newline at end of file