Merge pull request #258 from andzejsp/lollms-fixes

Lollms fixes

web/src/components/MarkdownRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class=" break-all w-full">
     <div v-html="renderedMarkdown" class=""></div>
   </div>
 </template>
@@ -22,24 +22,45 @@ const markdownIt = new MarkdownIt('commonmark', {
   linkify: true,
   typographer: true,
   highlight: (str, lang) => {
+    const language = hljs.highlight(str, { language: lang }).language
+
+    const languageCapital = language.charAt(0).toUpperCase() + language.slice(1);
+
 
     if (lang && hljs.getLanguage(lang)) {
       try {
 
+
         return (
-          '<pre class="hljs p-4 overflow-x-auto rounded-lg shadow-sm 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="hljs language-html break-all whitespace-pre  p-2 rounded-lg shadow-sm ">' +
+          languageCapital +
+
+          '<pre class="break-all whitespace-pre p-1 overflow-x-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 ">' +
+
           '<code>' +
-          hljs.highlight(str, { language: lang }).value +
-          '</code></pre>'
+          hljs.highlightAuto(str).value +
+          '</code></pre>' + '</div>'
         );
 
       } catch (__) { }
     }
+    // return (
+    //   '<pre class="hljs p-4 overflow-x-auto rounded-lg shadow-sm 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">' +
+    //   '<code>' +
+    //   markdownIt.utils.escapeHtml(str) +
+    //   '</code></pre>'
+    // );
+
+
     return (
-      '<pre class="hljs p-4 overflow-x-auto rounded-lg shadow-sm 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="hljs language-html break-all whitespace-pre  p-2 rounded-lg shadow-sm ">' +
+      languageCapital +
+
+      '<pre class="break-all whitespace-pre p-1 overflow-x-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 ">' +
+
       '<code>' +
       markdownIt.utils.escapeHtml(str) +
-      '</code></pre>'
+      '</code></pre>' + '</div>'
     );
   }
 }).use(emoji);
@@ -88,10 +109,11 @@ export default {
     },
 
   },
-  computed:{
+  computed: {
+
 
-    
   }
 };
 </script>
   
+<style></style>

web/src/components/Message.vue

@@ -11,11 +11,11 @@
             <div class="flex flex-col flex-grow ">
                 <div class="flex flex-row flex-grow items-start ">
                     <!-- SENDER NAME -->
-                    <div class="flex flex-grow">
-                        <p class="drop-shadow-sm text-lg text-opacity-95 font-bold ">{{ message.sender }}</p>
+                    <div class="flex ">
+                        <p class="drop-shadow-sm text-lg text-opacity-95 font-bold grow  ">{{ message.sender }}</p>
 
                     </div>
-                    <div class="flex-grow">
+                    <div class="flex-grow ">
 
                     </div>
                     <!-- MESSAGE CONTROLS -->
@@ -81,9 +81,9 @@
                     </div>
                 </div>
 
-                <div class="break-all">
+                <div >
                     <!-- MESSAGE CONTENT -->
-                    <MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content">
+                    <MarkdownRenderer ref="mdRender"  v-if="!editMsgMode" :markdown-text="message.content">
                     </MarkdownRenderer>
                     <textarea v-if="editMsgMode" ref="mdTextarea" :rows="4"
                         class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
@@ -91,7 +91,6 @@
                         v-model="new_message_content"></textarea>
                 </div>
 
-
             </div>
 
 

web/src/components/ModelEntry.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:scale-95 duration-75 select-none"
+
+  <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer  active:opacity-80 duration-75 "
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
 
 
@@ -10,13 +11,18 @@
           {{ title }}
         </h3>
       </div>
+
     </div>
     <div class="flex-1" v-if="!model.isCustomModel">
-      <div class="flex gap-3 items-center">
+      <div class="flex flex-row gap-3 items-center ">
         <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill" :class="linkNotValid ? 'grayscale':''">
         <h3 class="font-bold font-large text-lg">
           {{ title }}
         </h3>
+        <div class="flex-grow">
+
+        </div>
+
       </div>
       <div class="flex flex-shrink-0 items-center ">
         <i  data-feather="download" class="w-5 m-1" ></i>
@@ -60,7 +66,11 @@
       </div>
       <p class="mx-1 opacity-80">{{ description }}</p>
     </div>
-    <div class="flex-shrink-0" >
+    <div class="flex flex-row flex-shrink-0 items-center"  >
+      <button class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
+            title="Copy model info to clipboard" @click.stop="toggleCopy()">
+            <i data-feather="clipboard"></i>
+      </button>
       <button v-if="model_type !== 'api'" class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
         :class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : linkNotValid ? 'bg-gray-500 hover:bg-gray-600' : 'bg-green-500 hover:bg-green-600']"
         :disabled="installing || uninstalling" @click.stop="toggleInstall">
@@ -88,6 +98,7 @@
     </div>
 
   </div>
+
 </template>
 
 <script>
