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 (