Files
reflector/.flow/specs/fn-1.7.md
Igor Loskutov 316f7b316d feat: add WebVTT context generation to chat WebSocket endpoint
- Import topics_to_webvtt_named and recordings controller
- Add _get_is_multitrack helper function
- Generate WebVTT context on WebSocket connection
- Add get_context message type to retrieve WebVTT
- Maintain backward compatibility with echo for other messages
- Add test fixture and test for WebVTT context generation

Implements task fn-1.2: WebVTT context generation for transcript chat
2026-01-12 18:24:47 -05:00

1.4 KiB

Task 7: Integrate into Transcript Page

File: www/app/(app)/transcripts/[transcriptId]/page.tsx (modify) Lines: ~15 Dependencies: Task 5, Task 6

Objective

Add chat components to transcript detail page.

Implementation

// Add imports
import { useDisclosure } from "@chakra-ui/react"
import {
  TranscriptChatModal,
  TranscriptChatButton,
} from "../TranscriptChatModal"
import { useTranscriptChat } from "../useTranscriptChat"

// Inside component:
export default function TranscriptDetails(details: TranscriptDetails) {
  const params = use(details.params)
  const transcriptId = params.transcriptId

  // Add chat state
  const { open, onOpen, onClose } = useDisclosure()
  const chat = useTranscriptChat(transcriptId)

  return (
    <>
      {/* Existing Grid with transcript content */}
      <Grid templateColumns="1fr" templateRows="auto minmax(0, 1fr)" /* ... */>
        {/* ... existing content ... */}
      </Grid>

      {/* Chat interface */}
      <TranscriptChatModal open={open} onClose={onClose} {...chat} />
      <TranscriptChatButton onClick={onOpen} />
    </>
  )
}

Validation

  • Button appears on transcript page
  • Clicking button opens dialog
  • Chat works end-to-end
  • Dialog closes properly
  • No layout conflicts with existing UI
  • Button doesn't overlap other elements

Notes

  • Test on different transcript pages
  • Verify z-index for button and dialog