fix: load model error component (#4604)

* fix: load model error should using error component

* chore: fix linter issue

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>

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,15 +21,16 @@ const LoadModelError = () => {
   const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
 
-  const ErrorMessage = () => {
-    if (
-      typeof loadModelError?.includes === 'function' &&
-      loadModelError.includes('EXTENSION_IS_NOT_INSTALLED')
-    ) {
   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
+                Model is currently unavailable. Please switch to a different
-          install the{' '}
+                model or install the{' '}
                 <span
                   className="cursor-pointer font-medium text-[hsla(var(--app-link))]"
                   onClick={() => {
@@ -45,37 +47,17 @@ const LoadModelError = () => {
                 </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>
               )}
-          <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