remove useConnectionTimeout

Author: thomasyuill-livekit

components/app/session-view.tsx

@@ -12,14 +12,11 @@ import {
   type ControlBarControls,
 } from '@/components/livekit/agent-control-bar/agent-control-bar';
 import { useAppSession } from '@/hooks/useAppSession';
-import { useConnectionTimeout } from '@/hooks/useConnectionTimout';
-import { useDebugMode } from '@/hooks/useDebug';
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../livekit/scroll-area/scroll-area';
 
 const MotionBottom = motion.create('div');
 
-const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 const BOTTOM_VIEW_MOTION_PROPS = {
   variants: {
     visible: {
@@ -68,9 +65,6 @@ export const SessionView = ({
   appConfig,
   ...props
 }: React.ComponentProps<'section'> & SessionViewProps) => {
-  useConnectionTimeout(20_000);
-  useDebugMode({ enabled: IN_DEVELOPMENT });
-
   const { session, isSessionActive, endSession } = useAppSession();
   const { messages } = useSessionMessages(session);
   const [chatOpen, setChatOpen] = useState(false);

components/app/view-controller.tsx

@@ -6,7 +6,11 @@ import { useSessionContext } from '@livekit/components-react';
 import { AppConfig } from '@/app-config';
 import { SessionView } from '@/components/app/session-view';
 import { WelcomeView } from '@/components/app/welcome-view';
+import { useAgentErrors } from '@/hooks/useAgentErrors';
 import { useAppSession } from '@/hooks/useAppSession';
+import { useDebugMode } from '@/hooks/useDebug';
+
+const IN_DEVELOPMENT = process.env.NODE_ENV !== 'production';
 
 const MotionWelcomeView = motion.create(WelcomeView);
 const MotionSessionView = motion.create(SessionView);
@@ -37,6 +41,9 @@ export function ViewController({ appConfig }: ViewControllerProps) {
   const session = useSessionContext();
   const { isSessionActive, startSession } = useAppSession();
 
+  useDebugMode({ enabled: IN_DEVELOPMENT });
+  useAgentErrors();
+
   const handleAnimationComplete = useCallback(
     (definition: AnimationDefinition) => {
       // manually end the session when the exit animation completes

components/livekit/alert-toast.tsx

@@ -22,7 +22,7 @@ export function AlertToast(props: ToastProps) {
   const { title, description, id } = props;
 
   return (
-    <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent">
+    <Alert onClick={() => sonnerToast.dismiss(id)} className="bg-accent w-full md:w-[364px]">
       <WarningIcon weight="bold" />
       <AlertTitle>{title}</AlertTitle>
       {description && <AlertDescription>{description}</AlertDescription>}

hooks/useAgentErrors.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useAgent } from '@livekit/components-react';
+import { toastAlert } from '@/components/livekit/alert-toast';
+import { useAppSession } from './useAppSession';
+
+export function useAgentErrors() {
+  const agent = useAgent();
+  const { isSessionActive, endSession } = useAppSession();
+
+  useEffect(() => {
+    if (isSessionActive && agent.state === 'failed') {
+      const reasons = agent.failureReasons;
+
+      toastAlert({
+        title: 'Session ended',
+        description: (
+          <>
+            {reasons.length > 1 && (
+              <ul className="list-inside list-disc">
+                {reasons.map((reason) => (
+                  <li key={reason}>{reason}</li>
+                ))}
+              </ul>
+            )}
+            {reasons.length === 1 && <p className="w-full">{reasons[0]}</p>}
+            <p className="w-full">
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://docs.livekit.io/agents/start/voice-ai/"
+                className="whitespace-nowrap underline"
+              >
+                See quickstart guide
+              </a>
+              .
+            </p>
+          </>
+        ),
+      });
+
+      endSession();
+    }
+  }, [agent, isSessionActive, endSession]);
+}

hooks/useConnectionTimout.tsx

@@ -29,7 +29,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sonner": "^2.0.3",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {