From a0e6a9223163ec9a742932e349d090b2f5c3601b Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Fri, 2 Jun 2023 12:58:33 +0300
Subject: [PATCH 1/8] testing

---
 web/src/views/DiscussionsView.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 14b67098..072f8525 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -155,16 +155,16 @@
         </div>
     </div>
     <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"
+        class=" relative overflow-y-scroll flex flex-row flex-grow 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 h-max">
             <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
         </div>
 
-        <div :class="isDragOverChat ? 'pointer-events-none' : ''" class="container flex flex-col flex-grow  ">
+        <div  class="  flex-grow  " :class="isDragOverChat ? 'pointer-events-none' : ''">
 
             <!-- CHAT AREA -->
-            <div class="conainer flex flex-col flex-grow pt-4 pb-10 ">
+            <div class=" container pt-4 pb-10 ">
                 <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"
@@ -1065,7 +1065,8 @@ export default {
             this.isDragOver = false
         },
         setDropZoneChat() {
-            this.isDragOver = true
+            console.log('ssss')
+            this.isDragOverChat = true
             this.$refs.dragdropChat.show = true
 
         },
@@ -1089,6 +1090,7 @@ export default {
             this.isDragOverDiscussion = false
         },
         setDropZoneDiscussion() {
+           
             this.isDragOverDiscussion = true
             this.$refs.dragdropDiscussion.show = true
 
@@ -1116,7 +1118,7 @@ export default {
         socket.on('infos', this.createBotMsg)
         socket.on('message', this.streamMessageContent)
         socket.on("final", this.finalMsgEvent)
-
+        
     },
     async activated() {
 
@@ -1134,7 +1136,7 @@ export default {
                 const msgList = document.getElementById('messages-list')
 
                 this.scrollBottom(msgList)
-
+                this.setDropZoneChat()
             })
         }
     },

From cc7d0c67d10dedb7d86687f6c81975240edd6d06 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Fri, 2 Jun 2023 17:53:08 +0300
Subject: [PATCH 2/8] wip

---
 web/src/views/DiscussionsView.vue | 293 +++++++++++++++---------------
 1 file changed, 149 insertions(+), 144 deletions(-)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 072f8525..18921dee 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -1,154 +1,158 @@
 <template>
     <div
-        class="overflow-y-scroll flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone">
+        class="relative flex flex-col no-scrollbar shadow-lg min-w-[24rem] max-w-[24rem] bg-bg-light-tone dark:bg-bg-dark-tone">
         <!-- LEFT SIDE PANEL -->
