From fcb93f3155bfe00c134e10337cd84838602a15f1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 17 May 2025 00:27:20 +0400
Subject: [PATCH] feat: artifacts download button

---
 src/lib/components/chat/Artifacts.svelte | 29 +++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/Artifacts.svelte b/src/lib/components/chat/Artifacts.svelte
index 180ed7277..4dafea55e 100644
--- a/src/lib/components/chat/Artifacts.svelte
+++ b/src/lib/components/chat/Artifacts.svelte
@@ -5,12 +5,14 @@
 	const dispatch = createEventDispatcher();
 
 	import { artifactCode, chatId, settings, showArtifacts, showControls } from '$lib/stores';
-	import XMark from '../icons/XMark.svelte';
 	import { copyToClipboard, createMessagesList } from '$lib/utils';
+
+	import XMark from '../icons/XMark.svelte';
 	import ArrowsPointingOut from '../icons/ArrowsPointingOut.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import SvgPanZoom from '../common/SVGPanZoom.svelte';
 	import ArrowLeft from '../icons/ArrowLeft.svelte';
+	import ArrowDownTray from '../icons/ArrowDownTray.svelte';
 
 	export let overlay = false;
 	export let history;
@@ -180,6 +182,18 @@
 		}
 	};
 
+	const downloadArtifact = () => {
+		const blob = new Blob([contents[selectedContentIdx].content], { type: 'text/html' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `artifact-${$chatId}-${selectedContentIdx}.html`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	};
+
 	onMount(() => {
 		artifactCode.subscribe((value) => {
 			if (contents) {
@@ -205,7 +219,7 @@
 					<ArrowLeft className="size-3.5  text-gray-900 dark:text-white" />
 				</button>
 
-				<div class="flex-1 flex items-center justify-between">
+				<div class="flex-1 flex items-center justify-between pr-1">
 					<div class="flex items-center space-x-2">
 						<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
 							<button
@@ -259,7 +273,7 @@
 						</div>
 					</div>
 
-					<div class="flex items-center gap-1">
+					<div class="flex items-center gap-1.5">
 						<button
 							class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
 							on:click={() => {
@@ -272,6 +286,15 @@
 							}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
 						>
 
+						<Tooltip content={$i18n.t('Download')}>
+							<button
+								class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
+								on:click={downloadArtifact}
+							>
+								<ArrowDownTray className="size-3.5" />
+							</button>
+						</Tooltip>
+
 						{#if contents[selectedContentIdx].type === 'iframe'}
 							<Tooltip content={$i18n.t('Open in full screen')}>
 								<button