From cce5d3a1a1e0523c643b3073e5381b3dfb2e81d4 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 3 Jun 2023 15:27:58 +0300
Subject: [PATCH] more fixes

---
 web/src/components/ChatBox.vue    | 26 +++++++++-------
 web/src/views/DiscussionsView.vue | 50 ++++++++++++++-----------------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 99567d13..e21659e1 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -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(() => {
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 8557699d..2141b68d 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -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()
+
             })
         }
     },