Merge pull request #220 from andzejsp/settings-upgrade

many changes

web/src/components/PersonalityEntry.vue

@@ -18,14 +18,14 @@
   <b>Author:&nbsp;</b>
   {{ personality.author }}
 </div>
-<div class="">
+<!-- <div class="">
   <b>Language:&nbsp;</b>
   {{ personality.language }}
 </div>
 <div class="">
   <b>Category:&nbsp;</b>
   {{ personality.category }}
-</div>
+</div> -->
 </div>
       <b>Description:&nbsp;</b><br>
 

web/src/components/Toast.vue

@@ -35,7 +35,8 @@
 </template>
 
 <script>
-
+import feather from 'feather-icons'
+import { nextTick } from 'vue'
 export default {
     name: 'Toast',
     emits: ['close'],
@@ -58,7 +59,10 @@ export default {
             this.success = success;
             this.message = message;
             this.show = true;
+            nextTick(() => {
+                    feather.replace()
 
+                })
             setTimeout(() => {
                     this.$emit('close')
                     this.show = false

web/src/views/DiscussionsView.vue

@@ -778,6 +778,7 @@ export default {
         stopGenerating() {
             this.stop_gen()
             this.isGenerating = false
+            this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
             console.log("Stopped generating")
         },
         finalMsgEvent(msgObj) {
@@ -854,9 +855,12 @@ export default {
                 this.loading = true
                 const res = await this.export_multiple_discussions(discussionIdArr)
               
-                if (res.data) {
+                if (res) {
-                    this.saveJSONtoFile(res.data, filename)
+                    this.saveJSONtoFile(res, filename)
-
+                    this.$refs.toast.showToast("Successfully exported", 4, true)
+                    this.isCheckbox=false
+                }else{
+                    this.$refs.toast.showToast("Failed to export discussions", 4, false)
                 }
                 this.loading = false
             }

web/src/views/SettingsView.vue

@@ -37,13 +37,15 @@
                     <i data-feather="alert-triangle"></i>
                     No model selected!
                 </div>
+                <div class="flex gap-3 items-center">
                     <div v-if="settingsChanged" class="flex gap-3 items-center">
-
                         Apply changes:
                         <button v-if="!isLoading" class="text-2xl hover:text-secondary duration-75 active:scale-90"
                             title="Apply changes" type="button" @click.stop="applyConfiguration()">
                             <i data-feather="check"></i>
                         </button>
+                    </div>
+
                     <!-- SPINNER -->
                     <div v-if="isLoading" role="status">
                         <svg aria-hidden="true" class="w-6 h-6   animate-spin  fill-secondary" viewBox="0 0 100 101"
@@ -93,10 +95,10 @@
                         </label>
                         <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 "
                             :class="mzl_collapsed ? '' : 'max-h-96'">
-                        <model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
+                            <model-entry v-for="(model, index) in models" :key="index" :title="model.title"
-                            :path="model.path" :owner="model.owner" :owner_link="model.owner_link" :license="model.license"
+                                :icon="model.icon" :path="model.path" :owner="model.owner" :owner_link="model.owner_link"
-                            :description="model.description" :is-installed="model.isInstalled" :on-install="onInstall"
+                                :license="model.license" :description="model.description" :is-installed="model.isInstalled"
-                            :on-uninstall="onUninstall" :on-selected="onSelected"
+                                :on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
                                 :selected="model.title === configFile.model" :model="model" />
                         </div>
                     </div>
@@ -114,64 +116,7 @@
                 </div>
 
             </div>
-        <!-- PERSONALITY -->
-        <div
-            class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
-            <div class="flex flex-row">
-                <button @click.stop="pc_collapsed = !pc_collapsed"
-                    class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
-                    <i :data-feather="pc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
-                    <h3 class="text-lg font-semibold cursor-pointer select-none">
-                        Personality Configuration</h3>
-                </button>
-            </div>
-            <div :class="{ 'hidden': pc_collapsed }" class="flex flex-col mb-2 p-2">
-                <div class="m-2">
-                    <label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Personalities Languages: ({{ persLangArr.length }})
-                    </label>
-                    <select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
-                        <option v-for="item in persLangArr" :selected="item === configFile.personality_language">{{ item }}
-
-                        </option>
-
-                    </select>
-                </div>
-                <div class="m-2">
-                    <label for="persCat" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Personalities Category: ({{ persLangArr.length }})
-                    </label>
-                    <select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-
-                        <option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item }}
-
-                        </option>
-
-                    </select>
-                </div>
-                <div class="m-2">
-                    <label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Personality:
-                    </label>
-                    <select id="persona" @change="update_setting('personality', $event.target.value, refresh)"
-                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-
-                        <option v-for="item in persArr" :selected="item === configFile.personality">{{ item }}</option>
-
-                    </select>
-                </div>
-                <div class="m-2">
-                    <button @click="applyConfiguration" class="bg-blue-500 text-white py-2 px-4 rounded">
-                        Apply Configuration
-                    </button> 
-                    <div v-if="isLoading" class="loader"></div>
-                </div>
-
-            </div>
-        </div>
             <!-- PERSONALITY ZOO -->
             <div
                 class="flex flex-col mb-2  rounded-lg bg-bg-light-tone dark:bg-bg-dark-tone hover:bg-bg-light-tone-panel hover:dark:bg-bg-dark-tone-panel duration-150 shadow-lg">
@@ -193,7 +138,8 @@
                         <select id="persLang" @change="update_setting('personality_language', $event.target.value, refresh)"
                             class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
-                        <option v-for="item in persLangArr" :selected="item === configFile.personality_language">{{ item }}
+                            <option v-for="item in persLangArr" :selected="item === configFile.personality_language">{{ item
+                            }}
 
                             </option>
 
@@ -206,20 +152,37 @@
                         <select id="persCat" @change="update_setting('personality_category', $event.target.value, refresh)"
                             class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 
-                        <option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item }}
+                            <option v-for="item in persCatgArr" :selected="item === configFile.personality_category">{{ item
+                            }}
 
                             </option>
 
                         </select>
                     </div>
 
-                <div v-if="personalities.length > 0" class="mb-2">
+                    <!-- <div class="mx-2 mb-4">
-                    <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        <label for="persona" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Personalities: ({{ personalities.length }})
+                            Personality:
                         </label>
-                    <div ref="personalitiesZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
+                        <select id="persona" @change="update_setting('personality', $event.target.value, refresh)"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                            <option v-for="item in persArr" :selected="item === configFile.personality">{{ item }}</option>
+
+                        </select>
+                    </div> -->
+
+                    <div v-if="personalitiesFiltered.length > 0" class="mb-2">
+                        <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                            Personalities: ({{ personalitiesFiltered.length }})
+                        </label>
+                        <div ref="personalitiesZoo"
+                            class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
                             :class="pzl_collapsed ? '' : 'max-h-96'">
-                        <personality-entry v-for="(pers, index) in personalities" :key="index" :personality="pers" />
+                            <personality-entry v-for="(pers, index) in personalitiesFiltered" :key="index"
+                                :personality="pers"
+                                :selected="pers.name === configFile.personality && pers.category === configFile.personality_category && pers.language === configFile.personality_language"
+                                :on-selected="onPersonalitySelected" />
                         </div>
                     </div>
                     <!-- EXPAND / COLLAPSE BUTTON -->
@@ -272,8 +235,8 @@
 
                             </div>
 
-                        <input id="temperature" @change="update_setting('temperature', $event.target.value)" type="range"
+                            <input id="temperature" @change="update_setting('temperature', $event.target.value)"
-                            v-model="configFile.temperature" min="0" max="5" step="0.1"
+                                type="range" v-model="configFile.temperature" min="0" max="5" step="0.1"
                                 class="flex-none h-2 mt-14 mb-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
                         </div>
                     </div>
@@ -421,6 +384,7 @@ export default {
             // Models zoo installer stuff
             models: [],
             personalities: [],
+            personalitiesFiltered: [],
             // Accordeon stuff 
             collapsedArr: [],
             all_collapsed: true,
@@ -495,6 +459,35 @@ export default {
                     console.log(error);
                 });
         },
+        onPersonalitySelected(pers) {
+            console.log("Selected personality")
+            // eslint-disable-next-line no-unused-vars
+            if (this.isLoading) {
+                this.$refs.toast.showToast("Loading... please wait", 4, false)
+            }
+            if (pers.personality) {
+                // if (model_object.isInstalled) {
+                this.settingsChanged = true
+                const res = this.update_setting('personality', pers.personality.name,()=>{
+                    this.$refs.toast.showToast("Personality:\n" + pers.personality.name + "\nselected", 4, true)
+                    this.configFile.personality = pers.personality.name
+                    this.configFile.personality_category = pers.personality.category
+                    this.configFile.personality_language = pers.personality.language
+                })
+             
+        
+                    
+
+
+       
+
+                nextTick(() => {
+                    feather.replace()
+
+                })
+            }
+
+        },
         onSelected(model_object) {
             console.log("Selected model")
             // eslint-disable-next-line no-unused-vars
@@ -524,7 +517,6 @@ export default {
                 })
             }
 
-            //this.update_setting('model', model_object.title, (res)=>{console.log("Model selected"); })
         },
         // Model installation
 
