mosaicstack/stack
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

feat(web): wire WebSocket chat with streaming and conversation switching (#120) (#136)
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
Details

Browse Source 
Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #136.
This commit is contained in:
Jason Woltje
2026-03-15 18:09:14 +00:00
committed by jason.woltje
parent ea800e3f14
commit d0999a8e37
4 changed files with 120 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/chat/streaming-message.tsx
View File

@@ -5,16 +5,22 @@ interface StreamingMessageProps {
text: string;
}
export function StreamingMessage({ text }: StreamingMessageProps): React.ReactElement | null {
if (!text) return null;
export function StreamingMessage({ text }: StreamingMessageProps): React.ReactElement {
return (
<div className="flex justify-start">
<div className="max-w-[75%] rounded-xl border border-surface-border bg-surface-elevated px-4 py-3 text-sm text-text-primary">
<div className="whitespace-pre-wrap break-words">{text}</div>
{text ? (
<div className="whitespace-pre-wrap break-words">{text}</div>
) : (
<div className="flex items-center gap-2 text-text-muted">
<span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
<span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500 [animation-delay:0.2s]" />
<span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500 [animation-delay:0.4s]" />
</div>
)}
<div className="mt-1 flex items-center gap-1 text-xs text-text-muted">
<span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
Thinking...
<span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
{text ? 'Responding...' : 'Thinking...'}
</div>
</div>
</div>