Add local view and recording

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

@@ -56,6 +56,12 @@ button:disabled {
   align-items: center;
 }
 
+.local-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .video-container {
   width: 640px;
   height: 360px;

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

@@ -2,16 +2,16 @@ import {
   RTVIClientAudio,
   RTVIClientVideo,
   useRTVIClientTransportState,
-} from '@pipecat-ai/client-react';
+} from "@pipecat-ai/client-react";
-import { RTVIProvider } from './providers/RTVIProvider';
+import { RTVIProvider } from "./providers/RTVIProvider";
-import { ConnectButton } from './components/ConnectButton';
+import { ConnectButton } from "./components/ConnectButton";
-import { StatusDisplay } from './components/StatusDisplay';
+import { StatusDisplay } from "./components/StatusDisplay";
-import { DebugDisplay } from './components/DebugDisplay';
+import { DebugDisplay } from "./components/DebugDisplay";
-import './App.css';
+import "./App.css";
 
 function BotVideo() {
   const transportState = useRTVIClientTransportState();
-  const isConnected = transportState !== 'disconnected';
+  const isConnected = transportState !== "disconnected";
 
   return (
     <div className="bot-container">
@@ -22,6 +22,19 @@ function BotVideo() {
   );
 }
 
+function LocalVideo() {
+  const transportState = useRTVIClientTransportState();
+  const isConnected = transportState !== "disconnected";
+
+  return (
+    <div className="local-container">
+      <div className="video-container">
+        {isConnected && <RTVIClientVideo participant="local" fit="cover" />}
+      </div>
+    </div>
+  );
+}
+
 function AppContent() {
   return (
     <div className="app">
@@ -32,6 +45,7 @@ function AppContent() {
 
       <div className="main-content">
         <BotVideo />
+        <LocalVideo />
       </div>
 
       <DebugDisplay />

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

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