moved the add models to a separate setting entry

web/src/components/ChatBox.vue

@@ -89,10 +89,10 @@
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 ">
                         <!-- <div class="w-24">
-                            <MountedPersonalities  />
+                            <MountedPersonalities  @click.stop=""/>
+
+                        </div> -->
                        
-                        </div>
-                        -->
 
                         <div class="relative grow">
                             <textarea id="chat" rows="1" v-model="message" title="Hold SHIFT + ENTER to add new line"

web/src/components/MountedPersonalities.vue

@@ -53,7 +53,8 @@ export default {
             mountedPersArr: [],
             personalities: [],
             bUrl: bUrl,
-            isMounted: false
+            isMounted: false,
+            isLoading:false
         }
     },
     async mounted() {
@@ -189,11 +190,13 @@ export default {
                 if (pers.isMounted) {
 
                     const res = await this.select_personality(pers)
-
+                    if (res) {
                         if (res.status) {
                             this.$refs.toast.showToast("Selected personality:\n" + pers.name, 4, true)
 
                         }
+                    }
+
 
                 } else {
                     this.onPersonalityMounted(pers)
@@ -201,10 +204,6 @@ export default {
                 }
 
 
-                nextTick(() => {
-
-
-                })
                 this.isLoading = false
             }
 
@@ -278,7 +277,7 @@ export default {
 
                 }
             } catch (error) {
-                console.log(error.message, 'select_personality - settings')
+                console.log(error, 'select_personality - settings')
                 return
             }
 

web/src/views/SettingsView.vue

@@ -245,6 +245,10 @@
 
                 <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
                     <div class="mb-2" v-if="configFile.binding_name">
+
+                        <!-- <div >
+
+
                             <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                 Add models:
                             </label>
@@ -267,6 +271,7 @@
                                 </form>
 
                             </div>
+
                             <div class="p-2  ">
 
                                 <form>
@@ -284,6 +289,7 @@
                                 </form>
 
                             </div>
+                        </div> -->
                     </div>
                     <div v-if="models.length > 0" class="mb-2">
                         <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
@@ -316,7 +322,63 @@
                 </div>
 
             </div>
+            <!-- ADD MODELS -->
+            <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">
+                <div class="flex flex-row p-3">
+                    <button @click.stop="mzdc_collapsed = !mzdc_collapsed"
+                        class="text-2xl hover:text-primary  p-2 -m-2 w-full text-left flex items-center">
+                        <i :data-feather="mzdc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
+                        <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
+                            Add models</h3>
 
+                    </button>
+                </div>
+                <div :class="{ 'hidden': mzdc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+
+                    <div class="mb-2">
+
+                        <div class="p-2 ">
+
+                            <form>
+                                <div class="mb-3">
+                                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                                        for="file_input">Select
+                                        files</label>
+
+
+                                    <input
+                                        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                                        id="multiple_files" type="file" multiple>
+                                </div>
+
+                                <button type="submit"
+                                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Upload</button>
+                            </form>
+
+                        </div>
+
+                        <div class="p-2  ">
+
+                            <form>
+                                <div class="mb-3">
+                                    <label for="email"
+                                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Model
+                                        URL</label>
+                                    <input type="email" id="email"
+                                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                        placeholder="url" required>
+                                </div>
+
+                                <button type="submit"
+                                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Download</button>
+                            </form>
+
+                        </div>
+                    </div>
+                </div>
+
+            </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">
@@ -413,7 +475,8 @@
                                 </div>
                                 <input type="search" id="personality-search"
                                     class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                                    placeholder="Search personality..." required v-model="searchPersonality" @keyup.stop="searchPersonality_func" >
+                                    placeholder="Search personality..." required v-model="searchPersonality"
+                                    @keyup.stop="searchPersonality_func">
                                 <!-- @input="filterPersonalities()" -->
 
                             </div>
@@ -786,6 +849,7 @@ export default {
             all_collapsed: true,
             bec_collapsed: true,
             mzc_collapsed: true, // models zoo
+            mzdc_collapsed: false, // models zoo download
             pzc_collapsed: true, // personalities zoo
             bzc_collapsed: true, // binding zoo
             pc_collapsed: true,
@@ -1380,7 +1444,7 @@ export default {
             if (!this.searchPersonality) {
                 this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
                 this.personalitiesFiltered.sort()
-                this.searchPersonalityInProgress=false
+                this.searchPersonalityInProgress = false
                 return
             }
             const searchTerm = this.searchPersonality.toLowerCase()
@@ -1401,7 +1465,7 @@ export default {
                 this.personalitiesFiltered = this.personalities.filter((item) => item.category === this.configFile.personality_category && item.language === this.configFile.personality_language)
                 this.personalitiesFiltered.sort()
             }
-            this.searchPersonalityInProgress=false
+            this.searchPersonalityInProgress = false
 
         },
         computedFileSize(size) {
@@ -1624,7 +1688,7 @@ export default {
         searchPersonality_func() {
             clearTimeout(this.searchPersonalityTimer)
             if (this.searchPersonality) {
-                this.searchPersonalityInProgress=true
+                this.searchPersonalityInProgress = true
                 setTimeout(this.filterPersonalities, this.searchPersonalityTimerInterval)
             }
         }
@@ -1863,10 +1927,16 @@ export default {
 
             })
         },
-        searchPersonality(val){
+        searchPersonality(val) {
-            if(val==""){
+            if (val == "") {
                 this.filterPersonalities()
             }
+        },
+        mzdc_collapsed() {
+            nextTick(() => {
+                feather.replace()
+
+            })
         }