feat: Using local VAD concept (#26)

* fix: remove erroneous greetings

* feat: introducing local VAD concept

* Fix next.config.js for vad (#28)

* feat: using VAD to barge-in

* feat: rescue some of the old barge-in code and fail-safe

* feat: use react-nowplaying for audio playback

* fix: runtime order of code was confusing

* chore: add dev container file [no ci]

* fix: only barge-in or fail-safe if the mic is on

* fix: play/pause works

* fix: controls working for audio and text barge-in and playback

* feat: open mic as default

* feat: failsafe and barge-in rebuilt using selero VAD

---------

Co-authored-by: Ricky Samore <[email protected]>

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.gitignore

@@ -40,4 +40,7 @@ next-env.d.ts
 .contentlayer
 
 # vscode
-.vscode
+.vscode
+
+# container
+.devcontainer

app/components/AgentAvatar.tsx

@@ -2,7 +2,7 @@ import { Avatar } from "@nextui-org/react";
 import { DgSvg } from "./DgSvg";
 import { Message } from "ai/react";
 import { useMessageData } from "../context/MessageMetadata";
-import { usePlayQueue } from "../context/PlayQueue";
+import { useAudioStore } from "../context/AudioStore";
 import { voiceMap } from "../context/Deepgram";
 
 export const AgentAvatar = ({
@@ -12,10 +12,10 @@ export const AgentAvatar = ({
   message: Message;
   className?: string;
 }) => {
-  const { playQueue } = usePlayQueue();
+  const { audioStore } = useAudioStore();
   const { messageData } = useMessageData();
 
-  const foundAudio = playQueue.findLast((item) => item.id === message.id);
+  const foundAudio = audioStore.findLast((item) => item.id === message.id);
   const foundData = messageData.findLast((item) => item.id === message.id);
 
   if (foundAudio?.model) {

app/components/Controls.tsx

@@ -1,14 +1,13 @@
-import { useCallback, useMemo } from "react";
-import { isTablet, isMobile } from "react-device-detect";
+import { Message } from "ai/react";
+import { Tooltip } from "@nextui-org/react";
+import { useCallback, useEffect } from "react";
+
+import { Download } from "./Download";
 import { MicrophoneIcon } from "./icons/MicrophoneIcon";
 import { SendIcon } from "./icons/SendIcon";
-import { useNowPlaying } from "../context/NowPlaying";
-import { usePlayQueue } from "../context/PlayQueue";
-import { useMicrophone } from "../context/Microphone";
-import { Download } from "./Download";
-import { Message } from "ai/react";
 import { Settings } from "./Settings";
-import { Tooltip } from "@nextui-org/react";
+import { useMicrophone } from "../context/Microphone";
+import { useNowPlaying } from "react-nowplaying";
 
 export const Controls = ({
   input,
@@ -23,6 +22,11 @@ export const Controls = ({
 }) => {
   const { startMicrophone, stopMicrophone, microphoneOpen } = useMicrophone();
 
+  useEffect(() => { 
+    startMicrophone();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const microphoneToggle = useCallback(
     async (e: Event) => {
       e.preventDefault();
@@ -36,20 +40,15 @@ export const Controls = ({
     [microphoneOpen, startMicrophone, stopMicrophone]
   );
 
-  const { updateItem } = usePlayQueue();
-  const { nowPlaying, clearNowPlaying, player } = useNowPlaying();
+  const { stop: stopAudio } = useNowPlaying();
 
   const submitter = useCallback(
     (e: any) => {
-      if (nowPlaying) {
-        player?.pause();
-        updateItem(nowPlaying.id, { played: true });
-        clearNowPlaying();
-      }
       handleSubmit(e);
+      stopAudio();
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clearNowPlaying, handleSubmit, nowPlaying, updateItem]
+    // eslint-disable-next-line react-hooks/exhaustive-deps 
+    [stopAudio, handleSubmit]
   );
 
   return (