diff --git a/src/lib/components/chat/Artifacts.svelte b/src/lib/components/chat/Artifacts.svelte new file mode 100644 index 000000000..9ccc8f417 --- /dev/null +++ b/src/lib/components/chat/Artifacts.svelte @@ -0,0 +1,212 @@ + + +
+
+ {#if overlay} +
+ {/if} + +
+ +
+ +
+
+ {#if contents.length > 0} +
+ +
+ {:else} +
No HTML, CSS, or JavaScript content found.
+ {/if} +
+
+
+ + {#if contents.length > 0} +
+
+
+ + +
+ Version {selectedContentIdx + 1} of {contents.length} +
+ + +
+
+
+ {/if} +
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 10193a063..ba855dec8 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -2088,6 +2088,7 @@ bind:files bind:pane={controlPane} chatId={$chatId} + messages={createMessagesList(history.currentId)} modelId={selectedModelIds?.at(0) ?? null} models={selectedModelIds.reduce((a, e, i, arr) => { const model = $models.find((m) => m.id === e); diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte index 37544b2a8..96d168fe9 100644 --- a/src/lib/components/chat/ChatControls.svelte +++ b/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 @@ }} >
{#if $showCallOverlay}
+ {:else if $showArtifacts} + {:else if $showOverview}
@@ -175,6 +194,8 @@ }} />
+ {:else if $showArtifacts} + {:else if $showOverview} + export let className = 'size-4'; + export let strokeWidth = '2'; + + + + + diff --git a/src/lib/components/layout/Navbar/Menu.svelte b/src/lib/components/layout/Navbar/Menu.svelte index 6be8c93ce..3e81da662 100644 --- a/src/lib/components/layout/Navbar/Menu.svelte +++ b/src/lib/components/layout/Navbar/Menu.svelte @@ -1,4 +1,5 @@