feat: add time indicator and make the ui match websearch

src/lib/components/chat/OpenReasoningResults.svelte

@@ -16,7 +16,27 @@
 		<div
 			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
 		>
-			<IconThought class="text-lg {loading ? 'animate-spin-slow' : ''}" />
+			<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>
+
+			<IconThought class="text-[1rem]" />
 		</div>
 		<dl class="leading-4">
 			<dd class="text-sm">Reasoning</dd>
@@ -41,16 +61,14 @@
 		display: none;
 	}
 
-	:global(.animate-spin-slow) {
-		animation: spin 3s linear infinite;
+	.loading-path {
+		stroke-dasharray: 61.45;
+		animation: loading 2s linear infinite;
 	}
 
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
+	@keyframes loading {
 		to {
-			transform: rotate(360deg);
+			stroke-dashoffset: 122.9;
 		}
 	}
 </style>

src/lib/server/textGeneration/generate.ts

@@ -22,6 +22,7 @@ export async function* generate(
 	let reasoningBuffer = "";
 	let lastReasoningUpdate = new Date();
 	let status = "";
+	const startTime = new Date();
 	if (
 		model.reasoning &&
 		(model.reasoning.type === "regex" || model.reasoning.type === "summarize")
@@ -90,7 +91,7 @@ Do not use prefixes such as Response: or Answer: when answering to the user.`,
 				yield {
 					type: MessageUpdateType.Reasoning,
 					subtype: MessageReasoningUpdateType.Status,
-					status: "Done reasoning.",
+					status: `Done in ${Math.round((new Date().getTime() - startTime.getTime()) / 1000)}s.`,
 				};
 			}
 
@@ -118,7 +119,7 @@ Do not use prefixes such as Response: or Answer: when answering to the user.`,
 				yield {
 					type: MessageUpdateType.Reasoning,
 					subtype: MessageReasoningUpdateType.Status,
-					status: "Done reasoning.",
+					status: `Done in ${Math.round((new Date().getTime() - startTime.getTime()) / 1000)}s.`,
 				};
 			}
 		}