Skip to content

Commit 69367e9

Browse files
committed
feat: throttle markdown lexing during streaming
Add leading-edge throttle (50ms) to marked.lexer() calls during streaming to reduce CPU work on long responses and low-end devices. When done, renders immediately without delay.
1 parent d0bf015 commit 69367e9

1 file changed

Lines changed: 25 additions & 2 deletions

File tree

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script>
2+
import { onDestroy } from 'svelte';
23
import { marked } from 'marked';
34
import { replaceTokens, processResponseContent } from '$lib/utils';
45
import { user } from '$lib/stores';
@@ -35,6 +36,10 @@
3536
3637
let tokens = [];
3738
39+
// Object ref to avoid Svelte reactivity re-triggering on timer mutation
40+
const throttle = { timer: null };
41+
const THROTTLE_MS = 50;
42+
3843
const options = {
3944
throwOnError: false,
4045
breaks: true
@@ -53,13 +58,31 @@
5358
]
5459
});
5560
56-
$: (async () => {
61+
const lexContent = () => {
5762
if (content) {
5863
tokens = marked.lexer(
5964
replaceTokens(processResponseContent(content), model?.name, $user?.name)
6065
);
6166
}
62-
})();
67+
};
68+
69+
$: if (content) {
70+
if (done) {
71+
clearTimeout(throttle.timer);
72+
throttle.timer = null;
73+
lexContent();
74+
} else if (!throttle.timer) {
75+
lexContent();
76+
throttle.timer = setTimeout(() => {
77+
throttle.timer = null;
78+
lexContent();
79+
}, THROTTLE_MS);
80+
}
81+
}
82+
83+
onDestroy(() => {
84+
clearTimeout(throttle.timer);
85+
});
6386
</script>
6487
6588
{#key id}

0 commit comments

Comments
 (0)