@@ -618,7 +610,7 @@ export default {
                     }
                 });
             })
-
+            this.getPersonalitiesArr()
             this.fetchModels();
         },
         // Accordeon stuff
@@ -695,6 +687,7 @@ export default {
                     console.log("applying configuration succeeded")
                     this.$refs.toast.showToast("Configuration changed successfully.", 4, true)
                     this.settingsChanged = false
+                    this.save_configuration()
                 } else {
                     console.log("applying configuration failed")
                     this.$refs.toast.showToast("Configuration change failed.", 4, false)
@@ -712,7 +705,7 @@ export default {
                 .then((res) => {
                     if (res) {
                         if (res.status) {
-                            this.$refs.messageBox.showMessage("Settings saved!")
+                           // this.$refs.messageBox.showMessage("Settings saved!")
                         }
                         else
                             this.$refs.messageBox.showMessage("Error: Couldn't save settings!")
@@ -773,7 +766,8 @@ export default {
             this.showToast = false
         },
         async getPersonalitiesArr() {
-            this.personalities
+            this.isLoading = true
+            this.personalities=[]
             const dictionary = await this.api_get_req("get_all_personalities")
             const langkeys = Object.keys(dictionary); // returns languages folder names
             for (let i = 0; i < langkeys.length; i++) {
@@ -801,6 +795,9 @@ export default {
                 }
 
             }
+            this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
+            this.isLoading = false
+            
         }
 
     }, async mounted() {
@@ -822,7 +819,7 @@ export default {
         this.langArr = await this.api_get_req("list_languages")
         await this.getPersonalitiesArr()
         this.isLoading = false
-        console.log('ppp', this.personalities)
+
     },
     watch: {
         bec_collapsed() {
@@ -886,12 +883,7 @@ export default {
 
             console.log('iss selected:', val)
         }
-        // configFile(){
-        //     nextTick(() => {
-        //         feather.replace()
 
-        //     }) 
-        // }
 
     }
 }
@@ -922,5 +914,4 @@ export default {
     100% {
         transform: rotate(360deg);
     }
-}
+}</style>
-</style>