ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-25 06:51:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #255 from andzejsp/more-message-tweaks

Browse Source 
More message tweaks
This commit is contained in:
Saifeddine ALOUI 2023-06-05 20:04:40 +02:00 committed by GitHub
commit 73291f7307
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 156 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/MarkdownRenderer.vue
View File

@ -9,11 +9,12 @@ import { nextTick } from 'vue'
import feather from 'feather-icons' import feather from 'feather-icons'
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
import emoji from 'markdown-it-emoji'; import emoji from 'markdown-it-emoji';
import 'highlight.js/styles/tomorrow-night-blue.css' //import 'highlight.js/styles/tomorrow-night-blue.css'
//import 'highlight.js/styles/tokyo-night-dark.css' //import 'highlight.js/styles/tokyo-night-dark.css'
import hljs from 'highlight.js'; import hljs from 'highlight.js';
const markdownIt = new MarkdownIt('commonmark', { const markdownIt = new MarkdownIt('commonmark', {
html: false, html: false,
xhtmlOut: true, xhtmlOut: true,
@ -26,7 +27,7 @@ const markdownIt = new MarkdownIt('commonmark', {
try { try {
return ( return (
'<pre class="hljs p-4 overflow-x-auto shadow-lg 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">'+ '<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>' + '<code>' +
hljs.highlight(str, { language: lang }).value + hljs.highlight(str, { language: lang }).value +
'</code></pre>' '</code></pre>'
@ -35,7 +36,7 @@ const markdownIt = new MarkdownIt('commonmark', {
} catch (__) { } } catch (__) { }
} }
return ( return (
'<pre class="hljs p-4 overflow-x-auto shadow-lg 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">'+ '<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>' + '<code>' +
markdownIt.utils.escapeHtml(str) + markdownIt.utils.escapeHtml(str) +
'</code></pre>' '</code></pre>'
@ -53,7 +54,8 @@ export default {
}, },
data() { data() {
return { return {
renderedMarkdown: '' renderedMarkdown: '',
}; };
}, },
mounted() { mounted() {
@ -63,12 +65,17 @@ export default {
feather.replace() feather.replace()
}) })
},
created() {
}, },
methods: { methods: {
copyContentToClipboard() { copyContentToClipboard() {
navigator.clipboard.writeText(theCode); navigator.clipboard.writeText(theCode);
}, },
}, },
watch: { watch: {
markdownText(newText) { markdownText(newText) {
@ -78,7 +85,12 @@ export default {
feather.replace() feather.replace()
}) })
} },
},
computed:{
} }
}; };
</script> </script>

81
web/src/components/Message.vue
View File

@ -1,34 +1,35 @@
<template> <template>
<div <div
class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex-row p-4 pb-2"> class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex-row p-4 pb-2">
<div class="w-30 flex"> <div class="flex flex-row flex-grow gap-2">
<!-- SENDER --> <div class="flex-shrink-0">
<div class="w-10 h-10 rounded-lg object-fill drop-shadow-md"> <!-- AVATAR -->
<img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700"> <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
</div> </div>
<p class="drop-shadow-sm py-0 px-2 text-lg text-opacity-95 font-bold ">{{ message.sender }}</p>
<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> </div>
<div class="-mt-4 ml-10 mr-0 pt-1 px-2 break-all"> <div class="flex-grow">
<!-- CONTENT/MESSAGE -->
<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"
:style="{ minHeight: mdRenderHeight + `px` }" placeholder="Enter message here..."
v-model="new_message_content"></textarea>
</div> </div>
<div class="invisible group-hover:visible flex flex-row mt-3 -mb-2"> <!-- MESSAGE CONTROLS -->
<div class="flex-row justify-end">
<div class="invisible group-hover:visible flex flex-row ">
<!-- MESSAGE CONTROLS --> <!-- MESSAGE CONTROLS -->
<!-- EDIT CONFIRMATION --> <!-- EDIT CONFIRMATION -->
<div v-if="editMsgMode" class="flex items-center duration-75"> <div v-if="editMsgMode" class="flex items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" title="Cancel edit" <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2"
type="button" @click.stop="editMsgMode = false"> title="Cancel edit" type="button" @click.stop="editMsgMode = false">
<i data-feather="x"></i> <i data-feather="x"></i>
</button> </button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2" title="Update message" <button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2"
type="button" @click.stop="updateMessage"> title="Update message" type="button" @click.stop="updateMessage">
<i data-feather="check"></i> <i data-feather="check"></i>
</button> </button>
@ -37,8 +38,8 @@
title="Edit message" @click.stop="editMsgMode = true"> title="Edit message" @click.stop="editMsgMode = true">
<i data-feather="edit"></i> <i data-feather="edit"></i>
</div> </div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Copy message to clipboard" <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2"
@click.stop="copyContentToClipboard()"> title="Copy message to clipboard" @click.stop="copyContentToClipboard()">
<i data-feather="copy"></i> <i data-feather="copy"></i>
</div> </div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Resend message" <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Resend message"
@ -47,12 +48,12 @@
</div> </div>
<!-- DELETE CONFIRMATION --> <!-- DELETE CONFIRMATION -->
<div v-if="deleteMsgMode" class="flex items-center duration-75"> <div v-if="deleteMsgMode" class="flex items-center duration-75">
<button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2" title="Cancel removal" <button class="text-2xl hover:text-red-600 duration-75 active:scale-90 p-2"
type="button" @click.stop="deleteMsgMode = false"> title="Cancel removal" type="button" @click.stop="deleteMsgMode = false">
<i data-feather="x"></i> <i data-feather="x"></i>
</button> </button>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2" title="Confirm removal" <button class="text-2xl hover:text-secondary duration-75 active:scale-90 p-2"
type="button" @click.stop="deleteMsg()"> title="Confirm removal" type="button" @click.stop="deleteMsg()">
<i data-feather="check"></i> <i data-feather="check"></i>
</button> </button>
@ -61,7 +62,8 @@
title="Remove message" @click="deleteMsgMode = true"> title="Remove message" @click="deleteMsgMode = true">
<i data-feather="trash"></i> <i data-feather="trash"></i>
</div> </div>
<div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Upvote" @click.stop="rankUp()"> <div class="text-lg hover:text-secondary duration-75 active:scale-90 p-2" title="Upvote"
@click.stop="rankUp()">
<i data-feather="thumbs-up"></i> <i data-feather="thumbs-up"></i>
</div> </div>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
@ -69,11 +71,34 @@
@click.stop="rankDown()"> @click.stop="rankDown()">
<i data-feather="thumbs-down"></i> <i data-feather="thumbs-down"></i>
</div> </div>
<div v-if="message.rank != 0" class="rounded-full px-2 text-sm flex items-center justify-center font-bold" <div v-if="message.rank != 0"
:class="message.rank > 0 ? 'bg-secondary' : 'bg-red-600'" title="Rank">{{ message.rank }} class="rounded-full px-2 text-sm flex items-center justify-center font-bold"
:class="message.rank > 0 ? 'bg-secondary' : 'bg-red-600'" title="Rank">{{
message.rank }}
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="break-all">
<!-- 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"
:style="{ minHeight: mdRenderHeight + `px` }" placeholder="Enter message here..."
v-model="new_message_content"></textarea>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -152,7 +177,7 @@ export default {
return userImgPlaceholder; return userImgPlaceholder;
} }
if(this.avatar){ if (this.avatar) {
return bUrl + this.avatar return bUrl + this.avatar
} }
return botImgPlaceholder; return botImgPlaceholder;

