fix: fix failsafe repeats

Author: lukeocodes

.devcontainer/devcontainer.json

@@ -7,7 +7,7 @@ import {
   LiveTranscriptionEvents,
 } from "@deepgram/sdk";
 import { Message, useChat } from "ai/react";
-import { NextUIProvider, Spinner } from "@nextui-org/react";
+import { NextUIProvider } from "@nextui-org/react";
 import { useMicVAD } from "@ricky0123/vad-react";
 import { useNowPlaying } from "react-nowplaying";
 import { useQueue } from "@uidotdev/usehooks";
@@ -161,6 +161,7 @@ export default function Conversation(): JSX.Element {
 
   const [currentUtterance, setCurrentUtterance] = useState<string>();
   const [failsafeTimeout, setFailsafeTimeout] = useState<NodeJS.Timeout>();
+  const [failsafeTriggered, setFailsafeTriggered] = useState<boolean>(false);
 
   const onSpeechEnd = useCallback(() => {
     /**
@@ -174,6 +175,7 @@ export default function Conversation(): JSX.Element {
       setTimeout(() => {
         if (currentUtterance) {
           console.log("failsafe fires! pew pew!!");
+          setFailsafeTriggered(true);
           append({
             role: "user",
             content: currentUtterance,
@@ -203,6 +205,12 @@ export default function Conversation(): JSX.Element {
      */
     if (!microphoneOpen) return;
 
+
+    /**
+     * We we're talking again, we want to wait for a transcript.
+     */
+    setFailsafeTriggered(false);
+
     if (!player?.ended) {
       stopAudio();
       console.log("barging in! SHH!");
@@ -325,6 +333,15 @@ export default function Conversation(): JSX.Element {
      */
     if (!content) return;
 
+    /**
+     * failsafe was triggered since we last sent a message to TTS 
+     */
+    if (failsafeTriggered) {
+      clearTranscriptParts();
+      setCurrentUtterance(undefined);
+      return;
+    }
+
     /**
      * display the concatenated utterances
      */
@@ -349,7 +366,13 @@ export default function Conversation(): JSX.Element {
       clearTranscriptParts();
       setCurrentUtterance(undefined);
     }
-  }, [getCurrentUtterance, clearTranscriptParts, append, failsafeTimeout]);
+  }, [
+    getCurrentUtterance,
+    clearTranscriptParts,
+    append,
+    failsafeTimeout,
+    failsafeTriggered,
+  ]);
 
   /**
    * magic microphone audio queue processing

app/components/Conversation.tsx

@@ -20,19 +20,13 @@ const ToastContextProvider = ({ children }: ToastContextInterface) => {
       <>
         {children}
         <ToastContainer
-          position="top-center"
-          autoClose={5000}
-          hideProgressBar={false}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          theme="dark"
+          position={"bottom-center"}
+          autoClose={8000}
+          theme={"dark"}
           limit={1}
           transition={Bounce}
-          progressClassName="bg-gradient-to-r bg-gradient to-[#13EF93]/50 from-[#149AFB]/80"
+          className={"md:w-96 mb-26"}
+          progressClassName={"bg-gradient-to-r bg-gradient to-[#13EF93]/50 from-[#149AFB]/80"}
         />
       </>
     </ToastContext.Provider>

app/context/Toast.tsx

@@ -147,4 +147,4 @@ body {
 /* Override pygments style background color. */
 .markdown .highlight pre {
   @apply bg-gray-100 !important;
-}
+}

app/globals.css

@@ -11,6 +11,7 @@ import { MicrophoneContextProvider } from "./context/Microphone";
 import { AudioStoreContextProvider } from "./context/AudioStore";
 import { ToastContextProvider } from "./context/Toast";
 
+import 'react-toastify/dist/ReactToastify.css';
 import "./globals.css";
 
 import type { Metadata, Viewport } from "next";