fix mic button animation and prompt

src/chatbox.tsx

@@ -509,7 +509,11 @@ export default function ChatBOX(props: {
         {chatStore.whisper_api &&
           (chatStore.whisper_key || chatStore.apiKey) && (
             <button
-              className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
+              className={`disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 ${
+                isRecording === "Recording"
+                  ? "bg-red-400 hover:bg-red-600"
+                  : "bg-cyan-400 hover:bg-cyan-600"
+              } ${isRecording !== "Mic" ? "animate-pulse" : ""}`}
               disabled={isRecording === "Transcribing"}
               ref={mediaRef}
               onClick={async () => {
@@ -521,20 +525,20 @@ export default function ChatBOX(props: {
                 }
 
                 // build prompt
-                const prompt = (
+                const prompt =
                   chatStore.history
                     .filter(({ hide }) => !hide)
                     .slice(chatStore.postBeginIndex)
                     .map(({ content }) => content)
                     .join(" ") +
                   " " +
-                  inputMsg
+                  inputMsg;
-                ).trim();
                 console.log({ prompt });
 
                 setIsRecording("Recording");
                 console.log("start recording");
 
+                try {
                   const mediaRecorder = new MediaRecorder(
                     await navigator.mediaDevices.getUserMedia({
                       audio: true,
@@ -589,10 +593,15 @@ export default function ChatBOX(props: {
 
                       const { text } = await response.json();
 
-                    setInputMsg(inputMsg + text);
+                      setInputMsg(inputMsg ? inputMsg + " " + text : text);
                       setIsRecording("Mic");
                     };
                   });
+                } catch (error) {
+                  alert(error);
+                  console.log(error);
+                  setIsRecording("Mic");
+                }
               }}
             >
               {isRecording}