From adc66ee01505b3aeb65edb29846482a369dc95dc Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 16:39:00 +0300
Subject: [PATCH 1/6] wip

---
 web/src/components/ChatBox.vue | 100 +++++++++++++++++++++------------
 1 file changed, 64 insertions(+), 36 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index f5f1e27a..e8b504c4 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -2,8 +2,10 @@
     <div class="flex-none sticky bottom-0 p-0 items-center justify-center px-32 self-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 ">
-                
-                <button type="button" class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel hover:bg-bg-light-tone focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:hover:bg-bg-dark-tone focus:outline-none dark:focus:ring-blue-800" @click.stop="stopGenerating">
+
+                <button type="button"
+                    class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel hover:bg-bg-light-tone focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:hover:bg-bg-dark-tone focus:outline-none dark:focus:ring-blue-800"
+                    @click.stop="stopGenerating">
                     Stop generating
                 </button>
             </div>
@@ -11,37 +13,63 @@
         <form>
             <label for="chat" class="sr-only">Send message</label>
             <div
-                class="flex items-center gap-2 px-3 py-3 rounded-t-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel shadow-lg  ">
-
-                <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 ">
-
-                    <button v-if="!loading" type="button" @click="submit"
-                        class=" w-6 hover:text-secondary duration-75 active:scale-90">
-
-                        <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>
+                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 class="flex flex-row overflow-auto scrollbar mb-2 gap-1">
+                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
+                            file
+                        </div>
+                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
+                            file
+                        </div>
+                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
+                            file
+                        </div>
+                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
+                            file
+                        </div>
+                        <div class="bg-red-400 rounded-lg flex flex-shrink-0 w-fit p-2 ">
+                            file
                         </div>
                     </div>
+                    <div>
+
+                    </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 ">
+
+                        <button v-if="!loading" type="button" @click="submit"
+                            class=" w-6 hover:text-secondary duration-75 active:scale-90">
+
+                            <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>
         </form>
@@ -94,15 +122,15 @@ export default {
             }
 
         },
-        stopGenerating(){
+        stopGenerating() {
             this.$emit('stopGenerating')
         }
     },
