Merge pull request #194 from andzejsp/settings-collapsed

Settings collapsed

docs/dev/new_ui_dev.md

@@ -36,27 +36,29 @@ This will update `/dist/` folder with all the files. Also the build will show yo
 Here we keep track of things to implement and stuff we need to do.
 ## Todo's
 
-- Add ability to select multiple discussions to export or delete [WIP]
+- Add ability to select multiple discussions to export [WIP]
 - Add toast messages for errors and successes
-- Populate settings with settings controls [WIP]
-- Connect Settings to backend, ability to save changes
 - Add DB switcher (im thinking in the settings view)
 - Make the UI work good on mobile
-- Scroll to bottom
-- Scroll to top
 - Need to fix colors for `<input />` fields
 - Create status bar for backend to display if something is generating on the backend
-- Create stop generating button
-- Fix the generated message formatting - add line breaks, also for user input messages.
 - Add ability for users to style the whole UI, either changing Hue or changing every color manually.
-- Maybe try to set the chatbox to float to the bottom (always on the bottom of the screen)
 - Create a panel in the Settings tab to create new personalities
-- Need to fix when user inputs message it shows up in the discussion array and then add new message for bot that is typing.
 - Need to investigate performance of websocket when message is being streamed back to the UI
 - On first launch of the UI force users to create "User" personality, to be used as "User" for any or all input messages.
-- Connect delete / export discussions to backend functions.
-- Need to fix when deleting multiple discussions to not loose loading animation for each discussion when list gets updated
-- Need to add loading feedback for when a new discussion is being created
+- Add drag n drop files into messages, images gets parsed as images, ability to load images from messages from DB.
+- Send files to backend - images, other files for parsing data.
+- Ability to reorder Discussions, add tags, categories
+- Export whole DB
+- Reset whole DB
+- Add text to speech to messages and chatbox
+- Add indicator to messages when non-comercial model was used. 
+- Ability to export messages that are for commercial use or open source model messages Only.
+- Ability to hide non commercial model messages.
+- Feature - bot council where you add multiple bots to discussion, give them a topic and maybe max message count or something and they ponder about the topic then summerize it all.
+- Feature voice chat with bot and voice output from bot - whisper + bard?
+- Feature under selected discussion show more options to select and add more bots, select model per discussion or per bot, tweak settings per bot or per model.
+- Easy share personality via export to a file, then drag and drop on to the webui and youre done.
 
 ## Done
 
@@ -66,4 +68,16 @@ Here we keep track of things to implement and stuff we need to do.
 - Add clear filter button to search input field [DONE]
 - Add modal to ask user if you sure about to delete [DONE but in different way]
 - Fix up the discussion array to filter out the messages by type not by count. (conditionner and )[DONE]
-- Add title of current discussion to page [DONE]
+- Add title of current discussion to page [DONE]
+- Populate settings with settings controls [DONE]
+- Connect Settings to backend, ability to save changes [DONE]
+- Scroll to bottom [SCROLLBAR]
+- Scroll to top [SCROLLBAR]
+- Create stop generating button [DONE]
+- Fix the generated message formatting - add line breaks, also for user input messages. [DONE]
+- Maybe try to set the chatbox to float to the bottom (always on the bottom of the screen) [DONE]
+- Need to fix when user inputs message it shows up in the discussion array and then add new message for bot that is typing. [DONE]
+- Connect delete / export discussions to backend functions.[DONE]
+- Need to fix when deleting multiple discussions to not loose loading animation for each discussion when list gets updated [DONE]
+- Need to add loading feedback for when a new discussion is being created [DONE]
+- Add ability to select multiple discussions to delete [DONE]

web/dist/index.html

@@ -6,8 +6,8 @@
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GPT4All - WEBUI</title>
-    <script type="module" crossorigin src="/assets/index-7474fb03.js"></script>
-    <link rel="stylesheet" href="/assets/index-be51aada.css">
+    <script type="module" crossorigin src="/assets/index-590a907b.js"></script>
+    <link rel="stylesheet" href="/assets/index-e783286d.css">
   </head>
   <body>
     <div id="app"></div>

