💸 feat: Balance Tab in Settings Dialog

api/server/controllers/Balance.js

@@ -1,9 +1,24 @@
 const Balance = require('~/models/Balance');
 
 async function balanceController(req, res) {
-  const { tokenCredits: balance = '' } =
-    (await Balance.findOne({ user: req.user.id }, 'tokenCredits').lean()) ?? {};
-  res.status(200).send('' + balance);
+  const balanceData = await Balance.findOne(
+    { user: req.user.id },
+    '-_id tokenCredits autoRefillEnabled refillIntervalValue refillIntervalUnit lastRefill refillAmount',
+  ).lean();
+
+  if (!balanceData) {
+    return res.status(404).json({ error: 'Balance not found' });
+  }
+
+  // If auto-refill is not enabled, remove auto-refill related fields from the response
+  if (!balanceData.autoRefillEnabled) {
+    delete balanceData.refillIntervalValue;
+    delete balanceData.refillIntervalUnit;
+    delete balanceData.lastRefill;
+    delete balanceData.refillAmount;
+  }
+
+  res.status(200).json(balanceData);
 }
 
 module.exports = balanceController;

api/server/routes/config.js

@@ -75,6 +75,7 @@ router.get('/', async function (req, res) {
         process.env.SHOW_BIRTHDAY_ICON === '',
       helpAndFaqURL: process.env.HELP_AND_FAQ_URL || 'https://librechat.ai',
       interface: req.app.locals.interfaceConfig,
+      turnstile: req.app.locals.turnstileConfig,
       modelSpecs: req.app.locals.modelSpecs,
       balance: req.app.locals.balance,
       sharedLinksEnabled,

api/server/services/AppService.js

@@ -12,6 +12,7 @@ const { initializeFirebase } = require('./Files/Firebase/initialize');
 const loadCustomConfig = require('./Config/loadCustomConfig');
 const handleRateLimits = require('./Config/handleRateLimits');
 const { loadDefaultInterface } = require('./start/interface');
+const { loadTurnstileConfig } = require('./start/turnstile');
 const { azureConfigSetup } = require('./start/azureOpenAI');
 const { processModelSpecs } = require('./start/modelSpecs');
 const { initializeS3 } = require('./Files/S3/initialize');
@@ -23,7 +24,6 @@ const { getMCPManager } = require('~/config');
 const paths = require('~/config/paths');
 
 /**
- *
  * Loads custom config and initializes app-wide variables.
  * @function AppService
  * @param {Express.Application} app - The Express application object.
@@ -74,6 +74,7 @@ const AppService = async (app) => {
   const socialLogins =
     config?.registration?.socialLogins ?? configDefaults?.registration?.socialLogins;
   const interfaceConfig = await loadDefaultInterface(config, configDefaults);
+  const turnstileConfig = loadTurnstileConfig(config, configDefaults);
 
   const defaultLocals = {
     ocr,
@@ -85,6 +86,7 @@ const AppService = async (app) => {
     availableTools,
     imageOutputType,
     interfaceConfig,
+    turnstileConfig,
     balance,
   };
 

api/server/services/AppService.spec.js

@@ -46,6 +46,12 @@ jest.mock('./ToolService', () => ({
     },
   }),
 }));
+jest.mock('./start/turnstile', () => ({
+  loadTurnstileConfig: jest.fn(() => ({
+    siteKey: 'default-site-key',
+    options: {},
+  })),
+}));
 
 const azureGroups = [
   {
@@ -86,6 +92,10 @@ const azureGroups = [
 
 describe('AppService', () => {
   let app;
+  const mockedTurnstileConfig = {
+    siteKey: 'default-site-key',
+    options: {},
+  };
 
   beforeEach(() => {
     app = { locals: {} };
@@ -107,6 +117,7 @@ describe('AppService', () => {
         sidePanel: true,
         presets: true,
       }),
+      turnstileConfig: mockedTurnstileConfig,
       modelSpecs: undefined,
       availableTools: {
         ExampleTool: {

api/server/services/start/turnstile.js

@@ -0,0 +1,35 @@
+const { removeNullishValues } = require('librechat-data-provider');
+const { logger } = require('~/config');
+
+/**
+ * Loads and maps the Cloudflare Turnstile configuration.
+ *
+ * Expected config structure:
+ *
+ * turnstile:
+ *   siteKey: "your-site-key-here"
+ *   options:
+ *     language: "auto"    // "auto" or an ISO 639-1 language code (e.g. en)
+ *     size: "normal"      // Options: "normal", "compact", "flexible", or "invisible"
+ *
+ * @param {TCustomConfig | undefined} config - The loaded custom configuration.
+ * @param {TConfigDefaults} configDefaults - The custom configuration default values.
+ * @returns {TCustomConfig['turnstile']} The mapped Turnstile configuration.
+ */
+function loadTurnstileConfig(config, configDefaults) {
+  const { turnstile: customTurnstile = {} } = config ?? {};
+  const { turnstile: defaults = {} } = configDefaults;
+
+  /** @type {TCustomConfig['turnstile']} */
+  const loadedTurnstile = removeNullishValues({
+    siteKey: customTurnstile.siteKey ?? defaults.siteKey,
+    options: customTurnstile.options ?? defaults.options,
+  });
+
+  logger.info('Turnstile configuration loaded:\n' + JSON.stringify(loadedTurnstile, null, 2));
+  return loadedTurnstile;
+}
+
+module.exports = {
+  loadTurnstileConfig,
+};

client/package.json

@@ -34,6 +34,7 @@
     "@dicebear/collection": "^9.2.2",
     "@dicebear/core": "^9.2.2",
     "@headlessui/react": "^2.1.2",
+    "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",

client/src/components/Auth/LoginForm.tsx

@@ -1,9 +1,10 @@
 import { useForm } from 'react-hook-form';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { Turnstile } from '@marsidev/react-turnstile';
 import type { TLoginUser, TStartupConfig } from 'librechat-data-provider';
 import type { TAuthContext } from '~/common';
 import { useResendVerificationEmail, useGetStartupConfig } from '~/data-provider';
-import { useLocalize } from '~/hooks';
+import { ThemeContext, useLocalize } from '~/hooks';
 
 type TLoginFormProps = {
   onSubmit: (data: TLoginUser) => void;
@@ -14,16 +15,19 @@ type TLoginFormProps = {
 
 const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error, setError }) => {
   const localize = useLocalize();
+  const { theme } = useContext(ThemeContext);
   const {
     register,
     getValues,
     handleSubmit,
     formState: { errors },
   } = useForm<TLoginUser>();
   const [showResendLink, setShowResendLink] = useState<boolean>(false);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 
   const { data: config } = useGetStartupConfig();
   const useUsernameLogin = config?.ldap?.username;
+  const validTheme = theme === 'dark' ? 'dark' : 'light';
 
   useEffect(() => {
     if (error && error.includes('422') && !showResendLink) {
@@ -159,11 +163,29 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
             {localize('com_auth_password_forgot')}
           </a>
         )}
+
+        {/* Render Turnstile only if enabled in startupConfig */}
+        {startupConfig.turnstile && (
+          <div className="my-4 flex justify-center">
+            <Turnstile
+              siteKey={startupConfig.turnstile.siteKey}
+              options={{
+                ...startupConfig.turnstile.options,
+                theme: validTheme,
+              }}
+              onSuccess={(token) => setTurnstileToken(token)}
+              onError={() => setTurnstileToken(null)}
+              onExpire={() => setTurnstileToken(null)}
+            />
+          </div>
+        )}
+
         <div className="mt-6">
           <button
             aria-label={localize('com_auth_continue')}
             data-testid="login-button"
             type="submit"
+            disabled={startupConfig.turnstile ? !turnstileToken : false}
             className="
             w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
             transition-colors hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700

client/src/components/Auth/Registration.tsx

@@ -1,16 +1,18 @@
 import { useForm } from 'react-hook-form';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { useNavigate, useOutletContext, useLocation } from 'react-router-dom';
 import { useRegisterUserMutation } from 'librechat-data-provider/react-query';
 import type { TRegisterUser, TError } from 'librechat-data-provider';
 import type { TLoginLayoutContext } from '~/common';
 import { ErrorMessage } from './ErrorMessage';
 import { Spinner } from '~/components/svg';
-import { useLocalize, TranslationKeys } from '~/hooks';
+import { useLocalize, TranslationKeys, ThemeContext } from '~/hooks';
 
 const Registration: React.FC = () => {
   const navigate = useNavigate();
   const localize = useLocalize();
+  const { theme } = useContext(ThemeContext);
   const { startupConfig, startupConfigError, isFetching } = useOutletContext<TLoginLayoutContext>();
 
   const {
@@ -24,10 +26,12 @@ const Registration: React.FC = () => {
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [countdown, setCountdown] = useState<number>(3);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const token = queryParams.get('token');
+  const validTheme = theme === 'dark' ? 'dark' : 'light';
 
   const registerUser = useRegisterUserMutation({
     onMutate: () => {
@@ -178,17 +182,38 @@ const Registration: React.FC = () => {
               validate: (value: string) =>
                 value === password || localize('com_auth_password_not_match'),
             })}
+
+            {/* Render Turnstile only if enabled in startupConfig */}
+            {startupConfig?.turnstile && (
+              <div className="my-4 flex justify-center">
+                <Turnstile
+                  siteKey={startupConfig.turnstile.siteKey}
+                  options={{
+                    ...startupConfig.turnstile.options,
+                    theme: validTheme,
+                  }}
+                  onSuccess={(token) => setTurnstileToken(token)}
+                  onError={() => setTurnstileToken(null)}
+                  onExpire={() => setTurnstileToken(null)}
+                />
+              </div>
+            )}
+
             <div className="mt-6">
               <button
-                disabled={Object.keys(errors).length > 0}
+                disabled={
+                  Object.keys(errors).length > 0 ||
+                  isSubmitting ||
+                  (startupConfig?.turnstile ? !turnstileToken : false)
+                }
                 type="submit"
                 aria-label="Submit registration"
                 className="
-            w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
-            transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
-            focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
-            disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
-          "
+                  w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white
+                  transition-colors hover:bg-green-700 focus:outline-none focus:ring-2
+                  focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50
+                  disabled:hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700
+                "
               >
                 {isSubmitting ? <Spinner /> : localize('com_auth_continue')}
               </button>

client/src/components/Nav/AccountSettings.tsx

@@ -75,12 +75,10 @@ function AccountSettings() {
           {user?.email ?? localize('com_nav_user')}
         </div>
         <DropdownMenuSeparator />
-        {startupConfig?.balance?.enabled === true &&
-          balanceQuery.data != null &&
-          !isNaN(parseFloat(balanceQuery.data)) && (
+        {startupConfig?.balance?.enabled === true && balanceQuery.data != null && (
           <>
             <div className="text-token-text-secondary ml-3 mr-2 py-2 text-sm" role="note">
-              {localize('com_nav_balance')}: {parseFloat(balanceQuery.data).toFixed(2)}
+              {localize('com_nav_balance')}: {balanceQuery.data.tokenCredits.toFixed(2)}
             </div>
             <DropdownMenuSeparator />
           </>

client/src/components/Nav/Settings.tsx

@@ -1,28 +1,31 @@
 import React, { useState, useRef } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
-import { MessageSquare, Command } from 'lucide-react';
+import { MessageSquare, Command, DollarSign } from 'lucide-react';
 import { SettingsTabValues } from 'librechat-data-provider';
+import { useGetStartupConfig } from '~/data-provider';
 import type { TDialogProps } from '~/common';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import { GearIcon, DataIcon, SpeechIcon, UserIcon, ExperimentIcon } from '~/components/svg';
-import { General, Chat, Speech, Beta, Commands, Data, Account } from './SettingsTabs';
+import { General, Chat, Speech, Beta, Commands, Data, Account, Balance } from './SettingsTabs';
 import { useMediaQuery, useLocalize, TranslationKeys } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function Settings({ open, onOpenChange }: TDialogProps) {
   const isSmallScreen = useMediaQuery('(max-width: 767px)');
+  const { data: startupConfig } = useGetStartupConfig();
   const localize = useLocalize();
   const [activeTab, setActiveTab] = useState(SettingsTabValues.GENERAL);
   const tabRefs = useRef({});
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    const tabs = [
+    const tabs: SettingsTabValues[] = [
       SettingsTabValues.GENERAL,
       SettingsTabValues.CHAT,
       SettingsTabValues.BETA,
       SettingsTabValues.COMMANDS,
       SettingsTabValues.SPEECH,
       SettingsTabValues.DATA,
+      ...(startupConfig?.balance?.enabled ? [SettingsTabValues.BALANCE] : []),
       SettingsTabValues.ACCOUNT,
     ];
     const currentIndex = tabs.indexOf(activeTab);
@@ -82,6 +85,15 @@
       icon: <DataIcon />,
       label: 'com_nav_setting_data',
     },
+    ...(startupConfig?.balance?.enabled
+      ? [
+        {
+          value: SettingsTabValues.BALANCE,
+          icon: <DollarSign size={18} />,
+          label: 'com_nav_setting_balance' as TranslationKeys,
+        },
+        ]
+      : ([] as { value: SettingsTabValues; icon: React.JSX.Element; label: TranslationKeys }[])),
     {
       value: SettingsTabValues.ACCOUNT,
       icon: <UserIcon />,
@@ -204,6 +216,11 @@
                     <Tabs.Content value={SettingsTabValues.DATA}>
                       <Data />
                     </Tabs.Content>
+                    {startupConfig?.balance?.enabled && (
+                      <Tabs.Content value={SettingsTabValues.BALANCE}>
+                        <Balance />
+                      </Tabs.Content>
+                    )}
                     <Tabs.Content value={SettingsTabValues.ACCOUNT}>
                       <Account />
                     </Tabs.Content>