mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-01 17:10:24 +08:00
fix: reduce CPU usage during large XML streaming
Skip Prism syntax highlighting while tool call is streaming — use plain <pre> during streaming and only run Prism once at completion. Also throttle scrollIntoView to once per 150ms to avoid layout thrashing. Profiled with Playwright + CDP: for 200-cell diagrams the longest browser task dropped from 6.7s to ~450ms and total long-task time fell from ~10.9s to ~1.1s.
This commit is contained in:
@@ -417,6 +417,7 @@ export function ChatMessageDisplay({
|
||||
|
||||
// Track previous message count to detect bulk loads vs streaming
|
||||
const prevMessageCountRef = useRef(0)
|
||||
const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (messagesEndRef.current && messages.length > 0) {
|
||||
@@ -430,8 +431,13 @@ export function ChatMessageDisplay({
|
||||
return
|
||||
}
|
||||
|
||||
// Single message added - smooth scroll
|
||||
messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
|
||||
// Throttle scroll during streaming to avoid layout thrashing
|
||||
if (!scrollThrottleRef.current) {
|
||||
messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
|
||||
scrollThrottleRef.current = setTimeout(() => {
|
||||
scrollThrottleRef.current = null
|
||||
}, 150)
|
||||
}
|
||||
}
|
||||
}, [messages])
|
||||
|
||||
|
||||
@@ -195,7 +195,22 @@ export function ToolCallCard({
|
||||
{input && isExpanded && (
|
||||
<div className="px-4 py-3 border-t border-border/40 bg-muted/20">
|
||||
{typeof input === "object" && input.xml ? (
|
||||
<CodeBlock code={input.xml} language="xml" />
|
||||
state === "input-streaming" ||
|
||||
state === "input-available" ? (
|
||||
<pre
|
||||
className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
|
||||
style={{
|
||||
fontFamily:
|
||||
"var(--font-mono), ui-monospace, monospace",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
{input.xml}
|
||||
</pre>
|
||||
) : (
|
||||
<CodeBlock code={input.xml} language="xml" />
|
||||
)
|
||||
) : typeof input === "object" &&
|
||||
input.operations &&
|
||||
Array.isArray(input.operations) ? (
|
||||
|
||||
Reference in New Issue
Block a user