diff --git a/backends/advanced/webui/src/hooks/useSimpleAudioRecording.ts b/backends/advanced/webui/src/contexts/RecordingContext.tsx
similarity index 84%
rename from backends/advanced/webui/src/hooks/useSimpleAudioRecording.ts
rename to backends/advanced/webui/src/contexts/RecordingContext.tsx
index d34c8ea6..ba39badc 100644
--- a/backends/advanced/webui/src/hooks/useSimpleAudioRecording.ts
+++ b/backends/advanced/webui/src/contexts/RecordingContext.tsx
@@ -1,6 +1,7 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
+import { createContext, useContext, useState, useRef, useCallback, useEffect, ReactNode } from 'react'
import { BACKEND_URL } from '../services/api'
import { getStorageKey } from '../utils/storage'
+import { useAuth } from './AuthContext'
export type RecordingStep = 'idle' | 'mic' | 'websocket' | 'audio-start' | 'streaming' | 'stopping' | 'error'
export type RecordingMode = 'batch' | 'streaming'
@@ -14,7 +15,7 @@ export interface DebugStats {
connectionAttempts: number
}
-export interface SimpleAudioRecordingReturn {
+export interface RecordingContextType {
// Current state
currentStep: RecordingStep
isRecording: boolean
@@ -36,14 +37,19 @@ export interface SimpleAudioRecordingReturn {
canAccessMicrophone: boolean
}
-export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
+const RecordingContext = createContext
(undefined)
+
+export function RecordingProvider({ children }: { children: ReactNode }) {
+ const { user } = useAuth()
+
// Basic state
const [currentStep, setCurrentStep] = useState('idle')
const [isRecording, setIsRecording] = useState(false)
const [recordingDuration, setRecordingDuration] = useState(0)
const [error, setError] = useState(null)
const [mode, setMode] = useState('streaming')
-
+ const [analyserState, setAnalyserState] = useState(null)
+
// Debug stats
const [debugStats, setDebugStats] = useState({
chunksSent: 0,
@@ -53,7 +59,7 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
sessionStartTime: null,
connectionAttempts: 0
})
-
+
// Refs for direct access
const wsRef = useRef(null)
const mediaStreamRef = useRef(null)
@@ -64,9 +70,7 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
const keepAliveIntervalRef = useRef>()
const chunkCountRef = useRef(0)
const audioProcessingStartedRef = useRef(false)
-
- // Note: user was unused and removed
-
+
// Check if we're on localhost or using HTTPS
const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
const isHttps = window.location.protocol === 'https:'
@@ -78,64 +82,65 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
const isDevelopmentHost = devAllowedHosts.includes(window.location.hostname)
const canAccessMicrophone = isLocalhost || isHttps || isDevelopmentHost
-
+
// Format duration helper
const formatDuration = useCallback((seconds: number) => {
const mins = Math.floor(seconds / 60)
const secs = seconds % 60
return `${mins}:${secs.toString().padStart(2, '0')}`
}, [])
-
+
// Cleanup function
const cleanup = useCallback(() => {
console.log('🧹 Cleaning up audio recording resources')
-
+
// Stop audio processing
audioProcessingStartedRef.current = false
-
+
// Clean up media stream
if (mediaStreamRef.current) {
mediaStreamRef.current.getTracks().forEach(track => track.stop())
mediaStreamRef.current = null
}
-
+
// Clean up audio context
if (audioContextRef.current?.state !== 'closed') {
audioContextRef.current?.close()
}
audioContextRef.current = null
analyserRef.current = null
+ setAnalyserState(null)
processorRef.current = null
-
+
// Clean up WebSocket
if (wsRef.current) {
wsRef.current.close()
wsRef.current = null
}
-
+
// Clear intervals
if (durationIntervalRef.current) {
clearInterval(durationIntervalRef.current)
durationIntervalRef.current = undefined
}
-
+
if (keepAliveIntervalRef.current) {
clearInterval(keepAliveIntervalRef.current)
keepAliveIntervalRef.current = undefined
}
-
+
// Reset counters
chunkCountRef.current = 0
}, [])
-
+
// Step 1: Get microphone access
const getMicrophoneAccess = useCallback(async (): Promise => {
console.log('🎤 Step 1: Requesting microphone access')
-
+
if (!canAccessMicrophone) {
throw new Error('Microphone access requires HTTPS or localhost')
}
-
+
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
sampleRate: 16000,
@@ -145,12 +150,26 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
autoGainControl: true
}
})
-
+
mediaStreamRef.current = stream
+
+ // Track when mic permission is revoked
+ stream.getTracks().forEach(track => {
+ track.onended = () => {
+ console.log('🎤 Microphone track ended (permission revoked or device disconnected)')
+ if (isRecording) {
+ setError('Microphone disconnected or permission revoked')
+ setCurrentStep('error')
+ cleanup()
+ setIsRecording(false)
+ }
+ }
+ })
+
console.log('✅ Microphone access granted')
return stream
- }, [canAccessMicrophone])
-
+ }, [canAccessMicrophone, isRecording, cleanup])
+
// Step 2: Connect WebSocket
const connectWebSocket = useCallback(async (): Promise => {
console.log('🔗 Step 2: Connecting to WebSocket')
@@ -159,7 +178,7 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
if (!token) {
throw new Error('No authentication token found')
}
-
+
// Build WebSocket URL using BACKEND_URL from API service (handles base path correctly)
const { protocol } = window.location
const wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:'
@@ -176,23 +195,23 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
// BACKEND_URL is empty (same origin)
wsUrl = `${wsProtocol}//${window.location.host}/ws?codec=pcm&token=${token}&device_name=webui-recorder`
}
-
+
return new Promise((resolve, reject) => {
const ws = new WebSocket(wsUrl)
// Don't set binaryType yet - only when needed for audio chunks
-
+
ws.onopen = () => {
console.log('🔌 WebSocket connected')
-
+
// Add stabilization delay before resolving
setTimeout(() => {
wsRef.current = ws
- setDebugStats(prev => ({
- ...prev,
+ setDebugStats(prev => ({
+ ...prev,
connectionAttempts: prev.connectionAttempts + 1,
sessionStartTime: new Date()
}))
-
+
// Start keepalive ping every 30 seconds
keepAliveIntervalRef.current = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
@@ -204,27 +223,35 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
}
}
}, 30000)
-
+
console.log('✅ WebSocket stabilized and ready')
resolve(ws)
}, 100) // 100ms stabilization delay
}
-
+
ws.onclose = (event) => {
console.log('🔌 WebSocket disconnected:', event.code, event.reason)
wsRef.current = null
-
+
if (keepAliveIntervalRef.current) {
clearInterval(keepAliveIntervalRef.current)
keepAliveIntervalRef.current = undefined
}
+
+ // If recording was active, set error state
+ if (isRecording) {
+ setError('WebSocket connection lost')
+ setCurrentStep('error')
+ cleanup()
+ setIsRecording(false)
+ }
}
-
+
ws.onerror = (error) => {
console.error('🔌 WebSocket error:', error)
reject(new Error('Failed to connect to backend'))
}
-
+
ws.onmessage = (event) => {
console.log('📨 Received message from server:', event.data)
setDebugStats(prev => ({ ...prev, messagesReceived: prev.messagesReceived + 1 }))
@@ -262,8 +289,8 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
}
}
})
- }, [])
-
+ }, [isRecording, cleanup])
+
// Step 3: Send audio-start message
const sendAudioStartMessage = useCallback(async (ws: WebSocket): Promise => {
console.log('📤 Step 3: Sending audio-start message')
@@ -286,7 +313,7 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
ws.send(JSON.stringify(startMessage) + '\n')
console.log('✅ Audio-start message sent with mode:', mode)
}, [mode])
-
+
// Step 4: Start audio streaming
const startAudioStreaming = useCallback(async (stream: MediaStream, ws: WebSocket): Promise => {
console.log('🎵 Step 4: Starting audio streaming')
@@ -312,10 +339,11 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
audioContextRef.current = audioContext
analyserRef.current = analyser
+ setAnalyserState(analyser)
// Wait brief moment for backend to process audio-start
await new Promise(resolve => setTimeout(resolve, 100))
-
+
// Set up audio processing
const processor = audioContext.createScriptProcessor(4096, 1, 1)
source.connect(processor)
@@ -356,15 +384,13 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
return
}
- // inputData already declared above for audio level calculation
-
// Convert float32 to int16 PCM
const pcmBuffer = new Int16Array(inputData.length)
for (let i = 0; i < inputData.length; i++) {
const sample = Math.max(-1, Math.min(1, inputData[i]))
pcmBuffer[i] = sample < 0 ? sample * 0x8000 : sample * 0x7FFF
}
-
+
try {
const chunkHeader = {
type: 'audio-chunk',
@@ -375,13 +401,13 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
},
payload_length: pcmBuffer.byteLength
}
-
+
// Set binary type for WebSocket before sending binary data
if (ws.binaryType !== 'arraybuffer') {
ws.binaryType = 'arraybuffer'
console.log('🔧 Set WebSocket binaryType to arraybuffer for audio chunks')
}
-
+
ws.send(JSON.stringify(chunkHeader) + '\n')
ws.send(new Uint8Array(pcmBuffer.buffer, pcmBuffer.byteOffset, pcmBuffer.byteLength))
@@ -395,75 +421,75 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
}
} catch (error) {
console.error('Failed to send audio chunk:', error)
- setDebugStats(prev => ({
- ...prev,
+ setDebugStats(prev => ({
+ ...prev,
lastError: error instanceof Error ? error.message : 'Chunk send failed',
lastErrorTime: new Date()
}))
}
}
-
+
processorRef.current = processor
audioProcessingStartedRef.current = true
-
+
console.log('✅ Audio streaming started')
}, [])
-
+
// Main start recording function - sequential flow
const startRecording = useCallback(async () => {
try {
setError(null)
setCurrentStep('mic')
-
+
// Step 1: Get microphone access
const stream = await getMicrophoneAccess()
-
+
setCurrentStep('websocket')
// Step 2: Connect WebSocket (includes stabilization delay)
const ws = await connectWebSocket()
-
+
setCurrentStep('audio-start')
// Step 3: Send audio-start message
await sendAudioStartMessage(ws)
-
+
setCurrentStep('streaming')
// Step 4: Start audio streaming (includes processing delay)
await startAudioStreaming(stream, ws)
-
+
// All steps complete - mark as recording
setIsRecording(true)
setRecordingDuration(0)
-
+
// Start duration timer
durationIntervalRef.current = setInterval(() => {
setRecordingDuration(prev => prev + 1)
}, 1000)
-
+
console.log('🎉 Recording started successfully!')
-
+
} catch (error) {
console.error('❌ Recording failed:', error)
setCurrentStep('error')
setError(error instanceof Error ? error.message : 'Recording failed')
- setDebugStats(prev => ({
- ...prev,
+ setDebugStats(prev => ({
+ ...prev,
lastError: error instanceof Error ? error.message : 'Recording failed',
lastErrorTime: new Date()
}))
cleanup()
}
}, [getMicrophoneAccess, connectWebSocket, sendAudioStartMessage, startAudioStreaming, cleanup])
-
+
// Stop recording function
const stopRecording = useCallback(() => {
if (!isRecording) return
-
+
console.log('🛑 Stopping recording')
setCurrentStep('stopping')
-
+
// Stop audio processing
audioProcessingStartedRef.current = false
-
+
// Send audio-stop message if WebSocket is still open
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
try {
@@ -478,37 +504,67 @@ export const useSimpleAudioRecording = (): SimpleAudioRecordingReturn => {
console.error('Failed to send audio-stop:', error)
}
}
-
+
// Cleanup resources
cleanup()
-
+
// Reset state
setIsRecording(false)
setRecordingDuration(0)
setCurrentStep('idle')
-
+
console.log('✅ Recording stopped')
}, [isRecording, cleanup])
-
- // Cleanup on unmount
+
+ // Stop recording when user logs out
useEffect(() => {
- return () => {
- cleanup()
+ if (!user && isRecording) {
+ console.log('🔐 User logged out, stopping recording')
+ stopRecording()
+ }
+ }, [user, isRecording, stopRecording])
+
+ // Warn user before closing tab during recording
+ useEffect(() => {
+ const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+ if (isRecording) {
+ event.preventDefault()
+ event.returnValue = 'Recording in progress. Are you sure you want to leave?'
+ return event.returnValue
+ }
}
- }, [cleanup])
-
- return {
- currentStep,
- isRecording,
- recordingDuration,
- error,
- mode,
- startRecording,
- stopRecording,
- setMode,
- analyser: analyserRef.current,
- debugStats,
- formatDuration,
- canAccessMicrophone
+
+ window.addEventListener('beforeunload', handleBeforeUnload)
+ return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+ }, [isRecording])
+
+ // NOTE: No cleanup on unmount - recording persists across navigation
+ // This is intentional for the global recording feature
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useRecording() {
+ const context = useContext(RecordingContext)
+ if (context === undefined) {
+ throw new Error('useRecording must be used within a RecordingProvider')
}
-}
\ No newline at end of file
+ return context
+}
diff --git a/backends/advanced/webui/src/pages/Conversations.tsx b/backends/advanced/webui/src/pages/Conversations.tsx
index ef57e738..d8861859 100644
--- a/backends/advanced/webui/src/pages/Conversations.tsx
+++ b/backends/advanced/webui/src/pages/Conversations.tsx
@@ -1225,6 +1225,18 @@ export default function Conversations() {
Memory Count: {conversation.memory_count || 0}
Client ID: {conversation.client_id}
+
+ {/* Raw Segments JSON */}
+ {conversation.segments && conversation.segments.length > 0 && (
+