feat: artifacts

Co-Authored-By: Andrew Tait Gehrhardt <134739775+atgehrhardt@users.noreply.github.com>

src/lib/components/chat/ChatControls.svelte

@@ -3,7 +3,7 @@
 	import { slide } from 'svelte/transition';
 
 	import { onDestroy, onMount, tick } from 'svelte';
-	import { mobile, showControls, showCallOverlay, showOverview } from '$lib/stores';
+	import { mobile, showControls, showCallOverlay, showOverview, showArtifacts } from '$lib/stores';
 
 	import Modal from '../common/Modal.svelte';
 	import Controls from './Controls/Controls.svelte';
@@ -12,12 +12,14 @@
 	import Overview from './Overview.svelte';
 	import { Pane, PaneResizer } from 'paneforge';
 	import EllipsisVertical from '../icons/EllipsisVertical.svelte';
-	import { get } from 'svelte/store';
+	import Artifacts from './Artifacts.svelte';
 
 	export let history;
 	export let models = [];
 
 	export let chatId = null;
+	export let messages = [];
+
 	export let chatFiles = [];
 	export let params = {};
 
@@ -29,44 +31,57 @@
 	export let modelId;
 
 	export let pane;
+
+	let mediaQuery;
 	let largeScreen = false;
+	let dragged = false;
+
+	const handleMediaQuery = async (e) => {
+		if (e.matches) {
+			largeScreen = true;
+
+			if ($showCallOverlay) {
+				showCallOverlay.set(false);
+				await tick();
+				showCallOverlay.set(true);
+			}
+		} else {
+			largeScreen = false;
+
+			if ($showCallOverlay) {
+				showCallOverlay.set(false);
+				await tick();
+				showCallOverlay.set(true);
+			}
+			pane = null;
+		}
+	};
+
+	const onMouseDown = (event) => {
+		dragged = true;
+	};
+
+	const onMouseUp = (event) => {
+		dragged = false;
+	};
 
 	onMount(() => {
 		// listen to resize 1024px
-		const mediaQuery = window.matchMedia('(min-width: 1024px)');
-
-		const handleMediaQuery = async (e) => {
-			if (e.matches) {
-				largeScreen = true;
-
-				if ($showCallOverlay) {
-					showCallOverlay.set(false);
-					await tick();
-					showCallOverlay.set(true);
-				}
-			} else {
-				largeScreen = false;
-
-				if ($showCallOverlay) {
-					showCallOverlay.set(false);
-					await tick();
-					showCallOverlay.set(true);
-				}
-				pane = null;
-			}
-		};
+		mediaQuery = window.matchMedia('(min-width: 1024px)');
 
 		mediaQuery.addEventListener('change', handleMediaQuery);
-
 		handleMediaQuery(mediaQuery);
 
-		return () => {
-			mediaQuery.removeEventListener('change', handleMediaQuery);
-		};
+		document.addEventListener('mousedown', onMouseDown);
+		document.addEventListener('mouseup', onMouseUp);
 	});
 
 	onDestroy(() => {
 		showControls.set(false);
+
+		mediaQuery.removeEventListener('change', handleMediaQuery);
+		document.removeEventListener('mousedown', onMouseDown);
+		document.removeEventListener('mouseup', onMouseUp);
 	});
 
 	$: if (!chatId) {
@@ -84,7 +99,9 @@
 				}}
 			>
 				<div
-					class=" {$showCallOverlay || $showOverview ? ' h-screen  w-screen' : 'px-6 py-4'} h-full"
+					class=" {$showCallOverlay || $showOverview || $showArtifacts
+						? ' h-screen  w-screen'
+						: 'px-6 py-4'} h-full"
 				>
 					{#if $showCallOverlay}
 						<div
@@ -102,6 +119,8 @@
 								}}
 							/>
 						</div>
+					{:else if $showArtifacts}
+						<Artifacts {messages} />
 					{:else if $showOverview}
 						<Overview
 							{history}
@@ -157,7 +176,7 @@
 			{#if $showControls}
 				<div class="pr-4 pb-8 flex max-h-full min-h-full">
 					<div
-						class="w-full {$showOverview && !$showCallOverlay
+						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-50 pointer-events-auto overflow-y-auto scrollbar-hidden"
 					>
@@ -175,6 +194,8 @@
 									}}
 								/>
 							</div>
+						{:else if $showArtifacts}
+							<Artifacts {messages} overlay={dragged} />
 						{:else if $showOverview}
 							<Overview
 								{history}