From 62a523cc3ce18d9749b6ad70d6a9832344bea8d0 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 27 Jun 2023 13:58:32 +0300
Subject: [PATCH 01/15] placeholder

---
 web/src/components/Message.vue    | 44 ++++++++++++++++++++++++-------
 web/src/views/DiscussionsView.vue |  4 +--
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index f30b5fe3..8a124fbd 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -1,11 +1,35 @@
 <template>
     <div
-        class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-x-hidden p-4 pb-2">
+        class="relative group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2 ">
         <div class="flex flex-row  gap-2 ">
-            <div class="flex-shrink-0 ">
+            <div class=" flex-shrink-0">
                 <!-- AVATAR -->
-                <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
+                <div class="group/avatar " >
+                    <img :src="getImgUrl()" @error="defaultImg($event)" :data-popover-target="'avatar' + message.id" data-popover-placement="bottom"
+                        class="w-10 h-10 rounded-full object-fill text-red-700">
+                        
+                        
+                    <div data-popper :id="'avatar' + message.id"
+                        class=" -mx-2 absolute invisible rounded-lg bg-bg-light dark:bg-bg-dark block  m-2 p-1 opacity-0 z-10  transition-opacity ease-in-out  duration-200 group-hover/avatar:visible group-hover/avatar:opacity-100 ">
+                        <div data-popper-arrow class="-z-20 absolute mx-4 -my-1 top-0 "></div>
+                        <div class="relative flex flex-row items-center">
+                            
+                            <img :src="getImgUrl()" @error="defaultImg($event)" class=" rounded-lg w-60 h-60" />
 
+                            <div class="flex flex-col justify-between p-4 leading-normal">
+                                <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy
+                                    technology acquisitions 2021</h5>
+                                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise
+                                    technology acquisitions of 2021 so far, in reverse chronological order.</p>
+                            </div>
+                            
+                        </div>
+                        
+                    </div>
+                    
+                    
+                </div>
+                
             </div>
 
             <div class="flex flex-col w-full flex-grow-0 ">
