more fixes

This commit is contained in:
AndzejsP 2023-06-03 15:27:58 +03:00
parent 5b0757113d
commit cce5d3a1a1
2 changed files with 39 additions and 37 deletions
web/src

View File

@ -1,5 +1,5 @@
<template>
<div class=" bottom-0 justify-center text-center p-0 w-96">
<div class="absolute bottom-0 w-96 justify-center text-center p-4">
<div v-if="loading" class="flex items-center justify-center w-full">
<div class="flex flex-row p-2 rounded-t-lg ">
@ -13,11 +13,11 @@
<form>
<label for="chat" class="sr-only">Send message</label>
<div class="px-3 py-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg ">
<!-- FILES -->
<div class="">
<div class="flex flex-col gap-2">
<!-- FILES -->
<div v-if="fileList.length > 0" class="flex flex-col max-h-64 ">
<TransitionGroup name="list" tag="div"
class="flex flex-col flex-grow overflow-y-scroll mb-2 gap-1 scrollbar-thin scrollbar-track-bg-light-tone-panel 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">
<TransitionGroup name="list" tag="div" class="flex flex-col flex-grow overflow-y-scroll ">
<div v-for="file in fileList" :key="file.name">
<div class=" cursor-pointer pb-1 flex ">
@ -59,10 +59,11 @@
</TransitionGroup>
</div>
<div v-if="fileList.length > 0" class="flex items-center bg-red-600">
<!-- ADDITIONAL OPTIONS IF NEEDED -->
</div>
<!-- CHAT BOX -->
<div class="flex flex-row flex-grow items-center gap-2 ">
<textarea id="chat" rows="1" v-model="message"
class="block min-h-11 no-scrollbar p-2.5 w-full text-sm text-gray-900 bg-bg-light rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Send message..." @keydown.enter.exact="submitOnEnter($event)"></textarea>
@ -142,7 +143,7 @@ export default {
data() {
return {
message: "",
fileList: []
fileList: [],
}
},
methods: {
@ -152,6 +153,7 @@ export default {
})
return filesize(size)
},
removeItem(file) {
this.fileList = this.fileList.filter((item) => item != file)
// console.log(this.fileList)
@ -189,7 +191,11 @@ export default {
nextTick(() => {
feather.replace()
})
}
},
},
computed:{
},
mounted() {
nextTick(() => {

View File

@ -164,11 +164,11 @@
</div>
<div id="messages-list"
class=" 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"
class=" z-0 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"
:class="isDragOverChat ? 'pointer-events-none' : ''">
<!-- CHAT AREA -->
<div class=" container pt-4 pb-10 ">
<div class=" container pt-4 pb-10 mb-16">
<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"
@ -181,13 +181,15 @@
</div>
<div
class="sticky bottom-0 container flex flex-row items-center justify-center bg-transparent p-4 pt-10 bg-gradient-to-t from-bg-light dark:from-bg-dark from-5% via-bg-light dark:via-bg-dark via-10% to-transparent to-100%">
<ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
@stopGenerating="stopGenerating" />
</div>
<!-- CAN ADD FOOTER PANEL HERE -->
class="absolute w-full bottom-0 bg-transparent p-10 pt-16 bg-gradient-to-t from-bg-light dark:from-bg-dark from-5% via-bg-light dark:via-bg-dark via-10% to-transparent to-100%">
</div>
<div class=" bottom-0 container flex flex-row items-center justify-center ">
<ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
@stopGenerating="stopGenerating" />
</div>
<!-- CAN ADD FOOTER PANEL HERE -->
</div>
</div>
@ -295,13 +297,7 @@ export default {
this.discussionArr = res.data.filter((item) => item.type == 0)
}
// nextTick(() => {
// const msgList = document.getElementById('messages-list')
// this.scrollBottom(msgList)
// })
}
} catch (error) {
console.log(error.message, 'load_discussion')
@ -536,7 +532,7 @@ export default {
}
)
} else {
console.log("Error: scrollBottom")
console.log("Error: scrollTop")
}
},
@ -591,12 +587,12 @@ export default {
//type: msgObj.type
}
this.discussionArr.push(responseMessage)
nextTick(() => {
const msgList = document.getElementById('messages-list')
// nextTick(() => {
// const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
// this.scrollBottom(msgList)
})
// })
if (this.currentDiscussion.title === '' || this.currentDiscussion.title === null) {
if (msgObj.type == "input_message_infos") {
@ -660,10 +656,11 @@ export default {
if (messageItem) {
messageItem.content = msgObj.data
}
nextTick(() => {
const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
})
// // Disables as per request
// nextTick(() => {
// const msgList = document.getElementById('messages-list')
// this.scrollBottom(msgList)
// })
}
},
@ -1068,11 +1065,11 @@ export default {
setFileListChat(files) {
this.fileList = files
this.$refs.chatBox.fileList = this.fileList
//console.log('dropppp', this.fileList)
this.isDragOverChat = false
},
setDropZoneChat() {
console.log('ssss')
this.isDragOverChat = true
this.$refs.dragdropChat.show = true
@ -1143,8 +1140,7 @@ export default {
const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
//this.setDropZoneChat()
//this.setDropZoneDiscussion()
})
}
},