fix: missing load model error message (#2581)

web/hooks/useActiveModel.ts

@@ -107,7 +107,7 @@ export function useActiveModel() {
         toaster({
           title: 'Failed!',
           description: `Model ${model.id} failed to start.`,
-          type: 'success',
+          type: 'error',
         })
         setLoadModelError(error)
         return Promise.reject(error)

web/screens/Chat/ChatBody/index.tsx

@@ -3,10 +3,14 @@ import ScrollToBottom from 'react-scroll-to-bottom'
 import { MessageStatus } from '@janhq/core'
 import { useAtomValue } from 'jotai'
 
+import { loadModelErrorAtom } from '@/hooks/useActiveModel'
+
 import ChatItem from '../ChatItem'
 
 import ErrorMessage from '../ErrorMessage'
 
+import LoadModelError from '../LoadModelError'
+
 import EmptyModel from './EmptyModel'
 import EmptyThread from './EmptyThread'
 
@@ -16,6 +20,7 @@ import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 const ChatBody: React.FC = () => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const downloadedModels = useAtomValue(downloadedModelsAtom)
+  const loadModelError = useAtomValue(loadModelErrorAtom)
 
   if (downloadedModels.length === 0) return <EmptyModel />
   if (messages.length === 0) return <EmptyThread />
@@ -29,9 +34,15 @@ const ChatBody: React.FC = () => {
               <ChatItem {...message} key={message.id} />
             )}
 
-          {(message.status === MessageStatus.Error ||
-            message.status === MessageStatus.Stopped) &&
-            index === messages.length - 1 && <ErrorMessage message={message} />}
+          {loadModelError ? (
+            <LoadModelError />
+          ) : (
+            index === messages.length - 1 &&
+            message.status !== MessageStatus.Pending &&
+            message.status !== MessageStatus.Ready && (
+              <ErrorMessage message={message} />
+            )
+          )}
         </div>
       ))}
     </ScrollToBottom>

web/screens/Chat/ErrorMessage/index.tsx

@@ -10,7 +10,6 @@ import ModalTroubleShooting, {
 
 import { MainViewState } from '@/constants/screens'
 
-import { loadModelErrorAtom } from '@/hooks/useActiveModel'
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
@@ -20,9 +19,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const { resendChatMessage } = useSendChatMessage()
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
-  const loadModelError = useAtomValue(loadModelErrorAtom)
   const setMainState = useSetAtom(mainViewStateAtom)
-  const PORT_NOT_AVAILABLE = 'PORT_NOT_AVAILABLE'
 
   const regenerateMessage = async () => {
     const lastMessageIndex = messages.length - 1
@@ -77,63 +74,23 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
         </div>
       )}
       {message.status === MessageStatus.Error && (
-        <>
-          {loadModelError === PORT_NOT_AVAILABLE ? (
-            <div
-              key={message.id}
-              className="flex w-full flex-col items-center text-center text-sm font-medium text-gray-500"
+        <div
+          key={message.id}
+          className="mx-6 flex flex-col items-center space-y-2 text-center text-sm font-medium text-gray-500"
+        >
+          {getErrorTitle()}
+          <p>
+            Jan’s in beta. Access&nbsp;
+            <span
+              className="cursor-pointer text-primary dark:text-blue-400"
+              onClick={() => setModalTroubleShooting(true)}
             >
-              <p className="w-[90%]">
-                Port 3928 is currently unavailable. Check for conflicting apps,
-                or access&nbsp;
-                <span
-                  className="cursor-pointer text-primary dark:text-blue-400"
-                  onClick={() => setModalTroubleShooting(true)}
-                >
-                  troubleshooting assistance
-                </span>
-                &nbsp;for further support.
-              </p>
-              <ModalTroubleShooting />
-            </div>
-          ) : loadModelError &&
-            loadModelError?.includes('EXTENSION_IS_NOT_INSTALLED') ? (
-            <div
-              key={message.id}
-              className="flex w-full flex-col items-center text-center text-sm font-medium text-gray-500"
-            >
-              <p className="w-[90%]">
-                Model is currently unavailable. Please switch to a different
-                model or install the{' '}
-                <button
-                  className="font-medium text-primary dark:text-blue-400"
-                  onClick={() => setMainState(MainViewState.Settings)}
-                >
-                  {loadModelError.split('::')[1] ?? ''}
-                </button>{' '}
-                to continue using it.
-              </p>
-            </div>
-          ) : (
-            <div
-              key={message.id}
-              className="mx-6 flex flex-col items-center space-y-2 text-center text-sm font-medium text-gray-500"
-            >
-              {getErrorTitle()}
-              <p>
-                Jan’s in beta. Access&nbsp;
-                <span
-                  className="cursor-pointer text-primary dark:text-blue-400"
-                  onClick={() => setModalTroubleShooting(true)}
-                >
-                  troubleshooting assistance
-                </span>
-                &nbsp;now.
-              </p>
-              <ModalTroubleShooting />
-            </div>
-          )}
-        </>
+              troubleshooting assistance
+            </span>
+            &nbsp;now.
+          </p>
+          <ModalTroubleShooting />
+        </div>
       )}
     </div>
   )

