From 853cf82ed8a2b5fb94a9e0d5729f60c409b4c1e1 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 18 Jul 2025 16:38:43 +0400
Subject: [PATCH] enh: text fade in effect

---
 .../chat/Messages/ContentRenderer.svelte      |  2 ++
 .../components/chat/Messages/Markdown.svelte  |  2 ++
 .../Markdown/MarkdownInlineTokens.svelte      |  4 +++-
 .../MarkdownInlineTokens/TextToken.svelte     | 19 ++++++++++++++++++
 .../Messages/Markdown/MarkdownTokens.svelte   | 20 +++++++++++++++++--
 .../chat/Messages/ResponseMessage.svelte      |  1 +
 6 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte

diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index 613c1670a0..54cd2a5aab 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -20,6 +20,7 @@
 	export let history;
 	export let selectedModels = [];
 
+	export let done = true;
 	export let model = null;
 	export let sources = null;
 
@@ -133,6 +134,7 @@
 		{model}
 		{save}
 		{preview}
+		{done}
 		sourceIds={(sources ?? []).reduce((acc, s) => {
 			let ids = [];
 			s.document.forEach((document, index) => {
diff --git a/src/lib/components/chat/Messages/Markdown.svelte b/src/lib/components/chat/Messages/Markdown.svelte
index 0130718334..96ec6e06ba 100644
--- a/src/lib/components/chat/Messages/Markdown.svelte
+++ b/src/lib/components/chat/Messages/Markdown.svelte
@@ -10,6 +10,7 @@
 
 	export let id = '';
 	export let content;
+	export let done = true;
 	export let model = null;
 	export let save = false;
 	export let preview = false;
@@ -47,6 +48,7 @@
 	<MarkdownTokens
 		{tokens}
 		{id}
+		{done}
 		{save}
 		{preview}
 		{onTaskClick}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
index 4ca9721363..d68b2c11e3 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
@@ -14,8 +14,10 @@
 	import KatexRenderer from './KatexRenderer.svelte';
 	import Source from './Source.svelte';
 	import HtmlToken from './HTMLToken.svelte';
+	import TextToken from './MarkdownInlineTokens/TextToken.svelte';
 
 	export let id: string;
+	export let done = true;
 	export let tokens: Token[];
 	export let onSourceClick: Function = () => {};
 </script>
@@ -66,6 +68,6 @@
 			onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
 		></iframe>
 	{:else if token.type === 'text'}
-		{token.raw}
+		<TextToken {token} {done} />
 	{/if}
 {/each}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte
new file mode 100644
index 0000000000..1c5f93c644
--- /dev/null
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	export let token;
+	export let done = true;
+
+	let texts = [];
+	$: texts = (token?.raw ?? '').split(' ');
+</script>
+
+{#if done}
+	{token?.raw}
+{:else}
+	{#each texts as text}
+		<span class="" transition:fade>
+			{text}
+		</span>
+	{/each}
+{/if}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index e989d408ed..0d5c898566 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -28,6 +28,8 @@
 	export let top = true;
 	export let attributes = {};
 
+	export let done = true;
+
 	export let save = false;
 	export let preview = false;
 
@@ -85,7 +87,12 @@
 		<hr class=" border-gray-100 dark:border-gray-850" />
 	{:else if token.type === 'heading'}
 		<svelte:element this={headerComponent(token.depth)} dir="auto">
-			<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} {onSourceClick} />
+			<MarkdownInlineTokens
+				id={`${id}-${tokenIdx}-h`}
+				tokens={token.tokens}
+				{done}
+				{onSourceClick}
+			/>
 		</svelte:element>
 	{:else if token.type === 'code'}
 		{#if token.raw.includes('```')}
@@ -132,6 +139,7 @@
 											<MarkdownInlineTokens
 												id={`${id}-${tokenIdx}-header-${headerIdx}`}
 												tokens={header.tokens}
+												{done}
 												{onSourceClick}
 											/>
 										</div>
@@ -152,6 +160,7 @@
 											<MarkdownInlineTokens
 												id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`}
 												tokens={cell.tokens}
+												{done}
 												{onSourceClick}
 											/>
 										</div>
@@ -295,6 +304,7 @@
 			<MarkdownInlineTokens
 				id={`${id}-${tokenIdx}-p`}
 				tokens={token.tokens ?? []}
+				{done}
 				{onSourceClick}
 			/>
 		</p>
@@ -302,7 +312,12 @@
 		{#if top}
 			<p>
 				{#if token.tokens}
-					<MarkdownInlineTokens id={`${id}-${tokenIdx}-t`} tokens={token.tokens} {onSourceClick} />
+					<MarkdownInlineTokens
+						id={`${id}-${tokenIdx}-t`}
+						tokens={token.tokens}
+						{done}
+						{onSourceClick}
+					/>
 				{:else}
 					{unescapeHtml(token.text)}
 				{/if}
@@ -311,6 +326,7 @@
 			<MarkdownInlineTokens
 				id={`${id}-${tokenIdx}-p`}
 				tokens={token.tokens ?? []}
+				{done}
 				{onSourceClick}
 			/>
 		{:else}
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 8d186df909..97e479050c 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -804,6 +804,7 @@
 										floatingButtons={message?.done && !readOnly}
 										save={!readOnly}
 										preview={!readOnly}
+										done={message?.done ?? false}
 										{model}
 										onTaskClick={async (e) => {
 											console.log(e);