From ca21a2dd6da1b566e9b4125a7de3a45978bbc37e Mon Sep 17 00:00:00 2001
From: Jack Schedel <jackschedel@gmail.com>
Date: Fri, 5 Jan 2024 23:55:31 -0500
Subject: [PATCH] whisper uses generating lock + stop generating button has
 onClick rather than whole div fixes #87

---
 src/components/Chat/ChatContent/Message/WhisperRecord.tsx   | 6 ++++--
 .../StopGeneratingButton/StopGeneratingButton.tsx           | 6 ++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Chat/ChatContent/Message/WhisperRecord.tsx b/src/components/Chat/ChatContent/Message/WhisperRecord.tsx
index 17cf70a3..e60a79fa 100644
--- a/src/components/Chat/ChatContent/Message/WhisperRecord.tsx
+++ b/src/components/Chat/ChatContent/Message/WhisperRecord.tsx
@@ -14,16 +14,17 @@ const WhisperRecord = ({
   messageIndex: number;
 }) => {
   let apiKey = useStore((state) => state.apiKey);
-
+  const setGenerating = useStore((state) => state.setGenerating);
   apiKey = apiKey || '0';
 
   const { transcript, startRecording, stopRecording } = useWhisper({ apiKey });
 
   useEffect(() => {
-    if (transcript.text) {
+    if (transcript.text != null) {
       _setContent((prev) => {
         return prev.replace('◯', transcript.text || '');
       });
+      setGenerating(false);
     }
   }, [transcript.text]);
 
@@ -54,6 +55,7 @@ const WhisperRecord = ({
         return startContent + paddedStart + '◉' + paddedEnd + endContent;
       });
       startRecording();
+      setGenerating(true);
     }
     setIsRecording(!isRecording);
   };
diff --git a/src/components/StopGeneratingButton/StopGeneratingButton.tsx b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
index 197af571..4625fcd0 100644
--- a/src/components/StopGeneratingButton/StopGeneratingButton.tsx
+++ b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
@@ -6,13 +6,11 @@ const StopGeneratingButton = () => {
   const generating = useStore((state) => state.generating);
 
   return generating ? (
-    <div
-      className='absolute bottom-6 left-0 right-0 m-auto flex md:w-full md:m-auto gap-0 md:gap-2 justify-center'
-      onClick={() => setGenerating(false)}
-    >
+    <div className='absolute bottom-6 left-0 right-0 m-auto flex md:w-full md:m-auto gap-0 md:gap-2 justify-center'>
       <button
         className='btn relative btn-neutral border-0 md:border hover:bg-neutral-dark'
         aria-label='stop generating'
+        onClick={() => setGenerating(false)}
       >
         <div className='flex w-full items-center justify-center gap-2'>
           <svg