Add "disable streaming tokens" settings & remove media query (#1299)

src/lib/components/chat/ChatMessage.svelte

@@ -2,7 +2,7 @@
 	import { marked, type MarkedOptions } from "marked";
 	import markedKatex from "marked-katex-extension";
 	import type { Message, MessageFile } from "$lib/types/Message";
-	import { afterUpdate, createEventDispatcher, onMount, tick } from "svelte";
+	import { afterUpdate, createEventDispatcher, tick } from "svelte";
 	import { deepestChild } from "$lib/utils/deepestChild";
 	import { page } from "$app/stores";
 
@@ -30,9 +30,9 @@
 	} from "$lib/types/MessageUpdate";
 	import { base } from "$app/paths";
 	import { useConvTreeStore } from "$lib/stores/convTree";
-	import { isReducedMotion } from "$lib/utils/isReduceMotion";
 	import Modal from "../Modal.svelte";
 	import ToolUpdate from "./ToolUpdate.svelte";
+	import { useSettingsStore } from "$lib/stores/settings";
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -80,9 +80,6 @@
 	let isCopied = false;
 
 	let initialized = false;
-
-	let reducedMotionMode = false;
-
 	const renderer = new marked.Renderer();
 	// For code blocks with simple backticks
 	renderer.codespan = (code) => {
@@ -118,12 +115,10 @@
 	$: emptyLoad =
 		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));
 
-	onMount(() => {
-		reducedMotionMode = isReducedMotion(window);
-	});
+	const settings = useSettingsStore();
 
 	afterUpdate(() => {
-		if (reducedMotionMode) {
+		if ($settings.disableStream) {
 			return;
 		}
 
@@ -301,7 +296,7 @@
 				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}
+				{#if isLast && loading && $settings.disableStream}
 					<IconLoading classNames="loading inline ml-2 first:ml-0" />
 				{/if}
 				{#each tokens as token}

src/lib/stores/settings.ts

@@ -16,6 +16,7 @@ type SettingsStore = {
 	recentlySaved: boolean;
 	assistants: Array<ObjectId | string>;
 	tools?: Record<string, boolean>;
+	disableStream: boolean;
 };
 
 type SettingsStoreWritable = Writable<SettingsStore> & {

src/lib/types/Settings.ts

@@ -22,8 +22,10 @@ export interface Settings extends Timestamps {
 
 	assistants?: Assistant["_id"][];
 	tools?: Record<string, boolean>;
+	disableStream: boolean;
 }
 
+export type SettingsEditable = Omit<Settings, "ethicsModalAcceptedAt" | "createdAt" | "updatedAt">;
 // TODO: move this to a constant file along with other constants
 export const DEFAULT_SETTINGS = {
 	shareConversationsWithModelAuthors: true,
@@ -32,4 +34,5 @@ export const DEFAULT_SETTINGS = {
 	customPrompts: {},
 	assistants: [],
 	tools: {},
-};
+	disableStream: false,
+} satisfies SettingsEditable;

src/lib/utils/isReduceMotion.ts

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

src/routes/+layout.server.ts

@@ -147,6 +147,7 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 			customPrompts: settings?.customPrompts ?? {},
 			assistants: userAssistants,
 			tools: settings?.tools ?? {},
+			disableStream: settings?.disableStream ?? DEFAULT_SETTINGS.disableStream,
 		},
 		models: models.map((model) => ({
 			id: model.id,

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

@@ -23,7 +23,6 @@
 	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;
@@ -80,8 +79,6 @@
 			$isAborted = false;
 			loading = true;
 			pending = true;
-			const reducedMotionMode = isReducedMotion(window);
-
 			const base64Files = await Promise.all(
 				(files ?? []).map((file) =>
 					file2base64(file).then((value) => ({
@@ -237,7 +234,7 @@
 
 				messageUpdates.push(update);
 
-				if (update.type === MessageUpdateType.Stream && !reducedMotionMode) {
+				if (update.type === MessageUpdateType.Stream && !$settings.disableStream) {
 					messageToWriteTo.content += update.token;
 					pending = false;
 					messages = [...messages];

src/routes/settings/(nav)/+page.svelte

@@ -46,6 +46,14 @@
 			</div>
 		</label>
 
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label class="mt-6 flex items-center">
+			<Switch name="disableStream" bind:checked={$settings.disableStream} />
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
+				Disable streaming tokens
+			</div>
+		</label>
+
 		<div class="mt-12 flex flex-col gap-3">
 			<a
 				href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"

src/routes/settings/(nav)/+server.ts

@@ -1,7 +1,7 @@
 import { collections } from "$lib/server/database";
 import { z } from "zod";
 import { authCondition } from "$lib/server/auth";
-import { DEFAULT_SETTINGS } from "$lib/types/Settings";
+import { DEFAULT_SETTINGS, type SettingsEditable } from "$lib/types/Settings";
 
 export async function POST({ request, locals }) {
 	const body = await request.json();
@@ -16,8 +16,9 @@ export async function POST({ request, locals }) {
 			activeModel: z.string().default(DEFAULT_SETTINGS.activeModel),
 			customPrompts: z.record(z.string()).default({}),
 			tools: z.record(z.boolean()).optional(),
+			disableStream: z.boolean().default(false),
 		})
-		.parse(body);
+		.parse(body) satisfies SettingsEditable;
 
 	await collections.settings.updateOne(
 		authCondition(locals),