something not right

tests/end_point_tests/endpoints.http

@@ -18,7 +18,7 @@ POST http://localhost:9600/load_discussion
 Content-Type: application/json
 
 {
-    "id": 1 // Discussion ID Must be integer
+    "id": 5 
 }
 ############################################
 ### Delete Discussion by ID
@@ -27,7 +27,7 @@ POST http://localhost:9600/delete_discussion
 Content-Type: application/json
 
 {
-    "id": 0 // Discussion ID Must be integer
+    "id": 0 
 }
 ############################################
 ### Edit discussion title

web/src/components/ChatBox.vue

@@ -86,8 +86,8 @@
 
                         </button>
                     </div>
-                    <div v-if="showPersonalities" class="container">
+                    <div v-if="showPersonalities" class="">
-                        <MountedPersonalitiesList ref="mountedPersList" :on-mount-unmount="onMountUnmountFun" />
+                        <MountedPersonalitiesList ref="mountedPersList" :on-mount-unmount="onMountUnmountFun" :discussionPersonalities="allDiscussionPersonalities"/>
                     </div>
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
@@ -174,7 +174,7 @@ import MountedPersonalitiesComponent from './MountedPersonalitiesComponent.vue'
 
 </script> -->
 <script>
-import { nextTick, TransitionGroup } from 'vue'
+import { nextTick, ref, TransitionGroup } from 'vue'
 import feather from 'feather-icons'
 import filesize from '../plugins/filesize'
 import MountedPersonalities from './MountedPersonalities.vue'
@@ -183,7 +183,7 @@ export default {
     name: 'ChatBox',
     emits: ["messageSentEvent", "stopGenerating"],
     props: {
-
+        discussionList: Array,
         loading: false
 
     },
@@ -204,6 +204,27 @@ export default {
             showPersonalities: false
         }
     },
+    computed: {
+        allDiscussionPersonalities() {
+            if (this.discussionList.length > 0) {
+
+                let persArray = []
+                for (let i = 0; i < this.discussionList.length; i++) {
+                    if (!persArray.includes(this.discussionList[i].personality) && !this.discussionList[i].personality=="") {
+                        persArray.push(this.discussionList[i].personality)
+                    };
+                }
+
+
+
+
+                console.log('conputer pers', persArray)
+                console.log('dis conputer pers', this.discussionList)
+                return persArray
+            }
+
+        }
+    },
     methods: {
         onShowPersListFun(comp) {
             this.showPersonalities = comp.show
@@ -277,10 +298,14 @@ export default {
             },
             deep: true
         },
+        discussionList(val){
+
+            console.log('discussion arr',val)
+        }
 
     },
     mounted() {
-
+        console.log('mnted all chat', this.allDiscussionPersonalities)
         nextTick(() => {
             feather.replace()
         })

web/src/components/MountedPersonalities.vue

@@ -9,15 +9,15 @@
 
 
             <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"
+                class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:z-20 hover:-translate-y-2 duration-150  border-secondary cursor-pointer"
                 :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"
+            <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 hover:z-20 hover:-translate-y-2 duration-150 active:scale-90"
                 @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"
+                class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:z-20 cursor-pointer  border-secondary"
                 :title="mountedPers.name" @click.stop="toggleShowPersList" >
         </div>
 

web/src/components/MountedPersonalitiesList.vue

@@ -7,7 +7,7 @@
             <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                 Mounted Personalities: ({{ mountedPersArr.length }})
             </label>
-            <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-1 md:grid-cols-1 gap-4 max-h-96">
+            <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4 max-h-96">
                 <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"
@@ -61,7 +61,8 @@ const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
     props: {
-        onMountUnmount: Function
+        onMountUnmount: Function,
+        discussionPersonalities: Array
 
 
     },
@@ -454,16 +455,45 @@ export default {
 
                 const pers = this.personalities[index]
                 if (pers) {
+                    console.log('adding from config')
                     mountedPersArr.push(pers)
                 }
                 else {
-                    mountedPersArr.push(this.personalities[this.personalities.findIndex(item => item.full_path == "english/generic/lollms")])
+                    console.log('adding default')
+                    const index = this.personalities.findIndex(item2 => item2.full_path == "english/generic/lollms")
+
+                    const pers = this.personalities[index]
+                    mountedPersArr.push(pers)
                 }
             }
             this.mountedPersArr = []
             this.mountedPersArr = mountedPersArr
             //this.mountedPersArr = mountedPersArr
-            console.log('getMountedPersonalities', mountedPersArr)
+
+            if (this.discussionPersonalities.length > 0) {
+                for (let i = 0; i < this.discussionPersonalities.length; i++) {
+                    const per = this.discussionPersonalities[i]
+                    const perIndex =this.mountedPersArr.includes(item => item.full_path == per)
+                    if (!perIndex|| undefined) {
+                        
+                        const index2 = this.personalities.findIndex(item2 => item2.full_path == per)
+                        // const index22 = this.personalities.filter(item2 => item2.full_path.localeCompare(per) ==1 ) 
+
+                        const pers = this.personalities[index2]
+                        console.log('adding discucc121',pers, per)
+                        if(pers){
+                            this.mountedPersArr.push(pers)
+                        console.log('adding discucc',pers)
+                        }
+
+                    }
+
+                }
+
+            }
+
+
+            console.log('getMountedPersonalities', this.mountedPersArr)
             console.log('fig', this.configFile)
 
         },

web/src/views/DiscussionsView.vue

@@ -189,7 +189,7 @@
 
             </div>
             <div class=" bottom-0 container flex flex-row items-center justify-center " v-if="currentDiscussion.id">
-                <ChatBox ref="chatBox" @messageSentEvent="sendMsg" :loading="isGenerating" :discussionList="list" @stopGenerating="stopGenerating">
+                <ChatBox ref="chatBox" @messageSentEvent="sendMsg" :loading="isGenerating" :discussionList="discussionArr" @stopGenerating="stopGenerating">
                 </ChatBox>
             </div>
             <!-- CAN ADD FOOTER PANEL HERE -->
@@ -289,6 +289,7 @@ export default {
             try {
                 if (id) {
                     this.loading = true
+                    this.discussionArr=[]
                     this.setDiscussionLoading(id, this.loading)
                     const res = await axios.post('/load_discussion', {
                         id: id
@@ -1259,10 +1260,10 @@ export default {
         // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D
         console.log("Websocket connected (activated)", this.socketConnected)
         //console.log('settings changed acc', this.$store.state.settingsChanged)
+        // await this.getPersonalityAvatars()
         await this.getPersonalityAvatars()
-
         if (this.isCreated) {
-            this.loadLastUsedDiscussion()
+           // this.loadLastUsedDiscussion()
             nextTick(() => {
 
                 const msgList = document.getElementById('messages-list')