refac

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte

@@ -15,6 +15,7 @@
 	import Source from './Source.svelte';
 	import HtmlToken from './HTMLToken.svelte';
 	import TextToken from './MarkdownInlineTokens/TextToken.svelte';
+	import CodespanToken from './MarkdownInlineTokens/CodespanToken.svelte';
 
 	export let id: string;
 	export let done = true;
@@ -30,7 +31,7 @@
 	{:else if token.type === 'link'}
 		{#if token.tokens}
 			<a href={token.href} target="_blank" rel="nofollow" title={token.title}>
-				<svelte:self id={`${id}-a`} tokens={token.tokens} {onSourceClick} />
+				<svelte:self id={`${id}-a`} tokens={token.tokens} {onSourceClick} {done} />
 			</a>
 		{:else}
 			<a href={token.href} target="_blank" rel="nofollow" title={token.title}>{token.text}</a>
@@ -42,15 +43,7 @@
 	{:else if token.type === 'em'}
 		<em><svelte:self id={`${id}-em`} tokens={token.tokens} {onSourceClick} /></em>
 	{:else if token.type === 'codespan'}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<CodespanToken {token} {done} />
-		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-		<code
-			class="codespan cursor-pointer"
-			on:click={() => {
-				copyToClipboard(unescapeHtml(token.text));
-				toast.success($i18n.t('Copied to clipboard'));
-			}}>{unescapeHtml(token.text)}</code
-		>
 	{:else if token.type === 'br'}
 		<br />
 	{:else if token.type === 'del'}

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/CodespanToken.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { copyToClipboard, unescapeHtml } from '$lib/utils';
+	import { toast } from 'svelte-sonner';
+	import { fade } from 'svelte/transition';
+
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
+	export let token;
+	export let done = true;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+{#if done}
+	<code
+		class="codespan cursor-pointer"
+		on:click={() => {
+			copyToClipboard(unescapeHtml(token.text));
+			toast.success($i18n.t('Copied to clipboard'));
+		}}>{unescapeHtml(token.text)}</code
+	>
+{:else}
+	<code
+		transition:fade={{ duration: 100 }}
+		class="codespan cursor-pointer"
+		on:click={() => {
+			copyToClipboard(unescapeHtml(token.text));
+			toast.success($i18n.t('Copied to clipboard'));
+		}}>{unescapeHtml(token.text)}</code
+	>
+{/if}

src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens/TextToken.svelte

@@ -12,7 +12,7 @@
 	{token?.raw}
 {:else}
 	{#each texts as text}
-		<span class="" transition:fade>
+		<span class="" transition:fade={{ duration: 100 }}>
 			{text}
 		</span>
 	{/each}

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -192,7 +192,13 @@
 			<AlertRenderer {token} {alert} />
 		{:else}
 			<blockquote dir="auto">
-				<svelte:self id={`${id}-${tokenIdx}`} tokens={token.tokens} {onTaskClick} {onSourceClick} />
+				<svelte:self
+					id={`${id}-${tokenIdx}`}
+					tokens={token.tokens}
+					{done}
+					{onTaskClick}
+					{onSourceClick}
+				/>
 			</blockquote>
 		{/if}
 	{:else if token.type === 'list'}
@@ -222,6 +228,7 @@
 							id={`${id}-${tokenIdx}-${itemIdx}`}
 							tokens={item.tokens}
 							top={token.loose}
+							{done}
 							{onTaskClick}
 							{onSourceClick}
 						/>
@@ -254,6 +261,7 @@
 									id={`${id}-${tokenIdx}-${itemIdx}`}
 									tokens={item.tokens}
 									top={token.loose}
+									{done}
 									{onTaskClick}
 									{onSourceClick}
 								/>
@@ -263,6 +271,7 @@
 								id={`${id}-${tokenIdx}-${itemIdx}`}
 								tokens={item.tokens}
 								top={token.loose}
+								{done}
 								{onTaskClick}
 								{onSourceClick}
 							/>
@@ -284,6 +293,7 @@
 					id={`${id}-${tokenIdx}-d`}
 					tokens={marked.lexer(token.text)}
 					attributes={token?.attributes}
+					{done}
 					{onTaskClick}
 					{onSourceClick}
 				/>