fix: error message being sent along with conversation when inference (#2242)

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

core/src/types/message/messageEntity.ts

@@ -29,6 +29,9 @@ export type ThreadMessage = {
   metadata?: Record<string, unknown>
 
   type?: string
+
+  /** The error code which explain what error type. Used in conjunction with MessageStatus.Error */
+  error_code?: ErrorCode
 }
 
 /**
@@ -77,6 +80,12 @@ export enum MessageStatus {
   Stopped = 'stopped',
 }
 
+export enum ErrorCode {
+  InvalidApiKey = 'invalid_api_key',
+
+  Unknown = 'unknown',
+}
+
 /**
  * The content type of the message.
  */

extensions/inference-openai-extension/src/helpers/sse.ts

@@ -1,3 +1,4 @@
+import { ErrorCode } from '@janhq/core'
 import { Observable } from 'rxjs'
 
 /**
@@ -40,9 +41,12 @@ export function requestInference(
     })
       .then(async (response) => {
         if (!response.ok) {
-          subscriber.next(
-            (await response.json()).error?.message ?? 'Error occurred.'
-          )
+          const data = await response.json()
+          const error = {
+            message: data.error?.message ?? 'Error occurred.',
+            code: data.error?.code ?? ErrorCode.Unknown,
+          }
+          subscriber.error(error)
           subscriber.complete()
           return
         }

extensions/inference-openai-extension/src/index.ts

@@ -216,6 +216,7 @@ export default class JanInferenceOpenAIExtension extends BaseExtension {
         }
         message.content = [messageContent]
         message.status = MessageStatus.Error
+        message.error_code = err.code
         events.emit(MessageEvent.OnMessageUpdate, message)
       },
     })

web/screens/Chat/ChatBody/index.tsx

@@ -78,11 +78,11 @@ const ChatBody: React.FC = () => {
         <ScrollToBottom className="flex h-full w-full flex-col">
           {messages.map((message, index) => (
             <div key={message.id}>
-              {((message.status !== MessageStatus.Error &&
-                message.status !== MessageStatus.Pending) ||
-                message.content.length > 0) && (
-                <ChatItem {...message} key={message.id} />
-              )}
+              {message.status !== MessageStatus.Error &&
+                message.content.length > 0 && (
+                  <ChatItem {...message} key={message.id} />
+                )}
+
               {(message.status === MessageStatus.Error ||
                 message.status === MessageStatus.Stopped) &&
                 index === messages.length - 1 && (

web/screens/Chat/ErrorMessage/index.tsx

@@ -1,4 +1,4 @@
-import { MessageStatus, ThreadMessage } from '@janhq/core'
+import { ErrorCode, MessageStatus, ThreadMessage } from '@janhq/core'
 import { Button } from '@janhq/uikit'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { RefreshCcw } from 'lucide-react'
@@ -10,6 +10,8 @@ import ModalTroubleShooting, {
 import { loadModelErrorAtom } from '@/hooks/useActiveModel'
 import useSendChatMessage from '@/hooks/useSendChatMessage'
 
+import { getErrorTitle } from '@/utils/errorMessage'
+
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
 const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
@@ -25,6 +27,8 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
     resendChatMessage(message)
   }
 
+  const errorTitle = getErrorTitle(message.error_code ?? ErrorCode.Unknown)
+
   return (
     <div className="mt-10">
       {message.status === MessageStatus.Stopped && (
@@ -68,7 +72,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
               key={message.id}
               className="flex flex-col items-center text-center text-sm font-medium text-gray-500"
             >
-              <p>{`Apologies, something’s amiss!`}</p>
+              <p>{errorTitle}</p>
               <p>
                 Jan’s in beta. Access&nbsp;
                 <span

web/utils/errorMessage.ts

@@ -0,0 +1,11 @@
+import { ErrorCode } from '@janhq/core'
+
+export const getErrorTitle = (errorCode: ErrorCode) => {
+  if (errorCode === ErrorCode.Unknown) {
+    return 'Apologies, something’s amiss!'
+  }
+
+  if (errorCode === ErrorCode.InvalidApiKey) {
+    return 'Invalid API key. Please check your API key and try again.'
+  }
+}