mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2026-02-04 09:56:47 +00:00
Compare commits
11 Commits
v0.32.1
...
feat/trans
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b84fd1fc24 | ||
|
|
3652de9fca | ||
|
|
68df825734 | ||
|
|
8ca5324c1a | ||
|
|
39e0b89e67 | ||
|
|
544793a24f | ||
|
|
088451645a | ||
|
|
2dfe82afbc | ||
|
|
b461ebb488 | ||
|
|
0b5112cabc | ||
|
|
316f7b316d |
@@ -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")
|
||||
|
||||
133
server/reflector/views/transcripts_chat.py
Normal file
133
server/reflector/views/transcripts_chat.py
Normal file
@@ -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)})
|
||||
234
server/tests/test_transcripts_chat.py
Normal file
234
server/tests/test_transcripts_chat.py
Normal file
@@ -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"
|
||||
103
www/app/(app)/transcripts/TranscriptChatModal.tsx
Normal file
103
www/app/(app)/transcripts/TranscriptChatModal.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -18,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<{
|
||||
@@ -53,6 +59,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
|
||||
const [finalSummaryElement, setFinalSummaryElement] =
|
||||
useState<HTMLDivElement | null>(null);
|
||||
|
||||
const { open, onOpen, onClose } = useDisclosure();
|
||||
const chat = useTranscriptChat(transcriptId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!waiting || !transcript.data) return;
|
||||
|
||||
@@ -119,6 +128,15 @@ 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 minmax(0, 1fr)"
|
||||
|
||||
130
www/app/(app)/transcripts/useTranscriptChat.ts
Normal file
130
www/app/(app)/transcripts/useTranscriptChat.ts
Normal file
@@ -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 };
|
||||
};
|
||||
Reference in New Issue
Block a user