-        <div class=" sticky top-0 flex-col  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
-
-
-            <!-- CONTROL PANEL -->
-            <div class="flex-row p-4  flex items-center gap-3 flex-0">
-
-                <!-- MAIN BUTTONS -->
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Create new discussion"
-                    type="button" @click="createNewDiscussion()">
-                    <i data-feather="plus"></i>
-                </button>
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Edit discussion list"
-                    type="button" @click="isCheckbox = !isCheckbox" :class="isCheckbox ? 'text-secondary' : ''">
-                    <i data-feather="check-square"></i>
-                </button>
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90"
-                    title="Reset database, remove all discussions">
-                    <i data-feather="refresh-ccw"></i>
-                </button>
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Export database"
-                    type="button">
-                    <i data-feather="database"></i>
-                </button>
-                <input type="file" ref="fileDialog" style="display: none" @change="importDiscussions" />
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
-                    title="Import discussions" type="button" @click.stop="$refs.fileDialog.click()">
-                    <i data-feather="log-in"></i>
-                </button>
-                <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Filter discussions"
-                    type="button" @click="isSearch = !isSearch" :class="isSearch ? 'text-secondary' : ''">
-                    <i data-feather="search"></i>
-                </button>
-                <div v-if="loading" title="Loading.." class="flex flex-row flex-grow justify-end">
-                    <!-- SPINNER -->
-                    <div role="status">
-                        <svg aria-hidden="true" class="w-6 h-6   animate-spin  fill-secondary" viewBox="0 0 100 101"
-                            fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                                fill="currentColor" />
-                            <path
-                                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                                fill="currentFill" />
-                        </svg>
-                        <span class="sr-only">Loading...</span>
-                    </div>
-                </div>
-            </div>
-            <!-- SEARCH BAR -->
-            <!-- <Transition name="expand" > -->
-            <div key="1" v-if="isSearch" class="flex-row  items-center gap-3 flex-0 w-full">
-
-
-
-                <div class="p-4 pt-2 ">
-                    <div class="relative">
-                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                            <div class="scale-75">
-                                <i data-feather="search"></i>
-                            </div>
-                        </div>
-                        <div class="absolute inset-y-0 right-0 flex items-center pr-3">
-                            <div class="hover:text-secondary duration-75 active:scale-90"
-                                :class="filterTitle ? 'visible' : 'invisible'" title="Clear" @click="filterTitle = ''">
-                                <i data-feather="x"></i>
-                            </div>
-                        </div>
-
-                        <input type="search" id="default-search"
-                            class="block w-full p-2 pl-10 pr-10 text-sm border border-gray-300 rounded-lg bg-bg-light focus:ring-secondary focus:border-secondary dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-secondary dark:focus:border-secondary"
-                            placeholder="Search..." title="Filter discussions by title" v-model="filterTitle"
-                            @input="filterDiscussions()" />
-                    </div>
-                </div>
-
-            </div>
-            <!-- </Transition> -->
-            <hr v-if="isCheckbox" class="h-px bg-bg-light p-0 mb-4 px-4 mx-4 border-0 dark:bg-bg-dark">
-            <div v-if="isCheckbox" class="flex flex-row flex-grow p-4 pt-0 items-center">
-
-                <!-- CHECK BOX OPERATIONS -->
-                <div class="flex flex-row flex-grow ">
-                    <p v-if="selectedDiscussions.length > 0">Selected: {{ selectedDiscussions.length }}</p>
-                </div>
-                <div class="flex flex-row ">
-
-                    <div v-if="selectedDiscussions.length > 0" class="flex gap-3">
-                        <!-- DELETE MULTIPLE -->
-                        <button v-if="!showConfirmation"
-                            class="flex mx-3 flex-1 text-2xl hover:text-red-600 duration-75 active:scale-90 "
-                            title="Remove selected" type="button" @click.stop="showConfirmation = true">
-                            <i data-feather="trash"></i>
-                        </button>
-                        <!-- DELETE CONFIRM -->
-                        <div v-if="showConfirmation"
-                            class="flex gap-3 mx-3 flex-1 items-center justify-end  group-hover:visible duration-75">
-                            <button class="text-2xl hover:text-secondary duration-75 active:scale-90"
-                                title="Confirm removal" type="button" @click.stop="deleteDiscussionMulti">
-                                <i data-feather="check"></i>
-                            </button>
-                            <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 " title="Cancel removal"
-                                type="button" @click.stop="showConfirmation = false">
-                                <i data-feather="x"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="flex gap-3">
-
-                        <button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
-                            title="Export selected to a file" type="button" @click.stop="exportDiscussions">
-                            <i data-feather="log-out"></i>
-                        </button>
-                        <button class="text-2xl hover:text-secondary duration-75 active:scale-90 " title="Select All"
-                            type="button" @click.stop="selectAllDiscussions">
-                            <i data-feather="list"></i>
-                        </button>
-
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-        <div class="relative overflow-y-scroll no-scrollbar flex flex-row flex-grow"
+        <div class="flex flex-col flex-grow overflow-y-scroll no-scrollbar"
             @dragover.stop.prevent="setDropZoneDiscussion()">
