chore: tidyup V2

README.md

@@ -77,23 +77,34 @@ This starter is designed to be flexible so you can adapt it to your specific age
 #### Example: App configuration (`app-config.ts`)
 
 ```ts
-export const APP_CONFIG_DEFAULTS = {
+export const APP_CONFIG_DEFAULTS: AppConfig = {
   companyName: 'LiveKit',
   pageTitle: 'LiveKit Voice Agent',
   pageDescription: 'A voice agent built with LiveKit',
+
   supportsChatInput: true,
   supportsVideoInput: true,
   supportsScreenShare: true,
+  isPreConnectBufferEnabled: true,
+
   logo: '/lk-logo.svg',
   accent: '#002cf2',
   logoDark: '/lk-logo-dark.svg',
   accentDark: '#1fd5f9',
   startButtonText: 'Start call',
+
+  // for LiveKit Cloud Sandbox
+  sandboxId: undefined,
+  agentName: undefined,
 };
 ```
 
 You can update these values in [`app-config.ts`](./app-config.ts) to customize branding, features, and UI text for your deployment.
 
+> [!NOTE]
+> The `sandboxId` and `agentName` are for the LiveKit Cloud Sandbox environment.
+> They are not used for local development.
+
 #### Environment Variables
 
 You'll also need to configure your LiveKit credentials in `.env.local` (copy `.env.example` if you don't have one):

app-config.ts

@@ -1,4 +1,23 @@
-import type { AppConfig } from './lib/types';
+export interface AppConfig {
+  pageTitle: string;
+  pageDescription: string;
+  companyName: string;
+
+  supportsChatInput: boolean;
+  supportsVideoInput: boolean;
+  supportsScreenShare: boolean;
+  isPreConnectBufferEnabled: boolean;
+
+  logo: string;
+  startButtonText: string;
+  accent?: string;
+  logoDark?: string;
+  accentDark?: string;
+
+  // for LiveKit Cloud Sandbox
+  sandboxId?: string;
+  agentName?: string;
+}
 
 export const APP_CONFIG_DEFAULTS: AppConfig = {
   companyName: 'LiveKit',
@@ -16,5 +35,7 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   accentDark: '#1fd5f9',
   startButtonText: 'Start call',
 
+  // for LiveKit Cloud Sandbox
+  sandboxId: undefined,
   agentName: undefined,
 };

app/(app)/layout.tsx

@@ -1,11 +1,11 @@
 import { headers } from 'next/headers';
 import { getAppConfig } from '@/lib/utils';
 
-interface AppLayoutProps {
+interface LayoutProps {
   children: React.ReactNode;
 }
 
-export default async function AppLayout({ children }: AppLayoutProps) {
+export default async function Layout({ children }: LayoutProps) {
   const hdrs = await headers();
   const { companyName, logo, logoDark } = await getAppConfig(hdrs);
 
@@ -39,6 +39,7 @@ export default async function AppLayout({ children }: AppLayoutProps) {
           </a>
         </span>
       </header>
+
       {children}
     </>
   );

app/(app)/opengraph-image.tsx

@@ -165,7 +165,7 @@ export default async function Image() {
             gap: 10,
           }}
         >
-          {/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}
+          {/* eslint-disable-next-line jsx-a11y/alt-text */}
           <img src={wordmarkSrcBase64} width={wordmarkSize.width} height={wordmarkSize.height} />
         </div>
         {/* logo */}
@@ -179,7 +179,7 @@ export default async function Image() {
             gap: 10,
           }}
         >
-          {/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text */}
+          {/* eslint-disable-next-line jsx-a11y/alt-text */}
           <img src={logoSrcBase64} width={logoSize.width} height={logoSize.height} />
         </div>
         {/* title */}

app/(app)/page.tsx

@@ -1,5 +1,5 @@
 import { headers } from 'next/headers';
-import { App } from '@/components/app';
+import { App } from '@/components/app/app';
 import { getAppConfig } from '@/lib/utils';
 
 export default async function Page() {

app/api/connection-details/route.ts

@@ -2,6 +2,13 @@ import { NextResponse } from 'next/server';
 import { AccessToken, type AccessTokenOptions, type VideoGrant } from 'livekit-server-sdk';
 import { RoomConfiguration } from '@livekit/protocol';
 
+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;
 const API_SECRET = process.env.LIVEKIT_API_SECRET;
@@ -10,13 +17,6 @@ const LIVEKIT_URL = process.env.LIVEKIT_URL;
 // don't cache the results
 export const revalidate = 0;
 
-export type ConnectionDetails = {
-  serverUrl: string;
-  roomName: string;
-  participantName: string;
-  participantToken: string;
-};
-
 export async function POST(req: Request) {
   try {
     if (LIVEKIT_URL === undefined) {