@@ -110,6 +121,7 @@ export default {
     onInstall: Function,
     onUninstall: Function,
     onSelected: Function,
+    onCopy: Function,
     selected: Boolean,
     model: Object,
     model_type: String
@@ -215,11 +227,20 @@ export default {
     toggleSelected() {
       this.onSelected(this)
     },
+    toggleCopy() {
+ 
+      this.onCopy(this)
+    },
     handleSelection() {
       if (this.isInstalled && !this.selected) {
         this.onSelected(this);
       }
-    }
+    },
+    copyContentToClipboard() {
+      console.log('asdasdas')
+            this.$emit('copy', 'this.message.content')
+
+        },
   },
   watch:{
     linkNotValid(){

web/src/views/DiscussionsView.vue

@@ -2,7 +2,7 @@
     <div
         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="flex flex-col flex-grow overflow-y-scroll no-scrollbar"
+        <div id="leftPanel" 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">
 
@@ -136,7 +136,7 @@
                 <div class="mx-4 flex flex-col flex-grow" :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
 
 
-                    <div :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
+                    <div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
                         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"
@@ -168,12 +168,15 @@
             :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"
                         @rankDown="rankDownMessage" @updateMessage="updateMessage" @resendMessage="resendMessage"
-                        :avatar="getAvatar(msg.sender)" @click="scrollToElementInContainer($event.target, 'messages-list')" />
+                        :avatar="getAvatar(msg.sender)" />
+
+                        <!-- REMOVED FOR NOW, NEED MORE TESTING -->
+                        <!-- @click="scrollToElementInContainer($event.target, 'messages-list')"  -->
 
 
                 </TransitionGroup>
@@ -492,6 +495,12 @@ export default {
                 }
                 nextTick(() => {
 
+
+                    const discussionitem =document.getElementById('dis-'+this.currentDiscussion.id)
+
+                    //this.scrollToElement(discussionitem)
+
+                    this.scrollToElementInContainer(discussionitem, 'leftPanel')
                     const msgList = document.getElementById('messages-list')
 
                     this.scrollBottom(msgList)
@@ -508,10 +517,17 @@ export default {
             }
         },
         scrollToElementInContainer(el, containerId) {
-            // console.log(el)
-            // const topPos = el.offsetTop + el.clientHeight;
-            // const container = document.getElementById(containerId)
-            // container.scrollTop = topPos;
+            const topPos = el.offsetTop + el.clientHeight;
+            const container = document.getElementById(containerId)
+           // console.log(el.offsetTop , el.clientHeight, container.clientHeight)
+
+
+            container.scrollTo(
+                    {
+                        top: topPos,
+                        behavior: "smooth",
+                    }
+                )
 
         },
         scrollBottom(el) {

web/src/views/SettingsView.vue

@@ -80,7 +80,8 @@
                         <div class=" text-base font-semibold cursor-pointer select-none items-center">
 
                             <div class="flex gap-2 items-center ">
-                                <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                <svg class="flex-shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                    viewBox="0 0 24 24">
                                     <path fill="currentColor"
                                         d="M17 17H7V7h10m4 4V9h-2V7a2 2 0 0 0-2-2h-2V3h-2v2h-2V3H9v2H7c-1.11 0-2 .89-2 2v2H3v2h2v2H3v2h2v2a2 2 0 0 0 2 2h2v2h2v-2h2v2h2v-2h2a2 2 0 0 0 2-2v-2h2v-2h-2v-2m-6 2h-2v-2h2m2-2H9v6h6V9Z" />
                                 </svg>
@@ -247,7 +248,7 @@
                                     :license="model.license" :description="model.description"
                                     :is-installed="model.isInstalled" :on-install="onInstall" :on-uninstall="onUninstall"
                                     :on-selected="onSelected" :selected="model.title === configFile.model_name"
-                                    :model="model" :model_type="model.model_type" />
+                                    :model="model" :model_type="model.model_type" :on-copy="onCopy" />
                             </TransitionGroup>
                         </div>
                     </div>
@@ -284,7 +285,7 @@
 
                             <div class="flex gap-1 items-center">
                                 <img :src="imgPersonality" class="w-8 h-8 rounded-full object-fill text-red-700">
-                                <h3 class="font-bold font-large text-lg line-clamp-1" >
+                                <h3 class="font-bold font-large text-lg line-clamp-1">
                                     {{ this.configFile.personality_folder }}
                                 </h3>
                             </div>
@@ -758,6 +759,18 @@ export default {
             }
 
         },
+        onCopy(modelEntry) {
+            let content
+            if (!modelEntry.model.isCustomModel) {
+                content = `Model name: ${modelEntry.title}\nFile size: ${modelEntry.fileSize}\nDownload: ${modelEntry.path}\nLicense: ${modelEntry.license}\nOwner: ${modelEntry.owner}\nWebsite: ${modelEntry.owner_link}\nDescription: ${modelEntry.description}`
+            } else {
+                content = `Model name: ${modelEntry.title}\nFile size: ${modelEntry.fileSize}\nManually downloaded model `
+            }
+
+            this.$refs.toast.showToast("Copied model info to clipboard!", 4, true)
+            navigator.clipboard.writeText(content.trim());
+        },
+
         // Model installation
 
         onInstall(model_object) {