mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-21 13:17:47 +00:00
dropzone in progress
This commit is contained in:
AndzejsP
parent
d1f39be021
commit
9ea52d3b90
@ -1,28 +1,142 @@
|
||||
<template>
|
||||
<div class="sticky top-0 mx-auto my-auto h-3/5 w-3/5 bg-red-500">
|
||||
asdasdas
|
||||
</div>
|
||||
<TransitionGroup name="list" tag="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) {
|
||||
event.dataTransfer.dropEffect = 'move'
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
event.dataTransfer.setData('itemID', item.id)
|
||||
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) {
|
||||
[...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>
|
||||
31
web/src/plugins/filesize.js
Normal file
31
web/src/plugins/filesize.js
Normal file
@ -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];
|
||||
}
|
||||
@ -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">
|
||||
@ -77,7 +77,7 @@
|
||||
</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" >
|
||||
<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"
|
||||
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
|
||||
@editTitle="editTitle" @checked="checkUncheckDiscussion" />
|
||||
<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"
|
||||
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
|
||||
@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"
|
||||
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" />
|
||||
<DragDrop ></DragDrop>
|
||||
<div class="flex relative " @dragover.stop.prevent="setDropZone()" >
|
||||
<div class="z-20">
|
||||
<DragDrop ref="dragdrop" @panelDrop="setFileList"></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;
|
||||
transform: translatey(30px);
|
||||
opacity: 0;
|
||||
transform: translatey(30px);
|
||||
}
|
||||
|
||||
/* ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
.list-leave-active {
|
||||
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,7 +689,7 @@ 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")
|
||||
},
|
||||
@ -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
|
||||
},
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user