From 9c96f896d0c6d07bbb2c27a1e28a938363e7bf35 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 17 Jan 2025 22:21:10 -0800
Subject: [PATCH] refac: show installation progress

---
 src/render/lib/components/Main.svelte       | 29 ++++++---------
 src/render/lib/components/setup/Logs.svelte | 41 +++++++++++++++++++++
 2 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/render/lib/components/setup/Logs.svelte

diff --git a/src/render/lib/components/Main.svelte b/src/render/lib/components/Main.svelte
index 15836ab..4b8c575 100644
--- a/src/render/lib/components/Main.svelte
+++ b/src/render/lib/components/Main.svelte
@@ -4,6 +4,7 @@
 
 	import { installStatus, serverStatus, serverStartedAt, serverLogs } from '../stores';
 
+	import Logs from './setup/Logs.svelte';
 	import Spinner from './common/Spinner.svelte';
 	import ArrowRightCircle from './icons/ArrowRightCircle.svelte';
 
@@ -105,15 +106,7 @@
 						</div>
 					{/if}
 
-					{#if showLogs}
-						<div
-							class="text-xs font-mono text-left max-h-60 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
-						>
-							{#each $serverLogs.reverse() as log, idx}
-								<div class="text-xs font-mono">{log}</div>
-							{/each}
-						</div>
-					{/if}
+					<Logs show={showLogs} logs={$serverLogs} />
 				</div>
 
 				<div class="absolute bottom-0 pb-10">
@@ -134,6 +127,14 @@
 										This might take a few minutes, We’ll notify you when it’s
 										ready.
 									</div>
+
+									{#if $serverLogs.length > 0}
+										<div
+											class="text-[0.5rem] text-gray-500 font-mono text-center line-clamp-1 px-10"
+										>
+											{$serverLogs.at(-1)}
+										</div>
+									{/if}
 								</div>
 							{:else if mounted}
 								<button
@@ -185,15 +186,7 @@
 								{/if}
 							{/if}
 
-							{#if showLogs}
-								<div
-									class="text-xs font-mono text-left max-h-60 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
-								>
-									{#each $serverLogs.reverse() as log, idx}
-										<div class="text-xs font-mono">{log}</div>
-									{/each}
-								</div>
-							{/if}
+							<Logs show={showLogs} logs={$serverLogs} />
 						</div>
 					</div>
 				</div>
diff --git a/src/render/lib/components/setup/Logs.svelte b/src/render/lib/components/setup/Logs.svelte
new file mode 100644
index 0000000..86a3781
--- /dev/null
+++ b/src/render/lib/components/setup/Logs.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import Tooltip from '../common/Tooltip.svelte';
+
+	export let show;
+	export let logs = [];
+</script>
+
+{#if show}
+	<div class="relative max-w-full px-3">
+		{#if logs.length > 0}
+			<div class="absolute top-0 right-0 p-1 bg-transparent text-xs font-mono">
+				<Tooltip content="Copy">
+					<button class="text-xs cursor-pointer" on:click={() => (logs = [])}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2.3"
+							stroke="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
+							/>
+						</svg>
+					</button>
+				</Tooltip>
+			</div>
+		{/if}
+
+		<div
+			class="text-xs font-mono text-left max-h-40 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
+		>
+			{#each logs.reverse() as log, idx}
+				<div class="text-xs font-mono">{log}</div>
+			{/each}
+		</div>
+	</div>
+{/if}