Merge pull request #8 from livekit-examples/update-agent-notification

app/page.tsx

@@ -47,12 +47,12 @@ export default function Page() {
         {connectionDetails ? (
           <SimpleVoiceAssistant />
         ) : (
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center text-sm">
             <button
-              className="lk-button"
+              className="lk-button uppercase"
               onClick={() => onConnectButtonClicked()}
             >
-              Connect
+              Start a conversation
             </button>
           </div>
         )}

components/NoAgentNotification.tsx

@@ -1,5 +1,5 @@
 import type { AgentState } from "@livekit/components-react";
-import React from "react";
+import { useEffect, useRef, useState } from "react";
 interface NoAgentNotificationProps extends React.PropsWithChildren<object> {
   state: AgentState;
 }
@@ -8,18 +8,33 @@ interface NoAgentNotificationProps extends React.PropsWithChildren<object> {
  * Renders some user info when no agent connects to the room after a certain time.
  */
 export function NoAgentNotification(props: NoAgentNotificationProps) {
-  const timeToWaitMs = 6000;
-  const timeoutRef = React.useRef<number | null>(null);
-  const [showNotification, setShowNotification] = React.useState(false);
+  const timeToWaitMs = 10_000;
+  const timeoutRef = useRef<number | null>(null);
+  const [showNotification, setShowNotification] = useState(false);
+  const agentHasConnected = useRef(false);
 
-  React.useEffect(() => {
+  // If the agent has connected, we don't need to show the notification.
+  if (
+    ["listening", "thinking", "speaking"].includes(props.state) &&
+    agentHasConnected.current == false
+  ) {
+    agentHasConnected.current = true;
+  }
+
+  useEffect(() => {
     if (props.state === "connecting") {
       timeoutRef.current = window.setTimeout(() => {
-        if (props.state === "connecting") {
+        if (
+          props.state === "connecting" &&
+          agentHasConnected.current === false
+        ) {
           setShowNotification(true);
         }
       }, timeToWaitMs);
     } else {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
       setShowNotification(false);
     }