web/src/views/SettingsView.vue

@@ -13,6 +13,7 @@
                     <i data-feather="check"></i>
                 </button>
 
+
             </div>
             <!-- SAVE AND RESET -->
             <div v-if="!showConfirmation" class="flex gap-3 flex-1 items-center ">
@@ -24,6 +25,10 @@
                     @click="reset_configuration()">
                     <i data-feather="refresh-ccw"></i>
                 </button>
+                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Collapse / Expand all panels"
+                    type="button" @click.stop="all_collapsed=!all_collapsed">
+                    <i data-feather="list"></i>
+                </button>
             </div>
 
         </div>
@@ -66,23 +71,23 @@
             </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 ">
+            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="mzc_collapsed = !mzc_collapsed"
                     class="text-2xl hover:text-primary duration-75  p-2 -m-2 w-full text-left active:translate-y-1">
-                    <!-- <i data-feather="chevron-right"></i> -->
+                  
 
                     <h3 class="text-lg font-semibold cursor-pointer select-none "
                         @click.stop="mzc_collapsed = !mzc_collapsed">
                         Models zoo</h3>
                 </button>
             </div>
-            <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 p-2">
-                <div v-if="models.length > 0" class="my-2">
+            <div :class="{ 'hidden': mzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
+                <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">
                         Install more models:
                     </label>
-                    <div class="overflow-y-auto max-h-96 no-scrollbar p-2">
+                    <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"
                             :path="model.path" :description="model.description" :is-installed="model.isInstalled"
                             :on-install="onInstall"
@@ -90,7 +95,17 @@
                             :on-selected="onSelected" />
                     </div>
                 </div>
+                 <!-- EXPAND / COLLAPSE BUTTON -->
+                <button v-if="mzl_collapsed" class="text-2xl hover:text-secondary duration-75 flex justify-center  hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " title="Collapse"
+                    type="button" @click="mzl_collapsed = !mzl_collapsed">
+                    <i  data-feather="chevron-up" ></i>  
+                </button>
+                <button v-else class="text-2xl hover:text-secondary duration-75 flex justify-center  hover:bg-bg-light-tone hover:dark:bg-bg-dark-tone rounded-lg " title="Expand"
+                    type="button" @click="mzl_collapsed = !mzl_collapsed">
+                    <i  data-feather="chevron-down" ></i>  
+                </button>
             </div>
+
         </div>
         <!-- PERSONALITY -->
         <div
@@ -353,12 +368,16 @@ export default {
             // Models zoo installer stuff
             models: [],
             personalities:[],
-            // Accordeon stuff     
+            // Accordeon stuff 
+            collapsedArr:[],
+            all_collapsed:true,    
             bec_collapsed: true,
             mzc_collapsed: true, // models zoo
             pzc_collapsed: true, // personalities zoo
             pc_collapsed: true,
             mc_collapsed: true,
+            // Zoo accordeoon
+            mzl_collapsed:false,
             // Settings stuff
             backendsArr: [],
             modelsArr: [],
@@ -374,6 +393,13 @@ export default {
     created() {
         this.fetchModels();
     }, methods: {
+        collapseAll(val){
+            this.bec_collapsed=val
+            this.mzc_collapsed=val
+            this.pzc_collapsed=val
+            this.pc_collapsed=val
+            this.mc_collapsed=val
+        },
         fetchModels() {
             axios.get('/get_available_models')
                 .then(response => {
@@ -602,8 +628,23 @@ export default {
             nextTick(() => {
                 feather.replace()
 
+            })
+        },
+        mzl_collapsed() {
+            
+            nextTick(() => {
+                feather.replace()
+
+            })
+        },
+        all_collapsed(val) {
+            this.collapseAll(val)
+            nextTick(() => {
+                feather.replace()
+
             })
         }
+
     }
 }
 </script>