Merge pull request #238 from andzejsp/drop-box

Drop box

web/src/components/BindingEntry.vue

@@ -1,51 +1,69 @@
 <template>
-  <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
+  <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
 
-
-    <div class="flex flex-row items-center  flex-shrink-0 gap-3">
-      <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">
-        {{ binding.name }}
-      </h3>
+    <div :class="isTemplate ? 'opacity-50' : ''">
+      <!-- 
+<div class="inline-flex items-center"> -->
 
 
-    </div>
-    <div class="">
+      <div class="flex flex-row items-center   gap-3 ">
+        <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 truncate">
+          {{ binding.name }}
+        </h3>
+        <div class="grow">
+          <!-- EMPTY SPACE FILLER -->
+        </div>
+
+        <div class="flex-none">
+          <button type="button"
+            class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">
+            <i data-feather="sliders" class="w-5 m-1"></i>
+            <span class="sr-only">Icon description</span>
+          </button>
+        </div>
+
+      </div>
+      <!-- <div class="  justify-end">
+          <i data-feather="sliders" class="w-5 m-1"></i>
+        </div>
+      </div> -->
       <div class="">
+        <div class="">
 
-        <div class="flex items-center">
-          <i data-feather="user" class="w-5 m-1"></i>
-          <b>Author:&nbsp;</b>
+          <div class="flex items-center">
+            <i data-feather="user" class="w-5 m-1"></i>
+            <b>Author:&nbsp;</b>
 
-          {{ binding.author }}
+            {{ binding.author }}
+          </div>
+          <div class="flex items-center">
+            <i data-feather="folder" class="w-5 m-1"></i>
+            <b>Folder:&nbsp;</b>
+
+            {{ binding.folder }}
+          </div>
+          <div class="flex items-center">
+            <i data-feather="git-merge" class="w-5 m-1"></i>
+            <b>Version:&nbsp;</b>
+            {{ binding.version }}
+          </div>
+          <a :href="binding.link" target="_blank" class="flex items-center">
+            <i data-feather="github" class="w-5 m-1"></i>
+            <b>Link:&nbsp;</b>
+            {{ binding.link }}
+          </a>
         </div>
         <div class="flex items-center">
-          <i data-feather="folder" class="w-5 m-1"></i>
-          <b>Folder:&nbsp;</b>
+          <i data-feather="info" class="w-5 m-1"></i>
+          <b>Description:&nbsp;</b><br>
+        </div>
+        <p class="mx-1 opacity-80 line-clamp-3" :title="binding.description">{{ binding.description }}</p>
+
 
-          {{ binding.folder }}
-        </div>
-        <div class="flex items-center">
-          <i data-feather="git-merge" class="w-5 m-1"></i>
-          <b>Version:&nbsp;</b>
-          {{ binding.version }}
-        </div>
-        <a :href="binding.link" target="_blank" class="flex items-center">
-          <i data-feather="github" class="w-5 m-1"></i>
-          <b>Link:&nbsp;</b>
-          {{ binding.link }}
-        </a>
       </div>
-      <div class="flex items-center">
-        <i data-feather="info" class="w-5 m-1"></i>
-        <b>Description:&nbsp;</b><br>
-      </div>
-      <p class="mx-1 opacity-80 line-clamp-3" :title="binding.description">{{ binding.description }}</p>
-
-
     </div>
-
   </div>
 </template>
 
@@ -59,11 +77,12 @@ export default {
   props: {
     binding: {},
     onSelected: Function,
-    selected: Boolean
+    selected: Boolean,
+
   },
   data() {
     return {
-
+      isTemplate: false
     };
   },
   mounted() {
@@ -72,6 +91,10 @@ export default {
 
 
     })
+
+    this.getStatus()
+
+
   },
   methods: {
     getImgUrl() {
@@ -83,7 +106,15 @@ export default {
     toggleSelected() {
       this.onSelected(this)
     },
+    getStatus() {
+      if (this.binding.folder === 'backend_template' || this.binding.folder === 'binding_template') {
+        this.isTemplate = true
+
+
+      }
+    }
+
+  },
 
-  }
 };
 </script>

web/src/components/DragDrop.vue

@@ -6,20 +6,22 @@
             class="select-none text-slate-50 absolute top-0 left-0 right-0 bottom-0 flex flex-col  items-center justify-center bg-black bg-opacity-50 duration-200 backdrop-blur-sm "
             @dragleave.prevent="panelLeave($event)" @drop.stop.prevent="panelDrop($event)">
             <div
