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

View File

@ -1,5 +1,5 @@
<template> <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 v-if="loading" class="flex items-center justify-center w-full">
<div class="flex flex-row p-2 rounded-t-lg "> <div class="flex flex-row p-2 rounded-t-lg ">
@ -13,11 +13,11 @@
<form> <form>
<label for="chat" class="sr-only">Send message</label> <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 "> <div class="px-3 py-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg ">
<div class="flex flex-col gap-2">
<!-- FILES --> <!-- FILES -->
<div class="">
<div v-if="fileList.length > 0" class="flex flex-col max-h-64 "> <div v-if="fileList.length > 0" class="flex flex-col max-h-64 ">
<TransitionGroup name="list" tag="div" <TransitionGroup name="list" tag="div" class="flex flex-col flex-grow overflow-y-scroll ">
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">
<div v-for="file in fileList" :key="file.name"> <div v-for="file in fileList" :key="file.name">
<div class=" cursor-pointer pb-1 flex "> <div class=" cursor-pointer pb-1 flex ">
@ -59,10 +59,11 @@
</TransitionGroup> </TransitionGroup>
</div> </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 "> <div class="flex flex-row flex-grow items-center gap-2 ">
<textarea id="chat" rows="1" v-model="message" <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" 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> placeholder="Send message..." @keydown.enter.exact="submitOnEnter($event)"></textarea>
@ -142,7 +143,7 @@ export default {
data() { data() {
return { return {
message: "", message: "",
fileList: [] fileList: [],
} }
}, },
methods: { methods: {
@ -152,6 +153,7 @@ export default {
}) })
return filesize(size) return filesize(size)
}, },
removeItem(file) { removeItem(file) {
this.fileList = this.fileList.filter((item) => item != file) this.fileList = this.fileList.filter((item) => item != file)
// console.log(this.fileList) // console.log(this.fileList)
@ -189,7 +191,11 @@ export default {
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()
}) })
} },
},
computed:{
}, },
mounted() { mounted() {
nextTick(() => { nextTick(() => {

View File

@ -164,11 +164,11 @@
</div> </div>
<div id="messages-list" <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' : ''"> :class="isDragOverChat ? 'pointer-events-none' : ''">
<!-- CHAT AREA --> <!-- 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"> <TransitionGroup v-if="discussionArr.length > 0" name="list">
<Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id"
ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage"
@ -181,9 +181,11 @@
</div> </div>
<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%"> 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" <ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
@stopGenerating="stopGenerating" /> @stopGenerating="stopGenerating" />
</div> </div>
@ -295,13 +297,7 @@ export default {
this.discussionArr = res.data.filter((item) => item.type == 0) this.discussionArr = res.data.filter((item) => item.type == 0)
} }
// nextTick(() => {
// const msgList = document.getElementById('messages-list')
// this.scrollBottom(msgList)
// })
} }
} catch (error) { } catch (error) {
console.log(error.message, 'load_discussion') console.log(error.message, 'load_discussion')
@ -536,7 +532,7 @@ export default {
} }
) )
} else { } else {
console.log("Error: scrollBottom") console.log("Error: scrollTop")
} }
}, },
@ -591,12 +587,12 @@ export default {
//type: msgObj.type //type: msgObj.type
} }
this.discussionArr.push(responseMessage) this.discussionArr.push(responseMessage)
nextTick(() => { // nextTick(() => {
const msgList = document.getElementById('messages-list') // const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList) // this.scrollBottom(msgList)
}) // })
if (this.currentDiscussion.title === '' || this.currentDiscussion.title === null) { if (this.currentDiscussion.title === '' || this.currentDiscussion.title === null) {
if (msgObj.type == "input_message_infos") { if (msgObj.type == "input_message_infos") {
@ -660,10 +656,11 @@ export default {
if (messageItem) { if (messageItem) {
messageItem.content = msgObj.data messageItem.content = msgObj.data
} }
nextTick(() => { // // Disables as per request
const msgList = document.getElementById('messages-list') // nextTick(() => {
this.scrollBottom(msgList) // const msgList = document.getElementById('messages-list')
}) // this.scrollBottom(msgList)
// })
} }
}, },
@ -1068,11 +1065,11 @@ export default {
setFileListChat(files) { setFileListChat(files) {
this.fileList = files this.fileList = files
this.$refs.chatBox.fileList = this.fileList this.$refs.chatBox.fileList = this.fileList
//console.log('dropppp', this.fileList)
this.isDragOverChat = false this.isDragOverChat = false
}, },
setDropZoneChat() { setDropZoneChat() {
console.log('ssss')
this.isDragOverChat = true this.isDragOverChat = true
this.$refs.dragdropChat.show = true this.$refs.dragdropChat.show = true
@ -1143,8 +1140,7 @@ export default {
const msgList = document.getElementById('messages-list') const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList) this.scrollBottom(msgList)
//this.setDropZoneChat()
//this.setDropZoneDiscussion()
}) })
} }
}, },