UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-07 00:59:52 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

enh: render markdown user message

Browse Source
This commit is contained in:
Timothy J. Baek 2024-08-15 15:41:02 +02:00
parent 4dd404ac3b
commit dbd5b4c9f1
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/chat/Messages/UserMessage.svelte
View File

@ -10,6 +10,9 @@
import { user as _user } from '$lib/stores'; import { user as _user } from '$lib/stores';
import { getFileContentById } from '$lib/apis/files'; import { getFileContentById } from '$lib/apis/files';
import FileItem from '$lib/components/common/FileItem.svelte'; import FileItem from '$lib/components/common/FileItem.svelte';
import { marked } from 'marked';
import { processResponseContent, replaceTokens } from '$lib/utils';
import MarkdownTokens from './MarkdownTokens.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -91,7 +94,7 @@
{/if} {/if}
<div <div
class="prose chat-{message.role} w-full max-w-full flex flex-col justify-end dark:prose-invert prose-headings:my-0 prose-p:my-0 prose-p:-mb-4 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-6 prose-li:-mb-4 whitespace-pre-line" class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line"
> >
{#if message.files} {#if message.files}
<div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap"> <div class="mt-2.5 mb-1 w-full flex flex-col justify-end overflow-x-auto gap-1 flex-wrap">
@ -162,7 +165,7 @@
</div> </div>
{:else} {:else}
<div class="w-full"> <div class="w-full">
<div class="flex {($settings?.chatBubble ?? true) ? 'justify-end' : ''} mb-2"> <div class="flex {($settings?.chatBubble ?? true) ? 'justify-end' : ''} pb-2">
<div <div
class="rounded-3xl {($settings?.chatBubble ?? true) class="rounded-3xl {($settings?.chatBubble ?? true)
? `max-w-[90%] px-5 py-2 bg-gray-50 dark:bg-gray-850 ${ ? `max-w-[90%] px-5 py-2 bg-gray-50 dark:bg-gray-850 ${
@ -170,7 +173,16 @@
}` }`
: ''}" : ''}"
> >
<pre id="user-message">{message.content}</pre> {#if message.content}
<div class="">
{#key message.id}
<MarkdownTokens
id={message.id}
tokens={marked.lexer(processResponseContent(message?.content))}
/>
{/key}
</div>
{/if}
</div> </div>
</div> </div>