From ac7e38719db0b83a00e8bd8eddc7e5b7c92d39cf Mon Sep 17 00:00:00 2001
From: James Hush <james@daily.co>
Date: Tue, 1 Apr 2025 19:26:41 +0800
Subject: [PATCH] Add local view and recording

---
 .../simple-chatbot/client/react/src/App.css   |  6 ++++
 .../simple-chatbot/client/react/src/App.tsx   | 28 ++++++++++++++-----
 .../react/src/providers/RTVIProvider.tsx      | 14 +++++-----
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/examples/simple-chatbot/client/react/src/App.css b/examples/simple-chatbot/client/react/src/App.css
index 568839735..cc6664f72 100644
--- a/examples/simple-chatbot/client/react/src/App.css
+++ b/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;
diff --git a/examples/simple-chatbot/client/react/src/App.tsx b/examples/simple-chatbot/client/react/src/App.tsx
index a1e91c74e..acd637144 100644
--- a/examples/simple-chatbot/client/react/src/App.tsx
+++ b/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 />
diff --git a/examples/simple-chatbot/client/react/src/providers/RTVIProvider.tsx b/examples/simple-chatbot/client/react/src/providers/RTVIProvider.tsx
index 8c6c6a894..0e44cd09e 100644
--- a/examples/simple-chatbot/client/react/src/providers/RTVIProvider.tsx
+++ b/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) {