agent-ui/frontend/src/components/agent/TranscriptCard.vue

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import type { VoiceCapture } from '../../composables/useVoiceCapture'

const props = defineProps<{
  voice: VoiceCapture
}>()

const emit = defineEmits<{
  done: [text: string]
}>()

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(() => {
  if (!props.voice.isRecording.value) {
    props.voice.clearTranscript()
    props.voice.startRecording()
  }
})

onBeforeUnmount(() => {
  if (props.voice.isRecording.value) {
    props.voice.stopRecording()
  }
})
</script>

<template>
  <div class="transcript-card">
    <div class="transcript-header">
      <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>

    <!-- 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>
</template>

<style scoped>
.transcript-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}

.transcript-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.transcript-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: rec-pulse 1s ease-in-out infinite;
}

.rec-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
  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;
  font-weight: 300;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #ef4444; }
  50% { opacity: 0.4; box-shadow: 0 0 16px #ef4444; }
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
</style>