@@ -325,17 +349,17 @@ export default {
             const endTime = new Date(Date.parse(this.message.finished_generating_at))
             //const spentTime = new Date(endTime - startTime)
             const same = endTime.getTime() === startTime.getTime();
-            if(same){
-                
+            if (same) {
+
                 return undefined
             }
 
-            if(!endTime.getTime()){
-                return undefined 
+            if (!endTime.getTime()) {
+                return undefined
             }
             let timeDiff = endTime.getTime() - startTime.getTime();
 
-            
+
             const hours = Math.floor(timeDiff / (1000 * 60 * 60));
 
             timeDiff -= hours * (1000 * 60 * 60);
@@ -364,8 +388,8 @@ export default {
             // let m = addZero(spentTime.getMinutes());
             // let s = addZero(spentTime.getSeconds());
             const time = addZero(hours) + "h:" + addZero(mins) + "m:" + addZero(secs) + 's';
-            
-            
+
+
             return time
 
 
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index a3d87082..7a05ab9c 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -625,7 +625,7 @@ export default {
             // "message":message,#markdown.markdown(message),
             // "user_message_id": self.current_user_message_id,
             // "ai_message_id": self.current_ai_message_id,
-            console.log(msgObj);
+            console.log('create bot', msgObj);
             if (msgObj["status"] == "generation_started") {
                 this.updateLastUserMsg(msgObj)
                 // Create response message
@@ -706,7 +706,7 @@ export default {
         },
         streamMessageContent(msgObj) {
             // Streams response message content from binding
-            //console.log('stream msg',msgObj)
+            console.log('stream msg',msgObj)
             const parent = msgObj.user_message_id
             const discussion_id = msgObj.discussion_id
             this.setDiscussionLoading(discussion_id, true);

From f1b6e7e38eada5cca153f36a66d5990284e15caf Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 27 Jun 2023 14:04:29 +0300
Subject: [PATCH 02/15] placer

---
 web/src/components/Message.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index 8a124fbd..7b853bb8 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -9,12 +9,12 @@
                         class="w-10 h-10 rounded-full object-fill text-red-700">
                         
                         
-                    <div data-popper :id="'avatar' + message.id"
-                        class=" -mx-2 absolute invisible rounded-lg bg-bg-light dark:bg-bg-dark block  m-2 p-1 opacity-0 z-10  transition-opacity ease-in-out  duration-200 group-hover/avatar:visible group-hover/avatar:opacity-100 ">
-                        <div data-popper-arrow class="-z-20 absolute mx-4 -my-1 top-0 "></div>
-                        <div class="relative flex flex-row items-center">
+                    <div data-popper :id="'avatar' + message.id"   role="tooltip"
+                        class=" -mx-2 absolute invisible rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel block  m-2 p-1 opacity-0 z-10  transition-opacity ease-in-out  duration-500 group-hover/avatar:visible group-hover/avatar:opacity-100 ">
+                        
+                        <div class="relative flex flex-row items-start">
                             
-                            <img :src="getImgUrl()" @error="defaultImg($event)" class=" rounded-lg w-60 h-60" />
+                            <img :src="getImgUrl()" @error="defaultImg($event)" class=" border-2 border-primary p-1 rounded-lg w-60 h-60" />
 
                             <div class="flex flex-col justify-between p-4 leading-normal">
                                 <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy
@@ -24,7 +24,7 @@
                             </div>
                             
                         </div>
-                        
+                     
                     </div>
                     
                     

From ccbf3fa2839906c9bfe51d271878899dc9b31a50 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Tue, 27 Jun 2023 18:01:32 +0300
Subject: [PATCH 03/15] wip not ready

---
 tests/end_point_tests/endpoints.http          |   2 +-
 web/src/components/ChatBox.vue                |  20 +-
 web/src/components/Message.vue                |   6 +-
 web/src/components/MountedPersonalities.vue   |   8 +-
 .../components/MountedPersonalitiesList.vue   | 439 ++++++++++++++++++
 web/src/views/DiscussionsView.vue             |   2 +-
 6 files changed, 462 insertions(+), 15 deletions(-)
 create mode 100644 web/src/components/MountedPersonalitiesList.vue

diff --git a/tests/end_point_tests/endpoints.http b/tests/end_point_tests/endpoints.http
index 06320daa..b1f2c104 100644
--- a/tests/end_point_tests/endpoints.http
+++ b/tests/end_point_tests/endpoints.http
@@ -18,7 +18,7 @@ POST http://localhost:9600/load_discussion
 Content-Type: application/json
 
 {
-    "id": 0 // Discussion ID Must be integer
+    "id": 1 // Discussion ID Must be integer
 }
 ############################################
 ### Delete Discussion by ID
diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index baf92a90..061a6f39 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -86,12 +86,15 @@
 
                         </button>
                     </div>
+                    <div v-if="showPersonalities" class="flex items-center mx-1">
+                        <MountedPersonalitiesList  @click.stop=""/>
+                    </div>
                     <!-- CHAT BOX -->
-                    <div class="flex flex-row flex-grow items-center gap-2 ">
-                        <!-- <div class="w-24">
+                    <div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
+                        <div class="w-24 overflow-visible">
                             <MountedPersonalities  @click.stop=""/>
 
-                        </div> -->
+                        </div>
                        
 
                         <div class="relative grow">
@@ -141,6 +144,7 @@
             </div>
         </form>
     </div>
+
 </template>
 <style scoped>
 /* THESE ARE FOR TransitionGroup components */
@@ -175,16 +179,19 @@ import { nextTick, TransitionGroup } from 'vue'
 import feather from 'feather-icons'
 import filesize from '../plugins/filesize'
 import MountedPersonalities from './MountedPersonalities.vue'
+import MountedPersonalitiesList from './MountedPersonalitiesList.vue'
 export default {
     name: 'ChatBox',
     emits: ["messageSentEvent", "stopGenerating"],
     props: {
 
-        loading: false
+        loading: false,
+        discussionList:[]
 
     },
     components: {
-        MountedPersonalities
+        MountedPersonalities,
+        MountedPersonalitiesList
     },
     setup() {
 
@@ -195,7 +202,8 @@ export default {
         return {
             message: "",
             fileList: [],
-            totalSize: 0
+            totalSize: 0,
+            showPersonalities:true
         }
     },
     methods: {
diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index 7b853bb8..9e856f40 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -8,8 +8,8 @@
                     <img :src="getImgUrl()" @error="defaultImg($event)" :data-popover-target="'avatar' + message.id" data-popover-placement="bottom"
                         class="w-10 h-10 rounded-full object-fill text-red-700">
                         
-                        
-                    <div data-popper :id="'avatar' + message.id"   role="tooltip"
+                        <!-- ADDITIONAL INFO -->
+                    <!-- <div data-popper :id="'avatar' + message.id"   role="tooltip"
                         class=" -mx-2 absolute invisible rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel block  m-2 p-1 opacity-0 z-10  transition-opacity ease-in-out  duration-500 group-hover/avatar:visible group-hover/avatar:opacity-100 ">
                         
                         <div class="relative flex flex-row items-start">
@@ -25,7 +25,7 @@
                             
                         </div>
                      
-                    </div>
+                    </div> -->
                     
                     
                 </div>
diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index c3c9227f..5009e4ba 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -1,13 +1,13 @@
 <template>
     <!-- LIST OF MOUNTED PERSONALITIES -->
     <div
-        class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-visible overflow-x-auto scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
+        class="overflow-visible text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-x-auto -my-2 pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
         <!-- LIST -->
-        <div class="flex -space-x-4 items-center ">
+        <div class="flex -space-x-4 items-center overflow-visible my-2 mx-2">
             <!-- ITEM -->
-            <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
+            <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 overflow-visible"
                 v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name">
-                <div class="group items-center flex flex-row">
+                <div class="group items-center flex flex-row overflow-visible">
                     <button @click.stop="onPersonalitySelected(item)">
 
                         <img :src="bUrl + item.avatar" @error="personalityImgPlacehodler"
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
new file mode 100644
index 00000000..84f43de4
--- /dev/null
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -0,0 +1,439 @@
+<template>
+    <!-- LIST OF MOUNTED PERSONALITIES -->
+    <div
+        class="text-left overflow-visible text-base font-semibold cursor-pointer select-none items-center flex flex-row overflow-x-auto -my-2 pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
+        <!-- LIST -->
+        <div v-if="mountedPersArr.length > 0" class="m-2">
+            <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                Mounted Personalities: ({{ mountedPersArr.length }})
+            </label>
+            <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-4 md:grid-cols-2 gap-4 max-h-96">
+                <TransitionGroup name="bounce">
+                    <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
+                        :key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path"
+                        :selected="configFile.active_personality_id == configFile.personalities.findIndex(item => item === pers.full_path)"
+                        :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
+                        :on-settings="onSettingsPersonality" />
+                </TransitionGroup>
+            </div>
+        </div>
+
+
+
+        <Toast ref="toast">
+        </Toast>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
+import PersonalityEntry from './PersonalityEntry.vue'
+import Toast from './Toast.vue'
+const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
+axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
+export default {
+    props: {
+
+
+
+    },
+    components: {
+        PersonalityEntry,
+        Toast,
+    },
+    name: 'MountedPersonalitiesList',
+    setup() {
+
+
+        return {
+            configFile: {},
+            mountedPersArr: [],
+            personalities: [],
+            bUrl: bUrl,
+            isMounted: false,
+            isLoading: false
+        }
+    },
+    async mounted() {
+        await this.constructor()
+        this.isMounted = true
+    },
+    async activated() {
+        if (this.isMounted) {
+            await this.constructor()
+        }
+
+    },
+    methods: {
+        async constructor() {
+            this.configFile = await this.api_get_req("get_config")
+            let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
+            this.configFile.personality_language = personality_path_infos["personality_language"]
+            this.configFile.personality_category = personality_path_infos["personality_category"]
+            this.configFile.personality_folder = personality_path_infos["personality_name"]
+
+            await this.getPersonalitiesArr().then(() => {
+                this.getMountedPersonalities()
+                this.$forceUpdate()
+            })
+        },
+        async api_get_req(endpoint) {
+            try {
+                const res = await axios.get("/" + endpoint);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'api_get_req - mountedPersonalities')
+                return
+            }
+
+
+        },
+        async getPersonalitiesArr() {
+            this.isLoading = true
+            this.personalities = []
+            const dictionary = await this.api_get_req("get_all_personalities")
+            const config = await this.api_get_req("get_config")
+            //this.configFile=config
+            //console.log('asdas',config)
+            // console.log("all_personalities")
+            // console.log(dictionary)
+            const langkeys = Object.keys(dictionary); // returns languages folder names
+            for (let i = 0; i < langkeys.length; i++) {
+                const langkey = langkeys[i];
+                const catdictionary = dictionary[langkey];
+                const catkeys = Object.keys(catdictionary); // returns categories
+
+                for (let j = 0; j < catkeys.length; j++) {
+                    const catkey = catkeys[j];
+                    const personalitiesArray = catdictionary[catkey];
+                    const modPersArr = personalitiesArray.map((item) => {
+
+                        const isMounted = config.personalities.includes(langkey + '/' + catkey + '/' + item.folder)
+                        // 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.folder // add new props to items
+                        newItem.isMounted = isMounted // add new props to items
+                        return newItem
+                    })
+
+
+                    if (this.personalities.length == 0) {
+                        this.personalities = modPersArr
+                    } else {
+                        this.personalities = this.personalities.concat(modPersArr)
+                    }
+                }
+
+            }
+
+            this.personalities.sort((a, b) => a.name.localeCompare(b.name))
+            this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
+            this.personalitiesFiltered.sort()
+
+            this.isLoading = false
+
+        },
+        personalityImgPlacehodler(event) {
+            event.target.src = defaultPersonalityImgPlaceholder
+        },
+        onPersonalityMounted(persItem) {
+
+            if (this.configFile.personalities.includes(persItem.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)
+
+            }
+
+            this.isLoading = true
+        },
+        async onPersonalitySelected(pers) {
+            // eslint-disable-next-line no-unused-vars
+            if (this.isLoading) {
+                this.$refs.toast.showToast("Loading... please wait", 4, false)
+            }
+            this.isLoading = true
+            console.log('ppa', pers)
+            if (pers) {
+
+                if (pers.selected) {
+                    this.$refs.toast.showToast("Personality already selected", 4, true)
+                    return
+                }
+
+
+                this.settingsChanged = true
+
+                if (pers.isMounted) {
+
+                    const res = await this.select_personality(pers)
+                    if (res) {
+                        if (res.status) {
+                            await this.constructor()
+
+                            this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
+
+                        }
+                    }
+
+
+                } else {
+                    this.onPersonalityMounted(pers)
+
+                }
+
+
+                this.isLoading = false
+            }
+
+        },
+        onSettingsPersonality(persEntry) {
+            try {
+                this.isLoading = true
+                axios.get('/get_active_personality_settings').then(res => {
+                    this.isLoading = false
+                    if (res) {
+
+                        console.log('pers sett', res)
+                        if (res.data && Object.keys(res.data).length > 0) {
+
+                            this.$refs.universalForm.showForm(res.data, "Personality settings - " + persEntry.personality.name, "Save changes", "Cancel").then(res => {
+
+                                // send new data
+                                try {
+                                    axios.post('/set_active_personality_settings',
+                                        res).then(response => {
+
+                                            if (response && response.data) {
+                                                console.log('personality set with new settings', response.data)
+                                                this.$refs.toast.showToast("Personality settings updated successfully!", 4, true)
+
+                                            } else {
+                                                this.$refs.toast.showToast("Did not get Personality settings responses.\n" + response, 4, false)
+                                                this.isLoading = false
+                                            }
+
+
+                                        })
+                                } catch (error) {
+                                    this.$refs.toast.showToast("Did not get Personality settings responses.\n Endpoint error: " + error.message, 4, false)
+                                    this.isLoading = false
+                                }
+
+                            })
+                        } else {
+                            this.$refs.toast.showToast("Personality has no settings", 4, false)
+                            this.isLoading = false
+                        }
+
+                    }
+                })
+
+            } catch (error) {
+                this.isLoading = false
+                this.$refs.toast.showToast("Could not open personality settings. Endpoint error: " + error.message, 4, false)
+            }
+
+        },
+        async mount_personality(pers) {
+            if (!pers) { return { 'status': false, 'error': 'no personality - mount_personality' } }
+
+            try {
+                const obj = {
+                    language: pers.language,
+                    category: pers.category,
+                    folder: pers.folder
+                }
+                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, 'error': 'no personality - unmount_personality' } }
+
+            const obj = {
+                language: pers.language,
+                category: pers.category,
+                folder: pers.folder
+            }
+
+
+            try {
+                this.isLoading = true
+                const res = await axios.post('/unmount_personality', obj);
+                this.isLoading = false
+
+                if (res) {
+                    return res.data
+                }
+            } catch (error) {
+                console.log(error.message, 'unmount_personality - settings')
+                return
+            }
+
+        },
+        async select_personality(pers) {
+            if (!pers) { return { 'status': false, 'error': 'no personality - select_personality' } }
+            console.log('select pers', pers)
+            const id = this.configFile.personalities.findIndex(item => item === pers.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")
+                    let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
+                    this.configFile.personality_language = personality_path_infos["personality_language"]
+                    this.configFile.personality_category = personality_path_infos["personality_category"]
+                    this.configFile.personality_folder = personality_path_infos["personality_name"]
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error, 'select_personality - settings')
+                return
+            }
+
+        },
+        async mountPersonality(pers) {
+            this.isLoading = true
+            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.personality)
+                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)
+            }
+            this.isLoading = false
+
+        },
+        async unmountPersonality(pers) {
+            this.isLoading = true
+            if (!pers) { return }
+
+            const res = await this.unmount_personality(pers.personality || pers)
+
+
+            if (res.status) {
+                this.configFile.personalities = res.personalities
+                this.$refs.toast.showToast("Personality unmounted", 4, true)
+                const persId = this.personalities.findIndex(item => item.full_path == pers.full_path)
+                const persFilteredId = this.personalitiesFiltered.findIndex(item => item.full_path == pers.full_path)
+                const persIdZoo = this.$refs.personalitiesZoo.findIndex(item => item.full_path == pers.full_path)
+                console.log('ppp', this.personalities[persId])
+
+                this.personalities[persId].isMounted = false
+
+                if (persFilteredId > -1) {
+                    this.personalitiesFiltered[persFilteredId].isMounted = false
+
+                }
+
+                if (persIdZoo > -1) {
+                    this.$refs.personalitiesZoo[persIdZoo].isMounted = false
+
+                }
+
+
+                //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.personality)
+                const res2 = await this.select_personality(pers.personality)
+                if (res2.status) {
+                    this.$refs.toast.showToast("Selected personality:\n" + lastPers.name, 4, true)
+
+                }
+
+
+            } else {
+                this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
+            }
+
+            this.isLoading = false
+        },
+        getMountedPersonalities() {
+
+            let mountedPersArr = []
+            console.log(this.configFile.personalities.length)
+            // console.log('perrs listo',this.personalities)
+            for (let i = 0; i < this.configFile.personalities.length; i++) {
+                const full_path_item = this.configFile.personalities[i]
+                const index = this.personalities.findIndex(item => item.full_path == full_path_item)
+
+                const pers = this.personalities[index]
+                if (pers) {
+                    mountedPersArr.push(pers)
+                }
+                else {
+                    mountedPersArr.push(this.personalities[this.personalities.findIndex(item => item.full_path == "english/generic/lollms")])
+                }
+            }
+            this.mountedPersArr = []
+            this.mountedPersArr = mountedPersArr
+            //this.mountedPersArr = mountedPersArr
+            console.log('getMountedPersonalities', mountedPersArr)
+            console.log('fig', this.configFile.personality_category)
+
+        },
+    }
+}
+</script>
+
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 7a05ab9c..745e45b6 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -189,7 +189,7 @@
 
             </div>
             <div class=" bottom-0 container flex flex-row items-center justify-center " v-if="currentDiscussion.id">
-                <ChatBox ref="chatBox" @messageSentEvent="sendMsg" :loading="isGenerating" @stopGenerating="stopGenerating">
+                <ChatBox ref="chatBox" @messageSentEvent="sendMsg" :loading="isGenerating" :discussionList="list" @stopGenerating="stopGenerating">
                 </ChatBox>
             </div>
             <!-- CAN ADD FOOTER PANEL HERE -->

From 4976b6e9be49238e0bf6ae000cefbbaad262dfe4 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Wed, 28 Jun 2023 00:14:13 +0200
Subject: [PATCH 04/15] updated

---
 docs/youtube/script_lollms.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/youtube/script_lollms.md b/docs/youtube/script_lollms.md
index d98ac24a..9a6b4c04 100644
--- a/docs/youtube/script_lollms.md
+++ b/docs/youtube/script_lollms.md
@@ -58,4 +58,15 @@ Let's select a 4 bits quantization which is a good ratio between size and perfor
 Press install and wait for it to download the model. You can install multiple models simultaniously. Make sure you have enough disk space as some of those models are very big.
 Now let's take a look at the new personalities system.
 The new system allows us to mount multiple personalities in the same session. This means that we can create a multipersonalities discussion.
+There are many categories for english language. I will probably create more languages in the future and translate those personality files.
+There are in total over 260 personalities in different fields and sorts. You can checkout the Job category where you cvan find multiple personalities.
+We can activate personalities like shoping in a mall. Those personalities will be loaded at startup and will be easily accessible in the mounted personalities list.
+Most personalities just have a yaml conditioning file and a logo in the assets folder. But some other personalities are more advanted with behavior and configuration parameters. Here we are going to show simple conversational personalities.
+You can either use the personalities category organization or the search bar.
+Once you finish mounting personalities, you can start a conversation. Here we talk to Einstein.
+Let's ask it to teach us relativity.
+To select another personality to interact with Einstein, just go to the settings page and select the personality you want to use. We are developing fast access to personalities in the main discussion page, it should be out in few days from now. 
+Let's select Jack Sparrow.
+To trigger generation, just press the refresh button from previous message and the tool will use your active personality to generate the next mesasge. you can go on doing this and exploring possible interactions between AI-s.
 
+Now let's take a look in

From 205574de3ab6024f2764366bff84947aefee1aeb Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Wed, 28 Jun 2023 00:14:18 +0200
Subject: [PATCH 05/15] updated

---
 web/src/components/MarkdownRenderer.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MarkdownRenderer.vue b/web/src/components/MarkdownRenderer.vue
index a616cd18..9a643a3f 100644
--- a/web/src/components/MarkdownRenderer.vue
+++ b/web/src/components/MarkdownRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="break-all">
-    <div v-html="renderedMarkdown" class=""></div>
+    <div v-html="renderedMarkdown" class="markdown-content"></div>
   </div>
 </template>
 
@@ -82,6 +82,7 @@ const markdownIt = new MarkdownIt('commonmark', {
       '</div>';
     return codeString;
   },
+  bulletListMarker: '•',
 }).use(emoji).use(attrs); // Add attrs plugin for adding attributes to elements
 
 markdownIt.renderer.rules.link_open = (tokens, idx, options, env, self) => {

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

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

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

From 715818b9cb0308779bf0fbcccd08a199bb7cc12c Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 08:53:58 +0300
Subject: [PATCH 07/15] needs debugs

---
 web/src/components/MountedPersonalities.vue     | 12 +++++++-----
 web/src/components/MountedPersonalitiesList.vue | 11 ++++++++---
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index 3b450170..d86e2526 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -65,16 +65,18 @@ export default {
             this.onShowPersList(this)
         },
         async constructor() {
-            this.configFile = await this.api_get_req("get_config")
+            this.configFile = await this.api_get_req("get_config").then(()=>{
+              this.getPersonalitiesArr().then(() => {
+                this.getMountedPersonalities()
+                this.$forceUpdate()
+            })
+            })
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
             this.configFile.personality_language = personality_path_infos["personality_language"]
             this.configFile.personality_category = personality_path_infos["personality_category"]
             this.configFile.personality_folder = personality_path_infos["personality_name"]
 
-            await this.getPersonalitiesArr().then(() => {
-                this.getMountedPersonalities()
-                this.$forceUpdate()
-            })
+
             
         },
         async api_get_req(endpoint) {
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
index 6599e82f..c5839f0f 100644
--- a/web/src/components/MountedPersonalitiesList.vue
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -70,7 +70,12 @@ export default {
     },
     methods: {
         async constructor() {
-            this.configFile = await this.api_get_req("get_config")
+            this.configFile = await this.api_get_req("get_config").then(()=>{
+              this.getPersonalitiesArr().then(() => {
+                this.getMountedPersonalities()
+                this.$forceUpdate()
+            })
+            })
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
             this.configFile.personality_language = personality_path_infos["personality_language"]
             this.configFile.personality_category = personality_path_infos["personality_category"]
@@ -143,8 +148,8 @@ export default {
 
             this.isLoading = false
 
-            this.getMountedPersonalities()
-                this.$forceUpdate()
+            // this.getMountedPersonalities()
+            //     this.$forceUpdate()
 
         },
         personalityImgPlacehodler(event) {

From e7dee8a58a5b954a7e611c79ed440230d25340b6 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 09:49:34 +0300
Subject: [PATCH 08/15] smixes

---
 web/src/components/MountedPersonalities.vue     | 3 ++-
 web/src/components/MountedPersonalitiesList.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index d86e2526..529980a1 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -65,7 +65,8 @@ export default {
             this.onShowPersList(this)
         },
         async constructor() {
-            this.configFile = await this.api_get_req("get_config").then(()=>{
+             this.api_get_req("get_config").then((res)=>{
+                this.configFile =res
               this.getPersonalitiesArr().then(() => {
                 this.getMountedPersonalities()
                 this.$forceUpdate()
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
index c5839f0f..093d5e30 100644
--- a/web/src/components/MountedPersonalitiesList.vue
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -70,7 +70,8 @@ export default {
     },
     methods: {
         async constructor() {
-            this.configFile = await this.api_get_req("get_config").then(()=>{
+           this.api_get_req("get_config").then((res)=>{
+            this.configFile=res
               this.getPersonalitiesArr().then(() => {
                 this.getMountedPersonalities()
                 this.$forceUpdate()

From 7610eea73a4de45fc3c14a4df1675c0dd241bc53 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Wed, 28 Jun 2023 10:11:34 +0200
Subject: [PATCH 09/15] updated

---
 web/src/components/MarkdownRenderer.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/src/components/MarkdownRenderer.vue b/web/src/components/MarkdownRenderer.vue
index 9a643a3f..af5c4edc 100644
--- a/web/src/components/MarkdownRenderer.vue
+++ b/web/src/components/MarkdownRenderer.vue
@@ -162,4 +162,11 @@ export default {
 
 <style>
 /* Include any additional styles you need */
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
 </style>

From 48ccc5a98236c426c874585ced31ec6f53b19d34 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 13:10:43 +0300
Subject: [PATCH 10/15] found culprit

---
 web/src/components/ChatBox.vue                |   2 +-
 web/src/components/MountedPersonalities.vue   |  24 ++--
 .../components/MountedPersonalitiesList.vue   | 105 +++++++++++-------
 web/src/components/PersonalityEntry.vue       |  10 +-
 web/src/main.js                               |   2 +-
 web/src/views/SettingsView.vue                |   3 +-
 6 files changed, 87 insertions(+), 59 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 4da552e7..662f7008 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -86,7 +86,7 @@
 
                         </button>
                     </div>
-                    <div v-if="showPersonalities" class="flex items-center mx-1">
+                    <div v-if="showPersonalities" class="container">
                         <MountedPersonalitiesList ref="mountedPersList" />
                     </div>
                     <!-- CHAT BOX -->
diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index 529980a1..952c518c 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -10,7 +10,7 @@
 
             <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
                 class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary  border-secondary"
-                :title="mountedPers.name">
+                :title="mountedPers.name" :key="mountedPers.key">
 
             <div class="flex items-center justify-center w-8 h-8 cursor-pointer text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800"
                 @click.stop="toggleShowPersList" title="Click to show more">+{{ mountedPersArr.length - 1 }}</div>
@@ -18,7 +18,7 @@
         <div class="flex -space-x-4 " v-if="mountedPersArr.length == 1">
             <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
                 class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary cursor-pointer  border-secondary"
-                :title="mountedPers.name" @click.stop="toggleShowPersList">
+                :title="mountedPers.name" @click.stop="toggleShowPersList" :key="mountedPers.key">
         </div>
 
     </div>
@@ -27,6 +27,7 @@
 <script>
 import axios from "axios";
 import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
+import { nextTick } from "vue";
 
 const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
@@ -65,13 +66,9 @@ export default {
             this.onShowPersList(this)
         },
         async constructor() {
-             this.api_get_req("get_config").then((res)=>{
-                this.configFile =res
-              this.getPersonalitiesArr().then(() => {
-                this.getMountedPersonalities()
-                this.$forceUpdate()
-            })
-            })
+            
+            this.configFile = await this.api_get_req("get_config")
+            this.getPersonalitiesArr()
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
             this.configFile.personality_language = personality_path_infos["personality_language"]
             this.configFile.personality_category = personality_path_infos["personality_category"]
@@ -143,7 +140,11 @@ export default {
             // this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
             // this.personalitiesFiltered.sort()
 
-
+       
+                this.getMountedPersonalities()
+                nextTick(()=>{
+                    this.$forceUpdate()
+                })
 
         },
         personalityImgPlacehodler(event) {
@@ -385,7 +386,8 @@ export default {
             console.log('fig', this.configFile.personality_category)
 
             this.mountedPers = this.personalities[this.personalities.findIndex(item => item.full_path == this.configFile.personalities[this.configFile.active_personality_id])]
-
+            const dd = new Date()
+            this.mountedPers.key = dd.getTime()
         },
     }
 }
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
index 093d5e30..a007989e 100644
--- a/web/src/components/MountedPersonalitiesList.vue
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -7,11 +7,12 @@
             <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                 Mounted Personalities: ({{ mountedPersArr.length }})
             </label>
-            <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-4 md:grid-cols-2 gap-4 max-h-96">
+            <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-1 md:grid-cols-1 gap-4 max-h-96">
                 <TransitionGroup name="bounce">
                     <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
-                        :key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path"
-                        :selected="configFile.personalities[configFile.active_personality_id]==pers.full_path"
+                        :key="'index-' + index + '-' + pers.name + new Date().getTime()" :personality="pers"
+                        :full_path="pers.full_path"
+                        :selected="configFile.personalities[configFile.active_personality_id] === pers.full_path"
                         :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
                         :on-settings="onSettingsPersonality" />
                 </TransitionGroup>
@@ -25,13 +26,38 @@
         <UniversalForm ref="universalForm" class="z-20" />
     </div>
 </template>
+<style scoped>
+.bounce-enter-active {
+    animation: bounce-in 0.5s;
+}
 
-<script>
-import axios from "axios";
+.bounce-leave-active {
+    animation: bounce-in 0.5s reverse;
+}
+
+@keyframes bounce-in {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1.25);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+</style>
+<script >
 import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
 import PersonalityEntry from './PersonalityEntry.vue'
 import Toast from './Toast.vue'
 import UniversalForm from './UniversalForm.vue';
+
+
+import axios from "axios";
+
 const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
@@ -46,7 +72,7 @@ export default {
         UniversalForm,
     },
     name: 'MountedPersonalitiesList',
-    setup() {
+    data() {
 
 
         return {
@@ -59,7 +85,7 @@ export default {
         }
     },
     async mounted() {
-    await this.constructor()
+        await this.constructor()
         this.isMounted = true
     },
     async activated() {
@@ -69,20 +95,18 @@ export default {
 
     },
     methods: {
-        async constructor() {
-           this.api_get_req("get_config").then((res)=>{
-            this.configFile=res
-              this.getPersonalitiesArr().then(() => {
-                this.getMountedPersonalities()
-                this.$forceUpdate()
-            })
-            })
+        async constructor() {           
+            
+            this.configFile = await this.api_get_req("get_config")
+            this.getPersonalitiesArr()
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
             this.configFile.personality_language = personality_path_infos["personality_language"]
             this.configFile.personality_category = personality_path_infos["personality_category"]
             this.configFile.personality_folder = personality_path_infos["personality_name"]
 
-            await this.getPersonalitiesArr()
+
+            this.$forceUpdate()
+            //await this.getPersonalitiesArr()
         },
         async api_get_req(endpoint) {
             try {
@@ -101,7 +125,7 @@ export default {
 
         },
         async getPersonalitiesArr() {
-            this.isLoading = true
+
             this.personalities = []
             const dictionary = await this.api_get_req("get_all_personalities")
             const config = await this.api_get_req("get_config")
@@ -147,10 +171,10 @@ export default {
             this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
             this.personalitiesFiltered.sort()
 
-            this.isLoading = false
 
-            // this.getMountedPersonalities()
-            //     this.$forceUpdate()
+
+             this.getMountedPersonalities()
+                 this.$forceUpdate()
 
         },
         personalityImgPlacehodler(event) {
@@ -175,14 +199,11 @@ export default {
 
             }
 
-            this.isLoading = true
+            this.$forceUpdate()
         },
         async onPersonalitySelected(pers) {
             // eslint-disable-next-line no-unused-vars
-            if (this.isLoading) {
-                this.$refs.toast.showToast("Loading... please wait", 4, false)
-            }
-            this.isLoading = true
+
             console.log('ppa', pers)
             if (pers) {
 
@@ -192,7 +213,7 @@ export default {
                 }
 
 
-                this.settingsChanged = true
+
 
                 if (pers.isMounted) {
 
@@ -202,7 +223,7 @@ export default {
                             await this.constructor()
 
                             this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
-                           
+                            console.log('ssss', this.configFile)
                         }
                     }
 
@@ -213,15 +234,15 @@ export default {
                 }
 
 
-                this.isLoading = false
+
             }
 
         },
         onSettingsPersonality(persEntry) {
             try {
-                this.isLoading = true
+
                 axios.get('/get_active_personality_settings').then(res => {
-                    this.isLoading = false
+
                     if (res) {
 
                         console.log('pers sett', res)
@@ -240,27 +261,27 @@ export default {
 
                                             } else {
                                                 this.$refs.toast.showToast("Did not get Personality settings responses.\n" + response, 4, false)
-                                                this.isLoading = false
+
                                             }
 
 
                                         })
                                 } catch (error) {
                                     this.$refs.toast.showToast("Did not get Personality settings responses.\n Endpoint error: " + error.message, 4, false)
-                                    this.isLoading = false
+
                                 }
 
                             })
                         } else {
                             this.$refs.toast.showToast("Personality has no settings", 4, false)
-                            this.isLoading = false
+
                         }
 
                     }
                 })
 
             } catch (error) {
-                this.isLoading = false
+
                 this.$refs.toast.showToast("Could not open personality settings. Endpoint error: " + error.message, 4, false)
             }
 
@@ -298,11 +319,12 @@ export default {
 
 
             try {
-                this.isLoading = true
+
                 const res = await axios.post('/unmount_personality', obj);
-                this.isLoading = false
+
 
                 if (res) {
+                    this.$forceUpdate()
                     return res.data
                 }
             } catch (error) {
@@ -330,6 +352,7 @@ export default {
                     this.configFile.personality_language = personality_path_infos["personality_language"]
                     this.configFile.personality_category = personality_path_infos["personality_category"]
                     this.configFile.personality_folder = personality_path_infos["personality_name"]
+                    this.$forceUpdate()
                     return res.data
 
                 }
@@ -340,7 +363,7 @@ export default {
 
         },
         async mountPersonality(pers) {
-            this.isLoading = true
+
             console.log('mount pers', pers)
             if (!pers) { return }
 
@@ -367,11 +390,11 @@ export default {
                 pers.isMounted = false
                 this.$refs.toast.showToast("Could not mount personality\nError: " + res.error, 4, false)
             }
-            this.isLoading = false
+
 
         },
         async unmountPersonality(pers) {
-            this.isLoading = true
+
             if (!pers) { return }
 
             const res = await this.unmount_personality(pers.personality || pers)
@@ -396,7 +419,7 @@ export default {
                     this.$refs.personalitiesZoo[persIdZoo].isMounted = false
 
                 }
-
+                this.$forceUpdate()
 
                 //pers.isMounted = false
                 this.getMountedPersonalities()
@@ -416,7 +439,7 @@ export default {
                 this.$refs.toast.showToast("Could not unmount personality\nError: " + res.error, 4, false)
             }
 
-            this.isLoading = false
+
         },
         getMountedPersonalities() {
 
diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index f11e00a0..da6856c9 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -1,7 +1,7 @@
 <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"
-    @click.stop="toggleSelected" :class="selected ? 'border-primary-light' : 'border-transparent'"
+    class=" min-w-96 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_computed ? 'border-primary-light' : 'border-transparent'"
     :title="!personality.installed ? 'Not installed' : ''">
 
     <div :class="!personality.installed ? 'opacity-50' : ''">
@@ -24,7 +24,7 @@
             <i data-feather="slash" class="w-5"></i>
             <span class="sr-only">Not installed</span>
           </button>
-          <button v-if="selected" type="button" title="Settings"
+          <button v-if="selected_computed" type="button" title="Settings"
             class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
             @click.stop="toggleSettings">
             <i data-feather="sliders" class="w-5"></i>
@@ -112,7 +112,9 @@ export default {
     })
   },
   computed: {
-
+selected_computed(){
+  return this.selected
+}
   },
   methods: {
     getImgUrl() {
diff --git a/web/src/main.js b/web/src/main.js
index a2486d85..e7c24057 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -12,7 +12,7 @@ const store = createStore({
     state () {
       return {
         // count: 0,
-        mountedPersonalities: {},
+        mountedPersonalities: [],
         settingsChanged:false
       }
     },
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 06ed8e14..bf0bfbbc 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1291,7 +1291,7 @@ export default {
                 if (pers.isMounted && this.configFile.personalities.includes(pers.personality.full_path)) {
 
                     const res = await this.select_personality(pers)
-
+                    console.log('pers is mounted',res)
                     if (res && res.status && res.active_personality_id > -1) {
                         this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
 
@@ -1301,6 +1301,7 @@ export default {
                     this.isLoading = false
 
                 } else {
+                    console.log('mounting pers')
                     this.onPersonalityMounted(pers)
 
                 }

From 2ada59e1b908cafec306a71cfe48a9d07c0aee28 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 17:53:31 +0300
Subject: [PATCH 11/15] seems working

---
 web/src/components/MountedPersonalities.vue   | 16 +++---
 .../components/MountedPersonalitiesList.vue   | 55 +++++++++----------
 2 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/web/src/components/MountedPersonalities.vue b/web/src/components/MountedPersonalities.vue
index 952c518c..cabb7e33 100644
--- a/web/src/components/MountedPersonalities.vue
+++ b/web/src/components/MountedPersonalities.vue
@@ -10,7 +10,7 @@
 
             <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
                 class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary  border-secondary"
-                :title="mountedPers.name" :key="mountedPers.key">
+                :title="mountedPers.name" >
 
             <div class="flex items-center justify-center w-8 h-8 cursor-pointer text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800"
                 @click.stop="toggleShowPersList" title="Click to show more">+{{ mountedPersArr.length - 1 }}</div>
@@ -18,7 +18,7 @@
         <div class="flex -space-x-4 " v-if="mountedPersArr.length == 1">
             <img :src="bUrl + mountedPers.avatar" @error="personalityImgPlacehodler"
                 class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 group-hover:border-secondary cursor-pointer  border-secondary"
-                :title="mountedPers.name" @click.stop="toggleShowPersList" :key="mountedPers.key">
+                :title="mountedPers.name" @click.stop="toggleShowPersList" >
         </div>
 
     </div>
@@ -36,7 +36,7 @@ export default {
     props: {
         onShowPersList: Function,
     },
-    setup() {
+    data() {
 
 
         return {
@@ -137,13 +137,12 @@ export default {
             }
 
             this.personalities.sort((a, b) => a.name.localeCompare(b.name))
-            // this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
-            // this.personalitiesFiltered.sort()
+
 
        
                 this.getMountedPersonalities()
                 nextTick(()=>{
-                    this.$forceUpdate()
+                  
                 })
 
         },
@@ -383,11 +382,10 @@ export default {
             this.mountedPersArr = mountedPersArr
             //this.mountedPersArr = mountedPersArr
             console.log('getMountedPersonalities', mountedPersArr)
-            console.log('fig', this.configFile.personality_category)
+            console.log('fig', this)
 
             this.mountedPers = this.personalities[this.personalities.findIndex(item => item.full_path == this.configFile.personalities[this.configFile.active_personality_id])]
-            const dd = new Date()
-            this.mountedPers.key = dd.getTime()
+
         },
     }
 }
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
index a007989e..e5cb1d89 100644
--- a/web/src/components/MountedPersonalitiesList.vue
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -10,7 +10,7 @@
             <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-1 md:grid-cols-1 gap-4 max-h-96">
                 <TransitionGroup name="bounce">
                     <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
-                        :key="'index-' + index + '-' + pers.name + new Date().getTime()" :personality="pers"
+                        :key="'index-' + index + '-' + pers.name" :personality="pers"
                         :full_path="pers.full_path"
                         :selected="configFile.personalities[configFile.active_personality_id] === pers.full_path"
                         :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
@@ -105,8 +105,6 @@ export default {
             this.configFile.personality_folder = personality_path_infos["personality_name"]
 
 
-            this.$forceUpdate()
-            //await this.getPersonalitiesArr()
         },
         async api_get_req(endpoint) {
             try {
@@ -168,13 +166,13 @@ export default {
             }
 
             this.personalities.sort((a, b) => a.name.localeCompare(b.name))
-            this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
-            this.personalitiesFiltered.sort()
+            // this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
+            // this.personalitiesFiltered.sort()
 
 
 
              this.getMountedPersonalities()
-                 this.$forceUpdate()
+   
 
         },
         personalityImgPlacehodler(event) {
@@ -199,7 +197,7 @@ export default {
 
             }
 
-            this.$forceUpdate()
+    
         },
         async onPersonalitySelected(pers) {
             // eslint-disable-next-line no-unused-vars
@@ -324,7 +322,7 @@ export default {
 
 
                 if (res) {
-                    this.$forceUpdate()
+                    
                     return res.data
                 }
             } catch (error) {
@@ -352,7 +350,7 @@ export default {
                     this.configFile.personality_language = personality_path_infos["personality_language"]
                     this.configFile.personality_category = personality_path_infos["personality_category"]
                     this.configFile.personality_folder = personality_path_infos["personality_name"]
-                    this.$forceUpdate()
+                   
                     return res.data
 
                 }
@@ -401,36 +399,35 @@ export default {
 
 
             if (res.status) {
+                console.log('unmount response',res)
+                this.configFile.active_personality_id=res.active_personality_id
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality unmounted", 4, true)
-                const persId = this.personalities.findIndex(item => item.full_path == pers.full_path)
-                const persFilteredId = this.personalitiesFiltered.findIndex(item => item.full_path == pers.full_path)
-                const persIdZoo = this.$refs.personalitiesZoo.findIndex(item => item.full_path == pers.full_path)
+
+                const activePersPath = this.configFile.personalities[this.configFile.active_personality_id]
+
+                console.log()
+                const persId = this.personalities.findIndex(item => item.full_path == activePersPath)
+                //const persFilteredId = this.personalitiesFiltered.findIndex(item => item.full_path == pers.full_path)
+                //const persIdZoo = this.$refs.personalitiesZoo.findIndex(item => item.full_path == pers.full_path)
                 console.log('ppp', this.personalities[persId])
+                const activePers =this.personalities[persId]
+                activePers.isMounted = false
+                activePers.selected = true
+                //this.$refs.personalitiesZoo[persIdZoo].isMounted = false
 
-                this.personalities[persId].isMounted = false
-
-                if (persFilteredId > -1) {
-                    this.personalitiesFiltered[persFilteredId].isMounted = false
-
-                }
-
-                if (persIdZoo > -1) {
-                    this.$refs.personalitiesZoo[persIdZoo].isMounted = false
-
-                }
-                this.$forceUpdate()
+               
 
                 //pers.isMounted = false
                 this.getMountedPersonalities()
                 // Select some other personality
-                const lastPers = this.mountedPersArr[this.mountedPersArr.length - 1]
-
-                console.log(lastPers, this.mountedPersArr.length)
+                //const lastPers = this.mountedPersArr[this.mountedPersArr.length - 1]
+               
+                //console.log(lastPers, this.mountedPersArr.length)
                 // const res2 = await this.select_personality(lastPers.personality)
-                const res2 = await this.select_personality(pers.personality)
+                const res2 = await this.select_personality(activePers)
                 if (res2.status) {
-                    this.$refs.toast.showToast("Selected personality:\n" + lastPers.name, 4, true)
+                    this.$refs.toast.showToast("Selected personality:\n" + activePers.name, 4, true)
 
                 }
 

From 010945cc3cb523dd685b85db105aff00eb956d14 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 18:20:24 +0300
Subject: [PATCH 12/15] needs more work

---
 web/src/components/ChatBox.vue                | 10 +++--
 .../components/MountedPersonalitiesList.vue   | 37 +++++++++++--------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 662f7008..7df32a17 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -87,12 +87,12 @@
                         </button>
                     </div>
                     <div v-if="showPersonalities" class="container">
-                        <MountedPersonalitiesList ref="mountedPersList" />
+                        <MountedPersonalitiesList ref="mountedPersList" :on-mount-unmount="onMountUnmountFun" />
                     </div>
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 overflow-visible">
                         <div class="w-fit">
-                            <MountedPersonalities :onShowPersList="onShowPersList" />
+                            <MountedPersonalities ref="mountedPers" :onShowPersList="onShowPersListFun" />
 
                         </div>
 
@@ -205,10 +205,14 @@ export default {
         }
     },
     methods: {
-        onShowPersList(comp) {
+        onShowPersListFun(comp) {
             this.showPersonalities = comp.show
 
         },
+        onMountUnmountFun(comp) {
+            console.log('mountunmount chat')
+            this.$refs.mountedPers.constructor()
+        },
         computedFileSize(size) {
             nextTick(() => {
                 feather.replace()
diff --git a/web/src/components/MountedPersonalitiesList.vue b/web/src/components/MountedPersonalitiesList.vue
index e5cb1d89..00962d56 100644
--- a/web/src/components/MountedPersonalitiesList.vue
+++ b/web/src/components/MountedPersonalitiesList.vue
@@ -10,8 +10,7 @@
             <div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-1 md:grid-cols-1 gap-4 max-h-96">
                 <TransitionGroup name="bounce">
                     <personality-entry ref="personalitiesZoo" v-for="(pers, index) in mountedPersArr"
-                        :key="'index-' + index + '-' + pers.name" :personality="pers"
-                        :full_path="pers.full_path"
+                        :key="'index-' + index + '-' + pers.name" :personality="pers" :full_path="pers.full_path"
                         :selected="configFile.personalities[configFile.active_personality_id] === pers.full_path"
                         :on-selected="onPersonalitySelected" :on-mounted="onPersonalityMounted"
                         :on-settings="onSettingsPersonality" />
@@ -62,7 +61,7 @@ const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
     props: {
-
+        onMountUnmount: Function
 
 
     },
@@ -95,8 +94,12 @@ export default {
 
     },
     methods: {
-        async constructor() {           
-            
+        toggleMountUnmount() {
+            console.log('moununmoun pers list')
+            this.onMountUnmount(this)
+        },
+        async constructor() {
+
             this.configFile = await this.api_get_req("get_config")
             this.getPersonalitiesArr()
             let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
@@ -171,8 +174,8 @@ export default {
 
 
 
-             this.getMountedPersonalities()
-   
+            this.getMountedPersonalities()
+
 
         },
         personalityImgPlacehodler(event) {
@@ -197,7 +200,7 @@ export default {
 
             }
 
-    
+
         },
         async onPersonalitySelected(pers) {
             // eslint-disable-next-line no-unused-vars
@@ -322,7 +325,7 @@ export default {
 
 
                 if (res) {
-                    
+
                     return res.data
                 }
             } catch (error) {
@@ -345,12 +348,13 @@ export default {
                 const res = await axios.post('/select_personality', obj);
 
                 if (res) {
+                    this.toggleMountUnmount()
                     this.configFile = await this.api_get_req("get_config")
                     let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
                     this.configFile.personality_language = personality_path_infos["personality_language"]
                     this.configFile.personality_category = personality_path_infos["personality_category"]
                     this.configFile.personality_folder = personality_path_infos["personality_name"]
-                   
+
                     return res.data
 
                 }
@@ -377,7 +381,7 @@ export default {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality mounted", 4, true)
                 pers.isMounted = true
-
+                this.toggleMountUnmount()
                 const res2 = await this.select_personality(pers.personality)
                 if (res2.status) {
                     this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
@@ -399,8 +403,9 @@ export default {
 
 
             if (res.status) {
-                console.log('unmount response',res)
-                this.configFile.active_personality_id=res.active_personality_id
+                this.toggleMountUnmount()
+                console.log('unmount response', res)
+                this.configFile.active_personality_id = res.active_personality_id
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality unmounted", 4, true)
 
@@ -411,18 +416,18 @@ export default {
                 //const persFilteredId = this.personalitiesFiltered.findIndex(item => item.full_path == pers.full_path)
                 //const persIdZoo = this.$refs.personalitiesZoo.findIndex(item => item.full_path == pers.full_path)
                 console.log('ppp', this.personalities[persId])
-                const activePers =this.personalities[persId]
+                const activePers = this.personalities[persId]
                 activePers.isMounted = false
                 activePers.selected = true
                 //this.$refs.personalitiesZoo[persIdZoo].isMounted = false
 
-               
+
 
                 //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.personality)
                 const res2 = await this.select_personality(activePers)

From ca8369fa3879a19eb9ecb902f8f63bebe39c5548 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Wed, 28 Jun 2023 23:07:59 +0300
Subject: [PATCH 13/15] fixed cancel issue

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

diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index bf0bfbbc..0bc13f6b 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1362,7 +1362,7 @@ export default {
         onCancelInstall() {
 
             const modelEntry = this.addModel
-
+console.log('cancel install', modelEntry)
             // const keys = Object.keys(this.addModel)
             // if (keys.includes('url')) {
             //     return
@@ -1384,12 +1384,14 @@ export default {
             let path = model_object.path;
             this.showProgress = true;
             this.progress = 0;
-            console.log("installing...");
-
+            this.addModel={ model_name: model_object.model.title, binding_folder: this.configFile.binding_name, model_url: model_object.path }
+            console.log("installing...", this.addModel);
+           
             // Use an arrow function for progressListener
             const progressListener = (response) => {
                 console.log("received something");
                 if (response.status && response.progress <= 100) {
+                    this.addModel=response
                     console.log(`Progress`, response);
                     model_object.progress = response.progress
                     model_object.speed = response.speed

From e55d089f7ae356a183241db7abdedd920a47d165 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Wed, 28 Jun 2023 22:08:18 +0200
Subject: [PATCH 14/15] updated cancel code

---
 api/__init__.py               | 7 ++++++-
 docs/youtube/script_lollms.md | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/api/__init__.py b/api/__init__.py
index 154fdb0e..be313d08 100644
--- a/api/__init__.py
+++ b/api/__init__.py
@@ -167,7 +167,11 @@ class LoLLMsAPPI():
             model_url = data["model_url"]
             signature = f"{model_name}_{binding_folder}_{model_url}"
             self.download_infos[signature]["cancel"]=True
-            
+            self.socketio.emit('canceled', {
+                                            'status': True
+                                            },
+                                            room=self.current_room_id
+                                )            
             
         @socketio.on('install_model')
         def install_model(data):
@@ -263,6 +267,7 @@ class LoLLMsAPPI():
                     
                     if self.download_infos[signature]["cancel"]:
                         raise Exception("canceled")
+                        
                     
                 if hasattr(self.binding, "download_model"):
                     try:
diff --git a/docs/youtube/script_lollms.md b/docs/youtube/script_lollms.md
index 9a6b4c04..4231ced4 100644
--- a/docs/youtube/script_lollms.md
+++ b/docs/youtube/script_lollms.md
@@ -69,4 +69,7 @@ To select another personality to interact with Einstein, just go to the settings
 Let's select Jack Sparrow.
 To trigger generation, just press the refresh button from previous message and the tool will use your active personality to generate the next mesasge. you can go on doing this and exploring possible interactions between AI-s.
 
-Now let's take a look in
+Few days have passed and now the personality system has been enhanced. Let's start by mounting personalities to use in a multipersonalities conversation.
+
+
+Let's talk to empror Napoleon Bonaparte and ask it about his plans after conquering Egypt.Now, as you can see, you have a new module in the ui that shows the current personality icon. When we press the + button, we can select the personality to talk to.

From 2df3b6c1a260abe7bb8cdad191d105c384c197d6 Mon Sep 17 00:00:00 2001
From: Saifeddine ALOUI <aloui.seifeddine@gmail.com>
Date: Thu, 29 Jun 2023 00:29:03 +0200
Subject: [PATCH 15/15] upgraded script

---
 docs/youtube/script_lollms.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/youtube/script_lollms.md b/docs/youtube/script_lollms.md
index 4231ced4..57d853e2 100644
--- a/docs/youtube/script_lollms.md
+++ b/docs/youtube/script_lollms.md
@@ -73,3 +73,5 @@ Few days have passed and now the personality system has been enhanced. Let's sta
 
 
 Let's talk to empror Napoleon Bonaparte and ask it about his plans after conquering Egypt.Now, as you can see, you have a new module in the ui that shows the current personality icon. When we press the + button, we can select the personality to talk to.
+
+With this, we can make personalities talk to each other by selecting next personality and pressing the regenerate answer button. This will be refined in the future. It is still a work in progress but the feature is pretty much usable right now. You can explore impossible discussions between personalities that never lived in the same era, never spoken the same language and sometimes the discussions get really interesting. Be aware that the quality of the discussions depend heavily on the model you use. You can view which model was used to generate each message as well as time needed to generate the answer. Feel free to explore these things and share your findings on internet.
\ No newline at end of file