import Head from "next/head"; import { useCallback, useEffect, useMemo, useState } from "react"; import { Inter } from "next/font/google"; import { generateRandomAlphanumeric } from "@/lib/util"; import { motion, AnimatePresence } from "framer-motion"; import { LiveKitRoom, RoomAudioRenderer, useToken, } from "@livekit/components-react"; import Playground, { PlaygroundOutputs, } from "@/components/playground/Playground"; import { useAppConfig } from "@/hooks/useAppConfig"; import { PlaygroundConnect } from "@/components/PlaygroundConnect"; import { PlaygroundToast, ToastType } from "@/components/toast/PlaygroundToast"; const themeColors = [ "cyan", "green", "amber", "blue", "violet", "rose", "pink", "teal", ]; const inter = Inter({ subsets: ["latin"] }); export default function Home() { const [toastMessage, setToastMessage] = useState<{ message: string; type: ToastType; } | null>(null); const [shouldConnect, setShouldConnect] = useState(false); const [liveKitUrl, setLiveKitUrl] = useState( process.env.NEXT_PUBLIC_LIVEKIT_URL ); const [customToken, setCustomToken] = useState(); const [roomName, setRoomName] = useState( [generateRandomAlphanumeric(4), generateRandomAlphanumeric(4)].join("-") ); const tokenOptions = useMemo(() => { return { userInfo: { identity: generateRandomAlphanumeric(16) }, }; }, []); // set a new room name each time the user disconnects so that a new token gets fetched behind the scenes for a different room useEffect(() => { if (shouldConnect === false) { setRoomName( [generateRandomAlphanumeric(4), generateRandomAlphanumeric(4)].join("-") ); } }, [shouldConnect]); const token = useToken("/api/token", roomName, tokenOptions); const appConfig = useAppConfig(); const outputs = [ appConfig?.outputs.audio && PlaygroundOutputs.Audio, appConfig?.outputs.video && PlaygroundOutputs.Video, appConfig?.outputs.chat && PlaygroundOutputs.Chat, ].filter((item) => typeof item !== "boolean") as PlaygroundOutputs[]; const handleConnect = useCallback( (connect: boolean, opts?: { url: string; token: string }) => { if (connect && opts) { setLiveKitUrl(opts.url); setCustomToken(opts.token); } setShouldConnect(connect); }, [] ); return ( <> Agent Playground
{toastMessage && ( { setToastMessage(null); }} /> )} {liveKitUrl ? ( { setToastMessage({ message: e.message, type: "error" }); console.error(e); }} > ) : ( { handleConnect(true, { url, token }); }} /> )}
); }