josedario87
950572046e
- Add /api/recordings endpoint with full CRUD operations - Create voice_recordings SQLite table for metadata - Save audio files to server/recordings/ as .webm - Store transcription, duration, microphone name, file size - Auto-save on each Whisper recording completion
1536 lines
40 KiB
Vue
1536 lines
40 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
|
|
import { useCanvasStore } from '../stores/canvas'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
|
|
const canvasStore = useCanvasStore()
|
|
|
|
const isOpen = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val)
|
|
})
|
|
|
|
// Recording state
|
|
const isRecording = ref(false)
|
|
const transcript = ref('')
|
|
const interimTranscript = ref('')
|
|
const error = ref('')
|
|
|
|
// Typing animation state
|
|
const animatedTranscript = ref('')
|
|
let typingTimeout: number | null = null
|
|
let lastAnimatedLength = 0
|
|
|
|
// Position and drag state
|
|
const position = ref({ x: 0, y: 0 })
|
|
const hasCustomPosition = ref(false)
|
|
const isDragging = ref(false)
|
|
const dragOffset = ref({ x: 0, y: 0 })
|
|
const containerRef = ref<HTMLElement | null>(null)
|
|
|
|
// Speech recognition (Web Speech API)
|
|
let recognition: SpeechRecognition | null = null
|
|
|
|
// WebSocket connection to terminal
|
|
const WS_URL = `ws://${window.location.hostname}:4103`
|
|
let socket: WebSocket | null = null
|
|
const connected = ref(false)
|
|
|
|
// Push-to-talk state (Ctrl+Space)
|
|
let keyDownTime = 0
|
|
let holdTimeout: number | null = null
|
|
const isPushToTalk = ref(false)
|
|
let pendingWhisperSend = false // Flag to send transcript when Whisper responds
|
|
|
|
// ============ WHISPER MODE ============
|
|
const useWhisper = ref(false)
|
|
const whisperReady = ref(false)
|
|
const whisperLoading = ref(false)
|
|
const WHISPER_WS_URL = `ws://${window.location.hostname}:4104`
|
|
let whisperSocket: WebSocket | null = null
|
|
let mediaRecorder: MediaRecorder | null = null
|
|
let audioChunks: Blob[] = []
|
|
let lastTranscriptLength = 0 // Track length of last transcription to show only new text
|
|
let chunkInterval: number | null = null
|
|
const CHUNK_INTERVAL_MS = 3000 // Send audio every 3 seconds
|
|
let mediaStream: MediaStream | null = null
|
|
|
|
// ============ MICROPHONE SELECTION ============
|
|
const audioDevices = ref<MediaDeviceInfo[]>([])
|
|
const selectedDeviceId = ref<string>('')
|
|
const showMicSelector = ref(false)
|
|
|
|
// ============ AUDIO PLAYBACK (DEBUG) ============
|
|
const lastAudioUrl = ref<string>('')
|
|
const isPlayingAudio = ref(false)
|
|
let audioElement: HTMLAudioElement | null = null
|
|
let recordingStartTime = 0
|
|
|
|
function playLastAudio() {
|
|
if (!lastAudioUrl.value) return
|
|
|
|
if (isPlayingAudio.value && audioElement) {
|
|
audioElement.pause()
|
|
audioElement.currentTime = 0
|
|
isPlayingAudio.value = false
|
|
return
|
|
}
|
|
|
|
audioElement = new Audio(lastAudioUrl.value)
|
|
audioElement.onplay = () => { isPlayingAudio.value = true }
|
|
audioElement.onended = () => { isPlayingAudio.value = false }
|
|
audioElement.onpause = () => { isPlayingAudio.value = false }
|
|
audioElement.play().catch(e => {
|
|
console.error('[Voice] Failed to play audio:', e)
|
|
isPlayingAudio.value = false
|
|
})
|
|
}
|
|
|
|
function saveAudioForPlayback(blob: Blob) {
|
|
// Revoke previous URL to free memory
|
|
if (lastAudioUrl.value) {
|
|
URL.revokeObjectURL(lastAudioUrl.value)
|
|
}
|
|
lastAudioUrl.value = URL.createObjectURL(blob)
|
|
|
|
// Also save to backend for training data
|
|
saveRecordingToBackend(blob)
|
|
}
|
|
|
|
async function saveRecordingToBackend(blob: Blob) {
|
|
try {
|
|
const duration_ms = Date.now() - recordingStartTime
|
|
const reader = new FileReader()
|
|
|
|
reader.onloadend = async () => {
|
|
const base64 = (reader.result as string).split(',')[1]
|
|
|
|
const response = await fetch(`http://${window.location.hostname}:4100/api/recordings`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
audio: base64,
|
|
transcription: transcript.value.trim(),
|
|
microphone: currentMicName.value,
|
|
duration_ms
|
|
})
|
|
})
|
|
|
|
const data = await response.json()
|
|
if (data.success) {
|
|
console.log(`[Voice] Recording saved: ${data.filename} (${(data.size / 1024).toFixed(1)} KB)`)
|
|
} else {
|
|
console.error('[Voice] Failed to save recording:', data.error)
|
|
}
|
|
}
|
|
|
|
reader.readAsDataURL(blob)
|
|
} catch (e) {
|
|
console.error('[Voice] Error saving recording:', e)
|
|
}
|
|
}
|
|
|
|
const currentMicName = computed(() => {
|
|
if (!selectedDeviceId.value) return 'Default'
|
|
const device = audioDevices.value.find(d => d.deviceId === selectedDeviceId.value)
|
|
return device?.label || 'Microphone'
|
|
})
|
|
|
|
async function loadAudioDevices() {
|
|
try {
|
|
// Request permission first to get device labels
|
|
const tempStream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
|
tempStream.getTracks().forEach(track => track.stop())
|
|
|
|
const devices = await navigator.mediaDevices.enumerateDevices()
|
|
audioDevices.value = devices.filter(d => d.kind === 'audioinput')
|
|
|
|
// Set default device if none selected
|
|
if (!selectedDeviceId.value && audioDevices.value.length > 0) {
|
|
selectedDeviceId.value = audioDevices.value[0]?.deviceId || ''
|
|
}
|
|
} catch (e) {
|
|
console.error('[Voice] Failed to enumerate devices:', e)
|
|
}
|
|
}
|
|
|
|
function selectMicrophone(deviceId: string) {
|
|
selectedDeviceId.value = deviceId
|
|
showMicSelector.value = false
|
|
|
|
// If currently recording, restart with new device
|
|
if (isRecording.value) {
|
|
stopRecording()
|
|
setTimeout(() => startRecording(), 100)
|
|
}
|
|
}
|
|
|
|
function closeMicSelector(e: MouseEvent) {
|
|
const target = e.target as HTMLElement
|
|
if (!target.closest('.mic-bar') && !target.closest('.mic-dropdown')) {
|
|
showMicSelector.value = false
|
|
}
|
|
}
|
|
|
|
const displayText = computed(() => {
|
|
if (interimTranscript.value) {
|
|
return transcript.value + ' ' + interimTranscript.value
|
|
}
|
|
return transcript.value || 'Presiona el micrófono o mantén Ctrl+Space...'
|
|
})
|
|
|
|
const containerStyle = computed(() => {
|
|
if (!hasCustomPosition.value) {
|
|
return { bottom: '80px', left: '16px' }
|
|
}
|
|
return {
|
|
top: `${position.value.y}px`,
|
|
left: `${position.value.x}px`,
|
|
bottom: 'auto',
|
|
right: 'auto'
|
|
}
|
|
})
|
|
|
|
function initRecognition() {
|
|
const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
|
|
|
|
if (!SpeechRecognition) {
|
|
error.value = 'Speech recognition not supported in this browser'
|
|
return null
|
|
}
|
|
|
|
const rec = new SpeechRecognition()
|
|
rec.continuous = true
|
|
rec.interimResults = true
|
|
rec.lang = 'es-419' // Latin American Spanish (better for accents)
|
|
|
|
rec.onresult = (event: SpeechRecognitionEvent) => {
|
|
let interim = ''
|
|
let final = ''
|
|
|
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
const result = event.results[i]
|
|
if (result.isFinal) {
|
|
final += result[0].transcript + ' '
|
|
} else {
|
|
interim += result[0].transcript
|
|
}
|
|
}
|
|
|
|
if (final) {
|
|
transcript.value += final
|
|
}
|
|
interimTranscript.value = interim
|
|
}
|
|
|
|
rec.onerror = (event: SpeechRecognitionErrorEvent) => {
|
|
console.error('[Voice] Recognition error:', event.error)
|
|
if (event.error === 'not-allowed') {
|
|
error.value = 'Microphone access denied'
|
|
} else {
|
|
error.value = `Error: ${event.error}`
|
|
}
|
|
isRecording.value = false
|
|
}
|
|
|
|
rec.onend = () => {
|
|
if (isRecording.value && !useWhisper.value) {
|
|
// Restart if still recording (browser stops after silence)
|
|
rec.start()
|
|
}
|
|
}
|
|
|
|
return rec
|
|
}
|
|
|
|
// ============ WHISPER FUNCTIONS ============
|
|
|
|
async function checkWhisperStatus(updateLoading = true) {
|
|
try {
|
|
const res = await fetch(`http://${window.location.hostname}:4100/api/whisper/status`)
|
|
const data = await res.json()
|
|
useWhisper.value = data.enabled
|
|
whisperReady.value = data.running
|
|
if (updateLoading) {
|
|
whisperLoading.value = data.starting || false
|
|
}
|
|
return data
|
|
} catch {
|
|
useWhisper.value = false
|
|
whisperReady.value = false
|
|
if (updateLoading) {
|
|
whisperLoading.value = false
|
|
}
|
|
return null
|
|
}
|
|
}
|
|
|
|
async function toggleWhisperMode() {
|
|
// Prevent multiple clicks
|
|
if (whisperLoading.value) {
|
|
console.log('[Voice] Toggle already in progress, ignoring')
|
|
return
|
|
}
|
|
|
|
whisperLoading.value = true
|
|
error.value = ''
|
|
|
|
// Show immediate feedback
|
|
if (!useWhisper.value) {
|
|
canvasStore.showNotification('Starting Whisper GPU server...', 'info', 10000)
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(`http://${window.location.hostname}:4100/api/whisper/toggle`, {
|
|
method: 'POST'
|
|
})
|
|
const data = await res.json()
|
|
|
|
// Server is starting - poll until ready
|
|
if (data.starting) {
|
|
console.log('[Voice] Server starting, polling for status...')
|
|
await pollWhisperStatus()
|
|
return
|
|
}
|
|
|
|
useWhisper.value = data.enabled
|
|
whisperReady.value = data.running
|
|
|
|
if (data.enabled) {
|
|
canvasStore.showNotification('Whisper GPU ready!', 'success')
|
|
connectWhisperSocket()
|
|
} else {
|
|
canvasStore.showNotification('Using Web Speech API', 'info')
|
|
disconnectWhisperSocket()
|
|
}
|
|
} catch (e: any) {
|
|
error.value = 'Failed to toggle Whisper'
|
|
canvasStore.showNotification('Error starting Whisper server', 'error')
|
|
console.error('[Voice] Whisper toggle error:', e)
|
|
} finally {
|
|
whisperLoading.value = false
|
|
}
|
|
}
|
|
|
|
// Poll server status until ready or failed
|
|
async function pollWhisperStatus() {
|
|
const maxAttempts = 60 // 2 minutes max
|
|
let attempts = 0
|
|
|
|
while (attempts < maxAttempts) {
|
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
|
attempts++
|
|
|
|
try {
|
|
const status = await checkWhisperStatus(false) // Don't update loading state
|
|
|
|
if (!status) {
|
|
console.log('[Voice] Failed to get status')
|
|
continue
|
|
}
|
|
|
|
// Still starting
|
|
if (status.starting) {
|
|
console.log(`[Voice] Still starting... (${attempts * 2}s)`)
|
|
continue
|
|
}
|
|
|
|
// Started successfully
|
|
if (status.running && status.enabled) {
|
|
console.log('[Voice] Server ready!')
|
|
canvasStore.showNotification('Whisper GPU ready!', 'success')
|
|
connectWhisperSocket()
|
|
whisperLoading.value = false
|
|
return
|
|
}
|
|
|
|
// Failed to start
|
|
console.log('[Voice] Server failed to start')
|
|
canvasStore.showNotification('Whisper server failed to start', 'error')
|
|
whisperLoading.value = false
|
|
return
|
|
|
|
} catch (e) {
|
|
console.error('[Voice] Polling error:', e)
|
|
}
|
|
}
|
|
|
|
// Timeout
|
|
canvasStore.showNotification('Whisper server timeout', 'error')
|
|
whisperLoading.value = false
|
|
}
|
|
|
|
function connectWhisperSocket() {
|
|
if (whisperSocket?.readyState === WebSocket.OPEN) return
|
|
|
|
console.log('[Voice] Connecting to Whisper server...')
|
|
whisperSocket = new WebSocket(WHISPER_WS_URL)
|
|
|
|
whisperSocket.onopen = () => {
|
|
console.log('[Voice] Whisper WebSocket connected')
|
|
whisperReady.value = true
|
|
}
|
|
|
|
whisperSocket.onmessage = (event) => {
|
|
try {
|
|
const msg = JSON.parse(event.data)
|
|
|
|
if (msg.type === 'ready') {
|
|
console.log('[Voice] Whisper ready:', msg.model, msg.device)
|
|
whisperReady.value = true
|
|
} else if (msg.type === 'transcription') {
|
|
if (msg.success && msg.text) {
|
|
const fullText = msg.text.trim()
|
|
|
|
if (msg.partial) {
|
|
// For partial results, show full accumulated transcription
|
|
transcript.value = fullText + ' '
|
|
interimTranscript.value = ''
|
|
console.log(`[Voice] 🔄 WHISPER partial:`, fullText)
|
|
} else {
|
|
// Final result
|
|
transcript.value = fullText + ' '
|
|
interimTranscript.value = ''
|
|
console.log(`[Voice] 🎯 WHISPER-GPU (${msg.model}/${msg.device}):`, fullText)
|
|
|
|
// Auto-send if push-to-talk was waiting for this
|
|
if (pendingWhisperSend) {
|
|
pendingWhisperSend = false
|
|
console.log('[Voice] Whisper response received, sending transcript')
|
|
if (transcript.value.trim()) {
|
|
sendTranscriptAndClose()
|
|
} else {
|
|
isPushToTalk.value = false
|
|
close()
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update last transcript length for next partial
|
|
lastTranscriptLength = fullText.length
|
|
} else if (msg.error) {
|
|
error.value = msg.error
|
|
console.error('[Voice] Whisper error:', msg.error)
|
|
// Clear pending send on error
|
|
if (pendingWhisperSend) {
|
|
pendingWhisperSend = false
|
|
isPushToTalk.value = false
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('[Voice] Whisper message error:', e)
|
|
}
|
|
}
|
|
|
|
whisperSocket.onclose = () => {
|
|
console.log('[Voice] Whisper WebSocket closed')
|
|
whisperReady.value = false
|
|
}
|
|
|
|
whisperSocket.onerror = (e) => {
|
|
console.error('[Voice] Whisper WebSocket error:', e)
|
|
whisperReady.value = false
|
|
}
|
|
}
|
|
|
|
function disconnectWhisperSocket() {
|
|
if (whisperSocket) {
|
|
whisperSocket.close()
|
|
whisperSocket = null
|
|
}
|
|
whisperReady.value = false
|
|
}
|
|
|
|
async function startWhisperRecording() {
|
|
try {
|
|
const audioConstraints: MediaTrackConstraints = selectedDeviceId.value
|
|
? { deviceId: { exact: selectedDeviceId.value } }
|
|
: {}
|
|
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: audioConstraints })
|
|
|
|
mediaRecorder = new MediaRecorder(mediaStream, {
|
|
mimeType: 'audio/webm;codecs=opus'
|
|
})
|
|
|
|
audioChunks = []
|
|
|
|
mediaRecorder.ondataavailable = (event) => {
|
|
if (event.data.size > 0) {
|
|
audioChunks.push(event.data)
|
|
}
|
|
}
|
|
|
|
// Reset state for new recording
|
|
audioChunks = []
|
|
lastTranscriptLength = 0
|
|
|
|
// Start recording
|
|
mediaRecorder.start(100) // Collect data every 100ms
|
|
isRecording.value = true
|
|
recordingStartTime = Date.now()
|
|
|
|
// Send chunks periodically for progressive transcription
|
|
chunkInterval = window.setInterval(() => {
|
|
if (audioChunks.length > 0 && whisperSocket?.readyState === WebSocket.OPEN) {
|
|
sendAudioChunk(false) // false = partial, don't clear
|
|
}
|
|
}, CHUNK_INTERVAL_MS)
|
|
|
|
} catch (e: any) {
|
|
error.value = `Microphone error: ${e.message}`
|
|
console.error('[Voice] Microphone error:', e)
|
|
}
|
|
}
|
|
|
|
function sendAudioChunk(isFinal: boolean) {
|
|
if (audioChunks.length === 0) return
|
|
|
|
// Always send ALL accumulated audio (webm needs header from first chunk)
|
|
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
|
|
const chunkCount = audioChunks.length
|
|
|
|
// Skip if audio is too small (< 5KB) - WebM header alone is ~1-2KB
|
|
if (audioBlob.size < 5000) {
|
|
console.log(`[Voice] Skipping small chunk (${audioBlob.size} bytes)`)
|
|
if (isFinal) {
|
|
audioChunks = []
|
|
}
|
|
return
|
|
}
|
|
|
|
// Clear chunks only if final
|
|
if (isFinal) {
|
|
audioChunks = []
|
|
lastTranscriptLength = 0
|
|
// Save audio for playback debugging
|
|
saveAudioForPlayback(audioBlob)
|
|
}
|
|
|
|
const reader = new FileReader()
|
|
reader.onloadend = () => {
|
|
const base64 = (reader.result as string).split(',')[1]
|
|
|
|
if (whisperSocket?.readyState === WebSocket.OPEN) {
|
|
whisperSocket.send(JSON.stringify({
|
|
type: 'transcribe',
|
|
audio: base64,
|
|
language: 'es',
|
|
partial: !isFinal
|
|
}))
|
|
console.log(`[Voice] Sent ${isFinal ? 'FINAL' : 'partial'} audio (${chunkCount} chunks, ${audioBlob.size} bytes)`)
|
|
}
|
|
}
|
|
reader.readAsDataURL(audioBlob)
|
|
}
|
|
|
|
function stopWhisperRecording() {
|
|
// Clear the chunk interval
|
|
if (chunkInterval) {
|
|
clearInterval(chunkInterval)
|
|
chunkInterval = null
|
|
}
|
|
|
|
// Send final chunk
|
|
if (audioChunks.length > 0) {
|
|
sendAudioChunk(true) // true = final
|
|
}
|
|
|
|
// Stop recorder
|
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
|
mediaRecorder.stop()
|
|
}
|
|
|
|
// Stop media stream
|
|
if (mediaStream) {
|
|
mediaStream.getTracks().forEach(track => track.stop())
|
|
mediaStream = null
|
|
}
|
|
|
|
isRecording.value = false
|
|
}
|
|
|
|
function toggleRecording() {
|
|
if (isRecording.value) {
|
|
stopRecording()
|
|
} else {
|
|
startRecording()
|
|
}
|
|
}
|
|
|
|
function startRecording() {
|
|
error.value = ''
|
|
|
|
if (useWhisper.value && whisperReady.value) {
|
|
// Use Whisper GPU mode
|
|
startWhisperRecording()
|
|
} else {
|
|
// Use Web Speech API
|
|
if (!recognition) {
|
|
recognition = initRecognition()
|
|
}
|
|
if (recognition) {
|
|
try {
|
|
recognition.start()
|
|
isRecording.value = true
|
|
} catch (e) {
|
|
console.error('[Voice] Failed to start:', e)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function stopRecording() {
|
|
if (useWhisper.value) {
|
|
stopWhisperRecording()
|
|
} else {
|
|
if (recognition) {
|
|
recognition.stop()
|
|
}
|
|
isRecording.value = false
|
|
}
|
|
interimTranscript.value = ''
|
|
}
|
|
|
|
function clearTranscript() {
|
|
transcript.value = ''
|
|
interimTranscript.value = ''
|
|
animatedTranscript.value = ''
|
|
lastAnimatedLength = 0
|
|
if (typingTimeout) {
|
|
clearTimeout(typingTimeout)
|
|
typingTimeout = null
|
|
}
|
|
}
|
|
|
|
function connectSocket() {
|
|
console.log('[Voice] connectSocket called, current socket:', socket?.readyState)
|
|
if (socket && socket.readyState === WebSocket.OPEN) return
|
|
|
|
socket = new WebSocket(WS_URL)
|
|
|
|
socket.onopen = () => {
|
|
console.log('[Voice] WebSocket connected, readyState:', socket?.readyState)
|
|
connected.value = true
|
|
}
|
|
|
|
socket.onclose = () => {
|
|
console.log('[Voice] WebSocket closed')
|
|
connected.value = false
|
|
socket = null
|
|
}
|
|
|
|
socket.onerror = (e) => {
|
|
console.error('[Voice] WebSocket error:', e)
|
|
connected.value = false
|
|
}
|
|
}
|
|
|
|
function disconnectSocket() {
|
|
if (socket) {
|
|
socket.close()
|
|
socket = null
|
|
connected.value = false
|
|
}
|
|
}
|
|
|
|
function sendTranscript() {
|
|
const text = transcript.value.trim()
|
|
if (!text) return
|
|
|
|
if (!socket || socket.readyState !== WebSocket.OPEN) {
|
|
canvasStore.showNotification('Not connected to terminal', 'error')
|
|
return
|
|
}
|
|
|
|
// Send text character by character then Enter
|
|
const chars = (text + '\r').split('')
|
|
let i = 0
|
|
const typeChar = () => {
|
|
if (i < chars.length && socket && socket.readyState === WebSocket.OPEN) {
|
|
socket.send(JSON.stringify({ type: 'input', data: chars[i] }))
|
|
i++
|
|
setTimeout(typeChar, 15)
|
|
} else if (i >= chars.length) {
|
|
canvasStore.showNotification('Voice message sent', 'success')
|
|
clearTranscript()
|
|
close()
|
|
}
|
|
}
|
|
typeChar()
|
|
}
|
|
|
|
function close() {
|
|
stopRecording()
|
|
clearTranscript()
|
|
isOpen.value = false
|
|
}
|
|
|
|
// Drag handlers
|
|
function startDrag(e: MouseEvent) {
|
|
if ((e.target as HTMLElement).closest('.window-controls')) return
|
|
|
|
isDragging.value = true
|
|
const rect = containerRef.value?.getBoundingClientRect()
|
|
if (rect) {
|
|
dragOffset.value = {
|
|
x: e.clientX - rect.left,
|
|
y: e.clientY - rect.top
|
|
}
|
|
}
|
|
document.addEventListener('mousemove', onDrag)
|
|
document.addEventListener('mouseup', stopDrag)
|
|
}
|
|
|
|
function onDrag(e: MouseEvent) {
|
|
if (!isDragging.value) return
|
|
|
|
const w = containerRef.value?.offsetWidth || 300
|
|
const h = containerRef.value?.offsetHeight || 200
|
|
|
|
const minX = -w * 0.75
|
|
const maxX = window.innerWidth - w * 0.25
|
|
const minY = -h * 0.75
|
|
const maxY = window.innerHeight - h * 0.25
|
|
|
|
position.value = {
|
|
x: Math.max(minX, Math.min(e.clientX - dragOffset.value.x, maxX)),
|
|
y: Math.max(minY, Math.min(e.clientY - dragOffset.value.y, maxY))
|
|
}
|
|
hasCustomPosition.value = true
|
|
}
|
|
|
|
function stopDrag() {
|
|
isDragging.value = false
|
|
document.removeEventListener('mousemove', onDrag)
|
|
document.removeEventListener('mouseup', stopDrag)
|
|
}
|
|
|
|
// Keyboard shortcut handlers (Ctrl+Space)
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
if (e.ctrlKey && e.key === ' ') {
|
|
e.preventDefault()
|
|
e.stopImmediatePropagation() // Prevent terminal and other handlers from receiving
|
|
|
|
// Ignore if already holding
|
|
if (keyDownTime > 0) return
|
|
|
|
keyDownTime = Date.now()
|
|
|
|
// Open panel and connect if not open
|
|
if (!isOpen.value) {
|
|
isOpen.value = true
|
|
}
|
|
|
|
// Start recording after 150ms hold
|
|
holdTimeout = window.setTimeout(() => {
|
|
if (keyDownTime > 0 && !isRecording.value) {
|
|
isPushToTalk.value = true
|
|
startRecording()
|
|
}
|
|
}, 150)
|
|
}
|
|
}
|
|
|
|
function handleKeyUp(e: KeyboardEvent) {
|
|
// Only react to Space release when Ctrl+Space was pressed
|
|
if (e.key === ' ' && keyDownTime > 0) {
|
|
e.preventDefault()
|
|
e.stopImmediatePropagation() // Prevent terminal and other handlers from receiving
|
|
console.log('[Voice] Key S released, isPushToTalk:', isPushToTalk.value, 'isRecording:', isRecording.value)
|
|
|
|
if (holdTimeout) {
|
|
clearTimeout(holdTimeout)
|
|
holdTimeout = null
|
|
}
|
|
|
|
// If was push-to-talk recording, continue recording for 1.5s buffer then stop
|
|
if (isPushToTalk.value && isRecording.value) {
|
|
console.log('[Voice] Key released, continuing recording for 1.5s buffer...')
|
|
|
|
// Keep recording for 1.5s more (UX buffer for trailing words)
|
|
setTimeout(() => {
|
|
console.log('[Voice] Buffer complete, stopping recording')
|
|
stopRecording()
|
|
|
|
if (useWhisper.value) {
|
|
// For Whisper: wait for server response (handled in onmessage)
|
|
console.log('[Voice] Waiting for Whisper transcription...')
|
|
pendingWhisperSend = true
|
|
} else {
|
|
// For Web Speech API: send after short delay for final results
|
|
setTimeout(() => {
|
|
if (transcript.value.trim()) {
|
|
sendTranscriptAndClose()
|
|
} else {
|
|
isPushToTalk.value = false
|
|
close()
|
|
}
|
|
}, 300)
|
|
}
|
|
}, 1500)
|
|
}
|
|
|
|
keyDownTime = 0
|
|
}
|
|
}
|
|
|
|
// Send and close for push-to-talk mode
|
|
function sendTranscriptAndClose() {
|
|
console.log('[Voice] sendTranscriptAndClose called')
|
|
const text = transcript.value.trim()
|
|
if (!text) {
|
|
console.log('[Voice] No text, closing')
|
|
isPushToTalk.value = false
|
|
close()
|
|
return
|
|
}
|
|
|
|
console.log('[Voice] Text to send:', text)
|
|
console.log('[Voice] Socket:', socket, 'readyState:', socket?.readyState)
|
|
|
|
if (!socket || socket.readyState !== WebSocket.OPEN) {
|
|
canvasStore.showNotification('Not connected to terminal', 'error')
|
|
isPushToTalk.value = false
|
|
return
|
|
}
|
|
|
|
// Send text character by character then Enter
|
|
const chars = (text + '\r').split('')
|
|
let i = 0
|
|
const typeChar = () => {
|
|
if (i < chars.length && socket && socket.readyState === WebSocket.OPEN) {
|
|
socket.send(JSON.stringify({ type: 'input', data: chars[i] }))
|
|
i++
|
|
setTimeout(typeChar, 15)
|
|
} else if (i >= chars.length) {
|
|
canvasStore.showNotification('Voice message sent', 'success')
|
|
clearTranscript()
|
|
isPushToTalk.value = false
|
|
close()
|
|
}
|
|
}
|
|
typeChar()
|
|
}
|
|
|
|
// Typing animation effect
|
|
function animateTyping(targetText: string) {
|
|
// Clear any pending animation
|
|
if (typingTimeout) {
|
|
clearTimeout(typingTimeout)
|
|
typingTimeout = null
|
|
}
|
|
|
|
// If new text is shorter, just set it (user cleared or correction)
|
|
if (targetText.length < animatedTranscript.value.length) {
|
|
animatedTranscript.value = targetText
|
|
lastAnimatedLength = targetText.length
|
|
return
|
|
}
|
|
|
|
// Start from where we left off
|
|
const startIndex = lastAnimatedLength
|
|
|
|
// Type remaining characters one by one
|
|
function typeNext(index: number) {
|
|
if (index <= targetText.length) {
|
|
animatedTranscript.value = targetText.substring(0, index)
|
|
lastAnimatedLength = index
|
|
|
|
if (index < targetText.length) {
|
|
// Faster typing speed: 15-25ms per character
|
|
const delay = 15 + Math.random() * 10
|
|
typingTimeout = window.setTimeout(() => typeNext(index + 1), delay)
|
|
}
|
|
}
|
|
}
|
|
|
|
typeNext(startIndex)
|
|
}
|
|
|
|
// Watch transcript changes for typing animation
|
|
watch(transcript, (newVal) => {
|
|
animateTyping(newVal)
|
|
})
|
|
|
|
onMounted(async () => {
|
|
recognition = initRecognition()
|
|
// Use capture phase to intercept before terminal or other elements
|
|
document.addEventListener('keydown', handleKeyDown, { capture: true })
|
|
document.addEventListener('keyup', handleKeyUp, { capture: true })
|
|
|
|
// Load available audio devices
|
|
await loadAudioDevices()
|
|
|
|
// Check Whisper status on mount
|
|
const status = await checkWhisperStatus()
|
|
|
|
// If server is starting (page was reloaded during startup), continue polling
|
|
if (status?.starting) {
|
|
console.log('[Voice] Server is starting, resuming polling...')
|
|
pollWhisperStatus()
|
|
} else if (useWhisper.value) {
|
|
connectWhisperSocket()
|
|
}
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
stopRecording()
|
|
recognition = null
|
|
disconnectSocket()
|
|
disconnectWhisperSocket()
|
|
if (chunkInterval) clearInterval(chunkInterval)
|
|
if (typingTimeout) clearTimeout(typingTimeout)
|
|
if (mediaStream) {
|
|
mediaStream.getTracks().forEach(track => track.stop())
|
|
}
|
|
// Clean up audio playback
|
|
if (audioElement) {
|
|
audioElement.pause()
|
|
audioElement = null
|
|
}
|
|
if (lastAudioUrl.value) {
|
|
URL.revokeObjectURL(lastAudioUrl.value)
|
|
}
|
|
document.removeEventListener('keydown', handleKeyDown, { capture: true })
|
|
document.removeEventListener('keyup', handleKeyUp, { capture: true })
|
|
document.removeEventListener('mousemove', onDrag)
|
|
document.removeEventListener('mouseup', stopDrag)
|
|
document.removeEventListener('click', closeMicSelector)
|
|
if (holdTimeout) clearTimeout(holdTimeout)
|
|
})
|
|
|
|
// Connect when panel opens, disconnect when closes
|
|
watch(isOpen, (open) => {
|
|
if (open) {
|
|
connectSocket()
|
|
document.addEventListener('click', closeMicSelector)
|
|
} else {
|
|
disconnectSocket()
|
|
showMicSelector.value = false
|
|
document.removeEventListener('click', closeMicSelector)
|
|
}
|
|
})
|
|
|
|
// Expose methods
|
|
defineExpose({
|
|
open: () => { isOpen.value = true },
|
|
close,
|
|
startRecording,
|
|
stopRecording,
|
|
getTranscript: () => transcript.value
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition name="voice-slide">
|
|
<div
|
|
v-if="isOpen"
|
|
ref="containerRef"
|
|
class="voice-window"
|
|
:class="{ dragging: isDragging }"
|
|
:style="containerStyle"
|
|
>
|
|
<div class="glass">
|
|
<!-- Titlebar -->
|
|
<div class="titlebar" @mousedown="startDrag">
|
|
<div class="left">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
|
<line x1="12" y1="19" x2="12" y2="23"/>
|
|
<line x1="8" y1="23" x2="16" y2="23"/>
|
|
</svg>
|
|
<span>Voice</span>
|
|
<i class="dot" :class="{ recording: isRecording, ptt: isPushToTalk }"></i>
|
|
<span class="mode-badge" :class="{ gpu: useWhisper }">
|
|
{{ useWhisper ? 'GPU' : 'Web' }}
|
|
</span>
|
|
</div>
|
|
<div class="window-controls">
|
|
<button
|
|
class="whisper-toggle"
|
|
:class="{ active: useWhisper, loading: whisperLoading }"
|
|
:disabled="whisperLoading"
|
|
@click.stop="toggleWhisperMode"
|
|
:title="whisperLoading ? 'Starting Whisper server...' : (useWhisper ? 'Using Whisper GPU - Click to use Web Speech' : 'Using Web Speech - Click to use Whisper GPU')"
|
|
>
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="4" y="4" width="16" height="16" rx="2"/>
|
|
<line x1="9" y1="9" x2="9" y2="15"/>
|
|
<line x1="15" y1="9" x2="15" y2="15"/>
|
|
</svg>
|
|
</button>
|
|
<button class="x" @click="close" title="Close">
|
|
<svg width="8" height="8" viewBox="0 0 10 10">
|
|
<line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
|
<line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.5"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microphone Info Bar -->
|
|
<div
|
|
class="mic-bar"
|
|
:class="{ disabled: !useWhisper }"
|
|
@click.stop="useWhisper ? (showMicSelector = !showMicSelector) : null"
|
|
:title="useWhisper ? 'Click to change microphone' : 'Microphone selection only available with Whisper GPU'"
|
|
>
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
</svg>
|
|
<span class="mic-name">{{ useWhisper ? currentMicName : 'System Default' }}</span>
|
|
<template v-if="useWhisper">
|
|
<svg class="chevron" :class="{ open: showMicSelector }" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</template>
|
|
<span v-else class="mic-note">(Web API)</span>
|
|
</div>
|
|
|
|
<!-- Microphone Selector Dropdown -->
|
|
<Transition name="dropdown">
|
|
<div v-if="showMicSelector" class="mic-dropdown">
|
|
<div
|
|
v-for="device in audioDevices"
|
|
:key="device.deviceId"
|
|
class="mic-option"
|
|
:class="{ active: device.deviceId === selectedDeviceId }"
|
|
@click.stop="selectMicrophone(device.deviceId)"
|
|
>
|
|
<svg v-if="device.deviceId === selectedDeviceId" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
<span>{{ device.label || `Microphone ${audioDevices.indexOf(device) + 1}` }}</span>
|
|
</div>
|
|
<div v-if="audioDevices.length === 0" class="mic-option disabled">
|
|
No microphones found
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Content -->
|
|
<div class="content">
|
|
<div class="transcript" :class="{ empty: !animatedTranscript && !interimTranscript }">
|
|
<span class="final">{{ animatedTranscript }}</span><span class="cursor" v-if="animatedTranscript && animatedTranscript.length < transcript.length">|</span>
|
|
<span class="interim">{{ interimTranscript }}</span>
|
|
<span v-if="!animatedTranscript && !interimTranscript" class="placeholder">
|
|
Presiona el micrófono o mantén Ctrl+Space...
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="error" class="error">{{ error }}</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="controls">
|
|
<button
|
|
class="rec-btn"
|
|
:class="{ active: isRecording }"
|
|
@click="toggleRecording"
|
|
:title="isRecording ? 'Stop' : 'Record'"
|
|
>
|
|
<svg v-if="!isRecording" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="12" y1="19" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="8" y1="23" x2="16" y2="23" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<rect x="6" y="6" width="12" height="12" rx="2"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="action-btn" @click="clearTranscript" title="Clear" :disabled="!transcript">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="3 6 5 6 21 6"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
class="action-btn play"
|
|
:class="{ playing: isPlayingAudio }"
|
|
@click="playLastAudio"
|
|
title="Play last audio"
|
|
:disabled="!lastAudioUrl"
|
|
>
|
|
<svg v-if="!isPlayingAudio" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<polygon points="5 3 19 12 5 21 5 3"/>
|
|
</svg>
|
|
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<rect x="6" y="4" width="4" height="16"/>
|
|
<rect x="14" y="4" width="4" height="16"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
class="action-btn send"
|
|
@click="sendTranscript"
|
|
title="Send to Claude"
|
|
:disabled="!transcript.trim()"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"/>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
|
</svg>
|
|
<span>Send</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.voice-window {
|
|
position: fixed;
|
|
width: 320px;
|
|
z-index: 9998;
|
|
}
|
|
|
|
.voice-window.dragging {
|
|
user-select: none;
|
|
}
|
|
|
|
.glass {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgba(200, 215, 235, 0.35);
|
|
backdrop-filter: blur(24px) saturate(1.6);
|
|
-webkit-backdrop-filter: blur(24px) saturate(1.6);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
box-shadow:
|
|
0 0 0 1px rgba(80, 120, 180, 0.25),
|
|
0 6px 24px rgba(0, 0, 0, 0.25),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
overflow: visible;
|
|
}
|
|
|
|
.titlebar {
|
|
height: 26px;
|
|
padding: 0 6px;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.titlebar:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #222;
|
|
font: 500 11px/1 system-ui, sans-serif;
|
|
}
|
|
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #999;
|
|
}
|
|
|
|
.dot.recording {
|
|
background: #e33;
|
|
box-shadow: 0 0 6px #e33;
|
|
animation: pulse 0.8s infinite;
|
|
}
|
|
|
|
.dot.ptt {
|
|
background: #f90;
|
|
box-shadow: 0 0 6px #f90;
|
|
}
|
|
|
|
.mode-badge {
|
|
font-size: 8px;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
color: #555;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.mode-badge.gpu {
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
|
color: #fff;
|
|
box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.whisper-toggle {
|
|
width: 20px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 3px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.whisper-toggle:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.whisper-toggle:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.whisper-toggle.active {
|
|
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
|
|
border-color: #047857;
|
|
color: #fff;
|
|
}
|
|
|
|
.whisper-toggle.loading {
|
|
animation: pulse 0.6s infinite;
|
|
background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
|
|
border-color: #b45309;
|
|
color: #fff;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.window-controls {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.window-controls button {
|
|
width: 20px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 3px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.window-controls button:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.window-controls button.x:hover {
|
|
background: linear-gradient(180deg, #e66 0%, #c33 100%);
|
|
border-color: #a22;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Microphone Bar */
|
|
.mic-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
color: #444;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.mic-bar:hover:not(.disabled) {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.mic-bar.disabled {
|
|
cursor: default;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.mic-note {
|
|
font-size: 9px;
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
.mic-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mic-bar .chevron {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.mic-bar .chevron.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Microphone Dropdown */
|
|
.mic-dropdown {
|
|
position: absolute;
|
|
top: 52px;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 0 0 6px 6px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
z-index: 10;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mic-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
font-size: 11px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
transition: background 0.1s;
|
|
}
|
|
|
|
.mic-option:hover:not(.disabled) {
|
|
background: rgba(74, 153, 153, 0.1);
|
|
}
|
|
|
|
.mic-option.active {
|
|
background: rgba(74, 153, 153, 0.15);
|
|
color: #2a7;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mic-option.disabled {
|
|
color: #999;
|
|
cursor: default;
|
|
font-style: italic;
|
|
}
|
|
|
|
.mic-option svg {
|
|
flex-shrink: 0;
|
|
color: #2a7;
|
|
}
|
|
|
|
.mic-option span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Staggered animation for mic options */
|
|
.mic-dropdown .mic-option {
|
|
animation: slideIn 0.2s ease forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.mic-dropdown .mic-option:nth-child(1) { animation-delay: 0.02s; }
|
|
.mic-dropdown .mic-option:nth-child(2) { animation-delay: 0.04s; }
|
|
.mic-dropdown .mic-option:nth-child(3) { animation-delay: 0.06s; }
|
|
.mic-dropdown .mic-option:nth-child(4) { animation-delay: 0.08s; }
|
|
.mic-dropdown .mic-option:nth-child(5) { animation-delay: 0.10s; }
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Dropdown transition */
|
|
.dropdown-enter-active {
|
|
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.dropdown-leave-active {
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 1, 1);
|
|
}
|
|
|
|
.dropdown-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scaleY(0.8);
|
|
transform-origin: top center;
|
|
}
|
|
|
|
.dropdown-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-6px) scaleY(0.9);
|
|
transform-origin: top center;
|
|
}
|
|
|
|
.content {
|
|
padding: 12px;
|
|
min-height: 80px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.transcript {
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: #222;
|
|
}
|
|
|
|
.transcript.empty {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.transcript .interim {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
.transcript .cursor {
|
|
color: #4a9;
|
|
font-weight: bold;
|
|
animation: blink 0.6s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.transcript .placeholder {
|
|
color: #888;
|
|
}
|
|
|
|
.error {
|
|
margin-top: 8px;
|
|
padding: 6px 10px;
|
|
background: rgba(220, 50, 50, 0.15);
|
|
border-radius: 4px;
|
|
color: #c33;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.rec-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(180deg, #f5f5f5 0%, #ddd 100%);
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
color: #333;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.rec-btn:hover {
|
|
background: linear-gradient(180deg, #fff 0%, #eee 100%);
|
|
}
|
|
|
|
.rec-btn.active {
|
|
background: linear-gradient(180deg, #e55 0%, #c33 100%);
|
|
border-color: #a22;
|
|
color: #fff;
|
|
animation: pulse 1s infinite;
|
|
}
|
|
|
|
.action-btn {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
border-radius: 4px;
|
|
color: #333;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.action-btn:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.action-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.action-btn.play {
|
|
background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
|
|
border-color: #374151;
|
|
color: #fff;
|
|
}
|
|
|
|
.action-btn.play:hover:not(:disabled) {
|
|
background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
|
|
}
|
|
|
|
.action-btn.play.playing {
|
|
background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
|
|
border-color: #b45309;
|
|
animation: pulse 1s infinite;
|
|
}
|
|
|
|
.action-btn.send {
|
|
margin-left: auto;
|
|
background: linear-gradient(180deg, #4a9 0%, #3a8 100%);
|
|
border-color: #2a7;
|
|
color: #fff;
|
|
}
|
|
|
|
.action-btn.send:hover:not(:disabled) {
|
|
background: linear-gradient(180deg, #5ba 0%, #4a9 100%);
|
|
}
|
|
|
|
/* Transitions */
|
|
.voice-slide-enter-active,
|
|
.voice-slide-leave-active {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.voice-slide-enter-from,
|
|
.voice-slide-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(16px) scale(0.95);
|
|
}
|
|
</style>
|