feat: disable speaker button while speaking

This commit is contained in:
kraken 2024-08-03 01:44:48 +05:30
parent 56376808ac
commit 521daee8a6
2 changed files with 40 additions and 30 deletions

View file

@ -51,6 +51,7 @@ function ChatWindow({
}) {
const [layout, setLayout] = useState<"chat" | "initial">("chat");
const [chatHistory, setChatHistory] = useState<ChatHistory[]>(initialChat);
const [isSpeaking, setIsSpeaking] = useState(false);
const removeJustificationFromText = (text: string) => {
// remove everything after the first "<justification>" word
@ -66,6 +67,20 @@ function ChatWindow({
return text;
};
const handleTTS = (text: string) => {
if (!text) return;
const utterThis: SpeechSynthesisUtterance = new SpeechSynthesisUtterance(
text,
);
const speechSynth: SpeechSynthesis = window.speechSynthesis;
utterThis.lang = "en-US";
speechSynth.speak(utterThis);
setIsSpeaking(true);
utterThis.onend = () => {
setIsSpeaking(false);
};
};
const router = useRouter();
const getAnswer = async (
@ -305,25 +320,6 @@ function ChatWindow({
</Markdown>
<div className="mt-3 relative -left-2 flex items-center gap-1">
{/* speak response */}
<button
onClick={() => {
const utterThis: SpeechSynthesisUtterance =
new SpeechSynthesisUtterance(
chat.answer.parts
.map((part) => part.text)
.join(""),
);
const speechSynth: SpeechSynthesis =
window.speechSynthesis;
utterThis.lang = "en-US";
utterThis.rate = 1;
speechSynth.speak(utterThis);
}}
className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200"
>
<SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
</button>
{/* copy response */}
<button
onClick={() =>
@ -337,6 +333,20 @@ function ChatWindow({
>
<ClipboardIcon className="size-[18px] group-hover:text-primary" />
</button>
{/* speak response */}
<button
disabled={isSpeaking}
onClick={() => {
handleTTS(
chat.answer.parts
.map((part) => part.text)
.join(""),
);
}}
className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200 disabled:opacity-30"
>
<SpeakerWaveIcon className="size-[18px] group-hover:text-primary group-disabled:group-hover:text-gray-600" />
</button>
</div>
</div>
</div>

View file

@ -5,13 +5,13 @@ pages_build_output_dir = ".vercel/output/static"
kv_namespaces = [
{ binding = "CANVAS_SNAPS", id = "6df98c892b3744ccb0c631d9f60d6697" },
{ binding = "RECOMMENDATIONS", id = "83bc7055226c4657948141c2ff9a5425" }
{ binding = "CANVAS_SNAPS", id = "24c7048fa9064e7787dd58760b21dc8d" },
{ binding = "RECOMMENDATIONS", id = "abfd16f09b0b4300908115a5a177429e" }
]
env.production.kv_namespaces = [
{ binding = "CANVAS_SNAPS", id = "6df98c892b3744ccb0c631d9f60d6697" },
{ binding = "RECOMMENDATIONS", id = "83bc7055226c4657948141c2ff9a5425" }
{ binding = "CANVAS_SNAPS", id = "24c7048fa9064e7787dd58760b21dc8d" },
{ binding = "RECOMMENDATIONS", id = "abfd16f09b0b4300908115a5a177429e" }
]
[ai]
@ -22,26 +22,26 @@ mode = "smart"
[[r2_buckets]]
binding = "STORAGE"
bucket_name = "dev-r2-anycontext"
bucket_name = "supermemory-r2"
[[d1_databases]]
binding = "DATABASE"
database_name = "dev-d1-anycontext"
database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
database_name = "supermemory-db-preview"
database_id = "b09e126c-8179-4927-876a-6a03ee94334b"
[[env.production.d1_databases]]
binding = "DATABASE"
database_name = "prod-d1-supermemory"
database_id = "f527a727-c472-41d4-8eaf-3d7ba0f2f395"
database_name = "supermemory-db-prod"
database_id = "0dea4084-3629-4aea-938c-da478a32f5cd"
[env.preview.ai]
binding = "AI"
[[env.preview.d1_databases]]
binding = "DATABASE"
database_name = "dev-d1-anycontext"
database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
database_name = "supermemory-db-preview"
database_id = "b09e126c-8179-4927-876a-6a03ee94334b"
[env.production.ai]
binding = "AI"