scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-09-07 08:26:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: selective disabling of buttons

Browse source
This commit is contained in:
kraken 2024-08-03 02:12:29 +05:30
parent eefea19888
commit 23f382a434
1 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
apps/web/app/(dash)/chat/chatWindow.tsx
View file

@ -52,7 +52,8 @@ function ChatWindow({
}) {
const [layout, setLayout] = useState<"chat" | "initial">("chat");
const [chatHistory, setChatHistory] = useState<ChatHistory[]>(initialChat);
const [isSpeaking, setIsSpeaking] = useState(false);
const [speakingIdx, setSpeakingIdx] = useState<number | null>(null);
const speechSynth: SpeechSynthesis = window.speechSynthesis;
const removeJustificationFromText = (text: string) => {
// remove everything after the first "<justification>" word
@ -68,27 +69,23 @@ function ChatWindow({
return text;
};
const handleTTS = (text: string) => {
if (isSpeaking) return stopTTS();
const handleTTS = (text: string, idx: number) => {
if (speakingIdx != null) return stopTTS();
if (!text) return;
const utterThis: SpeechSynthesisUtterance = new SpeechSynthesisUtterance(
text,
);
const speechSynth: SpeechSynthesis = window.speechSynthesis;
utterThis.lang = "en-US";
speechSynth.speak(utterThis);
setIsSpeaking(true);
setSpeakingIdx(idx);
utterThis.onend = () => {
setIsSpeaking(false);
setSpeakingIdx(null);
};
};
const stopTTS = () => {
if (isSpeaking) {
const speechSynth: SpeechSynthesis = window.speechSynthesis;
speechSynth.cancel();
setIsSpeaking(false);
}
speechSynth.cancel();
setSpeakingIdx(null);
};
const router = useRouter();
@ -345,19 +342,23 @@ function ChatWindow({
</button>
{/* speak response */}
<button
disabled={
speakingIdx !== null && speakingIdx !== idx
}
onClick={() => {
handleTTS(
chat.answer.parts
.map((part) => part.text)
.join(""),
idx,
);
}}
className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200 "
className="group h-8 w-8 flex justify-center items-center active:scale-75 duration-200"
>
{isSpeaking ? (
<SpeakerOffIcon />
{speakingIdx === idx ? (
<SpeakerOffIcon className="size-[18px] group-hover:text-primary" />
) : (
<SpeakerWaveIcon className="size-[18px] group-hover:text-primary" />
<SpeakerWaveIcon className="size-[18px] group-hover:text-primary group-disabled:text-gray-600" />
)}
</button>
</div>