Merge pull request #281 from andzejsp/pers-mount

Pers mount

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>
 

web/src/components/PersonalityEntry.vue

@@ -1,13 +1,38 @@
 <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 }}
+        {{ personality.name }}
-    </h3>
+      </h3>
+      <div class="grow">
+        <!-- EMPTY SPACE FILLER -->
+      </div>
+      <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
+      <div class="flex-none">
+
+        <!-- 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>
@@ -18,9 +43,9 @@
           <i data-feather="user" class="w-5 m-1"></i>
           <b>Author:&nbsp;</b>
 
-  {{ personality.author }}
+          {{ personality.author }}
-</div>
+        </div>
-<!-- <div class="">
+        <!-- <div class="">
   <b>Language:&nbsp;</b>
   {{ personality.language }}
 </div>
@@ -28,8 +53,8 @@
   <b>Category:&nbsp;</b>
   {{ personality.category }}
 </div> -->
-</div>
+      </div>
-<div class="flex items-center">
+      <div class="flex items-center">
         <i data-feather="info" class="w-5 m-1"></i>
         <b>Description:&nbsp;</b><br>
       </div>
@@ -51,19 +76,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 +108,9 @@ export default {
     toggleSelected() {
       this.onSelected(this)
     },
+    toggleMounted() {
+      this.onMounted(this)
+    },
 
   }
 };

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
+                <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"
-                    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">

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' : ''"
@@ -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)
 

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:
@@ -70,7 +65,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,11 +144,16 @@
                 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">
                             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"
@@ -206,17 +206,25 @@
                 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>
+                            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.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">
@@ -235,7 +243,47 @@
 
 
                 <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+                    <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>
+                        <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 }})
@@ -273,22 +321,49 @@
                 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">
+                        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>
+                        <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 ">
+                            <!-- 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 ">
+                                        <button @click.stop="onPersonalitySelected(item)">
 
-                            <div class="flex gap-1 items-center">
+                                        <img :src="item.$refs.imgElement.src"
-                                <img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
+                                            class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary "
-                                <h3 class="font-bold font-large text-lg line-clamp-1">
+                                            :class="item.selected ? 'border-secondary':'border-transparent z-0'"
-                                    {{ this.configFile.personality_folder }}
+                                            :title="item.personality.name"
-                                </h3>
+                                            >
+                                        </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>
+
+                                        </span>
+                                    </button>
+                                    </div>
+                                </div>
                             </div>
 
                         </div>
@@ -347,8 +422,8 @@
                             <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-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted" />
                             </TransitionGroup>
                         </div>
                     </div>
@@ -372,7 +447,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>
@@ -589,16 +664,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>
@@ -630,6 +706,7 @@ export default {
         Toast,
         PersonalityEntry,
         BindingEntry,
+
     },
     data() {
 
@@ -671,6 +748,7 @@ export default {
             isModelSelected: false,
             diskUsage: {},
             ramUsage: {},
+            mountedPersArr: [],
             isMounted: false // Needed to wait for $refs to be rendered
 
 
@@ -745,22 +823,55 @@ export default {
                     console.log(error.message, 'fetchCustomModels');
                 });
         },
-        onPersonalitySelected(pers) {
+        async onPersonalitySelected(pers) {
 
             // eslint-disable-next-line no-unused-vars
             if (this.isLoading) {
                 this.$refs.toast.showToast("Loading... please wait", 4, false)
             }
             if (pers.personality) {
-                if (this.configFile.personality_folder != pers.personality.folder) {
 
-
+                if(pers.selected){
-                    this.settingsChanged = true
+                    this.$refs.toast.showToast("Personality already selected", 4, true)
-                    const res = this.update_setting('personality_folder', pers.personality.folder, () => {
+                    return
-                        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
-                    })
                 }
+
+
+                this.settingsChanged = true
+
+                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)
+
+                   }
+                    
+                }else{
+                    this.onPersonalityMounted(pers)
+
+                }
+
+
+                // 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()
 
@@ -969,6 +1080,7 @@ export default {
             //console.log('ram',this.ramUsage)
             this.getPersonalitiesArr()
             this.fetchModels();
+            this.getMountedPersonalities()
         },
         // Accordeon stuff
         toggleAccordion() {
@@ -983,7 +1095,7 @@ export default {
             axios.post('/update_setting', obj).then((res) => {
 
                 if (res) {
-
+                    console.log('update_setting', res)
                     if (next !== undefined) {
 
                         next(res)
@@ -1127,6 +1239,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
@@ -1139,10 +1253,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
                     })
 
@@ -1159,15 +1280,197 @@ 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
 
         },
         computedFileSize(size) {
             return filesize(size)
         },
+        async mount_personality(pers) {
+            if (!pers) { return { 'status': false, 'error': 'no personality - mount_personality' } }
+
+
+            try {
+                const obj = {
+                    language: pers.language,
+                    category: pers.category,
+                    name: pers.name
+                }
+                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 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 }
+
+            if (this.configFile.personalities.includes(pers.personality.full_path)) {
+                this.$refs.toast.showToast("Personality already mounted", 4, false)
+                return
+            }
+            
+            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
+
+                const res2 = await this.select_personality(pers)
+                if (res2.status) {
+                    this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
+                   
+                }
+                this.getMountedPersonalities()
+            } else {
+                pers.isMounted = false
+                this.$refs.toast.showToast("Could not mount personality\nError: "+ res.error, 4, false)
+            }
+
+        },
+        async unmountPersonality(pers) {
+            if (!pers) { return }
+            
+            const res = await this.unmount_personality(pers.personality)
+           
+
+            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" + lastPers.personality.name, 4, true)
+                   
+                }
+
+
+            } else {
+                this.$refs.toast.showToast("Could not unmount personality\nError: "+res.error, 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('getMountedPersonalities', mountedPersArr.length)
+
+
+        },
+        onPersonalityMounted(persItem) {
+            
+
+            if (this.configFile.personalities.includes(persItem.personality.full_path)) {
+                //this.$refs.toast.showToast("Personality already mounted", 4, false)
+                //return
+                //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
+                this.mountPersonality(persItem)
+                
+            }
+
+
+        }
 
 
     }, async mounted() {
@@ -1199,8 +1502,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.getMountedPersonalities()
 
     },
     computed: {
@@ -1266,6 +1570,7 @@ export default {
             }
         },
 
+
     },
     watch: {
         bec_collapsed() {