diff --git a/app/page.tsx b/app/page.tsx index 32dd041..1f3c3b0 100644 --- a/app/page.tsx +++ b/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 (
diff --git a/package.json b/package.json index d6810af..bbb3c13 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2f441d7..bc17e56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,11 +9,14 @@ importers: .: dependencies: '@livekit/components-react': - specifier: ^2.6.1 - version: 2.6.1(livekit-client@2.5.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0) + specifier: ^2.6.4 + version: 2.6.4(@livekit/krisp-noise-filter@0.2.12(livekit-client@2.5.5))(livekit-client@2.5.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0) '@livekit/components-styles': specifier: ^1.1.3 version: 1.1.3 + '@livekit/krisp-noise-filter': + specifier: ^0.2.12 + version: 0.2.12(livekit-client@2.5.5) framer-motion: specifier: ^11.9.0 version: 11.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -129,26 +132,35 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} - '@livekit/components-core@0.11.6': - resolution: {integrity: sha512-i6XwAaS0L6OhQxFekIgV5/xKrMhMGlSqvoqRDEb/L5fvbPZzx7yj0t5Fw7p2MzmtxllziQLuXxrb3BODKBlAkw==} + '@livekit/components-core@0.11.8': + resolution: {integrity: sha512-VfnCRFZxTRt0pjtmLDUdOccbV+auUx/0wjjdv9q5Ubi9fiLHj+QaxQ64nG4040Ib9Ihsev6A02iybSEGqRBEZw==} engines: {node: '>=18'} peerDependencies: livekit-client: ^2.5.4 tslib: ^2.6.2 - '@livekit/components-react@2.6.1': - resolution: {integrity: sha512-iSLIRvtqA5B0FOdfuJiGFnVQq1OPlDwoU/2vb05oQn9yKMGBtlx0LDwHGdbEKeCl6GEPFf4iwKSasGE/KBY2NA==} + '@livekit/components-react@2.6.4': + resolution: {integrity: sha512-DwR05R9JBKXvEPGhBFsqTQ7ev8cJHEL4U2fkatf7cyb2SkJkEkF6axDf3xHsSGjgUEUnDPvbSpntsj/ZDRWPEQ==} engines: {node: '>=18'} peerDependencies: + '@livekit/krisp-noise-filter': ^0.2.12 livekit-client: ^2.5.4 react: '>=18' react-dom: '>=18' tslib: ^2.6.2 + peerDependenciesMeta: + '@livekit/krisp-noise-filter': + optional: true '@livekit/components-styles@1.1.3': resolution: {integrity: sha512-ddWskAoELHLaR0aiTDAASmym7+ggrEmZEOSvyVDt2ueUJIuayDOH8JMmLYmzVp5++dgE8o14ZmSeMYUPuaH1Ag==} engines: {node: '>=18'} + '@livekit/krisp-noise-filter@0.2.12': + resolution: {integrity: sha512-z7qSa3A6fn/DYTt0rITNAK0sNpBTzlnb29aM0ks8UfpbfTnnjAaFv3AC695mUq9iICPKrd5jOQT71gowiQ+Otg==} + peerDependencies: + livekit-client: ^2.0.8 + '@livekit/protocol@1.20.1': resolution: {integrity: sha512-TgyuwOx+XJn9inEYT9OKfFNs9YIPS4BdLa4pF5FDf9MhWRnahKwPe7jxr/+sVdWxYbZmy9hRrH58jSAFu0ONHw==} @@ -1782,7 +1794,7 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 - '@livekit/components-core@0.11.6(livekit-client@2.5.5)(tslib@2.7.0)': + '@livekit/components-core@0.11.8(livekit-client@2.5.5)(tslib@2.7.0)': dependencies: '@floating-ui/dom': 1.6.11 livekit-client: 2.5.5 @@ -1790,18 +1802,24 @@ snapshots: rxjs: 7.8.1 tslib: 2.7.0 - '@livekit/components-react@2.6.1(livekit-client@2.5.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)': + '@livekit/components-react@2.6.4(@livekit/krisp-noise-filter@0.2.12(livekit-client@2.5.5))(livekit-client@2.5.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tslib@2.7.0)': dependencies: - '@livekit/components-core': 0.11.6(livekit-client@2.5.5)(tslib@2.7.0) + '@livekit/components-core': 0.11.8(livekit-client@2.5.5)(tslib@2.7.0) clsx: 2.1.1 livekit-client: 2.5.5 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) tslib: 2.7.0 usehooks-ts: 3.1.0(react@18.3.1) + optionalDependencies: + '@livekit/krisp-noise-filter': 0.2.12(livekit-client@2.5.5) '@livekit/components-styles@1.1.3': {} + '@livekit/krisp-noise-filter@0.2.12(livekit-client@2.5.5)': + dependencies: + livekit-client: 2.5.5 + '@livekit/protocol@1.20.1': dependencies: '@bufbuild/protobuf': 1.10.0 @@ -2410,7 +2428,7 @@ snapshots: debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.8.0 is-bun-module: 1.2.1 @@ -2423,7 +2441,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -2445,7 +2463,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3