UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-02 00:26:46 +00:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

fix: code block rendering issue

Browse Source
This commit is contained in:
Timothy J. Baek 2024-05-06 19:04:36 -07:00
parent e3a49c8e9b
commit 7874bea5f4
1 changed files with 466 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -23,13 +23,13 @@
revertSanitizedResponseContent, revertSanitizedResponseContent,
sanitizeResponseContent sanitizeResponseContent
} from '$lib/utils'; } from '$lib/utils';
import { WEBUI_BASE_URL } from '$lib/constants';
import Name from './Name.svelte'; import Name from './Name.svelte';
import ProfileImage from './ProfileImage.svelte'; import ProfileImage from './ProfileImage.svelte';
import Skeleton from './Skeleton.svelte'; import Skeleton from './Skeleton.svelte';
import CodeBlock from './CodeBlock.svelte'; import CodeBlock from './CodeBlock.svelte';
import Image from '$lib/components/common/Image.svelte'; import Image from '$lib/components/common/Image.svelte';
import { WEBUI_BASE_URL } from '$lib/constants';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import RateComment from './RateComment.svelte'; import RateComment from './RateComment.svelte';
import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte'; import CitationsModal from '$lib/components/chat/Messages/CitationsModal.svelte';
@ -366,6 +366,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
<div <div
class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 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-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line" class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 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-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line"
> >
@ -446,10 +447,6 @@
{/each} {/each}
<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} --> <!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
{/if} {/if}
</div>
{/if}
</div>
</div>
{#if message.citations} {#if message.citations}
<hr class=" dark:border-gray-800 my-1" /> <hr class=" dark:border-gray-800 my-1" />
@ -600,8 +597,8 @@
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message?.annotation?.rating === : 'invisible group-hover:visible'} p-1 rounded {message?.annotation
1 ?.rating === 1
? 'bg-gray-100 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ''} dark:hover:text-white hover:text-black transition" : ''} dark:hover:text-white hover:text-black transition"
on:click={() => { on:click={() => {
@ -609,7 +606,9 @@
showRateComment = true; showRateComment = true;
window.setTimeout(() => { window.setTimeout(() => {
document.getElementById(`message-feedback-${message.id}`)?.scrollIntoView(); document
.getElementById(`message-feedback-${message.id}`)
?.scrollIntoView();
}, 0); }, 0);
}} }}
> >
@ -622,11 +621,10 @@
stroke-linejoin="round" stroke-linejoin="round"
class="w-4 h-4" class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> ><path
<path
d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
/> /></svg
</svg> >
</button> </button>
</Tooltip> </Tooltip>
@ -634,15 +632,17 @@
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message?.annotation?.rating === : 'invisible group-hover:visible'} p-1 rounded {message?.annotation
-1 ?.rating === -1
? 'bg-gray-100 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ''} dark:hover:text-white hover:text-black transition" : ''} dark:hover:text-white hover:text-black transition"
on:click={() => { on:click={() => {
rateMessage(message.id, -1); rateMessage(message.id, -1);
showRateComment = true; showRateComment = true;
window.setTimeout(() => { window.setTimeout(() => {
document.getElementById(`message-feedback-${message.id}`)?.scrollIntoView(); document
.getElementById(`message-feedback-${message.id}`)
?.scrollIntoView();
}, 0); }, 0);
}} }}
> >
@ -655,11 +655,10 @@
stroke-linejoin="round" stroke-linejoin="round"
class="w-4 h-4" class="w-4 h-4"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> ><path
<path
d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
/> /></svg
</svg> >
</button> </button>
</Tooltip> </Tooltip>
{/if} {/if}
@ -682,32 +681,35 @@
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> ><style>
<style>
.spinner_S1WN { .spinner_S1WN {
animation: spinner_MGfb 0.8s linear infinite; animation: spinner_MGfb 0.8s linear infinite;
animation-delay: -0.8s; animation-delay: -0.8s;
} }
.spinner_Km9P { .spinner_Km9P {
animation-delay: -0.65s; animation-delay: -0.65s;
} }
.spinner_JApP { .spinner_JApP {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
@keyframes spinner_MGfb { @keyframes spinner_MGfb {
93.75%, 93.75%,
100% { 100% {
opacity: 0.2; opacity: 0.2;
} }
} }
</style> </style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
<circle class="spinner_S1WN" cx="4" cy="12" r="3" /> class="spinner_S1WN spinner_Km9P"
<circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" /> cx="12"
<circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /> cy="12"
</svg> r="3"
/><circle
class="spinner_S1WN spinner_JApP"
cx="20"
cy="12"
r="3"
/></svg
>
{:else if speaking} {:else if speaking}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -760,32 +762,35 @@
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> ><style>
<style>
.spinner_S1WN { .spinner_S1WN {
animation: spinner_MGfb 0.8s linear infinite; animation: spinner_MGfb 0.8s linear infinite;
animation-delay: -0.8s; animation-delay: -0.8s;
} }
.spinner_Km9P { .spinner_Km9P {
animation-delay: -0.65s; animation-delay: -0.65s;
} }
.spinner_JApP { .spinner_JApP {
animation-delay: -0.5s; animation-delay: -0.5s;
} }
@keyframes spinner_MGfb { @keyframes spinner_MGfb {
93.75%, 93.75%,
100% { 100% {
opacity: 0.2; opacity: 0.2;
} }
} }
</style> </style><circle class="spinner_S1WN" cx="4" cy="12" r="3" /><circle
<circle class="spinner_S1WN" cx="4" cy="12" r="3" /> class="spinner_S1WN spinner_Km9P"
<circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" /> cx="12"
<circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /> cy="12"
</svg> r="3"
/><circle
class="spinner_S1WN spinner_JApP"
cx="20"
cy="12"
r="3"
/></svg
>
{:else} {:else}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -906,6 +911,10 @@
}} }}
/> />
{/if} {/if}
</div>
{/if}
</div>
</div>
{/if} {/if}
</div> </div>
</div> </div>