37
web/src/components/TopBar.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<!-- <link v-if="codeBlockStylesheet" rel="stylesheet" :href="codeBlockStylesheet"> -->
<header class=" top-0 shadow-lg"> <header class=" top-0 shadow-lg">
<nav class="container flex flex-col lg:flex-row item-center gap-2 py-2 "> <nav class="container flex flex-col lg:flex-row item-center gap-2 py-2 ">
<!-- LOGO --> <!-- LOGO -->
@ -51,6 +52,7 @@ export default {
name: 'TopBar', name: 'TopBar',
data() { data() {
return { return {
codeBlockStylesheet:'',
sunIcon: document.querySelector(".sun"), sunIcon: document.querySelector(".sun"),
moonIcon: document.querySelector(".moon"), moonIcon: document.querySelector(".moon"),
userTheme: localStorage.getItem("theme"), userTheme: localStorage.getItem("theme"),
@ -78,26 +80,61 @@ export default {
this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches; this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
}, },
methods: { methods: {
// codeBlockTheme(theme) {
// const styleDark = document.createElement('link');
// styleDark.type = "text/css";
// styleDark.href = 'highlight.js/styles/tokyo-night-dark.css';
// const styleLight = document.createElement('link');
// styleLight.type = "text/css";
// styleLight.href = 'highlight.js/styles/tomorrow-night-blue.css';
// if(theme=='dark'){
// document.head.appendChild(styleDark);
// document.head.removeChild(styleLight);
// }else{
// document.head.appendChild(styleLight);
// //document.head.removeChild(styleDark);
// }
// },
themeCheck() { themeCheck() {
if (this.userTheme == "dark" || (!this.userTheme && this.systemTheme)) { if (this.userTheme == "dark" || (!this.userTheme && this.systemTheme)) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
this.moonIcon.classList.add("display-none"); this.moonIcon.classList.add("display-none");
nextTick(()=>{
//import('highlight.js/styles/tokyo-night-dark.css');
import('highlight.js/styles/stackoverflow-dark.css');
})
return return
} }
nextTick(()=>{
//import('highlight.js/styles/tomorrow-night-blue.css');
import('highlight.js/styles/stackoverflow-light.css');
})
this.sunIcon.classList.add("display-none") this.sunIcon.classList.add("display-none")
}, },
themeSwitch() { themeSwitch() {
if (document.documentElement.classList.contains("dark")) { if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light") localStorage.setItem("theme", "light")
this.userTheme == "light"
this.iconToggle() this.iconToggle()
return return
} }
import('highlight.js/styles/tokyo-night-dark.css');
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark") localStorage.setItem("theme", "dark")
this.userTheme == "dark"
this.iconToggle() this.iconToggle()
}, },

1
web/src/views/SettingsView.vue
View File

@ -1068,7 +1068,6 @@ export default {
this.isLoading = false this.isLoading = false
this.diskUsage = await this.api_get_req("disk_usage") this.diskUsage = await this.api_get_req("disk_usage")
this.isMounted = true this.isMounted = true
console.log('reffy', this.$refs.bindingZoo)
}, },
computed: { computed: {