dropzone in progress

web/src/components/DragDrop.vue

@@ -1,28 +1,142 @@
 <template>
-    <div  class="sticky top-0 mx-auto my-auto h-3/5 w-3/5  bg-red-500">
+    <TransitionGroup name="list" tag="div">
-asdasdas
+
-    </div>
+
+        <div key="dropmenu" v-if="show"
+            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 " >
+
+
+                <div class="text-4xl " :class="dropRelease?'':'pointer-events-none'">
+
+                    <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">
+                        <i data-feather="file" class="w-12 h-12"></i>
+                        Files to upload
+                        ({{ fileList.length }})
+                    </div>
+                </div>
+                <div class=" overflow-auto no-scrollbar">
+
+                    <TransitionGroup name="list" tag="div" class="flex flex-col items-center p-2">
+                        <div v-for="file in fileList" :key="file.name">
+                            <div class="relative m-1 cursor-pointer">
+
+                                <span
+                                    class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium bg-bg-dark-tone-panel rounded-lg hover:bg-primary-light ">
+                                    <i data-feather="file" class="w-5 h-5 mr-1"></i>
+                                    {{ file.name }}
+                                    ({{ computedFileSize(file.size) }})
+                                    <button type="button" title="Remove item"
+                                        class="inline-flex items-center p-0.5 ml-2 text-sm rounded-sm hover:text-red-600 active:scale-75"
+                                        @click="removeItem(file)">
+                                        <i data-feather="x" class="w-5 h-5 "></i>
+
+                                    </button>
+                                </span>
+
+
+                            </div>
+                        </div>
+                    </TransitionGroup>
+                </div>
+
+            </div>
+        </div>
+    </TransitionGroup>
 </template>
 
 <script>
+import filesize from '../plugins/filesize'
+import feather from 'feather-icons'
+import { nextTick, TransitionGroup } from 'vue'
 export default {
-    setup () {
+    setup() {
-        
+
 
         return {}
     },
+    name: 'DragDrop',
+    emits: ['panelLeave', 'panelDrop'],
+
+    data() {
+        return {
+            fileList: [],
+            show: false,
+            dropRelease: false
+        }
+    },
+    mounted() {
+        //this.fileList.push({ name: 'lol.sss', size: 22 })
+        nextTick(() => {
+            feather.replace()
+
+        })
+    },
     methods: {
-    startDrag(event, item) {
+        computedFileSize(size) {
-      event.dataTransfer.dropEffect = 'move'
+            return filesize(size)
-      event.dataTransfer.effectAllowed = 'move'
+        },
-      event.dataTransfer.setData('itemID', item.id)
+        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) {
+                [...event.dataTransfer.files].forEach(element => {
+                    this.fileList.push(element)
+                });
+            }
+
+            nextTick(() => {
+                feather.replace()
+            })
+            this.$emit('panelDrop', this.fileList)
+            
+            this.show = false
+            // console.log("dropped", this.fileList)
+            //console.log(event.dataTransfer.files[0]);
+
+        },
+        panelLeave() {
+            this.$emit('panelLeave')
+            console.log('exit/leave')
+            this.dropRelease = false
+            this.show = false
+            //this.fileList = []
+            nextTick(() => {
+                feather.replace()
+
+            })
+        }
+
     },
-    onDrop(event, list) {
-      const itemID = event.dataTransfer.getData('itemID')
-      const item = this.items.find((item) => item.id == itemID)
-      item.list = list
-    },
-  },
 }
 </script>
 
+<style>
+.list-move,
+/* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+    transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+    position: absolute;
+}
+</style>

web/src/plugins/filesize.js

@@ -0,0 +1,31 @@
+   /** From https://stackoverflow.com/a/14919494/14106028
+   * Format bytes as human-readable text.
+   * 
+   * @param bytes Number of bytes.
+   * @param si True to use metric (SI) units, aka powers of 1000. False to use 
+   *           binary (IEC), aka powers of 1024.
+   * @param dp Number of decimal places to display.
+   * 
+   * @return Formatted string.
+   */
+   export default function humanFileSize(bytes, si = true, dp = 1) {
+        const thresh = si ? 1000 : 1024;
+  
+        if (Math.abs(bytes) < thresh) {
+          return bytes + ' B';
+        }
+  
+        const units = si
+          ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+          : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+        let u = -1;
+        const r = 10 ** dp;
+  
+        do {
+          bytes /= thresh;
+          ++u;
+        } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  
+  
+        return bytes.toFixed(dp) + ' ' + units[u];
+      }

