diff --git a/app/ui/layout.tsx b/app/ui/layout.tsx
deleted file mode 100644
index c7202785..00000000
--- a/app/ui/layout.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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
deleted file mode 100644
index 83e1a7ba..00000000
--- a/app/ui/page.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-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/livekit/alert-toast.tsx b/components/alert-toast.tsx
similarity index 85%
rename from components/livekit/alert-toast.tsx
rename to components/alert-toast.tsx
index 0d09ccb8..f9f81f58 100644
--- a/components/livekit/alert-toast.tsx
+++ b/components/alert-toast.tsx
@@ -3,7 +3,7 @@
import { ReactNode } from 'react';
import { toast as sonnerToast } from 'sonner';
import { WarningIcon } from '@phosphor-icons/react/dist/ssr';
-import { Alert, AlertDescription, AlertTitle } from '@/components/livekit/alert';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
interface ToastProps {
id: string | number;
@@ -18,7 +18,7 @@ export function toastAlert(toast: Omit) {
);
}
-export function AlertToast(props: ToastProps) {
+function AlertToast(props: ToastProps) {
const { title, description, id } = props;
return (
diff --git a/components/app.tsx b/components/app.tsx
new file mode 100644
index 00000000..5da7c44b
--- /dev/null
+++ b/components/app.tsx
@@ -0,0 +1,114 @@
+'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
deleted file mode 100644
index b390e062..00000000
--- a/components/app/app.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'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
deleted file mode 100644
index b67d0a67..00000000
--- a/components/app/chat-transcript.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'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
deleted file mode 100644
index 719c3813..00000000
--- a/components/app/preconnect-message.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'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
deleted file mode 100644
index 1906f4ca..00000000
--- a/components/app/session-provider.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'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
deleted file mode 100644
index 10f6e857..00000000
--- a/components/app/session-view.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-'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/app/tile-layout.tsx b/components/app/tile-layout.tsx
deleted file mode 100644
index 33372276..00000000
--- a/components/app/tile-layout.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-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
-
-
-
-
-
-
-
- {/* Chat Input */}
- {visibleControls.chat && (
-
+ {capabilities.supportsChatInput && (
+
)}
-
-
- {/* Toggle Microphone */}
+
+
{visibleControls.microphone && (
-
+
+
+
+
+
+
+
+
+
)}
- {/* Toggle Camera */}
- {visibleControls.camera && (
-
+ {capabilities.supportsVideoInput && visibleControls.camera && (
+
+
+
+
+
)}
- {/* Toggle Screen Share */}
- {visibleControls.screenShare && (
-
+ {capabilities.supportsScreenShare && visibleControls.screenShare && (
+
+
+
)}
- {/* Toggle Transcript */}
-
-
-
+ {visibleControls.chat && (
+
+
+
+ )}
-
- {/* Disconnect */}
{visibleControls.leave && (