+            <div class=" sticky z-10 top-0  bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
+
+
+                <!-- CONTROL PANEL -->
+                <div class="flex-row p-4  flex items-center gap-3 flex-0">
+
+                    <!-- MAIN BUTTONS -->
+                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Create new discussion"
+                        type="button" @click="createNewDiscussion()">
+                        <i data-feather="plus"></i>
+                    </button>
+                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Edit discussion list"
+                        type="button" @click="isCheckbox = !isCheckbox" :class="isCheckbox ? 'text-secondary' : ''">
+                        <i data-feather="check-square"></i>
+                    </button>
+                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90"
+                        title="Reset database, remove all discussions">
+                        <i data-feather="refresh-ccw"></i>
+                    </button>
+                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Export database"
+                        type="button">
+                        <i data-feather="database"></i>
+                    </button>
+                    <input type="file" ref="fileDialog" style="display: none" @change="importDiscussions" />
+                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
+                        title="Import discussions" type="button" @click.stop="$refs.fileDialog.click()">
+                        <i data-feather="log-in"></i>
+                    </button>
+                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Filter discussions"
+                        type="button" @click="isSearch = !isSearch" :class="isSearch ? 'text-secondary' : ''">
+                        <i data-feather="search"></i>
+                    </button>
+                    <div v-if="loading" title="Loading.." class="flex flex-row flex-grow justify-end">
+                        <!-- SPINNER -->
+                        <div role="status">
+                            <svg aria-hidden="true" class="w-6 h-6   animate-spin  fill-secondary" viewBox="0 0 100 101"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                                    fill="currentColor" />
+                                <path
+                                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                                    fill="currentFill" />
+                            </svg>
+                            <span class="sr-only">Loading...</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- SEARCH BAR -->
+                <!-- <Transition name="expand" > -->
+                <div v-if="isSearch" class="flex-row  items-center gap-3 flex-0 w-full">
+
+
+
+                    <div class="p-4 pt-2 ">
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                <div class="scale-75">
+                                    <i data-feather="search"></i>
+                                </div>
+                            </div>
+                            <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+                                <div class="hover:text-secondary duration-75 active:scale-90"
+                                    :class="filterTitle ? 'visible' : 'invisible'" title="Clear" @click="filterTitle = ''">
+                                    <i data-feather="x"></i>
+                                </div>
+                            </div>
+
+                            <input type="search" id="default-search"
+                                class="block w-full p-2 pl-10 pr-10 text-sm border border-gray-300 rounded-lg bg-bg-light focus:ring-secondary focus:border-secondary dark:bg-bg-dark dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-secondary dark:focus:border-secondary"
+                                placeholder="Search..." title="Filter discussions by title" v-model="filterTitle"
+                                @input="filterDiscussions()" />
+                        </div>
+                    </div>
+
+                </div>
+                <!-- </Transition> -->
+                <hr v-if="isCheckbox" class="h-px bg-bg-light p-0 mb-4 px-4 mx-4 border-0 dark:bg-bg-dark">
+                <div v-if="isCheckbox" class="flex flex-row flex-grow p-4 pt-0 items-center">
+
+                    <!-- CHECK BOX OPERATIONS -->
+                    <div class="flex flex-row flex-grow ">
+                        <p v-if="selectedDiscussions.length > 0">Selected: {{ selectedDiscussions.length }}</p>
+                    </div>
+                    <div class="flex flex-row ">
+
+                        <div v-if="selectedDiscussions.length > 0" class="flex gap-3">
+                            <!-- DELETE MULTIPLE -->
+                            <button v-if="!showConfirmation"
+                                class="flex mx-3 flex-1 text-2xl hover:text-red-600 duration-75 active:scale-90 "
+                                title="Remove selected" type="button" @click.stop="showConfirmation = true">
+                                <i data-feather="trash"></i>
+                            </button>
+                            <!-- DELETE CONFIRM -->
+                            <div v-if="showConfirmation"
+                                class="flex gap-3 mx-3 flex-1 items-center justify-end  group-hover:visible duration-75">
+                                <button class="text-2xl hover:text-secondary duration-75 active:scale-90"
+                                    title="Confirm removal" type="button" @click.stop="deleteDiscussionMulti">
+                                    <i data-feather="check"></i>
+                                </button>
+                                <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 "
+                                    title="Cancel removal" type="button" @click.stop="showConfirmation = false">
+                                    <i data-feather="x"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex gap-3">
+
+                            <button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
+                                title="Export selected to a file" type="button" @click.stop="exportDiscussions">
+                                <i data-feather="log-out"></i>
+                            </button>
+                            <button class="text-2xl hover:text-secondary duration-75 active:scale-90 " title="Select All"
+                                type="button" @click.stop="selectAllDiscussions">
+                                <i data-feather="list"></i>
+                            </button>
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
             <div class="z-20">
                 <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here
                 </DragDrop>
             </div>
-            <!-- DISCUSSION LIST -->
-            <div class="mx-4 flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
+            <div class="relativeflex flex-row flex-grow ">
+
+                <!-- DISCUSSION LIST -->
+                <div class="mx-4 flex flex-col 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"
-                            :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
-                            @delete="deleteDiscussion(item.id)" @editTitle="editTitle" @checked="checkUncheckDiscussion" />
-                    </TransitionGroup>
-                    <div v-if="list.length < 1"
-                        class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
-                        <p class="px-3">No discussions are found</p>
-                    </div>
-                    <div
-                        class="sticky bottom-0 bg-gradient-to-t pointer-events-none from-bg-light-tone dark:from-bg-dark-tone flex flex-grow">
-                        <!-- FADING DISCUSSION LIST END ELEMENT -->
+                    <div :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
+                        class="flex flex-col flex-grow overflow-y-auto ">
+                        <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"
+                                :checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)"
+                                @delete="deleteDiscussion(item.id)" @editTitle="editTitle"
+                                @checked="checkUncheckDiscussion" />
+                        </TransitionGroup>
+                        <div v-if="list.length < 1"
+                            class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
+                            <p class="px-3">No discussions are found</p>
+                        </div>
+                        <div
+                            class="sticky bottom-0 bg-gradient-to-t pointer-events-none from-bg-light-tone dark:from-bg-dark-tone flex flex-grow">
+                            <!-- FADING DISCUSSION LIST END ELEMENT -->
+                        </div>
                     </div>
                 </div>
             </div>
