From c3fc51f78156c41a869413c46d98bb716a13dac0 Mon Sep 17 00:00:00 2001
From: Jonas Schell <jonas@livekit.io>
Date: Thu, 26 Sep 2024 15:16:48 +0200
Subject: [PATCH] Update the no agent connection msg

---
 app/page.tsx                       | 16 +++-------------
 components/NoAgentNotification.tsx | 10 ++++++++--
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index e91b1d5..e70d5ab 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -22,13 +22,10 @@ export default function Page() {
   const onConnectButtonClicked = useCallback(async () => {
     const url = new URL(
       process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ??
-      "/api/connection-details",
+        "/api/connection-details",
       window.location.origin
     );
-    const subdomain = window.location.host.split(".")[0];
-    const response = await fetch(
-      url.toString(),
-      { headers: { "X-Sandbox-ID": subdomain } });
+    const response = await fetch(url.toString());
     const connectionDetailsData = await response.json();
     updateConnectionDetails(connectionDetailsData);
   }, []);
@@ -72,14 +69,7 @@ function SimpleVoiceAssistant() {
     <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>
+      <NoAgentNotification state={state} />
     </div>
   );
 }
diff --git a/components/NoAgentNotification.tsx b/components/NoAgentNotification.tsx
index 6c287d6..02a890a 100644
--- a/components/NoAgentNotification.tsx
+++ b/components/NoAgentNotification.tsx
@@ -33,7 +33,7 @@ export function NoAgentNotification(props: NoAgentNotificationProps) {
   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 className="fixed text-sm left-1/2 max-w-[90vw] -translate-x-1/2 flex top-6 items-center gap-4 bg-[#1F1F1F] px-4 py-3 rounded-lg">
           <div>
             {/* Warning Icon */}
             <svg
@@ -51,7 +51,13 @@ export function NoAgentNotification(props: NoAgentNotificationProps) {
               />
             </svg>
           </div>
-          {props.children}
+          <p className="text-pretty w-max">
+            It&apos;s quiet... too quiet. Is your agent lost? Make sure your
+            agent is set up and running correctly.
+          </p>
+          <a href="#" className="underline whitespace-nowrap">
+            View guide
+          </a>
           <button onClick={() => setShowNotification(false)}>
             {/* Close Icon */}
             <svg