feat: migrate to Agents SDK (useSession hook) (#298)

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 { ConnectionProvider } from '@/hooks/useConnection';
 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}>
+    <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">
             <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>
+    </ConnectionProvider>
   );
 }

components/app/app.tsx

@@ -2,23 +2,35 @@
 
 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 { 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;
 }
 
 export function App({ appConfig }: AppProps) {
   return (
-    <SessionProvider appConfig={appConfig}>
+    <ConnectionProvider appConfig={appConfig}>
+      <AppSetup />
       <main className="grid h-svh grid-cols-1 place-content-center">
-        <ViewController />
+        <ViewController appConfig={appConfig} />
       </main>
       <StartAudio label="Start Audio" />
       <RoomAudioRenderer />
       <Toaster />
-    </SessionProvider>
+    </ConnectionProvider>
   );
 }

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,12 @@ export function ChatTranscript({
     <AnimatePresence>
       {!hidden && (
         <MotionContainer {...CONTAINER_MOTION_PROPS} {...props}>
-          {messages.map(({ id, timestamp, from, message, editTimestamp }: ReceivedChatMessage) => {
+          {messages.map((receivedMessage) => {
+            const { id, timestamp, from, message } = receivedMessage;
             const locale = navigator?.language ?? 'en-US';
             const messageOrigin = from?.isLocal ? 'local' : 'remote';
-            const hasBeenEdited = !!editTimestamp;
+            const hasBeenEdited =
+              receivedMessage.type === 'chatMessage' && !!receivedMessage.editTimestamp;
 
             return (
               <MotionChatEntry

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 { 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';
@@ -10,15 +11,12 @@ import {
   AgentControlBar,
   type ControlBarControls,
 } from '@/components/livekit/agent-control-bar/agent-control-bar';
-import { useChatMessages } from '@/hooks/useChatMessages';
-import { useConnectionTimeout } from '@/hooks/useConnectionTimout';
-import { useDebugMode } from '@/hooks/useDebug';
+import { useConnection } from '@/hooks/useConnection';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../livekit/scroll-area/scroll-area';
 
 const MotionBottom = motion.create('div');
 
-const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 const BOTTOM_VIEW_MOTION_PROPS = {
   variants: {
     visible: {
@@ -58,6 +56,7 @@ export function Fade({ top = false, bottom = false, className }: FadeProps) {
     />
   );
 }
+
 interface SessionViewProps {
   appConfig: AppConfig;
 }
@@ -66,11 +65,10 @@ export const SessionView = ({
   appConfig,
   ...props
 }: React.ComponentProps<'section'> & SessionViewProps) => {
-  useConnectionTimeout(200_000);
-  useDebugMode({ enabled: IN_DEVELOPMENT });
-
-  const messages = useChatMessages();
+  const session = useSessionContext();
+  const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);
+  const { isConnectionActive, startDisconnectTransition } = useConnection();
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   const controls: ControlBarControls = {
@@ -100,7 +98,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 +120,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}
+            isConnectionActive={isConnectionActive}
+            onDisconnect={startDisconnectTransition}
+            onChatOpenChange={setChatOpen}
+          />
         </div>
       </MotionBottom>
     </section>

components/app/session-view.tsx

@@ -1,11 +1,11 @@
 '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 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);
@@ -28,34 +28,36 @@ 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 { isConnectionActive, connect, onDisconnectTransitionComplete } = useConnection();
 
-  // 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') {
+        onDisconnectTransitionComplete();
+      }
+    },
+    [onDisconnectTransitionComplete]
+  );
 
   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/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 {
+  isConnectionActive?: 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,
+  isConnectionActive = 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,8 +157,8 @@ export function AgentControlBar({
         {visibleControls.leave && (
           <Button
             variant="destructive"
-            onClick={handleDisconnect}
-            disabled={!isSessionActive}
+            onClick={onDisconnect}
+            disabled={!isConnectionActive}
             className="font-mono"
           >
             <PhoneDisconnectIcon weight="bold" />

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

@@ -22,7 +22,7 @@ export function AlertToast(props: ToastProps) {
   const { title, description, id } = props;
 
   return (
-    <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent">
+    <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent w-full md:w-[364px]">
       <WarningIcon weight="bold" />
       <AlertTitle>{title}</AlertTitle>
       {description && <AlertDescription>{description}</AlertDescription>}