@@ -161,7 +165,7 @@
             <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
         </div>
 
-        <div  class="  flex-grow  " :class="isDragOverChat ? 'pointer-events-none' : ''">
+        <div class="  flex-grow  " :class="isDragOverChat ? 'pointer-events-none' : ''">
 
             <!-- CHAT AREA -->
             <div class=" container pt-4 pb-10 ">
@@ -1090,7 +1094,7 @@ export default {
             this.isDragOverDiscussion = false
         },
         setDropZoneDiscussion() {
-           
+
             this.isDragOverDiscussion = true
             this.$refs.dragdropDiscussion.show = true
 
@@ -1118,7 +1122,7 @@ export default {
         socket.on('infos', this.createBotMsg)
         socket.on('message', this.streamMessageContent)
         socket.on("final", this.finalMsgEvent)
-        
+
     },
     async activated() {
 
@@ -1137,6 +1141,7 @@ export default {
 
                 this.scrollBottom(msgList)
                 this.setDropZoneChat()
+                //this.setDropZoneDiscussion()
             })
         }
     },

From 02ecfac6f53cbbdc3e54be2cf4f2fe79bff3a80e Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Fri, 2 Jun 2023 22:06:30 +0300
Subject: [PATCH 3/8] wip

---
 web/src/components/ChatBox.vue    | 123 ++++++++++++++++++------------
 web/src/views/DiscussionsView.vue |  18 +++--
 2 files changed, 83 insertions(+), 58 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index eb1c756b..2a10c902 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sticky bottom-0 right-0 left-0 p-0 w-96">
+    <div class=" bottom-0  justify-center text-center p-0 w-96">
         <div v-if="loading" class="flex items-center justify-center w-full">
             <div class="flex flex-row p-2 rounded-t-lg ">
 
@@ -12,70 +12,88 @@
         </div>
         <form>
             <label for="chat" class="sr-only">Send message</label>
-            <div
-                class="px-3 py-3 rounded-t-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg  ">
+            <div class="px-3 py-3 rounded-t-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg  ">
                 <!-- FILES     -->
-                <div class="flex flex-col flex-grow">
-                    <div v-if="fileList.length>0" class="flex flex-row overflow-x-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-row items-center p-2">
-                        <div v-for="file in fileList" :key="file.name">
-                            <div class="relative m-1 cursor-pointer">
+                <div class="">
+                    <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">
+                            <div v-for="file in fileList" :key="file.name">
+                                <div class=" cursor-pointer pb-1 flex ">
 
-                                <span
-                                    class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
-                                    <i data-feather="file" class="w-5 h-5 mr-1 truncate"></i>
-                                    {{ file.name }}
-                                    ({{ computedFileSize(file.size) }})
-                                    <button type="button" title="Remove item"
-                                        class="inline-flex items-center p-0.5 ml-2 text-sm rounded-sm hover:text-red-600 active:scale-75"
-                                        @click="removeItem(file)">
-                                        <i data-feather="x" class="w-5 h-5 "></i>
+                                    <div class="flex justify-start p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
+                                        
+                                        <div class=" flex flex-row items-center gap-1 ">
+                                            <i data-feather="file" class="w-4 h-5"></i>
+                                            <div class="">
+                                                {{ file.name }}
 
-                                    </button>
-                                </span>
+                                            </div>
+                                        </div>
+<div class="flexflex row items-center flex-grow justify-end">
+    <div class="flex flex-row items-center ">
+                                            <div class="">
+                                                {{ computedFileSize(file.size) }}
+
+                                            </div>
 
 
+                                            <button type="button" title="Remove item"
+                                                class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
+                                                @click="removeItem(file)">
+                                                <i data-feather="x" class="w-5 h-5 "></i>
+
+                                            </button>
+                                        </div>
+
+
+</div>
+
+
+                                    </div>
+
+
+                                </div>
                             </div>
-                        </div>
-                    </TransitionGroup>
-                        
+                        </TransitionGroup>
+
                     </div>
 
                     <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>
 
-                    <!-- BUTTONS -->
-                    <div class="inline-flex justify-center  rounded-full ">
+                        <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>
 
-                        <button v-if="!loading" type="button" @click="submit"
-                            class=" w-6 hover:text-secondary duration-75 active:scale-90">
+                        <!-- BUTTONS -->
+                        <div class="inline-flex justify-center  rounded-full ">
 
