diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts
index 92bd91dc12..604157079f 100644
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@@ -408,6 +408,8 @@ export enum I18nKey {
SETTINGS$OPENHANDS_API_KEY_HELP = "SETTINGS$OPENHANDS_API_KEY_HELP",
SETTINGS$OPENHANDS_API_KEY_HELP_TEXT = "SETTINGS$OPENHANDS_API_KEY_HELP_TEXT",
SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX = "SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX",
+ SETTINGS$LLM_BILLING_INFO = "SETTINGS$LLM_BILLING_INFO",
+ SETTINGS$SEE_PRICING_DETAILS = "SETTINGS$SEE_PRICING_DETAILS",
SETTINGS$CREATE_API_KEY = "SETTINGS$CREATE_API_KEY",
SETTINGS$CREATE_API_KEY_DESCRIPTION = "SETTINGS$CREATE_API_KEY_DESCRIPTION",
SETTINGS$DELETE_API_KEY = "SETTINGS$DELETE_API_KEY",
diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
index 972aef07e7..ec7ee747c6 100644
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -6512,20 +6512,52 @@
"uk": "Ви можете знайти свій ключ API OpenHands у"
},
"SETTINGS$OPENHANDS_API_KEY_HELP_SUFFIX": {
- "en": "tab of OpenHands Cloud. LLM usage is billed at the providers' rates with no markup. Details: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "ja": "タブで確認できます。LLMの使用料金は、プロバイダーの料金でマークアップなしで請求されます。詳細: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "zh-CN": "标签页中找到您的OpenHands API密钥。LLM使用费用按提供商费率计费,无加价。详情: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "zh-TW": "標籤頁中找到您的OpenHands API密鑰。LLM使用費用按提供商費率計費,無加價。詳情: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "ko-KR": "탭에서 찾을 수 있습니다. LLM 사용료는 제공업체 요금으로 마크업 없이 청구됩니다. 자세한 내용: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "no": "-fanen i OpenHands Cloud. LLM-bruk faktureres til leverandørenes priser uten påslag. Detaljer: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "it": "scheda di OpenHands Cloud. L'utilizzo di LLM viene fatturato alle tariffe dei fornitori senza ricarico. Dettagli: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "pt": "guia do OpenHands Cloud. O uso de LLM é cobrado nas tarifas dos provedores sem markup. Detalhes: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "es": "pestaña de OpenHands Cloud. El uso de LLM se factura a las tarifas de los proveedores sin recargo. Detalles: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "ar": "علامة التبويب في OpenHands Cloud. يتم فوترة استخدام LLM بأسعار المزودين بدون زيادة. التفاصيل: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "fr": "l'onglet d'OpenHands Cloud. L'utilisation de LLM est facturée aux tarifs des fournisseurs sans majoration. Détails : https://docs.all-hands.dev/usage/llms/openhands-llms",
- "tr": "OpenHands Cloud'un sekmesinde bulabilirsiniz. LLM kullanımı, sağlayıcıların oranlarında ek ücret olmadan faturalandırılır. Ayrıntılar: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "de": "Tab von OpenHands Cloud. LLM-Nutzung wird zu Anbieterpreisen ohne Aufschlag abgerechnet. Details: https://docs.all-hands.dev/usage/llms/openhands-llms",
- "uk": "вкладці OpenHands Cloud. Використання LLM оплачується за тарифами провайдерів без надбавки. Деталі: https://docs.all-hands.dev/usage/llms/openhands-llms"
+ "en": "tab of OpenHands Cloud.",
+ "ja": "タブで確認できます。",
+ "zh-CN": "标签页中找到您的OpenHands API密钥。",
+ "zh-TW": "標籤頁中找到您的OpenHands API密鑰。",
+ "ko-KR": "탭에서 찾을 수 있습니다.",
+ "no": "-fanen i OpenHands Cloud.",
+ "it": "scheda di OpenHands Cloud.",
+ "pt": "guia do OpenHands Cloud.",
+ "es": "pestaña de OpenHands Cloud.",
+ "ar": "علامة التبويب في OpenHands Cloud.",
+ "fr": "l'onglet d'OpenHands Cloud.",
+ "tr": "OpenHands Cloud'un sekmesinde bulabilirsiniz.",
+ "de": "Tab von OpenHands Cloud.",
+ "uk": "вкладці OpenHands Cloud."
+ },
+ "SETTINGS$LLM_BILLING_INFO": {
+ "en": "LLM usage is billed at the providers' rates with no markup.",
+ "ja": "LLMの使用料金は、プロバイダーの料金でマークアップなしで請求されます。",
+ "zh-CN": "LLM使用费用按提供商费率计费,无加价。",
+ "zh-TW": "LLM使用費用按提供商費率計費,無加價。",
+ "ko-KR": "LLM 사용료는 제공업체 요금으로 마크업 없이 청구됩니다。",
+ "no": "LLM-bruk faktureres til leverandørenes priser uten påslag.",
+ "it": "L'utilizzo di LLM viene fatturato alle tariffe dei fornitori senza ricarico.",
+ "pt": "O uso de LLM é cobrado nas tarifas dos provedores sem markup.",
+ "es": "El uso de LLM se factura a las tarifas de los proveedores sin recargo.",
+ "ar": "يتم فوترة استخدام LLM بأسعار المزودين بدون زيادة.",
+ "fr": "L'utilisation de LLM est facturée aux tarifs des fournisseurs sans majoration.",
+ "tr": "LLM kullanımı, sağlayıcıların oranlarında ek ücret olmadan faturalandırılır.",
+ "de": "LLM-Nutzung wird zu Anbieterpreisen ohne Aufschlag abgerechnet.",
+ "uk": "Використання LLM оплачується за тарифами провайдерів без надбавки."
+ },
+ "SETTINGS$SEE_PRICING_DETAILS": {
+ "en": "See pricing details.",
+ "ja": "価格詳細を見る。",
+ "zh-CN": "查看价格详情。",
+ "zh-TW": "查看價格詳情。",
+ "ko-KR": "가격 세부정보 보기。",
+ "no": "Se prisdetaljer.",
+ "it": "Vedi dettagli sui prezzi.",
+ "pt": "Ver detalhes de preços.",
+ "es": "Ver detalles de precios.",
+ "ar": "انظر تفاصيل الأسعار.",
+ "fr": "Voir les détails de prix.",
+ "tr": "Fiyat ayrıntılarını gör.",
+ "de": "Preisdetails anzeigen.",
+ "uk": "Переглянути деталі цін."
},
"SETTINGS$CREATE_API_KEY": {
"en": "Create API Key",
diff --git a/frontend/src/routes/llm-settings.tsx b/frontend/src/routes/llm-settings.tsx
index 5b21685821..780b15e7ae 100644
--- a/frontend/src/routes/llm-settings.tsx
+++ b/frontend/src/routes/llm-settings.tsx
@@ -34,6 +34,37 @@ import { useCreateSubscriptionCheckoutSession } from "#/hooks/mutation/stripe/us
import { useIsAuthed } from "#/hooks/query/use-is-authed";
import { cn } from "#/utils/utils";
+interface OpenHandsApiKeyHelpProps {
+ testId: string;
+}
+
+function OpenHandsApiKeyHelp({ testId }: OpenHandsApiKeyHelpProps) {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+ {t(I18nKey.SETTINGS$LLM_BILLING_INFO)}{" "} + + {t(I18nKey.SETTINGS$SEE_PRICING_DETAILS)} + +
+ > + ); +} + function LlmSettingsScreen() { const { t } = useTranslation(); const [searchParams, setSearchParams] = useSearchParams(); @@ -473,13 +504,7 @@ function LlmSettingsScreen() { /> {(settings.LLM_MODEL?.startsWith("openhands/") || currentSelectedModel?.startsWith("openhands/")) && ( -