Add Krisp noice filter to local user microphone track (#14)

Add Krisp noise filter

app/page.tsx

@@ -15,6 +15,7 @@ import { MediaDeviceFailure } from "livekit-client";
 import type { ConnectionDetails } from "./api/connection-details/route";
 import { NoAgentNotification } from "@/components/NoAgentNotification";
 import { CloseIcon } from "@/components/CloseIcon";
+import { useKrispNoiseFilter } from "@livekit/components-react/krisp";
 
 export default function Page() {
   const [connectionDetails, updateConnectionDetails] = useState<
@@ -86,6 +87,12 @@ function ControlBar(props: {
   onConnectButtonClicked: () => void;
   agentState: AgentState;
 }) {
+  // Use the Krisp noise filter to reduce background noise.
+  const krisp = useKrispNoiseFilter();
+  useEffect(() => {
+    krisp.setNoiseFilterEnabled(true);
+  }, []);
+
   return (
     <div className="relative h-[100px]">
       <AnimatePresence>

package.json

@@ -9,8 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@livekit/components-react": "^2.6.1",
+    "@livekit/components-react": "^2.6.4",
     "@livekit/components-styles": "^1.1.3",
+    "@livekit/krisp-noise-filter": "^0.2.12",
     "framer-motion": "^11.9.0",
     "livekit-client": "^2.5.5",
     "livekit-server-sdk": "^2.6.1",