-                class="flex flex-col  items-center justify-center p-8 rounded-lg shadow-lg border-dashed border-4 border-secondary w-4/5 h-4/5 " >
+                class="flex flex-col  items-center justify-center p-8 rounded-lg shadow-lg border-dashed border-4 border-secondary w-4/5 h-4/5 " :class="dropRelease?'':'pointer-events-none'">
 
 
-                <div class="text-4xl " :class="dropRelease?'':'pointer-events-none'">
+                <div class="text-4xl text-center" >
+                    <slot>
 
-                    <div v-if="fileList.length == 0">
                         Drop your files here
-                    </div>
-
-                    <div v-if="fileList.length > 0" class="flex flex-row gap-2 items-center">
+                    <!-- <div v-if="fileList.length == 0">
+                        Drop your files here
+                    </div> -->
+                </slot>
+                    <!-- <div v-if="fileList.length > 0" class="flex flex-row gap-2 items-center">
                         <i data-feather="file" class="w-12 h-12"></i>
                         Files to upload
                         ({{ fileList.length }})
-                    </div>
+                    </div> -->
                 </div>
 
                 <!-- DISABLED UNTIL FURTHER NOTICE -->
@@ -80,13 +82,13 @@ export default {
         })
     },
     methods: {
-        computedFileSize(size) {
-            return filesize(size)
-        },
-        removeItem(file) {
-            this.fileList = this.fileList.filter((item) => item != file)
-            // console.log(this.fileList)
-        },
+        // computedFileSize(size) {
+        //     return filesize(size)
+        // },
+        // removeItem(file) {
+        //     this.fileList = this.fileList.filter((item) => item != file)
+        //     // console.log(this.fileList)
+        // },
         panelDrop(event) {
             this.dropRelease = true
             if (event.dataTransfer.files.length > 0) {

web/src/components/ModelEntry.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
+  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
 
 
@@ -19,7 +19,7 @@
         </h3>
       </div>
       <div class="flex flex-shrink-0 items-center ">
-        <i  data-feather="link" class="w-5 m-1" ></i>
+        <i  data-feather="download" class="w-5 m-1" ></i>
         <b>Manual download:&nbsp;</b>
         
         <a :href="path" @click.stop class="flex items-center  hover:text-secondary duration-75 active:scale-90"

web/src/components/PersonalityEntry.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
+  <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
 
 

web/src/views/DiscussionsView.vue

@@ -122,13 +122,18 @@
                     </div>
                 </div>
             </div>
+
         </div>
-        <div class="relative overflow-y-scroll no-scrollbar">
+
+        <div class="relative overflow-y-scroll no-scrollbar flex flex-row flex-grow"  @dragover.stop.prevent="setDropZoneDiscussion()">
             <div class="z-20">
-            <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListChat"></DragDrop>
-        </div>
+                <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here</DragDrop>
+            </div >
             <!-- DISCUSSION LIST -->
-            <div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
+            <div class="mx-4 flex-grow"  :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
+
+            
+            <div  :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
                 <TransitionGroup v-if="list.length > 0" name="list">
                     <Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
                         :selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
@@ -145,13 +150,14 @@
                 </div>
             </div>
         </div>
+        </div>
     </div>
     <div class="flex relative flex-grow " @dragover.stop.prevent="setDropZoneChat()">
         <div class="z-20">
             <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
         </div>
 
-        <div :class="isDragOver ? 'pointer-events-none' : ''"
+        <div :class="isDragOverChat ? 'pointer-events-none' : ''"
             class="flex flex-col flex-grow overflow-y-auto  scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary"
             id="messages-list">
 
@@ -230,8 +236,8 @@ export default {
             isDiscussionBottom: false,
             personalityAvatars: [], // object array of personality name: and avatar: props
             fileList: [],
-            isDropZoneVisible: true,
-            isDragOver: false
+            isDragOverDiscussion: false,
+            isDragOverChat: false
         }
     },
     methods: {
@@ -420,20 +426,20 @@ export default {
         async import_multiple_discussions(jArray) {
             try {
                 if (jArray.length > 0) {
-                    console.log('sending import',jArray)
+                    console.log('sending import', jArray)
                     const res = await axios.post('/import_multiple_discussions', {
                         jArray
                     })
 
                     if (res) {
-                        console.log('import response',res.data)
+                        console.log('import response', res.data)
                         return res.data
                     }
                 }
 
             } catch (error) {
                 console.log("Error: Could not import multiple discussions", error.message)
-                return 
+                return
             }
         },
         filterDiscussions() {
@@ -714,7 +720,7 @@ export default {
             this.tempList = this.list
             this.isCheckbox = false
             this.$refs.toast.showToast("Removed (" + deleteList.length + ") items", 4, true)
-
+            this.showConfirmation = false
             console.log("Multi delete done")
         },
         async deleteMessage(msgId) {
@@ -903,10 +909,21 @@ export default {
             a.click();
             document.body.removeChild(a);
         },
+        parseJsonObj(obj){
+            try {
+                 const ret = JSON.parse(obj)
+                 return ret
+            } catch (error) {
+                this.$refs.toast.showToast("Could not parse JSON. \n"+error.message, 4, false)
+                return null
+            }
+           
+        },
         async parseJsonFile(file) {
+
             return new Promise((resolve, reject) => {
                 const fileReader = new FileReader()
-                fileReader.onload = event => resolve(JSON.parse(event.target.result))
+                fileReader.onload = event => resolve(this.parseJsonObj(event.target.result))
                 fileReader.onerror = error => reject(error)
                 fileReader.readAsText(file)
             })
@@ -960,15 +977,15 @@ export default {
             const obj = await this.parseJsonFile(event.target.files[0])
 
             const res = await this.import_multiple_discussions(obj)
-            if(res){
-                this.$refs.toast.showToast("Successfully imported ("+obj.length+")", 4, true)
+            if (res) {
+                this.$refs.toast.showToast("Successfully imported (" + obj.length + ")", 4, true)
                 await this.list_discussions()
-            }else{
+            } else {
                 this.$refs.toast.showToast("Failed to import discussions", 4, false)
             }
-            
-            
-           
+
+
+
         },
         async getPersonalityAvatars() {
 
@@ -1029,8 +1046,31 @@ export default {
         setDropZoneChat() {
             this.isDragOver = true
             this.$refs.dragdropChat.show = true
-            this.isDropZoneVisible = true
-            //console.log('is vis',this.isDropZoneVisible)
+
+        },
+        async setFileListDiscussion(files) {
+            
+            if(files.length > 1){
+                this.$refs.toast.showToast("Failed to import discussions. Too many files", 4, false)
+              return  
+            }
+            const obj = await this.parseJsonFile(files[0])
+
+            const res = await this.import_multiple_discussions(obj)
+            if (res) {
+                this.$refs.toast.showToast("Successfully imported (" + obj.length + ")", 4, true)
+                await this.list_discussions()
+            } else {
+                this.$refs.toast.showToast("Failed to import discussions", 4, false)
+            }
+
+
+            this.isDragOverDiscussion = false
+        },
+        setDropZoneDiscussion() {
+            this.isDragOverDiscussion = true
+            this.$refs.dragdropDiscussion.show = true
+
         },
 
 
@@ -1040,7 +1080,7 @@ export default {
         // Constructor
 
 
-        
+
         this.setPageTitle()
         await this.list_discussions()
 
@@ -1058,7 +1098,7 @@ export default {
 
     },
     async activated() {
-        //this.$refs.dragdropDiscussion.show = true
+      
         // This lifecycle hook runs every time you switch from other page back to this page (vue-router)
         // To fix scrolling back to last message, this hook is needed.
         // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D

web/src/views/SettingsView.vue

@@ -582,8 +582,10 @@ export default {
             this.bec_collapsed = val
             this.mzc_collapsed = val
             this.pzc_collapsed = val
+            this.bzc_collapsed = val
             this.pc_collapsed = val
             this.mc_collapsed = val
+
         },
         fetchModels() {
 
@@ -629,7 +631,9 @@ export default {
                 this.$refs.toast.showToast("Loading... please wait", 4, false)
             }
             if (pers.personality) {
+                if(this.configFile.personality != pers.personality.name){
 
+               
                 this.settingsChanged = true
                 const res = this.update_setting('personality', pers.personality.folder, () => {
                     this.$refs.toast.showToast("Selected personality:\n" + pers.personality.name, 4, true)
@@ -637,7 +641,7 @@ export default {
                     this.configFile.personality_category = pers.personality.category
                     this.configFile.personality_language = pers.personality.language
                 })
-
+            }
                 nextTick(() => {
                     feather.replace()
 
@@ -771,8 +775,17 @@ export default {
             socket.emit('uninstall_model', { path: model_object.path });
         },
         onSelectedBinding(binding_object) {
+if(this.configFile.binding != binding_object.binding.folder){
+
+
+            if(binding_object.binding.folder ==='backend_template' || binding_object.binding.folder==='binding_template'){
+                this.$refs.toast.showToast("Cannot select template", 4, false)
+                    
+                return
+            }
             this.update_binding(binding_object.binding.folder)
             //console.log('lol',binding_object)
+        }
         },
         // messagebox ok stuff
         onMessageBoxOk() {
@@ -951,7 +964,7 @@ export default {
                 const res = await axios.get("/" + endpoint);
 
                 if (res) {
-
+                    
                     return res.data
 
                 }