Add NoAgentNotification component to display a notification when no a…

…gent connects to the room

frontend/app/page.tsx

@@ -12,6 +12,7 @@ import {
 import { useCallback, useState } from "react";
 import { MediaDeviceFailure } from "livekit-client";
 import type { ConnectionDetails } from "./api/connection-details/route";
+import { NoAgentNotification } from "@/components/NoAgentNotification";
 
 export default function Page() {
   const [connectionDetails, updateConnectionDetails] = useState<
@@ -67,6 +68,17 @@ function SimpleVoiceAssistant() {
   return (
     <div className="h-80">
       <BarVisualizer state={state} barCount={7} trackRef={audioTrack} />
+      <p className="font-mono text-center">{state}</p>
+      <NoAgentNotification state={state}>
+        <p className="font-bold mb-1">No agent</p>
+        <p>
+          No agent has joined the room yet. Please ensure you&#39;ve followed
+          the setup instructions and started your agent on your machine.{" "}
+          <a href="#" className="underline">
+            Learn more
+          </a>
+        </p>
+      </NoAgentNotification>
     </div>
   );
 }

frontend/components/NoAgentNotification.tsx

@@ -0,0 +1,44 @@
+import type { VoiceAssistantState } from "@livekit/components-react";
+import React from "react";
+interface NoAgentNotificationProps extends React.PropsWithChildren<object> {
+  state: VoiceAssistantState;
+}
+
+/**
+ * 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);
+
+  React.useEffect(() => {
+    if (props.state === "connecting") {
+      timeoutRef.current = window.setTimeout(() => {
+        if (props.state === "connecting") {
+          setShowNotification(true);
+        }
+      }, timeToWaitMs);
+    } else {
+      setShowNotification(false);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [props.state]);
+
+  React.useEffect(() => {}, [props.state]);
+
+  return (
+    <>
+      {showNotification ? (
+        <div className="fixed text-sm bottom-[var(--lk-control-bar-height)] border border-cyan-500 font-mono m-4 w-96 max-w-[80vw] px-4 py-3 rounded left-0 bg-[var(--lk-bg)]">
+          {props.children}
+        </div>
+      ) : null}
+    </>
+  );
+}