fix: error message display

janhq · Dec 19, 2024 · 194a9ba · 194a9ba
1 parent 5f2556a
commit 194a9ba
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 19 deletions.
diff --git a/web/containers/ErrorMessage/index.tsx b/web/containers/ErrorMessage/index.tsx
@@ -53,7 +53,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   const getErrorTitle = () => {
     const engine = getEngine()
 
-    switch (message.error_code) {
+    switch (message.metadata?.error_code) {
       case ErrorCode.InvalidApiKey:
       case ErrorCode.AuthenticationError:
         return (
@@ -102,7 +102,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
 
   return (
     <div className="mx-auto my-6 max-w-[700px]">
-      {message.status === MessageStatus.Error && (
+      {!!message.metadata?.error && (
         <div
           key={message.id}
           className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]"

diff --git a/web/containers/Providers/ModelHandler.tsx b/web/containers/Providers/ModelHandler.tsx
@@ -257,6 +257,14 @@ export default function ModelHandler() {
           ...thread,
           metadata,
         })
+
+      if (message.status === MessageStatus.Error) {
+        message.metadata = {
+          ...message.metadata,
+          error: message.content[0]?.text?.value,
+          error_code: message.error_code,
+        }
+      }
       ;(async () => {
         const updatedMessage = await extensionManager
           .get<ConversationalExtension>(ExtensionTypeEnum.Conversational)

diff --git a/web/helpers/atoms/ChatMessage.atom.ts b/web/helpers/atoms/ChatMessage.atom.ts
@@ -141,7 +141,7 @@ export const deleteMessageAtom = atom(null, (get, set, id: string) => {
   if (threadId) {
     // Should also delete error messages to clear out the error state
     newData[threadId] = newData[threadId].filter(
-      (e) => e.id !== id && e.status !== MessageStatus.Error
+      (e) => e.id !== id && !e.metadata?.error
     )
 
     set(chatMessages, newData)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
@@ -23,9 +23,7 @@ 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
+    message.isCurrentMessage && !!message?.metadata?.error ? message : undefined
   )
 
   function onMessageUpdate(data: ThreadMessage) {
@@ -52,16 +50,18 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
 
   return (
     <>
-      {status !== MessageStatus.Error && content?.length > 0 && (
-        <div ref={ref} className="relative">
-          <MessageContainer
-            {...message}
-            content={content}
-            status={status}
-            isCurrentMessage={message.isCurrentMessage ?? false}
-          />
-        </div>
-      )}
+      {status !== MessageStatus.Error &&
+        !message.metadata?.error &&
+        content?.length > 0 && (
+          <div ref={ref} className="relative">
+            <MessageContainer
+              {...message}
+              content={content}
+              status={status}
+              isCurrentMessage={message.isCurrentMessage ?? false}
+            />
+          </div>
+        )}
       {errorMessage && !message.loadModelError && (
         <ErrorMessage message={errorMessage} />
       )}

diff --git a/web/screens/Thread/ThreadCenterPanel/MessageToolbar/index.tsx b/web/screens/Thread/ThreadCenterPanel/MessageToolbar/index.tsx
@@ -109,7 +109,7 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
           )}
 
         {message.id === messages[messages.length - 1]?.id &&
-          messages[messages.length - 1].status !== MessageStatus.Error &&
+          !messages[messages.length - 1]?.metadata?.error &&
           !messages[messages.length - 1].attachments?.length && (
             <div
               className="cursor-pointer rounded-lg border border-[hsla(var(--app-border))] p-2"

diff --git a/web/utils/messageRequestBuilder.ts b/web/utils/messageRequestBuilder.ts
@@ -6,7 +6,6 @@ import {
   ChatCompletionRole,
   MessageRequest,
   MessageRequestType,
-  MessageStatus,
   ModelInfo,
   Thread,
   ThreadMessage,
@@ -35,7 +34,7 @@ export class MessageRequestBuilder {
     this.model = model
     this.thread = thread
     this.messages = messages
-      .filter((e) => e.status !== MessageStatus.Error)
+      .filter((e) => !e.metadata?.error)
       .map<ChatCompletionMessage>((msg) => ({
         role: msg.role,
         content: msg.content[0]?.text?.value ?? '.',