return (
Back to work
Case Study2025Open Source Concept Build

Pulse Chat

Real-time SSE messaging platform with end-to-end payload sanitization and RBAC session security.

Project Spec Sheet

Timeline
2025
Platform
React
Primary Technologies
ReactNode.jsStreaming SSEWebSocketsTailwind
Pulse Chat screenshot

The Challenge & Problem

Support teams needed an in-product assistant surface that felt native and snappy, but existing iframe embeds had poor accessibility, broke mobile layouts, and suffered from unpredictable latency.

Execution & My Role

Designed the chat interface, conversation states, and client/API contract for streaming Server-Sent Events (SSE) messages.

Outcome & Engineering Impact

Built a lightweight, embeddable support chat widget with sub-50ms perceived latency, live typing indicators, and reliable SSE streaming.

Interactive Live Sandbox

Pulse Support Chat Sandbox

AppSec ActiveCalls: 0/5

Hi — I'm the Pulse Support Assistant. This is an interactive sandbox showing secure Edge-streaming in action.

Ask about architecture, security, or skills to see instant markdown token streaming!

Security Telemetry
Route TypeEdge Runtime
Max Length Constraint1,000 Chars
Payload SanitizationActive
Rate Limit Threshold5 Requests/Min

System State Healthy

Active stream pipelines are secure. No anomalies detected.

System Architecture

EDGE ROUTING & SSE STREAM PIPELINESTATUS: ACTIVE TOKEN DECODER
Client UI ChatPOST PayloadEdge MiddlewareSize & Skew CheckRate Limiter GateOpenAI LLMKeys Hidden ServerSSE ChunksUTF-8 Reader

Streaming Chat Architecture

The widget streams responses from a Next.js Edge API Route using Server-Sent Events (SSE), delivering incremental token chunks to the client as they are generated.

[Chat Widget (React)] 
   │ ──(POST /api/projects/pulse-chat/stream)──► [Edge API Route]
   ▼ ◄──(ReadableStream SSE chunks)──────────────┤
[Render Token Buffer]                            └── [AI Knowledge Base]
  • Transport: Uses `fetch` with `ReadableStream` reader on the frontend, parsing `data: ` event chunks with a lightweight text decoder.
  • State Machine: Built with a strict reducer handling `idle -> connecting -> streaming -> complete | error` states.

Implementation Detail

Technical Details & Implementation

  • Streaming Parser: Implemented a resilient SSE line parser that handles chunk fragmentation and UTF-8 multibyte character boundaries without corrupting text.
  • Scroll Anchoring: Automated smart auto-scroll that tracks new incoming tokens only if the user is already at the bottom of the message list.
  • Keyboard Ergonomics: Configured full keyboard shortcuts (Enter to send, Shift+Enter for multiline, Escape to dismiss).

Technical Validation & Metrics

Performance Metrics

  • Time to First Token (TTFT): Under 80ms on standard broadband connections.
  • Bundle Size: Less than 8KB gzipped for the entire widget component tree.

My Exact Contribution

Contribution Details

  • Full Architecture: Coded the chat UI, CSS micro-animations, streaming API endpoint, and mock model responder.

Challenges & Lessons Learned

Challenges & Key Decisions

  • Challenge: Preventing auto-scroll from yanking the viewport when a user scrolls up to read earlier messages while streaming is active.
  • Solution: Added scroll threshold detection that disables auto-scroll when the user scrolls more than 50px away from the bottom.

Project Assets

Live demo is internal / restricted
Browse Source

Appreciate this build

18 appreciations