web/src/views/DiscussionsView.vue

@@ -2,7 +2,7 @@
     <div
         class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone">
         <!-- LEFT SIDE PANEL -->
-        <div class="z-10 sticky top-0 flex-col  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
+        <div class=" sticky top-0 flex-col  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
 
 
             <!-- CONTROL PANEL -->
@@ -51,11 +51,11 @@
             </div>
             <!-- SEARCH BAR -->
             <!-- <Transition name="expand" > -->
-            <div key="1" v-if="isSearch"  class="flex-row  items-center gap-3 flex-0 w-full">
+            <div key="1" v-if="isSearch" class="flex-row  items-center gap-3 flex-0 w-full">
-                
 
-                
+
-                <div  class="p-4 pt-2 ">
+
+                <div class="p-4 pt-2 ">
                     <div class="relative">
                         <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                             <div class="scale-75">
@@ -75,9 +75,9 @@
                             @input="filterDiscussions()" />
                     </div>
                 </div>
-            
+
             </div>
-        <!-- </Transition> -->
+            <!-- </Transition> -->
             <hr v-if="isCheckbox" class="h-px bg-bg-light p-0 mb-4 px-4 mx-4 border-0 dark:bg-bg-dark">
             <div v-if="isCheckbox" class="flex flex-row flex-grow p-4 pt-0 items-center">
 
@@ -125,11 +125,11 @@
         <div class="relative overflow-y-scroll no-scrollbar">
             <!-- DISCUSSION LIST -->
             <div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
-                <TransitionGroup v-if="list.length>0" name="list" >
+                <TransitionGroup v-if="list.length > 0" name="list">
-                <Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
+                    <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"
+                        :selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
-                    :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
+                        :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
-                    @editTitle="editTitle" @checked="checkUncheckDiscussion" />
+                        @delete="deleteDiscussion(item.id)" @editTitle="editTitle" @checked="checkUncheckDiscussion" />
                 </TransitionGroup>
                 <div v-if="list.length < 1"
                     class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
@@ -142,27 +142,35 @@
             </div>
         </div>
     </div>
-    <div class="overflow-y-auto flex flex-col flex-grow  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"
+    <div class="flex relative " @dragover.stop.prevent="setDropZone()" >
-        id="messages-list">
+        <div class="z-20">
-
+            <DragDrop ref="dragdrop"  @panelDrop="setFileList"></DragDrop>
-        <!-- CHAT AREA -->
-        <div class="container flex flex-col flex-grow pt-4 pb-10">
-            <TransitionGroup v-if="discussionArr.length>0" name="list" >
-            <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" ref="messages"
-                @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" @rankDown="rankDownMessage"
-                @updateMessage="updateMessage" @resendMessage="resendMessage" :avatar="getAvatar(msg.sender)" />
-               
-           
-        </TransitionGroup>
-        <WelcomeComponent  v-if="!currentDiscussion.id" />
-        <DragDrop ></DragDrop>
-        </div>
-        
-        <div class=" sticky bottom-0">
-            <ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
-                @stopGenerating="stopGenerating" />
         </div>
 
+        <div  :class="isDragOver?'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" >
+
+            <!-- CHAT AREA -->
+            <div class="container flex flex-col flex-grow pt-4 pb-10 ">
+                <TransitionGroup v-if="discussionArr.length > 0" name="list">
+                    <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id"
+                        ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage"
+                        @rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage"
+                        :avatar="getAvatar(msg.sender)" />
+
+
+                </TransitionGroup>
+                <WelcomeComponent v-if="!currentDiscussion.id" />
+
+            </div>
+
+
+            <div class=" sticky bottom-0">
+                <ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
+                    @stopGenerating="stopGenerating" />
+            </div>
+
+        </div>
     </div>
     <Toast ref="toast">
     </Toast>
@@ -171,23 +179,26 @@
 
 <style scoped>
 /* THESE ARE FOR TransitionGroup components */
