feat: add localization strings for the token abbreviation 't'

client/src/components/Chat/CostBar.tsx

@@ -1,5 +1,6 @@
 import { ArrowIcon } from '@librechat/client';
 import type { TConversationCosts } from 'librechat-data-provider';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 interface CostBarProps {
@@ -8,6 +9,7 @@ interface CostBarProps {
 }
 
 export default function CostBar({ conversationCosts, showCostBar }: CostBarProps) {
+  const localize = useLocalize();
   if (!conversationCosts || !conversationCosts.totals) {
     return null;
   }
@@ -23,18 +25,26 @@ export default function CostBar({ conversationCosts, showCostBar }: CostBarProps
         <div>
           <div>
             <ArrowIcon direction="up" />
-            {conversationCosts.totals.prompt.tokenCount}t
+            {localize('com_ui_token_abbreviation', {
+              0: conversationCosts.totals.prompt.tokenCount,
+            })}
           </div>
           <div>${Math.abs(conversationCosts.totals.prompt.usd).toFixed(6)}</div>
         </div>
         <div>
-          <div>{conversationCosts.totals.total.tokenCount}t</div>
+          <div>
+            {localize('com_ui_token_abbreviation', {
+              0: conversationCosts.totals.total.tokenCount,
+            })}
+          </div>
           <div>${Math.abs(conversationCosts.totals.total.usd).toFixed(6)}</div>
         </div>
         <div>
           <div>
             <ArrowIcon direction="down" />
-            {conversationCosts.totals.completion.tokenCount}t
+            {localize('com_ui_token_abbreviation', {
+              0: conversationCosts.totals.completion.tokenCount,
+            })}
           </div>
           <div>${Math.abs(conversationCosts.totals.completion.usd).toFixed(6)}</div>
         </div>

client/src/components/Chat/Messages/ui/MessageRender.tsx

@@ -8,10 +8,10 @@ import PlaceholderRow from '~/components/Chat/Messages/ui/PlaceholderRow';
 import SiblingSwitch from '~/components/Chat/Messages/SiblingSwitch';
 import HoverButtons from '~/components/Chat/Messages/HoverButtons';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
+import { useMessageActions, useLocalize } from '~/hooks';
 import { Plugin } from '~/components/Messages/Content';
 import SubRow from '~/components/Chat/Messages/SubRow';
 import { MessageContext } from '~/Providers';
-import { useMessageActions } from '~/hooks';
 import { cn, logger } from '~/utils';
 import store from '~/store';
 
@@ -39,6 +39,7 @@ const MessageRender = memo(
     isSubmittingFamily = false,
     costs,
   }: MessageRenderProps) => {
+    const localize = useLocalize();
     const {
       ask,
       edit,
@@ -183,7 +184,9 @@ const MessageRender = memo(
                     ) : (
                       <ArrowIcon direction="down" className="inline" />
                     )}
-                    {perMessageCost.tokenCount}t
+                    {localize('com_ui_token_abbreviation', {
+                      0: perMessageCost.tokenCount,
+                    })}
                   </span>
                 )}
                 <span className="whitespace-pre">${Math.abs(perMessageCost.usd).toFixed(6)}</span>

client/src/components/Messages/ContentRender.tsx

@@ -5,10 +5,10 @@ import type { TMessage, TMessageContentParts, TConversationCosts } from 'librech
 import type { TMessageProps, TMessageIcon } from '~/common';
 import ContentParts from '~/components/Chat/Messages/Content/ContentParts';
 import PlaceholderRow from '~/components/Chat/Messages/ui/PlaceholderRow';
+import { useAttachments, useMessageActions, useLocalize } from '~/hooks';
 import SiblingSwitch from '~/components/Chat/Messages/SiblingSwitch';
 import HoverButtons from '~/components/Chat/Messages/HoverButtons';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
-import { useAttachments, useMessageActions } from '~/hooks';
 import SubRow from '~/components/Chat/Messages/SubRow';
 import { cn, logger } from '~/utils';
 import store from '~/store';
@@ -37,6 +37,7 @@ const ContentRender = memo(
     isSubmittingFamily = false,
     costs,
   }: ContentRenderProps) => {
+    const localize = useLocalize();
     const { attachments, searchResults } = useAttachments({
       messageId: msg?.messageId,
       attachments: msg?.attachments,
@@ -180,7 +181,9 @@ const ContentRender = memo(
                     ) : (
                       <ArrowIcon direction="down" className="inline" />
                     )}
-                    {perMessageCost.tokenCount}t
+                    {localize('com_ui_token_abbreviation', {
+                      0: perMessageCost.tokenCount,
+                    })}
                   </span>
                 )}
                 <span className="whitespace-pre">${Math.abs(perMessageCost.usd).toFixed(6)}</span>

client/src/locales/en/translation.json

@@ -1197,6 +1197,7 @@
   "com_ui_thinking": "Thinking...",
   "com_ui_thoughts": "Thoughts",
   "com_ui_token": "token",
+  "com_ui_token_abbreviation": "{{0}}t",
   "com_ui_token_exchange_method": "Token Exchange Method",
   "com_ui_token_url": "Token URL",
   "com_ui_tokens": "tokens",