From d68ba284db85670fe6cd4659a53dee2b19d7fc34 Mon Sep 17 00:00:00 2001 From: Timothy Jaeryang Baek Date: Sun, 26 Oct 2025 19:23:55 -0700 Subject: [PATCH] refac: chat navbar menu --- src/lib/components/chat/Artifacts.svelte | 133 +++---------------- src/lib/components/chat/Chat.svelte | 69 +++++++++- src/lib/components/layout/Navbar/Menu.svelte | 33 ++--- src/lib/stores/index.ts | 4 +- src/lib/utils/index.ts | 62 ++++++++- 5 files changed, 165 insertions(+), 136 deletions(-) diff --git a/src/lib/components/chat/Artifacts.svelte b/src/lib/components/chat/Artifacts.svelte index 188b476839..bf0681dc19 100644 --- a/src/lib/components/chat/Artifacts.svelte +++ b/src/lib/components/chat/Artifacts.svelte @@ -4,7 +4,14 @@ const i18n = getContext('i18n'); const dispatch = createEventDispatcher(); - import { artifactCode, chatId, settings, showArtifacts, showControls } from '$lib/stores'; + import { + artifactCode, + chatId, + settings, + showArtifacts, + showControls, + artifactContents + } from '$lib/stores'; import { copyToClipboard, createMessagesList } from '$lib/utils'; import XMark from '../icons/XMark.svelte'; @@ -15,8 +22,6 @@ import Download from '../icons/Download.svelte'; export let overlay = false; - export let history; - let messages = []; let contents: Array<{ type: string; content: string }> = []; let selectedContentIdx = 0; @@ -24,121 +29,11 @@ let copied = false; let iframeElement: HTMLIFrameElement; - $: if (history) { - messages = createMessagesList(history, history.currentId); - getContents(); - } else { - messages = []; - getContents(); - } - - const getContents = () => { - contents = []; - messages.forEach((message) => { - if (message?.role !== 'user' && message?.content) { - const codeBlockContents = message.content.match(/```[\s\S]*?```/g); - let codeBlocks = []; - - let htmlContent = ''; - let cssContent = ''; - let jsContent = ''; - - if (codeBlockContents) { - codeBlockContents.forEach((block) => { - const lang = block.split('\n')[0].replace('```', '').trim().toLowerCase(); - const code = block.replace(/```[\s\S]*?\n/, '').replace(/```$/, ''); - codeBlocks.push({ lang, code }); - }); - - codeBlocks.forEach((block) => { - const { lang, code } = block; - - if (lang === 'html') { - htmlContent += code + '\n'; - } else if (lang === 'css') { - cssContent += code + '\n'; - } else if (lang === 'javascript' || lang === 'js') { - jsContent += code + '\n'; - } - }); - } else { - const inlineHtml = message.content.match(/[\s\S]*?<\/html>/gi); - const inlineCss = message.content.match(/