fix: proper error message display

web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx

@@ -61,16 +61,12 @@ const ChatBody = memo(
       <ListContainer>
         {messages.map((message, index) => (
           <div key={message.id}>
-            {message.status !== MessageStatus.Error && (
+            <ChatItem
-              <ChatItem {...message} key={message.id} />
+              {...message}
-            )}
+              key={message.id}
-
+              loadModelError={loadModelError}
-            {!loadModelError &&
+              isCurrentMessage={index === messages.length - 1}
-              index === messages.length - 1 &&
+            />
-              message.status !== MessageStatus.Pending &&
-              message.status !== MessageStatus.Ready && (
-                <ErrorMessage message={message} />
-              )}
           </div>
         ))}
 

web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx

@@ -8,21 +8,39 @@ import {
   ThreadMessage,
 } from '@janhq/core'
 
+import ErrorMessage from '@/containers/ErrorMessage'
+
 import SimpleTextMessage from '../SimpleTextMessage'
 
 type Ref = HTMLDivElement
 
-const ChatItem = forwardRef<Ref, ThreadMessage>((message, ref) => {
+type Props = {
+  loadModelError?: string
+  isCurrentMessage?: boolean
+} & ThreadMessage
+
+const ChatItem = forwardRef<Ref, Props>((message, ref) => {
   const [content, setContent] = useState<ThreadContent[]>(message.content)
   const [status, setStatus] = useState<MessageStatus>(message.status)
+  const [errorMessage, setErrorMessage] = useState<ThreadMessage | undefined>(
+    message.isCurrentMessage && message.status === MessageStatus.Error
+      ? message
+      : undefined
+  )
 
   function onMessageUpdate(data: ThreadMessage) {
     if (data.id === message.id) {
       setContent(data.content)
       if (data.status !== status) setStatus(data.status)
+      if (data.status === MessageStatus.Error && message.isCurrentMessage)
+        setErrorMessage(data)
     }
   }
 
+  useEffect(() => {
+    if (!message.isCurrentMessage && errorMessage) setErrorMessage(undefined)
+  }, [message, errorMessage])
+
   useEffect(() => {
     if (message.status === MessageStatus.Pending)
       events.on(MessageEvent.OnMessageUpdate, onMessageUpdate)
@@ -33,9 +51,16 @@ const ChatItem = forwardRef<Ref, ThreadMessage>((message, ref) => {
   }, [])
 
   return (
+    <>
+      {status !== MessageStatus.Error && content.length > 0 && (
         <div ref={ref} className="relative">
           <SimpleTextMessage {...message} content={content} status={status} />
         </div>
+      )}
+      {errorMessage && !message.loadModelError && (
+        <ErrorMessage message={errorMessage} />
+      )}
+    </>
   )
 })