From 7311cea452b38ae9a5b8d741fb50f6899516a5ba Mon Sep 17 00:00:00 2001
From: Zach Krall <zach@zachkrall.com>
Date: Wed, 3 Jul 2024 12:34:46 -0400
Subject: [PATCH 1/2] close widget if reconnect fails

---
 src/views/Views.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/views/Views.tsx b/src/views/Views.tsx
index 17e8ab4..eb82793 100644
--- a/src/views/Views.tsx
+++ b/src/views/Views.tsx
@@ -31,10 +31,13 @@ export const Views: FC<ViewsProps> = () => {
   }
 
   const onConnect = () => {
-    void connect()
-      .then(() => {})
+    return connect()
+      .then(() => {
+        return { success: true } as const;
+      })
       .catch((e) => {
         console.error(e);
+        return {success: false} as const;
       });
   };
 
@@ -51,7 +54,15 @@ 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){
+                    // close widget if reconnect fails 
+                    close();
+                  }
+                })
+              }}
               isConnecting={status.value === 'connecting'}
             />
           );

From 141205a1261b9f987be3b035a030cdcdc2b6350f Mon Sep 17 00:00:00 2001
From: Zach Krall <zach@zachkrall.com>
Date: Wed, 3 Jul 2024 12:37:27 -0400
Subject: [PATCH 2/2] replace recnonect button with close

---
 src/views/ErrorScreen.tsx | 22 +++++++++++++++-------
 src/views/Views.tsx       | 12 +++++++++---
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/views/ErrorScreen.tsx b/src/views/ErrorScreen.tsx
index 6dc02e3..5acec77 100644
--- a/src/views/ErrorScreen.tsx
+++ b/src/views/ErrorScreen.tsx
@@ -7,6 +7,8 @@ type ErrorScreenProps = {
   errorType: 'socket_error' | 'audio_error' | 'mic_error' | 'unknown';
   errorReason: string;
   onConnect: () => void;
+  onClose: () => void;
+  ableToReconnect: boolean;
   isConnecting: boolean;
 };
 
@@ -14,7 +16,9 @@ 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>
   );
diff --git a/src/views/Views.tsx b/src/views/Views.tsx
index eb82793..172b2b8 100644
--- a/src/views/Views.tsx
+++ b/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,6 +33,7 @@ export const Views: FC<ViewsProps> = () => {
   }
 
   const onConnect = () => {
+    setReconnectError(null);
     return connect()
       .then(() => {
         return { success: true } as const;
@@ -58,12 +61,15 @@ export const Views: FC<ViewsProps> = () => {
                 onConnect()
                 .then(res => {
                   if(res.success === false){
-                    // close widget if reconnect fails 
-                    close();
+                    setReconnectError('Failed to reconnect')
                   }
                 })
               }}
+              onClose={() => {
+                close();
+              }}
               isConnecting={status.value === 'connecting'}
+              ableToReconnect={reconnectError !== null}
             />
           );
         })