From 88086935af2bc6fa1fbf15d3b9620e52d234d7bb Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 4 Aug 2024 18:14:17 +0200
Subject: [PATCH] feat: markdown image preview

---
 .../chat/Messages/ResponseMessage.svelte      | 23 ++++++++++++++++++-
 src/lib/components/common/Image.svelte        | 18 ++++++++-------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 011d77254..4f01c24c8 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -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,
diff --git a/src/lib/components/common/Image.svelte b/src/lib/components/common/Image.svelte
index dc65df87d..cc36112b6 100644
--- a/src/lib/components/common/Image.svelte
+++ b/src/lib/components/common/Image.svelte
@@ -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>