Disable text streaming if user prefers reduced animation (#1131)

* Disable text streaming if user prefers reduced animation

* Simplify filtering of stream updates

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

src/lib/components/chat/ChatMessage.svelte

@@ -37,6 +37,7 @@
 	import type { ToolFront } from "$lib/types/Tool";
 	import { base } from "$app/paths";
 	import { useConvTreeStore } from "$lib/stores/convTree";
+	import { isReducedMotion } from "$lib/utils/isReduceMotion";
 	import Modal from "../Modal.svelte";
 	import { toolHasName } from "$lib/utils/tools";
 
@@ -87,6 +88,7 @@
 
 	let initialized = false;
 
+	const reducedMotionMode = isReducedMotion(window);
 	const renderer = new marked.Renderer();
 	// For code blocks with simple backticks
 	renderer.codespan = (code) => {
@@ -123,6 +125,10 @@
 		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));
 
 	afterUpdate(() => {
+		if (reducedMotionMode) {
+			return;
+		}
+
 		loadingEl?.$destroy();
 		clearTimeout(pendingTimeout);
 
@@ -364,6 +370,9 @@
 				class="prose max-w-none max-sm:prose-sm dark:prose-invert prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
 				bind:this={contentEl}
 			>
+				{#if isLast && loading && reducedMotionMode}
+					<IconLoading classNames="loading inline ml-2 first:ml-0" />
+				{/if}
 				{#each tokens as token}
 					{#if token.type === "code"}
 						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />

src/lib/utils/isReduceMotion.ts

@@ -0,0 +1,5 @@
+export function isReducedMotion(window: Window) {
+	const { matchMedia } = window;
+
+	return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}

src/routes/conversation/[id]/+page.svelte

@@ -23,6 +23,7 @@
 	import { fetchMessageUpdates } from "$lib/utils/messageUpdates";
 	import { createConvTreeStore } from "$lib/stores/convTree";
 	import type { v4 } from "uuid";
+	import { isReducedMotion } from "$lib/utils/isReduceMotion.js";
 	import { useSettingsStore } from "$lib/stores/settings.js";
 
 	export let data;
@@ -79,6 +80,7 @@
 			$isAborted = false;
 			loading = true;
 			pending = true;
+			const reducedMotionMode = isReducedMotion(window);
 
 			const base64Files = await Promise.all(
 				(files ?? []).map((file) =>
@@ -215,6 +217,7 @@
 			files = [];
 
 			const messageUpdates: MessageUpdate[] = [];
+
 			for await (const update of messageUpdatesIterator) {
 				if ($isAborted) {
 					messageUpdatesAbortController.abort();
@@ -234,9 +237,8 @@
 
 				messageUpdates.push(update);
 
-				if (update.type === MessageUpdateType.Stream) {
+				if (update.type === MessageUpdateType.Stream && !reducedMotionMode) {
 					pending = false;
-					messageToWriteTo.content += update.token;
 					messages = [...messages];
 				} else if (
 					update.type === MessageUpdateType.WebSearch ||