From 0d5373943a13227b8c2797b7a43c98c910587f55 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 24 May 2023 17:18:51 +0300
Subject: [PATCH] wip

---
 web/src/components/PersonalityEntry.vue | 46 ++++++------
 web/src/views/SettingsView.vue          | 94 +++++++++----------------
 2 files changed, 57 insertions(+), 83 deletions(-)

diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index baaefd14..d3c9a6c6 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -1,32 +1,32 @@
 <template>
   <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
-    <h3 class="font-bold font-large text-lg">
-        {{ personality.name }}
-      </h3>
-      
+
+
     <div class="flex flex-row items-center  flex-shrink-0 gap-3">
-      <img :src="getImgUrl()" @error="defaultImg($event)" class="w-14 h-14 rounded-full object-fill text-red-700">
-      
-    
-    <div class="">
+      <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
+      <h3 class="font-bold font-large text-lg line-clamp-3">
+      {{ personality.name }}
+    </h3>
+
 
-      <div class="">
-        <b>Author:&nbsp;</b>
-        {{ personality.author }}
-      </div>
-      <div class="">
-        <b>Language:&nbsp;</b>
-        {{ personality.language }}
-      </div>
-      <div class="">
-        <b>Category:&nbsp;</b>
-        {{ personality.category }}
-      </div>
     </div>
-  </div>
     <div class="">
+      <div class="">
 
+<div class="">
+  <b>Author:&nbsp;</b>
+  {{ personality.author }}
+</div>
+<div class="">
+  <b>Language:&nbsp;</b>
+  {{ personality.language }}
+</div>
+<div class="">
+  <b>Category:&nbsp;</b>
+  {{ personality.category }}
+</div>
+</div>
       <b>Description:&nbsp;</b><br>
 
       <p class="opacity-80 line-clamp-3" :title="personality.description">{{ personality.description }}</p>
@@ -63,9 +63,9 @@ export default {
   },
   methods: {
     getImgUrl() {
-      return bUrl+this.personality.avatar
+      return bUrl + this.personality.avatar
     },
-    defaultImg(event){
+    defaultImg(event) {
       event.target.src = botImgPlaceholder
     },
     toggleSelected() {
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index ce2817fd..74f6a864 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -63,43 +63,7 @@
                 </div>
             </div>
         </div>
-        <!-- BACKEND -->
-        <!-- DISABLED FOR NOW -->
-        <!-- <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="bec_collapsed = !bec_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="mzc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
-                    <h3 class="text-lg font-semibold cursor-pointer select-none">
-                        Backend Configuration</h3>
-                </button>
-            </div>
-            <div :class="{ 'hidden': bec_collapsed }" class="flex flex-col mb-2 p-2">
-                <div class="m-2">
-                    <label for="backend" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Backend:
-                    </label>
-                    <select id="backend" @change="update_backend($event.target.value)"
-                        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 backendsArr" :selected="item === configFile.backend">{{ item }}</option>
-                    </select>
-                </div>
-                <div class="m-2">
-                    <label for="model" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Model:
-                    </label>
-                    <select id="model" @change="update_model($event.target.value)"
-                        @mouseup="update_model($event.target.value)"
-                        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 modelsArr" :selected="item === configFile.model">{{ item }}</option>
-
-                    </select>
-                </div>
-            </div>
-        </div> -->
+        <!-- MODELS 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">
             <div class="flex flex-row p-3">
@@ -125,7 +89,7 @@
                     <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
                         Models:
                     </label>
-                    <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0"
+                    <div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0  grid lg:grid-cols-3 md:grid-cols-2 gap-4"
                         :class="mzl_collapsed ? '' : 'max-h-96'">
                         <model-entry v-for="(model, index) in models" :key="index" :title="model.title" :icon="model.icon"
                             :path="model.path" :owner="model.owner" :owner_link="model.owner_link" :license="model.license"
@@ -206,8 +170,11 @@
 
             </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">
+        
+            
             <div class="flex flex-row p-3">
                 <button @click.stop="pzc_collapsed = !pzc_collapsed"
                     class="text-2xl hover:text-primary duration-75 p-2 -m-2 w-full text-left active:translate-y-1 flex items-center">
@@ -217,11 +184,38 @@
                 </button>
             </div>
             <div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+                <div class="mx-2 mb-4">
+                    <label for="persLang" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Personalities Languages:
+                    </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="mx-2 mb-4">
+                    <label for="persCat" class="block  mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                        Personalities Category:
+                    </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 v-if="personalities.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:
                     </label>
-                    <div ref="personalitiesZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 grid grid-cols-4 gap-4"
+                    <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" />
                     </div>
@@ -240,28 +234,7 @@
             </div>
 
         </div>
-        <!-- <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="pzc_collapsed = !pzc_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="mc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2"></i>
-                    <h3 class="text-lg font-semibold cursor-pointer select-none">
-                        Personalities zoo
-                    </h3>
-                </button>
-            </div>
-            <div :class="{ 'hidden': pzc_collapsed }" class="flex flex-col mb-2 p-2">
-                <div v-if="models.length > 0" class="my-2">
-                    <label for="model" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                        Install more models:
-                    </label>
-                    <div class="overflow-y-auto max-h-96 no-scrollbar p-2">
 
-                    </div>
-                </div>
-            </div>
-        </div> -->
         <!-- MODEL -->
         <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">
@@ -509,6 +482,7 @@ export default {
                             let newModelEntry = {}
                             newModelEntry.title = customModel
                             newModelEntry.isCustomModel = true
+                            newModelEntry.isInstalled = true
                             this.models.push(newModelEntry)
                         }
                     }