replace reconnect button with close if reconnect fails

src/views/ErrorScreen.tsx

@@ -7,14 +7,18 @@ type ErrorScreenProps = {
   errorType: 'socket_error' | 'audio_error' | 'mic_error' | 'unknown';
   errorReason: string;
   onConnect: () => void;
+  onClose: () => void;
+  ableToReconnect: boolean;
   isConnecting: boolean;
 };
 
 export const ErrorScreen: FC<ErrorScreenProps> = ({
   errorType,
   errorReason,
   onConnect,
+  onClose,
   isConnecting,
+  ableToReconnect,
 }) => {
   return (
     <div className="mt-12 flex w-full flex-col items-center justify-center gap-2">
@@ -71,13 +75,17 @@ export const ErrorScreen: FC<ErrorScreenProps> = ({
         })}
 
       <div className="pt-2">
-        <Button
-          onClick={onConnect}
-          isLoading={isConnecting}
-          loadingText={'Connecting...'}
-        >
-          Reconnect
-        </Button>
+        {ableToReconnect ? (
+          <Button
+            onClick={onConnect}
+            isLoading={isConnecting}
+            loadingText={'Connecting...'}
+          >
+            Reconnect
+          </Button>
+        ) : (
+          <Button onClick={onClose}>Close</Button>
+        )}
       </div>
     </div>
   );

src/views/Views.tsx

@@ -5,7 +5,7 @@ import { ConversationScreen } from '@/views/ConversationScreen';
 import { ErrorScreen } from '@/views/ErrorScreen';
 import { IntroScreen } from '@/views/IntroScreen';
 import { useVoice } from '@humeai/voice-react';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { match } from 'ts-pattern';
 
 export type ViewsProps = Record<never, never>;
@@ -17,6 +17,8 @@ export const Views: FC<ViewsProps> = () => {
 
   const { connect, disconnect, status, error } = useVoice();
 
+  const [reconnectError, setReconnectError] = useState<string | null>(null);
+
   if (layoutState === LayoutState.CLOSED) {
     return (
       <>
@@ -31,10 +33,14 @@ export const Views: FC<ViewsProps> = () => {
   }
 
   const onConnect = () => {
-    void connect()
-      .then(() => {})
+    setReconnectError(null);
+    return connect()
+      .then(() => {
+        return { success: true } as const;
+      })
       .catch((e) => {
         console.error(e);
+        return {success: false} as const;
       });
   };
 
@@ -51,8 +57,19 @@ export const Views: FC<ViewsProps> = () => {
             <ErrorScreen
               errorType={error?.type ?? ('unknown' as const)}
               errorReason={error?.message ?? 'Unknown'}
-              onConnect={onConnect}
+              onConnect={() => {
+                onConnect()
+                .then(res => {
+                  if(res.success === false){
+                    setReconnectError('Failed to reconnect')
+                  }
+                })
+              }}
+              onClose={() => {
+                close();
+              }}
               isConnecting={status.value === 'connecting'}
+              ableToReconnect={reconnectError !== null}
             />
           );
         })