feat(web): implement SSE chat streaming with real-time token rendering
Some checks failed
ci/woodpecker/push/web Pipeline failed

- Implement streamChatMessage() using fetch ReadableStream for SSE parsing
- Update useChat hook with streaming state, abort support, and fallback to non-streaming
- Add streaming indicator (blinking cursor) in MessageList during token streaming
- Update ChatInput with Stop button during streaming, disable input while streaming
- Add CSS animations for streaming cursor
- Fix message ID uniqueness to prevent collisions in rapid sends
- Update tests for streaming path with makeStreamSucceed/makeStreamFail helpers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-25 20:38:49 -06:00
parent 6290fc3d53
commit f4b4ba4c54
8 changed files with 797 additions and 297 deletions

View File

@@ -765,6 +765,28 @@ body::before {
animation: scaleIn 0.1s ease-out;
}
/* Streaming cursor for real-time token rendering */
@keyframes streaming-cursor-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.streaming-cursor {
display: inline-block;
width: 2px;
height: 1em;
background-color: rgb(var(--accent-primary));
border-radius: 1px;
animation: streaming-cursor-blink 1s step-end infinite;
vertical-align: text-bottom;
margin-left: 1px;
}
/* -----------------------------------------------------------------------------
Dashboard Layout — Responsive Grids
----------------------------------------------------------------------------- */