ui: added single line reasoning preview (#23601)

* webui: added single line reasoning preview. * patch: reduce width slightly for the previewing section * refactor: move formatter constants to the right file * feat: reimplement reasoning preview with throttled dynamic per-line rendering * chore: fix spacing Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * chore: refactor to requested changes * refactor: grouped by capture pattern instead of block-level + inline * ui: fax interrupt state only trigger for 1st reasoning message * chore: make reasoning preview respects showThoughtInProgress setting * chore; newline at EOF Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com> * fix: thread rawContent so collapsible content can handle compute preview * patch: showThoughtInProgress accidentally blocks rawContent being passed * chore: fix lint * chore: change smoke test --------- Co-authored-by: Aleksander Grygier <aleksander.grygier@gmail.com>
2026-06-04 16:09:43 +02:00
parent 0dbfa66a1f
commit 526977068f
7 changed files with 161 additions and 13 deletions
@@ -0,0 +1,32 @@
+/**
+ * Creates a reactive throttle key that increments when `getValue()` changes
+ * and the throttle window has elapsed since the last increment.
+ *
+ * Useful for throttling animations that should not fire on every rapid update.
+ *
+ * @param getValue - A reactive getter for the value to watch
+ * @param ms - Throttle window in milliseconds
+ * @returns A reactive number that increments when the throttled value changes
+ */
+export function useThrottle(getValue: () => string | undefined, ms: number) {
+	let key = $state(0);
+	let throttleEnd = $state(0);
+	let lastValue: string | undefined = getValue();
+
+	$effect(() => {
+		const value = getValue();
+		if (value === lastValue) return;
+		const now = Date.now();
+		if (now >= throttleEnd) {
+			lastValue = value;
+			key++;
+			throttleEnd = now + ms;
+		}
+	});
+
+	return {
+		get key() {
+			return key;
+		}
+	};
+}