🏷️ chore: Add Missing Localizations for Agents, Categories, Bookmarks (#9266)

* fix: error when updating bookmarks if no query data

* feat: localize bookmark dialog, form labels and validation messages, also improve validation

* feat: add localization for EmptyPromptPreview component and update translation.json

* chore: add missing localizations for static UI text

* chore: update AgentPanelContextType and useGetAgentsConfig to support null configurations

* refactor: update agent categories to support localization and custom properties, improve related typing

* ci: add localization for 'All' category and update tab names in accessibility tests

* chore: remove unused AgentCategoryDisplay component and its tests

* chore: add localization handling for agent category selector

* chore: enhance AgentCard to support localized category labels and add related tests

* chore: enhance i18n unused keys detection to include additional source directories and improve handling for agent category keys

Author: danny-avila

.github/workflows/i18n-unused-keys.yml

@@ -1,12 +1,18 @@
 name: Detect Unused i18next Strings
 
+# This workflow checks for unused i18n keys in translation files.
+# It has special handling for:
+# - com_ui_special_var_* keys that are dynamically constructed
+# - com_agents_category_* keys that are stored in the database and used dynamically
+
 on:
   pull_request:
     paths:
       - "client/src/**"
       - "api/**"
       - "packages/data-provider/src/**"
       - "packages/client/**"
+      - "packages/data-schemas/src/**"
 
 jobs:
   detect-unused-i18n-keys:
@@ -24,7 +30,7 @@ jobs:
 
           # Define paths
           I18N_FILE="client/src/locales/en/translation.json"
-          SOURCE_DIRS=("client/src" "api" "packages/data-provider/src" "packages/client")
+          SOURCE_DIRS=("client/src" "api" "packages/data-provider/src" "packages/client" "packages/data-schemas/src")
 
           # Check if translation file exists
           if [[ ! -f "$I18N_FILE" ]]; then
@@ -52,6 +58,31 @@ jobs:
                 fi
               done
               
+              # Also check if the key is directly used somewhere
+              if [[ "$FOUND" == false ]]; then
+                for DIR in "${SOURCE_DIRS[@]}"; do
+                  if grep -r --include=\*.{js,jsx,ts,tsx} -q "$KEY" "$DIR"; then
+                    FOUND=true
+                    break
+                  fi
+                done
+              fi
+            # Special case for agent category keys that are dynamically used from database
+            elif [[ "$KEY" == com_agents_category_* ]]; then
+              # Check if agent category localization is being used
+              for DIR in "${SOURCE_DIRS[@]}"; do
+                # Check for dynamic category label/description usage
+                if grep -r --include=\*.{js,jsx,ts,tsx} -E "category\.(label|description).*startsWith.*['\"]com_" "$DIR" > /dev/null 2>&1 || \
+                   # Check for the method that defines these keys
+                   grep -r --include=\*.{js,jsx,ts,tsx} "ensureDefaultCategories" "$DIR" > /dev/null 2>&1 || \
+                   # Check for direct usage in agentCategory.ts
+                   grep -r --include=\*.ts -E "label:.*['\"]$KEY['\"]" "$DIR" > /dev/null 2>&1 || \
+                   grep -r --include=\*.ts -E "description:.*['\"]$KEY['\"]" "$DIR" > /dev/null 2>&1; then
+                  FOUND=true
+                  break
+                fi
+              done
+              
               # Also check if the key is directly used somewhere
               if [[ "$FOUND" == false ]]; then
                 for DIR in "${SOURCE_DIRS[@]}"; do

api/server/routes/agents/v1.js

@@ -46,7 +46,7 @@ router.use('/tools', tools);
 
 /**
  * Get all agent categories with counts
- * @route GET /agents/marketplace/categories
+ * @route GET /agents/categories
  */
 router.get('/categories', v1.getAgentCategories);
 /**

client/src/common/types.ts

@@ -225,7 +225,8 @@ export type AgentPanelContextType = {
   setActivePanel: React.Dispatch<React.SetStateAction<Panel>>;
   setCurrentAgentId: React.Dispatch<React.SetStateAction<string | undefined>>;
   agent_id?: string;
-  agentsConfig?: t.TAgentsEndpoint;
+  agentsConfig?: t.TAgentsEndpoint | null;
+  endpointsConfig?: t.TEndpointsConfig | null;
 };
 
 export type AgentModelPanelProps = {

client/src/components/Agents/AgentCard.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Label } from '@librechat/client';
 import type t from 'librechat-data-provider';
+import { useLocalize, TranslationKeys, useAgentCategories } from '~/hooks';
 import { cn, renderAgentAvatar, getContactDisplayName } from '~/utils';
-import { useLocalize } from '~/hooks';
 
 interface AgentCardProps {
   agent: t.Agent; // The agent data to display
@@ -15,6 +15,21 @@ interface AgentCardProps {
  */
 const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' }) => {
   const localize = useLocalize();
+  const { categories } = useAgentCategories();
+
+  const categoryLabel = useMemo(() => {
+    if (!agent.category) return '';
+
+    const category = categories.find((cat) => cat.value === agent.category);
+    if (category) {
+      if (category.label && category.label.startsWith('com_')) {
+        return localize(category.label as TranslationKeys);
+      }
+      return category.label;
+    }
+
+    return agent.category.charAt(0).toUpperCase() + agent.category.slice(1);
+  }, [agent.category, categories, localize]);
 
   return (
     <div
@@ -49,9 +64,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick, className = '' })
           {/* Category tag */}
           {agent.category && (
             <div className="inline-flex items-center rounded-md border-border-xheavy bg-surface-active-alt px-2 py-1 text-xs font-medium">
-              <Label className="line-clamp-1 font-normal">
-                {agent.category.charAt(0).toUpperCase() + agent.category.slice(1)}
-              </Label>
+              <Label className="line-clamp-1 font-normal">{categoryLabel}</Label>
             </div>
           )}
         </div>

