feat: handle rate limit error case (#132)

Author: likeamike

apps/portals-example/src/components/configs/TextsConfig/TextsConfig.tsx

@@ -4,9 +4,11 @@ import {
   ConversationViewMessages,
   ConversationViewMessagesProvider,
 } from '@epam/statgpt-conversation-view';
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo } from 'react';
 import { TranslateI18nFn, useI18n } from '../../../locales/client';
 import { StatusMessagesI18nKeys } from '../../../constants/i18n-keys';
+import { ExceededLimit } from '@epam/statgpt-dial-toolkit';
+import { getExceededLimitsMessage } from '@statgpt/portals-example/src/utils/rate-limits';
 
 export const TextsConfig = ({
   children,
@@ -41,12 +43,28 @@ export const TextsConfig = ({
     return t(StatusMessagesI18nKeys.CONTENT_FILTER_ERROR, { link: href });
   }, [azureContentManagementPolicyUrl, t]);
 
+  const getAssistantRestoreMessage = useCallback(
+    (date: string, time: string) =>
+      t(StatusMessagesI18nKeys.ASSISTANT_ACCESS_RESTORE_DATETIME, {
+        date,
+        time,
+      }),
+    [t],
+  );
+
+  const getLimitsExceededMessage = useCallback(
+    (limits: ExceededLimit[]) => getExceededLimitsMessage(limits, t),
+    [t],
+  );
+
   const conversationViewMessagesCustomConfig: ConversationViewMessages = {
     statusMessages: {
       contentFilterError,
       assistantUnavailable,
       serverError: t(StatusMessagesI18nKeys.SERVER_ERROR),
       serverOverloaded: t(StatusMessagesI18nKeys.SERVER_OVERLOADED),
+      getExceededLimitsMessage: getLimitsExceededMessage,
+      getAssistantRestoreMessage,
     },
   };
 

apps/portals-example/src/constants/i18n-keys.ts

@@ -126,6 +126,7 @@ export enum StatusMessagesI18nKeys {
   SERVER_ERROR = 'statusMessages.serverError',
   SERVER_OVERLOADED = 'statusMessages.serverOverloaded',
   CONTENT_FILTER_ERROR = 'statusMessages.contentFilterError',
+  ASSISTANT_ACCESS_RESTORE_DATETIME = 'statusMessages.rateLimit.assistantAccessRestoreDateTime',
 }
 
 export enum AttachmentsI18nKeys {

apps/portals-example/src/locales/en/common.json

@@ -167,6 +167,25 @@
     "contactSupport": "contact Support",
     "serverError": "We couldn't process your request due to a server error. Please try again later.",
     "serverOverloaded": "The system is currently overloaded. Please try again later.",
-    "contentFilterError": "This request is blocked in accordance with the Azure OpenAI content management policy {link}"
+    "contentFilterError": "This request is blocked in accordance with the Azure OpenAI content management policy {link}",
+    "rateLimit": {
+      "assistantAccessRestoreDateTime": "Access to the AI Assistant will be restored on {date} at {time}",
+      "limit": {
+        "minute": "minute",
+        "daily": "daily",
+        "weekly": "weekly",
+        "monthly": "monthly"
+      },
+      "list": {
+        "two": "{first} and {second}",
+        "many": "{items}, and {last}"
+      },
+      "message": {
+        "exceeded": {
+          "one": "The {limits} token limit has been exceeded.",
+          "many": "The {limits} token limits have been exceeded."
+        }
+      }
+    }
   }
 }

apps/portals-example/src/utils/rate-limits.ts

@@ -0,0 +1,64 @@
+import {
+  EXCEEDED_LIMIT_ORDER,
+  ExceededLimit,
+} from '@epam/statgpt-dial-toolkit';
+
+function uniqExceededLimits(limits: ExceededLimit[]): ExceededLimit[] {
+  return [...new Set(limits)];
+}
+
+function sortExceededLimits(limits: ExceededLimit[]): ExceededLimit[] {
+  return [...limits].sort(
+    (a, b) => EXCEEDED_LIMIT_ORDER.indexOf(a) - EXCEEDED_LIMIT_ORDER.indexOf(b),
+  );
+}
+
+function formatExceededLimitsList(
+  limits: ExceededLimit[],
+  t: (key: string, params?: Record<string, string>) => string,
+): string {
+  const labels = sortExceededLimits(uniqExceededLimits(limits)).map((limit) =>
+    t(`statusMessages.rateLimit.limit.${limit}`),
+  );
+
+  if (labels.length === 0) {
+    return '';
+  }
+
+  if (labels.length === 1) {
+    return labels[0];
+  }
+
+  if (labels.length === 2) {
+    return t('statusMessages.rateLimit.list.two', {
+      first: labels[0],
+      second: labels[1],
+    });
+  }
+
+  return t('statusMessages.rateLimit.list.many', {
+    items: labels.slice(0, -1).join(', '),
+    last: labels[labels.length - 1],
+  });
+}
+
+export function getExceededLimitsMessage(
+  limits: ExceededLimit[],
+  t: (key: string, params?: Record<string, string>) => string,
+): string {
+  const normalizedLimits = sortExceededLimits(uniqExceededLimits(limits));
+  const formattedLimits = formatExceededLimitsList(normalizedLimits, t);
+
+  if (!formattedLimits) {
+    return '';
+  }
+
+  return t(
+    normalizedLimits.length === 1
+      ? 'statusMessages.rateLimit.message.exceeded.one'
+      : 'statusMessages.rateLimit.message.exceeded.many',
+    {
+      limits: formattedLimits,
+    },
+  );
+}

libs/conversation-list/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "dependencies": {
     "@tabler/icons-react": "^3.34.1",
-    "@epam/ai-dial-shared": "^0.34.0",
+    "@epam/ai-dial-shared": "^0.43.3",
     "@epam/statgpt-ui-components": "*",
     "classnames": "^2.5.1",
     "@epam/statgpt-shared-toolkit": "*",

libs/conversation-view/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "^2.5.1",
-    "@epam/ai-dial-shared": "^0.34.0",
+    "@epam/ai-dial-shared": "^0.43.3",
     "@tabler/icons-react": "^3.34.1",
     "@epam/statgpt-shared-toolkit": "*",
     "@epam/statgpt-ui-components": "*",

libs/conversation-view/src/components/ChatMessages/ChatMessages.tsx

@@ -24,7 +24,11 @@ import {
   InlineAlert,
   InlineAlertType,
 } from '@epam/statgpt-ui-components';
-import { Message as MessageType } from '@epam/statgpt-dial-toolkit';
+import {
+  CustomViewState,
+  ERROR_CONTEXT_KIND,
+  Message as MessageType,
+} from '@epam/statgpt-dial-toolkit';
 import {
   DataQuery,
   FormatNumbersType,
@@ -72,13 +76,15 @@ interface Props {
   isReadOnlyConversation?: boolean;
   limitMessages: LimitMessages;
   attachmentsConfig?: AttachmentsConfig;
+  conversationViewState?: CustomViewState;
 }
 
 const ChatMessages: FC<Props> = ({
   messages,
   isStreaming = false,
   isReadOnly,
   scrollBottomIcon,
+  conversationViewState,
   ...props
 }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -178,8 +184,14 @@ const ChatMessages: FC<Props> = ({
           const key = message.id ?? index;
 
           if (message.errorMessage) {
+            const type =
+              conversationViewState?.errorContext?.kind ===
+              ERROR_CONTEXT_KIND.RATE_LIMIT
+                ? InlineAlertType.Warning
+                : InlineAlertType.Error;
+
             return (
-              <InlineAlert key={key} type={InlineAlertType.Error}>
+              <InlineAlert key={key} type={type}>
                 <div className="flex flex-col">
                   {processErrorMessage(message.errorMessage)}
                 </div>