Merge pull request #3 from livekit-examples/dex-712-add-no-agent-has-…

…connected-info

README.md

@@ -0,0 +1,27 @@
+# Voice Assistant
+
+## Agent
+
+TODO
+
+## Frontend
+
+![Screenshot of the frontend application.](/.github/assets/frontent-screenshot.jpeg)
+
+> [!NOTE]
+> Continue reading only if you plan to modify the frontend app. If you’re just working with the agent code, there’s no need to touch the frontend. Use the hosted sandbox frontend instead.
+
+First, run the development server:
+
+```bash
+# Frontend code lives in /frontend
+cd frontend
+# Make sure the frontend dependencies are installed (only required once).
+pnpm install
+# Run den local development server.
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

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,15 @@ function SimpleVoiceAssistant() {
   return (
     <div className="h-80">
       <BarVisualizer state={state} barCount={7} trackRef={audioTrack} />
+      <p className="text-center">{state}</p>
+      <NoAgentNotification state={state}>
+        <p>
+          No agent joined this session. Follow the guide to setup your agent.
+        </p>
+        <a href="#" className="underline whitespace-nowrap">
+          View guide
+        </a>
+      </NoAgentNotification>
     </div>
   );
 }

frontend/components/NoAgentNotification.tsx

@@ -0,0 +1,76 @@
+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]);
+
+  return (
+    <>
+      {showNotification ? (
+        <div className="fixed text-sm left-1/2 -translate-x-1/2 flex top-6 items-center gap-4 bg-[#131313] font-mono px-4 py-3 rounded">
+          <div>
+            {/* Warning Icon */}
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.85068 3.63564C10.8197 2.00589 13.1793 2.00589 14.1484 3.63564L21.6323 16.2223C22.6232 17.8888 21.4223 20 19.4835 20H4.51555C2.57676 20 1.37584 17.8888 2.36671 16.2223L9.85068 3.63564ZM12 8.5C12.2761 8.5 12.5 8.72386 12.5 9V13.5C12.5 13.7761 12.2761 14 12 14C11.7239 14 11.5 13.7761 11.5 13.5V9C11.5 8.72386 11.7239 8.5 12 8.5ZM12.75 16C12.75 16.4142 12.4142 16.75 12 16.75C11.5858 16.75 11.25 16.4142 11.25 16C11.25 15.5858 11.5858 15.25 12 15.25C12.4142 15.25 12.75 15.5858 12.75 16Z"
+                fill="#666666"
+              />
+            </svg>
+          </div>
+          {props.children}
+          <button onClick={() => setShowNotification(false)}>
+            {/* Close Icon */}
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.16602 3.16666L12.8327 12.8333M12.8327 3.16666L3.16602 12.8333"
+                stroke="#999999"
+                strokeWidth="1.5"
+                strokeLinecap="square"
+              />
+            </svg>
+          </button>
+        </div>
+      ) : null}
+    </>
+  );
+}

frontend/tailwind.config.ts

@@ -6,14 +6,7 @@ const config: Config = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
+  theme: {},
   plugins: [],
 };
 export default config;