client/src/components/Agents/AgentCategoryDisplay.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import type t from 'librechat-data-provider';
 import { useMediaQuery } from '@librechat/client';
+import type t from 'librechat-data-provider';
+import { useLocalize, TranslationKeys } from '~/hooks';
 import { SmartLoader } from './SmartLoader';
-import { useLocalize } from '~/hooks/';
 import { cn } from '~/utils';
 
 /**
@@ -36,14 +36,17 @@ const CategoryTabs: React.FC<CategoryTabsProps> = ({
   const localize = useLocalize();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
-  // Helper function to get category display name from database data
+  /** Helper function to get category display name from database data */
   const getCategoryDisplayName = (category: t.TCategory) => {
     // Special cases for system categories
     if (category.value === 'promoted') {
       return localize('com_agents_top_picks');
     }
     if (category.value === 'all') {
-      return 'All';
+      return localize('com_agents_all_category');
+    }
+    if (category.label && category.label.startsWith('com_')) {
+      return localize(category.label as TranslationKeys);
     }
     // Use database label or fallback to capitalized value
     return category.label || category.value.charAt(0).toUpperCase() + category.value.slice(1);
@@ -158,7 +161,11 @@ const CategoryTabs: React.FC<CategoryTabsProps> = ({
             aria-selected={activeTab === category.value}
             aria-controls={`tabpanel-${category.value}`}
             tabIndex={activeTab === category.value ? 0 : -1}
-            aria-label={`${getCategoryDisplayName(category)} tab (${index + 1} of ${categories.length})`}
+            aria-label={localize('com_agents_category_tab_label', {
+              category: getCategoryDisplayName(category),
+              position: index + 1,
+              total: categories.length,
+            })}
           >
             {getCategoryDisplayName(category)}
             {/* Underline for active tab */}

client/src/components/Agents/CategoryTabs.tsx

@@ -7,8 +7,8 @@ import { TooltipAnchor, Button, NewChatIcon, useMediaQuery } from '@librechat/cl
 import { PermissionTypes, Permissions, QueryKeys, Constants } from 'librechat-data-provider';
 import type t from 'librechat-data-provider';
 import type { ContextType } from '~/common';
+import { useDocumentTitle, useHasAccess, useLocalize, TranslationKeys } from '~/hooks';
 import { useGetEndpointsQuery, useGetAgentCategoriesQuery } from '~/data-provider';
-import { useDocumentTitle, useHasAccess, useLocalize } from '~/hooks';
 import MarketplaceAdminSettings from './MarketplaceAdminSettings';
 import { SidePanelProvider, useChatContext } from '~/Providers';
 import { MarketplaceProvider } from './MarketplaceContext';
@@ -381,8 +381,8 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                               }
                               if (displayCategory === 'all') {
                                 return {
-                                  name: 'All Agents',
-                                  description: 'Browse all shared agents across all categories',
+                                  name: localize('com_agents_all'),
+                                  description: localize('com_agents_all_description'),
                                 };
                               }
 
@@ -392,8 +392,12 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                               );
                               if (categoryData) {
                                 return {
-                                  name: categoryData.label,
-                                  description: categoryData.description || '',
+                                  name: categoryData.label?.startsWith('com_')
+                                    ? localize(categoryData.label as TranslationKeys)
+                                    : categoryData.label,
+                                  description: categoryData.description?.startsWith('com_')
+                                    ? localize(categoryData.description as TranslationKeys)
+                                    : categoryData.description || '',
                                 };
                               }
 
@@ -455,8 +459,8 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                                 }
                                 if (nextCategory === 'all') {
                                   return {
-                                    name: 'All Agents',
-                                    description: 'Browse all shared agents across all categories',
+                                    name: localize('com_agents_all'),
+                                    description: localize('com_agents_all_description'),
                                   };
                                 }
 
