feat(web): fade in streamed response words and harden playground editor (#6895)

* feat(web): fade in newly streamed response words

Animate only new word-level deltas while markdown is still streaming, and
cache markdown-it instances per parser id so concurrent Response trees do
not rebuild or reparse on every render.

* fix(web): keep CodeMirror editor alive across keystroke re-renders

Deliver onKeyDown through a ref instead of the extensions memo so a new
handler identity no longer tears down the EditorView, which reset the
cursor to the document start and made typing appear right-to-left.

* feat(web): add unsaved changes confirmation dialog in PlaygroundMessageEditor

Implement a confirmation dialog to warn users about unsaved changes when attempting to leave the editor. This includes handling the beforeunload event to prevent accidental navigation away from the editor. Additionally, add tests to verify the dialog's behavior under various scenarios.

* test(web): cover beforeunload guard and fade hydration suppression

Address review feedback: add regression tests for the unsaved-changes
beforeunload guard and the first-render fade suppression of hydrated
content, and annotate getCachedMarkdown's return type.
This commit is contained in:
RedwindA
2026-08-18 18:20:53 +08:00
committed by GitHub
parent 4add708ebe
commit 137d1171f2
13 changed files with 993 additions and 90 deletions
+22
View File
@@ -442,6 +442,28 @@ For commercial licensing, please contact support@quantumnous.com
}
}
/* Smooth streaming: one-shot fade-in on newly streamed words.
* Duration must match FADE_DURATION_MS in response-fade.ts */
@keyframes stream-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[data-stream-fade] {
animation: stream-fade-in 250ms ease-out both;
animation-delay: var(--stream-fade-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
[data-stream-fade] {
animation: none;
}
}
/* ── Landing page scroll-triggered animations ── */
@keyframes landing-fade-up {
from {