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

…2242) Signed-off-by: James <[email protected]> Co-authored-by: James <[email protected]>
janhq · henryh0x1 · Mar 7, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 6, 2024
commit 510491253cdd9eb3c4dabfe321554c6236f3128a
diff --git a/core/src/types/message/messageEntity.ts b/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.
  */

diff --git a/extensions/inference-openai-extension/src/helpers/sse.ts b/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
  }

diff --git a/extensions/inference-openai-extension/src/index.ts b/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)
  },
  })

diff --git a/web/screens/Chat/ChatBody/index.tsx b/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 && (

diff --git a/web/screens/Chat/ErrorMessage/index.tsx b/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

diff --git a/web/utils/errorMessage.ts b/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.'
  }
 }