enh: chatFadeStreamingText toggle

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -804,7 +804,9 @@
 										floatingButtons={message?.done && !readOnly}
 										save={!readOnly}
 										preview={!readOnly}
-										done={message?.done ?? false}
+										done={($settings?.chatFadeStreamingText ?? true)
+											? (message?.done ?? false)
+											: true}
 										{model}
 										onTaskClick={async (e) => {
 											console.log(e);

src/lib/components/chat/Settings/Interface.svelte

@@ -49,6 +49,7 @@
 	let ctrlEnterToSend = false;
 	let copyFormatted = false;
 
+	let chatFadeStreamingText = true;
 	let collapseCodeBlocks = false;
 	let expandDetails = false;
 
@@ -159,6 +160,11 @@
 		saveSettings({ imageCompression });
 	};
 
+	const toggleChatFadeStreamingText = async () => {
+		chatFadeStreamingText = !chatFadeStreamingText;
+		saveSettings({ chatFadeStreamingText: chatFadeStreamingText });
+	};
+
 	const toggleHapticFeedback = async () => {
 		hapticFeedback = !hapticFeedback;
 		saveSettings({ hapticFeedback: hapticFeedback });
@@ -313,6 +319,8 @@
 		showEmojiInCall = $settings?.showEmojiInCall ?? false;
 		voiceInterruption = $settings?.voiceInterruption ?? false;
 
+		chatFadeStreamingText = $settings?.chatFadeStreamingText ?? true;
+
 		richTextInput = $settings?.richTextInput ?? true;
 		insertPromptAsRichText = $settings?.insertPromptAsRichText ?? false;
 		promptAutocomplete = $settings?.promptAutocomplete ?? false;
@@ -746,6 +754,29 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div id="fade-streaming-label" class=" self-center text-xs">
+						{$i18n.t('Fade Effect for Streaming Text')}
+					</div>
+
+					<button
+						aria-labelledby="fade-streaming-label"
+						class="p-1 px-3 text-xs flex rounded-sm transition"
+						on:click={() => {
+							toggleChatFadeStreamingText();
+						}}
+						type="button"
+					>
+						{#if chatFadeStreamingText === true}
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div id="rich-input-label" class=" self-center text-xs">