UI improvements (#179)

Author: thomasyuill-livekit

app-config.ts

@@ -2,8 +2,8 @@ import type { AppConfig } from './lib/types';
 
 export const APP_CONFIG_DEFAULTS: AppConfig = {
   companyName: 'LiveKit',
-  pageTitle: 'Voice Assistant',
-  pageDescription: 'A voice assistant built with LiveKit',
+  pageTitle: 'LiveKit Voice Agent',
+  pageDescription: 'A voice agent built with LiveKit',
 
   supportsChatInput: true,
   supportsVideoInput: true,

app/(app)/layout.tsx

@@ -31,7 +31,7 @@ export default async function AppLayout({ children }: AppLayoutProps) {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href="https://github.com/livekit/agents"
+            href="https://docs.livekit.io/agents"
             className="underline underline-offset-4"
           >
             LiveKit Agents

components/alert-toast.tsx

@@ -1,13 +1,14 @@
 'use client';
 
+import { ReactNode } from 'react';
 import { toast as sonnerToast } from 'sonner';
 import { WarningIcon } from '@phosphor-icons/react/dist/ssr';
-import { Alert, AlertTitle } from './ui/alert';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
 
 interface ToastProps {
   id: string | number;
-  title: string;
-  description: string;
+  title: ReactNode;
+  description: ReactNode;
 }
 
 export function toastAlert(toast: Omit<ToastProps, 'id'>) {
@@ -18,13 +19,13 @@ export function toastAlert(toast: Omit<ToastProps, 'id'>) {
 }
 
 function AlertToast(props: ToastProps) {
-  const { title, id } = props;
+  const { title, description, id } = props;
 
   return (
     <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent">
       <WarningIcon weight="bold" />
       <AlertTitle>{title}</AlertTitle>
-      {/* <AlertDescription>{description}</AlertDescription> */}
+      {description && <AlertDescription>{description}</AlertDescription>}
     </Alert>
   );
 }

components/app.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+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';
@@ -11,15 +11,15 @@ import { Welcome } from '@/components/welcome';
 import useConnectionDetails from '@/hooks/useConnectionDetails';
 import type { AppConfig } from '@/lib/types';
 
-const MotionSessionView = motion.create(SessionView);
 const MotionWelcome = motion.create(Welcome);
+const MotionSessionView = motion.create(SessionView);
 
 interface AppProps {
   appConfig: AppConfig;
 }
 
 export function App({ appConfig }: AppProps) {
-  const [sessionStarted, setSessionStarted] = React.useState(false);
+  const [sessionStarted, setSessionStarted] = useState(false);
   const { supportsChatInput, supportsVideoInput, supportsScreenShare, startButtonText } = appConfig;
 
   const capabilities = {
@@ -30,9 +30,9 @@ export function App({ appConfig }: AppProps) {
 
   const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
 
-  const room = React.useMemo(() => new Room(), []);
+  const room = useMemo(() => new Room(), []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onDisconnected = () => {
       setSessionStarted(false);
       refreshConnectionDetails();
@@ -51,7 +51,7 @@ export function App({ appConfig }: AppProps) {
     };
   }, [room, refreshConnectionDetails]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (sessionStarted && room.state === 'disconnected' && connectionDetails) {
       Promise.all([
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
@@ -88,9 +88,9 @@ export function App({ appConfig }: AppProps) {
         {/* --- */}
         <MotionSessionView
           key="session-view"
+          disabled={!sessionStarted}
           capabilities={capabilities}
           sessionStarted={sessionStarted}
-          disabled={!sessionStarted}
           initial={{ opacity: 0 }}
           animate={{ opacity: sessionStarted ? 1 : 0 }}
           transition={{

components/livekit/agent-control-bar/agent-control-bar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Track } from 'livekit-client';
-import { BarVisualizer } from '@livekit/components-react';
+import { BarVisualizer, useRemoteParticipants } from '@livekit/components-react';
 import { ChatTextIcon, PhoneDisconnectIcon } from '@phosphor-icons/react/dist/ssr';
 import { ChatInput } from '@/components/livekit/chat/chat-input';
 import { Button } from '@/components/ui/button';
@@ -37,9 +37,13 @@ export function AgentControlBar({
   onDeviceError,
   ...props
 }: AgentControlBarProps) {
+  const participants = useRemoteParticipants();
   const [chatOpen, setChatOpen] = React.useState(false);
   const [isSendingMessage, setIsSendingMessage] = React.useState(false);
 
+  const isAgentAvailable = participants.some((p) => p.isAgent);
+  const isInputDisabled = !chatOpen || !isAgentAvailable || isSendingMessage;
+
   const {
     micTrackRef,
     visibleControls,
@@ -90,7 +94,7 @@ export function AgentControlBar({
           )}
         >
           <div className="flex h-8 w-full">
-            <ChatInput onSend={handleSendMessage} disabled={isSendingMessage} className="w-full" />
+            <ChatInput onSend={handleSendMessage} disabled={isInputDisabled} className="w-full" />
           </div>
           <hr className="border-bg2 my-3" />
         </div>
@@ -151,7 +155,7 @@ export function AgentControlBar({
                 pending={cameraToggle.pending}
                 disabled={cameraToggle.pending}
                 onPressedChange={cameraToggle.toggle}
-                className="peer/track relative w-auto pr-3 pl-3 disabled:opacity-100 md:rounded-r-none md:border-r-0 md:pr-2"
+                className="peer/track relative w-auto rounded-r-none pr-3 pl-3 disabled:opacity-100 md:border-r-0 md:pr-2"
               />
               <hr className="bg-separator1 peer-data-[state=off]/track:bg-separatorSerious relative z-10 -mr-px hidden h-4 w-px md:block" />
               <DeviceSelect
@@ -166,7 +170,7 @@ export function AgentControlBar({
                   'peer-data-[state=off]/track:text-destructive-foreground',
                   'hover:text-fg1 focus:text-fg1',
                   'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
-                  'hidden rounded-l-none md:block',
+                  'rounded-l-none',
                 ])}
               />
             </div>
@@ -191,6 +195,7 @@ export function AgentControlBar({
               aria-label="Toggle chat"
               pressed={chatOpen}
               onPressedChange={setChatOpen}
+              disabled={!isAgentAvailable}
               className="aspect-square h-full"
             >
               <ChatTextIcon weight="bold" />

components/livekit/chat/chat-input.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
@@ -16,25 +16,31 @@ export function ChatInput({ onSend, className, disabled, ...props }: ChatInputPr
     props.onSubmit?.(e);
     onSend?.(message);
     setMessage('');
-    inputRef.current?.focus();
   };
 
   const isDisabled = disabled || message.trim().length === 0;
 
+  useEffect(() => {
+    if (disabled) return;
+    // when not disabled refocus on input
+    inputRef.current?.focus();
+  }, [disabled]);
+
   return (
     <form
       {...props}
       onSubmit={handleSubmit}
       className={cn('flex items-center gap-2 rounded-md pl-1 text-sm', className)}
     >
       <input
+        autoFocus
         ref={inputRef}
         type="text"
-        className="flex-1 focus:outline-none"
-        placeholder="Type something..."
         value={message}
-        onChange={(e) => setMessage(e.target.value)}
         disabled={disabled}
+        placeholder="Type something..."
+        onChange={(e) => setMessage(e.target.value)}
+        className="flex-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
       />
       <Button
         size="sm"

components/livekit/media-tiles.tsx

@@ -95,7 +95,6 @@ export function MediaTiles({ chatOpen }: MediaTilesProps) {
     state: agentState,
     audioTrack: agentAudioTrack,
     videoTrack: agentVideoTrack,
-    agent: { isActive: isAgentActive = false } = {},
   } = useVoiceAssistant();
   const [screenShareTrack] = useTracks([Track.Source.ScreenShare]);
   const cameraTrack: TrackReference | undefined = useLocalTrackRef(Track.Source.Camera);
@@ -127,47 +126,45 @@ export function MediaTiles({ chatOpen }: MediaTilesProps) {
       <div className="relative mx-auto h-full max-w-2xl px-4 md:px-0">
         <div className={cn(classNames.grid)}>
           {/* agent */}
-          {isAgentActive && (
-            <div
-              className={cn([
-                'grid',
-                // 'bg-[hotpink]', // for debugging
-                !chatOpen && classNames.agentChatClosed,
-                chatOpen && hasSecondTile && classNames.agentChatOpenWithSecondTile,
-                chatOpen && !hasSecondTile && classNames.agentChatOpenWithoutSecondTile,
-              ])}
-            >
-              <AnimatePresence mode="popLayout">
-                {!isAvatar && (
-                  // audio-only agent
-                  <MotionAgentTile
-                    key="agent"
-                    layoutId="agent"
-                    {...animationProps}
-                    animate={agentAnimate}
-                    transition={agentLayoutTransition}
-                    state={agentState}
-                    audioTrack={agentAudioTrack}
-                    className={cn(chatOpen ? 'h-[90px]' : 'h-auto w-full')}
-                  />
-                )}
-                {isAvatar && (
-                  // avatar agent
-                  <MotionAvatarTile
-                    key="avatar"
-                    layoutId="avatar"
-                    {...animationProps}
-                    animate={avatarAnimate}
-                    transition={avatarLayoutTransition}
-                    videoTrack={agentVideoTrack}
-                    className={cn(
-                      chatOpen ? 'h-[90px] [&>video]:h-[90px] [&>video]:w-auto' : 'h-auto w-full'
-                    )}
-                  />
-                )}
-              </AnimatePresence>
-            </div>
-          )}
+          <div
+            className={cn([
+              'grid',
+              // 'bg-[hotpink]', // for debugging
+              !chatOpen && classNames.agentChatClosed,
+              chatOpen && hasSecondTile && classNames.agentChatOpenWithSecondTile,
+              chatOpen && !hasSecondTile && classNames.agentChatOpenWithoutSecondTile,
+            ])}
+          >
+            <AnimatePresence mode="popLayout">
+              {!isAvatar && (
+                // audio-only agent
+                <MotionAgentTile
+                  key="agent"
+                  layoutId="agent"
+                  {...animationProps}
+                  animate={agentAnimate}
+                  transition={agentLayoutTransition}
+                  state={agentState}
+                  audioTrack={agentAudioTrack}
+                  className={cn(chatOpen ? 'h-[90px]' : 'h-auto w-full')}
+                />
+              )}
+              {isAvatar && (
+                // avatar agent
+                <MotionAvatarTile
+                  key="avatar"
+                  layoutId="avatar"
+                  {...animationProps}
+                  animate={avatarAnimate}
+                  transition={avatarLayoutTransition}
+                  videoTrack={agentVideoTrack}
+                  className={cn(
+                    chatOpen ? 'h-[90px] [&>video]:h-[90px] [&>video]:w-auto' : 'h-auto w-full'
+                  )}
+                />
+              )}
+            </AnimatePresence>
+          </div>
 
           <div
             className={cn([

components/session-view.tsx

@@ -1,8 +1,14 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import { type ReceivedChatMessage } from '@livekit/components-react';
+import {
+  type AgentState,
+  type ReceivedChatMessage,
+  useRoomContext,
+  useVoiceAssistant,
+} from '@livekit/components-react';
+import { toastAlert } from '@/components/alert-toast';
 import { AgentControlBar } from '@/components/livekit/agent-control-bar/agent-control-bar';
 import { ChatEntry } from '@/components/livekit/chat/chat-entry';
 import { ChatMessageView } from '@/components/livekit/chat/chat-message-view';
@@ -11,6 +17,10 @@ import useChatAndTranscription from '@/hooks/useChatAndTranscription';
 import { useDebugMode } from '@/hooks/useDebug';
 import { cn } from '@/lib/utils';
 
+function isAgentAvailable(agentState: AgentState) {
+  return agentState == 'listening' || agentState == 'thinking' || agentState == 'speaking';
+}
+
 interface SessionViewProps {
   disabled: boolean;
   capabilities: {
@@ -27,15 +37,51 @@ export const SessionView = ({
   sessionStarted,
   ref,
 }: React.ComponentProps<'div'> & SessionViewProps) => {
+  const { state: agentState } = useVoiceAssistant();
   const [chatOpen, setChatOpen] = useState(false);
   const { messages, send } = useChatAndTranscription();
+  const room = useRoomContext();
 
   useDebugMode();
 
   async function handleSendMessage(message: string) {
     await send(message);
   }
 
+  useEffect(() => {
+    if (sessionStarted) {
+      const timeout = setTimeout(() => {
+        if (!isAgentAvailable(agentState)) {
+          const reason =
+            agentState === 'connecting'
+              ? 'Agent did not join the room. '
+              : 'Agent connected but did not complete initializing. ';
+
+          toastAlert({
+            title: 'Session ended',
+            description: (
+              <p className="w-full">
+                {reason}
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://docs.livekit.io/agents/start/voice-ai/"
+                  className="whitespace-nowrap underline"
+                >
+                  See quickstart guide
+                </a>
+                .
+              </p>
+            ),
+          });
+          room.disconnect();
+        }
+      }, 10_000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [agentState, sessionStarted, room]);
+
   return (
     <main
       ref={ref}