Merge branch 'lollms-patchy2' of https://github.com/andzejsp/gpt4all-ui

web/src/components/Message.vue

@@ -19,7 +19,7 @@
                         </p> -->
 
                         </div>
-                        <div class="text-sm text-gray-400 font-thin" v-if="message.created_at" :title="message.created_at">
+                        <div class="text-sm text-gray-400 font-thin" v-if="message.created_at" :title="'Created at: '+created_at_parsed">
                             {{ created_at }}
 
                         </div>
@@ -105,6 +105,8 @@
                         <p v-if="message.binding">Binding: <span class="font-thin">{{ message.binding }}</span></p>
                         <p v-if="message.model">Model: <span class="font-thin">{{ message.model }}</span></p>
                         <p v-if="message.seed">Seed: <span class="font-thin">{{ message.seed }}</span></p>
+                        <p v-if="message.finished_generating_at">Time spent: <span class="font-thin"
+                                :title="'Finished generating: '+finished_generating_at_parsed">{{ time_spent }}</span></p>
                     </div>
 
                 </div>
@@ -174,7 +176,7 @@ export default {
             this.expanded = !this.expanded;
         },
         copyContentToClipboard() {
-            this.$emit('copy', this.message.content)
+            this.$emit('copy', this)
 
         },
         deleteMsg() {
@@ -307,6 +309,54 @@ export default {
         created_at() {
             return this.prettyDate(this.message.created_at)
 
+        },
+        created_at_parsed() {
+            return new Date(Date.parse(this.message.created_at)).toLocaleString()
+
+        },
+        finished_generating_at_parsed() {
+            return new Date(Date.parse(this.message.finished_generating_at)).toLocaleString()
+
+        },
+
+        time_spent() {
+            const startTime = new Date(Date.parse(this.message.created_at))
+            const endTime = new Date(Date.parse(this.message.finished_generating_at))
+            //const spentTime = new Date(endTime - startTime)
+
+
+            let timeDiff = endTime.getTime() - startTime.getTime();
+            const hours = Math.floor(timeDiff / (1000 * 60 * 60));
+
+            timeDiff -= hours * (1000 * 60 * 60);
+
+
+
+            const mins = Math.floor(timeDiff / (1000 * 60));
+
+            timeDiff -= mins * (1000 * 60);
+
+            const secs = Math.floor(timeDiff / 1000)
+            timeDiff -= secs * 1000;
+
+
+
+            // let spentTime = Math.floor((endTime.getTime() - startTime.getTime()) / 1000);
+            // const result = spentTime.getSeconds();
+
+            function addZero(i) {
+                if (i < 10) { i = "0" + i }
+                return i;
+            }
+
+            // const d = new Date();
+            // let h = addZero(spentTime.getHours());
+            // let m = addZero(spentTime.getMinutes());
+            // let s = addZero(spentTime.getSeconds());
+            const time = addZero(hours) + "h:" + addZero(mins) + "m:" + addZero(secs)+'s';
+
+             return time
+
         }
     }
 

web/src/views/DiscussionsView.vue

@@ -168,7 +168,7 @@
             :class="isDragOverChat ? 'pointer-events-none' : ''">
 
             <!-- CHAT AREA -->
-            <div class=" container pt-4 pb-10 mb-16" >
+            <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"
@@ -496,7 +496,7 @@ export default {
                 nextTick(() => {
 
 
-                    const discussionitem =document.getElementById('dis-'+this.currentDiscussion.id)
+                    const discussionitem = document.getElementById('dis-' + this.currentDiscussion.id)
 
                     //this.scrollToElement(discussionitem)
 
@@ -517,7 +517,7 @@ export default {
             }
         },
         scrollToElementInContainer(el, containerId) {
-            const topPos = el.offsetTop ; //+ el.clientHeight
+            const topPos = el.offsetTop; //+ el.clientHeight
             const container = document.getElementById(containerId)
             // console.log(el.offsetTop , el.clientHeight, container.clientHeight)
 
@@ -560,12 +560,14 @@ export default {
 
         },
         createUserMsg(msgObj) {
+
             let usrMessage = {
                 content: msgObj.message,
                 id: msgObj.id,
                 //parent: 10,
                 rank: 0,
-                sender: msgObj.user
+                sender: msgObj.user,
+                created_at: msgObj.created_at
                 //type: 0
             }
             this.discussionArr.push(usrMessage)
@@ -601,12 +603,14 @@ export default {
             if (msgObj["status"] == "generation_started") {
                 this.updateLastUserMsg(msgObj)
                 // Create response message
+
                 let responseMessage = {
                     content: "✍ please stand by ...",//msgObj.message,
                     id: msgObj.ai_message_id,
                     parent: msgObj.user_message_id,
                     rank: 0,
                     sender: msgObj.bot,
+                    created_at: new Date().toLocaleString(),
                     //type: msgObj.type
                 }
                 this.discussionArr.push(responseMessage)
@@ -653,7 +657,9 @@ export default {
                             message: msg,
                             id: 0,
                             rank: 0,
-                            user: "user"
+                            user: "user",
+                            created_at: new Date().toLocaleString(),
+
                         };
                         this.createUserMsg(usrMessage);
 
@@ -887,7 +893,7 @@ export default {
             this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
             axios.get('/get_generation_status', {}).then((res) => {
                 if (res) {
-                    //console.log(res.data.status);
+                    console.log(res);
                     if (!res.data.status) {
                         socket.emit('generate_msg_from', { prompt: msg, id: msgId });
 
@@ -934,9 +940,43 @@ export default {
             this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating)
             this.chime.play()
         },
-        copyToClipBoard(content) {
+        copyToClipBoard(messageEntry) {
             this.$refs.toast.showToast("Copied to clipboard successfully", 4, true)
-            navigator.clipboard.writeText(content);
+
+            let binding =""
+            if(messageEntry.message.binding){
+                binding= `Binding: ${messageEntry.message.binding}`
+            }
+            let personality=""
+            if(messageEntry.message.personality){
+                personality= `\nPersonality: ${messageEntry.message.personality}`
+            }
+            let time=""
+            if(messageEntry.created_at_parsed){
+                time= `\nCreated: ${messageEntry.created_at_parsed}`
+            }
+            let content=""
+            if(messageEntry.message.content){
+                content= messageEntry.message.content
+            }
+            let model=""
+            if(messageEntry.message.model){
+                model= `Model: ${messageEntry.message.model}`
+            }
+            let seed=""
+            if(messageEntry.message.seed){
+                seed= `Seed: ${messageEntry.message.seed}`
+            }
+            let time_spent=""
+            if(messageEntry.time_spent){
+                time_spent= `\nTime spent: ${messageEntry.time_spent}`
+            }
+            let bottomRow = ''
+            bottomRow = `${binding} ${model} ${seed} ${time_spent}`.trim()
+           const result = `${messageEntry.message.sender}${personality}${time}\n\n${content}\n\n${bottomRow}`
+
+
+            navigator.clipboard.writeText(result);
 
             nextTick(() => {
                 feather.replace()
@@ -1151,7 +1191,7 @@ export default {
     },
     async activated() {
 
-console.log('settings changed',this.$store.state.mountedPersonalities)
+        //console.log('settings changed', this.$store.state.mountedPersonalities)
         // 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

web/src/views/SettingsView.vue

@@ -162,7 +162,8 @@
                             <div class="flex gap-1 items-center">
                                 <img :src="imgBinding" class="w-8 h-8 rounded-full object-fill text-blue-700">
                                 <h3 class="font-bold font-large text-lg line-clamp-1">
-                                    {{ configFile.binding_name }}
+                                    <!-- {{ configFile.binding_name }} -->
+                                    {{binding_name}}
                                 </h3>
                             </div>
                         </div>
@@ -329,6 +330,11 @@
 
                         <div v-if="configFile.personalities" class="mr-2">|</div>
                         <!-- LIST OF MOUNTED PERSONALITIES -->
+                        <div class="mr-2 font-bold font-large text-lg line-clamp-1">
+                        {{active_pesonality }}
+
+                         </div>
+                        <div v-if="configFile.personalities" class="mr-2">|</div>
                         <div v-if="configFile.personalities"
                             class=" text-base font-semibold cursor-pointer select-none items-center flex flex-row">
                             <!-- LIST -->
@@ -1380,7 +1386,7 @@ export default {
             const res = await this.mount_personality(pers.personality)
             console.log('mount_personality res', res)
 
-            if (res.status) {
+            if (res && res.status) {
                 this.configFile.personalities = res.personalities
                 this.$refs.toast.showToast("Personality mounted", 4, true)
                 pers.isMounted = true
@@ -1609,6 +1615,34 @@ export default {
                 return defaultModelImgPlaceholder
             }
         },
+        binding_name(){
+            if (!this.isMounted) {
+                return
+            }
+            const index =this.bindingsArr.findIndex(item=>item.folder === this.configFile.binding_name)
+            if(index>-1){
+                return this.bindingsArr[index].name
+
+            }else{
+                return
+            }
+            
+        },
+        active_pesonality(){
+            if (!this.isMounted) {
+                return
+            }
+            const index =this.personalities.findIndex(item => item.full_path ===this.configFile.personalities[this.configFile.active_personality_id])
+            if (index>-1){
+                return this.personalities[index].name
+            }else{
+                return
+
+            }
+           
+            
+
+        }
         // imgPersonality() {
         //     if (!this.isMounted) {
         //         return