@@ -466,8 +470,16 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                                 );
                                 if (categoryData) {
                                   return {
-                                    name: categoryData.label,
-                                    description: categoryData.description || '',
+                                    name: categoryData.label?.startsWith('com_')
+                                      ? localize(categoryData.label as TranslationKeys)
+                                      : categoryData.label,
+                                    description: categoryData.description?.startsWith('com_')
+                                      ? localize(
+                                          categoryData.description as Parameters<
+                                            typeof localize
+                                          >[0],
+                                        )
+                                      : categoryData.description || '',
                                   };
                                 }
 

client/src/components/Agents/Marketplace.tsx

@@ -61,6 +61,7 @@ const mockLocalize = jest.fn((key: string, options?: any) => {
     com_agents_search_empty_heading: 'No search results',
     com_agents_created_by: 'by',
     com_agents_top_picks: 'Top Picks',
+    com_agents_all_category: 'All',
     // ErrorDisplay translations
     com_agents_error_suggestion_generic: 'Try refreshing the page or check your network connection',
     com_agents_error_network_title: 'Network Error',
@@ -199,7 +200,7 @@ describe('Accessibility Improvements', () => {
         />,
       );
 
-      const promotedTab = screen.getByRole('tab', { name: /Top Picks tab/ });
+      const promotedTab = screen.getByRole('tab', { name: /Top Picks category/ });
 
       // Test arrow key navigation
       fireEvent.keyDown(promotedTab, { key: 'ArrowRight' });
@@ -226,8 +227,8 @@ describe('Accessibility Improvements', () => {
         />,
       );
 
-      const promotedTab = screen.getByRole('tab', { name: /Top Picks tab/ });
-      const allTab = screen.getByRole('tab', { name: /All tab/ });
+      const promotedTab = screen.getByRole('tab', { name: /Top Picks category/ });
+      const allTab = screen.getByRole('tab', { name: /All category/ });
 
       // Active tab should be focusable
       expect(promotedTab).toHaveAttribute('tabIndex', '0');