-                            <i data-feather="send"></i>
+                            <button v-if="!loading" type="button" @click="submit"
+                                class=" w-6 hover:text-secondary duration-75 active:scale-90">
 
-                            <span class="sr-only">Send message</span>
-                        </button>
-                        <div v-if="loading" title="Waiting for reply">
-                            <!-- SPINNER -->
-                            <div role="status">
-                                <svg aria-hidden="true" class="w-6 h-6   animate-spin  fill-secondary" viewBox="0 0 100 101"
-                                    fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                                        fill="currentColor" />
-                                    <path
-                                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                                        fill="currentFill" />
-                                </svg>
-                                <span class="sr-only">Loading...</span>
+                                <i data-feather="send"></i>
+
+                                <span class="sr-only">Send message</span>
+                            </button>
+                            <div v-if="loading" title="Waiting for reply">
+                                <!-- SPINNER -->
+                                <div role="status">
+                                    <svg aria-hidden="true" class="w-6 h-6   animate-spin  fill-secondary"
+                                        viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                                            fill="currentColor" />
+                                        <path
+                                            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                                            fill="currentFill" />
+                                    </svg>
+                                    <span class="sr-only">Loading...</span>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                </div>
             </div>
         </form>
     </div>
@@ -106,7 +124,7 @@
 </style>
 
 <script>
-import { nextTick,TransitionGroup } from 'vue'
+import { nextTick, TransitionGroup } from 'vue'
 import feather from 'feather-icons'
 import filesize from '../plugins/filesize'
 export default {
@@ -123,11 +141,14 @@ export default {
     data() {
         return {
             message: "",
-            fileList:[]
+            fileList: []
         }
     },
     methods: {
         computedFileSize(size) {
+            nextTick(() => {
+            feather.replace()
+        })
             return filesize(size)
         },
         removeItem(file) {
@@ -175,7 +196,9 @@ export default {
         })
     },
     activated() {
-
+        nextTick(() => {
+            feather.replace()
+        })
     }
 }
 </script>
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 18921dee..9fc4c6ee 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -158,14 +158,14 @@
             </div>
         </div>
     </div>
-    <div id="messages-list"
-        class=" relative overflow-y-scroll flex flex-row flex-grow 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"
+    <div 
+        class="relative flex flex-col flex-grow 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 h-max">
             <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
         </div>
 
-        <div class="  flex-grow  " :class="isDragOverChat ? 'pointer-events-none' : ''">
+        <div id="messages-list" class="  flex-grow  overflow-y-scroll " :class="isDragOverChat ? 'pointer-events-none' : ''">
 
             <!-- CHAT AREA -->
             <div class=" container pt-4 pb-10 ">
@@ -182,13 +182,15 @@
             </div>
 
 
-            <div class="sticky bottom-0 flex flex-col  items-center justify-center">
+
+
+        </div>
+        <div class="container flex flex-row items-center justify-center">
                 <ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
                     @stopGenerating="stopGenerating" />
             </div>
-
-        </div>
     </div>
+    
     <Toast ref="toast">
     </Toast>
 </template>
@@ -1066,7 +1068,7 @@ export default {
             this.fileList = files
             this.$refs.chatBox.fileList = this.fileList
             //console.log('dropppp', this.fileList)
-            this.isDragOver = false
+            this.isDragOverChat = false
         },
         setDropZoneChat() {
             console.log('ssss')
@@ -1140,7 +1142,7 @@ export default {
                 const msgList = document.getElementById('messages-list')
 
                 this.scrollBottom(msgList)
-                this.setDropZoneChat()
+                //this.setDropZoneChat()
                 //this.setDropZoneDiscussion()
             })
         }

From 5b0757113dde1c00b35e0558bfd6ffb054ec80ef Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 3 Jun 2023 14:33:13 +0300
Subject: [PATCH 4/8] fixed scroll bar and UI improvement

---
 web/src/components/ChatBox.vue    | 43 ++++++++++++++++---------------
 web/src/views/DiscussionsView.vue | 27 +++++++++----------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 2a10c902..99567d13 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -12,17 +12,18 @@
         </div>
         <form>
             <label for="chat" class="sr-only">Send message</label>
-            <div class="px-3 py-3 rounded-t-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  ">
                 <!-- FILES     -->
                 <div class="">
-                    <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">
+                    <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">
                             <div v-for="file in fileList" :key="file.name">
                                 <div class=" cursor-pointer pb-1 flex ">
 
