From 7f37b9340d99697e0c0720930d9c4166407d2099 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 8 Oct 2024 15:35:35 -0700
Subject: [PATCH] enh: artifacts, overview back button

Co-Authored-By: Thomas Nordentoft <60035638+nordwestt@users.noreply.github.com>
---
 src/lib/components/chat/Artifacts.svelte      | 14 +++++++++++++-
 src/lib/components/chat/ChatControls.svelte   |  2 +-
 .../components/chat/Controls/Controls.svelte  |  6 +++---
 src/lib/components/chat/Overview.svelte       | 19 +++++++++++++++----
 src/lib/components/icons/ArrowLeft.svelte     | 15 +++++++++++++++
 5 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/icons/ArrowLeft.svelte

diff --git a/src/lib/components/chat/Artifacts.svelte b/src/lib/components/chat/Artifacts.svelte
index 92bb57582..d07550ed8 100644
--- a/src/lib/components/chat/Artifacts.svelte
+++ b/src/lib/components/chat/Artifacts.svelte
@@ -10,6 +10,7 @@
 	import ArrowsPointingOut from '../icons/ArrowsPointingOut.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import SvgPanZoom from '../common/SVGPanZoom.svelte';
+	import ArrowLeft from '../icons/ArrowLeft.svelte';
 
 	export let overlay = false;
 	export let history;
@@ -183,6 +184,17 @@
 			<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
 		{/if}
 
+		<div class="absolute pointer-events-none z-50 w-full flex items-center justify-start p-4">
+			<button
+				class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
+				on:click={() => {
+					showArtifacts.set(false);
+				}}
+			>
+				<ArrowLeft className="size-3.5" />
+			</button>
+		</div>
+
 		<div class=" absolute pointer-events-none z-50 w-full flex items-center justify-end p-4">
 			<button
 				class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
@@ -192,7 +204,7 @@
 					showArtifacts.set(false);
 				}}
 			>
-				<XMark className="size-3 text-gray-900 dark:text-white" />
+				<XMark className="size-3.5 text-gray-900 dark:text-white" />
 			</button>
 		</div>
 
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 45d9b93dc..4c75c6b2d 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -187,7 +187,7 @@
 					<div
 						class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
 							? ' '
-							: 'px-5 py-4 bg-white dark:shadow-lg dark:bg-gray-850  border border-gray-50 dark:border-gray-800'}  rounded-lg z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
+							: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850  border border-gray-50 dark:border-gray-800'}  rounded-lg z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
 					>
 						{#if $showCallOverlay}
 							<div class="w-full h-full flex justify-center">
diff --git a/src/lib/components/chat/Controls/Controls.svelte b/src/lib/components/chat/Controls/Controls.svelte
index 25924535a..aba1e7374 100644
--- a/src/lib/components/chat/Controls/Controls.svelte
+++ b/src/lib/components/chat/Controls/Controls.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div class=" dark:text-white">
-	<div class=" flex justify-between dark:text-gray-100 mb-2">
+	<div class=" flex items-center justify-between dark:text-gray-100 mb-2">
 		<div class=" text-lg font-medium self-center font-primary">{$i18n.t('Chat Controls')}</div>
 		<button
 			class="self-center"
@@ -24,11 +24,11 @@
 				dispatch('close');
 			}}
 		>
-			<XMark className="size-4" />
+			<XMark className="size-3.5" />
 		</button>
 	</div>
 
-	<div class=" dark:text-gray-200 text-sm font-primary py-0.5">
+	<div class=" dark:text-gray-200 text-sm font-primary py-0.5 px-0.5">
 		{#if chatFiles.length > 0}
 			<Collapsible title={$i18n.t('Files')} open={true}>
 				<div class="flex flex-col gap-1 mt-1.5" slot="content">
diff --git a/src/lib/components/chat/Overview.svelte b/src/lib/components/chat/Overview.svelte
index 0dba53ea0..5592e0139 100644
--- a/src/lib/components/chat/Overview.svelte
+++ b/src/lib/components/chat/Overview.svelte
@@ -15,6 +15,7 @@
 	import CustomNode from './Overview/Node.svelte';
 	import Flow from './Overview/Flow.svelte';
 	import XMark from '../icons/XMark.svelte';
+	import ArrowLeft from '../icons/ArrowLeft.svelte';
 
 	const { width, height } = useStore();
 
@@ -159,16 +160,26 @@
 </script>
 
 <div class="w-full h-full relative">
-	<div class=" absolute z-50 w-full flex justify-between dark:text-gray-100 px-5 py-4">
-		<div class=" text-lg font-medium self-center font-primary">{$i18n.t('Chat Overview')}</div>
+	<div class=" absolute z-50 w-full flex justify-between dark:text-gray-100 px-4 py-3.5">
+		<div class="flex items-center gap-2.5">
+			<button
+				class="self-center p-0.5"
+				on:click={() => {
+					showOverview.set(false);
+				}}
+			>
+				<ArrowLeft className="size-3.5" />
+			</button>
+			<div class=" text-lg font-medium self-center font-primary">{$i18n.t('Chat Overview')}</div>
+		</div>
 		<button
-			class="self-center"
+			class="self-center p-0.5"
 			on:click={() => {
 				dispatch('close');
 				showOverview.set(false);
 			}}
 		>
-			<XMark className="size-4" />
+			<XMark className="size-3.5" />
 		</button>
 	</div>
 
diff --git a/src/lib/components/icons/ArrowLeft.svelte b/src/lib/components/icons/ArrowLeft.svelte
new file mode 100644
index 000000000..166aee7f6
--- /dev/null
+++ b/src/lib/components/icons/ArrowLeft.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+</svg>