From 9018dffc2488f6a49b162e0ee419f65cc63fad72 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Fri, 9 Jun 2023 17:58:26 +0300
Subject: [PATCH 01/11] wip

---
 web/src/views/SettingsView.vue | 49 ++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 6b439029..38fdb895 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -272,7 +272,7 @@
                 class="flex flex-col mb-2  rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
 
 
-                <div class="flex flex-row p-3">
+                <div class="flex flex-row p-3 items-center">
                     <button @click.stop="pzc_collapsed = !pzc_collapsed"
                         class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
                         <i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
@@ -283,14 +283,27 @@
                         <div v-if="configFile.personalities"
                             class=" text-base font-semibold cursor-pointer select-none items-center">
 
-                            <div class="flex gap-1 items-center">
+                            <!-- <div class="flex gap-1 items-center">
                                 <img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
                                 <h3 class="font-bold font-large text-lg line-clamp-1">
                                     {{ this.configFile.personality_folder }}
                                 </h3>
-                            </div>
+                            </div> -->
 
+                            <div class="flex -space-x-4 items-center" v-if="mountedPersonalities">
+
+                                <div class="relative" v-for="item in mountedPersonalities">
+                                    <img :src="item.$refs.imgElement.src"
+                                        class="w-8 h-8 rounded-full object-fill text-red-700 border-2 hover:border-secondary border-transparent"
+                                        :title="item.personality.name">
+                                    <!-- <span
+                                        class="top-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"
+                                        title="Mounted personality"></span> -->
+                                </div>
+                            </div>
                         </div>
+
+
                     </button>
                 </div>
                 <div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