-                                    <div class="flex justify-start p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
-                                        
+                                    <div
+                                        class="flex justify-start p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
+
                                         <div class=" flex flex-row items-center gap-1 ">
                                             <i data-feather="file" class="w-4 h-5"></i>
                                             <div class="">
@@ -30,26 +31,26 @@
 
                                             </div>
                                         </div>
-<div class="flexflex row items-center flex-grow justify-end">
-    <div class="flex flex-row items-center ">
-                                            <div class="">
-                                                {{ computedFileSize(file.size) }}
+                                        <div class="flexflex row items-center flex-grow justify-end">
+                                            <div class="flex flex-row items-center ">
+                                                <div class="">
+                                                    {{ computedFileSize(file.size) }}
 
+                                                </div>
+
+
+                                                <button type="button" title="Remove item"
+                                                    class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
+                                                    @click="removeItem(file)">
+                                                    <i data-feather="x" class="w-5 h-5 "></i>
+
+                                                </button>
                                             </div>
 
 
-                                            <button type="button" title="Remove item"
-                                                class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
-                                                @click="removeItem(file)">
-                                                <i data-feather="x" class="w-5 h-5 "></i>
-
-                                            </button>
                                         </div>
 
 
-</div>
-
-
                                     </div>
 
 
@@ -147,8 +148,8 @@ export default {
     methods: {
         computedFileSize(size) {
             nextTick(() => {
-            feather.replace()
-        })
+                feather.replace()
+            })
             return filesize(size)
         },
         removeItem(file) {
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 9fc4c6ee..8557699d 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -130,14 +130,14 @@
                 <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListDiscussion">Drop your discussion file here
                 </DragDrop>
             </div>
-            <div class="relativeflex flex-row flex-grow ">
+            <div class="relative flex flex-row flex-grow mb-10">
 
                 <!-- DISCUSSION LIST -->
                 <div class="mx-4 flex flex-col flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
 
 
                     <div :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
-                        class="flex flex-col flex-grow overflow-y-auto ">
+                        class="flex flex-col flex-grow  ">
                         <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"
@@ -158,14 +158,14 @@
             </div>
         </div>
     </div>
-    <div 
-        class="relative flex flex-col flex-grow 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="relative flex flex-col flex-grow " @dragover.stop.prevent="setDropZoneChat()">
         <div class="z-20 h-max">
             <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
         </div>
 
-        <div id="messages-list" class="  flex-grow  overflow-y-scroll " :class="isDragOverChat ? 'pointer-events-none' : ''">
+        <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="isDragOverChat ? 'pointer-events-none' : ''">
 
             <!-- CHAT AREA -->
             <div class=" container pt-4 pb-10 ">
@@ -182,15 +182,16 @@
             </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>
-        <div class="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>
-    
+
     <Toast ref="toast">
     </Toast>
 </template>

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 5/8] 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()
+
             })
         }
     },

From b5b94b592f986446d7fee28b0c61e6bc5a18e283 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 3 Jun 2023 16:15:15 +0300
Subject: [PATCH 6/8] kinda good but not great

---
 web/src/components/ChatBox.vue    | 83 ++++++++++++++++++++++---------
 web/src/views/DiscussionsView.vue |  3 +-
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index e21659e1..88bbb30a 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -17,36 +17,38 @@
                 <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 ">
+                        <TransitionGroup name="list" tag="div"
+                            class="flex flex-col flex-grow overflow-y-scroll pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
                             <div v-for="file in fileList" :key="file.name">
-                                <div class=" cursor-pointer pb-1 flex ">
+                                <div class=" pb-1" :title="file.name">
 
                                     <div
-                                        class="flex justify-start p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary-light ">
+                                        class="flex flex-row items-center gap-1 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary">
+                                        <div>
+                                            <i data-feather="file" class="w-5 h-5"></i>
 
-                                        <div class=" flex flex-row items-center gap-1 ">
-                                            <i data-feather="file" class="w-4 h-5"></i>
-                                            <div class="">
-                                                {{ file.name }}
-
-                                            </div>
                                         </div>
-                                        <div class="flexflex row items-center flex-grow justify-end">
-                                            <div class="flex flex-row items-center ">
-                                                <div class="">
-                                                    {{ computedFileSize(file.size) }}
-
-                                                </div>
 
 
-                                                <button type="button" title="Remove item"
-                                                    class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
-                                                    @click="removeItem(file)">
-                                                    <i data-feather="x" class="w-5 h-5 "></i>
+                                        <div class="line-clamp-1 w-3/5">
+                                            {{ file.name }}
 
-                                                </button>
-                                            </div>
+                                        </div>
+                                        <div class="grow">
 
