Merge pull request #3405 from RedisInsight/fe/feature/RI-5758

#RI-5758 - handle limit errors

Author: vlad-dargel

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.spec.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { render, screen } from 'uiSrc/utils/test-utils'
 
-import { AiChatErrors } from 'uiSrc/constants/apiErrors'
+import { AI_CHAT_ERRORS } from 'uiSrc/constants/apiErrors'
+import { CustomErrorCodes } from 'uiSrc/constants'
 import ErrorMessage from './ErrorMessage'
 
 describe('ErrorMessage', () => {
@@ -13,17 +14,46 @@ describe('ErrorMessage', () => {
     const onRestart = jest.fn()
     render(<ErrorMessage onRestart={onRestart} error={{ statusCode: 404 }} />)
 
-    expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AiChatErrors.Default)
+    expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AI_CHAT_ERRORS.default())
     expect(screen.getByTestId('ai-chat-error-report-link')).toBeInTheDocument()
 
     expect(screen.getByTestId('ai-chat-error-restart-session-btn')).toBeInTheDocument()
+    expect(screen.getByTestId('ai-chat-error-report-link')).toBeInTheDocument()
+  })
+
+  it('should render rate limit error', () => {
+    const error = {
+      errorCode: CustomErrorCodes.AiQueryRateLimitRequest,
+      statusCode: 429,
+      details: { limiterType: 'request', limiterKind: 'user', limiterSeconds: 100 }
+    }
+    render(<ErrorMessage onRestart={jest.fn} error={error} />)
+
+    expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AI_CHAT_ERRORS.rateLimit(100))
+
+    expect(screen.queryByTestId('ai-chat-error-restart-session-btn')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('ai-chat-error-report-link')).not.toBeInTheDocument()
+  })
+
+  it('should render tokens limit error', () => {
+    const error = {
+      errorCode: CustomErrorCodes.AiQueryRateLimitMaxTokens,
+      statusCode: 413,
+      details: { tokenLimit: 20000, tokenCount: 575 }
+    }
+    render(<ErrorMessage onRestart={jest.fn} error={error} />)
+
+    expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AI_CHAT_ERRORS.tokenLimit())
+
+    expect(screen.getByTestId('ai-chat-error-restart-session-btn')).toBeInTheDocument()
+    expect(screen.queryByTestId('ai-chat-error-report-link')).not.toBeInTheDocument()
   })
 
   it('should not render restart button with timeout error', () => {
     const onRestart = jest.fn()
     render(<ErrorMessage onRestart={onRestart} error={{ statusCode: 408 }} />)
 
-    expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AiChatErrors.Timeout)
+    expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AI_CHAT_ERRORS.timeout())
     expect(screen.getByTestId('ai-chat-error-report-link')).toBeInTheDocument()
 
     expect(screen.queryByTestId('ai-chat-error-restart-session-btn')).not.toBeInTheDocument()

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.tsx

@@ -3,48 +3,80 @@ import { EuiButton } from '@elastic/eui'
 
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { CustomErrorCodes } from 'uiSrc/constants'
-import { AiChatErrors } from 'uiSrc/constants/apiErrors'
+import { AI_CHAT_ERRORS } from 'uiSrc/constants/apiErrors'
 import ApiStatusCode from 'uiSrc/constants/apiStatusCode'
 
 import RestartChat from '../restart-chat'
 
 import styles from './styles.module.scss'
 
 export interface Props {
-  error?: { statusCode: number, errorCode?: number }
+  error?: {
+    statusCode: number
+    errorCode?: number
+    details?: Record<string, any>
+  }
   onRestart: () => void
 }
 
