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) }, }