integrate TokenSource

Author: thomasyuill-livekit

app/api/connection-details/route.ts

@@ -1,7 +1,13 @@
 import { NextResponse } from 'next/server';
 import { AccessToken, type AccessTokenOptions, type VideoGrant } from 'livekit-server-sdk';
 import { RoomConfiguration } from '@livekit/protocol';
-import type { ConnectionDetails } from '@/hooks/useConnectionDetails';
+
+type ConnectionDetails = {
+  serverUrl: string;
+  roomName: string;
+  participantName: string;
+  participantToken: string;
+};
 
 // NOTE: you are expected to define the following environment variables in `.env.local`:
 const API_KEY = process.env.LIVEKIT_API_KEY;

app/ui/_room-provider.tsx

@@ -1,40 +1,17 @@
 'use client';
 
 import React from 'react';
-import { Room } from 'livekit-client';
 import { RoomContext } from '@livekit/components-react';
 import { AppConfig } from '@/app-config';
-import { toastAlert } from '@/components/livekit/alert-toast';
-import useConnectionDetails from '@/hooks/useConnectionDetails';
+import { useRoom } from '@/hooks/useRoom';
 
-export function RoomProvider({
-  appConfig,
-  children,
-}: {
+interface RoomProviderProps {
   appConfig: AppConfig;
   children: React.ReactNode;
-}) {
-  const { connectionDetails } = useConnectionDetails(appConfig);
-  const room = React.useMemo(() => new Room(), []);
+}
 
-  React.useEffect(() => {
-    if (room.state === 'disconnected' && connectionDetails) {
-      Promise.all([
-        room.localParticipant.setMicrophoneEnabled(true, undefined, {
-          preConnectBuffer: true,
-        }),
-        room.connect(connectionDetails.serverUrl, connectionDetails.participantToken),
-      ]).catch((error) => {
-        toastAlert({
-          title: 'There was an error connecting to the agent',
-          description: `${error.name}: ${error.message}`,
-        });
-      });
-    }
-    return () => {
-      room.disconnect();
-    };
-  }, [room, connectionDetails]);
+export function RoomProvider({ appConfig, children }: RoomProviderProps) {
+  const { room } = useRoom(appConfig);
 
   return <RoomContext.Provider value={room}>{children}</RoomContext.Provider>;
 }

app/ui/layout.tsx

@@ -6,24 +6,25 @@ import { RoomProvider } from './_room-provider';
 export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
   const hdrs = await headers();
   const appConfig = await getAppConfig(hdrs);
+
   return (
-    <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-prose text-balance">
-            A set of beautifully designed components that you can customize, extend, and build on.
-          </p>
-          <p className="text-muted-foreground max-w-prose text-balance">
-            Built with Shadcn conventions.
-          </p>
-          <p className="text-foreground max-w-prose text-balance">Open Source. Open Code.</p>
-        </header>
+    <RoomProvider 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-prose text-balance">
+              A set of beautifully designed components that you can customize, extend, and build on.
+            </p>
+            <p className="text-muted-foreground max-w-prose text-balance">
+              Built with Shadcn conventions.
+            </p>
+            <p className="text-foreground max-w-prose text-balance">Open Source. Open Code.</p>
+          </header>
 
-        <RoomProvider appConfig={appConfig}>
           <main className="space-y-20">{children}</main>
-        </RoomProvider>
+        </div>
       </div>
-    </div>
+    </RoomProvider>
   );
 }

components/app/app.tsx

@@ -34,29 +34,25 @@ interface AppProps {
 }
 
 export function App({ appConfig }: AppProps) {
-  const { room, sessionStarted, setSessionStarted } = useRoom(appConfig);
+  const { room, isSessionStarted, startSession } = useRoom(appConfig);
   const { startButtonText } = appConfig;
 
-  const handleStartCall = () => {
-    setSessionStarted(true);
-  };
-
   return (
     <RoomContext.Provider value={room}>
       <main className="grid h-svh grid-cols-1 place-content-center">
         <AnimatePresence mode="wait">
           {/* Welcome screen */}
-          {!sessionStarted && (
+          {!isSessionStarted && (
             <MotionWelcomeView
               key="welcome"
               {...VIEW_MOTION_PROPS}
               startButtonText={startButtonText}
-              onStartCall={handleStartCall}
+              onStartCall={startSession}
             />
           )}
 
           {/* Session view */}
-          {sessionStarted && (
+          {isSessionStarted && (
             <MotionSessionView key="session-view" {...VIEW_MOTION_PROPS} appConfig={appConfig} />
           )}
         </AnimatePresence>

hooks/useConnectionDetails.ts

@@ -1,19 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Room, RoomEvent } from 'livekit-client';
+import { Room, RoomEvent, TokenSource } from 'livekit-client';
 import { AppConfig } from '@/app-config';
 import { toastAlert } from '@/components/livekit/alert-toast';
-import useConnectionDetails from '@/hooks/useConnectionDetails';
 
 export function useRoom(appConfig: AppConfig) {
   const room = useMemo(() => new Room(), []);
-  const [sessionStarted, setSessionStarted] = useState(false);
-  const { refreshConnectionDetails, existingOrRefreshConnectionDetails } =
-    useConnectionDetails(appConfig);
+  const [isSessionStarted, setIsSessionStarted] = useState(false);
 
   useEffect(() => {
     function onDisconnected() {
-      setSessionStarted(false);
-      refreshConnectionDetails();
+      setIsSessionStarted(false);
     }
 
     function onMediaDevicesError(error: Error) {
@@ -30,20 +26,50 @@ export function useRoom(appConfig: AppConfig) {
       room.off(RoomEvent.Disconnected, onDisconnected);
       room.off(RoomEvent.MediaDevicesError, onMediaDevicesError);
     };
-  }, [room, refreshConnectionDetails]);
+  }, [room]);
 
   useEffect(() => {
     let aborted = false;
 
-    if (sessionStarted && room.state === 'disconnected') {
+    const tokenSource = TokenSource.custom(async () => {
+      const url = new URL(
+        process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details',
+        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!');
+      }
+    });
+
+    if (isSessionStarted && room.state === 'disconnected') {
       const { isPreConnectBufferEnabled } = appConfig;
       Promise.all([
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
           preConnectBuffer: isPreConnectBufferEnabled,
         }),
-        existingOrRefreshConnectionDetails().then((connectionDetails) =>
-          room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
-        ),
+        tokenSource
+          .fetch({ agentName: appConfig.agentName })
+          .then((connectionDetails) =>
+            room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
+          ),
       ]).catch((error) => {
         if (aborted) {
           // Once the effect has cleaned up after itself, drop any errors
@@ -65,7 +91,11 @@ export function useRoom(appConfig: AppConfig) {
       aborted = true;
       room.disconnect();
     };
-  }, [room, sessionStarted, appConfig, existingOrRefreshConnectionDetails]);
+  }, [room, isSessionStarted, appConfig]);
+
+  const startSession = () => {
+    setIsSessionStarted(true);
+  };
 
-  return { room, sessionStarted, setSessionStarted };
+  return { room, isSessionStarted, startSession };
 }

hooks/useRoom.ts

@@ -24,7 +24,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jose": "^6.0.12",
-    "livekit-client": "^2.15.5",
+    "livekit-client": "^2.15.8",
     "livekit-server-sdk": "^2.13.2",
     "mime": "^4.0.7",
     "motion": "^12.16.0",