-.list-move, /* apply transition to moving elements */
+.list-move,
+/* apply transition to moving elements */
 .list-enter-active,
 .list-leave-active {
-  transition: all 0.5s ease;
+    transition: all 0.5s ease;
 }
 
 .list-enter-from {
     transform: translatey(-30px);
 }
+
 .list-leave-to {
-  opacity: 0;
+    opacity: 0;
-  transform: translatey(30px);
+    transform: translatey(30px);
 }
+
 /* ensure leaving items are taken out of layout flow so that moving
    animations can be calculated correctly. */
-   .list-leave-active {
+.list-leave-active {
-  position: absolute;
+    position: absolute;
 }
 </style>
 <script>
@@ -212,7 +223,10 @@ export default {
             showToast: false,
             isSearch: false,
             isDiscussionBottom: false,
-            personalityAvatars: [] // object array of personality name: and avatar: props
+            personalityAvatars: [], // object array of personality name: and avatar: props
+            fileList: [],
+            isDropZoneVisible: true,
+            isDragOver:false
         }
     },
     methods: {
@@ -226,7 +240,7 @@ export default {
 
                 }
             } catch (error) {
-                console.log(error.message,'api_get_req')
+                console.log(error.message, 'api_get_req')
                 return
             }
 
@@ -263,7 +277,7 @@ export default {
                     }
                 }
             } catch (error) {
-                console.log(error.message,'load_discussion')
+                console.log(error.message, 'load_discussion')
                 this.loading = false
                 this.setDiscussionLoading(id, this.loading)
             }
@@ -404,10 +418,10 @@ export default {
             if (!this.filterInProgress) {
                 this.filterInProgress = true
                 setTimeout(() => {
-                    if(this.filterTitle){
+                    if (this.filterTitle) {
                         this.list = this.tempList.filter((item) => item.title && item.title.includes(this.filterTitle))
 
-                    }else{
+                    } else {
                         this.list = this.tempList
                     }
                     this.filterInProgress = false
@@ -556,9 +570,9 @@ export default {
         },
         sendMsg(msg) {
             // Sends message to binding
-            if(!msg){
+            if (!msg) {
                 this.$refs.toast.showToast("Message contains no content!", 4, false)
-                 return
+                return
             }
             this.isGenerating = true;
             this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
@@ -675,8 +689,8 @@ export default {
             }
             this.tempList = this.list
             this.isCheckbox = false
-            this.$refs.toast.showToast("Removed ("+deleteList.length+") items", 4, true)
+            this.$refs.toast.showToast("Removed (" + deleteList.length + ") items", 4, true)
-                
+
             console.log("Multi delete done")
         },
         async deleteMessage(msgId) {
@@ -845,7 +859,7 @@ export default {
         copyToClipBoard(content) {
             this.$refs.toast.showToast("Copied to clipboard successfully", 4, true)
             navigator.clipboard.writeText(content);
-            
+
             nextTick(() => {
                 feather.replace()
 
@@ -954,11 +968,24 @@ export default {
         getAvatar(sender) {
             const index = this.personalityAvatars.findIndex((x) => x.name === sender)
             const pers = this.personalityAvatars[index]
-            if(pers){
+            if (pers) {
                 return pers.avatar
             }
-            
+
-            return 
+            return
+        },
+        setFileList(files) {
+            this.fileList = files
+            console.log('dropppp', this.fileList)
+        },
+        setDropZone(){
+            this.isDragOver=true
+            this.$refs.dragdrop.show=true
+            this.isDropZoneVisible=true
+            console.log('is vis',this.isDropZoneVisible)
+        },
+        hideDropZone(){
+            this.$refs.dragdrop.show=false
         }
 
 
@@ -982,7 +1009,7 @@ export default {
         socket.on('infos', this.createBotMsg)
         socket.on('message', this.streamMessageContent)
         socket.on("final", this.finalMsgEvent)
-
+        
     },
     async activated() {
         // This lifecycle hook runs every time you switch from other page back to this page (vue-router)
@@ -1062,7 +1089,7 @@ import DragDrop from '../components/DragDrop.vue'
 import feather from 'feather-icons'
 
 import axios from 'axios'
-import { nextTick,TransitionGroup } from 'vue'
+import { nextTick, TransitionGroup } from 'vue'
 
 import socket from '@/services/websocket.js'