From 2e70384dd13b14f20a38358d971d3f3534f9e6c4 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Thu, 15 Jun 2023 13:22:40 +0300
Subject: [PATCH] work in progress

---
 web/src/components/ChatBox.vue                |  23 +-
 .../MountedPersonalitiesComponent.vue         | 398 ++++++++++++++++++
 web/src/views/SettingsView.vue                |   2 +-
 3 files changed, 417 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/MountedPersonalitiesComponent.vue

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 1becf7f7..b23fb5cc 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -10,6 +10,7 @@
                 </button>
             </div>
         </div>
+
         <form>
             <label for="chat" class="sr-only">Send message</label>
             <div class="px-3 py-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg  ">
@@ -19,7 +20,7 @@
                     <div v-if="fileList.length > 0" class="flex flex-col max-h-64  ">
                         <TransitionGroup name="list" tag="div"
                             class="flex flex-col flex-grow overflow-y-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">
-                            <div v-for="(file,index) in fileList" :key="index+'-'+file.name" >
+                            <div v-for="(file, index) in fileList" :key="index + '-' + file.name">
                                 <div class="  m-1" :title="file.name">
 
                                     <div
@@ -87,12 +88,16 @@
                     </div>
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 ">
+                        <div >
+                            <MountedPersonalitiesComponent  />
+
+                        </div>
                         <div class="relative grow">
                             <textarea id="chat" rows="1" v-model="message"
                                 class="block min-h-11  no-scrollbar  p-2.5 w-full text-sm text-gray-900 bg-bg-light rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                 placeholder="Send message..." @keydown.enter.exact="submitOnEnter($event)">
                             </textarea>
-                            <input type="file" ref="fileDialog" style="display: none" @change="addFiles" multiple/>
+                            <input type="file" ref="fileDialog" style="display: none" @change="addFiles" multiple />
                             <button type="button" @click.stop="$refs.fileDialog.click()" title="Add files"
                                 class="absolute inset-y-0 right-0 flex items-center mr-2 w-6 hover:text-secondary duration-75 active:scale-90">
 
@@ -125,6 +130,7 @@
                                     <span class="sr-only">Loading...</span>
                                 </div>
                             </div>
+
                         </div>
                     </div>
                 </div>
@@ -156,8 +162,12 @@
     position: absolute;
 }
 </style>
+<script setup>
+import MountedPersonalitiesComponent from './MountedPersonalitiesComponent.vue'
 
+</script>
 <script>
+
 import { nextTick, TransitionGroup } from 'vue'
 import feather from 'feather-icons'
 import filesize from '../plugins/filesize'
@@ -169,6 +179,9 @@ export default {
         loading: false
 
     },
+    components: {
+        MountedPersonalitiesComponent
+    },
     setup() {
         return {}
     },
@@ -218,9 +231,9 @@ export default {
         stopGenerating() {
             this.$emit('stopGenerating')
         },
-        addFiles(event){
-           
-           this.fileList = this.fileList.concat([...event.target.files])
+        addFiles(event) {
+
+            this.fileList = this.fileList.concat([...event.target.files])
         }
     },
     watch: {
diff --git a/web/src/components/MountedPersonalitiesComponent.vue b/web/src/components/MountedPersonalitiesComponent.vue
new file mode 100644
index 00000000..efe42804
--- /dev/null
+++ b/web/src/components/MountedPersonalitiesComponent.vue
@@ -0,0 +1,398 @@
+<template>
+  
+        <!-- LIST OF MOUNTED PERSONALITIES -->
+        <div 
+            class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row">
+            <!-- LIST -->
+            <div class="flex -space-x-4 items-center ">
+                <!-- ITEM -->
+                <div class="relative  hover:-translate-y-2 duration-300 hover:z-10 shrink-0 "
+                    v-for="(item, index) in mountedPersArr" :key="index + '-' + item.name" >
+                    <div class="group items-center flex flex-row">
+                        <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>
+
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+   
+</template>
+
+<script>
+import axios from "axios";
+import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
+
+const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
+axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
+export default {
+    name: 'MountedPersonalitiesComponent',
+    setup() {
+
+
+        return {
+            configFile: {},
+            mountedPersArr:[],
+            personalities:[],
+            bUrl:bUrl,
+            isMounted: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.status) {
+                        this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
+
+                    }
+
+                } else {
+                    this.onPersonalityMounted(pers)
+
+                }
+
+
+                nextTick(() => {
+                   
+
+                })
+                this.isLoading=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 {
+                const res = await axios.post('/unmount_personality', obj);
+
+                if (res) {
+
+                    return res.data
+
+                }
+            } catch (error) {
+                console.log(error.message, 'unmount_personality - settings')
+                return
+            }
+
+        },
+        async select_personality(pers) {
+            if (!pers) { return { 'status': false, '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.message, '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/SettingsView.vue b/web/src/views/SettingsView.vue
index b3dc41f3..46a6915c 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1471,7 +1471,7 @@ export default {
             console.log('fig', this.configFile.personality_category)
             nextTick(()=>{
                 console.log('accc',this.$refs.mountedPersonalities)
-        this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities
+        //this.$store.state.mountedPersonalities = this.$refs.mountedPersonalities
             })
 
         },