+const ERROR_CODES_WITHOUT_RESTART = [
+  CustomErrorCodes.CloudApiUnauthorized,
+  CustomErrorCodes.GeneralAiUnexpectedError,
+  CustomErrorCodes.AiQueryRateLimitRequest,
+  CustomErrorCodes.AiQueryRateLimitToken,
+]
+
+const ERROR_CODES_WITHOUT_REPORT_ISSUE = [
+  CustomErrorCodes.AiQueryRateLimitRequest,
+  CustomErrorCodes.AiQueryRateLimitToken,
+  CustomErrorCodes.AiQueryRateLimitMaxTokens,
+]
+
 const ErrorMessage = (props: Props) => {
   const { error, onRestart } = props
 
-  const getErrorMessage = (error?: { statusCode: number, errorCode?: number }): string => {
-    if (error?.statusCode === ApiStatusCode.Timeout) return AiChatErrors.Timeout
-    if (error?.errorCode === CustomErrorCodes.GeneralAiUnexpectedError) return AiChatErrors.DefaultUnexpected
+  const getErrorMessage = (
+    error?: {
+      statusCode: number,
+      errorCode?: number,
+      details?: Record<string, any> }
+  ): string => {
+    const { statusCode, errorCode, details } = error || {}
 
-    return AiChatErrors.Default
+    if (statusCode === ApiStatusCode.Timeout) return AI_CHAT_ERRORS.timeout()
+    if (errorCode === CustomErrorCodes.GeneralAiUnexpectedError) return AI_CHAT_ERRORS.unexpected()
+    if (errorCode === CustomErrorCodes.AiQueryRateLimitRequest
+      || errorCode === CustomErrorCodes.AiQueryRateLimitToken
+    ) return AI_CHAT_ERRORS.rateLimit(details?.limiterSeconds)
+    if (errorCode === CustomErrorCodes.AiQueryRateLimitMaxTokens) return AI_CHAT_ERRORS.tokenLimit()
+
+    return AI_CHAT_ERRORS.default()
   }
 
   if (!error) return null
 
-  const isShowRestart = error.errorCode !== CustomErrorCodes.CloudApiUnauthorized
-    && error.errorCode !== CustomErrorCodes.GeneralAiUnexpectedError
+  const isShowRestart = !(error.errorCode && ERROR_CODES_WITHOUT_RESTART.includes(error.errorCode))
     && error.statusCode !== ApiStatusCode.Timeout
+  const isShowReportIssue = !(error.errorCode && ERROR_CODES_WITHOUT_REPORT_ISSUE.includes(error.errorCode))
 
   return (
     <>
       <div className={styles.errorMessage} data-testid="ai-chat-error-message">
         {getErrorMessage(error)}
-        {' '}
-        <a
-          className="link-underline"
-          href={EXTERNAL_LINKS.githubIssues}
-          data-testid="ai-chat-error-report-link"
-          target="_blank"
-          rel="noreferrer"
-        >
-          report the issue
-        </a>
+        {isShowReportIssue && (
+          <>
+            {' '}
+            <a
+              className="link-underline"
+              href={EXTERNAL_LINKS.githubIssues}
+              data-testid="ai-chat-error-report-link"
+              target="_blank"
+              rel="noreferrer"
+            >
+              report the issue
+            </a>
+          </>
+        )}
       </div>
       {isShowRestart && (
         <RestartChat

redisinsight/ui/src/constants/apiErrors.ts

@@ -13,11 +13,12 @@ export const ApiEncryptionErrors: string[] = [
   ApiErrors.KeytarDecryption,
 ]
 
-export enum AiChatErrors {
-  Default = 'An error occurred. Try again or restart the session.',
-  DefaultUnexpected = 'An unexpected error occurred. Try again later.',
-  Timeout = 'Timeout occurred. Try again later.',
-  CloudAuthorization = 'Session expired. Login and try again'
+export const AI_CHAT_ERRORS = {
+  default: () => 'An error occurred. Try again or restart the session.',
+  unexpected: () => 'An unexpected error occurred. Try again later.',
+  timeout: () => 'Timeout occurred. Try again later.',
+  rateLimit: (limit = 5000) => `Exceeded rate limit. Try again in ${limit} seconds.`,
+  tokenLimit: () => 'Conversation is too long. Restart the session.'
 }
 
 export default ApiErrors

redisinsight/ui/src/constants/customErrorCodes.ts

@@ -48,5 +48,9 @@ export enum CustomErrorCodes {
   QueryAiBadRequest = 11_353,
   QueryAiNotFound = 11_354,
 
+  AiQueryRateLimitRequest = 11_360,
+  AiQueryRateLimitToken = 11_361,
+  AiQueryRateLimitMaxTokens = 11362,
+
   GeneralAiUnexpectedError = 11_391
 }

redisinsight/ui/src/utils/api/chatbots.ts

@@ -35,8 +35,11 @@ export const getStreamedAnswer = async (
     const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader()
     if (!isStatusSuccessful(response.status)) {
       const { value } = await reader.read()
+
+      const errorResponse = value ? JSON.parse(value) : {}
       const extendedResponseError = {
-        errorCode: value ? JSON.parse(value).errorCode : ''
+        errorCode: errorResponse.errorCode ?? '',
+        details: errorResponse.details ?? {}
       }
       const error = Object.assign(response, extendedResponseError)
       onError?.(error)