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';
-import { RTVIProvider } from './providers/RTVIProvider';
-import { ConnectButton } from './components/ConnectButton';
-import { StatusDisplay } from './components/StatusDisplay';
-import { DebugDisplay } from './components/DebugDisplay';
-import './App.css';
+} from "@pipecat-ai/client-react";
+import { RTVIProvider } from "./providers/RTVIProvider";
+import { ConnectButton } from "./components/ConnectButton";
+import { StatusDisplay } from "./components/StatusDisplay";
+import { DebugDisplay } from "./components/DebugDisplay";
+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 { RTVIClient } from '@pipecat-ai/client-js';
-import { DailyTransport } from '@pipecat-ai/daily-transport';
-import { RTVIClientProvider } from '@pipecat-ai/client-react';
+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',
+    baseUrl: "http://localhost:7860",
     endpoints: {
-      connect: '/connect',
+      connect: "/connect",
     },
   },
   enableMic: true,
-  enableCam: false,
+  enableCam: true,
 });
 
 export function RTVIProvider({ children }: PropsWithChildren) {

examples/simple-chatbot/server/bot-openai.py

@@ -213,6 +213,7 @@ async def main():
 
         @transport.event_handler("on_first_participant_joined")
         async def on_first_participant_joined(transport, participant):
+            await transport.start_recording()
             await transport.capture_participant_transcription(participant["id"])
             await task.queue_frames([context_aggregator.user().get_context_frame()])
 

examples/simple-chatbot/server/server.py

@@ -111,11 +111,13 @@ async def create_room_and_token() -> tuple[str, str]:
     Raises:
         HTTPException: If room creation or token generation fails
     """
-    room = await daily_helpers["rest"].create_room(DailyRoomParams())
+    room = await daily_helpers["rest"].create_room(
+        DailyRoomParams(properties={"enable_recording": "cloud"})
+    )
     if not room.url:
         raise HTTPException(status_code=500, detail="Failed to create room")
 
-    token = await daily_helpers["rest"].get_token(room.url)
+    token = await daily_helpers["rest"].get_token(room.url, 60 * 60, True)
     if not token:
         raise HTTPException(status_code=500, detail=f"Failed to get token for room: {room.url}")