fix: load model error component (#4604)

* fix: load model error should using error component * chore: fix linter issue
janhq · Feb 7, 2025 · 9837d09 · 9837d09
1 parent a70735b
commit 9837d09
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 59 deletions.
diff --git a/web/containers/ErrorMessage/index.tsx b/web/containers/ErrorMessage/index.tsx
@@ -23,7 +23,13 @@ import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
-const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
+const ErrorMessage = ({
+  message,
+  errorComponent,
+}: {
+  message?: ThreadMessage
+  errorComponent?: React.ReactNode
+}) => {
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
   const setMainState = useSetAtom(mainViewStateAtom)
   const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
@@ -50,7 +56,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   const getErrorTitle = () => {
     const engine = getEngine()
 
-    switch (message.metadata?.error_code) {
+    switch (message?.metadata?.error_code) {
       case ErrorCode.InvalidApiKey:
       case ErrorCode.AuthenticationError:
         return (
@@ -77,7 +83,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
             data-testid="passthrough-error-message"
             className="first-letter:uppercase"
           >
-            {message.content[0]?.text?.value === 'Failed to fetch' &&
+            {message?.content[0]?.text?.value === 'Failed to fetch' &&
             engine &&
             engine?.name !== InferenceEngine.cortex_llamacpp ? (
               <span>
@@ -103,7 +109,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
     <div className="mx-auto my-6 max-w-[700px] px-4">
       <div
         className="mx-auto  max-w-[400px] rounded-lg border border-[hsla(var(--app-border))]"
-        key={message.id}
+        key={message?.id}
       >
         <div className="flex justify-between border-b border-inherit px-4 py-2">
           <h6 className="flex items-center gap-x-1 font-semibold text-[hsla(var(--destructive-bg))]">
@@ -147,7 +153,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
             className="font-serif text-xs leading-relaxed text-[hsla(var(--text-secondary))]"
             ref={errorDivRef}
           >
-            {getErrorTitle()}
+            {errorComponent ? errorComponent : getErrorTitle()}
           </div>
         </div>
       </div>

diff --git a/web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx b/web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx
@@ -1,6 +1,7 @@
 import { EngineManager, InferenceEngine } from '@janhq/core'
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import ErrorMessage from '@/containers/ErrorMessage'
 import ModalTroubleShooting, {
   modalTroubleShootingAtom,
 } from '@/containers/ModalTroubleShoot'
@@ -20,62 +21,43 @@ const LoadModelError = () => {
   const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
 
-  const ErrorMessage = () => {
-    if (
-      typeof loadModelError?.includes === 'function' &&
-      loadModelError.includes('EXTENSION_IS_NOT_INSTALLED')
-    ) {
-      return (
-        <p>
-          Model is currently unavailable. Please switch to a different model or
-          install the{' '}
-          <span
-            className="cursor-pointer font-medium text-[hsla(var(--app-link))]"
-            onClick={() => {
-              setMainState(MainViewState.Settings)
-              if (activeAssistant?.model.engine) {
-                const engine = EngineManager.instance().get(
-                  InferenceEngine.cortex
-                )
-                engine?.name && setSelectedSettingScreen(engine.name)
-              }
-            }}
-          >
-            {loadModelError.split('::')[1] ?? ''}
-          </span>{' '}
-          to continue using it.
-        </p>
-      )
-    } else {
-      return (
-        <div className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]">
-          {loadModelError && (
-            <p className="first-letter:uppercase">{loadModelError}</p>
+  return (
+    <ErrorMessage
+      errorComponent={
+        <div>
+          {typeof loadModelError?.includes === 'function' &&
+          loadModelError.includes('EXTENSION_IS_NOT_INSTALLED') ? (
+            <>
+              <p>
+                Model is currently unavailable. Please switch to a different
+                model or install the{' '}
+                <span
+                  className="cursor-pointer font-medium text-[hsla(var(--app-link))]"
+                  onClick={() => {
+                    setMainState(MainViewState.Settings)
+                    if (activeAssistant?.model.engine) {
+                      const engine = EngineManager.instance().get(
+                        InferenceEngine.cortex
+                      )
+                      engine?.name && setSelectedSettingScreen(engine.name)
+                    }
+                  }}
+                >
+                  {loadModelError.split('::')[1] ?? ''}
+                </span>{' '}
+                to continue using it.
+              </p>
+            </>
+          ) : (
+            <>
+              {loadModelError && (
+                <p className="first-letter:uppercase">{loadModelError}</p>
+              )}
+            </>
           )}
-          <p>
-            {`Something's wrong.`}&nbsp;Access&nbsp;
-            <span
-              className="cursor-pointer text-[hsla(var(--app-link))]"
-              onClick={() => setModalTroubleShooting(true)}
-            >
-              troubleshooting assistance
-            </span>
-            &nbsp;now.
-          </p>
         </div>
-      )
-    }
-  }
-
-  return (
-    <div className="flex flex-1">
-      <div className="flex w-full flex-col items-center text-center font-medium">
-        <p className="w-[90%]">
-          <ErrorMessage />
-        </p>
-        <ModalTroubleShooting />
-      </div>
-    </div>
+      }
+    />
   )
 }
 export default LoadModelError