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

finally fixed codeblock issues

Browse Source
This commit is contained in:
AndzejsP 2023-06-09 12:40:47 +03:00
parent d767de86a2
commit 3fb9bb9a98
2 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<div class=" break-all w-full"> <div class=" break-all ">
<div v-html="renderedMarkdown" class=""></div> <div v-html="renderedMarkdown" class=""></div>
</div> </div>
</template> </template>
@ -32,36 +32,30 @@ const markdownIt = new MarkdownIt('commonmark', {
return ( return (
'<div class="hljs language-html break-all whitespace-pre p-2 rounded-lg shadow-sm ">' + '<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm ">' +
languageCapital + 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 ">' + '<pre class=" hljs p-1 rounded-md break-all grid grid-cols-1 ">' +
'<code>' + '<code class="overflow-x-auto break-all 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 ">' +
hljs.highlightAuto(str).value + hljs.highlightAuto(str).value +
'</code></pre>' + '</div>' '</code></pre>' + '</div>'
); );
} catch (__) { } } 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 ( return (
'<div class="hljs language-html break-all whitespace-pre p-2 rounded-lg shadow-sm ">' + '<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm ">' +
languageCapital + 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 ">' + '<pre class=" hljs p-1 rounded-md break-all grid grid-cols-1 ">' +
'<code>' + '<code class="overflow-x-auto break-all 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 ">' +
markdownIt.utils.escapeHtml(str) + markdownIt.utils.escapeHtml(str) +
'</code></pre>' + '</div>' '</code></pre>' + '</div>'
); );
} }
}).use(emoji); }).use(emoji);
@ -116,4 +110,4 @@ export default {
}; };
</script> </script>
<style></style> <style type='text/css'></style>

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

@ -1,14 +1,14 @@
<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 flex-col flex-grow flex-wrap overflow-x-hidden p-4 pb-2">
<div class="flex flex-row flex-grow gap-2"> <div class="flex flex-row gap-2 ">
<div class="flex-shrink-0"> <div class="flex-shrink-0 ">
<!-- AVATAR --> <!-- 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>
<div class="flex flex-col flex-grow "> <div class="flex flex-col w-full flex-grow-0 ">
<div class="flex flex-row flex-grow items-start "> <div class="flex flex-row flex-grow items-start ">
<!-- SENDER NAME --> <!-- SENDER NAME -->
<div class="flex "> <div class="flex ">
@ -19,7 +19,7 @@
</div> </div>
<!-- MESSAGE CONTROLS --> <!-- MESSAGE CONTROLS -->
<div class="flex-row justify-end"> <div class="flex-row justify-end mx-2">
<div class="invisible group-hover:visible flex flex-row "> <div class="invisible group-hover:visible flex flex-row ">
<!-- MESSAGE CONTROLS --> <!-- MESSAGE CONTROLS -->
<!-- EDIT CONFIRMATION --> <!-- EDIT CONFIRMATION -->
@ -81,9 +81,9 @@
</div> </div>
</div> </div>
<div > <div class="overflow-x-auto w-full " >
<!-- MESSAGE CONTENT --> <!-- MESSAGE CONTENT -->
<MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content"> <MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content" >
</MarkdownRenderer> </MarkdownRenderer>
<textarea v-if="editMsgMode" ref="mdTextarea" :rows="4" <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" 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"