enhancement: better error handing for remote models when there's no internet connection (#4252)

* enhance: better handling failed to fetch

* chore: remove console

* chore: checking engine showing error failed to fetch

* chore: fix linter

* chore: fix linter error missing assistant

web/containers/ErrorMessage/index.tsx

@@ -14,6 +14,8 @@ import ModalTroubleShooting, {
 
 import { MainViewState } from '@/constants/screens'
 
+import { isLocalEngine } from '@/utils/modelEngine'
+
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
 
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
@@ -25,30 +27,52 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
   const activeThread = useAtomValue(activeThreadAtom)
 
+  const defaultDesc = () => {
+    return (
+      <>
+        <p>
+          {`Something's wrong.`} Access&nbsp;
+          <span
+            className="cursor-pointer text-[hsla(var(--app-link))] underline"
+            onClick={() => setModalTroubleShooting(true)}
+          >
+            troubleshooting assistance
+          </span>
+          &nbsp;now.
+        </p>
+        <ModalTroubleShooting />
+      </>
+    )
+  }
+
+  const getEngine = () => {
+    const engineName = activeThread?.assistants?.[0]?.model?.engine
+    return engineName ? EngineManager.instance().get(engineName) : null
+  }
+
   const getErrorTitle = () => {
+    const engine = getEngine()
+
     switch (message.error_code) {
       case ErrorCode.InvalidApiKey:
       case ErrorCode.AuthenticationError:
         return (
-          <span data-testid="invalid-API-key-error">
+          <>
-            Invalid API key. Please check your API key from{' '}
+            <span data-testid="invalid-API-key-error">
-            <button
+              Invalid API key. Please check your API key from{' '}
-              className="font-medium text-[hsla(var(--app-link))] underline"
+              <button
-              onClick={() => {
+                className="font-medium text-[hsla(var(--app-link))] underline"
-                setMainState(MainViewState.Settings)
+                onClick={() => {
-
+                  setMainState(MainViewState.Settings)
-                if (activeThread?.assistants[0]?.model.engine) {
-                  const engine = EngineManager.instance().get(
-                    activeThread.assistants[0].model.engine
-                  )
                   engine?.name && setSelectedSettingScreen(engine.name)
-                }
+                }}
-              }}
+              >
-            >
+                Settings
-              Settings
+              </button>{' '}
-            </button>{' '}
+              and try again.
-            and try again.
+            </span>
-          </span>
+            {defaultDesc()}
+          </>
         )
       default:
         return (
@@ -56,8 +80,18 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
             data-testid="passthrough-error-message"
             className="first-letter:uppercase"
           >
-            {message.content[0]?.text?.value && (
+            {message.content[0]?.text?.value === 'Failed to fetch' &&
-              <AutoLink text={message.content[0].text.value} />
+            engine &&
+            !isLocalEngine(String(engine?.name)) ? (
+              <span>
+                No internet connection. <br /> Switch to an on-device model or
+                check connection.
+              </span>
+            ) : (
+              <>
+                <AutoLink text={message.content[0].text.value} />
+                {defaultDesc()}
+              </>
             )}
           </p>
         )
@@ -65,24 +99,13 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   }
 
   return (
-    <div className="mx-auto mt-10 max-w-[700px]">
+    <div className="mx-auto my-6 max-w-[700px]">
       {message.status === MessageStatus.Error && (
         <div
           key={message.id}
           className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]"
         >
           {getErrorTitle()}
-          <p>
-            {`Something's wrong.`} Access&nbsp;
-            <span
-              className="cursor-pointer text-[hsla(var(--app-link))] underline"
-              onClick={() => setModalTroubleShooting(true)}
-            >
-              troubleshooting assistance
-            </span>
-            &nbsp;now.
-          </p>
-          <ModalTroubleShooting />
         </div>
       )}
     </div>