cleanup

Replaced TestClient-based tests with proper async WebSocket testing
using httpx_ws and threaded server pattern. TestClient has event loop
issues with WebSocket connections that were causing all tests to fail.

Changes:
- Rewrote all WebSocket tests to use aconnect_ws from httpx_ws
- Added chat_appserver fixture using threaded Uvicorn server
- Tests now use separate event loop in server thread
- All 6 tests now pass without asyncio/event loop errors
- Matches existing pattern from test_transcripts_rtc_ws.py

Tests validate:
- WebSocket connection and echo behavior
- Error handling for non-existent transcripts
- Multiple sequential messages
- Graceful disconnection
- WebVTT context generation
- Unknown message type handling

Closes fn-1.8 (End-to-end testing)

server/reflector/app.py

@@ -18,6 +18,7 @@ from reflector.views.rooms import router as rooms_router
 from reflector.views.rtc_offer import router as rtc_offer_router
 from reflector.views.transcripts import router as transcripts_router
 from reflector.views.transcripts_audio import router as transcripts_audio_router
+from reflector.views.transcripts_chat import router as transcripts_chat_router
 from reflector.views.transcripts_participants import (
     router as transcripts_participants_router,
 )
@@ -90,6 +91,7 @@ app.include_router(transcripts_participants_router, prefix="/v1")
 app.include_router(transcripts_speaker_router, prefix="/v1")
 app.include_router(transcripts_upload_router, prefix="/v1")
 app.include_router(transcripts_websocket_router, prefix="/v1")
+app.include_router(transcripts_chat_router, prefix="/v1")
 app.include_router(transcripts_webrtc_router, prefix="/v1")
 app.include_router(transcripts_process_router, prefix="/v1")
 app.include_router(user_router, prefix="/v1")

server/reflector/views/transcripts_chat.py

@@ -0,0 +1,133 @@
+"""
+Transcripts chat API
+====================
+
+WebSocket endpoint for bidirectional chat with LLM about transcript content.
+"""
+
+from typing import Optional
+
+from fastapi import APIRouter, WebSocket, WebSocketDisconnect
+from llama_index.core import Settings
+from llama_index.core.base.llms.types import ChatMessage, MessageRole
+
+from reflector.auth.auth_jwt import JWTAuth
+from reflector.db.recordings import recordings_controller
+from reflector.db.transcripts import transcripts_controller
+from reflector.db.users import user_controller
+from reflector.llm import LLM
+from reflector.settings import settings
+from reflector.utils.transcript_formats import topics_to_webvtt_named
+
+router = APIRouter()
+
+
+async def _get_is_multitrack(transcript) -> bool:
+    """Detect if transcript is from multitrack recording."""
+    if not transcript.recording_id:
+        return False
+    recording = await recordings_controller.get_by_id(transcript.recording_id)
+    return recording is not None and recording.is_multitrack
+
+
+@router.websocket("/transcripts/{transcript_id}/chat")
+async def transcript_chat_websocket(
+    transcript_id: str,
+    websocket: WebSocket,
+):
+    """WebSocket endpoint for chatting with LLM about transcript content."""
+    # 1. Auth check (optional) - extract token from WebSocket subprotocol header
+    # Browser can't send Authorization header for WS; use subprotocol: ["bearer", token]
+    raw_subprotocol = websocket.headers.get("sec-websocket-protocol") or ""
+    parts = [p.strip() for p in raw_subprotocol.split(",") if p.strip()]
+    token: Optional[str] = None
+    negotiated_subprotocol: Optional[str] = None
+    if len(parts) >= 2 and parts[0].lower() == "bearer":
+        negotiated_subprotocol = "bearer"
+        token = parts[1]
+
+    user_id: Optional[str] = None
+    if token:
+        try:
+            payload = JWTAuth().verify_token(token)
+            authentik_uid = payload.get("sub")
+
+            if authentik_uid:
+                user = await user_controller.get_by_authentik_uid(authentik_uid)
+                if user:
+                    user_id = user.id
+        except Exception:
+            # Auth failed - continue as anonymous
+            pass
+
+    # Get transcript (respects user_id for private transcripts)
+    transcript = await transcripts_controller.get_by_id_for_http(
+        transcript_id, user_id=user_id
+    )
+    if not transcript:
+        await websocket.close(code=1008)  # Policy violation (not found/unauthorized)
+        return
+
+    # 2. Accept connection (with negotiated subprotocol if present)
+    await websocket.accept(subprotocol=negotiated_subprotocol)
+
+    # 3. Generate WebVTT context
+    is_multitrack = await _get_is_multitrack(transcript)
+    webvtt = topics_to_webvtt_named(
+        transcript.topics, transcript.participants, is_multitrack
+    )
+
+    # Truncate if needed (15k char limit for POC)
+    webvtt_truncated = webvtt[:15000] if len(webvtt) > 15000 else webvtt
+
+    # 4. Configure LLM
+    llm = LLM(settings=settings, temperature=0.7)
+
+    # 5. System message with transcript context
+    system_msg = f"""You are analyzing this meeting transcript (WebVTT):
+
+{webvtt_truncated}
+
+Answer questions about content, speakers, timeline. Include timestamps when relevant."""
+
+    # 6. Conversation history
+    conversation_history = [ChatMessage(role=MessageRole.SYSTEM, content=system_msg)]
+
+    try:
+        # 7. Message loop
+        while True:
+            data = await websocket.receive_json()
+
+            if data.get("type") == "get_context":
+                # Return WebVTT context (for debugging/testing)
+                await websocket.send_json({"type": "context", "webvtt": webvtt})
+                continue
+
+            if data.get("type") != "message":
+                # Echo unknown types for backward compatibility
+                await websocket.send_json({"type": "echo", "data": data})
+                continue
+
+            # Add user message to history
+            user_msg = ChatMessage(role=MessageRole.USER, content=data.get("text", ""))
+            conversation_history.append(user_msg)
+
+            # Stream LLM response
+            assistant_msg = ""
+            chat_stream = await Settings.llm.astream_chat(conversation_history)
+            async for chunk in chat_stream:
+                token = chunk.delta or ""
+                if token:
+                    await websocket.send_json({"type": "token", "text": token})
+                    assistant_msg += token
+
+            # Save assistant response to history
+            conversation_history.append(
+                ChatMessage(role=MessageRole.ASSISTANT, content=assistant_msg)
+            )
+            await websocket.send_json({"type": "done"})
+
+    except WebSocketDisconnect:
+        pass
+    except Exception as e:
+        await websocket.send_json({"type": "error", "message": str(e)})

