ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-02-20 09:16:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

drop box ready

Browse Source
This commit is contained in:
AndzejsP 2023-05-30 13:09:22 +03:00
parent 145437ced0
commit c48ecbdc0b
2 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/components/DragDrop.vue
View File

@ -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) {

56
web/src/views/DiscussionsView.vue
View File

@ -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="setFileListChat">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() {
@ -960,15 +966,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 +1035,18 @@ export default {
setDropZoneChat() {
this.isDragOver = true
this.$refs.dragdropChat.show = true
this.isDropZoneVisible = true
//console.log('is vis',this.isDropZoneVisible)
},
setFileListDiscussion(files) {
this.fileList = files
this.$refs.dragdropDiscussion.fileList = this.fileList
//console.log('dropppp', this.fileList)
this.isDragOverDiscussion = false
},
setDropZoneDiscussion() {
this.isDragOverDiscussion = true
this.$refs.dragdropDiscussion.show = true
},
@ -1040,7 +1056,7 @@ export default {
// Constructor
this.setPageTitle()
await this.list_discussions()
@ -1058,7 +1074,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