From b5f2a04ea29d4342f6e43790e9496a1fbaeac1bb Mon Sep 17 00:00:00 2001
From: "sp.wack" <83104063+amanape@users.noreply.github.com>
Date: Wed, 28 May 2025 17:23:14 +0400
Subject: [PATCH] Add refill link to out-of-credits error message (#8737)

Co-authored-by: openhands <openhands@all-hands.dev>
---
 .../features/chat/chat-interface.tsx          |  7 +----
 .../features/chat/error-message-banner.tsx    | 22 +++++++++++++-
 frontend/src/i18n/translation.json            | 30 +++++++++----------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/features/chat/chat-interface.tsx b/frontend/src/components/features/chat/chat-interface.tsx
index fbcf31a400..9cc2c214bc 100644
--- a/frontend/src/components/features/chat/chat-interface.tsx
+++ b/frontend/src/components/features/chat/chat-interface.tsx
@@ -26,7 +26,6 @@ import { downloadTrajectory } from "#/utils/download-trajectory";
 import { displayErrorToast } from "#/utils/custom-toast-handlers";
 import { useOptimisticUserMessage } from "#/hooks/use-optimistic-user-message";
 import { useWSErrorMessage } from "#/hooks/use-ws-error-message";
-import i18n from "#/i18n";
 import { ErrorMessageBanner } from "./error-message-banner";
 import { shouldRenderEvent } from "./event-content-helpers/should-render-event";
 
@@ -181,11 +180,7 @@ export function ChatInterface() {
           {!hitBottom && <ScrollToBottomButton onClick={scrollDomToBottom} />}
         </div>
 
-        {errorMessage && (
-          <ErrorMessageBanner
-            message={i18n.exists(errorMessage) ? t(errorMessage) : errorMessage}
-          />
-        )}
+        {errorMessage && <ErrorMessageBanner message={errorMessage} />}
 
         <InteractiveChatBox
           onSubmit={handleSendMessage}
diff --git a/frontend/src/components/features/chat/error-message-banner.tsx b/frontend/src/components/features/chat/error-message-banner.tsx
index 20c9ca5b0e..36876ab7e3 100644
--- a/frontend/src/components/features/chat/error-message-banner.tsx
+++ b/frontend/src/components/features/chat/error-message-banner.tsx
@@ -1,3 +1,7 @@
+import { Trans } from "react-i18next";
+import { Link } from "react-router";
+import i18n from "#/i18n";
+
 interface ErrorMessageBannerProps {
   message: string;
 }
@@ -5,7 +9,23 @@ interface ErrorMessageBannerProps {
 export function ErrorMessageBanner({ message }: ErrorMessageBannerProps) {
   return (
     <div className="w-full rounded-lg p-2 text-black border border-red-800 bg-red-500">
-      {message}
+      {i18n.exists(message) ? (
+        <Trans
+          i18nKey={message}
+          components={{
+            a: (
+              <Link
+                className="underline font-bold cursor-pointer"
+                to="/settings/billing"
+              >
+                link
+              </Link>
+            ),
+          }}
+        />
+      ) : (
+        message
+      )}
     </div>
   );
 }
diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
index 4af617a8ef..f2d01274c5 100644
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -6400,20 +6400,20 @@
         "uk": "Запит не вдалося виконати через внутрішню помилку сервера."
     },
     "STATUS$ERROR_LLM_OUT_OF_CREDITS": {
-        "en": "You're out of OpenHands Credits",
-        "ja": "OpenHandsクレジットが不足しています",
-        "zh-CN": "您的OpenHands点数已用完",
-        "zh-TW": "您的OpenHands點數已用完",
-        "ko-KR": "OpenHands 크레딧이 소진되었습니다",
-        "no": "Du er tom for OpenHands-kreditter",
-        "it": "Hai esaurito i crediti OpenHands",
-        "pt": "Você está sem créditos OpenHands",
-        "es": "Te has quedado sin créditos de OpenHands",
-        "ar": "لقد نفدت رصيدك من OpenHands",
-        "fr": "Vous n'avez plus de crédits OpenHands",
-        "tr": "OpenHands kredileriniz tükendi",
-        "de": "Ihre OpenHands-Guthaben sind aufgebraucht",
-        "uk": "У вас закінчилися кредити OpenHands"
+        "en": "You're out of OpenHands Credits. <a>Add funds</a>",
+        "ja": "OpenHandsクレジットが不足しています。<a>資金を追加</a>",
+        "zh-CN": "您的OpenHands点数已用完。<a>添加资金</a>",
+        "zh-TW": "您的OpenHands點數已用完。<a>添加資金</a>",
+        "ko-KR": "OpenHands 크레딧이 소진되었습니다. <a>자금 추가</a>",
+        "no": "Du er tom for OpenHands-kreditter. <a>Legg til midler</a>",
+        "it": "Hai esaurito i crediti OpenHands. <a>Aggiungi fondi</a>",
+        "pt": "Você está sem créditos OpenHands. <a>Adicionar fundos</a>",
+        "es": "Te has quedado sin créditos de OpenHands. <a>Añadir fondos</a>",
+        "ar": "لقد نفدت رصيدك من OpenHands. <a>إضافة رصيد</a>",
+        "fr": "Vous n'avez plus de crédits OpenHands. <a>Ajouter des fonds</a>",
+        "tr": "OpenHands kredileriniz tükendi. <a>Bakiye ekle</a>",
+        "de": "Ihre OpenHands-Guthaben sind aufgebraucht. <a>Guthaben hinzufügen</a>",
+        "uk": "У вас закінчилися кредити OpenHands. <a>Додати кошти</a>"
     },
     "STATUS$ERROR_LLM_CONTENT_POLICY_VIOLATION": {
         "en": "Content policy violation. The output was blocked by content filtering policy.",
@@ -8780,7 +8780,7 @@
         "ar": "إرسال...",
         "fr": "Envoi...",
         "tr": "Gönderiliyor...",
-        "de": "Senden...",  
+        "de": "Senden...",
         "uk": "Відправляємо..."
     },
     "FEEDBACK$SUBMITTING_MESSAGE": {