diff --git a/app/ui/layout.tsx b/app/ui/layout.tsx
new file mode 100644
index 00000000..c7202785
--- /dev/null
+++ b/app/ui/layout.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { headers } from 'next/headers';
+import { SessionProvider } from '@/components/app/session-provider';
+import { getAppConfig } from '@/lib/utils';
+
+export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
+ const hdrs = await headers();
+ const appConfig = await getAppConfig(hdrs);
+
+ return (
+
+
+
+
+ LiveKit UI
+
+ A set of UI components for building LiveKit-powered voice experiences.
+
+
+ Built with{' '}
+
+ Shadcn
+
+ ,{' '}
+
+ Motion
+
+ , and{' '}
+
+ LiveKit
+
+ .
+
+ Open Source.
+
+
+
{children}
+
+
+ );
+}
diff --git a/app/ui/page.tsx b/app/ui/page.tsx
new file mode 100644
index 00000000..83e1a7ba
--- /dev/null
+++ b/app/ui/page.tsx
@@ -0,0 +1,268 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Track } from 'livekit-client';
+import { MicrophoneIcon } from '@phosphor-icons/react/dist/ssr';
+import { AgentControlBar } from '@/components/livekit/agent-control-bar/agent-control-bar';
+import { TrackDeviceSelect } from '@/components/livekit/agent-control-bar/track-device-select';
+import { TrackSelector } from '@/components/livekit/agent-control-bar/track-selector';
+import { TrackToggle } from '@/components/livekit/agent-control-bar/track-toggle';
+import { Alert, AlertDescription, AlertTitle, alertVariants } from '@/components/livekit/alert';
+import { AlertToast } from '@/components/livekit/alert-toast';
+import { Button, buttonVariants } from '@/components/livekit/button';
+import { ChatEntry } from '@/components/livekit/chat-entry';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/livekit/select';
+import { ShimmerText } from '@/components/livekit/shimmer-text';
+import { Toggle, toggleVariants } from '@/components/livekit/toggle';
+import { cn } from '@/lib/utils';
+
+type toggleVariantsType = VariantProps
['variant'];
+type toggleVariantsSizeType = VariantProps['size'];
+type buttonVariantsType = VariantProps['variant'];
+type buttonVariantsSizeType = VariantProps['size'];
+type alertVariantsType = VariantProps['variant'];
+
+interface ContainerProps {
+ componentName?: string;
+ children: React.ReactNode;
+ className?: string;
+}
+
+function Container({ componentName, children, className }: ContainerProps) {
+ return (
+
+
+ {componentName}
+
+
+ {children}
+
+
{children}
;
+}
+
+export default function Base() {
+ return (
+ <>
+ Primitives
+
+ {/* Button */}
+
+
+
+
+ |
+ Small |
+ Default |
+ Large |
+ Icon |
+
+
+
+ {['default', 'primary', 'secondary', 'outline', 'ghost', 'link', 'destructive'].map(
+ (variant) => (
+
+ | {variant} |
+ {['sm', 'default', 'lg', 'icon'].map((size) => (
+
+
+ |
+ ))}
+
+ )
+ )}
+
+
+
+
+ {/* Toggle */}
+
+
+
+
+ |
+ Small |
+ Default |
+ Large |
+ Icon |
+
+
+
+ {['default', 'primary', 'secondary', 'outline'].map((variant) => (
+
+ | {variant} |
+ {['sm', 'default', 'lg', 'icon'].map((size) => (
+
+
+ {size === 'icon' ? : 'Toggle'}
+
+ |
+ ))}
+
+ ))}
+
+
+
+
+ {/* Alert */}
+
+ {['default', 'destructive'].map((variant) => (
+
+
{variant}
+
+ Alert {variant} title
+ This is a {variant} alert description.
+
+
+
+ Size default
+
+
+
+ Size sm
+
+
+
Components
+
+ {/* Agent control bar */}
+
+
+
+
+ {/* Track device select */}
+
+
+
+ Size default
+
+
+
+ Size sm
+
+
+
+
+ Track.Source.Microphone
+
+
+
+ Track.Source.Camera
+
+
+
+
+ Track.Source.Camera
+
+
+
+ Track.Source.Microphone
+
+
+
+
+
+
+
+
+ {/* Shimmer text */}
+
+
+ This is shimmer text
+
+
+
+ {/* Alert toast */}
+
+ Alert toast
+
+
+
+ );
+}
diff --git a/components/app.tsx b/components/app.tsx
deleted file mode 100644
index 5da7c44b..00000000
--- a/components/app.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-import { Room, RoomEvent } from 'livekit-client';
-import { motion } from 'motion/react';
-import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-react';
-import { toastAlert } from '@/components/alert-toast';
-import { SessionView } from '@/components/session-view';
-import { Toaster } from '@/components/ui/sonner';
-import { Welcome } from '@/components/welcome';
-import useConnectionDetails from '@/hooks/useConnectionDetails';
-import type { AppConfig } from '@/lib/types';
-
-const MotionWelcome = motion.create(Welcome);
-const MotionSessionView = motion.create(SessionView);
-
-interface AppProps {
- appConfig: AppConfig;
-}
-
-export function App({ appConfig }: AppProps) {
- const room = useMemo(() => new Room(), []);
- const [sessionStarted, setSessionStarted] = useState(false);
- const { refreshConnectionDetails, existingOrRefreshConnectionDetails } =
- useConnectionDetails(appConfig);
-
- useEffect(() => {
- const onDisconnected = () => {
- setSessionStarted(false);
- refreshConnectionDetails();
- };
- const onMediaDevicesError = (error: Error) => {
- toastAlert({
- title: 'Encountered an error with your media devices',
- description: `${error.name}: ${error.message}`,
- });
- };
- room.on(RoomEvent.MediaDevicesError, onMediaDevicesError);
- room.on(RoomEvent.Disconnected, onDisconnected);
- return () => {
- room.off(RoomEvent.Disconnected, onDisconnected);
- room.off(RoomEvent.MediaDevicesError, onMediaDevicesError);
- };
- }, [room, refreshConnectionDetails]);
-
- useEffect(() => {
- let aborted = false;
- if (sessionStarted && room.state === 'disconnected') {
- Promise.all([
- room.localParticipant.setMicrophoneEnabled(true, undefined, {
- preConnectBuffer: appConfig.isPreConnectBufferEnabled,
- }),
- existingOrRefreshConnectionDetails().then((connectionDetails) =>
- room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
- ),
- ]).catch((error) => {
- if (aborted) {
- // Once the effect has cleaned up after itself, drop any errors
- //
- // These errors are likely caused by this effect rerunning rapidly,
- // resulting in a previous run `disconnect` running in parallel with
- // a current run `connect`
- return;
- }
-
- toastAlert({
- title: 'There was an error connecting to the agent',
- description: `${error.name}: ${error.message}`,
- });
- });
- }
- return () => {
- aborted = true;
- room.disconnect();
- };
- }, [room, sessionStarted, appConfig.isPreConnectBufferEnabled]);
-
- const { startButtonText } = appConfig;
-
- return (
-
- setSessionStarted(true)}
- disabled={sessionStarted}
- initial={{ opacity: 1 }}
- animate={{ opacity: sessionStarted ? 0 : 1 }}
- transition={{ duration: 0.5, ease: 'linear', delay: sessionStarted ? 0 : 0.5 }}
- />
-
-
-
-
- {/* --- */}
-
-
-
-
-
- );
-}
diff --git a/components/app/app.tsx b/components/app/app.tsx
new file mode 100644
index 00000000..b390e062
--- /dev/null
+++ b/components/app/app.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+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';
+
+interface AppProps {
+ appConfig: AppConfig;
+}
+
+export function App({ appConfig }: AppProps) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/app/chat-transcript.tsx b/components/app/chat-transcript.tsx
new file mode 100644
index 00000000..b67d0a67
--- /dev/null
+++ b/components/app/chat-transcript.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { AnimatePresence, type HTMLMotionProps, motion } from 'motion/react';
+import { type ReceivedChatMessage } from '@livekit/components-react';
+import { ChatEntry } from '@/components/livekit/chat-entry';
+
+const MotionContainer = motion.create('div');
+const MotionChatEntry = motion.create(ChatEntry);
+
+const CONTAINER_MOTION_PROPS = {
+ variants: {
+ hidden: {
+ opacity: 0,
+ transition: {
+ ease: 'easeOut',
+ duration: 0.3,
+ staggerChildren: 0.1,
+ staggerDirection: -1,
+ },
+ },
+ visible: {
+ opacity: 1,
+ transition: {
+ delay: 0.2,
+ ease: 'easeOut',
+ duration: 0.3,
+ stagerDelay: 0.2,
+ staggerChildren: 0.1,
+ staggerDirection: 1,
+ },
+ },
+ },
+ initial: 'hidden',
+ animate: 'visible',
+ exit: 'hidden',
+};
+
+const MESSAGE_MOTION_PROPS = {
+ variants: {
+ hidden: {
+ opacity: 0,
+ translateY: 10,
+ },
+ visible: {
+ opacity: 1,
+ translateY: 0,
+ },
+ },
+};
+
+interface ChatTranscriptProps {
+ hidden?: boolean;
+ messages?: ReceivedChatMessage[];
+}
+
+export function ChatTranscript({
+ hidden = false,
+ messages = [],
+ ...props
+}: ChatTranscriptProps & Omit, 'ref'>) {
+ return (
+
+ {!hidden && (
+
+ {messages.map(({ id, timestamp, from, message, editTimestamp }: ReceivedChatMessage) => {
+ const locale = navigator?.language ?? 'en-US';
+ const messageOrigin = from?.isLocal ? 'local' : 'remote';
+ const hasBeenEdited = !!editTimestamp;
+
+ return (
+
+ );
+ })}
+
+ )}
+
+ );
+}
diff --git a/components/app/preconnect-message.tsx b/components/app/preconnect-message.tsx
new file mode 100644
index 00000000..719c3813
--- /dev/null
+++ b/components/app/preconnect-message.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { AnimatePresence, motion } from 'motion/react';
+import { type ReceivedChatMessage } from '@livekit/components-react';
+import { ShimmerText } from '@/components/livekit/shimmer-text';
+import { cn } from '@/lib/utils';
+
+const MotionMessage = motion.create('p');
+
+const VIEW_MOTION_PROPS = {
+ variants: {
+ visible: {
+ opacity: 1,
+ transition: {
+ ease: 'easeIn',
+ duration: 0.5,
+ delay: 0.8,
+ },
+ },
+ hidden: {
+ opacity: 0,
+ transition: {
+ ease: 'easeIn',
+ duration: 0.5,
+ delay: 0,
+ },
+ },
+ },
+ initial: 'hidden',
+ animate: 'visible',
+ exit: 'hidden',
+};
+
+interface PreConnectMessageProps {
+ messages?: ReceivedChatMessage[];
+ className?: string;
+}
+
+export function PreConnectMessage({ className, messages = [] }: PreConnectMessageProps) {
+ return (
+
+ {messages.length === 0 && (
+ 0}
+ className={cn('pointer-events-none text-center', className)}
+ >
+
+ Agent is listening, ask it a question
+
+
+ )}
+
+ );
+}
diff --git a/components/app/session-provider.tsx b/components/app/session-provider.tsx
new file mode 100644
index 00000000..1906f4ca
--- /dev/null
+++ b/components/app/session-provider.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { createContext, useContext, useMemo } from 'react';
+import { RoomContext } from '@livekit/components-react';
+import { APP_CONFIG_DEFAULTS, type AppConfig } from '@/app-config';
+import { useRoom } from '@/hooks/useRoom';
+
+const SessionContext = createContext<{
+ appConfig: AppConfig;
+ isSessionActive: boolean;
+ startSession: () => void;
+ endSession: () => void;
+}>({
+ appConfig: APP_CONFIG_DEFAULTS,
+ isSessionActive: false,
+ startSession: () => {},
+ endSession: () => {},
+});
+
+interface SessionProviderProps {
+ appConfig: AppConfig;
+ children: React.ReactNode;
+}
+
+export const SessionProvider = ({ appConfig, children }: SessionProviderProps) => {
+ const { room, isSessionActive, startSession, endSession } = useRoom(appConfig);
+ const contextValue = useMemo(
+ () => ({ appConfig, isSessionActive, startSession, endSession }),
+ [appConfig, isSessionActive, startSession, endSession]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+export function useSession() {
+ return useContext(SessionContext);
+}
diff --git a/components/app/session-view.tsx b/components/app/session-view.tsx
new file mode 100644
index 00000000..10f6e857
--- /dev/null
+++ b/components/app/session-view.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import type { AppConfig } from '@/app-config';
+import { ChatTranscript } from '@/components/app/chat-transcript';
+import { PreConnectMessage } from '@/components/app/preconnect-message';
+import { TileLayout } from '@/components/app/tile-layout';
+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 { 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: {
+ opacity: 1,
+ translateY: '0%',
+ },
+ hidden: {
+ opacity: 0,
+ translateY: '100%',
+ },
+ },
+ initial: 'hidden',
+ animate: 'visible',
+ exit: 'hidden',
+ transition: {
+ duration: 0.3,
+ delay: 0.5,
+ ease: 'easeOut',
+ },
+};
+
+interface FadeProps {
+ top?: boolean;
+ bottom?: boolean;
+ className?: string;
+}
+
+export function Fade({ top = false, bottom = false, className }: FadeProps) {
+ return (
+
+ );
+}
+interface SessionViewProps {
+ appConfig: AppConfig;
+}
+
+export const SessionView = ({
+ appConfig,
+ ...props
+}: React.ComponentProps<'section'> & SessionViewProps) => {
+ useConnectionTimeout(200_000);
+ useDebugMode({ enabled: IN_DEVELOPMENT });
+
+ const messages = useChatMessages();
+ const [chatOpen, setChatOpen] = useState(false);
+
+ const controls: ControlBarControls = {
+ leave: true,
+ microphone: true,
+ chat: appConfig.supportsChatInput,
+ camera: appConfig.supportsVideoInput,
+ screenShare: appConfig.supportsVideoInput,
+ };
+
+ return (
+
+ {/* Chat Transcript */}
+
+
+
+
+
+
+
+ {/* Tile Layout */}
+
+
+ {/* Bottom */}
+
+ {appConfig.isPreConnectBufferEnabled && (
+
+ )}
+
+
+
+ );
+};
diff --git a/components/theme-toggle.tsx b/components/app/theme-toggle.tsx
similarity index 98%
rename from components/theme-toggle.tsx
rename to components/app/theme-toggle.tsx
index 33bd83ff..ffefc0da 100644
--- a/components/theme-toggle.tsx
+++ b/components/app/theme-toggle.tsx
@@ -2,7 +2,6 @@
import { useEffect, useState } from 'react';
import { MonitorIcon, MoonIcon, SunIcon } from '@phosphor-icons/react';
-import type { ThemeMode } from '@/lib/types';
import { THEME_MEDIA_QUERY, THEME_STORAGE_KEY, cn } from '@/lib/utils';
const THEME_SCRIPT = `
@@ -23,6 +22,8 @@ const THEME_SCRIPT = `
.replace(/\n/g, '')
.replace(/\s+/g, ' ');
+export type ThemeMode = 'dark' | 'light' | 'system';
+
function applyTheme(theme: ThemeMode) {
const doc = document.documentElement;
diff --git a/components/app/tile-layout.tsx b/components/app/tile-layout.tsx
new file mode 100644
index 00000000..33372276
--- /dev/null
+++ b/components/app/tile-layout.tsx
@@ -0,0 +1,238 @@
+import React, { useMemo } from 'react';
+import { Track } from 'livekit-client';
+import { AnimatePresence, motion } from 'motion/react';
+import {
+ BarVisualizer,
+ type TrackReference,
+ VideoTrack,
+ useLocalParticipant,
+ useTracks,
+ useVoiceAssistant,
+} from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+
+const MotionContainer = motion.create('div');
+
+const ANIMATION_TRANSITION = {
+ type: 'spring',
+ stiffness: 675,
+ damping: 75,
+ mass: 1,
+};
+
+const classNames = {
+ // GRID
+ // 2 Columns x 3 Rows
+ grid: [
+ 'h-full w-full',
+ 'grid gap-x-2 place-content-center',
+ 'grid-cols-[1fr_1fr] grid-rows-[90px_1fr_90px]',
+ ],
+ // Agent
+ // chatOpen: true,
+ // hasSecondTile: true
+ // layout: Column 1 / Row 1
+ // align: x-end y-center
+ agentChatOpenWithSecondTile: ['col-start-1 row-start-1', 'self-center justify-self-end'],
+ // Agent
+ // chatOpen: true,
+ // hasSecondTile: false
+ // layout: Column 1 / Row 1 / Column-Span 2
+ // align: x-center y-center
+ agentChatOpenWithoutSecondTile: ['col-start-1 row-start-1', 'col-span-2', 'place-content-center'],
+ // Agent
+ // chatOpen: false
+ // layout: Column 1 / Row 1 / Column-Span 2 / Row-Span 3
+ // align: x-center y-center
+ agentChatClosed: ['col-start-1 row-start-1', 'col-span-2 row-span-3', 'place-content-center'],
+ // Second tile
+ // chatOpen: true,
+ // hasSecondTile: true
+ // layout: Column 2 / Row 1
+ // align: x-start y-center
+ secondTileChatOpen: ['col-start-2 row-start-1', 'self-center justify-self-start'],
+ // Second tile
+ // chatOpen: false,
+ // hasSecondTile: false
+ // layout: Column 2 / Row 2
+ // align: x-end y-end
+ secondTileChatClosed: ['col-start-2 row-start-3', 'place-content-end'],
+};
+
+export function useLocalTrackRef(source: Track.Source) {
+ const { localParticipant } = useLocalParticipant();
+ const publication = localParticipant.getTrackPublication(source);
+ const trackRef = useMemo(
+ () => (publication ? { source, participant: localParticipant, publication } : undefined),
+ [source, publication, localParticipant]
+ );
+ return trackRef;
+}
+
+interface TileLayoutProps {
+ chatOpen: boolean;
+}
+
+export function TileLayout({ chatOpen }: TileLayoutProps) {
+ const {
+ state: agentState,
+ audioTrack: agentAudioTrack,
+ videoTrack: agentVideoTrack,
+ } = useVoiceAssistant();
+ const [screenShareTrack] = useTracks([Track.Source.ScreenShare]);
+ const cameraTrack: TrackReference | undefined = useLocalTrackRef(Track.Source.Camera);
+
+ const isCameraEnabled = cameraTrack && !cameraTrack.publication.isMuted;
+ const isScreenShareEnabled = screenShareTrack && !screenShareTrack.publication.isMuted;
+ const hasSecondTile = isCameraEnabled || isScreenShareEnabled;
+
+ const animationDelay = chatOpen ? 0 : 0.15;
+ const isAvatar = agentVideoTrack !== undefined;
+ const videoWidth = agentVideoTrack?.publication.dimensions?.width ?? 0;
+ const videoHeight = agentVideoTrack?.publication.dimensions?.height ?? 0;
+
+ return (
+
+
+
+ {/* Agent */}
+
+
+ {!isAvatar && (
+ // Audio Agent
+
+
+
+
+
+ )}
+
+ {isAvatar && (
+ // Avatar Agent
+
+
+
+ )}
+
+
+
+
+ {/* Camera & Screen Share */}
+
+ {((cameraTrack && isCameraEnabled) || (screenShareTrack && isScreenShareEnabled)) && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ Chat live with your voice AI agent
+
+
+
+
+
+
+
- {capabilities.supportsChatInput && (
-
+ {/* Chat Input */}
+ {visibleControls.chat && (
+
)}
-
-
+
+
+ {/* Toggle Microphone */}
{visibleControls.microphone && (
-
-
-
-
-
-
-
-
-
- )}
-
- {capabilities.supportsVideoInput && visibleControls.camera && (
-
-
-
-
-
+
)}
- {capabilities.supportsScreenShare && visibleControls.screenShare && (
-
-
-
+ {/* Toggle Camera */}
+ {visibleControls.camera && (
+
)}
- {visibleControls.chat && (
-
-
-
+ aria-label="Toggle screen share"
+ source={Track.Source.ScreenShare}
+ pressed={screenShareToggle.enabled}
+ disabled={screenShareToggle.pending}
+ onPressedChange={screenShareToggle.toggle}
+ />
)}
+
+ {/* Toggle Transcript */}
+
+
+
+
+ {/* Disconnect */}
{visibleControls.leave && (