update @livekit/components-react

Author: thomasyuill-livekit

components/app/app.tsx

@@ -4,7 +4,18 @@ import { RoomAudioRenderer, StartAudio } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 import { ViewController } from '@/components/app/view-controller';
 import { Toaster } from '@/components/livekit/toaster';
+import { useAgentErrors } from '@/hooks/useAgentErrors';
 import { ConnectionProvider } from '@/hooks/useConnection';
+import { useDebugMode } from '@/hooks/useDebug';
+
+const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
+
+function AppSetup() {
+  useDebugMode({ enabled: IN_DEVELOPMENT });
+  useAgentErrors();
+
+  return null;
+}
 
 interface AppProps {
   appConfig: AppConfig;
@@ -13,6 +24,7 @@ interface AppProps {
 export function App({ appConfig }: AppProps) {
   return (
     <ConnectionProvider appConfig={appConfig}>
+      <AppSetup />
       <main className="grid h-svh grid-cols-1 place-content-center">
         <ViewController appConfig={appConfig} />
       </main>

components/app/view-controller.tsx

@@ -5,11 +5,7 @@ import { AnimatePresence, type AnimationDefinition, motion } from 'motion/react'
 import type { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
-import { useAgentErrors } from '@/hooks/useAgentErrors';
 import { useConnection } from '@/hooks/useConnection';
-import { useDebugMode } from '@/hooks/useDebug';
-
-const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 
 const MotionWelcomeView = motion.create(WelcomeView);
 const MotionSessionView = motion.create(SessionView);
@@ -39,9 +35,6 @@ interface ViewControllerProps {
 export function ViewController({ appConfig }: ViewControllerProps) {
   const { isConnectionActive, connect, onDisconnectTransitionComplete } = useConnection();
 
-  useDebugMode({ enabled: IN_DEVELOPMENT });
-  useAgentErrors();
-
   const handleAnimationComplete = useCallback(
     (definition: AnimationDefinition) => {
       // manually end the session when the exit animation completes

hooks/useConnection.tsx

@@ -71,22 +71,23 @@ export function ConnectionProvider({ appConfig, children }: ConnectionProviderPr
     appConfig.agentName ? { agentName: appConfig.agentName } : undefined
   );
 
-  const value = useMemo(
-    () => ({
+  const { start: startSession, end: endSession } = session;
+
+  const value = useMemo(() => {
+    return {
       isConnectionActive,
       connect: () => {
         setIsConnectionActive(true);
-        session.start();
+        startSession();
       },
       startDisconnectTransition: () => {
         setIsConnectionActive(false);
       },
       onDisconnectTransitionComplete: () => {
-        session.end();
+        endSession();
       },
-    }),
-    [session, isConnectionActive]
-  );
+    };
+  }, [startSession, endSession, isConnectionActive]);
 
   return (
     <SessionProvider session={session}>