extract TokenSource.custom logic into getSandboxTokenSource util

Author: thomasyuill-livekit

components/app/app.tsx

@@ -13,6 +13,7 @@ import { ViewController } from '@/components/app/view-controller';
 import { Toaster } from '@/components/livekit/toaster';
 import { useAgentErrors } from '@/hooks/useAgentErrors';
 import { useDebugMode } from '@/hooks/useDebug';
+import { getSandboxTokenSource } from '@/lib/utils';
 
 const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 
@@ -29,34 +30,9 @@ interface AppProps {
 
 export function App({ appConfig }: AppProps) {
   const tokenSource = useMemo(() => {
-    if (typeof process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT === 'string') {
-      return TokenSource.custom(async () => {
-        const url = new URL(process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT!, 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!');
-        }
-      });
-    }
-
-    return TokenSource.endpoint('/api/connection-details');
+    return typeof process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT === 'string'
+      ? getSandboxTokenSource(appConfig)
+      : TokenSource.endpoint('/api/connection-details');
   }, [appConfig]);
 
   const session = useSession(

lib/utils.ts

@@ -1,5 +1,6 @@
 import { cache } from 'react';
 import { type ClassValue, clsx } from 'clsx';
+import { TokenSource } from 'livekit-client';
 import { twMerge } from 'tailwind-merge';
 import { APP_CONFIG_DEFAULTS } from '@/app-config';
 import type { AppConfig } from '@/app-config';
@@ -86,3 +87,37 @@ export function getStyles(appConfig: AppConfig) {
     .filter(Boolean)
     .join('\n');
 }
+
+/**
+ * Get a token source for a sandboxed LiveKit session
+ * @param appConfig - The app configuration
+ * @returns A token source for a sandboxed LiveKit session
+ */
+export function getSandboxTokenSource(appConfig: AppConfig) {
+  return TokenSource.custom(async () => {
+    const url = new URL(process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT!, window.location.origin);
+    const sandboxId = appConfig.sandboxId ?? '';
+    const roomConfig = appConfig.agentName
+      ? {
+          agents: [{ agent_name: appConfig.agentName }],
+        }
+      : undefined;
+
+    try {
+      const res = await fetch(url.toString(), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Sandbox-Id': sandboxId,
+        },
+        body: JSON.stringify({
+          room_config: roomConfig,
+        }),
+      });
+      return await res.json();
+    } catch (error) {
+      console.error('Error fetching connection details:', error);
+      throw new Error('Error fetching connection details!');
+    }
+  });
+}