+                                        </div>
+
+                                        <div class="flex flex-row items-center">
+                                            <p class="whitespace-nowrap">
+                                                {{ computedFileSize(file.size) }}
+
+                                            </p>
+                                            <button type="button" title="Remove item"
+                                                class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
+                                                @click="removeItem(file)">
+                                                <i data-feather="x" class="w-5 h-5 "></i>
+
+                                            </button>
 
                                         </div>
 
@@ -59,8 +61,26 @@
                         </TransitionGroup>
 
                     </div>
-                    <div v-if="fileList.length > 0" class="flex items-center bg-red-600">
-                        <!-- ADDITIONAL OPTIONS IF NEEDED -->
+                    <div v-if="fileList.length > 0" class="flex items-center ">
+
+                        <!-- ADDITIONAL INFO PANEL -->
+
+                        <div class="whitespace-nowrap">
+                            Total size:
+                            {{ totalSize }}
+                            
+                            ({{ fileList.length }})
+
+                        </div>
+                        <div class="grow">
+
+                        </div>
+                        <button type="button" title="Clear all"
+                            class="flex items-center p-0.5 text-sm rounded-sm hover:text-red-600 active:scale-75"
+                            @click="fileList = []">
+                            <i data-feather="trash" class="w-5 h-5 "></i>
+
+                        </button>
                     </div>
                     <!-- CHAT BOX -->
                     <div class="flex flex-row flex-grow items-center gap-2 ">
@@ -144,6 +164,7 @@ export default {
         return {
             message: "",
             fileList: [],
+            totalSize: 0
         }
     },
     methods: {
@@ -192,9 +213,23 @@ export default {
                 feather.replace()
             })
         },
+        fileList: {
+            handler(val, oldVal) {
+                let total = 0
+                if (val.length > 0) {
+                    for (let i = 0; i < val.length; i++) {
+                        total = total + parseInt(val[i].size)
+                        //console.log(val[i].size)
+                    }
+                }
+                this.totalSize = filesize(total,false)
+                console.log(val)
+            },
+            deep: true
+        },
 
     },