-    watch:{
-        loading(newval,oldval){
+    watch: {
+        loading(newval, oldval) {
             nextTick(() => {
-            feather.replace()
-        })
+                feather.replace()
+            })
         }
     },
     mounted() {

From e3aaf9ad2882c5f2af1cee443b8f75a5338ab638 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 17:01:47 +0300
Subject: [PATCH 2/6] needs more work

---
 web/src/components/ChatBox.vue    | 80 ++++++++++++++++++++++---------
 web/src/views/DiscussionsView.vue | 12 ++---
 2 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index e8b504c4..d5ed0fac 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-none sticky bottom-0 p-0 items-center justify-center px-32 self-center w-full">
+    <div class="sticky bottom-0 right-0 left-0 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 ">
 
@@ -16,26 +16,31 @@
                 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 class="flex flex-row overflow-auto scrollbar mb-2 gap-1">
-                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
-                            file
-                        </div>
-                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
-                            file
-                        </div>
-                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
-                            file
-                        </div>
-                        <div class="bg-red-400 rounded-lg flex flex-shrink-0  p-2 w-96">
-                            file
-                        </div>
-                        <div class="bg-red-400 rounded-lg flex flex-shrink-0 w-fit p-2 ">
-                            file
-                        </div>
-                    </div>
-                    <div>
+                    <div v-if="fileList.length>0" class="flex flex-row overflow-auto mb-2 gap-1 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">
+                        <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">
 
+                                <span
+                                    class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium bg-bg-dark-tone-panel rounded-lg hover:bg-primary-light ">
+                                    <i data-feather="file" class="w-5 h-5 mr-1"></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>
+
+                                    </button>
+                                </span>
+
+
+                            </div>
+                        </div>
+                    </TransitionGroup>
+                        
                     </div>
+
                     <div class="flex flex-row flex-grow items-center gap-2 ">
 
                     
@@ -75,12 +80,35 @@
         </form>
     </div>
 </template>
+<style scoped>
+/* THESE ARE FOR TransitionGroup components */
+.list-move,
+/* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+    transition: all 0.5s ease;
+}
 
+.list-enter-from {
+    transform: translatey(-30px);
+}
+
+.list-leave-to {
+    opacity: 0;
+    transform: translatey(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+    position: absolute;
+}
+</style>
 
 <script>
-import { nextTick } from 'vue'
+import { nextTick,TransitionGroup } from 'vue'
 import feather from 'feather-icons'
-
+import filesize from '../plugins/filesize'
 export default {
     name: 'ChatBox',
     emits: ["messageSentEvent", "stopGenerating"],
@@ -94,10 +122,18 @@ export default {
     },
     data() {
         return {
-            message: ""
+            message: "",
+            fileList:[]
         }
     },
     methods: {
+        computedFileSize(size) {
+            return filesize(size)
+        },
+        removeItem(file) {
+            this.fileList = this.fileList.filter((item) => item != file)
+            // console.log(this.fileList)
+        },
         sendMessageEvent(msg) {
 
             this.$emit('messageSentEvent', msg)
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 3d4a4611..31a9d725 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -165,8 +165,8 @@
             </div>
 
 
-            <div class=" sticky bottom-0">
-                <ChatBox v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
+            <div class="sticky bottom-0 flex flex-col  items-center justify-center">
+                <ChatBox ref="chatBox" v-if="currentDiscussion.id" @messageSentEvent="sendMsg" :loading="isGenerating"
                     @stopGenerating="stopGenerating" />
             </div>
 
@@ -976,17 +976,17 @@ export default {
         },
         setFileList(files) {
             this.fileList = files
+            this.$refs.chatBox.fileList=this.fileList
             console.log('dropppp', this.fileList)
+            this.isDragOver=false
         },
         setDropZone(){
             this.isDragOver=true
             this.$refs.dragdrop.show=true
             this.isDropZoneVisible=true
-            console.log('is vis',this.isDropZoneVisible)
+            //console.log('is vis',this.isDropZoneVisible)
         },
-        hideDropZone(){
-            this.$refs.dragdrop.show=false
-        }
+
 
 
     },

From 7c5e0b45ff095777d2154a002fb8aac365a977ea Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 20:43:53 +0300
Subject: [PATCH 3/6] small fixes

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

diff --git a/web/src/components/ChatBox.vue b/web/src/components/ChatBox.vue
index d5ed0fac..eb1c756b 100644
--- a/web/src/components/ChatBox.vue
+++ b/web/src/components/ChatBox.vue
@@ -16,14 +16,14 @@
                 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-auto mb-2 gap-1 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 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">
 
                                 <span
-                                    class="inline-flex items-center px-2 py-1 mr-2 text-sm font-medium bg-bg-dark-tone-panel rounded-lg hover:bg-primary-light ">
-                                    <i data-feather="file" class="w-5 h-5 mr-1"></i>
+                                    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"
diff --git a/web/src/components/DragDrop.vue b/web/src/components/DragDrop.vue
index b5cdae47..6c75b7d4 100644
--- a/web/src/components/DragDrop.vue
+++ b/web/src/components/DragDrop.vue
@@ -21,7 +21,9 @@
                         ({{ fileList.length }})
                     </div>
                 </div>
-                <div class=" overflow-auto no-scrollbar">
+
+                <!-- DISABLED UNTIL FURTHER NOTICE -->
+                <!-- <div class=" overflow-auto no-scrollbar">
 
                     <TransitionGroup name="list" tag="div" class="flex flex-col items-center p-2">
                         <div v-for="file in fileList" :key="file.name">
@@ -44,7 +46,7 @@
                             </div>
                         </div>
                     </TransitionGroup>
-                </div>
+                </div> -->
 
             </div>
         </div>
@@ -72,7 +74,6 @@ export default {
         }
     },
     mounted() {
-        //this.fileList.push({ name: 'lol.sss', size: 22 })
         nextTick(() => {
             feather.replace()
 
@@ -98,10 +99,8 @@ export default {
                 feather.replace()
             })
             this.$emit('panelDrop', this.fileList)
-            
+            this.fileList=[]
             this.show = false
-            // console.log("dropped", this.fileList)
-            //console.log(event.dataTransfer.files[0]);
 
         },
         panelLeave() {
@@ -109,7 +108,6 @@ export default {
             console.log('exit/leave')
             this.dropRelease = false
             this.show = false
-            //this.fileList = []
             nextTick(() => {
                 feather.replace()
 
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 31a9d725..6f24d587 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -142,7 +142,7 @@
             </div>
         </div>
     </div>
-    <div class="flex relative " @dragover.stop.prevent="setDropZone()" >
+    <div class="flex relative flex-grow " @dragover.stop.prevent="setDropZone()" >
         <div class="z-20">
             <DragDrop ref="dragdrop"  @panelDrop="setFileList"></DragDrop>
         </div>
@@ -151,7 +151,7 @@
             id="messages-list" >
 
             <!-- CHAT AREA -->
-            <div class="container flex flex-col flex-grow pt-4 pb-10 ">
+            <div class="conainer flex flex-col flex-grow 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"
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index de3c5461..d5361e2b 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -138,7 +138,7 @@
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
                             Models zoo</h3>
                             <div class="flex flex-row items-center">
-                                <div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center">
+                                <div v-if="!isModelSelected" class="text-base text-red-600 flex gap-3 items-center mr-2">
                     <i data-feather="alert-triangle"></i>
                     No model selected!
                 </div>

From f76b74310a8df00df0bb2811ab3ad55d962c9153 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 21:20:37 +0300
Subject: [PATCH 4/6] added import discussion

---
 web/src/views/DiscussionsView.vue | 67 +++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 6f24d587..6094669b 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -25,8 +25,9 @@
                     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="">
+                    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"
@@ -142,13 +143,14 @@
             </div>
         </div>
     </div>
-    <div class="flex relative flex-grow " @dragover.stop.prevent="setDropZone()" >
+    <div class="flex relative flex-grow " @dragover.stop.prevent="setDropZone()">
         <div class="z-20">
-            <DragDrop ref="dragdrop"  @panelDrop="setFileList"></DragDrop>
+            <DragDrop ref="dragdrop" @panelDrop="setFileList"></DragDrop>
         </div>
 
-        <div  :class="isDragOver?'pointer-events-none':''" class="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"
-            id="messages-list" >
+        <div :class="isDragOver ? 'pointer-events-none' : ''"
+            class="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"
+            id="messages-list">
 
             <!-- CHAT AREA -->
             <div class="conainer flex flex-col flex-grow pt-4 pb-10 ">
@@ -226,7 +228,7 @@ export default {
             personalityAvatars: [], // object array of personality name: and avatar: props
             fileList: [],
             isDropZoneVisible: true,
-            isDragOver:false
+            isDragOver: false
         }
     },
     methods: {
@@ -412,6 +414,23 @@ export default {
                 return {}
             }
         },
+        async import_multiple_discussions(jArray) {
+            try {
+                if (discussionIdArr.length > 0) {
+                    const res = await axios.post('/import_multiple_discussions', {
+                        jArray
+                    })
+
+                    if (res) {
+                        return res.data
+                    }
+                }
+
+            } catch (error) {
+                console.log("Error: Could not import multiple discussions", error.message)
+                return 
+            }
+        },
         filterDiscussions() {
             // Search bar in for filtering discussions by title (serch)
 
@@ -879,6 +898,14 @@ export default {
             a.click();
             document.body.removeChild(a);
         },
+        async parseJsonFile(file) {
+            return new Promise((resolve, reject) => {
+                const fileReader = new FileReader()
+                fileReader.onload = event => resolve(JSON.parse(event.target.result))
+                fileReader.onerror = error => reject(error)
+                fileReader.readAsText(file)
+            })
+        },
         async exportDiscussions() {
             // Export selected discussions
 
@@ -923,6 +950,20 @@ export default {
                 this.loading = false
             }
 
+        },
+        async importDiscussions(event) {
+            const obj = await this.parseJsonFile(event.target.files[0])
+
+            const res = await this.import_multiple_discussions(obj)
+            if(res){
+                this.$refs.toast.showToast("Successfully imported ("+obj.length+")", 4, true)
+                await this.list_discussions()
+            }else{
+                this.$refs.toast.showToast("Failed to import discussions", 4, false)
+            }
+            
+            
+           
         },
         async getPersonalityAvatars() {
 
@@ -976,14 +1017,14 @@ export default {
         },
         setFileList(files) {
             this.fileList = files
-            this.$refs.chatBox.fileList=this.fileList
+            this.$refs.chatBox.fileList = this.fileList
             console.log('dropppp', this.fileList)
-            this.isDragOver=false
+            this.isDragOver = false
         },
-        setDropZone(){
-            this.isDragOver=true
-            this.$refs.dragdrop.show=true
-            this.isDropZoneVisible=true
+        setDropZone() {
+            this.isDragOver = true
+            this.$refs.dragdrop.show = true
+            this.isDropZoneVisible = true
             //console.log('is vis',this.isDropZoneVisible)
         },
 
@@ -1009,7 +1050,7 @@ export default {
         socket.on('infos', this.createBotMsg)
         socket.on('message', this.streamMessageContent)
         socket.on("final", this.finalMsgEvent)
-        
+
     },
     async activated() {
         // This lifecycle hook runs every time you switch from other page back to this page (vue-router)

From f0f41230ae9030b1d856290993f3b7439d30c56d Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 21:28:25 +0300
Subject: [PATCH 5/6] moar

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

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 6094669b..d7d9e56c 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -124,6 +124,9 @@
             </div>
         </div>
         <div class="relative overflow-y-scroll no-scrollbar">
+            <div class="z-20">
+            <DragDrop ref="dragdropDiscussion" @panelDrop="setFileListChat"></DragDrop>
+        </div>
             <!-- DISCUSSION LIST -->
             <div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
                 <TransitionGroup v-if="list.length > 0" name="list">
@@ -143,9 +146,9 @@
             </div>
         </div>
     </div>
-    <div class="flex relative flex-grow " @dragover.stop.prevent="setDropZone()">
+    <div class="flex relative flex-grow " @dragover.stop.prevent="setDropZoneChat()">
         <div class="z-20">
-            <DragDrop ref="dragdrop" @panelDrop="setFileList"></DragDrop>
+            <DragDrop ref="dragdropChat" @panelDrop="setFileListChat"></DragDrop>
         </div>
 
         <div :class="isDragOver ? 'pointer-events-none' : ''"
@@ -1015,15 +1018,15 @@ export default {
 
             return
         },
-        setFileList(files) {
+        setFileListChat(files) {
             this.fileList = files
             this.$refs.chatBox.fileList = this.fileList
-            console.log('dropppp', this.fileList)
+            //console.log('dropppp', this.fileList)
             this.isDragOver = false
         },
-        setDropZone() {
+        setDropZoneChat() {
             this.isDragOver = true
-            this.$refs.dragdrop.show = true
+            this.$refs.dragdropChat.show = true
             this.isDropZoneVisible = true
             //console.log('is vis',this.isDropZoneVisible)
         },
@@ -1035,7 +1038,7 @@ export default {
         // Constructor
 
 
-
+        
         this.setPageTitle()
         await this.list_discussions()
 
@@ -1053,6 +1056,7 @@ export default {
 
     },
     async activated() {
+        this.$refs.dragdropDiscussion.show = true
         // This lifecycle hook runs every time you switch from other page back to this page (vue-router)
         // To fix scrolling back to last message, this hook is needed.
         // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D

From 3a5f5c285df8a7628a6b8fcda857ce0b01bdcc38 Mon Sep 17 00:00:00 2001
From: andzejsp <andzejs.poprockis@gmail.com>
Date: Mon, 29 May 2023 21:39:38 +0300
Subject: [PATCH 6/6] tweaked import

---
 web/src/views/DiscussionsView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index d7d9e56c..33cacfc6 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -419,12 +419,14 @@ export default {
         },
         async import_multiple_discussions(jArray) {
             try {
-                if (discussionIdArr.length > 0) {
+                if (jArray.length > 0) {
+                    console.log('sending import',jArray)
                     const res = await axios.post('/import_multiple_discussions', {
                         jArray
                     })
 
                     if (res) {
+                        console.log('import response',res.data)
                         return res.data
                     }
                 }
@@ -1056,7 +1058,7 @@ export default {
 
     },
     async activated() {
-        this.$refs.dragdropDiscussion.show = true
+        //this.$refs.dragdropDiscussion.show = true
         // This lifecycle hook runs every time you switch from other page back to this page (vue-router)
         // To fix scrolling back to last message, this hook is needed.
         // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D