From 79615f26da1b20d90e20036a32ff3d9322b2efe2 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 22 Feb 2024 18:49:34 -0800
Subject: [PATCH] feat: image preview

---
 .../chat/Messages/ResponseMessage.svelte      |  4 +-
 src/lib/components/common/Image.svelte        | 18 ++++++
 src/lib/components/common/ImagePreview.svelte | 62 +++++++++++++++++++
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/common/Image.svelte
 create mode 100644 src/lib/components/common/ImagePreview.svelte

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index e9dedc12..5af3a47e 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -20,6 +20,7 @@
 	import ProfileImage from './ProfileImage.svelte';
 	import Skeleton from './Skeleton.svelte';
 	import CodeBlock from './CodeBlock.svelte';
+	import Image from '$lib/components/common/Image.svelte';
 
 	export let modelfiles = [];
 	export let message;
@@ -46,7 +47,6 @@
 	let speakingIdx = null;
 
 	let loadingSpeech = false;
-
 	let generatingImage = false;
 
 	$: tokens = marked.lexer(message.content);
@@ -323,7 +323,7 @@
 						{#each message.files as file}
 							<div>
 								{#if file.type === 'image'}
-									<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
+									<Image src={file.url} />
 								{/if}
 							</div>
 						{/each}
diff --git a/src/lib/components/common/Image.svelte b/src/lib/components/common/Image.svelte
new file mode 100644
index 00000000..566ebb5b
--- /dev/null
+++ b/src/lib/components/common/Image.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import ImagePreview from './ImagePreview.svelte';
+
+	export let src = '';
+	export let alt = '';
+
+	let showImagePreview = false;
+</script>
+
+<ImagePreview bind:show={showImagePreview} {src} {alt} />
+<button
+	on:click={() => {
+		console.log('image preview');
+		showImagePreview = true;
+	}}
+>
+	<img {src} {alt} class=" max-h-96 rounded-lg" draggable="false" />
+</button>
diff --git a/src/lib/components/common/ImagePreview.svelte b/src/lib/components/common/ImagePreview.svelte
new file mode 100644
index 00000000..cf69327f
--- /dev/null
+++ b/src/lib/components/common/ImagePreview.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	export let show = false;
+	export let src = '';
+	export let alt = '';
+</script>
+
+{#if show}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
+	>
+		<div class=" absolute left-0 w-full flex justify-between">
+			<div>
+				<button
+					class=" p-5"
+					on:click={() => {
+						show = false;
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="w-6 h-6"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+
+			<div>
+				<button
+					class=" p-5"
+					on:click={() => {
+						const a = document.createElement('a');
+						a.href = src;
+						a.download = 'Image.png';
+						a.click();
+					}}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="w-6 h-6"
+					>
+						<path
+							d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
+						/>
+						<path
+							d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+		<img {src} {alt} class=" mx-auto h-full object-scale-down" />
+	</div>
+{/if}