feat: Add transcript engine API and connect ConversationHistory to real data
- Add transcript-engine service that parses Claude Code JSONL transcripts with session listing, message extraction, token/stats analysis, and caching - Add transcript REST routes (sessions list, latest, by session ID, section filtering) - Rewrite ConversationHistory to fetch from /api/transcript/* instead of mock data - Add session pills for switching between conversation sessions - Add stats bar footer with model, duration, tokens, and tool count - Add TranscriptSession/TranscriptMessage types, ChatInput, InputSettings, PromptBar updates, TranscriptCard, and useVoiceCapture composable
This commit is contained in:
@@ -5,6 +5,7 @@ const props = defineProps<{
|
||||
placeholder?: string
|
||||
recording?: boolean
|
||||
historyActive?: boolean
|
||||
settingsActive?: boolean
|
||||
autofocus?: boolean
|
||||
}>()
|
||||
|
||||
@@ -12,6 +13,7 @@ const emit = defineEmits<{
|
||||
submit: [text: string]
|
||||
mic: []
|
||||
'toggle-history': []
|
||||
'toggle-settings': []
|
||||
}>()
|
||||
|
||||
const inputText = ref('')
|
||||
@@ -82,6 +84,17 @@ defineExpose({ focus })
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="ci-btn ci-settings"
|
||||
:class="{ active: settingsActive }"
|
||||
title="Voice settings"
|
||||
@click="emit('toggle-settings')"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -148,7 +161,8 @@ defineExpose({ focus })
|
||||
color: rgba(139, 92, 246, 0.9);
|
||||
}
|
||||
|
||||
.ci-history.active {
|
||||
.ci-history.active,
|
||||
.ci-settings.active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@@ -1,85 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import type { Agent, ConversationEntry } from '../../types/agent'
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import type { Agent, TranscriptSession, TranscriptMessage } from '../../types/agent'
|
||||
|
||||
defineProps<{
|
||||
agent: Agent
|
||||
}>()
|
||||
|
||||
const mockEntries: ConversationEntry[] = [
|
||||
{
|
||||
id: '1',
|
||||
role: 'user',
|
||||
content: 'Revisa el módulo de autenticación y encuentra los errores de validación de tokens.',
|
||||
timestamp: '14:32',
|
||||
method: 'voice'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
role: 'agent',
|
||||
content: 'Encontré 3 issues en el validador de tokens JWT: expiración no verificada en refresh, falta sanitización del header Authorization, y el middleware no maneja tokens revocados.',
|
||||
timestamp: '14:33',
|
||||
method: 'text'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
role: 'user',
|
||||
content: 'Corrige los tres problemas y agrega tests unitarios para cada caso.',
|
||||
timestamp: '14:35',
|
||||
method: 'text'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
role: 'agent',
|
||||
content: 'Corregidos los 3 issues. Se agregaron 8 tests unitarios cubriendo cada caso: token expirado, header malformado, token revocado, y sus variantes edge-case. Todos los tests pasan.',
|
||||
timestamp: '14:38',
|
||||
method: 'text'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
role: 'user',
|
||||
content: 'Ahora implementa un sistema de rate limiting para la API de login con un máximo de 5 intentos por minuto.',
|
||||
timestamp: '15:01',
|
||||
method: 'voice'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
role: 'agent',
|
||||
content: 'Rate limiter implementado usando sliding window en Redis. Configurado a 5 intentos/minuto por IP. Retorna HTTP 429 con header Retry-After cuando se excede el límite.',
|
||||
timestamp: '15:04',
|
||||
method: 'text'
|
||||
const sessions = ref<TranscriptSession[]>([])
|
||||
const activeSessionId = ref<string | null>(null)
|
||||
const messages = ref<TranscriptMessage[]>([])
|
||||
const stats = ref<{
|
||||
model: string
|
||||
duration: number
|
||||
toolCallCount: number
|
||||
totalInput: number
|
||||
totalOutput: number
|
||||
} | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
function formatSessionTime(iso: string): string {
|
||||
if (!iso) return '--:--'
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
|
||||
}
|
||||
|
||||
function formatDuration(ms: number): string {
|
||||
if (!ms || ms <= 0) return '0s'
|
||||
const totalSec = Math.floor(ms / 1000)
|
||||
const m = Math.floor(totalSec / 60)
|
||||
const s = totalSec % 60
|
||||
if (m === 0) return `${s}s`
|
||||
return `${m}m ${s}s`
|
||||
}
|
||||
|
||||
function formatTokens(n: number): string {
|
||||
if (!n || n <= 0) return '0'
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
|
||||
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
|
||||
return String(n)
|
||||
}
|
||||
|
||||
function shortModel(model: string): string {
|
||||
if (!model) return '?'
|
||||
if (model.includes('opus')) return 'opus-4'
|
||||
if (model.includes('sonnet')) return 'sonnet-4'
|
||||
if (model.includes('haiku')) return 'haiku-4'
|
||||
// Fallback: last segment
|
||||
const parts = model.split('-')
|
||||
return parts.slice(-2).join('-')
|
||||
}
|
||||
|
||||
function truncateContent(text: string, max = 200): string {
|
||||
if (!text || text.length <= max) return text || ''
|
||||
return text.slice(0, max) + '...'
|
||||
}
|
||||
|
||||
// ── Fetch helpers ──
|
||||
|
||||
function getBaseUrl(sessionId: string): string {
|
||||
const firstSession = sessions.value[0]
|
||||
if (firstSession && sessionId === firstSession.id) {
|
||||
return '/api/transcript/latest'
|
||||
}
|
||||
]
|
||||
return `/api/transcript/${sessionId}`
|
||||
}
|
||||
|
||||
async function fetchSessions() {
|
||||
try {
|
||||
const res = await fetch('/api/transcript/sessions')
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
sessions.value = await res.json()
|
||||
} catch (e: any) {
|
||||
error.value = `Error cargando sesiones: ${e.message}`
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSessionData(sessionId: string) {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const base = getBaseUrl(sessionId)
|
||||
const [msgRes, statsRes, tokensRes] = await Promise.all([
|
||||
fetch(`${base}?section=messages`),
|
||||
fetch(`${base}?section=stats`),
|
||||
fetch(`${base}?section=tokens`)
|
||||
])
|
||||
|
||||
if (!msgRes.ok || !statsRes.ok || !tokensRes.ok) {
|
||||
throw new Error('Error fetching session data')
|
||||
}
|
||||
|
||||
const [msgData, statsData, tokensData] = await Promise.all([
|
||||
msgRes.json(),
|
||||
statsRes.json(),
|
||||
tokensRes.json()
|
||||
])
|
||||
|
||||
messages.value = msgData.messages || []
|
||||
stats.value = {
|
||||
model: statsData.model || '',
|
||||
duration: statsData.duration || 0,
|
||||
toolCallCount: statsData.stats?.toolCallCount || 0,
|
||||
totalInput: tokensData.tokens?.totalInput || 0,
|
||||
totalOutput: tokensData.tokens?.totalOutput || 0
|
||||
}
|
||||
} catch (e: any) {
|
||||
error.value = `Error cargando datos: ${e.message}`
|
||||
messages.value = []
|
||||
stats.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ── Lifecycle ──
|
||||
|
||||
watch(activeSessionId, (id) => {
|
||||
if (id) fetchSessionData(id)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchSessions()
|
||||
if (sessions.value.length > 0) {
|
||||
activeSessionId.value = sessions.value[0].id
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="conversation-history">
|
||||
<!-- Header -->
|
||||
<div class="history-header">
|
||||
<span class="history-title">Historial</span>
|
||||
<span class="history-count">{{ mockEntries.length }}</span>
|
||||
<span class="history-count">{{ messages.length }}</span>
|
||||
</div>
|
||||
<div class="history-list">
|
||||
|
||||
<!-- Session Pills -->
|
||||
<div v-if="sessions.length > 1" class="session-pills">
|
||||
<button
|
||||
v-for="session in sessions"
|
||||
:key="session.id"
|
||||
class="session-pill"
|
||||
:class="{ active: session.id === activeSessionId }"
|
||||
@click="activeSessionId = session.id"
|
||||
>
|
||||
{{ formatSessionTime(session.startTime) }}
|
||||
<span class="pill-count">({{ session.messageCount }})</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="history-loading">
|
||||
<span class="loading-dots">...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="history-error">{{ error }}</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="messages.length === 0 && !loading" class="history-empty">
|
||||
Sin mensajes en esta sesión
|
||||
</div>
|
||||
|
||||
<!-- Message List -->
|
||||
<div v-else class="history-list">
|
||||
<div
|
||||
v-for="entry in mockEntries"
|
||||
:key="entry.id"
|
||||
v-for="msg in messages"
|
||||
:key="msg.uuid"
|
||||
class="history-entry"
|
||||
:class="entry.role"
|
||||
:class="msg.role === 'assistant' ? 'agent' : 'user'"
|
||||
>
|
||||
<div class="entry-meta">
|
||||
<span class="role-badge" :class="entry.role">
|
||||
{{ entry.role === 'user' ? 'Tú' : agent.uiConfig?.shortLabel || 'AG' }}
|
||||
<span
|
||||
class="role-badge"
|
||||
:class="msg.role === 'assistant' ? 'agent' : 'user'"
|
||||
>
|
||||
{{ msg.role === 'user' ? 'Tú' : agent.uiConfig?.shortLabel || 'AG' }}
|
||||
</span>
|
||||
<span class="entry-time">{{ formatSessionTime(msg.timestamp) }}</span>
|
||||
<span v-if="msg.toolCalls && msg.toolCalls.length > 0" class="tool-badge">
|
||||
{{ msg.toolCalls.length }} tools
|
||||
</span>
|
||||
<span class="entry-time">{{ entry.timestamp }}</span>
|
||||
<!-- Mic icon for voice entries -->
|
||||
<svg v-if="entry.method === 'voice'" class="method-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
</div>
|
||||
<div class="entry-content">{{ entry.content }}</div>
|
||||
<div class="entry-content">{{ truncateContent(msg.content) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Bar -->
|
||||
<div v-if="stats && !loading && messages.length > 0" class="stats-bar">
|
||||
<span>{{ shortModel(stats.model) }}</span>
|
||||
<span class="stats-sep">·</span>
|
||||
<span>{{ formatDuration(stats.duration) }}</span>
|
||||
<span class="stats-sep">·</span>
|
||||
<span>{{ formatTokens(stats.totalInput + stats.totalOutput) }}</span>
|
||||
<span class="stats-sep">·</span>
|
||||
<span>{{ stats.toolCallCount }} tools</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -115,8 +235,53 @@ const mockEntries: ConversationEntry[] = [
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Session Pills */
|
||||
.session-pills {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.session-pills::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.session-pill {
|
||||
flex-shrink: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.session-pill.active {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border-color: rgba(139, 92, 246, 0.3);
|
||||
color: rgba(139, 92, 246, 0.9);
|
||||
}
|
||||
|
||||
.pill-count {
|
||||
opacity: 0.6;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* Message List */
|
||||
.history-list {
|
||||
max-height: 300px;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -168,8 +333,13 @@ const mockEntries: ConversationEntry[] = [
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.method-icon {
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
.tool-badge {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
color: rgba(245, 158, 11, 0.9);
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
@@ -178,8 +348,57 @@ const mockEntries: ConversationEntry[] = [
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Stats Bar */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.stats-sep {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* States */
|
||||
.history-loading {
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.history-error {
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
color: rgba(239, 68, 68, 0.7);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.history-empty {
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
328
frontend/src/components/agent/InputSettings.vue
Normal file
328
frontend/src/components/agent/InputSettings.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<script setup lang="ts">
|
||||
import type { VoiceCapture } from '../../composables/useVoiceCapture'
|
||||
|
||||
const props = defineProps<{
|
||||
voice: VoiceCapture
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
}>()
|
||||
|
||||
function handleMicSelect(e: Event) {
|
||||
const target = e.target as HTMLSelectElement
|
||||
props.voice.selectMicrophone(target.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-settings">
|
||||
<div class="is-header">
|
||||
<span class="is-title">Voice Settings</span>
|
||||
<button class="is-close" @click="emit('close')">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Voice Mode Toggle -->
|
||||
<div class="is-section">
|
||||
<label class="is-label">Mode</label>
|
||||
<div class="is-mode-row">
|
||||
<button
|
||||
class="is-mode-btn"
|
||||
:class="{ active: voice.voiceMode.value === 'webspeech' }"
|
||||
:disabled="voice.isRecording.value"
|
||||
@click="voice.voiceMode.value !== 'webspeech' && voice.toggleWhisperMode()"
|
||||
>
|
||||
<span class="is-mode-icon">Web</span>
|
||||
<span class="is-mode-label">Speech API</span>
|
||||
</button>
|
||||
<button
|
||||
class="is-mode-btn"
|
||||
:class="{
|
||||
active: voice.voiceMode.value === 'whisper',
|
||||
loading: voice.whisperStatus.value === 'loading'
|
||||
}"
|
||||
:disabled="voice.isRecording.value"
|
||||
@click="voice.voiceMode.value !== 'whisper' && voice.toggleWhisperMode()"
|
||||
>
|
||||
<span class="is-mode-icon">GPU</span>
|
||||
<span class="is-mode-label">Whisper</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="is-status">
|
||||
<span
|
||||
class="is-status-dot"
|
||||
:class="{
|
||||
ready: voice.whisperStatus.value === 'ready',
|
||||
loading: voice.whisperStatus.value === 'loading',
|
||||
offline: voice.whisperStatus.value === 'offline'
|
||||
}"
|
||||
></span>
|
||||
<span class="is-status-text">
|
||||
{{ voice.voiceMode.value === 'whisper'
|
||||
? (voice.whisperStatus.value === 'ready' ? 'Whisper ready' : voice.whisperStatus.value === 'loading' ? 'Starting...' : 'Offline')
|
||||
: 'Web Speech API'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Microphone Selection -->
|
||||
<div class="is-section">
|
||||
<label class="is-label">Microphone</label>
|
||||
<select
|
||||
class="is-select"
|
||||
:value="voice.selectedDeviceId.value"
|
||||
@change="handleMicSelect"
|
||||
>
|
||||
<option
|
||||
v-for="device in voice.audioDevices.value"
|
||||
:key="device.deviceId"
|
||||
:value="device.deviceId"
|
||||
>
|
||||
{{ device.label || `Microphone ${voice.audioDevices.value.indexOf(device) + 1}` }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Debug: Last Audio Playback -->
|
||||
<div class="is-section">
|
||||
<label class="is-label">Debug</label>
|
||||
<button
|
||||
class="is-debug-btn"
|
||||
:class="{ playing: voice.isPlayingAudio.value }"
|
||||
:disabled="!voice.lastAudioUrl.value"
|
||||
@click="voice.playLastAudio()"
|
||||
>
|
||||
<svg v-if="!voice.isPlayingAudio.value" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
|
||||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
|
||||
<rect x="6" y="4" width="4" height="16" rx="1"/>
|
||||
<rect x="14" y="4" width="4" height="16" rx="1"/>
|
||||
</svg>
|
||||
<span>{{ voice.isPlayingAudio.value ? 'Stop' : 'Play last audio' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.input-settings {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
animation: settings-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
.is-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.is-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.is-close {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.is-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.is-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.is-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.is-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.is-mode-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.is-mode-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 8px 6px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.is-mode-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.is-mode-btn.active {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border-color: rgba(139, 92, 246, 0.3);
|
||||
color: rgba(139, 92, 246, 0.9);
|
||||
}
|
||||
|
||||
.is-mode-btn.loading {
|
||||
border-color: rgba(251, 191, 36, 0.3);
|
||||
color: rgba(251, 191, 36, 0.8);
|
||||
}
|
||||
|
||||
.is-mode-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.is-mode-icon {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.is-mode-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.is-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.is-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.is-status-dot.ready {
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.is-status-dot.loading {
|
||||
background: #fbbf24;
|
||||
animation: status-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.is-status-dot.offline {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.is-status-text {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.is-select {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-family: system-ui, sans-serif;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.is-select:focus {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.is-select option {
|
||||
background: #1a1025;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.is-debug-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
font-family: system-ui, sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.is-debug-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.is-debug-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.is-debug-btn.playing {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
color: rgba(59, 130, 246, 0.9);
|
||||
}
|
||||
|
||||
@keyframes settings-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes status-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
||||
import type { Agent } from '../../types/agent'
|
||||
import { useVoiceCapture } from '../../composables/useVoiceCapture'
|
||||
import { useCanvasStore } from '../../stores/canvas'
|
||||
import ChatInput from './ChatInput.vue'
|
||||
import TranscriptCard from './TranscriptCard.vue'
|
||||
import InputSettings from './InputSettings.vue'
|
||||
import ConversationHistory from './ConversationHistory.vue'
|
||||
|
||||
interface ChatMessage {
|
||||
@@ -35,11 +38,17 @@ const emit = defineEmits<{
|
||||
submit: [text: string]
|
||||
}>()
|
||||
|
||||
const canvasStore = useCanvasStore()
|
||||
const voice = useVoiceCapture({
|
||||
onNotification: (msg, type, duration) => canvasStore.showNotification(msg, type, duration)
|
||||
})
|
||||
|
||||
const contentEl = ref<HTMLDivElement | null>(null)
|
||||
const chatInputEl = ref<InstanceType<typeof ChatInput> | null>(null)
|
||||
const isRecording = ref(false)
|
||||
const showTranscript = ref(false)
|
||||
const showHistory = ref(false)
|
||||
const showSettings = ref(false)
|
||||
const messages = reactive<ChatMessage[]>([])
|
||||
|
||||
const panelStyle = computed(() => {
|
||||
@@ -60,7 +69,7 @@ const panelStyle = computed(() => {
|
||||
})
|
||||
|
||||
const hasContent = computed(() =>
|
||||
messages.length > 0 || showTranscript.value || showHistory.value
|
||||
messages.length > 0 || showTranscript.value || showHistory.value || showSettings.value
|
||||
)
|
||||
|
||||
async function scrollToBottom() {
|
||||
@@ -100,6 +109,8 @@ function handleTranscriptDone(text: string) {
|
||||
isRecording.value = false
|
||||
showTranscript.value = false
|
||||
|
||||
if (!text.trim()) return
|
||||
|
||||
messages.push({ id: ++idCounter, role: 'user', content: text, status: 'sent' })
|
||||
|
||||
const agentMsg: ChatMessage = { id: ++idCounter, role: 'agent', content: '', status: 'thinking' }
|
||||
@@ -108,6 +119,10 @@ function handleTranscriptDone(text: string) {
|
||||
pushAgentResponse(agentMsg)
|
||||
}
|
||||
|
||||
function toggleSettings() {
|
||||
showSettings.value = !showSettings.value
|
||||
}
|
||||
|
||||
function toggleHistory() {
|
||||
showHistory.value = !showHistory.value
|
||||
if (showHistory.value) scrollToBottom()
|
||||
@@ -122,14 +137,22 @@ watch(() => props.visible, async (v) => {
|
||||
isRecording.value = false
|
||||
showTranscript.value = false
|
||||
showHistory.value = false
|
||||
showSettings.value = false
|
||||
messages.length = 0
|
||||
idCounter = 0
|
||||
await voice.init()
|
||||
await nextTick()
|
||||
if (props.startRecording) {
|
||||
handleMic()
|
||||
} else {
|
||||
chatInputEl.value?.focus()
|
||||
}
|
||||
} else {
|
||||
// Cleanup when panel closes
|
||||
if (voice.isRecording.value) {
|
||||
voice.stopRecording()
|
||||
}
|
||||
voice.cleanup()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -142,6 +165,7 @@ onMounted(() => {
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
if (thinkTimer) clearTimeout(thinkTimer)
|
||||
voice.cleanup()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -187,7 +211,8 @@ onBeforeUnmount(() => {
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<TranscriptCard v-if="showTranscript" @done="handleTranscriptDone" />
|
||||
<TranscriptCard v-if="showTranscript" :voice="voice" @done="handleTranscriptDone" />
|
||||
<InputSettings v-if="showSettings" :voice="voice" @close="showSettings = false" />
|
||||
<ConversationHistory v-if="showHistory" :agent="agent" />
|
||||
</div>
|
||||
|
||||
@@ -197,10 +222,12 @@ onBeforeUnmount(() => {
|
||||
:placeholder="`Mensaje a ${agent.uiConfig?.label || agent.name}...`"
|
||||
:recording="isRecording"
|
||||
:history-active="showHistory"
|
||||
:settings-active="showSettings"
|
||||
:autofocus="visible"
|
||||
@submit="handleSubmit"
|
||||
@mic="handleMic"
|
||||
@toggle-history="toggleHistory"
|
||||
@toggle-settings="toggleSettings"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { onMounted, onBeforeUnmount } from 'vue'
|
||||
import type { VoiceCapture } from '../../composables/useVoiceCapture'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
typeSpeed?: number
|
||||
}>(), {
|
||||
typeSpeed: 30
|
||||
})
|
||||
const props = defineProps<{
|
||||
voice: VoiceCapture
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
done: [text: string]
|
||||
}>()
|
||||
|
||||
const PLACEHOLDER_TEXT = 'Necesito que revises el componente de autenticación en el módulo de usuarios. ' +
|
||||
'Hay un problema con la validación de tokens JWT cuando el usuario tiene sesiones múltiples activas. ' +
|
||||
'El token se invalida correctamente en el servidor pero el cliente sigue usando el token anterior ' +
|
||||
'hasta que expira naturalmente. Quiero que implementes una verificación en tiempo real usando WebSocket ' +
|
||||
'para notificar al cliente cuando su token ha sido revocado desde otra sesión.'
|
||||
|
||||
const displayedText = ref('')
|
||||
let intervalId: number | null = null
|
||||
let charIndex = 0
|
||||
function handleStop() {
|
||||
props.voice.stopRecording()
|
||||
// Brief delay for final Whisper result
|
||||
const delay = props.voice.voiceMode.value === 'whisper' ? 800 : 200
|
||||
setTimeout(() => {
|
||||
emit('done', props.voice.transcript.value.trim())
|
||||
}, delay)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
intervalId = window.setInterval(() => {
|
||||
if (charIndex < PLACEHOLDER_TEXT.length) {
|
||||
displayedText.value += PLACEHOLDER_TEXT[charIndex]
|
||||
charIndex++
|
||||
} else {
|
||||
if (intervalId) clearInterval(intervalId)
|
||||
intervalId = null
|
||||
emit('done', displayedText.value)
|
||||
}
|
||||
}, props.typeSpeed)
|
||||
props.voice.clearTranscript()
|
||||
props.voice.startRecording()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (intervalId) clearInterval(intervalId)
|
||||
if (props.voice.isRecording.value) {
|
||||
props.voice.stopRecording()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="transcript-card">
|
||||
<div class="transcript-header">
|
||||
<span class="rec-dot"></span>
|
||||
<span class="rec-label">Transcribiendo...</span>
|
||||
<div class="transcript-header-left">
|
||||
<span class="rec-dot"></span>
|
||||
<span class="rec-label">Transcribiendo...</span>
|
||||
<span class="mode-badge" :class="voice.voiceMode.value">
|
||||
{{ voice.voiceMode.value === 'whisper' ? 'GPU' : 'Web' }}
|
||||
</span>
|
||||
</div>
|
||||
<button class="stop-btn" @click="handleStop" title="Stop recording">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<rect x="1" y="1" width="8" height="8" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="transcript-body">
|
||||
<span class="transcript-text">{{ displayedText }}</span>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-if="voice.error.value" class="transcript-error">
|
||||
{{ voice.error.value }}
|
||||
</div>
|
||||
|
||||
<!-- Transcript body -->
|
||||
<div v-else class="transcript-body">
|
||||
<span class="transcript-text">{{ voice.animatedTranscript.value }}</span>
|
||||
<span v-if="voice.interimTranscript.value" class="interim-text">{{ voice.interimTranscript.value }}</span>
|
||||
<span class="blink-cursor">|</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,10 +74,16 @@ onBeforeUnmount(() => {
|
||||
.transcript-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.transcript-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rec-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -85,16 +101,67 @@ onBeforeUnmount(() => {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.mode-badge {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.mode-badge.whisper {
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
color: rgba(139, 92, 246, 0.9);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.mode-badge.webspeech {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: rgba(59, 130, 246, 0.9);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 6px;
|
||||
color: #ef4444;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.stop-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
.transcript-body {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.transcript-text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.interim-text {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.transcript-error {
|
||||
font-size: 12px;
|
||||
color: rgba(239, 68, 68, 0.8);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.blink-cursor {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
animation: cursor-blink 0.8s step-end infinite;
|
||||
|
||||
806
frontend/src/composables/useVoiceCapture.ts
Normal file
806
frontend/src/composables/useVoiceCapture.ts
Normal file
@@ -0,0 +1,806 @@
|
||||
import { ref, watch, type Ref } from 'vue'
|
||||
import { endpoints } from '../config/endpoints'
|
||||
|
||||
// Web Speech API types (not in default TS lib)
|
||||
interface SpeechRecognitionEvent extends Event {
|
||||
resultIndex: number
|
||||
results: SpeechRecognitionResultList
|
||||
}
|
||||
|
||||
interface SpeechRecognitionErrorEvent extends Event {
|
||||
error: string
|
||||
message?: string
|
||||
}
|
||||
|
||||
interface SpeechRecognition extends EventTarget {
|
||||
continuous: boolean
|
||||
interimResults: boolean
|
||||
lang: string
|
||||
onresult: ((event: SpeechRecognitionEvent) => void) | null
|
||||
onerror: ((event: SpeechRecognitionErrorEvent) => void) | null
|
||||
onend: (() => void) | null
|
||||
start(): void
|
||||
stop(): void
|
||||
abort(): void
|
||||
}
|
||||
|
||||
export type VoiceMode = 'webspeech' | 'whisper'
|
||||
export type WhisperStatus = 'offline' | 'loading' | 'ready'
|
||||
|
||||
export interface VoiceCapture {
|
||||
// State
|
||||
isRecording: Ref<boolean>
|
||||
transcript: Ref<string>
|
||||
interimTranscript: Ref<string>
|
||||
animatedTranscript: Ref<string>
|
||||
error: Ref<string>
|
||||
voiceMode: Ref<VoiceMode>
|
||||
whisperStatus: Ref<WhisperStatus>
|
||||
audioDevices: Ref<MediaDeviceInfo[]>
|
||||
selectedDeviceId: Ref<string>
|
||||
isAndroid: Ref<boolean>
|
||||
lastAudioUrl: Ref<string>
|
||||
isPlayingAudio: Ref<boolean>
|
||||
// Actions
|
||||
startRecording: () => void
|
||||
stopRecording: () => void
|
||||
toggleWhisperMode: () => Promise<void>
|
||||
checkWhisperStatus: () => Promise<any>
|
||||
loadAudioDevices: () => Promise<void>
|
||||
selectMicrophone: (deviceId: string) => void
|
||||
playLastAudio: () => void
|
||||
init: () => Promise<void>
|
||||
cleanup: () => void
|
||||
clearTranscript: () => void
|
||||
}
|
||||
|
||||
export function useVoiceCapture(options?: {
|
||||
onNotification?: (message: string, type: 'info' | 'success' | 'error', duration?: number) => void
|
||||
}): VoiceCapture {
|
||||
const notify = options?.onNotification || (() => {})
|
||||
|
||||
// ====== State ======
|
||||
const isRecording = ref(false)
|
||||
const transcript = ref('')
|
||||
const interimTranscript = ref('')
|
||||
const animatedTranscript = ref('')
|
||||
const error = ref('')
|
||||
const voiceMode = ref<VoiceMode>('webspeech')
|
||||
const whisperStatus = ref<WhisperStatus>('offline')
|
||||
const audioDevices = ref<MediaDeviceInfo[]>([])
|
||||
const selectedDeviceId = ref('')
|
||||
const isAndroid = ref(false)
|
||||
|
||||
// Audio debug & save
|
||||
const lastAudioUrl = ref('')
|
||||
const isPlayingAudio = ref(false)
|
||||
|
||||
// ====== Internal state ======
|
||||
let recognition: SpeechRecognition | null = null
|
||||
let lastProcessedResult = ''
|
||||
|
||||
// Typing animation
|
||||
let typingTimeout: number | null = null
|
||||
let lastAnimatedLength = 0
|
||||
|
||||
// Whisper
|
||||
const WHISPER_WS_URL = endpoints.whisper
|
||||
let whisperSocket: WebSocket | null = null
|
||||
let mediaRecorder: MediaRecorder | null = null
|
||||
let audioChunks: Blob[] = []
|
||||
let chunkInterval: number | null = null
|
||||
const CHUNK_INTERVAL_MS = 3000
|
||||
let mediaStream: MediaStream | null = null
|
||||
let supportedMimeType = 'audio/webm;codecs=opus'
|
||||
|
||||
// Audio playback debug
|
||||
let audioElement: HTMLAudioElement | null = null
|
||||
let recordingStartTime = 0
|
||||
|
||||
// ====== Mobile / Audio Format ======
|
||||
|
||||
function checkMobile() {
|
||||
const ua = navigator.userAgent
|
||||
isAndroid.value = /Android/i.test(ua)
|
||||
}
|
||||
|
||||
function detectAudioFormat(): string {
|
||||
const formats = [
|
||||
'audio/webm;codecs=opus',
|
||||
'audio/webm',
|
||||
'audio/mp4',
|
||||
'audio/mp4;codecs=mp4a.40.2',
|
||||
'audio/aac',
|
||||
'audio/ogg;codecs=opus',
|
||||
'audio/wav'
|
||||
]
|
||||
for (const format of formats) {
|
||||
if (MediaRecorder.isTypeSupported(format)) {
|
||||
console.log(`[VoiceCapture] Using audio format: ${format}`)
|
||||
return format
|
||||
}
|
||||
}
|
||||
console.warn('[VoiceCapture] No preferred format supported, using default')
|
||||
return ''
|
||||
}
|
||||
|
||||
// ====== Web Speech API ======
|
||||
|
||||
function initRecognition(): SpeechRecognition | null {
|
||||
const SpeechRecognitionCtor = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
|
||||
if (!SpeechRecognitionCtor) {
|
||||
error.value = 'Speech recognition not supported in this browser'
|
||||
return null
|
||||
}
|
||||
|
||||
const rec: SpeechRecognition = new SpeechRecognitionCtor()
|
||||
rec.continuous = !isAndroid.value
|
||||
rec.interimResults = true
|
||||
rec.lang = 'es-419'
|
||||
|
||||
if (isAndroid.value) {
|
||||
console.log('[VoiceCapture] Android detected - using non-continuous mode')
|
||||
}
|
||||
|
||||
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 || !result[0]) continue
|
||||
if (result.isFinal) {
|
||||
final += result[0].transcript + ' '
|
||||
} else {
|
||||
interim += result[0].transcript
|
||||
}
|
||||
}
|
||||
|
||||
if (final) {
|
||||
const trimmedFinal = final.trim()
|
||||
if (isAndroid.value && lastProcessedResult && trimmedFinal.startsWith(lastProcessedResult.trim())) {
|
||||
const newPart = trimmedFinal.slice(lastProcessedResult.trim().length).trim()
|
||||
if (newPart) {
|
||||
transcript.value += newPart + ' '
|
||||
lastProcessedResult = trimmedFinal
|
||||
}
|
||||
} else {
|
||||
transcript.value += final
|
||||
lastProcessedResult = trimmedFinal
|
||||
}
|
||||
}
|
||||
interimTranscript.value = interim
|
||||
}
|
||||
|
||||
rec.onerror = (event: SpeechRecognitionErrorEvent) => {
|
||||
// no-speech and aborted are transient — don't kill the session
|
||||
if (event.error === 'no-speech' || event.error === 'aborted') {
|
||||
console.log('[VoiceCapture] Transient error:', event.error, '(will auto-restart)')
|
||||
return
|
||||
}
|
||||
console.error('[VoiceCapture] 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 && voiceMode.value === 'webspeech') {
|
||||
if (isAndroid.value) {
|
||||
isRecording.value = false
|
||||
console.log('[VoiceCapture] Android session ended - tap mic to continue')
|
||||
} else {
|
||||
rec.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return rec
|
||||
}
|
||||
|
||||
// ====== Whisper Functions ======
|
||||
|
||||
async function checkWhisperStatusFn(updateLoading = true): Promise<any> {
|
||||
try {
|
||||
const res = await fetch('/api/whisper/status')
|
||||
const data = await res.json()
|
||||
if (data.enabled) {
|
||||
voiceMode.value = 'whisper'
|
||||
}
|
||||
if (data.running) {
|
||||
whisperStatus.value = 'ready'
|
||||
} else if (updateLoading && (data.starting || false)) {
|
||||
whisperStatus.value = 'loading'
|
||||
} else if (!data.running) {
|
||||
if (voiceMode.value === 'whisper' && !data.starting) {
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
}
|
||||
return data
|
||||
} catch {
|
||||
voiceMode.value = 'webspeech'
|
||||
whisperStatus.value = 'offline'
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function pollWhisperStatus(): Promise<void> {
|
||||
const maxAttempts = 60
|
||||
let attempts = 0
|
||||
|
||||
while (attempts < maxAttempts) {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
attempts++
|
||||
|
||||
try {
|
||||
const status = await checkWhisperStatusFn(false)
|
||||
if (!status) continue
|
||||
|
||||
if (status.starting) {
|
||||
console.log(`[VoiceCapture] Still starting... (${attempts * 2}s)`)
|
||||
continue
|
||||
}
|
||||
|
||||
if (status.running && status.enabled) {
|
||||
console.log('[VoiceCapture] Server ready!')
|
||||
notify('Whisper GPU ready!', 'success')
|
||||
connectWhisperSocket()
|
||||
whisperStatus.value = 'ready'
|
||||
return
|
||||
}
|
||||
|
||||
console.log('[VoiceCapture] Server failed to start')
|
||||
notify('Whisper server failed to start', 'error')
|
||||
whisperStatus.value = 'offline'
|
||||
return
|
||||
} catch (e) {
|
||||
console.error('[VoiceCapture] Polling error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
notify('Whisper server timeout', 'error')
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
|
||||
function connectWhisperSocket() {
|
||||
if (whisperStatus.value !== 'ready') {
|
||||
console.log('[VoiceCapture] Whisper not ready, skipping connection')
|
||||
return
|
||||
}
|
||||
if (whisperSocket?.readyState === WebSocket.OPEN) return
|
||||
|
||||
console.log('[VoiceCapture] Connecting to Whisper at:', WHISPER_WS_URL)
|
||||
whisperSocket = new WebSocket(WHISPER_WS_URL)
|
||||
|
||||
const connectionTimeout = setTimeout(() => {
|
||||
if (whisperSocket && whisperSocket.readyState !== WebSocket.OPEN) {
|
||||
console.error('[VoiceCapture] Whisper connection timeout (10s)')
|
||||
whisperSocket.close()
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
}, 10000)
|
||||
|
||||
whisperSocket.onopen = () => {
|
||||
clearTimeout(connectionTimeout)
|
||||
console.log('[VoiceCapture] Whisper WebSocket connected')
|
||||
whisperStatus.value = 'ready'
|
||||
}
|
||||
|
||||
whisperSocket.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data)
|
||||
|
||||
if (msg.type === 'ready') {
|
||||
console.log('[VoiceCapture] Whisper ready:', msg.model, msg.device)
|
||||
whisperStatus.value = 'ready'
|
||||
} else if (msg.type === 'transcription') {
|
||||
if (msg.success && msg.text) {
|
||||
const fullText = msg.text.trim()
|
||||
if (msg.partial) {
|
||||
transcript.value = fullText + ' '
|
||||
interimTranscript.value = ''
|
||||
} else {
|
||||
transcript.value = fullText + ' '
|
||||
interimTranscript.value = ''
|
||||
console.log(`[VoiceCapture] WHISPER-GPU (${msg.model}/${msg.device}):`, fullText)
|
||||
}
|
||||
} else if (msg.error) {
|
||||
error.value = msg.error
|
||||
console.error('[VoiceCapture] Whisper error:', msg.error)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[VoiceCapture] Whisper message error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
whisperSocket.onclose = () => {
|
||||
console.log('[VoiceCapture] Whisper WebSocket closed')
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
|
||||
whisperSocket.onerror = (e) => {
|
||||
console.error('[VoiceCapture] Whisper WebSocket error:', e)
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
}
|
||||
|
||||
function disconnectWhisperSocket() {
|
||||
if (whisperSocket) {
|
||||
whisperSocket.close()
|
||||
whisperSocket = null
|
||||
}
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
|
||||
async function startWhisperRecording() {
|
||||
if (!whisperSocket || whisperSocket.readyState !== WebSocket.OPEN) {
|
||||
console.warn('[VoiceCapture] Whisper socket not connected, attempting to connect...')
|
||||
connectWhisperSocket()
|
||||
await new Promise(resolve => setTimeout(resolve, 500))
|
||||
|
||||
if (!whisperSocket || whisperSocket.readyState !== WebSocket.OPEN) {
|
||||
error.value = 'Whisper server not connected'
|
||||
notify('Whisper not connected. Try toggling GPU mode.', 'error')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const audioConstraints: MediaTrackConstraints = {
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
autoGainControl: true,
|
||||
...(selectedDeviceId.value ? { deviceId: { exact: selectedDeviceId.value } } : {})
|
||||
}
|
||||
|
||||
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: audioConstraints })
|
||||
|
||||
const recorderOptions: MediaRecorderOptions = {}
|
||||
if (supportedMimeType) {
|
||||
recorderOptions.mimeType = supportedMimeType
|
||||
}
|
||||
|
||||
mediaRecorder = new MediaRecorder(mediaStream, recorderOptions)
|
||||
console.log(`[VoiceCapture] MediaRecorder using: ${mediaRecorder.mimeType}`)
|
||||
|
||||
audioChunks = []
|
||||
|
||||
mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
audioChunks.push(event.data)
|
||||
}
|
||||
}
|
||||
|
||||
audioChunks = []
|
||||
mediaRecorder.start(100)
|
||||
isRecording.value = true
|
||||
recordingStartTime = Date.now()
|
||||
console.log(`[VoiceCapture] Whisper recording started`)
|
||||
|
||||
// Permission granted via user gesture — reload devices with labels
|
||||
loadAudioDevices(true)
|
||||
|
||||
chunkInterval = window.setInterval(() => {
|
||||
if (audioChunks.length > 0 && whisperSocket?.readyState === WebSocket.OPEN) {
|
||||
sendAudioChunk(false)
|
||||
}
|
||||
}, CHUNK_INTERVAL_MS)
|
||||
} catch (e: any) {
|
||||
error.value = `Microphone error: ${e.message}`
|
||||
console.error('[VoiceCapture] Microphone error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
function sendAudioChunk(isFinal: boolean) {
|
||||
if (audioChunks.length === 0) return
|
||||
|
||||
const mimeType = mediaRecorder?.mimeType || supportedMimeType || 'audio/webm'
|
||||
const audioBlob = new Blob(audioChunks, { type: mimeType })
|
||||
|
||||
if (audioBlob.size < 5000) {
|
||||
if (isFinal) audioChunks = []
|
||||
return
|
||||
}
|
||||
|
||||
if (isFinal) {
|
||||
audioChunks = []
|
||||
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
|
||||
}))
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(audioBlob)
|
||||
}
|
||||
|
||||
function stopWhisperRecording() {
|
||||
if (chunkInterval) {
|
||||
clearInterval(chunkInterval)
|
||||
chunkInterval = null
|
||||
}
|
||||
|
||||
if (audioChunks.length > 0) {
|
||||
sendAudioChunk(true)
|
||||
}
|
||||
|
||||
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||
mediaRecorder.stop()
|
||||
}
|
||||
|
||||
if (mediaStream) {
|
||||
mediaStream.getTracks().forEach(track => track.stop())
|
||||
mediaStream = null
|
||||
}
|
||||
|
||||
isRecording.value = false
|
||||
}
|
||||
|
||||
// ====== Audio Save & Debug Playback ======
|
||||
|
||||
function currentMicName(): string {
|
||||
if (!selectedDeviceId.value) return 'Default'
|
||||
const device = audioDevices.value.find(d => d.deviceId === selectedDeviceId.value)
|
||||
return device?.label || 'Microphone'
|
||||
}
|
||||
|
||||
function saveAudioForPlayback(blob: Blob) {
|
||||
if (lastAudioUrl.value) {
|
||||
URL.revokeObjectURL(lastAudioUrl.value)
|
||||
}
|
||||
lastAudioUrl.value = URL.createObjectURL(blob)
|
||||
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('/api/recordings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
audio: base64,
|
||||
transcription: transcript.value.trim(),
|
||||
microphone: currentMicName(),
|
||||
duration_ms
|
||||
})
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
console.log(`[VoiceCapture] Recording saved: ${data.filename} (${(data.size / 1024).toFixed(1)} KB)`)
|
||||
} else {
|
||||
console.error('[VoiceCapture] Failed to save recording:', data.error)
|
||||
}
|
||||
}
|
||||
|
||||
reader.readAsDataURL(blob)
|
||||
} catch (e) {
|
||||
console.error('[VoiceCapture] Error saving recording:', e)
|
||||
}
|
||||
}
|
||||
|
||||
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('[VoiceCapture] Failed to play audio:', e)
|
||||
isPlayingAudio.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// ====== Parallel Audio Capture (for Web Speech mode) ======
|
||||
|
||||
async function startAudioCapture() {
|
||||
try {
|
||||
const audioConstraints: MediaTrackConstraints = {
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
autoGainControl: true,
|
||||
...(selectedDeviceId.value ? { deviceId: { exact: selectedDeviceId.value } } : {})
|
||||
}
|
||||
|
||||
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: audioConstraints })
|
||||
|
||||
const recorderOptions: MediaRecorderOptions = {}
|
||||
if (supportedMimeType) {
|
||||
recorderOptions.mimeType = supportedMimeType
|
||||
}
|
||||
|
||||
mediaRecorder = new MediaRecorder(mediaStream, recorderOptions)
|
||||
audioChunks = []
|
||||
|
||||
mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
audioChunks.push(event.data)
|
||||
}
|
||||
}
|
||||
|
||||
mediaRecorder.start(100)
|
||||
recordingStartTime = Date.now()
|
||||
console.log(`[VoiceCapture] Audio capture started (${mediaRecorder.mimeType})`)
|
||||
|
||||
// Permission is now granted via user gesture — reload devices with labels
|
||||
loadAudioDevices(true)
|
||||
} catch (e: any) {
|
||||
console.error('[VoiceCapture] Audio capture error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
function stopAudioCapture() {
|
||||
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||
mediaRecorder.stop()
|
||||
}
|
||||
|
||||
// Build final blob and save
|
||||
if (audioChunks.length > 0) {
|
||||
const mimeType = mediaRecorder?.mimeType || supportedMimeType || 'audio/webm'
|
||||
const audioBlob = new Blob(audioChunks, { type: mimeType })
|
||||
audioChunks = []
|
||||
if (audioBlob.size > 1000) {
|
||||
saveAudioForPlayback(audioBlob)
|
||||
}
|
||||
}
|
||||
|
||||
if (mediaStream) {
|
||||
mediaStream.getTracks().forEach(track => track.stop())
|
||||
mediaStream = null
|
||||
}
|
||||
}
|
||||
|
||||
// ====== Public Recording API ======
|
||||
|
||||
function startRecording() {
|
||||
error.value = ''
|
||||
|
||||
if (voiceMode.value === 'whisper' && whisperStatus.value === 'ready') {
|
||||
startWhisperRecording()
|
||||
} else {
|
||||
if (!recognition) {
|
||||
recognition = initRecognition()
|
||||
}
|
||||
if (recognition) {
|
||||
try {
|
||||
recognition.start()
|
||||
isRecording.value = true
|
||||
// Capture raw audio in parallel for save/debug playback
|
||||
startAudioCapture()
|
||||
if (isAndroid.value) {
|
||||
notify('Android: Tap mic again to continue recording', 'info', 3000)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[VoiceCapture] Failed to start:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopRecording() {
|
||||
if (voiceMode.value === 'whisper') {
|
||||
stopWhisperRecording()
|
||||
} else {
|
||||
if (recognition) {
|
||||
recognition.stop()
|
||||
}
|
||||
stopAudioCapture()
|
||||
isRecording.value = false
|
||||
}
|
||||
interimTranscript.value = ''
|
||||
}
|
||||
|
||||
async function toggleWhisperMode() {
|
||||
if (whisperStatus.value === 'loading') return
|
||||
|
||||
whisperStatus.value = 'loading'
|
||||
error.value = ''
|
||||
|
||||
if (voiceMode.value !== 'whisper') {
|
||||
notify('Starting Whisper GPU server...', 'info', 10000)
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/whisper/toggle', { method: 'POST' })
|
||||
const data = await res.json()
|
||||
|
||||
if (data.starting) {
|
||||
console.log('[VoiceCapture] Server starting, polling...')
|
||||
voiceMode.value = 'whisper'
|
||||
await pollWhisperStatus()
|
||||
return
|
||||
}
|
||||
|
||||
if (data.enabled) {
|
||||
voiceMode.value = 'whisper'
|
||||
whisperStatus.value = data.running ? 'ready' : 'offline'
|
||||
if (data.running) {
|
||||
notify('Whisper GPU ready!', 'success')
|
||||
connectWhisperSocket()
|
||||
}
|
||||
} else {
|
||||
voiceMode.value = 'webspeech'
|
||||
whisperStatus.value = 'offline'
|
||||
notify('Using Web Speech API', 'info')
|
||||
disconnectWhisperSocket()
|
||||
}
|
||||
} catch (e: any) {
|
||||
error.value = 'Failed to toggle Whisper'
|
||||
notify('Error starting Whisper server', 'error')
|
||||
console.error('[VoiceCapture] Whisper toggle error:', e)
|
||||
whisperStatus.value = 'offline'
|
||||
}
|
||||
}
|
||||
|
||||
// ====== Microphone ======
|
||||
|
||||
async function loadAudioDevices(skipPermissionRequest = false) {
|
||||
try {
|
||||
if (!skipPermissionRequest) {
|
||||
// Request permission 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')
|
||||
|
||||
if (!selectedDeviceId.value && audioDevices.value.length > 0) {
|
||||
selectedDeviceId.value = audioDevices.value[0]?.deviceId || ''
|
||||
}
|
||||
console.log(`[VoiceCapture] Found ${audioDevices.value.length} audio devices`)
|
||||
} catch (e) {
|
||||
console.error('[VoiceCapture] Failed to enumerate devices:', e)
|
||||
}
|
||||
}
|
||||
|
||||
function selectMicrophone(deviceId: string) {
|
||||
selectedDeviceId.value = deviceId
|
||||
if (isRecording.value) {
|
||||
stopRecording()
|
||||
setTimeout(() => startRecording(), 100)
|
||||
}
|
||||
}
|
||||
|
||||
// ====== Typing Animation ======
|
||||
|
||||
function animateTyping(targetText: string) {
|
||||
if (typingTimeout) {
|
||||
clearTimeout(typingTimeout)
|
||||
typingTimeout = null
|
||||
}
|
||||
|
||||
if (targetText.length < animatedTranscript.value.length) {
|
||||
animatedTranscript.value = targetText
|
||||
lastAnimatedLength = targetText.length
|
||||
return
|
||||
}
|
||||
|
||||
const startIndex = lastAnimatedLength
|
||||
|
||||
function typeNext(index: number) {
|
||||
if (index <= targetText.length) {
|
||||
animatedTranscript.value = targetText.substring(0, index)
|
||||
lastAnimatedLength = index
|
||||
if (index < targetText.length) {
|
||||
const delay = 15 + Math.random() * 10
|
||||
typingTimeout = window.setTimeout(() => typeNext(index + 1), delay)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
typeNext(startIndex)
|
||||
}
|
||||
|
||||
watch(transcript, (newVal) => {
|
||||
animateTyping(newVal)
|
||||
})
|
||||
|
||||
// ====== Transcript ======
|
||||
|
||||
function clearTranscript() {
|
||||
transcript.value = ''
|
||||
interimTranscript.value = ''
|
||||
animatedTranscript.value = ''
|
||||
lastAnimatedLength = 0
|
||||
lastProcessedResult = ''
|
||||
if (typingTimeout) {
|
||||
clearTimeout(typingTimeout)
|
||||
typingTimeout = null
|
||||
}
|
||||
}
|
||||
|
||||
// ====== Lifecycle ======
|
||||
|
||||
async function init() {
|
||||
recognition = initRecognition()
|
||||
checkMobile()
|
||||
supportedMimeType = detectAudioFormat()
|
||||
// Only enumerate without getUserMedia — no user gesture here
|
||||
// Devices will get full labels after first recording (user gesture)
|
||||
await loadAudioDevices(true)
|
||||
|
||||
const status = await checkWhisperStatusFn()
|
||||
if (status?.starting) {
|
||||
console.log('[VoiceCapture] Server is starting, resuming polling...')
|
||||
pollWhisperStatus()
|
||||
} else if (voiceMode.value === 'whisper' && whisperStatus.value === 'ready') {
|
||||
connectWhisperSocket()
|
||||
} else if (voiceMode.value === 'whisper' && whisperStatus.value !== 'ready') {
|
||||
console.log('[VoiceCapture] Whisper was enabled but server not running, disabling')
|
||||
voiceMode.value = 'webspeech'
|
||||
}
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
stopRecording()
|
||||
recognition = null
|
||||
disconnectWhisperSocket()
|
||||
if (chunkInterval) clearInterval(chunkInterval)
|
||||
if (typingTimeout) clearTimeout(typingTimeout)
|
||||
if (mediaStream) {
|
||||
mediaStream.getTracks().forEach(track => track.stop())
|
||||
mediaStream = null
|
||||
}
|
||||
if (audioElement) {
|
||||
audioElement.pause()
|
||||
audioElement = null
|
||||
}
|
||||
if (lastAudioUrl.value) {
|
||||
URL.revokeObjectURL(lastAudioUrl.value)
|
||||
lastAudioUrl.value = ''
|
||||
}
|
||||
isPlayingAudio.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
isRecording,
|
||||
transcript,
|
||||
interimTranscript,
|
||||
animatedTranscript,
|
||||
error,
|
||||
voiceMode,
|
||||
whisperStatus,
|
||||
audioDevices,
|
||||
selectedDeviceId,
|
||||
isAndroid,
|
||||
lastAudioUrl,
|
||||
isPlayingAudio,
|
||||
// Actions
|
||||
startRecording,
|
||||
stopRecording,
|
||||
toggleWhisperMode,
|
||||
checkWhisperStatus: checkWhisperStatusFn,
|
||||
loadAudioDevices,
|
||||
selectMicrophone,
|
||||
playLastAudio,
|
||||
init,
|
||||
cleanup,
|
||||
clearTranscript
|
||||
}
|
||||
}
|
||||
@@ -46,3 +46,21 @@ export interface ConversationEntry {
|
||||
timestamp: string
|
||||
method: 'text' | 'voice'
|
||||
}
|
||||
|
||||
export interface TranscriptSession {
|
||||
id: string
|
||||
startTime: string
|
||||
messageCount: number
|
||||
model: string
|
||||
}
|
||||
|
||||
export interface TranscriptMessage {
|
||||
uuid: string
|
||||
role: 'user' | 'assistant'
|
||||
content: string
|
||||
timestamp: string
|
||||
isMeta: boolean
|
||||
tokens?: { input: number; output: number }
|
||||
toolCalls?: string[]
|
||||
hasThinking: boolean
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user