feat: migrate to useSession hook

Author: thomasyuill-livekit

app/ui/layout.tsx

@@ -1,20 +1,23 @@
-import * as React from 'react';
 import { headers } from 'next/headers';
-import { SessionProvider } from '@/components/app/session-provider';
+import { AppSessionProvider } from '@/hooks/useAppSession';
 import { getAppConfig } from '@/lib/utils';
 
-export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: LayoutProps) {
   const hdrs = await headers();
   const appConfig = await getAppConfig(hdrs);
 
   return (
-    <SessionProvider appConfig={appConfig}>
+    <AppSessionProvider 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">
             <h1 className="text-5xl font-bold tracking-tight">LiveKit UI</h1>
             <p className="text-muted-foreground max-w-80 leading-tight text-pretty">
-              A set of UI components for building LiveKit-powered voice experiences.
+              A set of UI Layouts for building LiveKit-powered voice experiences.
             </p>
             <p className="text-muted-foreground max-w-prose text-balance">
               Built with{' '}
@@ -37,6 +40,6 @@ export default async function ComponentsLayout({ children }: { children: React.R
           <main className="space-y-20">{children}</main>
         </div>
       </div>
-    </SessionProvider>
+    </AppSessionProvider>
   );
 }

components/app/app.tsx

@@ -2,23 +2,23 @@
 
 import { RoomAudioRenderer, StartAudio } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
-import { SessionProvider } from '@/components/app/session-provider';
 import { ViewController } from '@/components/app/view-controller';
 import { Toaster } from '@/components/livekit/toaster';
+import { AppSessionProvider } from '@/hooks/useAppSession';
 
 interface AppProps {
   appConfig: AppConfig;
 }
 
 export function App({ appConfig }: AppProps) {
   return (
-    <SessionProvider appConfig={appConfig}>
+    <AppSessionProvider appConfig={appConfig}>
       <main className="grid h-svh grid-cols-1 place-content-center">
-        <ViewController />
+        <ViewController appConfig={appConfig} />
       </main>
       <StartAudio label="Start Audio" />
       <RoomAudioRenderer />
       <Toaster />
-    </SessionProvider>
+    </AppSessionProvider>
   );
 }

components/app/chat-transcript.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
-import { type ReceivedChatMessage } from '@livekit/components-react';
+import { type ReceivedMessage } from '@livekit/components-react';
 import { ChatEntry } from '@/components/livekit/chat-entry';
 
 const MotionContainer = motion.create('div');
@@ -50,7 +50,7 @@ const MESSAGE_MOTION_PROPS = {
 
 interface ChatTranscriptProps {
   hidden?: boolean;
-  messages?: ReceivedChatMessage[];
+  messages?: ReceivedMessage[];
 }
 
 export function ChatTranscript({
@@ -62,10 +62,9 @@ export function ChatTranscript({
     <AnimatePresence>
       {!hidden && (
         <MotionContainer {...CONTAINER_MOTION_PROPS} {...props}>
-          {messages.map(({ id, timestamp, from, message, editTimestamp }: ReceivedChatMessage) => {
+          {messages.map(({ id, timestamp, from, message }: ReceivedMessage) => {
             const locale = navigator?.language ?? 'en-US';
             const messageOrigin = from?.isLocal ? 'local' : 'remote';
-            const hasBeenEdited = !!editTimestamp;
 
             return (
               <MotionChatEntry
@@ -74,7 +73,6 @@ export function ChatTranscript({
                 timestamp={timestamp}
                 message={message}
                 messageOrigin={messageOrigin}
-                hasBeenEdited={hasBeenEdited}
                 {...MESSAGE_MOTION_PROPS}
               />
             );

components/app/preconnect-message.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AnimatePresence, motion } from 'motion/react';
-import { type ReceivedChatMessage } from '@livekit/components-react';
+import { type ReceivedMessage } from '@livekit/components-react';
 import { ShimmerText } from '@/components/livekit/shimmer-text';
 import { cn } from '@/lib/utils';
 
@@ -32,7 +32,7 @@ const VIEW_MOTION_PROPS = {
 };
 
 interface PreConnectMessageProps {
-  messages?: ReceivedChatMessage[];
+  messages?: ReceivedMessage[];
   className?: string;
 }
 

components/app/session-provider.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
+import { 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';
@@ -10,7 +11,7 @@ import {
   AgentControlBar,
   type ControlBarControls,
 } from '@/components/livekit/agent-control-bar/agent-control-bar';
-import { useChatMessages } from '@/hooks/useChatMessages';
+import { useAppSession } from '@/hooks/useAppSession';
 import { useConnectionTimeout } from '@/hooks/useConnectionTimout';
 import { useDebugMode } from '@/hooks/useDebug';
 import { cn } from '@/lib/utils';
@@ -58,6 +59,7 @@ export function Fade({ top = false, bottom = false, className }: FadeProps) {
     />
   );
 }
+
 interface SessionViewProps {
   appConfig: AppConfig;
 }
@@ -66,10 +68,11 @@ export const SessionView = ({
   appConfig,
   ...props
 }: React.ComponentProps<'section'> & SessionViewProps) => {
-  useConnectionTimeout(200_000);
+  useConnectionTimeout(20_000);
   useDebugMode({ enabled: IN_DEVELOPMENT });
 
-  const messages = useChatMessages();
+  const { session, isSessionActive, endSession } = useAppSession();
+  const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
@@ -90,6 +93,11 @@ export const SessionView = ({
     }
   }, [messages]);
 
+  const handleDisconnect = () => {
+    // pass false so we can manually end the session when the exit animation completes
+    endSession(false);
+  };
+
   return (
     <section className="bg-background relative z-10 h-full w-full overflow-hidden" {...props}>
       {/* Chat Transcript */}
@@ -100,7 +108,7 @@ export const SessionView = ({
         )}
       >
         <Fade top className="absolute inset-x-4 top-0 h-40" />
-        <ScrollArea ref={scrollAreaRef} className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[180px]">
+        <ScrollArea ref={scrollAreaRef} className="px-4 pt-40 pb-[150px] md:px-6 md:pb-[200px]">
           <ChatTranscript
             hidden={!chatOpen}
             messages={messages}
@@ -122,7 +130,12 @@ export const SessionView = ({
         )}
         <div className="bg-background relative mx-auto max-w-2xl pb-3 md:pb-12">
           <Fade bottom className="absolute inset-x-0 top-0 h-4 -translate-y-full" />
-          <AgentControlBar controls={controls} onChatOpenChange={setChatOpen} />
+          <AgentControlBar
+            controls={controls}
+            isSessionActive={isSessionActive}
+            onDisconnect={handleDisconnect}
+            onChatOpenChange={setChatOpen}
+          />
         </div>
       </MotionBottom>
     </section>

components/app/session-view.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { useRef } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { useRoomContext } from '@livekit/components-react';
-import { useSession } from '@/components/app/session-provider';
+import { useCallback } from 'react';
+import { AnimatePresence, type AnimationDefinition, motion } from 'motion/react';
+import { useSessionContext } from '@livekit/components-react';
+import { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
+import { useAppSession } from '@/hooks/useAppSession';
 
 const MotionWelcomeView = motion.create(WelcomeView);
 const MotionSessionView = motion.create(SessionView);
@@ -28,20 +29,23 @@ const VIEW_MOTION_PROPS = {
   },
 };
 
-export function ViewController() {
-  const room = useRoomContext();
-  const isSessionActiveRef = useRef(false);
-  const { appConfig, isSessionActive, startSession } = useSession();
+interface ViewControllerProps {
+  appConfig: AppConfig;
+}
 
-  // animation handler holds a reference to stale isSessionActive value
-  isSessionActiveRef.current = isSessionActive;
+export function ViewController({ appConfig }: ViewControllerProps) {
+  const session = useSessionContext();
+  const { isSessionActive, startSession } = useAppSession();
 
-  // disconnect room after animation completes
-  const handleAnimationComplete = () => {
-    if (!isSessionActiveRef.current && room.state !== 'disconnected') {
-      room.disconnect();
-    }
-  };
+  const handleAnimationComplete = useCallback(
+    (definition: AnimationDefinition) => {
+      // manually end the session when the exit animation completes
+      if (definition === 'hidden') {
+        session.end();
+      }
+    },
+    [session]
+  );
 
   return (
     <AnimatePresence mode="wait">
@@ -50,7 +54,7 @@ export function ViewController() {
         <MotionWelcomeView
           key="welcome"
           {...VIEW_MOTION_PROPS}
-          startButtonText={appConfig.startButtonText}
+          startButtonText={appConfig?.startButtonText ?? ''}
           onStartCall={startSession}
         />
       )}

components/app/view-controller.tsx

@@ -4,7 +4,6 @@ import { type HTMLAttributes, useCallback, useState } from 'react';
 import { Track } from 'livekit-client';
 import { useChat, useRemoteParticipants } from '@livekit/components-react';
 import { ChatTextIcon, PhoneDisconnectIcon } from '@phosphor-icons/react/dist/ssr';
-import { useSession } from '@/components/app/session-provider';
 import { TrackToggle } from '@/components/livekit/agent-control-bar/track-toggle';
 import { Button } from '@/components/livekit/button';
 import { Toggle } from '@/components/livekit/toggle';
@@ -23,8 +22,8 @@ export interface ControlBarControls {
 }
 
 export interface AgentControlBarProps extends UseInputControlsProps {
+  isSessionActive?: boolean;
   controls?: ControlBarControls;
-  onDisconnect?: () => void;
   onChatOpenChange?: (open: boolean) => void;
   onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
 }
@@ -36,6 +35,7 @@ export function AgentControlBar({
   controls,
   saveUserChoices = true,
   className,
+  isSessionActive = false,
   onDisconnect,
   onDeviceError,
   onChatOpenChange,
@@ -45,8 +45,6 @@ export function AgentControlBar({
   const participants = useRemoteParticipants();
   const [chatOpen, setChatOpen] = useState(false);
   const publishPermissions = usePublishPermissions();
-  const { isSessionActive, endSession } = useSession();
-
   const {
     micTrackRef,
     cameraToggle,
@@ -70,11 +68,6 @@ export function AgentControlBar({
     [onChatOpenChange, setChatOpen]
   );
 
-  const handleDisconnect = useCallback(async () => {
-    endSession();
-    onDisconnect?.();
-  }, [endSession, onDisconnect]);
-
   const visibleControls = {
     leave: controls?.leave ?? true,
     microphone: controls?.microphone ?? publishPermissions.microphone,
@@ -164,7 +157,7 @@ export function AgentControlBar({
         {visibleControls.leave && (
           <Button
             variant="destructive"
-            onClick={handleDisconnect}
+            onClick={onDisconnect}
             disabled={!isSessionActive}
             className="font-mono"
           >