feat: markdown image preview

This commit is contained in:
Timothy J. Baek 2024-08-04 18:14:17 +02:00
parent ace3552e15
commit 88086935af
2 changed files with 32 additions and 9 deletions

View File

@ -55,7 +55,6 @@
export let copyToClipboard: Function;
export let continueGeneration: Function;
export let regenerateResponse: Function;
export let chatActionHandler: Function;
let model = null;
$: model = $models.find((m) => m.id === message.model);
@ -528,6 +527,28 @@
code={revertSanitizedResponseContent(token?.text ?? '')}
/>
{/if}
{:else if token.type === 'paragraph'}
{#if token.tokens}
{#each token.tokens as inlineToken}
{#if inlineToken.type === 'image'}
<Image src={inlineToken.href} alt={inlineToken.text} />
{:else}
{@html marked.parseInline(inlineToken.raw, {
...defaults,
gfm: true,
breaks: true,
renderer
})}
{/if}
{/each}
{:else}
{@html marked.parseInline(token.raw, {
...defaults,
gfm: true,
breaks: true,
renderer
})}
{/if}
{:else}
{@html marked.parse(token.raw, {
...defaults,

View File

@ -13,11 +13,13 @@
</script>
<ImagePreview bind:show={showImagePreview} src={_src} {alt} />
<button
on:click={() => {
console.log('image preview');
showImagePreview = true;
}}
>
<img src={_src} {alt} class=" max-h-96 rounded-lg" draggable="false" data-cy="image" />
</button>
<div class="w-full">
<button
on:click={() => {
showImagePreview = true;
}}
>
<img src={_src} {alt} class=" max-h-96 rounded-lg" draggable="false" data-cy="image" />
</button>
</div>