Add Ask Mento, customer mood, and Pipecat speech-to-text.
Ship assistant answers, contact moods, voice dictation, and the related CRM UI so these can be deployed to production. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,334 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user