fix: load model fail overlays thread message error (#1901)

web/hooks/useSetActiveThread.ts

@@ -8,6 +8,8 @@ import {
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import { loadModelErrorAtom } from './useActiveModel'
+
 import { extensionManager } from '@/extension'
 import { setConvoMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 import {
@@ -24,6 +26,7 @@ export default function useSetActiveThread() {
   const setThreadMessage = useSetAtom(setConvoMessagesAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
   const setIsGeneratingResponse = useSetAtom(isGeneratingResponseAtom)
+  const setLoadModelError = useSetAtom(loadModelErrorAtom)
 
   const setActiveThread = async (thread: Thread) => {
     if (activeThreadId === thread.id) {
@@ -32,6 +35,7 @@ export default function useSetActiveThread() {
     }
 
     setIsGeneratingResponse(false)
+    setLoadModelError(undefined)
     events.emit(InferenceEvent.OnInferenceStopped, thread.id)
 
     // load the corresponding messages

web/screens/Chat/ChatBody/index.tsx

@@ -25,7 +25,6 @@ const ChatBody: React.FC = () => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const { downloadedModels } = useGetDownloadedModels()
   const { setMainViewState } = useMainViewState()
-  const loadModelError = useAtomValue(loadModelErrorAtom)
 
   if (downloadedModels.length === 0)
     return (
@@ -86,8 +85,7 @@ const ChatBody: React.FC = () => {
                 message.content.length > 0) && (
                 <ChatItem {...message} key={message.id} />
               )}
-              {!loadModelError &&
+              {(message.status === MessageStatus.Error ||
-                (message.status === MessageStatus.Error ||
                 message.status === MessageStatus.Stopped) &&
                 index === messages.length - 1 && (
                   <ErrorMessage message={message} />

web/screens/Chat/LoadModelErrorMessage/index.tsx

@@ -1,48 +0,0 @@
-import { MessageStatus, ThreadMessage } from '@janhq/core'
-import { useAtomValue } from 'jotai'
-
-import { useActiveModel } from '@/hooks/useActiveModel'
-
-import { totalRamAtom } from '@/helpers/atoms/SystemBar.atom'
-
-const LoadModelErrorMessage = () => {
-  const { activeModel } = useActiveModel()
-  const availableRam = useAtomValue(totalRamAtom)
-
-  return (
-    <>
-      <div className="mt-10 flex flex-col items-center">
-        <span className="mb-3 text-center text-sm font-medium text-gray-500">
-          {Number(activeModel?.metadata.size) > availableRam ? (
-            <>
-              Oops! Model size exceeds available RAM. Consider selecting a
-              smaller model or upgrading your RAM for smoother performance.
-            </>
-          ) : (
-            <>
-              <p>Apologies, something&apos;s amiss!</p>
-              Jan&apos;s in beta. Find troubleshooting guides{' '}
-              <a
-                href="https://jan.ai/guides/troubleshooting"
-                target="_blank"
-                className="text-blue-600 hover:underline dark:text-blue-300"
-              >
-                here
-              </a>{' '}
-              or reach out to us on{' '}
-              <a
-                href="https://discord.gg/AsJ8krTT3N"
-                target="_blank"
-                className="text-blue-600 hover:underline dark:text-blue-300"
-              >
-                Discord
-              </a>{' '}
-              for assistance.
-            </>
-          )}
-        </span>
-      </div>
-    </>
-  )
-}
-export default LoadModelErrorMessage

web/screens/Chat/index.tsx

@@ -20,7 +20,7 @@ import { snackbar } from '@/containers/Toast'
 
 import { FeatureToggleContext } from '@/context/FeatureToggle'
 
-import { activeModelAtom, loadModelErrorAtom } from '@/hooks/useActiveModel'
+import { activeModelAtom } from '@/hooks/useActiveModel'
 import { queuedMessageAtom, reloadModelAtom } from '@/hooks/useSendChatMessage'
 
 import ChatBody from '@/screens/Chat/ChatBody'
@@ -28,7 +28,6 @@ import ChatBody from '@/screens/Chat/ChatBody'
 import ThreadList from '@/screens/Chat/ThreadList'
 
 import ChatInput from './ChatInput'
-import LoadModelErrorMessage from './LoadModelErrorMessage'
 import RequestDownloadModel from './RequestDownloadModel'
 import Sidebar from './Sidebar'
 
@@ -70,7 +69,6 @@ const ChatScreen: React.FC = () => {
   const activeModel = useAtomValue(activeModelAtom)
 
   const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
-  const loadModelError = useAtomValue(loadModelErrorAtom)
 
   const { getRootProps, isDragReject } = useDropzone({
     noClick: true,
@@ -213,7 +211,6 @@ const ChatScreen: React.FC = () => {
           )}
 
           {activeModel && isGeneratingResponse && <GenerateResponse />}
-          {loadModelError && <LoadModelErrorMessage />}
           <ChatInput />
         </div>
       </div>