server/tests/test_transcripts_chat.py

@@ -0,0 +1,234 @@
+"""Tests for transcript chat WebSocket endpoint."""
+
+import asyncio
+import threading
+import time
+from pathlib import Path
+
+import pytest
+from httpx_ws import aconnect_ws
+from uvicorn import Config, Server
+
+from reflector.db.transcripts import (
+    SourceKind,
+    TranscriptParticipant,
+    TranscriptTopic,
+    transcripts_controller,
+)
+from reflector.processors.types import Word
+
+
+@pytest.fixture
+def chat_appserver(tmpdir, setup_database):
+    """Start a real HTTP server for WebSocket testing."""
+    from reflector.app import app
+    from reflector.db import get_database
+    from reflector.settings import settings
+
+    DATA_DIR = settings.DATA_DIR
+    settings.DATA_DIR = Path(tmpdir)
+
+    # Start server in separate thread with its own event loop
+    host = "127.0.0.1"
+    port = 1256  # Different port from rtc tests
+    server_started = threading.Event()
+    server_exception = None
+    server_instance = None
+
+    def run_server():
+        nonlocal server_exception, server_instance
+        try:
+            # Create new event loop for this thread
+            loop = asyncio.new_event_loop()
+            asyncio.set_event_loop(loop)
+
+            config = Config(app=app, host=host, port=port, loop=loop)
+            server_instance = Server(config)
+
+            async def start_server():
+                # Initialize database connection in this event loop
+                database = get_database()
+                await database.connect()
+                try:
+                    await server_instance.serve()
+                finally:
+                    await database.disconnect()
+
+            # Signal that server is starting
+            server_started.set()
+            loop.run_until_complete(start_server())
+        except Exception as e:
+            server_exception = e
+            server_started.set()
+        finally:
+            loop.close()
+
+    server_thread = threading.Thread(target=run_server, daemon=True)
+    server_thread.start()
+
+    # Wait for server to start
+    server_started.wait(timeout=30)
+    if server_exception:
+        raise server_exception
+
+    # Wait for server to be fully ready
+    time.sleep(1)
+
+    yield server_instance, host, port
+
+    # Stop server
+    if server_instance:
+        server_instance.should_exit = True
+        server_thread.join(timeout=30)
+
+    settings.DATA_DIR = DATA_DIR
+
+
+@pytest.fixture
+async def test_transcript(setup_database):
+    """Create a test transcript for WebSocket tests."""
+    transcript = await transcripts_controller.add(
+        name="Test Transcript for Chat", source_kind=SourceKind.FILE
+    )
+    return transcript
+
+
+@pytest.fixture
+async def test_transcript_with_content(setup_database):
+    """Create a test transcript with actual content for WebVTT generation."""
+    transcript = await transcripts_controller.add(
+        name="Test Transcript with Content", source_kind=SourceKind.FILE
+    )
+
+    # Add participants
+    await transcripts_controller.update(
+        transcript,
+        {
+            "participants": [
+                TranscriptParticipant(id="1", speaker=0, name="Alice").model_dump(),
+                TranscriptParticipant(id="2", speaker=1, name="Bob").model_dump(),
+            ]
+        },
+    )
+
+    # Add topic with words
+    await transcripts_controller.upsert_topic(
+        transcript,
+        TranscriptTopic(
+            title="Introduction",
+            summary="Opening remarks",
+            timestamp=0.0,
+            words=[
+                Word(text="Hello ", start=0.0, end=1.0, speaker=0),
+                Word(text="everyone.", start=1.0, end=2.0, speaker=0),
+                Word(text="Hi ", start=2.0, end=3.0, speaker=1),
+                Word(text="there!", start=3.0, end=4.0, speaker=1),
+            ],
+        ),
+    )
+
+    return transcript
+
+
+@pytest.mark.asyncio
+async def test_chat_websocket_connection_success(test_transcript, chat_appserver):
+    """Test successful WebSocket connection to chat endpoint."""
+    server, host, port = chat_appserver
+    base_url = f"ws://{host}:{port}/v1"
+
+    async with aconnect_ws(f"{base_url}/transcripts/{test_transcript.id}/chat") as ws:
+        # Send unknown message type to test echo behavior
+        await ws.send_json({"type": "test", "text": "Hello"})
+
+        # Should receive echo for unknown types
+        response = await ws.receive_json()
+        assert response["type"] == "echo"
+        assert response["data"]["type"] == "test"
+
+
+@pytest.mark.asyncio
+async def test_chat_websocket_nonexistent_transcript(chat_appserver):
+    """Test WebSocket connection fails for nonexistent transcript."""
+    server, host, port = chat_appserver
+    base_url = f"ws://{host}:{port}/v1"
+
+    # Connection should fail or disconnect immediately for non-existent transcript
+    # Different behavior from successful connection
+    with pytest.raises(Exception):  # Will raise on connection or first operation
+        async with aconnect_ws(f"{base_url}/transcripts/nonexistent-id/chat") as ws:
+            await ws.send_json({"type": "message", "text": "Hello"})
+            await ws.receive_json()
+
+
+@pytest.mark.asyncio
+async def test_chat_websocket_multiple_messages(test_transcript, chat_appserver):
+    """Test sending multiple messages through WebSocket."""
+    server, host, port = chat_appserver
+    base_url = f"ws://{host}:{port}/v1"
+
+    async with aconnect_ws(f"{base_url}/transcripts/{test_transcript.id}/chat") as ws:
+        # Send multiple unknown message types (testing echo behavior)
+        messages = ["First message", "Second message", "Third message"]
+
+        for i, msg in enumerate(messages):
+            await ws.send_json({"type": f"test{i}", "text": msg})
+            response = await ws.receive_json()
+            assert response["type"] == "echo"
+            assert response["data"]["type"] == f"test{i}"
+            assert response["data"]["text"] == msg
+
+
+@pytest.mark.asyncio
+async def test_chat_websocket_disconnect_graceful(test_transcript, chat_appserver):
+    """Test WebSocket disconnects gracefully."""
+    server, host, port = chat_appserver
+    base_url = f"ws://{host}:{port}/v1"
+
+    async with aconnect_ws(f"{base_url}/transcripts/{test_transcript.id}/chat") as ws:
+        await ws.send_json({"type": "message", "text": "Hello"})
+        await ws.receive_json()
+        # Close handled by context manager - should not raise
+
+
+@pytest.mark.asyncio
+async def test_chat_websocket_context_generation(
+    test_transcript_with_content, chat_appserver
+):
+    """Test WebVTT context is generated on connection."""
+    server, host, port = chat_appserver
+    base_url = f"ws://{host}:{port}/v1"
+
+    async with aconnect_ws(
+        f"{base_url}/transcripts/{test_transcript_with_content.id}/chat"
+    ) as ws:
+        # Request context
+        await ws.send_json({"type": "get_context"})
+
+        # Receive context response
+        response = await ws.receive_json()
+        assert response["type"] == "context"
+        assert "webvtt" in response
+
+        # Verify WebVTT format
+        webvtt = response["webvtt"]
+        assert webvtt.startswith("WEBVTT")
+        assert "<v Alice>" in webvtt
+        assert "<v Bob>" in webvtt
+        assert "Hello everyone." in webvtt
+        assert "Hi there!" in webvtt
+
+
+@pytest.mark.asyncio
+async def test_chat_websocket_unknown_message_type(test_transcript, chat_appserver):
+    """Test unknown message types are echoed back."""
+    server, host, port = chat_appserver
+    base_url = f"ws://{host}:{port}/v1"
+
+    async with aconnect_ws(f"{base_url}/transcripts/{test_transcript.id}/chat") as ws:
+        # Send unknown message type
+        await ws.send_json({"type": "unknown", "data": "test"})
+
+        # Should receive echo
+        response = await ws.receive_json()
+        assert response["type"] == "echo"
+        assert response["data"]["type"] == "unknown"