web/screens/Chat/LoadModelError/index.tsx

@@ -0,0 +1,70 @@
+import { useAtomValue, useSetAtom } from 'jotai'
+
+import ModalTroubleShooting, {
+  modalTroubleShootingAtom,
+} from '@/containers/ModalTroubleShoot'
+
+import { MainViewState } from '@/constants/screens'
+
+import { loadModelErrorAtom } from '@/hooks/useActiveModel'
+
+import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
+
+const LoadModelError = () => {
+  const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
+  const loadModelError = useAtomValue(loadModelErrorAtom)
+  const setMainState = useSetAtom(mainViewStateAtom)
+  const PORT_NOT_AVAILABLE = 'PORT_NOT_AVAILABLE'
+
+  return (
+    <div className="mt-10">
+      {loadModelError === PORT_NOT_AVAILABLE ? (
+        <div className="flex w-full flex-col items-center text-center text-sm font-medium text-gray-500">
+          <p className="w-[90%]">
+            Port 3928 is currently unavailable. Check for conflicting apps, or
+            access&nbsp;
+            <span
+              className="cursor-pointer text-primary dark:text-blue-400"
+              onClick={() => setModalTroubleShooting(true)}
+            >
+              troubleshooting assistance
+            </span>
+            &nbsp;for further support.
+          </p>
+          <ModalTroubleShooting />
+        </div>
+      ) : loadModelError &&
+        loadModelError?.includes('EXTENSION_IS_NOT_INSTALLED') ? (
+        <div className="flex w-full flex-col items-center text-center text-sm font-medium text-gray-500">
+          <p className="w-[90%]">
+            Model is currently unavailable. Please switch to a different model
+            or install the{' '}
+            <button
+              className="font-medium text-primary dark:text-blue-400"
+              onClick={() => setMainState(MainViewState.Settings)}
+            >
+              {loadModelError.split('::')[1] ?? ''}
+            </button>{' '}
+            to continue using it.
+          </p>
+        </div>
+      ) : (
+        <div className="mx-6 flex flex-col items-center space-y-2 text-center text-sm font-medium text-gray-500">
+          Apologies, something’s amiss!
+          <p>
+            Jan’s in beta. Access&nbsp;
+            <span
+              className="cursor-pointer text-primary dark:text-blue-400"
+              onClick={() => setModalTroubleShooting(true)}
+            >
+              troubleshooting assistance
+            </span>
+            &nbsp;now.
+          </p>
+          <ModalTroubleShooting />
+        </div>
+      )}
+    </div>
+  )
+}
+export default LoadModelError