feat: markdown image preview

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,

src/lib/components/common/Image.svelte

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