remove useConnection

Author: thomasyuill-livekit

components/app/app.tsx

@@ -1,11 +1,17 @@
 'use client';
 
-import { RoomAudioRenderer, StartAudio } from '@livekit/components-react';
+import { useMemo } from 'react';
+import { TokenSource } from 'livekit-client';
+import {
+  RoomAudioRenderer,
+  SessionProvider,
+  StartAudio,
+  useSession,
+} 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';
@@ -22,15 +28,51 @@ interface AppProps {
 }
 
 export function App({ appConfig }: AppProps) {
+  const tokenSource = useMemo(() => {
+    if (typeof process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT === 'string') {
+      return TokenSource.custom(async () => {
+        const url = new URL(process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT!, window.location.origin);
+
+        try {
+          const res = await fetch(url.toString(), {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Sandbox-Id': appConfig.sandboxId ?? '',
+            },
+            body: JSON.stringify({
+              room_config: appConfig.agentName
+                ? {
+                    agents: [{ agent_name: appConfig.agentName }],
+                  }
+                : undefined,
+            }),
+          });
+          return await res.json();
+        } catch (error) {
+          console.error('Error fetching connection details:', error);
+          throw new Error('Error fetching connection details!');
+        }
+      });
+    }
+
+    return TokenSource.endpoint('/api/connection-details');
+  }, [appConfig]);
+
+  const session = useSession(
+    tokenSource,
+    appConfig.agentName ? { agentName: appConfig.agentName } : undefined
+  );
+
   return (
-    <ConnectionProvider appConfig={appConfig}>
+    <SessionProvider session={session}>
       <AppSetup />
       <main className="grid h-svh grid-cols-1 place-content-center">
         <ViewController appConfig={appConfig} />
       </main>
       <StartAudio label="Start Audio" />
       <RoomAudioRenderer />
       <Toaster />
-    </ConnectionProvider>
+    </SessionProvider>
   );
 }

components/app/session-view.tsx

@@ -11,7 +11,6 @@ import {
   AgentControlBar,
   type ControlBarControls,
 } from '@/components/livekit/agent-control-bar/agent-control-bar';
-import { useConnection } from '@/hooks/useConnection';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../livekit/scroll-area/scroll-area';
 
@@ -68,7 +67,6 @@ export const SessionView = ({
   const session = useSessionContext();
   const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);
-  const { isConnectionActive, startDisconnectTransition } = useConnection();
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const controls: ControlBarControls = {
@@ -122,8 +120,8 @@ export const SessionView = ({
           <Fade bottom className="absolute inset-x-0 top-0 h-4 -translate-y-full" />
           <AgentControlBar
             controls={controls}
-            isConnectionActive={isConnectionActive}
-            onDisconnect={startDisconnectTransition}
+            isConnected={session.isConnected}
+            onDisconnect={session.end}
             onChatOpenChange={setChatOpen}
           />
         </div>

components/app/view-controller.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import { useCallback } from 'react';
-import { AnimatePresence, type AnimationDefinition, motion } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import { useSessionContext } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
-import { useConnection } from '@/hooks/useConnection';
 
 const MotionWelcomeView = motion.create(WelcomeView);
 const MotionSessionView = motion.create(SessionView);
@@ -33,37 +32,22 @@ interface ViewControllerProps {
 }
 
 export function ViewController({ appConfig }: ViewControllerProps) {
-  const { isConnectionActive, connect, onDisconnectTransitionComplete } = useConnection();
-
-  const handleAnimationComplete = useCallback(
-    (definition: AnimationDefinition) => {
-      // manually end the session when the exit animation completes
-      if (definition === 'hidden') {
-        onDisconnectTransitionComplete();
-      }
-    },
-    [onDisconnectTransitionComplete]
-  );
+  const { isConnected, start } = useSessionContext();
 
   return (
     <AnimatePresence mode="wait">
       {/* Welcome view */}
-      {!isConnectionActive && (
+      {!isConnected && (
         <MotionWelcomeView
           key="welcome"
           {...VIEW_MOTION_PROPS}
           startButtonText={appConfig.startButtonText}
-          onStartCall={connect}
+          onStartCall={start}
         />
       )}
       {/* Session view */}
-      {isConnectionActive && (
-        <MotionSessionView
-          key="session-view"
-          {...VIEW_MOTION_PROPS}
-          appConfig={appConfig}
-          onAnimationComplete={handleAnimationComplete}
-        />
+      {isConnected && (
+        <MotionSessionView key="session-view" {...VIEW_MOTION_PROPS} appConfig={appConfig} />
       )}
     </AnimatePresence>
   );

components/livekit/agent-control-bar/agent-control-bar.tsx

@@ -22,8 +22,8 @@ export interface ControlBarControls {
 }
 
 export interface AgentControlBarProps extends UseInputControlsProps {
-  isConnectionActive?: boolean;
   controls?: ControlBarControls;
+  isConnected?: boolean;
   onChatOpenChange?: (open: boolean) => void;
   onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
 }
@@ -35,7 +35,7 @@ export function AgentControlBar({
   controls,
   saveUserChoices = true,
   className,
-  isConnectionActive = false,
+  isConnected = false,
   onDisconnect,
   onDeviceError,
   onChatOpenChange,
@@ -158,7 +158,7 @@ export function AgentControlBar({
           <Button
             variant="destructive"
             onClick={onDisconnect}
-            disabled={!isConnectionActive}
+            disabled={!isConnected}
             className="font-mono"
           >
             <PhoneDisconnectIcon weight="bold" />

hooks/useAgentErrors.tsx

@@ -1,14 +1,13 @@
 import { useEffect } from 'react';
-import { useAgent } from '@livekit/components-react';
+import { useAgent, useSessionContext } from '@livekit/components-react';
 import { toastAlert } from '@/components/livekit/alert-toast';
-import { useConnection } from './useConnection';
 
 export function useAgentErrors() {
   const agent = useAgent();
-  const { isConnectionActive, startDisconnectTransition } = useConnection();
+  const { isConnected, end } = useSessionContext();
 
   useEffect(() => {
-    if (isConnectionActive && agent.state === 'failed') {
+    if (isConnected && agent.state === 'failed') {
       const reasons = agent.failureReasons;
 
       toastAlert({
@@ -38,7 +37,7 @@ export function useAgentErrors() {
         ),
       });
 
-      startDisconnectTransition();
+      end();
     }
-  }, [agent, isConnectionActive, startDisconnectTransition]);
+  }, [agent, isConnected, end]);
 }