CRM_Montzar/apps/web/src/components/VoiceToTextButton.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import { toFaDigits } from '@/lib/jalali';
import UiIcon from '@/components/UiIcon.vue';

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    variant?: 'default' | 'toolbar';
    hideError?: boolean;
  }>(),
  { variant: 'default', hideError: false },
);

const emit = defineEmits<{
  transcript: [text: string];
  recording: [active: boolean];
  busy: [active: boolean];
  error: [message: string];
}>();

const recording = ref(false);
const transcribing = ref(false);
const error = ref('');
const seconds = ref(0);

let stream: MediaStream | null = null;
let ctx: AudioContext | null = null;
let source: MediaStreamAudioSourceNode | null = null;
let processor: ScriptProcessorNode | null = null;
let mute: GainNode | null = null;
let chunks: Float32Array[] = [];
let sampleRate = 16000;
let timer: number | null = null;
let limitTimer: number | null = null;

const MAX_SECONDS = 90;

const busy = computed(() => recording.value || transcribing.value);
const timerLabel = computed(() => {
  const m = String(Math.floor(seconds.value / 60)).padStart(2, '0');
  const s = String(seconds.value % 60).padStart(2, '0');
  return toFaDigits(`${m}:${s}`);
});
const ariaLabel = computed(() => {
  if (transcribing.value) return 'در حال تبدیل صوت به متن';
  if (recording.value) return 'توقف ضبط و تبدیل به متن';
  return 'تبدیل صوت به متن';
});

function setError(message: string) {
  error.value = message;
  emit('error', message);
}

function setRecording(active: boolean) {
  recording.value = active;
  emit('recording', active);
  emit('busy', busy.value);
}

function setTranscribing(active: boolean) {
  transcribing.value = active;
  emit('busy', recording.value || active);
}

function stopTimer() {
  if (timer != null) {
    window.clearInterval(timer);
    timer = null;
  }
  if (limitTimer != null) {
    window.clearTimeout(limitTimer);
    limitTimer = null;
  }
}

function teardownMic() {
  stopTimer();
  try {
    processor?.disconnect();
    source?.disconnect();
    mute?.disconnect();
  } catch {
    /* ignore */
  }
  processor = null;
  source = null;
  mute = null;
  stream?.getTracks().forEach((track) => track.stop());
  stream = null;
  if (ctx) {
    void ctx.close().catch(() => undefined);
    ctx = null;
  }
}

function mergeChunks(parts: Float32Array[]) {
  const length = parts.reduce((sum, part) => sum + part.length, 0);
  const out = new Float32Array(length);
  let offset = 0;
  for (const part of parts) {
    out.set(part, offset);
    offset += part.length;
  }
  return out;
}

function encodeWav(samples: Float32Array, rate: number) {
  const bytes = samples.length * 2;
  const buffer = new ArrayBuffer(44 + bytes);
  const view = new DataView(buffer);
  const write = (offset: number, text: string) => {
    for (let i = 0; i < text.length; i += 1) view.setUint8(offset + i, text.charCodeAt(i));
  };
  write(0, 'RIFF');
  view.setUint32(4, 36 + bytes, true);
  write(8, 'WAVE');
  write(12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true);
  view.setUint16(22, 1, true);
  view.setUint32(24, rate, true);
  view.setUint32(28, rate * 2, true);
  view.setUint16(32, 2, true);
  view.setUint16(34, 16, true);
  write(36, 'data');
  view.setUint32(40, bytes, true);
  let offset = 44;
  for (let i = 0; i < samples.length; i += 1) {
    const sample = Math.max(-1, Math.min(1, samples[i] ?? 0));
    view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
    offset += 2;
  }
  return new Blob([buffer], { type: 'audio/wav' });
}

async function upload(blob: Blob) {
  const form = new FormData();
  form.append('audio', blob, 'dictation.wav');
  const { data } = await api.post<{ text: string }>('/ai/transcribe', form);
  return (data.text ?? '').trim();
}

async function finish(keep: boolean) {
  const parts = chunks;
  chunks = [];
  const rate = sampleRate;
  teardownMic();
  setRecording(false);
  if (!keep) return;

  const samples = mergeChunks(parts);
  if (samples.length < rate * 0.35) {
    setError('صدای کافی ضبط نشد. کمی بیشتر صحبت کنید.');
    return;
  }

  setTranscribing(true);
  try {
    const text = await upload(encodeWav(samples, rate));
    if (!text) {
      setError('متنی از صدا تشخیص داده نشد.');
      return;
    }
    emit('transcript', text);
  } catch (err) {
    if (axios.isAxiosError(err)) {
      const msg = (err.response?.data as { message?: string | string[] })?.message;
      setError(Array.isArray(msg) ? msg.join('، ') : (msg ?? 'تبدیل صوت به متن ناموفق بود'));
    } else {
      setError('تبدیل صوت به متن ناموفق بود');
    }
  } finally {
    setTranscribing(false);
  }
}

async function start() {
  setError('');
  if (!navigator.mediaDevices?.getUserMedia) {
    setError('این مرورگر به میکروفون دسترسی نمی‌دهد.');
    return;
  }
  try {
    stream = await navigator.mediaDevices.getUserMedia({
      audio: { echoCancellation: true, noiseSuppression: true, channelCount: 1 },
    });
    const Ctor = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
    if (!Ctor) {
      setError('ضبط صدا در این مرورگر پشتیبانی نمی‌شود.');
      stream.getTracks().forEach((track) => track.stop());
      stream = null;
      return;
    }
    ctx = new Ctor();
    await ctx.resume();
    sampleRate = ctx.sampleRate || 16000;
    source = ctx.createMediaStreamSource(stream);
    processor = ctx.createScriptProcessor(4096, 1, 1);
    mute = ctx.createGain();
    mute.gain.value = 0;
    chunks = [];
    processor.onaudioprocess = (event) => {
      if (!recording.value) return;
      chunks.push(new Float32Array(event.inputBuffer.getChannelData(0)));
    };
    source.connect(processor);
    processor.connect(mute);
    mute.connect(ctx.destination);
    seconds.value = 0;
    timer = window.setInterval(() => {
      seconds.value += 1;
    }, 1000);
    limitTimer = window.setTimeout(() => {
      void finish(true);
    }, MAX_SECONDS * 1000);
    setRecording(true);
  } catch {
    teardownMic();
    setError('دسترسی به میکروفون داده نشد.');
  }
}

function toggle() {
  if (props.disabled || transcribing.value) return;
  if (recording.value) {
    void finish(true);
    return;
  }
  void start();
}

onBeforeUnmount(() => {
  void finish(false);
});
</script>

<template>
  <div class="vtt-wrap" :class="variant">
    <button
      class="vtt"
      type="button"
      :class="{ on: recording, busy: transcribing }"
      :disabled="disabled || transcribing"
      :aria-label="ariaLabel"
      :title="ariaLabel"
      @click="toggle"
    >
      <UiIcon :name="recording ? 'stop' : 'mic'" :size="variant === 'toolbar' ? 18 : 16" />
      <span v-if="variant === 'default' && recording" class="timer">{{ timerLabel }}</span>
      <span v-else-if="variant === 'default' && transcribing" class="timer">تبدیل…</span>
    </button>
    <p v-if="error && !hideError" class="err">{{ error }}</p>
  </div>
</template>

<style scoped>
.vtt-wrap {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
}

.vtt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #d7e3dc;
  background: #f4faf7;
  color: #0f766e;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.vtt:hover:not(:disabled) {
  background: #ecfdf5;
}

.vtt.on {
  border-color: #f87171;
  background: #fef2f2;
  color: #b91c1c;
  animation: pulse 1.2s ease-in-out infinite;
}

.vtt.busy:not(.on) {
  opacity: 0.72;
  cursor: wait;
}

.vtt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.toolbar .vtt {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 12px;
  border-color: transparent;
  background: #f8fafc;
  justify-content: center;
}

.toolbar .vtt.on {
  background: #fef2f2;
}

.timer {
  font-variant-numeric: tabular-nums;
}

.err {
  margin: 0;
  color: #b91c1c;
  font-size: 0.78rem;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.16);
  }
}
</style>