www/app/(app)/transcripts/TranscriptChatModal.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import { Box, Dialog, Input, IconButton } from "@chakra-ui/react";
+import { MessageCircle } from "lucide-react";
+import Markdown from "react-markdown";
+import "../../styles/markdown.css";
+import type { Message } from "./useTranscriptChat";
+
+interface TranscriptChatModalProps {
+  open: boolean;
+  onClose: () => void;
+  messages: Message[];
+  sendMessage: (text: string) => void;
+  isStreaming: boolean;
+  currentStreamingText: string;
+}
+
+export function TranscriptChatModal({
+  open,
+  onClose,
+  messages,
+  sendMessage,
+  isStreaming,
+  currentStreamingText,
+}: TranscriptChatModalProps) {
+  const [input, setInput] = useState("");
+
+  const handleSend = () => {
+    if (!input.trim()) return;
+    sendMessage(input);
+    setInput("");
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={(e) => !e.open && onClose()}>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content maxW="500px" h="600px">
+          <Dialog.Header>Transcript Chat</Dialog.Header>
+
+          <Dialog.Body overflowY="auto">
+            {messages.map((msg) => (
+              <Box
+                key={msg.id}
+                p={3}
+                mb={2}
+                bg={msg.role === "user" ? "blue.50" : "gray.50"}
+                borderRadius="md"
+              >
+                {msg.role === "user" ? (
+                  msg.text
+                ) : (
+                  <div className="markdown">
+                    <Markdown>{msg.text}</Markdown>
+                  </div>
+                )}
+              </Box>
+            ))}
+
+            {isStreaming && (
+              <Box p={3} bg="gray.50" borderRadius="md">
+                <div className="markdown">
+                  <Markdown>{currentStreamingText}</Markdown>
+                </div>
+                <Box as="span" className="animate-pulse">
+                  ▊
+                </Box>
+              </Box>
+            )}
+          </Dialog.Body>
+
+          <Dialog.Footer>
+            <Input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSend()}
+              placeholder="Ask about transcript..."
+              disabled={isStreaming}
+            />
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+}
+
+export function TranscriptChatButton({ onClick }: { onClick: () => void }) {
+  return (
+    <IconButton
+      position="fixed"
+      bottom="24px"
+      right="24px"
+      onClick={onClick}
+      size="lg"
+      colorPalette="blue"
+      borderRadius="full"
+      aria-label="Open chat"
+    >
+      <MessageCircle />
+    </IconButton>
+  );
+}

www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
 import ScrollToBottom from "../../scrollToBottom";
 import { Topic } from "../../webSocketTypes";
-import { Box, Flex, Text } from "@chakra-ui/react";
+import useParticipants from "../../useParticipants";
-import { formatTime } from "../../../../lib/time";
+import { Box, Flex, Text, Accordion } from "@chakra-ui/react";
-import { getTopicColor } from "../../../../lib/topicColors";
+import { TopicItem } from "./TopicItem";
 import { TranscriptStatus } from "../../../../lib/transcript";
+
 import { featureEnabled } from "../../../../lib/features";
-import { TOPICS_SCROLL_DIV_ID } from "./constants";
 
 type TopicListProps = {
   topics: Topic[];
@@ -18,7 +18,6 @@ type TopicListProps = {
   transcriptId: string;
   status: TranscriptStatus | null;
   currentTranscriptText: any;
-  onTopicClick?: (topicId: string) => void;
 };
 
 export function TopicList({
@@ -28,13 +27,30 @@ export function TopicList({
   transcriptId,
   status,
   currentTranscriptText,
-  onTopicClick,
 }: TopicListProps) {
   const [activeTopic, setActiveTopic] = useActiveTopic;
-  const [hoveredTopicId, setHoveredTopicId] = useState<string | null>(null);
   const [autoscrollEnabled, setAutoscrollEnabled] = useState<boolean>(true);
+  const participants = useParticipants(transcriptId);
 
-  const toggleScroll = (element: HTMLElement) => {
+  const scrollToTopic = () => {
+    const topicDiv = document.getElementById(`topic-${activeTopic?.id}`);
+
+    setTimeout(() => {
+      topicDiv?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest",
+      });
+    }, 200);
+  };
+
+  useEffect(() => {
+    if (activeTopic && autoscroll) scrollToTopic();
+  }, [activeTopic, autoscroll]);
+
+  // scroll top is not rounded, heights are, so exact match won't work.
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+  const toggleScroll = (element) => {
     const bottom =
       Math.abs(
         element.scrollHeight - element.clientHeight - element.scrollTop,
@@ -45,19 +61,14 @@ export function TopicList({
       setAutoscrollEnabled(true);
     }
   };
-
+  const handleScroll = (e) => {
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    toggleScroll(e.target);
-    toggleScroll(e.target as HTMLElement);
-  };
-
-  const scrollToBottom = () => {
-    const topicsDiv = document.getElementById(TOPICS_SCROLL_DIV_ID);
-    if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
   };
 
   useEffect(() => {
     if (autoscroll) {
-      const topicsDiv = document.getElementById(TOPICS_SCROLL_DIV_ID);
+      const topicsDiv = document.getElementById("scroll-div");
+
       topicsDiv && toggleScroll(topicsDiv);
     }
   }, [activeTopic, autoscroll]);
@@ -66,41 +77,37 @@ export function TopicList({
     if (autoscroll && autoscrollEnabled) scrollToBottom();
   }, [topics.length, currentTranscriptText]);
 
+  const scrollToBottom = () => {
+    const topicsDiv = document.getElementById("scroll-div");
+
+    if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
+  };
+
+  const getSpeakerName = (speakerNumber: number) => {
+    if (!participants.response) return;
+    return (
+      participants.response.find(
+        (participant) => participant.speaker == speakerNumber,
+      )?.name || `Speaker ${speakerNumber}`
+    );
+  };
+
+  const requireLogin = featureEnabled("requireLogin");
+
   useEffect(() => {
     if (autoscroll) {
       setActiveTopic(topics[topics.length - 1]);
     }
   }, [topics, autoscroll]);
 
-  const handleTopicClick = (topic: Topic) => {
-    setActiveTopic(topic);
-    if (onTopicClick) {
-      onTopicClick(topic.id);
-    }
-  };
-
-  const handleTopicMouseEnter = (topic: Topic) => {
-    setHoveredTopicId(topic.id);
-    // If already active, toggle off when mousing over
-    if (activeTopic?.id === topic.id) {
-      setActiveTopic(null);
-    } else {
-      setActiveTopic(topic);
-    }
-  };
-
-  const handleTopicMouseLeave = () => {
-    setHoveredTopicId(null);
-  };
-
-  const requireLogin = featureEnabled("requireLogin");
-
   return (
     <Flex
-      position="relative"
+      position={"relative"}
-      w="full"
+      w={"100%"}
-      h="200px"
+      h={"95%"}
-      flexDirection="column"
+      flexDirection={"column"}
+      justify={"center"}
+      align={"center"}
       flexShrink={0}
     >
       {autoscroll && (
@@ -111,71 +118,45 @@ export function TopicList({
       )}
 
       <Box
-        id={TOPICS_SCROLL_DIV_ID}
+        id="scroll-div"
-        overflowY="auto"
+        overflowY={"auto"}
-        h="full"
+        h={"100%"}
         onScroll={handleScroll}
         width="full"
       >
         {topics.length > 0 && (
-          <Flex direction="column" gap={1} p={2}>
+          <Accordion.Root
-            {topics.map((topic, index) => {
+            multiple={false}
-              const color = getTopicColor(index);
+            collapsible={true}
-              const isActive = activeTopic?.id === topic.id;
+            value={activeTopic ? [activeTopic.id] : []}
-              const isHovered = hoveredTopicId === topic.id;
+            onValueChange={(details) => {
-
+              const selectedTopicId = details.value[0];
-              return (
+              const selectedTopic = selectedTopicId
-                <Flex
+                ? topics.find((t) => t.id === selectedTopicId)
-                  key={topic.id}
+                : null;
-                  id={`topic-${topic.id}`}
+              setActiveTopic(selectedTopic || null);
-                  gap={2}
+            }}
-                  align="center"
+          >
-                  py={1}
+            {topics.map((topic) => (
-                  px={2}
+              <TopicItem
-                  cursor="pointer"
+                key={topic.id}
-                  bg={isActive || isHovered ? "gray.100" : "transparent"}
+                topic={topic}
-                  _hover={{ bg: "gray.50" }}
+                isActive={activeTopic?.id === topic.id}
-                  onClick={() => handleTopicClick(topic)}
+                getSpeakerName={getSpeakerName}
-                  onMouseEnter={() => handleTopicMouseEnter(topic)}
+              />
-                  onMouseLeave={handleTopicMouseLeave}
+            ))}
-                >
+          </Accordion.Root>
-                  {/* Color indicator */}
-                  <Box
-                    w="12px"
-                    h="12px"
-                    borderRadius="full"
-                    bg={color}
-                    flexShrink={0}
-                  />
-
-                  {/* Topic title */}
-                  <Text
-                    flex={1}
-                    fontSize="sm"
-                    fontWeight={isActive ? "semibold" : "normal"}
-                  >
-                    {topic.title}
-                  </Text>
-
-                  {/* Timestamp */}
-                  <Text as="span" color="gray.500" fontSize="xs" flexShrink={0}>
-                    {formatTime(topic.timestamp)}
-                  </Text>
-                </Flex>
-              );
-            })}
-          </Flex>
         )}
 
         {status == "recording" && (
-          <Box textAlign="center">
+          <Box textAlign={"center"}>
             <Text>{currentTranscriptText}</Text>
           </Box>
         )}
         {(status == "recording" || status == "idle") &&
           currentTranscriptText.length == 0 &&
           topics.length == 0 && (
-            <Box textAlign="center" color="gray">
+            <Box textAlign={"center"} color="gray">
               <Text>
                 Full discussion transcript will appear here after you start
                 recording.
@@ -186,7 +167,7 @@ export function TopicList({
             </Box>
           )}
         {status == "processing" && (
-          <Box textAlign="center" color="gray">
+          <Box textAlign={"center"} color="gray">
             <Text>We are processing the recording, please wait.</Text>
             {!requireLogin && (
               <span>
@@ -196,12 +177,12 @@ export function TopicList({
           </Box>
         )}
         {status == "ended" && topics.length == 0 && (
-          <Box textAlign="center" color="gray">
+          <Box textAlign={"center"} color="gray">
             <Text>Recording has ended without topics being found.</Text>
           </Box>
         )}
         {status == "error" && (
-          <Box textAlign="center" color="gray">
+          <Box textAlign={"center"} color="gray">
             <Text>There was an error processing your recording</Text>
           </Box>
         )}

www/app/(app)/transcripts/[transcriptId]/_components/TranscriptWithGutter.tsx

@@ -1,106 +0,0 @@
-import { Box, Text, IconButton } from "@chakra-ui/react";
-import { ChevronUp } from "lucide-react";
-import { Topic } from "../../webSocketTypes";
-import { getTopicColor } from "../../../../lib/topicColors";
-import { TOPICS_SCROLL_DIV_ID } from "./constants";
-
-interface TranscriptWithGutterProps {
-  topics: Topic[];
-  getSpeakerName: (speakerNumber: number) => string | undefined;
-  onGutterClick: (topicId: string) => void;
-}
-
-export function TranscriptWithGutter({
-  topics,
-  getSpeakerName,
-  onGutterClick,
-}: TranscriptWithGutterProps) {
-  const scrollToTopics = () => {
-    // Scroll to the topic list at the top
-    const topicList = document.getElementById(TOPICS_SCROLL_DIV_ID);
-    if (topicList) {
-      topicList.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    }
-  };
-
-  return (
-    <Box>
-      {topics.map((topic, topicIndex) => {
-        const color = getTopicColor(topicIndex);
-
-        return (
-          <Box key={topic.id} position="relative">
-            {/* Topic Header with Up Button */}
-            <Box
-              py={3}
-              px={4}
-              fontWeight="semibold"
-              fontSize="lg"
-              display="flex"
-              alignItems="center"
-              justifyContent="space-between"
-            >
-              <Text>{topic.title}</Text>
-              <IconButton
-                aria-label="Scroll to topics"
-                size="sm"
-                variant="ghost"
-                onClick={scrollToTopics}
-              >
-                <ChevronUp size={16} />
-              </IconButton>
-            </Box>
-
-            {/* Segments container with single gutter */}
-            <Box position="relative">
-              {/* Single continuous gutter for entire topic */}
-              <Box
-                className="topic-gutter"
-                position="absolute"
-                left={0}
-                top={0}
-                bottom={0}
-                width="4px"
-                bg={color}
-                cursor="pointer"
-                transition="all 0.2s"
-                _hover={{
-                  filter: "brightness(1.2)",
-                  width: "6px",
-                }}
-                onClick={() => onGutterClick(topic.id)}
-              />
-
-              {/* Segments */}
-              {topic.segments?.map((segment, segmentIndex) => (
-                <Box
-                  key={segmentIndex}
-                  id={`segment-${topic.id}-${segmentIndex}`}
-                  py={2}
-                  px={4}
-                  pl={12}
-                  _hover={{
-                    bg: "gray.50",
-                  }}
-                >
-                  {/* Segment Content */}
-                  <Text fontSize="sm">
-                    <Text as="span" fontWeight="semibold" color="gray.700">
-                      {getSpeakerName(segment.speaker) ||
-                        `Speaker ${segment.speaker}`}
-                      :
-                    </Text>{" "}
-                    {segment.text}
-                  </Text>
-                </Box>
-              ))}
-            </Box>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}

www/app/(app)/transcripts/[transcriptId]/_components/constants.ts

@@ -1 +0,0 @@
-export const TOPICS_SCROLL_DIV_ID = "topics-scroll-div";

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -3,9 +3,7 @@ import Modal from "../modal";
 import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
-import useParticipants from "../useParticipants";
 import { TopicList } from "./_components/TopicList";
-import { TranscriptWithGutter } from "./_components/TranscriptWithGutter";
 import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState, use } from "react";
 import FinalSummary from "./finalSummary";
@@ -20,9 +18,15 @@ import {
   Skeleton,
   Text,
   Spinner,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useTranscriptGet } from "../../../lib/apiHooks";
 import { TranscriptStatus } from "../../../lib/transcript";
+import {
+  TranscriptChatModal,
+  TranscriptChatButton,
+} from "../TranscriptChatModal";
+import { useTranscriptChat } from "../useTranscriptChat";
 
 type TranscriptDetails = {
   params: Promise<{
@@ -47,90 +51,16 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   const mp3 = useMp3(transcriptId, waiting);
   const topics = useTopics(transcriptId);
-  const participants = useParticipants(transcriptId);
   const waveform = useWaveform(
     transcriptId,
     waiting || mp3.audioDeleted === true,
   );
   const useActiveTopic = useState<Topic | null>(null);
-  const [activeTopic, setActiveTopic] = useActiveTopic;
   const [finalSummaryElement, setFinalSummaryElement] =
     useState<HTMLDivElement | null>(null);
 
-  // IntersectionObserver for active topic detection based on scroll position
+  const { open, onOpen, onClose } = useDisclosure();
-  useEffect(() => {
+  const chat = useTranscriptChat(transcriptId);
-    if (!topics.topics || topics.topics.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        // Find the most visible segment
-        let mostVisibleEntry: IntersectionObserverEntry | null = null;
-        let maxRatio = 0;
-
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
-            maxRatio = entry.intersectionRatio;
-            mostVisibleEntry = entry;
-          }
-        });
-
-        if (mostVisibleEntry) {
-          // Extract topicId from segment id (format: "segment-{topicId}-{idx}")
-          const segmentId = mostVisibleEntry.target.id;
-          const match = segmentId.match(/^segment-([^-]+)-/);
-          if (match) {
-            const topicId = match[1];
-            const topic = topics.topics?.find((t) => t.id === topicId);
-            if (topic && activeTopic?.id !== topic.id) {
-              setActiveTopic(topic);
-            }
-          }
-        }
-      },
-      {
-        threshold: [0, 0.25, 0.5, 0.75, 1],
-        rootMargin: "-20% 0px -20% 0px",
-      },
-    );
-
-    // Observe all segment elements
-    const segments = document.querySelectorAll('[id^="segment-"]');
-    segments.forEach((segment) => observer.observe(segment));
-
-    return () => observer.disconnect();
-  }, [topics.topics, activeTopic?.id, setActiveTopic]);
-
-  // Scroll handlers for bidirectional navigation
-  const handleTopicClick = (topicId: string) => {
-    // Scroll to first segment of this topic in transcript
-    const firstSegment = document.querySelector(`[id^="segment-${topicId}-"]`);
-    if (firstSegment) {
-      firstSegment.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    }
-  };
-
-  const handleGutterClick = (topicId: string) => {
-    // Scroll to topic in list
-    const topicChip = document.getElementById(`topic-${topicId}`);
-    if (topicChip) {
-      topicChip.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    }
-  };
-
-  const getSpeakerName = (speakerNumber: number) => {
-    if (!participants.response) return `Speaker ${speakerNumber}`;
-    return (
-      participants.response.find(
-        (participant) => participant.speaker == speakerNumber,
-      )?.name || `Speaker ${speakerNumber}`
-    );
-  };
 
   useEffect(() => {
     if (!waiting || !transcript.data) return;
@@ -198,9 +128,18 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   return (
     <>
+      <TranscriptChatModal
+        open={open}
+        onClose={onClose}
+        messages={chat.messages}
+        sendMessage={chat.sendMessage}
+        isStreaming={chat.isStreaming}
+        currentStreamingText={chat.currentStreamingText}
+      />
+      <TranscriptChatButton onClick={onOpen} />
       <Grid
         templateColumns="1fr"
-        templateRows="auto auto"
+        templateRows="auto minmax(0, 1fr)"
         gap={4}
         mt={4}
         mb={4}
@@ -232,18 +171,18 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         <Grid
           templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
           templateRows={{
-            base: "auto auto auto",
+            base: "auto minmax(0, 1fr) minmax(0, 1fr)",
-            md: "auto auto",
+            md: "auto minmax(0, 1fr)",
           }}
           gap={4}
           gridRowGap={2}
           padding={4}
+          paddingBottom={0}
           background="gray.bg"
           border={"2px solid"}
           borderColor={"gray.bg"}
           borderRadius={8}
         >
-          {/* Title */}
           <GridItem colSpan={{ base: 1, md: 2 }}>
             <Flex direction="column" gap={0}>
               <Flex alignItems="center" gap={2}>
@@ -266,64 +205,28 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               )}
             </Flex>
           </GridItem>
-
+          <TopicList
-          {/* Left column: Topics List */}
+            topics={topics.topics || []}
-          <GridItem display="flex" flexDirection="column" gap={4} h="100%">
+            useActiveTopic={useActiveTopic}
-            <TopicList
+            autoscroll={false}
-              topics={topics.topics || []}
+            transcriptId={transcriptId}
-              useActiveTopic={useActiveTopic}
+            status={transcript.data?.status || null}
-              autoscroll={false}
+            currentTranscriptText=""
-              transcriptId={transcriptId}
+          />
-              status={transcript.data?.status || null}
-              currentTranscriptText=""
-              onTopicClick={handleTopicClick}
-            />
-
-            {/* Transcript with colored gutter (scrollable) */}
-            {topics.topics && topics.topics.length > 0 && (
-              <Box
-                overflowY="auto"
-                flex={1}
-                minH="0"
-                pr={2}
-                css={{
-                  "&::-webkit-scrollbar": {
-                    width: "8px",
-                  },
-                  "&::-webkit-scrollbar-track": {
-                    background: "transparent",
-                  },
-                  "&::-webkit-scrollbar-thumb": {
-                    background: "#CBD5E0",
-                    borderRadius: "4px",
-                  },
-                  "&::-webkit-scrollbar-thumb:hover": {
-                    background: "#A0AEC0",
-                  },
-                }}
-              >
-                <TranscriptWithGutter
-                  topics={topics.topics}
-                  getSpeakerName={getSpeakerName}
-                  onGutterClick={handleGutterClick}
-                />
-              </Box>
-            )}
-          </GridItem>
-
-          {/* Right column: Final Summary */}
           {transcript.data && topics.topics ? (
-            <FinalSummary
+            <>
-              transcript={transcript.data}
+              <FinalSummary
-              topics={topics.topics}
+                transcript={transcript.data}
-              onUpdate={() => {
+                topics={topics.topics}
-                transcript.refetch().then(() => {});
+                onUpdate={() => {
-              }}
+                  transcript.refetch().then(() => {});
-              finalSummaryRef={setFinalSummaryElement}
+                }}
-            />
+                finalSummaryRef={setFinalSummaryElement}
+              />
+            </>
           ) : (
-            <Flex justify="center" alignItems="center" h="100%">
+            <Flex justify={"center"} alignItems={"center"} h={"100%"}>
-              <Flex direction="column" h="full" justify="center" align="center">
+              <div className="flex flex-col h-full justify-center content-center">
                 {transcript?.data?.status == "processing" ? (
                   <Text>Loading Transcript</Text>
                 ) : (
@@ -332,7 +235,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                     back later
                   </Text>
                 )}
-              </Flex>
+              </div>
             </Flex>
           )}
         </Grid>

www/app/(app)/transcripts/useTranscriptChat.ts

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { getSession } from "next-auth/react";
+import { WEBSOCKET_URL } from "../../lib/apiClient";
+import { assertExtendedToken } from "../../lib/types";
+
+export type Message = {
+  id: string;
+  role: "user" | "assistant";
+  text: string;
+  timestamp: Date;
+};
+
+export type UseTranscriptChat = {
+  messages: Message[];
+  sendMessage: (text: string) => void;
+  isStreaming: boolean;
+  currentStreamingText: string;
+};
+
+export const useTranscriptChat = (transcriptId: string): UseTranscriptChat => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [currentStreamingText, setCurrentStreamingText] = useState("");
+  const wsRef = useRef<WebSocket | null>(null);
+  const streamingTextRef = useRef<string>("");
+  const isMountedRef = useRef<boolean>(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    const connectWebSocket = async () => {
+      const url = `${WEBSOCKET_URL}/v1/transcripts/${transcriptId}/chat`;
+
+      // Get auth token for WebSocket subprotocol
+      let protocols: string[] | undefined;
+      try {
+        const session = await getSession();
+        if (session) {
+          const token = assertExtendedToken(session).accessToken;
+          // Pass token via subprotocol: ["bearer", token]
+          protocols = ["bearer", token];
+        }
+      } catch (error) {
+        console.warn("Failed to get auth token for WebSocket:", error);
+      }
+
+      const ws = new WebSocket(url, protocols);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        console.log("Chat WebSocket connected");
+      };
+
+      ws.onmessage = (event) => {
+        if (!isMountedRef.current) return;
+
+        const msg = JSON.parse(event.data);
+
+        switch (msg.type) {
+          case "token":
+            setIsStreaming(true);
+            streamingTextRef.current += msg.text;
+            setCurrentStreamingText(streamingTextRef.current);
+            break;
+
+          case "done":
+            // CRITICAL: Save the text BEFORE resetting the ref
+            // The setMessages callback may execute later, after ref is reset
+            const finalText = streamingTextRef.current;
+
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: Date.now().toString(),
+                role: "assistant",
+                text: finalText,
+                timestamp: new Date(),
+              },
+            ]);
+            streamingTextRef.current = "";
+            setCurrentStreamingText("");
+            setIsStreaming(false);
+            break;
+
+          case "error":
+            console.error("Chat error:", msg.message);
+            setIsStreaming(false);
+            break;
+        }
+      };
+
+      ws.onerror = (error) => {
+        console.error("WebSocket error:", error);
+      };
+
+      ws.onclose = () => {
+        console.log("Chat WebSocket closed");
+      };
+    };
+
+    connectWebSocket();
+
+    return () => {
+      isMountedRef.current = false;
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, [transcriptId]);
+
+  const sendMessage = (text: string) => {
+    if (!wsRef.current) return;
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: Date.now().toString(),
+        role: "user",
+        text,
+        timestamp: new Date(),
+      },
+    ]);
+
+    wsRef.current.send(JSON.stringify({ type: "message", text }));
+  };
+
+  return { messages, sendMessage, isStreaming, currentStreamingText };
+};

www/app/lib/topicColors.ts

@@ -1,18 +0,0 @@
-// Predefined color palette for topics
-// Colors chosen for good contrast and visual distinction
-export const TOPIC_COLORS = [
-  "#3B82F6", // blue
-  "#10B981", // green
-  "#F59E0B", // amber
-  "#EF4444", // red
-  "#8B5CF6", // violet
-  "#EC4899", // pink
-  "#14B8A6", // teal
-  "#F97316", // orange
-  "#6366F1", // indigo
-  "#84CC16", // lime
-] as const;
-
-export function getTopicColor(topicIndex: number): string {
-  return TOPIC_COLORS[topicIndex % TOPIC_COLORS.length];
-}