💸 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;

client/src/components/Auth/LoginForm.tsx

@@ -16,7 +16,6 @@ type TLoginFormProps = {
 const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error, setError }) => {
   const localize = useLocalize();
   const { theme } = useContext(ThemeContext);
-
   const {
     register,
     getValues,

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 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
       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 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     <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>

client/src/components/Nav/SettingsTabs/Balance/AutoRefillSettings.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { TranslationKeys, useLocalize } from '~/hooks';
+import { Label } from '~/components';
+import HoverCardSettings from '~/components/Nav/SettingsTabs/HoverCardSettings';
+
+interface AutoRefillSettingsProps {
+  lastRefill: Date;
+  refillAmount: number;
+  refillIntervalUnit: 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months';
+  refillIntervalValue: number;
+}
+
+/**
+ * Adds a time interval to a given date.
+ * @param {Date} date - The starting date.
+ * @param {number} value - The numeric value of the interval.
+ * @param {'seconds'|'minutes'|'hours'|'days'|'weeks'|'months'} unit - The unit of time.
+ * @returns {Date} A new Date representing the starting date plus the interval.
+ */
+const addIntervalToDate = (
+  date: Date,
+  value: number,
+  unit: 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months',
+): Date => {
+  const result = new Date(date);
+  switch (unit) {
+    case 'seconds':
+      result.setSeconds(result.getSeconds() + value);
+      break;
+    case 'minutes':
+      result.setMinutes(result.getMinutes() + value);
+      break;
+    case 'hours':
+      result.setHours(result.getHours() + value);
+      break;
+    case 'days':
+      result.setDate(result.getDate() + value);
+      break;
+    case 'weeks':
+      result.setDate(result.getDate() + value * 7);
+      break;
+    case 'months':
+      result.setMonth(result.getMonth() + value);
+      break;
+    default:
+      break;
+  }
+  return result;
+};
+
+const AutoRefillSettings: React.FC<AutoRefillSettingsProps> = ({
+  lastRefill,
+  refillAmount,
+  refillIntervalUnit,
+  refillIntervalValue,
+}) => {
+  const localize = useLocalize();
+
+  const lastRefillDate = lastRefill ? new Date(lastRefill) : null;
+  const nextRefill = lastRefillDate
+    ? addIntervalToDate(lastRefillDate, refillIntervalValue, refillIntervalUnit)
+    : null;
+
+  // Return the localized unit based on singular/plural values
+  const getLocalizedIntervalUnit = (
+    value: number,
+    unit: 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months',
+  ): string => {
+    let key: TranslationKeys;
+    switch (unit) {
+      case 'seconds':
+        key = value === 1 ? 'com_nav_balance_second' : 'com_nav_balance_seconds';
+        break;
+      case 'minutes':
+        key = value === 1 ? 'com_nav_balance_minute' : 'com_nav_balance_minutes';
+        break;
+      case 'hours':
+        key = value === 1 ? 'com_nav_balance_hour' : 'com_nav_balance_hours';
+        break;
+      case 'days':
+        key = value === 1 ? 'com_nav_balance_day' : 'com_nav_balance_days';
+        break;
+      case 'weeks':
+        key = value === 1 ? 'com_nav_balance_week' : 'com_nav_balance_weeks';
+        break;
+      case 'months':
+        key = value === 1 ? 'com_nav_balance_month' : 'com_nav_balance_months';
+        break;
+      default:
+        key = 'com_nav_balance_seconds';
+    }
+    return localize(key);
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-medium">{localize('com_nav_balance_auto_refill_settings')}</h3>
+      <div className="mb-1 flex justify-between text-sm">
+        <span>{localize('com_nav_balance_last_refill')}</span>
+        <span>{lastRefillDate ? lastRefillDate.toLocaleString() : '-'}</span>
+      </div>
+      <div className="mb-1 flex justify-between text-sm">
+        <span>{localize('com_nav_balance_refill_amount')}</span>
+        <span>{refillAmount !== undefined ? refillAmount : '-'}</span>
+      </div>
+      <div className="mb-1 flex justify-between text-sm">
+        <span>{localize('com_nav_balance_interval')}</span>
+        <span>
+          {localize('com_nav_balance_every')} {refillIntervalValue}{' '}
+          {getLocalizedIntervalUnit(refillIntervalValue, refillIntervalUnit)}
+        </span>
+      </div>
+      <div className="flex items-center justify-between">
+        {/* Left Section: Label */}
+        <div className="flex items-center space-x-2">
+          <Label className="font-light">{localize('com_nav_balance_next_refill')}</Label>
+          <HoverCardSettings side="bottom" text="com_nav_balance_next_refill_info" />
+        </div>
+
+        {/* Right Section: tokenCredits Value */}
+        <span className="text-sm font-medium text-gray-800 dark:text-gray-200" role="note">
+          {nextRefill ? nextRefill.toLocaleString() : '-'}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default AutoRefillSettings;

client/src/components/Nav/SettingsTabs/Balance/Balance.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useGetStartupConfig, useGetUserBalance } from '~/data-provider';
+import { useAuthContext, useLocalize } from '~/hooks';
+import TokenCreditsItem from './TokenCreditsItem';
+import AutoRefillSettings from './AutoRefillSettings';
+
+function Balance() {
+  const localize = useLocalize();
+  const { isAuthenticated } = useAuthContext();
+  const { data: startupConfig } = useGetStartupConfig();
+  const balanceQuery = useGetUserBalance({
+    enabled: !!isAuthenticated && startupConfig?.balance?.enabled,
+  });
+  const balanceData = balanceQuery.data;
+
+  return (
+    <div className="flex flex-col gap-4 p-4 text-sm text-text-primary">
+      {/* Token credits display */}
+      <TokenCreditsItem tokenCredits={balanceData?.tokenCredits} />
+
+      {/* Auto-refill display */}
+      {balanceData?.autoRefillEnabled ? (
+        <>
+          <AutoRefillSettings
+            lastRefill={balanceData.lastRefill!}
+            refillAmount={balanceData.refillAmount!}
+            refillIntervalUnit={balanceData.refillIntervalUnit!}
+            refillIntervalValue={balanceData.refillIntervalValue!}
+          />
+        </>
+      ) : (
+        <div className="text-sm text-gray-600">
+          {localize('com_nav_balance_auto_refill_disabled')}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default React.memo(Balance);

client/src/components/Nav/SettingsTabs/Balance/TokenCreditsItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useLocalize } from '~/hooks';
+import { Label } from '~/components';
+import HoverCardSettings from '~/components/Nav/SettingsTabs/HoverCardSettings';
+
+interface TokenCreditsItemProps {
+  tokenCredits?: number;
+}
+
+const TokenCreditsItem: React.FC<TokenCreditsItemProps> = ({ tokenCredits }) => {
+  const localize = useLocalize();
+
+  return (
+    <div className="flex items-center justify-between">
+      {/* Left Section: Label */}
+      <div className="flex items-center space-x-2">
+        <Label className="font-light">{localize('com_nav_balance')}</Label>
+        <HoverCardSettings side="bottom" text="com_nav_info_user_name_display" />
+      </div>
+
+      {/* Right Section: tokenCredits Value */}
+      <span className="text-sm font-medium text-gray-800 dark:text-gray-200" role="note">
+        {tokenCredits !== undefined ? tokenCredits.toFixed(2) : '0.00'}
+      </span>
+    </div>
+  );
+};
+
+export default TokenCreditsItem;

client/src/components/Nav/SettingsTabs/index.ts

@@ -5,4 +5,5 @@ export { default as Beta } from './Beta/Beta';
 export { default as Commands } from './Commands/Commands';
 export { RevokeKeysButton } from './Data/RevokeKeysButton';
 export { default as Account } from './Account/Account';
+export { default as Balance } from './Balance/Balance';
 export { default as Speech } from './Speech/Speech';

client/src/data-provider/Misc/queries.ts

@@ -19,10 +19,10 @@ export const useGetBannerQuery = (
 };
 
 export const useGetUserBalance = (
-  config?: UseQueryOptions<string>,
-): QueryObserverResult<string> => {
+  config?: UseQueryOptions<t.TBalanceResponse>,
+): QueryObserverResult<t.TBalanceResponse> => {
   const queriesEnabled = useRecoilValue<boolean>(store.queriesEnabled);
-  return useQuery<string>([QueryKeys.balance], () => dataService.getUserBalance(), {
+  return useQuery<t.TBalanceResponse>([QueryKeys.balance], () => dataService.getUserBalance(), {
     refetchOnWindowFocus: true,
     refetchOnReconnect: true,
     refetchOnMount: true,

client/src/locales/en/translation.json

@@ -303,6 +303,26 @@
   "com_nav_auto_transcribe_audio": "Auto transcribe audio",
   "com_nav_automatic_playback": "Autoplay Latest Message",
   "com_nav_balance": "Balance",
+  "com_nav_balance_auto_refill_settings": "Auto-Refill Settings",
+  "com_nav_balance_auto_refill_disabled": "Auto-Refill is disabled.",
+  "com_nav_balance_last_refill": "Last Refill:",
+  "com_nav_balance_refill_amount": "Refill Amount:",
+  "com_nav_balance_interval": "Interval:",
+  "com_nav_balance_next_refill": "Next Refill:",
+  "com_nav_balance_next_refill_info": "The next refill will occur automatically only when both conditions are met: the designated time interval has passed since the last refill, and sending a prompt would cause your balance to drop below zero.",
+  "com_nav_balance_every": "Every",
+  "com_nav_balance_second": "second",
+  "com_nav_balance_seconds": "seconds",
+  "com_nav_balance_minute": "minute",
+  "com_nav_balance_minutes": "minutes",
+  "com_nav_balance_hour": "hour",
+  "com_nav_balance_hours": "hours",
+  "com_nav_balance_day": "day",
+  "com_nav_balance_days": "days",
+  "com_nav_balance_week": "week",
+  "com_nav_balance_weeks": "weeks",
+  "com_nav_balance_month": "month",
+  "com_nav_balance_months": "months",
   "com_nav_browser": "Browser",
   "com_nav_center_chat_input": "Center Chat Input on Welcome Screen",
   "com_nav_change_picture": "Change picture",
@@ -416,6 +436,7 @@
   "com_nav_search_placeholder": "Search messages",
   "com_nav_send_message": "Send message",
   "com_nav_setting_account": "Account",
+  "com_nav_setting_balance": "Balance",
   "com_nav_setting_beta": "Beta features",
   "com_nav_setting_chat": "Chat",
   "com_nav_setting_data": "Data controls",
@@ -926,4 +947,4 @@
   "com_ui_zoom": "Zoom",
   "com_user_message": "You",
   "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
-}
+}

packages/data-provider/src/config.ts

@@ -1275,6 +1275,10 @@ export enum SettingsTabValues {
    * Tab for Data Controls
    */
   DATA = 'data',
+  /**
+   * Tab for Balance Settings
+   */
+  BALANCE = 'balance',
   /**
    * Tab for Account Settings
    */

packages/data-provider/src/data-service.ts

@@ -93,7 +93,7 @@ export function getUser(): Promise<t.TUser> {
   return request.get(endpoints.user());
 }
 
-export function getUserBalance(): Promise<string> {
+export function getUserBalance(): Promise<t.TBalanceResponse> {
   return request.get(endpoints.balance());
 }