rename useAppSession to useConnection

Author: thomasyuill-livekit

app/ui/layout.tsx

@@ -1,5 +1,5 @@
 import { headers } from 'next/headers';
-import { AppSessionProvider } from '@/hooks/useAppSession';
+import { ConnectionProvider } from '@/hooks/useConnection';
 import { getAppConfig } from '@/lib/utils';
 
 interface LayoutProps {
@@ -11,7 +11,7 @@ export default async function Layout({ children }: LayoutProps) {
   const appConfig = await getAppConfig(hdrs);
 
   return (
-    <AppSessionProvider appConfig={appConfig}>
+    <ConnectionProvider appConfig={appConfig}>
       <div className="bg-muted/20 min-h-svh p-8">
         <div className="mx-auto max-w-3xl space-y-8">
           <header className="space-y-2">
@@ -40,6 +40,6 @@ export default async function Layout({ children }: LayoutProps) {
           <main className="space-y-20">{children}</main>
         </div>
       </div>
-    </AppSessionProvider>
+    </ConnectionProvider>
   );
 }

components/app/app.tsx

@@ -4,21 +4,21 @@ 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 { AppSessionProvider } from '@/hooks/useAppSession';
+import { ConnectionProvider } from '@/hooks/useConnection';
 
 interface AppProps {
   appConfig: AppConfig;
 }
 
 export function App({ appConfig }: AppProps) {
   return (
-    <AppSessionProvider appConfig={appConfig}>
+    <ConnectionProvider appConfig={appConfig}>
       <main className="grid h-svh grid-cols-1 place-content-center">
         <ViewController appConfig={appConfig} />
       </main>
       <StartAudio label="Start Audio" />
       <RoomAudioRenderer />
       <Toaster />
-    </AppSessionProvider>
+    </ConnectionProvider>
   );
 }

components/app/session-view.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
-import { useSessionMessages } from '@livekit/components-react';
+import { useSessionContext, useSessionMessages } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 import { ChatTranscript } from '@/components/app/chat-transcript';
 import { PreConnectMessage } from '@/components/app/preconnect-message';
@@ -11,7 +11,7 @@ import {
   AgentControlBar,
   type ControlBarControls,
 } from '@/components/livekit/agent-control-bar/agent-control-bar';
-import { useAppSession } from '@/hooks/useAppSession';
+import { useConnection } from '@/hooks/useConnection';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../livekit/scroll-area/scroll-area';
 
@@ -65,9 +65,10 @@ export const SessionView = ({
   appConfig,
   ...props
 }: React.ComponentProps<'section'> & SessionViewProps) => {
-  const { session, isSessionActive, endSession } = useAppSession();
+  const session = useSessionContext();
   const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);
+  const { isConnectionActive, disconnect } = useConnection();
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const controls: ControlBarControls = {
@@ -87,10 +88,9 @@ export const SessionView = ({
     }
   }, [messages]);
 
-  const handleDisconnect = () => {
-    // pass false so we can manually end the session when the exit animation completes
-    endSession(false);
-  };
+  const handleDisconnect = useCallback(() => {
+    disconnect(false);
+  }, [disconnect]);
 
   return (
     <section className="bg-background relative z-10 h-full w-full overflow-hidden" {...props}>
@@ -126,7 +126,7 @@ export const SessionView = ({
           <Fade bottom className="absolute inset-x-0 top-0 h-4 -translate-y-full" />
           <AgentControlBar
             controls={controls}
-            isSessionActive={isSessionActive}
+            isConnectionActive={isConnectionActive}
             onDisconnect={handleDisconnect}
             onChatOpenChange={setChatOpen}
           />

components/app/view-controller.tsx

@@ -7,7 +7,7 @@ import { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
 import { useAgentErrors } from '@/hooks/useAgentErrors';
-import { useAppSession } from '@/hooks/useAppSession';
+import { useConnection } from '@/hooks/useConnection';
 import { useDebugMode } from '@/hooks/useDebug';
 
 const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
@@ -39,7 +39,7 @@ interface ViewControllerProps {
 
 export function ViewController({ appConfig }: ViewControllerProps) {
   const session = useSessionContext();
-  const { isSessionActive, startSession } = useAppSession();
+  const { isConnectionActive, connect } = useConnection();
 
   useDebugMode({ enabled: IN_DEVELOPMENT });
   useAgentErrors();
@@ -56,17 +56,17 @@ export function ViewController({ appConfig }: ViewControllerProps) {
 
   return (
     <AnimatePresence mode="wait">
-      {/* Welcome screen */}
-      {!isSessionActive && (
+      {/* Welcome view */}
+      {!isConnectionActive && (
         <MotionWelcomeView
           key="welcome"
           {...VIEW_MOTION_PROPS}
           startButtonText={appConfig?.startButtonText ?? ''}
-          onStartCall={startSession}
+          onStartCall={connect}
         />
       )}
       {/* Session view */}
-      {isSessionActive && (
+      {isConnectionActive && (
         <MotionSessionView
           key="session-view"
           {...VIEW_MOTION_PROPS}

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

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

hooks/useAgentErrors.tsx

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

hooks/useAppSession.tsx hooks/useConnection.tsxhooks/useAppSession.tsx renamed to hooks/useConnection.tsx

@@ -5,35 +5,35 @@ import { TokenSource } from 'livekit-client';
 import { SessionProvider, type UseSessionReturn, useSession } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 
-interface AppSessionContextType {
+interface ConnectionContextType {
   session?: UseSessionReturn;
-  isSessionActive: boolean;
-  startSession: (startSession?: boolean) => void;
-  endSession: (endSession?: boolean) => void;
+  isConnectionActive: boolean;
+  connect: (startSession?: boolean) => void;
+  disconnect: (endSession?: boolean) => void;
 }
 
-const AppSessionContext = createContext<AppSessionContextType>({
+const ConnectionContext = createContext<ConnectionContextType>({
   session: undefined,
-  isSessionActive: false,
-  startSession: () => {},
-  endSession: () => {},
+  isConnectionActive: false,
+  connect: () => {},
+  disconnect: () => {},
 });
 
-export function useAppSession() {
-  const ctx = useContext(AppSessionContext);
+export function useConnection() {
+  const ctx = useContext(ConnectionContext);
   if (!ctx) {
-    throw new Error('useAppSession must be used within a AppSessionProvider');
+    throw new Error('useConnection must be used within a ConnectionProvider');
   }
   return ctx;
 }
 
-interface AppSessionProviderProps {
+interface ConnectionProviderProps {
   appConfig: AppConfig;
   children: React.ReactNode;
 }
 
-export function AppSessionProvider({ appConfig, children }: AppSessionProviderProps) {
-  const [isSessionActive, setIsSessionActive] = useState(false);
+export function ConnectionProvider({ appConfig, children }: ConnectionProviderProps) {
+  const [isConnectionActive, setIsConnectionActive] = useState(false);
 
   const tokenSource = useMemo(() => {
     if (typeof process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT === 'string') {
@@ -75,15 +75,15 @@ export function AppSessionProvider({ appConfig, children }: AppSessionProviderPr
 
   const value = useMemo(
     () => ({
-      isSessionActive,
+      isConnectionActive,
       /**
        * Start the application session and optionally start the agent session.
        *
        * @param startSession - Whether to start the agent session automatically. Default is true.
        * If startSession is passed in asfalse, you are opting to manually start the session.
        */
-      startSession: (startSession = true) => {
-        setIsSessionActive(true);
+      connect: (startSession = true) => {
+        setIsConnectionActive(true);
         if (startSession) {
           session.start();
         }
@@ -94,8 +94,8 @@ export function AppSessionProvider({ appConfig, children }: AppSessionProviderPr
        * @param endSession - Whether to end the agent session automatically. Default is true.
        * If endSession is passed in as false, you are opting to manually end the session.
        */
-      endSession: (endSession = true) => {
-        setIsSessionActive(false);
+      disconnect: (endSession = true) => {
+        setIsConnectionActive(false);
         if (endSession) {
           session.end();
         }
@@ -104,12 +104,12 @@ export function AppSessionProvider({ appConfig, children }: AppSessionProviderPr
     // session object is not a stable reference
     // TODO: add session object to dependencies
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    [isSessionActive]
+    [isConnectionActive]
   );
 
   return (
     <SessionProvider session={session}>
-      <AppSessionContext.Provider value={value}>{children}</AppSessionContext.Provider>
+      <ConnectionContext.Provider value={value}>{children}</ConnectionContext.Provider>
     </SessionProvider>
   );
 }