73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { RTVIClient } from "@pipecat-ai/client-js";
|
|
import { DailyTransport } from "@pipecat-ai/daily-transport";
|
|
import { RTVIClientProvider } from "@pipecat-ai/client-react";
|
|
import { PropsWithChildren, useEffect, useState, useRef } from "react";
|
|
import { useConfigurationSettings } from "@/contexts/Configuration";
|
|
|
|
// Get the API base URL from environment variables
|
|
// Default to "/api" if not specified
|
|
// "/api" is the default for Next.js API routes and used
|
|
// for the Pipecat Cloud deployed agent
|
|
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "/api";
|
|
|
|
console.log("Using API base URL:", API_BASE_URL);
|
|
|
|
export function RTVIProvider({ children }: PropsWithChildren) {
|
|
const [client, setClient] = useState<RTVIClient | null>(null);
|
|
const config = useConfigurationSettings();
|
|
const clientCreated = useRef(false);
|
|
|
|
useEffect(() => {
|
|
// Only create the client once
|
|
if (clientCreated.current) return;
|
|
|
|
const transport = new DailyTransport();
|
|
|
|
const rtviClient = new RTVIClient({
|
|
transport,
|
|
params: {
|
|
baseUrl: API_BASE_URL,
|
|
endpoints: {
|
|
connect: "/connect",
|
|
},
|
|
requestData: {
|
|
personality: config.personality,
|
|
},
|
|
},
|
|
enableMic: true,
|
|
enableCam: false,
|
|
});
|
|
|
|
setClient(rtviClient);
|
|
clientCreated.current = true;
|
|
|
|
// Cleanup when component unmounts
|
|
return () => {
|
|
if (rtviClient) {
|
|
rtviClient.disconnect().catch((err) => {
|
|
console.error("Error disconnecting client:", err);
|
|
});
|
|
}
|
|
clientCreated.current = false;
|
|
};
|
|
}, []);
|
|
|
|
// Update the connectParams when config changes
|
|
useEffect(() => {
|
|
if (!client) return;
|
|
|
|
// Update the connect params without recreating the client
|
|
client.params.requestData = {
|
|
personality: config.personality,
|
|
};
|
|
}, [client, config.personality]);
|
|
|
|
if (!client) {
|
|
return null;
|
|
}
|
|
|
|
return <RTVIClientProvider client={client}>{children}</RTVIClientProvider>;
|
|
}
|