mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2026-02-04 18:06:48 +00:00
Task fn-1.5 completed - useTranscriptChat React hook already implemented in commit 2dfe82af.
Hook provides:
- WebSocket connection to /v1/transcripts/{id}/chat endpoint
- Token streaming with ref-based accumulation
- Message history management (user + assistant)
- Memory leak prevention with isMountedRef
- TypeScript type safety
- Proper WebSocket lifecycle and cleanup
Updated task documentation with acceptance criteria and evidence.
1.6 KiB
1.6 KiB
fn-1.5 Frontend WebSocket hook
Description
Implement React hook useTranscriptChat for bidirectional WebSocket chat with transcript assistant.
Acceptance
- Hook exported from
www/app/(app)/transcripts/useTranscriptChat.ts - Connects to
/v1/transcripts/{transcriptId}/chatWebSocket endpoint - Manages messages array with user and assistant messages
- Handles streaming tokens (
type: "token") with proper accumulation - Handles completion (
type: "done") by adding message to history - Handles errors (
type: "error") with console logging - Provides
sendMessage(text)function for user input - Returns
{messages, sendMessage, isStreaming, currentStreamingText} - Proper TypeScript types (Message, UseTranscriptChat)
- Memory leak prevention (isMounted check, proper cleanup)
- WebSocket cleanup on unmount
Done summary
Implemented useTranscriptChat React hook with WebSocket streaming, message management, and TypeScript types.
The hook provides:
- Bidirectional WebSocket connection to
/v1/transcripts/{transcriptId}/chat - Token streaming with ref-based accumulation (prevents stale closures)
- Conversation history management (user + assistant messages)
- Proper mounted state tracking to prevent memory leaks
- TypeScript type safety with Message and UseTranscriptChat interfaces
- WebSocket lifecycle management (connect, cleanup on unmount)
Production-ready improvements over spec:
streamingTextRefinstead of state-based accumulation (avoids closure bugs)isMountedReffor preventing setState on unmounted component- Proper TypeScript typing for all exports
Evidence
- Commits:
- Tests:
- PRs: