@broadreachalliance/q-assistant
Version:
A React-based voice assistant
72 lines (71 loc) • 2.66 kB
JavaScript
"use client";
import { useSpeech } from "../contexts";
import React, { useEffect, useState } from "react";
const VoiceSettings = () => {
const {
speechStatus,
setUtterence
} = useSpeech();
let defaultVoice;
if (typeof window !== "undefined") {
defaultVoice = localStorage.getItem("selectedVoice");
}
const [selectedVoice, setSelectedVoice] = useState(defaultVoice);
const [saved, setSaved] = useState(false);
useEffect(() => {
if (!selectedVoice) {
setSelectedVoice(speechStatus?.voices?.[0]?.name);
}
}, [speechStatus]);
const saveVoiceToLocalStorage = () => {
if (typeof window !== "undefined") {
localStorage.setItem("selectedVoice", selectedVoice);
setSaved(true);
setTimeout(() => setSaved(false), 1000);
}
};
const speaksampleText = () => {
if (!selectedVoice) return;
const utterance = new SpeechSynthesisUtterance("Hello ! This is your selected voice.");
setUtterence(utterance);
let voice;
if (typeof selectedVoice == "string") {
const voiceParts = selectedVoice?.split("$");
voice = speechStatus?.voices.find(v => v.name === voiceParts?.[0] && v.lang === voiceParts?.[1]);
} else {
voice = selectedVoice;
}
if (voice) {
utterance.voice = voice;
}
window.speechSynthesis.speak(utterance);
};
return /*#__PURE__*/React.createElement("div", {
className: "ai-assistant"
}, /*#__PURE__*/React.createElement("div", {
className: "flex flex-col p-6 bg-white rounded-lg border border-gray-200"
}, /*#__PURE__*/React.createElement("h5", {
className: "text-lg font-bold mb-4"
}, "Assistant voice settings"), /*#__PURE__*/React.createElement("div", {
className: "mb-4"
}, /*#__PURE__*/React.createElement("label", {
htmlFor: "voiceSelect",
className: "block text-sm font-medium text-gray-700 mb-1"
}, "Select Voice"), /*#__PURE__*/React.createElement("div", {
className: "relative flex flex-row justify-between items-center h-[50px]"
}, /*#__PURE__*/React.createElement("div", {
className: "relative w-[84%]"
}, /*#__PURE__*/React.createElement("select", {
id: "voiceSelect",
value: selectedVoice,
disabled: true,
onChange: event => setSelectedVoice(event.target.value),
className: "w-full p-3 pl-4 pr-10 h-full border border-gray-300 rounded-lg text-sm shadow-sm focus:ring-0 focus:outline-none text-gray-700 appearance-none"
}, /*#__PURE__*/React.createElement("option", {
value: "",
disabled: true
}, "Select a voice"), /*#__PURE__*/React.createElement("option", {
value: "Nova"
}, "Nova")))))));
};
export default VoiceSettings;