@@ -615,6 +628,7 @@ export default {
         Toast,
         PersonalityEntry,
         BindingEntry,
+
     },
     data() {
 
@@ -960,7 +974,7 @@ export default {
             this.isLoading = true
 
             this.update_setting('binding_name', value, (res) => {
-                
+
 
                 this.$refs.toast.showToast("Binding changed.", 4, true)
                 this.settingsChanged = true
@@ -1103,6 +1117,7 @@ export default {
                         newItem = item
                         newItem.category = catkey // add new props to items
                         newItem.language = langkey // add new props to items
+                        newItem.full_path = langkey + '/' + catkey + '/' + item.name // add new props to items
                         return newItem
                     })
 
@@ -1159,8 +1174,9 @@ export default {
         this.isLoading = false
         this.diskUsage = await this.api_get_req("disk_usage")
         this.ramUsage = await this.api_get_req("ram_usage")
-        console.log('ran', this.ramUsage)
+
         this.isMounted = true
+        this.mountedPersonalities
 
     },
     computed: {
@@ -1225,6 +1241,29 @@ export default {
                 return defaultPersonalityImgPlaceholder
             }
         },
+        mountedPersonalities() {
+            if (!this.isMounted) {
+                return []
+            }
+            let mountedPersArr = []
+            if (this.configFile.personalities.length > 0) {
+
+                for (let i = 0; i < this.configFile.personalities.length; i++) {
+                    const full_path_item = this.configFile.personalities[i]
+
+                    const index = this.$refs.personalitiesZoo.findIndex(item => item.personality.full_path == full_path_item)
+                    if (index) {
+
+                        const pers = this.$refs.personalitiesZoo[index]
+                        mountedPersArr.push(pers)
+                    }
+                }
+
+            }
+            console.log('mountedPers', mountedPersArr)
+
+            return mountedPersArr
+        }
 
     },
     watch: {

From f02c868306334239e3382119e2becc913e92be1f Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 10 Jun 2023 16:17:10 +0300
Subject: [PATCH 02/11] bs wip

---
 web/src/components/PersonalityEntry.vue |  48 +++--
 web/src/views/SettingsView.vue          | 251 +++++++++++++++++++-----
 2 files changed, 234 insertions(+), 65 deletions(-)

diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index 3b48341b..e4c25941 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -1,13 +1,28 @@
 <template>
-  <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
+  <div
+    class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
 
 
     <div class="flex flex-row items-center  flex-shrink-0 gap-3">
-      <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
+      <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
+        class="w-10 h-10 rounded-full object-fill text-red-700">
       <h3 class="font-bold font-large text-lg line-clamp-3">
-      {{ personality.name }}
-    </h3>
+        {{ personality.name }}
+      </h3>
+      <div class="grow">
+        <!-- EMPTY SPACE FILLER -->
+      </div>
+      <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
+      <div class="flex-none">
+
+
+        <div class="flex items-center mb-4" @click.stop>
+          <input id="default-checkbox" type="checkbox" v-model="isMounted" @change="toggleMounted"
+            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+          <label for="default-checkbox" class="ml-2 text-sm font-medium">Mounted</label>
+        </div>
+      </div>
 
 
     </div>
@@ -18,9 +33,9 @@
           <i data-feather="user" class="w-5 m-1"></i>
           <b>Author:&nbsp;</b>
 
-  {{ personality.author }}
-</div>
-<!-- <div class="">
+          {{ personality.author }}
+        </div>
+        <!-- <div class="">
   <b>Language:&nbsp;</b>
   {{ personality.language }}
 </div>
@@ -28,8 +43,8 @@
   <b>Category:&nbsp;</b>
   {{ personality.category }}
 </div> -->
-</div>
-<div class="flex items-center">
+      </div>
+      <div class="flex items-center">
         <i data-feather="info" class="w-5 m-1"></i>
         <b>Description:&nbsp;</b><br>
       </div>
@@ -51,19 +66,27 @@ export default {
   props: {
     personality: {},
     onSelected: Function,
-    selected: Boolean
+    selected: Boolean,
+    onMounted: Function,
+ 
   },
   data() {
     return {
-
+      isMounted:false
     };
   },
   mounted() {
+
+    this.isMounted=this.personality.isMounted
+
     nextTick(() => {
       feather.replace()
 
 
     })
+  },
+  computed: {
+
   },
   methods: {
     getImgUrl() {
@@ -75,6 +98,9 @@ export default {
     toggleSelected() {
       this.onSelected(this)
     },
+    toggleMounted() {
+      this.onMounted(this)
+    },
 
   }
 };
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 38fdb895..92235dc9 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -70,7 +70,7 @@
                 class="flex flex-col mb-2  rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
                 <div class="flex flex-row p-3">
                     <button @click.stop="sc_collapsed = !sc_collapsed"
-                        class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center ">
+                        class="text-2xl hover:text-primary  p-2 -m-2 w-full text-left flex flex-row items-center ">
                         <i data-feather="chevron-right" class="mr-2  flex-shrink-0"></i>
 
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
@@ -149,7 +149,7 @@
                 class="flex flex-col mb-2  rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
                 <div class="flex flex-row p-3">
                     <button @click.stop="bzc_collapsed = !bzc_collapsed"
-                        class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex flex-row items-center">
+                        class="text-2xl hover:text-primary p-2 -m-2 w-full text-left flex flex-row items-center">
                         <i data-feather="chevron-right" class="mr-2 flex-shrink-0"></i>
 
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
@@ -206,7 +206,7 @@
                 class="flex flex-col mb-2  rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
                 <div class="flex flex-row p-3">
                     <button @click.stop="mzc_collapsed = !mzc_collapsed"
-                        class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
+                        class="text-2xl hover:text-primary  p-2 -m-2 w-full text-left flex items-center">
                         <i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
                             Models zoo</h3>
@@ -274,36 +274,43 @@
 
                 <div class="flex flex-row p-3 items-center">
                     <button @click.stop="pzc_collapsed = !pzc_collapsed"
-                        class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
-                        <i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
+                        class="text-2xl hover:text-primary  p-2 -m-2 text-left w-full  flex items-center">
+                        <i :data-feather="pzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0 "></i>
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
                             Personalities zoo</h3>
+
+
                         <div v-if="configFile.personalities" class="mr-2">|</div>
-
+                        <!-- LIST OF MOUNTED PERSONALITIES -->
                         <div v-if="configFile.personalities"
-                            class=" text-base font-semibold cursor-pointer select-none items-center">
+                            class=" text-base font-semibold cursor-pointer select-none items-center ">
 
-                            <!-- <div class="flex gap-1 items-center">
-                                <img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
-                                <h3 class="font-bold font-large text-lg line-clamp-1">
-                                    {{ this.configFile.personality_folder }}
-                                </h3>
-                            </div> -->
+                            <div class="flex -space-x-4 items-center" v-if="mountedPersArr.length > 0">
 
-                            <div class="flex -space-x-4 items-center" v-if="mountedPersonalities">
+                                <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
+                                    v-for="(item, index) in mountedPersArr" :key="index">
+                                    <div class="group ">
 
-                                <div class="relative" v-for="item in mountedPersonalities">
-                                    <img :src="item.$refs.imgElement.src"
-                                        class="w-8 h-8 rounded-full object-fill text-red-700 border-2 hover:border-secondary border-transparent"
-                                        :title="item.personality.name">
-                                    <!-- <span
-                                        class="top-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"
-                                        title="Mounted personality"></span> -->
+                                        <img :src="item.$refs.imgElement.src"
+                                            class="w-8 h-8 rounded-full object-fill text-red-700 border-2  group-hover:border-secondary border-transparent"
+                                            :title="item.personality.name">
+                                        <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" @click.stop="unmountPersonality(item)">
+                                            <!-- CLOSE 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>
+
+                                        </span>
+                                    </div>
                                 </div>
                             </div>
+
                         </div>
-
-
                     </button>
                 </div>
                 <div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
@@ -360,7 +367,7 @@
                                 <personality-entry ref="personalitiesZoo" v-for="(pers, index) in personalitiesFiltered"
                                     :key="'index-' + index + '-' + pers.name" :personality="pers"
                                     :selected="pers.folder === this.configFile.personality_folder && pers.category === this.configFile.personality_category && pers.language === this.configFile.personality_language"
-                                    :on-selected="onPersonalitySelected" />
+                                    :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted" />
                             </TransitionGroup>
                         </div>
                     </div>
@@ -384,7 +391,7 @@
                 class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
                 <div class="flex flex-row">
                     <button @click.stop="mc_collapsed = !mc_collapsed"
-                        class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
+                        class="text-2xl hover:text-primary  p-2 -m-2 w-full text-left flex items-center">
                         <i :data-feather="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
                         <h3 class="text-lg font-semibold cursor-pointer select-none">
                             Model Configuration</h3>
@@ -667,6 +674,7 @@ export default {
             isModelSelected: false,
             diskUsage: {},
             ramUsage: {},
+            mountedPersArr: [],
             isMounted: false // Needed to wait for $refs to be rendered
 
 
@@ -729,15 +737,28 @@ export default {
                 this.$refs.toast.showToast("Loading... please wait", 4, false)
             }
             if (pers.personality) {
-                if (this.configFile.personality_folder != pers.personality.folder) {
-
+                
+                    
 
                     this.settingsChanged = true
+                    
                     const res = this.update_setting('personality_folder', pers.personality.folder, () => {
+                        
                         this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
-                        this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
+
+                        console.log('selecting',pers)
+                        this.mountPersonality(pers)
+                        //this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
+                      if(!pers.isMounted){
+                       
+                       
+                    //   }else{
+                    //     console.log('elsing')
+                    //     this.refresh()
+                      }
+                    
                     })
-                }
+                
                 nextTick(() => {
                     feather.replace()
 
@@ -943,6 +964,7 @@ export default {
             //console.log('ram',this.ramUsage)
             this.getPersonalitiesArr()
             this.fetchModels();
+            this.getMountedPersonalities()
         },
         // Accordeon stuff
         toggleAccordion() {
@@ -957,7 +979,7 @@ export default {
             axios.post('/update_setting', obj).then((res) => {
 
                 if (res) {
-
+                    console.log('update_setting',res)
                     if (next !== undefined) {
 
                         next(res)
@@ -1101,6 +1123,8 @@ export default {
             this.isLoading = true
             this.personalities = []
             const dictionary = await this.api_get_req("get_all_personalities")
+            const config = await this.api_get_req("get_config")
+            //console.log('asdas',config)
             // console.log("all_personalities")
             // console.log(dictionary)
             const langkeys = Object.keys(dictionary); // returns languages folder names
@@ -1113,11 +1137,17 @@ export default {
                     const catkey = catkeys[j];
                     const personalitiesArray = catdictionary[catkey];
                     const modPersArr = personalitiesArray.map((item) => {
+
+                        const isMounted = config.personalities.includes(langkey + '/' + catkey + '/' + item.name)
+                        // if (isMounted) {
+                        //     console.log(item)
+                        // }
                         let newItem = {}
                         newItem = item
                         newItem.category = catkey // add new props to items
                         newItem.language = langkey // add new props to items
                         newItem.full_path = langkey + '/' + catkey + '/' + item.name // add new props to items
+                        newItem.isMounted = isMounted // add new props to items
                         return newItem
                     })
 
@@ -1134,7 +1164,7 @@ export default {
             // console.log(this.configFile.personality_category)
             // console.log(this.configFile.personality_language)
             // console.log("Personalities")
-            // console.log(this.personalities)
+            console.log(this.personalities)
             this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
             //console.log(`Personalities filtered ${this.personalitiesFiltered}`)
             this.isLoading = false
@@ -1143,6 +1173,141 @@ export default {
         computedFileSize(size) {
             return filesize(size)
         },
+        async mount_personality(pers) {
+            if (!pers) { return { 'status': false, 'jig': 'no personality - mount_personality' } }
+
+            const obj = {
+                language: pers.language,
+                category: pers.category,
+                name: pers.name
+            }
+            try {
+                const res = await axios.post('/mount_personality', obj);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'mount_personality - settings')
+                return
+            }
+
+
+
+
+
+        },
+        async unmount_personality(pers) {
+            if (!pers) { return { 'status': false, 'jig': 'no personality - unmount_personality' } }
+
+            const obj = {
+                language: pers.language,
+                category: pers.category,
+                name: pers.name
+            }
+
+
+            try {
+                const res = await axios.post('/unmount_personality', obj);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'unmount_personality - settings')
+                return
+            }
+
+
+
+
+
+
+
+
+        },
+        async mountPersonality(pers) {
+            console.log('mount pers',pers)
+            if (!pers) { return }
+            console.log('sss',pers)
+             if(this.configFile.personalities.includes(pers.personality.full_path)){
+                this.$refs.toast.showToast("Personality already mounted", 4, false)
+                return
+            }
+            pers.isMounted=true
+            const res = await this.mount_personality(pers.personality)
+            console.log('ff1', res)
+
+            if (res.status) {
+                this.configFile.personalities = res.personalities
+                this.$refs.toast.showToast("Personality mounted", 4, true)
+                this.refresh()
+            } else {
+                this.$refs.toast.showToast("Could not mount personality", 4, false)
+            }
+
+
+
+
+        },
+        async unmountPersonality(pers) {
+            if (!pers) { return }
+            pers.isMounted=false
+            const res = await this.unmount_personality(pers.personality)
+            console.log('ff', res)
+
+            if (res.status) {
+                this.configFile.personalities = res.personalities
+                this.$refs.toast.showToast("Personality unmounted", 4, true)
+                this.refresh()
+            } else {
+                this.$refs.toast.showToast("Could not unmount personality", 4, false)
+            }
+
+
+        },
+        getMountedPersonalities() {
+
+            let mountedPersArr = []
+            if (this.configFile.personalities.length > 0) {
+
+                for (let i = 0; i < this.configFile.personalities.length; i++) {
+                    const full_path_item = this.configFile.personalities[i]
+
+                    const index = this.$refs.personalitiesZoo.findIndex(item => item.personality.full_path == full_path_item)
+                    if (index) {
+
+                        const pers = this.$refs.personalitiesZoo[index]
+                        if(pers){
+                            mountedPersArr.push(pers)
+
+                        }
+                    }
+                }
+
+            }
+            this.mountedPersArr = []
+            this.mountedPersArr = mountedPersArr
+            //this.mountedPersArr = mountedPersArr
+            console.log('mountedPers', mountedPersArr)
+
+
+        },
+        onPersonalityMounted(persItem) {
+            console.log('toggl', persItem)
+
+            if (persItem.isMounted) {
+                persItem.ismounted = true
+                this.mountPersonality(persItem)
+            } else {
+                persItem.ismounted = false
+                this.unmountPersonality(persItem)
+            }
+        }
 
 
     }, async mounted() {
@@ -1176,7 +1341,7 @@ export default {
         this.ramUsage = await this.api_get_req("ram_usage")
 
         this.isMounted = true
-        this.mountedPersonalities
+        this.getMountedPersonalities()
 
     },
     computed: {
@@ -1241,29 +1406,7 @@ export default {
                 return defaultPersonalityImgPlaceholder
             }
         },
-        mountedPersonalities() {
-            if (!this.isMounted) {
-                return []
-            }
-            let mountedPersArr = []
-            if (this.configFile.personalities.length > 0) {
 
-                for (let i = 0; i < this.configFile.personalities.length; i++) {
-                    const full_path_item = this.configFile.personalities[i]
-
-                    const index = this.$refs.personalitiesZoo.findIndex(item => item.personality.full_path == full_path_item)
-                    if (index) {
-
-                        const pers = this.$refs.personalitiesZoo[index]
-                        mountedPersArr.push(pers)
-                    }
-                }
-
-            }
-            console.log('mountedPers', mountedPersArr)
-
-            return mountedPersArr
-        }
 
     },
     watch: {

From de337efcdb632e064c61110399e24e84994f3a07 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 10 Jun 2023 16:34:50 +0300
Subject: [PATCH 03/11] idk

---
 web/src/views/SettingsView.vue | 64 ++++++++++++++--------------------
 1 file changed, 27 insertions(+), 37 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 92235dc9..1a6afab7 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -737,28 +737,28 @@ export default {
                 this.$refs.toast.showToast("Loading... please wait", 4, false)
             }
             if (pers.personality) {
-                
-                    
 
-                    this.settingsChanged = true
-                    
-                    const res = this.update_setting('personality_folder', pers.personality.folder, () => {
-                        
-                        this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
 
-                        console.log('selecting',pers)
-                        this.mountPersonality(pers)
-                        //this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
-                      if(!pers.isMounted){
-                       
-                       
-                    //   }else{
-                    //     console.log('elsing')
-                    //     this.refresh()
-                      }
-                    
-                    })
-                
+
+                this.settingsChanged = true
+
+                const res = this.update_setting('personality_folder', pers.personality.folder, () => {
+
+                    this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
+
+                    console.log('selecting', pers)
+                    this.mountPersonality(pers)
+                    //this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
+                    if (!pers.isMounted) {
+
+
+                        //   }else{
+                        //     console.log('elsing')
+                        //     this.refresh()
+                    }
+
+                })
+
                 nextTick(() => {
                     feather.replace()
 
@@ -979,7 +979,7 @@ export default {
             axios.post('/update_setting', obj).then((res) => {
 
                 if (res) {
-                    console.log('update_setting',res)
+                    console.log('update_setting', res)
                     if (next !== undefined) {
 
                         next(res)
@@ -1222,23 +1222,16 @@ export default {
                 return
             }
 
-
-
-
-
-
-
-
         },
         async mountPersonality(pers) {
-            console.log('mount pers',pers)
+            console.log('mount pers', pers)
             if (!pers) { return }
-            console.log('sss',pers)
-             if(this.configFile.personalities.includes(pers.personality.full_path)){
+            console.log('sss', pers)
+            if (this.configFile.personalities.includes(pers.personality.full_path)) {
                 this.$refs.toast.showToast("Personality already mounted", 4, false)
                 return
             }
-            pers.isMounted=true
+            pers.isMounted = true
             const res = await this.mount_personality(pers.personality)
             console.log('ff1', res)
 
@@ -1250,13 +1243,10 @@ export default {
                 this.$refs.toast.showToast("Could not mount personality", 4, false)
             }
 
-
-
-
         },
         async unmountPersonality(pers) {
             if (!pers) { return }
-            pers.isMounted=false
+            pers.isMounted = false
             const res = await this.unmount_personality(pers.personality)
             console.log('ff', res)
 
@@ -1282,7 +1272,7 @@ export default {
                     if (index) {
 
                         const pers = this.$refs.personalitiesZoo[index]
-                        if(pers){
+                        if (pers) {
                             mountedPersArr.push(pers)
 
                         }

From 5d488ee197b19ed623e280b77d3682f927c65b6b Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 10 Jun 2023 16:51:18 +0300
Subject: [PATCH 04/11] model upload and download button

---
 web/src/views/SettingsView.vue | 40 ++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 1a6afab7..478888f8 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -234,7 +234,47 @@
                     </button>
                 </div>
                 <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+                    <div class="mb-2">
+                        <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                            Add models:
+                        </label>
+                        <div class="p-2 ">
 
+                            <form>
+                                <div class="mb-3">
+                                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                                        for="file_input">Select
+                                        files</label>
+
+
+                                    <input
+                                        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                        id="multiple_files" type="file" multiple>
+                                </div>
+
+                                <button type="submit"
+                                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Upload</button>
+                            </form>
+
+                        </div>
+                        <div class="p-2  ">
+
+                            <form>
+                                <div class="mb-3">
+                                    <label for="email"
+                                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Model
+                                        URL</label>
+                                    <input type="email" id="email"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                        placeholder="url" required>
+                                </div>
+
+                                <button type="submit"
+                                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Download</button>
+                            </form>
+
+                        </div>
+                    </div>
                     <div v-if="models.length > 0" class="mb-2">
                         <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                             Models: ({{ models.length }})

From 6fa3353f9f730c473d3d6a60d2f17edd94084c94 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 10 Jun 2023 16:55:46 +0300
Subject: [PATCH 05/11] fix

---
 web/src/views/SettingsView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 478888f8..62147ecc 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -328,7 +328,7 @@
                             <div class="flex -space-x-4 items-center" v-if="mountedPersArr.length > 0">
 
                                 <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
-                                    v-for="(item, index) in mountedPersArr" :key="index">
+                                    v-for="(item, index) in mountedPersArr" :key="index + '-'+item.name">
                                     <div class="group ">
 
                                         <img :src="item.$refs.imgElement.src"
@@ -337,7 +337,7 @@
                                         <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" @click.stop="unmountPersonality(item)">
-                                            <!-- CLOSE BUTTON -->
+                                            <!-- 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"

From eeecf129e173a840fba62fca0ad74ccb216fa5fe Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Mon, 12 Jun 2023 18:11:05 +0300
Subject: [PATCH 06/11] needs more testing

---
 web/src/components/PersonalityEntry.vue |   4 +-
 web/src/views/SettingsView.vue          | 207 ++++++++++++++++--------
 2 files changed, 142 insertions(+), 69 deletions(-)

diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index e4c25941..8fd61c6d 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -16,9 +16,9 @@
       <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
       <div class="flex-none">
 
-
+        <!--  -->
         <div class="flex items-center mb-4" @click.stop>
-          <input id="default-checkbox" type="checkbox" v-model="isMounted" @change="toggleMounted"
+          <input id="default-checkbox" type="checkbox" v-model="isMounted" @change.stop="toggleMounted"
             class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
           <label for="default-checkbox" class="ml-2 text-sm font-medium">Mounted</label>
         </div>
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 3fd47227..44896a58 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -32,11 +32,6 @@
 
             <div class="flex gap-3 flex-1 items-center justify-end">
 
-
-                <!-- <div v-if="!isModelSelected" class="text-red-600 flex gap-3 items-center">
-                    <i data-feather="alert-triangle"></i>
-                    No model selected!
-                </div> -->
                 <div class="flex gap-3 items-center">
                     <div v-if="settingsChanged" class="flex gap-3 items-center">
                         Apply changes:
@@ -154,6 +149,11 @@
 
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
                             Binding zoo</h3>
+                        <div v-if="!configFile.binding_name" class="text-base text-red-600 flex gap-3 items-center mr-2">
+                            <i data-feather="alert-triangle" class="flex-shrink-0"></i>
+                            No binding selected!
+                        </div>
+
                         <div v-if="configFile.binding_name" class="mr-2">|</div>
 
                         <div v-if="configFile.binding_name"
@@ -209,33 +209,43 @@
                         class="text-2xl hover:text-primary  p-2 -m-2 w-full text-left flex items-center">
                         <i :data-feather="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
-                        Models zoo</h3>
+                            Models zoo</h3>
                         <div class="flex flex-row items-center">
-                        <div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center mr-2">
-                            <i data-feather="alert-triangle" class="flex-shrink-0"></i>
-                            No model selected!
-                        </div>
 
-                        <div v-if="configFile.model_name" class="mr-2">|</div>
-
-                        <div v-if="configFile.model_name" class="text-base font-semibold cursor-pointer select-none items-center">
-                            <div class="flex gap-1 items-center">
-                            <img :src="imgModel" class="w-8 h-8 rounded-lg object-fill">
-                            <h3 class="font-bold font-large text-lg line-clamp-1">
-                                {{ configFile.model_name }}
-                            </h3>
-                            <button @click.stop="showInputDialog" class="text-base hover:text-primary-dark ml-1 bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-dark-tone duration-200 rounded-lg px-2 py-1">
-                                +
-                            </button>
+                            <div v-if="!configFile.binding_name"
+                                class="text-base text-red-600 flex gap-3 items-center mr-2">
+                                <i data-feather="alert-triangle" class="flex-shrink-0"></i>
+                                Select binding first!
+                            </div>
+
+                            <div v-if="!isModelSelected && configFile.binding_name"
+                                class="text-base text-red-600 flex gap-3 items-center mr-2">
+                                <i data-feather="alert-triangle" class="flex-shrink-0"></i>
+                                No model selected!
+                            </div>
+
+                            <div v-if="configFile.model_name" class="mr-2">|</div>
+
+                            <div v-if="configFile.model_name"
+                                class="text-base font-semibold cursor-pointer select-none items-center">
+                                <div class="flex gap-1 items-center">
+                                    <img :src="imgModel" class="w-8 h-8 rounded-lg object-fill">
+                                    <h3 class="font-bold font-large text-lg line-clamp-1">
+                                        {{ configFile.model_name }}
+                                    </h3>
+                                    <button @click.stop="showInputDialog"
+                                        class="text-base hover:text-primary-dark ml-1 bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-dark-tone duration-200 rounded-lg px-2 py-1">
+                                        +
+                                    </button>
+                                </div>
                             </div>
-                        </div>
                         </div>
                     </button>
                 </div>
 
 
                 <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
-                    <div class="mb-2">
+                    <div class="mb-2" v-if="configFile.binding_name">
                         <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                             Add models:
                         </label>
@@ -329,7 +339,7 @@
                             <div class="flex -space-x-4 items-center" v-if="mountedPersArr.length > 0">
 
                                 <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
-                                    v-for="(item, index) in mountedPersArr" :key="index + '-'+item.name">
+                                    v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
                                     <div class="group ">
 
                                         <img :src="item.$refs.imgElement.src"
@@ -407,7 +417,7 @@
                             <TransitionGroup name="bounce">
                                 <personality-entry ref="personalitiesZoo" v-for="(pers, index) in personalitiesFiltered"
                                     :key="'index-' + index + '-' + pers.name" :personality="pers"
-                                    :selected="pers.folder === this.configFile.personality_folder && pers.category === this.configFile.personality_category && pers.language === this.configFile.personality_language"
+                                    :selected="configFile.active_personality_id == configFile.personalities.findIndex(item => item === pers.full_path) "
                                     :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted" />
                             </TransitionGroup>
                         </div>
@@ -648,16 +658,17 @@
         transform: scale(1);
     }
 }
+
 .bg-primary-light {
-  background-color: aqua
+    background-color: aqua
 }
 
 .hover:bg-primary-light:hover {
-  background-color: aquamarine
+    background-color: aquamarine
 }
 
 .font-bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 </style>
 <script>
@@ -694,7 +705,7 @@ export default {
         return {
             // install custom model
             showModelInputDialog: false,
-            modelPath: '',            
+            modelPath: '',
             // Zoo stuff
             models: [],
             personalities: [],
@@ -752,18 +763,18 @@ export default {
 
             // Trigger the `download_model` endpoint with the path as a POST
             this.$axios.post('/download_model', { path: this.modelPath })
-            .then(response => {
-                // Handle the response
-                // ...
-            })
-            .catch(error => {
-                // Handle the error
-                // ...
-            });
+                .then(response => {
+                    // Handle the response
+                    // ...
+                })
+                .catch(error => {
+                    // Handle the error
+                    // ...
+                });
 
             // Close the input dialog
             this.closeInputDialog();
-        },        
+        },
         collapseAll(val) {
             this.bec_collapsed = val
             this.mzc_collapsed = val
@@ -811,7 +822,7 @@ export default {
                     console.log(error.message, 'fetchCustomModels');
                 });
         },
-        onPersonalitySelected(pers) {
+        async onPersonalitySelected(pers) {
 
             // eslint-disable-next-line no-unused-vars
             if (this.isLoading) {
@@ -823,22 +834,38 @@ export default {
 
                 this.settingsChanged = true
 
-                const res = this.update_setting('personality_folder', pers.personality.folder, () => {
+                if(pers.isMounted){
 
+                   const res= await this.select_personality(pers)
+
+                   if(res.status){
                     this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
 
-                    console.log('selecting', pers)
-                    this.mountPersonality(pers)
-                    //this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
-                    if (!pers.isMounted) {
+                   }
+                    
+                }else{
+                    this.onPersonalityMounted(pers)
+
+                }
 
 
-                        //   }else{
-                        //     console.log('elsing')
-                        //     this.refresh()
-                    }
+                // const res = this.update_setting('personality_folder', pers.personality.folder, () => {
 
-                })
+                //     this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
+
+                //     console.log('selecting', pers)
+                //     //this.mountPersonality(pers)
+                //    this.onPersonalityMounted(pers)
+                //     //this.configFile.personalities[configFile.active_personality_id] = pers.personality.language + "/" + pers.personality.category + "/" + pers.personality.name
+                //     if (!pers.isMounted) {
+
+
+                //         //   }else{
+                //         //     console.log('elsing')
+                //         //     this.refresh()
+                //     }
+
+                // })
 
                 nextTick(() => {
                     feather.replace()
@@ -1035,8 +1062,8 @@ export default {
                 this.configFile.personality_folder = response["personality_name"]
                 console.log("received infos")
             });
-            this.api_get_req("list_personalities").then(response => { 
-                this.persArr = response 
+            this.api_get_req("list_personalities").then(response => {
+                this.persArr = response
                 console.log(`Listed personalities:\n${response}`)
             })
             this.api_get_req("disk_usage").then(response => {
@@ -1248,9 +1275,10 @@ export default {
             // console.log(this.configFile.personality_category)
             // console.log(this.configFile.personality_language)
             // console.log("Personalities")
-            console.log(this.personalities)
+            //console.log(this.personalities)
             this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
             //console.log(`Personalities filtered ${this.personalitiesFiltered}`)
+
             this.isLoading = false
 
         },
@@ -1258,14 +1286,15 @@ export default {
             return filesize(size)
         },
         async mount_personality(pers) {
-            if (!pers) { return { 'status': false, 'jig': 'no personality - mount_personality' } }
+            if (!pers) { return { 'status': false, 'error': 'no personality - mount_personality' } }
+
 
-            const obj = {
-                language: pers.language,
-                category: pers.category,
-                name: pers.name
-            }
             try {
+                const obj = {
+                    language: pers.language,
+                    category: pers.category,
+                    name: pers.name
+                }
                 const res = await axios.post('/mount_personality', obj);
 
                 if (res) {
@@ -1306,23 +1335,57 @@ export default {
                 return
             }
 
+        },
+        async select_personality(pers) {
+            if (!pers) { return { 'status': false, 'jig': 'no personality - select_personality' } }
+            console.log('select pers',pers)
+            const id = this.configFile.personalities.findIndex(item=> item === pers.personality.full_path)
+
+            const obj = {
+                id: id
+            }
+
+
+            try {
+                const res = await axios.post('/select_personality', obj);
+
+                if (res) {
+                    this.configFile = await this.api_get_req("get_config")
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'select_personality - settings')
+                return
+            }
+
         },
         async mountPersonality(pers) {
             console.log('mount pers', pers)
             if (!pers) { return }
-            console.log('sss', pers)
+
             if (this.configFile.personalities.includes(pers.personality.full_path)) {
                 this.$refs.toast.showToast("Personality already mounted", 4, false)
                 return
             }
             pers.isMounted = true
             const res = await this.mount_personality(pers.personality)
-            console.log('ff1', res)
+            console.log('mount_personality res', res)
 
             if (res.status) {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality mounted", 4, true)
-                this.refresh()
+
+                // this.configFile = await this.api_get_req("get_config")
+                // await this.getPersonalitiesArr().then(()=>{
+                //     this.getMountedPersonalities()
+                // })
+                const res2 = await this.select_personality(pers)
+                if (res2.status) {
+                    this.$refs.toast.showToast("Personality activated", 4, true)
+                   
+                }
+                this.getMountedPersonalities()
             } else {
                 this.$refs.toast.showToast("Could not mount personality", 4, false)
             }
@@ -1337,7 +1400,12 @@ export default {
             if (res.status) {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality unmounted", 4, true)
-                this.refresh()
+                //this.refresh()
+                // this.configFile = await this.api_get_req("get_config")
+                // await this.getPersonalitiesArr().then(()=>{
+                //     this.getMountedPersonalities()
+                // })
+                this.getMountedPersonalities()
             } else {
                 this.$refs.toast.showToast("Could not unmount personality", 4, false)
             }
@@ -1367,20 +1435,25 @@ export default {
             this.mountedPersArr = []
             this.mountedPersArr = mountedPersArr
             //this.mountedPersArr = mountedPersArr
-            console.log('mountedPers', mountedPersArr)
+            console.log('getMountedPersonalities', mountedPersArr.length)
 
 
         },
         onPersonalityMounted(persItem) {
             console.log('toggl', persItem)
 
-            if (persItem.isMounted) {
-                persItem.ismounted = true
-                this.mountPersonality(persItem)
-            } else {
+            if (this.configFile.personalities.includes(persItem.personality.full_path)) {
+                //this.$refs.toast.showToast("Personality already mounted", 4, false)
+                //return
                 persItem.ismounted = false
                 this.unmountPersonality(persItem)
+            } else {
+                persItem.ismounted = true
+                this.mountPersonality(persItem)
+                
             }
+
+
         }
 
 

From a9046e557a0110c35c7c5c5ffa267752b2bd7161 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 13 Jun 2023 12:26:06 +0300
Subject: [PATCH 07/11] fixed discussion title not clamping

---
 web/src/components/Discussion.vue | 8 ++++++--
 web/src/views/DiscussionsView.vue | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Discussion.vue b/web/src/components/Discussion.vue
index 6fa778d7..4ea433d7 100644
--- a/web/src/components/Discussion.vue
+++ b/web/src/components/Discussion.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="selected ? 'bg-bg-light-discussion dark:bg-bg-dark-discussion shadow-md' : ''"
-        class="container flex  sm:flex-row item-center shadow-sm gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer"
+        class=" flex flex-row sm:flex-row item-center shadow-sm gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer"
         :id="'dis-' + id" @click.stop="selectEvent()">
 
         <!-- PRE TITLE SECTION -->
@@ -19,8 +19,11 @@
                 :class="loading ? 'min-h-full w-2 rounded-xl self-stretch animate-bounce bg-accent ' : '  '"></div>
 
         </div>
+       
+
+        
         <!-- TITLE -->
-        <p v-if="!editTitle" :title="title" class="truncate w-full">{{ title ? title === "untitled" ? "New discussion" :
+        <p v-if="!editTitle" :title="title" class="line-clamp-1 w-full ml-1 -mx-5">{{ title ? title === "untitled" ? "New discussion" :
             title : "New discussion" }}</p>
 
         <input v-if="editTitle" type="text" id="title-box" ref="titleBox"
@@ -66,6 +69,7 @@
                 </button>
             </div>
         </div>
+    
     </div>
 </template>
 
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 40cb56c8..19a8e196 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -2,7 +2,7 @@
     <div
         class="relative flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone">
         <!-- LEFT SIDE PANEL -->
-        <div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar"
+        <div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
             @dragover.stop.prevent="setDropZoneDiscussion()">
             <div class=" sticky z-10 top-0  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
 
@@ -130,10 +130,10 @@
                 <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here
                 </DragDrop>
             </div>
-            <div class="relative flex flex-row flex-grow mb-10">
+            <div class="relative flex flex-row flex-grow mb-10 ">
 
                 <!-- DISCUSSION LIST -->
-                <div class="mx-4 flex flex-col flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
+                <div class="mx-4 flex flex-col flex-grow  " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
 
 
                     <div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"

From 08cf1c3d8b064a305e264654d532a582c831878d Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 13 Jun 2023 12:57:28 +0300
Subject: [PATCH 08/11] kinda working

---
 web/src/components/Toast.vue   | 10 ++++------
 web/src/views/SettingsView.vue | 35 ++++++++++++++++------------------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/web/src/components/Toast.vue b/web/src/components/Toast.vue
index 4cd05fda..24e56a2b 100644
--- a/web/src/components/Toast.vue
+++ b/web/src/components/Toast.vue
@@ -2,8 +2,7 @@
     <div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3 min-w-[300px]">
         <TransitionGroup name="toastItem" tag="div">
             <div v-for=" t in toastArr" :key="t.id">
-                <div
-                    class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+                <div class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
                     role="alert">
                     <div class="flex flex-row  items-center">
                         <slot>
@@ -22,8 +21,7 @@
                         </slot>
                     </div>
                     <button type="button" @click="close(t.id)"
-                        class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
-                        >
+                        class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
                         <span class="sr-only">Close</span>
                         <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg">
@@ -44,9 +42,9 @@ import feather from 'feather-icons'
 import { nextTick, TransitionGroup } from 'vue'
 export default {
     name: 'Toast',
-    
+
     props: {
-       
+
     },
     data() {
         return {
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 44896a58..e6e993eb 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -335,16 +335,18 @@
                         <!-- LIST OF MOUNTED PERSONALITIES -->
                         <div v-if="configFile.personalities"
                             class=" text-base font-semibold cursor-pointer select-none items-center ">
-
+                            <!-- LIST -->
                             <div class="flex -space-x-4 items-center" v-if="mountedPersArr.length > 0">
-
+                                <!-- ITEM -->
                                 <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
                                     v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
                                     <div class="group ">
 
                                         <img :src="item.$refs.imgElement.src"
-                                            class="w-8 h-8 rounded-full object-fill text-red-700 border-2  group-hover:border-secondary border-transparent"
-                                            :title="item.personality.name">
+                                            class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
+                                            :class="item.selected ? 'border-secondary':'border-transparent z-0'"
+                                            :title="item.personality.name"
+                                            @click.stop="onPersonalitySelected(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" @click.stop="unmountPersonality(item)">
@@ -1368,46 +1370,41 @@ export default {
                 this.$refs.toast.showToast("Personality already mounted", 4, false)
                 return
             }
-            pers.isMounted = true
+            
             const res = await this.mount_personality(pers.personality)
             console.log('mount_personality res', res)
 
             if (res.status) {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality mounted", 4, true)
+                pers.isMounted = true
 
-                // this.configFile = await this.api_get_req("get_config")
-                // await this.getPersonalitiesArr().then(()=>{
-                //     this.getMountedPersonalities()
-                // })
                 const res2 = await this.select_personality(pers)
                 if (res2.status) {
-                    this.$refs.toast.showToast("Personality activated", 4, true)
+                    this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
                    
                 }
                 this.getMountedPersonalities()
             } else {
-                this.$refs.toast.showToast("Could not mount personality", 4, false)
+                pers.isMounted = false
+                this.$refs.toast.showToast("Could not mount personality\nError: "+ res.error, 4, false)
             }
 
         },
         async unmountPersonality(pers) {
             if (!pers) { return }
-            pers.isMounted = false
+            
             const res = await this.unmount_personality(pers.personality)
-            console.log('ff', res)
+           
 
             if (res.status) {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality unmounted", 4, true)
-                //this.refresh()
-                // this.configFile = await this.api_get_req("get_config")
-                // await this.getPersonalitiesArr().then(()=>{
-                //     this.getMountedPersonalities()
-                // })
+
+                pers.isMounted = false
                 this.getMountedPersonalities()
             } else {
-                this.$refs.toast.showToast("Could not unmount personality", 4, false)
+                this.$refs.toast.showToast("Could not unmount personality\nError: "+res.error, 4, false)
             }
 
 

From b90923979ec2834124c12da7206949e677ed8993 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 13 Jun 2023 13:17:14 +0300
Subject: [PATCH 09/11] now its kinda working better

---
 web/src/components/PersonalityEntry.vue | 22 ++++++++++++++++------
 web/src/views/SettingsView.vue          | 25 ++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index 8fd61c6d..3088e0f8 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -16,12 +16,22 @@
       <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
       <div class="flex-none">
 
-        <!--  -->
-        <div class="flex items-center mb-4" @click.stop>
+        <!-- CHECKBOX MOUNTED  -->
+        <button type="button" @click.stop="toggleMounted"
+          class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          {{isMounted ? 'Unmount':'Mount'}}
+          <span
+            class="inline-flex items-center justify-center w-4 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
+            <input disabled id="default-checkbox" type="checkbox" v-model="isMounted" @change.stop="toggleMounted"
+              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+          </span>
+        </button>
+
+        <!-- <div class="flex items-center mb-4" @click.stop title="Click to mount/unmount">
           <input id="default-checkbox" type="checkbox" v-model="isMounted" @change.stop="toggleMounted"
             class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
           <label for="default-checkbox" class="ml-2 text-sm font-medium">Mounted</label>
-        </div>
+        </div> -->
       </div>
 
 
@@ -68,16 +78,16 @@ export default {
     onSelected: Function,
     selected: Boolean,
     onMounted: Function,
- 
+
   },
   data() {
     return {
-      isMounted:false
+      isMounted: false
     };
   },
   mounted() {
 
-    this.isMounted=this.personality.isMounted
+    this.isMounted = this.personality.isMounted
 
     nextTick(() => {
       feather.replace()
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index e6e993eb..bdbf5503 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1400,9 +1400,18 @@ export default {
             if (res.status) {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality unmounted", 4, true)
-
                 pers.isMounted = false
                 this.getMountedPersonalities()
+                // Select some other personality
+                const lastPers = this.mountedPersArr[this.mountedPersArr.length-1]
+                console.log(lastPers, this.mountedPersArr.length)
+                const res2 = await this.select_personality(lastPers)
+                if (res2.status) {
+                    this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
+                   
+                }
+
+
             } else {
                 this.$refs.toast.showToast("Could not unmount personality\nError: "+res.error, 4, false)
             }
@@ -1437,15 +1446,21 @@ export default {
 
         },
         onPersonalityMounted(persItem) {
-            console.log('toggl', persItem)
+            
 
             if (this.configFile.personalities.includes(persItem.personality.full_path)) {
                 //this.$refs.toast.showToast("Personality already mounted", 4, false)
                 //return
-                persItem.ismounted = false
-                this.unmountPersonality(persItem)
+                //persItem.ismounted = false
+                if(this.configFile.personalities.length==1){
+                    this.$refs.toast.showToast("Can't unmount last personality", 4, false)
+
+                }else{
+                    this.unmountPersonality(persItem)
+
+                }
             } else {
-                persItem.ismounted = true
+                //persItem.ismounted = true
                 this.mountPersonality(persItem)
                 
             }

From 642d76c8bcd15afbd5ac5b71042cb7c20db15bbf Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 13 Jun 2023 13:27:26 +0300
Subject: [PATCH 10/11] fixed scroll.. again

---
 web/src/views/DiscussionsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 19a8e196..496f60e8 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -517,7 +517,7 @@ export default {
             }
         },
         scrollToElementInContainer(el, containerId) {
-            const topPos = el.offsetTop + el.clientHeight;
+            const topPos = el.offsetTop ; //+ el.clientHeight
             const container = document.getElementById(containerId)
            // console.log(el.offsetTop , el.clientHeight, container.clientHeight)
 

From 08083e9ae41f68870d11ecbc5cbbf1451dbf68a6 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 13 Jun 2023 17:25:44 +0300
Subject: [PATCH 11/11] smol fix

---
 web/src/views/SettingsView.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 9c04af16..d5236db1 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -339,15 +339,19 @@
                                 <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
                                     v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
                                     <div class="group ">
+                                        <button @click.stop="onPersonalitySelected(item)">
 
                                         <img :src="item.$refs.imgElement.src"
                                             class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
                                             :class="item.selected ? 'border-secondary':'border-transparent z-0'"
                                             :title="item.personality.name"
-                                            @click.stop="onPersonalitySelected(item)">
+                                            >
+                                        </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" @click.stop="unmountPersonality(item)">
+                                            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">
@@ -357,6 +361,7 @@
                                             </svg>
 
                                         </span>
+                                    </button>
                                     </div>
                                 </div>
                             </div>
@@ -826,6 +831,10 @@ export default {
             }
             if (pers.personality) {
 
+                if(pers.selected){
+                    this.$refs.toast.showToast("Personality already selected", 4, true)
+                    return
+                }
 
 
                 this.settingsChanged = true
@@ -1398,10 +1407,11 @@ export default {
                 this.getMountedPersonalities()
                 // Select some other personality
                 const lastPers = this.mountedPersArr[this.mountedPersArr.length-1]
+
                 console.log(lastPers, this.mountedPersArr.length)
                 const res2 = await this.select_personality(lastPers)
                 if (res2.status) {
-                    this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
+                    this.$refs.toast.showToast("Selected personality:\n" + lastPers.personality.name, 4, true)
                    
                 }