From 26dca4ac64c9e6c669367fa11d1053566d850c88 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 08:49:40 +0300
Subject: [PATCH] wip2

---
 web/src/components/ChatBox.vue                | 18 ++--
 web/src/components/MountedPersonalities.vue   | 85 +++++++++----------
 .../components/MountedPersonalitiesList.vue   | 19 +++--
 3 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 061a6f39..4da552e7 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -87,15 +87,15 @@
                         </button>
                     </div>
                     <div v-if="showPersonalities" class="flex items-center mx-1">
-                        <MountedPersonalitiesList  @click.stop=""/>
+                        <MountedPersonalitiesList ref="mountedPersList" />
                     </div>
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
-                        <div class="w-24 overflow-visible">
-                            <MountedPersonalities  @click.stop=""/>
+                        <div class="w-fit">
+                            <MountedPersonalities :onShowPersList="onShowPersList" />
 
                         </div>
-                       
+
 
                         <div class="relative grow">
                             <textarea id="chat" rows="1" v-model="message" title="Hold SHIFT + ENTER to add new line"
@@ -144,7 +144,6 @@
             </div>
         </form>
     </div>
-
 </template>
 <style scoped>
 /* THESE ARE FOR TransitionGroup components */
@@ -185,8 +184,7 @@ export default {
     emits: ["messageSentEvent", "stopGenerating"],
     props: {
 
-        loading: false,
-        discussionList:[]
+        loading: false
 
     },
     components: {
@@ -203,10 +201,14 @@ export default {
             message: "",
             fileList: [],
             totalSize: 0,
-            showPersonalities:true
+            showPersonalities: false
         }
     },
     methods: {
+        onShowPersList(comp) {
+            this.showPersonalities = comp.show
+
+        },
         computedFileSize(size) {
             nextTick(() => {
                 feather.replace()
diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index 5009e4ba..3b450170 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -1,37 +1,24 @@
 <template>
     <!-- LIST OF MOUNTED PERSONALITIES -->
-    <div
-        class="overflow-visible text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-x-auto -my-2 pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
-        <!-- LIST -->
-        <div class="flex -space-x-4 items-center overflow-visible my-2 mx-2">
-            <!-- ITEM -->
-            <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 overflow-visible"
-                v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
-                <div class="group items-center flex flex-row overflow-visible">
-                    <button @click.stop="onPersonalitySelected(item)">
 
-                        <img :src="bUrl + item.avatar" @error="personalityImgPlacehodler"
-                            class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
-                            :class="configFile.active_personality_id == configFile.personalities.indexOf(item.full_path) ? 'border-secondary' : 'border-transparent z-0'"
-                            :title="item.name">
-                    </button>
-                    <button @click.stop="onPersonalityMounted(item)">
 
-                        <span
-                            class="hidden group-hover:block top-0 left-7 absolute active:scale-90 bg-bg-light dark:bg-bg-dark rounded-full border-2  border-transparent"
-                            title="Unmount personality">
-                            <!-- UNMOUNT BUTTON -->
-                            <svg aria-hidden="true" class="w-4 h-4 text-red-600 hover:text-red-500 " fill="currentColor"
-                                viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                                <path fill-rule="evenodd"
-                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                                    clip-rule="evenodd"></path>
-                            </svg>
+    <div class="w-fit select-none">
 
-                        </span>
-                    </button>
-                </div>
-            </div>
+
+        <div class="flex -space-x-4 " v-if="mountedPersArr.length > 1">
+
+
+            <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
+                class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary  border-secondary"
+                :title="mountedPers.name">
+
+            <div class="flex items-center justify-center w-8 h-8 cursor-pointer text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800"
+                @click.stop="toggleShowPersList" title="Click to show more">+{{ mountedPersArr.length - 1 }}</div>
+        </div>
+        <div class="flex -space-x-4 " v-if="mountedPersArr.length == 1">
+            <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
+                class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary cursor-pointer  border-secondary"
+                :title="mountedPers.name" @click.stop="toggleShowPersList">
         </div>
 
     </div>
@@ -45,6 +32,9 @@ const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
     name: 'MountedPersonalities',
+    props: {
+        onShowPersList: Function,
+    },
     setup() {
 
 
@@ -54,7 +44,9 @@ export default {
             personalities: [],
             bUrl: bUrl,
             isMounted: false,
-            isLoading:false
+            mountedPers: {},
+            show: false
+
         }
     },
     async mounted() {
@@ -68,6 +60,10 @@ export default {
 
     },
     methods: {
+        toggleShowPersList() {
+            this.show = !this.show
+            this.onShowPersList(this)
+        },
         async constructor() {
             this.configFile = await this.api_get_req("get_config")
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
@@ -79,6 +75,7 @@ export default {
                 this.getMountedPersonalities()
                 this.$forceUpdate()
             })
+            
         },
         async api_get_req(endpoint) {
             try {
@@ -97,7 +94,7 @@ export default {
 
         },
         async getPersonalitiesArr() {
-            this.isLoading = true
+
             this.personalities = []
             const dictionary = await this.api_get_req("get_all_personalities")
             const config = await this.api_get_req("get_config")
@@ -140,10 +137,10 @@ export default {
             }
 
             this.personalities.sort((a, b) => a.name.localeCompare(b.name))
-            this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
-            this.personalitiesFiltered.sort()
+            // this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
+            // this.personalitiesFiltered.sort()
+
 
-            this.isLoading = false
 
         },
         personalityImgPlacehodler(event) {
@@ -168,14 +165,14 @@ export default {
 
             }
 
-            this.isLoading = true
+
         },
         async onPersonalitySelected(pers) {
             // eslint-disable-next-line no-unused-vars
             if (this.isLoading) {
                 this.$refs.toast.showToast("Loading... please wait", 4, false)
             }
-            this.isLoading = true
+
             console.log('ppa', pers)
             if (pers) {
 
@@ -204,7 +201,7 @@ export default {
                 }
 
 
-                this.isLoading = false
+
             }
 
         },
@@ -241,9 +238,9 @@ export default {
 
 
             try {
-                this.isLoading = true
+
                 const res = await axios.post('/unmount_personality', obj);
-                this.isLoading = false
+
 
                 if (res) {
                     return res.data
@@ -283,7 +280,7 @@ export default {
 
         },
         async mountPersonality(pers) {
-            this.isLoading = true
+
             console.log('mount pers', pers)
             if (!pers) { return }
 
@@ -310,11 +307,11 @@ export default {
                 pers.isMounted = false
                 this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false)
             }
-            this.isLoading = false
+
 
         },
         async unmountPersonality(pers) {
-            this.isLoading = true
+
             if (!pers) { return }
 
             const res = await this.unmount_personality(pers.personality || pers)
@@ -359,7 +356,7 @@ export default {
                 this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
             }
 
-            this.isLoading = false
+
         },
         getMountedPersonalities() {
 
@@ -384,6 +381,8 @@ export default {
             console.log('getMountedPersonalities', mountedPersArr)
             console.log('fig', this.configFile.personality_category)
 
+            this.mountedPers = this.personalities[this.personalities.findIndex(item => item.full_path == this.configFile.personalities[this.configFile.active_personality_id])]
+
         },
     }
 }
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
index 84f43de4..6599e82f 100644
--- a/web/src/components/MountedPersonalitiesList.vue
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -11,7 +11,7 @@
                 <TransitionGroup name="bounce">
                     <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
                         :key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path"
-                        :selected="configFile.active_personality_id == configFile.personalities.findIndex(item => item === pers.full_path)"
+                        :selected="configFile.personalities[configFile.active_personality_id]==pers.full_path"
                         :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
                         :on-settings="onSettingsPersonality" />
                 </TransitionGroup>
@@ -22,6 +22,7 @@
 
         <Toast ref="toast">
         </Toast>
+        <UniversalForm ref="universalForm" class="z-20" />
     </div>
 </template>
 
@@ -30,6 +31,7 @@ import axios from "axios";
 import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
 import PersonalityEntry from './PersonalityEntry.vue'
 import Toast from './Toast.vue'
+import UniversalForm from './UniversalForm.vue';
 const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
@@ -41,6 +43,7 @@ export default {
     components: {
         PersonalityEntry,
         Toast,
+        UniversalForm,
     },
     name: 'MountedPersonalitiesList',
     setup() {
@@ -56,7 +59,7 @@ export default {
         }
     },
     async mounted() {
-        await this.constructor()
+    await this.constructor()
         this.isMounted = true
     },
     async activated() {
@@ -73,10 +76,7 @@ export default {
             this.configFile.personality_category = personality_path_infos["personality_category"]
             this.configFile.personality_folder = personality_path_infos["personality_name"]
 
-            await this.getPersonalitiesArr().then(() => {
-                this.getMountedPersonalities()
-                this.$forceUpdate()
-            })
+            await this.getPersonalitiesArr()
         },
         async api_get_req(endpoint) {
             try {
@@ -143,6 +143,9 @@ export default {
 
             this.isLoading = false
 
+            this.getMountedPersonalities()
+                this.$forceUpdate()
+
         },
         personalityImgPlacehodler(event) {
             event.target.src = defaultPersonalityImgPlaceholder
@@ -193,7 +196,7 @@ export default {
                             await this.constructor()
 
                             this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
-
+                           
                         }
                     }
 
@@ -430,7 +433,7 @@ export default {
             this.mountedPersArr = mountedPersArr
             //this.mountedPersArr = mountedPersArr
             console.log('getMountedPersonalities', mountedPersArr)
-            console.log('fig', this.configFile.personality_category)
+            console.log('fig', this.configFile)
 
         },
     }