--wip-- [skip ci]

Author: thomasyuill-livekit

app-config.ts

@@ -15,6 +15,4 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   logoDark: '/lk-logo-dark.svg',
   accentDark: '#1fd5f9',
   startButtonText: 'Start call',
-
-  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/api/connection-details/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server';
 import { AccessToken, type AccessTokenOptions, type VideoGrant } from 'livekit-server-sdk';
 import { RoomConfiguration } from '@livekit/protocol';
+import type { ConnectionDetails } from '@/lib/types';
 
 // NOTE: you are expected to define the following environment variables in `.env.local`:
 const API_KEY = process.env.LIVEKIT_API_KEY;
@@ -10,13 +11,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) {

app/components/Tabs.tsx

@@ -1,40 +1,40 @@
 import { Public_Sans } from 'next/font/google';
 import localFont from 'next/font/local';
 import { headers } from 'next/headers';
-import { APP_CONFIG_DEFAULTS } from '@/app-config';
-import { ApplyThemeScript, ThemeToggle } from '@/components/theme-toggle';
-import { getAppConfig } from '@/lib/utils';
-import './globals.css';
+import { ApplyThemeScript, ThemeToggle } from '@/components/livekit/theme-toggle';
+import { cn, getAppConfig, getStyles } from '@/lib/utils';
+import '@/styles/globals.css';
 
 const publicSans = Public_Sans({
   variable: '--font-public-sans',
   subsets: ['latin'],
 });
 
 const commitMono = localFont({
+  display: 'swap',
+  variable: '--font-commit-mono',
   src: [
     {
-      path: './fonts/CommitMono-400-Regular.otf',
+      path: '../fonts/CommitMono-400-Regular.otf',
       weight: '400',
       style: 'normal',
     },
     {
-      path: './fonts/CommitMono-700-Regular.otf',
+      path: '../fonts/CommitMono-700-Regular.otf',
       weight: '700',
       style: 'normal',
     },
     {
-      path: './fonts/CommitMono-400-Italic.otf',
+      path: '../fonts/CommitMono-400-Italic.otf',
       weight: '400',
       style: 'italic',
     },
     {
-      path: './fonts/CommitMono-700-Italic.otf',
+      path: '../fonts/CommitMono-700-Italic.otf',
       weight: '700',
       style: 'italic',
     },
   ],
-  variable: '--font-commit-mono',
 });
 
 interface RootLayoutProps {
@@ -43,32 +43,27 @@ interface RootLayoutProps {
 
 export default async function RootLayout({ children }: RootLayoutProps) {
   const hdrs = await headers();
-  const { accent, accentDark, pageTitle, pageDescription } = await getAppConfig(hdrs);
-
-  // check provided accent colors against defaults, and apply styles if they differ (or in development mode)
-  // generate a hover color for the accent color by mixing it with 20% black
-  const styles = [
-    process.env.NODE_ENV === 'development' || accent !== APP_CONFIG_DEFAULTS.accent
-      ? `:root { --primary: ${accent}; --primary-hover: color-mix(in srgb, ${accent} 80%, #000); }`
-      : '',
-    process.env.NODE_ENV === 'development' || accentDark !== APP_CONFIG_DEFAULTS.accentDark
-      ? `.dark { --primary: ${accentDark}; --primary-hover: color-mix(in srgb, ${accentDark} 80%, #000); }`
-      : '',
-  ]
-    .filter(Boolean)
-    .join('\n');
+  const appConfig = await getAppConfig(hdrs);
+  const { pageTitle, pageDescription } = appConfig;
+  const styles = getStyles(appConfig);
 
   return (
-    <html lang="en" suppressHydrationWarning className="scroll-smooth">
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={cn(
+        publicSans.variable,
+        commitMono.variable,
+        'scroll-smooth font-sans antialiased'
+      )}
+    >
       <head>
         {styles && <style>{styles}</style>}
         <title>{pageTitle}</title>
         <meta name="description" content={pageDescription} />
         <ApplyThemeScript />
       </head>
-      <body
-        className={`${publicSans.variable} ${commitMono.variable} overflow-x-hidden antialiased`}
-      >
+      <body className="overflow-x-hidden">
         {children}
         <div className="group fixed bottom-0 left-1/2 z-50 mb-2 -translate-x-1/2">
           <ThemeToggle className="translate-y-20 transition-transform delay-150 duration-300 group-hover:translate-y-0" />

app/layout.tsx

@@ -9,10 +9,18 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Toggle } from '@/components/ui/toggle';
-import { Container } from '../Container';
+import { Container } from '../container';
 
-const buttonVariants = ['default', 'secondary', 'outline', 'ghost', 'link', 'destructive'] as const;
-const toggleVariants = ['default', 'outline'] as const;
+const buttonVariants = [
+  'default',
+  'primary',
+  'secondary',
+  'outline',
+  'ghost',
+  'link',
+  'destructive',
+] as const;
+const toggleVariants = ['default', 'primary', 'secondary', 'outline'] as const;
 const alertVariants = ['default', 'destructive'] as const;
 
 export default function Base() {

app/components/base/page.tsx app/ui/base/page.tsxapp/components/base/page.tsx renamed to app/ui/base/page.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { headers } from 'next/headers';
-import { Tabs } from '@/app/components/Tabs';
-import { Provider } from '@/components/provider';
-import { cn, getAppConfig } from '@/lib/utils';
+import { getAppConfig } from '@/lib/utils';
+import { RoomProvider } from './room-provider';
+import { Tabs } from './tabs';
 
 export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
   const hdrs = await headers();
@@ -16,9 +16,9 @@ export default async function ComponentsLayout({ children }: { children: React.R
         </p>
       </header>
       <Tabs />
-      <Provider appConfig={appConfig}>
+      <RoomProvider appConfig={appConfig}>
         <main className="flex w-full flex-1 flex-col items-stretch gap-8">{children}</main>
-      </Provider>
+      </RoomProvider>
     </div>
   );
 }

app/components/Container.tsx app/ui/container.tsxapp/components/Container.tsx renamed to app/ui/container.tsx

@@ -1,8 +1,9 @@
 import { Track } from 'livekit-client';
 import { AgentControlBar } from '@/components/livekit/agent-control-bar/agent-control-bar';
-import { DeviceSelect } from '@/components/livekit/device-select';
+import { TrackDeviceSelect } from '@/components/livekit/track-device-select';
 import { TrackToggle } from '@/components/livekit/track-toggle';
-import { Container } from '../Container';
+import { AppConfig } from '@/lib/types';
+import { Container } from '../container';
 
 export default function LiveKit() {
   return (
@@ -15,11 +16,11 @@ export default function LiveKit() {
         <div className="grid grid-cols-2 gap-4">
           <div>
             <h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">Size default</h4>
-            <DeviceSelect kind="audioinput" />
+            <TrackDeviceSelect kind="audioinput" />
           </div>
           <div>
             <h4 className="text-muted-foreground mb-2 font-mono text-xs uppercase">Size sm</h4>
-            <DeviceSelect size="sm" kind="audioinput" />
+            <TrackDeviceSelect size="sm" kind="audioinput" />
           </div>
         </div>
       </Container>
@@ -53,10 +54,12 @@ export default function LiveKit() {
         <div className="relative flex items-center justify-center">
           <AgentControlBar
             className="w-full"
-            capabilities={{
-              supportsChatInput: true,
-              supportsVideoInput: true,
-              supportsScreenShare: true,
+            controls={{
+              leave: true,
+              chat: true,
+              camera: true,
+              microphone: true,
+              screenShare: true,
             }}
           />
         </div>

app/components/layout.tsx app/ui/layout.tsxapp/components/layout.tsx renamed to app/ui/layout.tsx

@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation';
 
 export default function Components() {
-  return redirect('/components/base');
+  return redirect('/ui/base');
 }