Files
reflector/.flow/tasks/fn-1.5.md
Igor Loskutov 544793a24f chore: mark fn-1.5 as done (Frontend WebSocket hook)
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.
2026-01-12 19:49:14 -05:00

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}/chat WebSocket 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:

  • streamingTextRef instead of state-based accumulation (avoids closure bugs)
  • isMountedRef for preventing setState on unmounted component
  • Proper TypeScript typing for all exports

Evidence

  • Commits:
  • Tests:
  • PRs: