fix: add custom loading icon for reasoning ui

huggingface · Dec 3, 2024 · 2b53dcf · 2b53dcf
1 parent 7579437
commit 2b53dcf
Showing 1 changed file with 23 additions and 21 deletions.
diff --git a/src/lib/components/chat/OpenReasoningResults.svelte b/src/lib/components/chat/OpenReasoningResults.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import IconThought from "~icons/carbon/circle-packing";
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 
 	export let summary: string;
@@ -16,27 +15,30 @@
 		<div
 			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
 		>
-			<svg
-				class="absolute inset-0 text-gray-300 transition-opacity dark:text-gray-700 {loading
-					? 'opacity-100'
-					: 'opacity-0'}"
-				width="40"
-				height="40"
-				viewBox="0 0 38 38"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					class="loading-path"
-					d="M8 2.5H30C30 2.5 35.5 2.5 35.5 8V30C35.5 30 35.5 35.5 30 35.5H8C8 35.5 2.5 35.5 2.5 30V8C2.5 8 2.5 2.5 8 2.5Z"
-					stroke="currentColor"
-					stroke-width="1"
-					stroke-linecap="round"
-					id="shape"
-				/>
-			</svg>
+			<div class="grid h-dvh place-items-center">
+				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+					<path
+						class="stroke-gray-600 dark:stroke-gray-400"
+						style="stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round;"
+						d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
+					/>
 
-			<IconThought class="text-[1rem]" />
+					{#if loading}
+						<path
+							class="animate-pulse stroke-purple-700"
+							style="stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50;"
+							d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
+						>
+							<animate
+								attributeName="stroke-dashoffset"
+								values="0;500"
+								dur="12s"
+								repeatCount="indefinite"
+							/>
+						</path>
+					{/if}
+				</svg>
+			</div>
 		</div>
 		<dl class="leading-4">
 			<dd class="text-sm">Reasoning</dd>