fixed scroll to bottom thing

This commit is contained in:
AndzejsP 2023-05-31 13:14:04 +03:00
parent ce8dd027c2
commit 39c2577c77

View File

@ -125,10 +125,12 @@
</div> </div>
<div class="relative overflow-y-scroll no-scrollbar flex flex-row flex-grow" @dragover.stop.prevent="setDropZoneDiscussion()"> <div class="relative overflow-y-scroll no-scrollbar flex flex-row flex-grow"
@dragover.stop.prevent="setDropZoneDiscussion()">
<div class="z-20"> <div class="z-20">
<DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here</DragDrop> <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here
</div > </DragDrop>
</div>
<!-- DISCUSSION LIST --> <!-- DISCUSSION LIST -->
<div class="mx-4 flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''"> <div class="mx-4 flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
@ -152,14 +154,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex relative 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" @dragover.stop.prevent="setDropZoneChat()"> <div id="messages-list"
class="flex relative 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"
@dragover.stop.prevent="setDropZoneChat()">
<div class="z-20"> <div class="z-20">
<DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop> <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
</div> </div>
<div :class="isDragOverChat ? 'pointer-events-none' : ''" <div :class="isDragOverChat ? 'pointer-events-none' : ''" class="container flex flex-col flex-grow ">
class="container flex flex-col flex-grow "
id="messages-list">
<!-- CHAT AREA --> <!-- CHAT AREA -->
<div class="conainer flex flex-col flex-grow pt-4 pb-10 "> <div class="conainer flex flex-col flex-grow pt-4 pb-10 ">
@ -644,7 +646,10 @@ export default {
if (messageItem) { if (messageItem) {
messageItem.content = msgObj.data messageItem.content = msgObj.data
} }
nextTick(() => {
const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
})
} }
}, },
@ -867,6 +872,10 @@ export default {
this.isGenerating = false this.isGenerating = false
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating) this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
console.log("Stopped generating") console.log("Stopped generating")
nextTick(() => {
const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
})
}, },
finalMsgEvent(msgObj) { finalMsgEvent(msgObj) {
console.log("final", msgObj) console.log("final", msgObj)
@ -881,6 +890,11 @@ export default {
messageItem.content = msgObj.data messageItem.content = msgObj.data
} }
} }
nextTick(() => {
const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
})
this.isGenerating = false this.isGenerating = false
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating) this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
@ -909,12 +923,12 @@ export default {
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
}, },
parseJsonObj(obj){ parseJsonObj(obj) {
try { try {
const ret = JSON.parse(obj) const ret = JSON.parse(obj)
return ret return ret
} catch (error) { } catch (error) {
this.$refs.toast.showToast("Could not parse JSON. \n"+error.message, 4, false) this.$refs.toast.showToast("Could not parse JSON. \n" + error.message, 4, false)
return null return null
} }
@ -1050,7 +1064,7 @@ export default {
}, },
async setFileListDiscussion(files) { async setFileListDiscussion(files) {
if(files.length > 1){ if (files.length > 1) {
this.$refs.toast.showToast("Failed to import discussions. Too many files", 4, false) this.$refs.toast.showToast("Failed to import discussions. Too many files", 4, false)
return return
} }