ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-20 04:47:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #238 from andzejsp/drop-box

Browse Source 
Drop box
This commit is contained in:
Saifeddine ALOUI 2023-05-30 20:35:57 +02:00 committed by GitHub
commit fb463b1fe5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 165 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/components/BindingEntry.vue
View File

@ -1,16 +1,34 @@
<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="isTemplate ? 'opacity-50' : ''">
<!--
<div class="inline-flex items-center"> -->
<div class="flex flex-row items-center flex-shrink-0 gap-3">
<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 line-clamp-3">
<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="">
@ -45,7 +63,7 @@
</div>
</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>

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

4
web/src/components/ModelEntry.vue
View File

@ -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"

2
web/src/components/PersonalityEntry.vue
View File

@ -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'">

74
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="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"
@ -146,12 +151,13 @@
</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,13 +426,13 @@ 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
}
}
@ -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,10 +977,10 @@ 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)
}
@ -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
},
@ -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

15
web/src/views/SettingsView.vue
View File

@ -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,6 +631,8 @@ 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, () => {
@ -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() {