Updated all examples with clients to use the new PipecatClient

examples/simple-chatbot/client/react/src/App.tsx

@@ -1,22 +1,22 @@
 import {
-  RTVIClientAudio,
-  RTVIClientVideo,
-  useRTVIClientTransportState,
+  PipecatClientAudio,
+  PipecatClientVideo,
+  usePipecatClientTransportState,
 } from '@pipecat-ai/client-react';
-import { RTVIProvider } from './providers/RTVIProvider';
+import { PipecatProvider } from './providers/PipecatProvider';
 import { ConnectButton } from './components/ConnectButton';
 import { StatusDisplay } from './components/StatusDisplay';
 import { DebugDisplay } from './components/DebugDisplay';
 import './App.css';
 
 function BotVideo() {
-  const transportState = useRTVIClientTransportState();
+  const transportState = usePipecatClientTransportState();
   const isConnected = transportState !== 'disconnected';
 
   return (
     <div className="bot-container">
       <div className="video-container">
-        {isConnected && <RTVIClientVideo participant="bot" fit="cover" />}
+        {isConnected && <PipecatClientVideo participant="bot" fit="cover" />}
       </div>
     </div>
   );
@@ -35,16 +35,16 @@ function AppContent() {
       </div>
 
       <DebugDisplay />
-      <RTVIClientAudio />
+      <PipecatClientAudio />
     </div>
   );
 }
 
 function App() {
   return (
-    <RTVIProvider>
+    <PipecatProvider>
       <AppContent />
-    </RTVIProvider>
+    </PipecatProvider>
   );
 }
 

examples/simple-chatbot/client/react/src/components/ConnectButton.tsx

@@ -1,16 +1,16 @@
 import {
-  useRTVIClient,
-  useRTVIClientTransportState,
+  usePipecatClient,
+  usePipecatClientTransportState,
 } from '@pipecat-ai/client-react';
 
 export function ConnectButton() {
-  const client = useRTVIClient();
-  const transportState = useRTVIClientTransportState();
+  const client = usePipecatClient();
+  const transportState = usePipecatClientTransportState();
   const isConnected = ['connected', 'ready'].includes(transportState);
 
   const handleClick = async () => {
     if (!client) {
-      console.error('RTVI client is not initialized');
+      console.error('Pipecat client is not initialized');
       return;
     }
 
@@ -18,7 +18,7 @@ export function ConnectButton() {
       if (isConnected) {
         await client.disconnect();
       } else {
-        await client.connect();
+        await client.connect({ endpoint: 'http://localhost:7860/connect' });
       }
     } catch (error) {
       console.error('Connection error:', error);

examples/simple-chatbot/client/react/src/components/DebugDisplay.tsx

@@ -6,12 +6,12 @@ import {
   TranscriptData,
   BotLLMTextData,
 } from '@pipecat-ai/client-js';
-import { useRTVIClient, useRTVIClientEvent } from '@pipecat-ai/client-react';
+import { usePipecatClient, useRTVIClientEvent } from '@pipecat-ai/client-react';
 import './DebugDisplay.css';
 
 export function DebugDisplay() {
   const debugLogRef = useRef<HTMLDivElement>(null);
-  const client = useRTVIClient();
+  const client = usePipecatClient();
 
   const log = useCallback((message: string) => {
     if (!debugLogRef.current) return;

examples/simple-chatbot/client/react/src/components/StatusDisplay.tsx

@@ -1,7 +1,7 @@
-import { useRTVIClientTransportState } from '@pipecat-ai/client-react';
+import { usePipecatClientTransportState } from '@pipecat-ai/client-react';
 
 export function StatusDisplay() {
-  const transportState = useRTVIClientTransportState();
+  const transportState = usePipecatClientTransportState();
 
   return (
     <div className="status">

examples/simple-chatbot/client/react/src/providers/PipecatProvider.tsx

@@ -0,0 +1,16 @@
+import { type PropsWithChildren } from 'react';
+import { PipecatClient } from '@pipecat-ai/client-js';
+import { DailyTransport } from '@pipecat-ai/daily-transport';
+import { PipecatClientProvider } from '@pipecat-ai/client-react';
+
+const client = new PipecatClient({
+  transport: new DailyTransport(),
+  enableMic: true,
+  enableCam: false,
+});
+
+export function PipecatProvider({ children }: PropsWithChildren) {
+  return (
+    <PipecatClientProvider client={client}>{children}</PipecatClientProvider>
+  );
+}

examples/simple-chatbot/client/react/src/providers/RTVIProvider.tsx

@@ -1,22 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { RTVIClient } from '@pipecat-ai/client-js';
-import { DailyTransport } from '@pipecat-ai/daily-transport';
-import { RTVIClientProvider } from '@pipecat-ai/client-react';
-
-const transport = new DailyTransport();
-
-const client = new RTVIClient({
-  transport,
-  params: {
-    baseUrl: 'http://localhost:7860',
-    endpoints: {
-      connect: '/connect',
-    },
-  },
-  enableMic: true,
-  enableCam: false,
-});
-
-export function RTVIProvider({ children }: PropsWithChildren) {
-  return <RTVIClientProvider client={client}>{children}</RTVIClientProvider>;
-}