fix: show default error message from inference engine (#2533)

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

core/src/browser/extensions/engines/OAIEngine.ts

@@ -100,12 +100,20 @@ export abstract class OAIEngine extends AIEngine {
         events.emit(MessageEvent.OnMessageUpdate, message)
       },
       error: async (err: any) => {
+        console.error(`Inference error: ${JSON.stringify(err, null, 2)}`)
         if (this.isCancelled || message.content.length) {
           message.status = MessageStatus.Stopped
           events.emit(MessageEvent.OnMessageUpdate, message)
           return
         }
         message.status = MessageStatus.Error
+        message.content[0] = {
+          type: ContentType.Text,
+          text: {
+            value: err.message,
+            annotations: [],
+          },
+        }
         message.error_code = err.code
         events.emit(MessageEvent.OnMessageUpdate, message)
       },

core/src/types/message/messageEntity.ts

@@ -83,6 +83,8 @@ export enum MessageStatus {
 export enum ErrorCode {
   InvalidApiKey = 'invalid_api_key',
 
+  InsufficientQuota = 'insufficient_quota',
+
   Unknown = 'unknown',
 }
 

web/containers/AutoLink/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+type Props = {
+  text: string
+}
+
+const AutoLink: React.FC<Props> = ({ text }) => {
+  const delimiter =
+    /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9-]{1,61}[a-z0-9])?\.[^.|\s])+[a-z.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_/~#&=;%+?\-\\(\\)]*)/gi
+
+  return (
+    <>
+      {text.split(delimiter).map((word) => {
+        const match = word.match(delimiter)
+        if (match) {
+          const url = match[0]
+          return (
+            <a
+              key={url}
+              target="blank"
+              href={url.startsWith('http') ? url : `http://${url}`}
+              className="text-blue-400"
+            >
+              {url}
+            </a>
+          )
+        }
+        return word
+      })}
+    </>
+  )
+}
+
+export default React.memo(AutoLink)

web/screens/Chat/ErrorMessage/index.tsx

@@ -3,6 +3,7 @@ import { Button } from '@janhq/uikit'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { RefreshCcw } from 'lucide-react'
 
+import AutoLink from '@/containers/AutoLink'
 import ModalTroubleShooting, {
   modalTroubleShootingAtom,
 } from '@/containers/ModalTroubleShoot'
@@ -31,10 +32,11 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
     resendChatMessage(message)
   }
 
-  const errorTitle = getErrorTitle(
+  const errorTitle =
-    message.error_code ?? ErrorCode.Unknown,
+    getErrorTitle(
-    message.content[0]?.text?.value
+      message.error_code ?? ErrorCode.Unknown,
-  )
+      message.content[0]?.text?.value
+    ) ?? 'Unknown error occurred.'
 
   return (
     <div className="mt-10">
@@ -95,9 +97,9 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
           ) : (
             <div
               key={message.id}
-              className="flex flex-col items-center text-center text-sm font-medium text-gray-500"
+              className="mx-6 flex flex-col items-center space-y-2 text-center text-sm font-medium text-gray-500"
             >
-              <p>{errorTitle}</p>
+              <AutoLink text={errorTitle} />
               <p>
                 Jan’s in beta. Access&nbsp;
                 <span