make disconnect transition explicit

Author: thomasyuill-livekit

components/app/session-view.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
 import { useSessionContext, useSessionMessages } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
@@ -68,7 +68,7 @@ export const SessionView = ({
   const session = useSessionContext();
   const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);
-  const { isConnectionActive, disconnect } = useConnection();
+  const { isConnectionActive, startDisconnectTransition } = useConnection();
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const controls: ControlBarControls = {
@@ -88,10 +88,6 @@ export const SessionView = ({
     }
   }, [messages]);
 
-  const handleDisconnect = useCallback(() => {
-    disconnect(false);
-  }, [disconnect]);
-
   return (
     <section className="bg-background relative z-10 h-full w-full overflow-hidden" {...props}>
       {/* Chat Transcript */}
@@ -127,7 +123,7 @@ export const SessionView = ({
           <AgentControlBar
             controls={controls}
             isConnectionActive={isConnectionActive}
-            onDisconnect={handleDisconnect}
+            onDisconnect={startDisconnectTransition}
             onChatOpenChange={setChatOpen}
           />
         </div>

components/app/view-controller.tsx

@@ -2,8 +2,7 @@
 
 import { useCallback } from 'react';
 import { AnimatePresence, type AnimationDefinition, motion } from 'motion/react';
-import { useSessionContext } from '@livekit/components-react';
-import { AppConfig } from '@/app-config';
+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';
@@ -38,8 +37,7 @@ interface ViewControllerProps {
 }
 
 export function ViewController({ appConfig }: ViewControllerProps) {
-  const session = useSessionContext();
-  const { isConnectionActive, connect } = useConnection();
+  const { isConnectionActive, connect, onDisconnectTransitionComplete } = useConnection();
 
   useDebugMode({ enabled: IN_DEVELOPMENT });
   useAgentErrors();
@@ -48,10 +46,10 @@ export function ViewController({ appConfig }: ViewControllerProps) {
     (definition: AnimationDefinition) => {
       // manually end the session when the exit animation completes
       if (definition === 'hidden') {
-        session.end();
+        onDisconnectTransitionComplete();
       }
     },
-    [session]
+    [onDisconnectTransitionComplete]
   );
 
   return (

hooks/useConnection.tsx

@@ -2,21 +2,21 @@
 
 import { createContext, useContext, useMemo, useState } from 'react';
 import { TokenSource } from 'livekit-client';
-import { SessionProvider, type UseSessionReturn, useSession } from '@livekit/components-react';
+import { SessionProvider, useSession } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
 
 interface ConnectionContextType {
-  session?: UseSessionReturn;
   isConnectionActive: boolean;
   connect: (startSession?: boolean) => void;
-  disconnect: (endSession?: boolean) => void;
+  startDisconnectTransition: () => void;
+  onDisconnectTransitionComplete: () => void;
 }
 
 const ConnectionContext = createContext<ConnectionContextType>({
-  session: undefined,
   isConnectionActive: false,
   connect: () => {},
-  disconnect: () => {},
+  startDisconnectTransition: () => {},
+  onDisconnectTransitionComplete: () => {},
 });
 
 export function useConnection() {
@@ -76,29 +76,15 @@ export function ConnectionProvider({ appConfig, children }: ConnectionProviderPr
   const value = useMemo(
     () => ({
       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.
-       */
-      connect: (startSession = true) => {
+      connect: () => {
         setIsConnectionActive(true);
-        if (startSession) {
-          session.start();
-        }
+        session.start();
       },
-      /**
-       * End the application session and optionally end the agent session.
-       *
-       * @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.
-       */
-      disconnect: (endSession = true) => {
+      startDisconnectTransition: () => {
         setIsConnectionActive(false);
-        if (endSession) {
-          session.end();
-        }
+      },
+      onDisconnectTransitionComplete: () => {
+        session.end();
       },
     }),
     // session object is not a stable reference