feat: microphone preConnectBuffer is configurable (#182)

Author: thomasyuill-livekit

app-config.ts

@@ -8,6 +8,7 @@ export const APP_CONFIG_DEFAULTS: AppConfig = {
   supportsChatInput: true,
   supportsVideoInput: true,
   supportsScreenShare: true,
+  isPreConnectBufferEnabled: true,
 
   logo: '/lk-logo.svg',
   accent: '#002cf2',

components/app.tsx

@@ -19,19 +19,10 @@ interface AppProps {
 }
 
 export function App({ appConfig }: AppProps) {
+  const room = useMemo(() => new Room(), []);
   const [sessionStarted, setSessionStarted] = useState(false);
-  const { supportsChatInput, supportsVideoInput, supportsScreenShare, startButtonText } = appConfig;
-
-  const capabilities = {
-    supportsChatInput,
-    supportsVideoInput,
-    supportsScreenShare,
-  };
-
   const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
 
-  const room = useMemo(() => new Room(), []);
-
   useEffect(() => {
     const onDisconnected = () => {
       setSessionStarted(false);
@@ -55,7 +46,7 @@ export function App({ appConfig }: AppProps) {
     if (sessionStarted && room.state === 'disconnected' && connectionDetails) {
       Promise.all([
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
-          preConnectBuffer: true,
+          preConnectBuffer: appConfig.isPreConnectBufferEnabled,
         }),
         room.connect(connectionDetails.serverUrl, connectionDetails.participantToken),
       ]).catch((error) => {
@@ -68,7 +59,9 @@ export function App({ appConfig }: AppProps) {
     return () => {
       room.disconnect();
     };
-  }, [room, sessionStarted, connectionDetails]);
+  }, [room, sessionStarted, connectionDetails, appConfig.isPreConnectBufferEnabled]);
+
+  const { startButtonText } = appConfig;
 
   return (
     <>
@@ -88,8 +81,8 @@ export function App({ appConfig }: AppProps) {
         {/* --- */}
         <MotionSessionView
           key="session-view"
+          appConfig={appConfig}
           disabled={!sessionStarted}
-          capabilities={capabilities}
           sessionStarted={sessionStarted}
           initial={{ opacity: 0 }}
           animate={{ opacity: sessionStarted ? 1 : 0 }}

components/session-view.tsx

@@ -15,25 +15,22 @@ import { ChatMessageView } from '@/components/livekit/chat/chat-message-view';
 import { MediaTiles } from '@/components/livekit/media-tiles';
 import useChatAndTranscription from '@/hooks/useChatAndTranscription';
 import { useDebugMode } from '@/hooks/useDebug';
+import type { AppConfig } from '@/lib/types';
 import { cn } from '@/lib/utils';
 
 function isAgentAvailable(agentState: AgentState) {
   return agentState == 'listening' || agentState == 'thinking' || agentState == 'speaking';
 }
 
 interface SessionViewProps {
+  appConfig: AppConfig;
   disabled: boolean;
-  capabilities: {
-    supportsChatInput: boolean;
-    supportsVideoInput: boolean;
-    supportsScreenShare: boolean;
-  };
   sessionStarted: boolean;
 }
 
 export const SessionView = ({
+  appConfig,
   disabled,
-  capabilities,
   sessionStarted,
   ref,
 }: React.ComponentProps<'div'> & SessionViewProps) => {
@@ -82,6 +79,13 @@ export const SessionView = ({
     }
   }, [agentState, sessionStarted, room]);
 
+  const { supportsChatInput, supportsVideoInput, supportsScreenShare } = appConfig;
+  const capabilities = {
+    supportsChatInput,
+    supportsVideoInput,
+    supportsScreenShare,
+  };
+
   return (
     <main
       ref={ref}
@@ -133,26 +137,28 @@ export const SessionView = ({
           transition={{ duration: 0.3, delay: sessionStarted ? 0.5 : 0, ease: 'easeOut' }}
         >
           <div className="relative z-10 mx-auto w-full max-w-2xl">
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{
-                opacity: sessionStarted && messages.length === 0 ? 1 : 0,
-                transition: {
-                  ease: 'easeIn',
-                  delay: messages.length > 0 ? 0 : 0.8,
-                  duration: messages.length > 0 ? 0.2 : 0.5,
-                },
-              }}
-              aria-hidden={messages.length > 0}
-              className={cn(
-                'absolute inset-x-0 -top-12 text-center',
-                sessionStarted && messages.length === 0 && 'pointer-events-none'
-              )}
-            >
-              <p className="animate-text-shimmer inline-block !bg-clip-text text-sm font-semibold text-transparent">
-                Agent is listening, ask it a question
-              </p>
-            </motion.div>
+            {appConfig.isPreConnectBufferEnabled && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: sessionStarted && messages.length === 0 ? 1 : 0,
+                  transition: {
+                    ease: 'easeIn',
+                    delay: messages.length > 0 ? 0 : 0.8,
+                    duration: messages.length > 0 ? 0.2 : 0.5,
+                  },
+                }}
+                aria-hidden={messages.length > 0}
+                className={cn(
+                  'absolute inset-x-0 -top-12 text-center',
+                  sessionStarted && messages.length === 0 && 'pointer-events-none'
+                )}
+              >
+                <p className="animate-text-shimmer inline-block !bg-clip-text text-sm font-semibold text-transparent">
+                  Agent is listening, ask it a question
+                </p>
+              </motion.div>
+            )}
 
             <AgentControlBar
               capabilities={capabilities}

lib/types.ts

@@ -15,6 +15,7 @@ export interface AppConfig {
   supportsChatInput: boolean;
   supportsVideoInput: boolean;
   supportsScreenShare: boolean;
+  isPreConnectBufferEnabled: boolean;
 
   logo: string;
   startButtonText: string;