-    computed:{
+    computed: {
 
     },
     mounted() {
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 2141b68d..86667b7e 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -1063,7 +1063,8 @@ export default {
             return
         },
         setFileListChat(files) {
-            this.fileList = files
+            console.log('file',files)
+            this.fileList = files.filter(item => item.type !='')
             this.$refs.chatBox.fileList = this.fileList
 
             this.isDragOverChat = false

From 175ddd2e0e1227da88c48a54b4b4d7ba248431a7 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 3 Jun 2023 17:03:20 +0300
Subject: [PATCH 7/8] more fixes and final result

---
 web/src/components/ChatBox.vue    | 20 ++++++----
 web/src/components/DragDrop.vue   | 66 +++++++++++++++++++++++++++----
 web/src/views/DiscussionsView.vue |  7 ++--
 3 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index 88bbb30a..e27a44a7 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -18,9 +18,9 @@
                     <!-- 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 pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
+                            class="flex flex-col flex-grow overflow-y-auto scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
                             <div v-for="file in fileList" :key="file.name">
-                                <div class=" pb-1" :title="file.name">
+                                <div class="  m-1" :title="file.name">
 
                                     <div
                                         class="flex flex-row items-center gap-1 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary">
@@ -61,12 +61,15 @@
                         </TransitionGroup>
 
                     </div>
-                    <div v-if="fileList.length > 0" class="flex items-center ">
+                    <div v-if="fileList.length > 0" class="flex items-center mx-1">
 
                         <!-- ADDITIONAL INFO PANEL -->
 
-                        <div class="whitespace-nowrap">
-                            Total size:
+                        <div class="whitespace-nowrap flex flex-row gap-2">
+                            <p class="font-bold ">
+                                Total size:
+                            </p>
+                            
                             {{ totalSize }}
                             
                             ({{ fileList.length }})
@@ -180,7 +183,7 @@ export default {
             // console.log(this.fileList)
         },
         sendMessageEvent(msg) {
-
+            this.fileList=[]
             this.$emit('messageSentEvent', msg)
 
         },
@@ -214,16 +217,17 @@ export default {
             })
         },
         fileList: {
+            // Calculate total size
             handler(val, oldVal) {
                 let total = 0
                 if (val.length > 0) {
                     for (let i = 0; i < val.length; i++) {
                         total = total + parseInt(val[i].size)
-                        //console.log(val[i].size)
+                       
                     }
                 }
                 this.totalSize = filesize(total,false)
-                console.log(val)
+                
             },
             deep: true
         },
diff --git a/web/src/components/DragDrop.vue b/web/src/components/DragDrop.vue
index 893b8238..1fe504ca 100644
--- a/web/src/components/DragDrop.vue
+++ b/web/src/components/DragDrop.vue
@@ -5,18 +5,18 @@
         <div key="dropmenu" v-if="show"
             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="dropRelease?'':'pointer-events-none'">
+            <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="dropRelease ? '' : 'pointer-events-none'">
 
 
-                <div class="text-4xl text-center" >
+                <div class="text-4xl text-center">
                     <slot>
 
                         Drop your files here
-                    <!-- <div v-if="fileList.length == 0">
+                        <!-- <div v-if="fileList.length == 0">
                         Drop your files here
                     </div> -->
-                </slot>
+                    </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
@@ -89,11 +89,61 @@ export default {
         //     this.fileList = this.fileList.filter((item) => item != file)
         //     // console.log(this.fileList)
         // },
-        panelDrop(event) {
+        async panelDrop(event) {
+
+
+            const supportsFileSystemAccessAPI =
+                'getAsFileSystemHandle' in DataTransferItem.prototype;
+            const supportsWebkitGetAsEntry =
+                'webkitGetAsEntry' in DataTransferItem.prototype;
+
+
+            if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry) {
+                // Cannot handle directories.
+                return;
+            }
+            const fileHandlesPromises = [...event.dataTransfer.items]
+                // …by including only files (where file misleadingly means actual file _or_
+                // directory)…
+                .filter((item) => item.kind === 'file')
+                // …and, depending on previous feature detection…
+                .map((item) =>
+                    supportsFileSystemAccessAPI
+                        // …either get a modern `FileSystemHandle`…
+                        ? item.getAsFileSystemHandle()
+                        // …or a classic `FileSystemFileEntry`.
+                        : item.webkitGetAsEntry(),
+                );
+           
+
+            let dirList =[]
+             // Loop over the array of promises.
+            for await (const handle of fileHandlesPromises) {
+                // This is where we can actually exclusively act on the directories.
+                
+
+                if (handle.kind === 'directory' || handle.isDirectory) {
+                    
+
+                    dirList.push(handle.name)
+                }
+            }
+
+
+
+
+
+
+
+
             this.dropRelease = true
             if (event.dataTransfer.files.length > 0) {
                 [...event.dataTransfer.files].forEach(element => {
-                    this.fileList.push(element)
+                    
+                    if(!dirList.includes(element.name)){
+                        this.fileList.push(element)
+
+                    }
                 });
             }
 
@@ -101,7 +151,7 @@ export default {
                 feather.replace()
             })
             this.$emit('panelDrop', this.fileList)
-            this.fileList=[]
+            this.fileList = []
             this.show = false
 
         },
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 86667b7e..829cdbb6 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -1063,9 +1063,10 @@ export default {
             return
         },
         setFileListChat(files) {
-            console.log('file',files)
-            this.fileList = files.filter(item => item.type !='')
-            this.$refs.chatBox.fileList = this.fileList
+
+           
+            //this.fileList = files
+            this.$refs.chatBox.fileList =files
 
             this.isDragOverChat = false
         },

From a21af84f74a2ab345505e188b5a89c0ae3d60509 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Sat, 3 Jun 2023 17:22:55 +0300
Subject: [PATCH 8/8] work in progress

---
 web/src/components/ChatBox.vue    |  2 +-
 web/src/views/DiscussionsView.vue | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index e27a44a7..13dfb347 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="absolute bottom-0  w-96  justify-center text-center p-4">
+    <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 ">
 
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 829cdbb6..ee505272 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -173,7 +173,7 @@
                     <Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id"
                         ref="messages" @copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage"
                         @rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage"
-                        :avatar="getAvatar(msg.sender)" />
+                        :avatar="getAvatar(msg.sender)" @click="scrollToElementInContainer($event.target, 'messages-list')" />
 
 
                 </TransitionGroup>
@@ -507,6 +507,13 @@ export default {
                 console.log("Error: scrollToElement")
             }
         },
+        scrollToElementInContainer(el, containerId) {
+            // console.log(el)
+            // const topPos = el.offsetTop + el.clientHeight;
+            // const container = document.getElementById(containerId)
+            // container.scrollTop = topPos;
+
+        },
         scrollBottom(el) {
 
             if (el) {
@@ -1064,9 +1071,9 @@ export default {
         },
         setFileListChat(files) {
 
-           
+
             //this.fileList = files
-            this.$refs.chatBox.fileList =files
+            this.$refs.chatBox.fileList = files
 
             this.isDragOverChat = false
         },