Merge branch 'main' into feat/2fa

danny-avila · Feb 12, 2025 · 475da99 · 475da99
2 parents ba46e7c + 7f48030
commit 475da99
Show file tree

Hide file tree

Showing 33 changed files with 200 additions and 219 deletions.
diff --git a/.github/workflows/i18n-unused-keys.yml b/.github/workflows/i18n-unused-keys.yml
@@ -59,8 +59,8 @@ jobs:
         run: |
           PR_NUMBER=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
 
-          # Format the unused keys list correctly, filtering out empty entries
-          FILTERED_KEYS=$(echo "$unused_keys" | jq -r '.[]' | grep -v '^\s*$' | sed 's/^/- `/;s/$/`/' )
+          # Format the unused keys list as checkboxes for easy manual checking.
+          FILTERED_KEYS=$(echo "$unused_keys" | jq -r '.[]' | grep -v '^\s*$' | sed 's/^/- [ ] `/;s/$/`/' )
 
           COMMENT_BODY=$(cat <<EOF
           ### 🚨 Unused i18next Keys Detected
@@ -81,4 +81,4 @@ jobs:
 
       - name: Fail workflow if unused keys found
         if: env.unused_keys != '[]'
-        run: exit 1  # This makes the PR fail if unused keys exist
+        run: exit 1
diff --git a/.gitignore b/.gitignore
@@ -105,4 +105,5 @@ auth.json
 uploads/
 
 # owner
-release/
+release/
+!/client/src/@types/i18next.d.ts
diff --git a/client/src/@types/i18next.d.ts b/client/src/@types/i18next.d.ts
@@ -0,0 +1,9 @@
+import { defaultNS, resources } from '~/locales/i18n';
+
+declare module 'i18next' {
+    interface CustomTypeOptions {
+        defaultNS: typeof defaultNS;
+        resources: typeof resources.en;
+        strictKeyChecks: true
+    }
+}
diff --git a/client/src/common/types.ts b/client/src/common/types.ts
@@ -106,7 +106,7 @@ export type IconsRecord = {
 export type AgentIconMapProps = IconMapProps & { agentName?: string };
 
 export type NavLink = {
-  title: string;
+  title: TranslationKeys;
   label?: string;
   icon: LucideIcon | React.FC;
   Component?: React.ComponentType;
@@ -370,12 +370,12 @@ export type TDangerButtonProps = {
   showText?: boolean;
   mutation?: UseMutationResult<unknown>;
   onClick: () => void;
-  infoTextCode: string;
-  actionTextCode: string;
+  infoTextCode: TranslationKeys;
+  actionTextCode: TranslationKeys;
   dataTestIdInitial: string;
   dataTestIdConfirm: string;
-  infoDescriptionCode?: string;
-  confirmActionTextCode?: string;
+  infoDescriptionCode?: TranslationKeys;
+  confirmActionTextCode?: TranslationKeys;
 };
 
 export type TDialogProps = {

diff --git a/client/src/components/Chat/Input/Files/Table/Columns.tsx b/client/src/components/Chat/Input/Files/Table/Columns.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/rules-of-hooks */
+
 import { ArrowUpDown, Database } from 'lucide-react';
 import { FileSources, FileContext } from 'librechat-data-provider';
 import type { ColumnDef } from '@tanstack/react-table';
@@ -7,10 +7,10 @@ import { Button, Checkbox, OpenAIMinimalIcon, AzureMinimalIcon } from '~/compone
 import ImagePreview from '~/components/Chat/Input/Files/ImagePreview';
 import FilePreview from '~/components/Chat/Input/Files/FilePreview';
 import { SortFilterHeader } from './SortFilterHeader';
-import { useLocalize, useMediaQuery } from '~/hooks';
+import { TranslationKeys, useLocalize, useMediaQuery } from '~/hooks';
 import { formatDate, getFileType } from '~/utils';
 
-const contextMap = {
+const contextMap: Record<any, TranslationKeys> = {
   [FileContext.avatar]: 'com_ui_avatar',
   [FileContext.unknown]: 'com_ui_unknown',
   [FileContext.assistants]: 'com_ui_assistants',
@@ -127,8 +127,8 @@ export const columns: ColumnDef<TFile>[] = [
             ),
           }}
           valueMap={{
-            [FileSources.azure]: 'Azure',
-            [FileSources.openai]: 'OpenAI',
+            [FileSources.azure]: 'com_ui_azure',
+            [FileSources.openai]: 'com_ui_openai',
             [FileSources.local]: 'com_ui_host',
           }}
         />
@@ -182,7 +182,7 @@ export const columns: ColumnDef<TFile>[] = [
       const localize = useLocalize();
       return (
         <div className="flex flex-wrap items-center gap-2">
-          {localize(contextMap[context ?? FileContext.unknown] ?? 'com_ui_unknown')}
+          {localize(contextMap[context ?? FileContext.unknown])}
         </div>
       );
     },
@@ -212,4 +212,4 @@ export const columns: ColumnDef<TFile>[] = [
       return `${value}${suffix}`;
     },
   },
-];
+];
diff --git a/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx b/client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx
@@ -16,7 +16,7 @@ interface SortFilterHeaderProps<TData, TValue> extends React.HTMLAttributes<HTML
   title: string;
   column: Column<TData, TValue>;
   filters?: Record<string, string[] | number[]>;
-  valueMap?: Record<string, string>;
+  valueMap?: Record<any, TranslationKeys>;
 }
 
 export function SortFilterHeader<TData, TValue>({
@@ -82,7 +82,7 @@ export function SortFilterHeader<TData, TValue>({
                 const translationKey = valueMap?.[value ?? ''];
                 const filterValue =
                   translationKey != null && translationKey.length
-                    ? localize(translationKey as TranslationKeys)
+                    ? localize(translationKey)
                     : String(value);
                 if (!filterValue) {
                   return null;

diff --git a/client/src/components/Chat/Input/Mention.tsx b/client/src/components/Chat/Input/Mention.tsx
@@ -6,7 +6,7 @@ import type { MentionOption, ConvoGenerator } from '~/common';
 import useSelectMention from '~/hooks/Input/useSelectMention';
 import { useAssistantsMapContext } from '~/Providers';
 import useMentions from '~/hooks/Input/useMentions';
-import { useLocalize, useCombobox } from '~/hooks';
+import { useLocalize, useCombobox, TranslationKeys } from '~/hooks';
 import { removeCharIfLast } from '~/utils';
 import MentionItem from './MentionItem';
 
@@ -24,7 +24,7 @@ export default function Mention({
   newConversation: ConvoGenerator;
   textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
   commandChar?: string;
-  placeholder?: string;
+  placeholder?: TranslationKeys;
   includeAssistants?: boolean;
 }) {
   const localize = useLocalize();
@@ -162,7 +162,7 @@ export default function Mention({
       <div className="popover border-token-border-light rounded-2xl border bg-white p-2 shadow-lg dark:bg-gray-700">
         <input
           // The user expects focus to transition to the input field when the popover is opened
-          // eslint-disable-next-line jsx-a11y/no-autofocus
+
           autoFocus
           ref={inputRef}
           placeholder={localize(placeholder)}

diff --git a/client/src/components/Conversations/Fork.tsx b/client/src/components/Conversations/Fork.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { useRecoilState } from 'recoil';
 import { GitFork, InfoIcon } from 'lucide-react';
 import * as Popover from '@radix-ui/react-popover';
@@ -21,21 +21,21 @@ import store from '~/store';
 
 interface PopoverButtonProps {
   children: React.ReactNode;
-  setting: string;
-  onClick: (setting: string) => void;
-  setActiveSetting: React.Dispatch<React.SetStateAction<string>>;
+  setting: ForkOptions;
+  onClick: (setting: ForkOptions) => void;
+  setActiveSetting: React.Dispatch<React.SetStateAction<TranslationKeys>>;
   sideOffset?: number;
   timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
   hoverInfo?: React.ReactNode | string;
   hoverTitle?: React.ReactNode | string;
   hoverDescription?: React.ReactNode | string;
 }
 
-const optionLabels = {
+const optionLabels: Record<ForkOptions, TranslationKeys> = {
   [ForkOptions.DIRECT_PATH]: 'com_ui_fork_visible',
   [ForkOptions.INCLUDE_BRANCHES]: 'com_ui_fork_branches',
   [ForkOptions.TARGET_LEVEL]: 'com_ui_fork_all_target',
-  default: 'com_ui_fork_from_message',
+  [ForkOptions.DEFAULT]: 'com_ui_fork_from_message',
 };
 
 const PopoverButton: React.FC<PopoverButtonProps> = ({
@@ -65,10 +65,10 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
             clearTimeout(timeoutRef.current);
           }
           timeoutRef.current = setTimeout(() => {
-            setActiveSetting(optionLabels.default);
+            setActiveSetting(optionLabels[ForkOptions.DEFAULT]);
           }, 175);
         }}
-        className="mx-1 max-w-14 flex-1 rounded-lg border-2 bg-white text-gray-700 transition duration-300 ease-in-out hover:bg-gray-200 hover:text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-gray-100 "
+        className="mx-1 max-w-14 flex-1 rounded-lg border-2 bg-white text-gray-700 transition duration-300 ease-in-out hover:bg-gray-200 hover:text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-gray-100"
         type="button"
       >
         {children}
@@ -77,18 +77,12 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
         (hoverTitle != null && hoverTitle !== '') ||
         (hoverDescription != null && hoverDescription !== '')) && (
         <HoverCardPortal>
-          <HoverCardContent
-            side="right"
-            className="z-[999] w-80 dark:bg-gray-700"
-            sideOffset={sideOffset}
-          >
+          <HoverCardContent side="right" className="z-[999] w-80 dark:bg-gray-700" sideOffset={sideOffset}>
             <div className="space-y-2">
               <p className="flex flex-col gap-2 text-sm text-gray-600 dark:text-gray-300">
-                {hoverInfo != null && hoverInfo !== '' && hoverInfo}
-                {hoverTitle != null && hoverTitle !== '' && (
-                  <span className="flex flex-wrap gap-1 font-bold">{hoverTitle}</span>
-                )}
-                {hoverDescription != null && hoverDescription !== '' && hoverDescription}
+                {hoverInfo && hoverInfo}
+                {hoverTitle && <span className="flex flex-wrap gap-1 font-bold">{hoverTitle}</span>}
+                {hoverDescription && hoverDescription}
               </p>
             </div>
           </HoverCardContent>
@@ -201,7 +195,7 @@ export default function Fork({
             align="center"
           >
             <div className="flex h-6 w-full items-center justify-center text-sm dark:text-gray-200">
-              {localize(activeSetting as TranslationKeys)}
+              {localize(activeSetting )}
               <HoverCard openDelay={50}>
                 <HoverCardTrigger asChild>
                   <InfoIcon className="ml-auto flex h-4 w-4 gap-2 text-gray-500 dark:text-white/50" />
@@ -235,7 +229,7 @@ export default function Fork({
                 hoverTitle={
                   <>
                     <GitCommit className="h-5 w-5 rotate-90" />
-                    {localize(optionLabels[ForkOptions.DIRECT_PATH] as TranslationKeys)}
+                    {localize(optionLabels[ForkOptions.DIRECT_PATH])}
                   </>
                 }
                 hoverDescription={localize('com_ui_fork_info_visible')}
@@ -253,7 +247,7 @@ export default function Fork({
                 hoverTitle={
                   <>
                     <GitBranchPlus className="h-4 w-4 rotate-180" />
-                    {localize(optionLabels[ForkOptions.INCLUDE_BRANCHES] as TranslationKeys)}
+                    {localize(optionLabels[ForkOptions.INCLUDE_BRANCHES])}
                   </>
                 }
                 hoverDescription={localize('com_ui_fork_info_branches')}
@@ -272,7 +266,7 @@ export default function Fork({
                   <>
                     <ListTree className="h-5 w-5" />
                     {`${localize(
-                      optionLabels[ForkOptions.TARGET_LEVEL] as TranslationKeys,
+                      optionLabels[ForkOptions.TARGET_LEVEL],
                     )} (${localize('com_endpoint_default')})`}
                   </>
                 }

diff --git a/client/src/components/Nav/Settings.tsx b/client/src/components/Nav/Settings.tsx
@@ -1,12 +1,12 @@
-import { useState, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { MessageSquare, Command } from 'lucide-react';
 import { SettingsTabValues } from 'librechat-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 { useMediaQuery, useLocalize } from '~/hooks';
+import { useMediaQuery, useLocalize, TranslationKeys } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function Settings({ open, onOpenChange }: TDialogProps) {
@@ -47,6 +47,44 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
     }
   };
 
+  const settingsTabs: { value: SettingsTabValues; icon:  React.JSX.Element; label: TranslationKeys }[] = [
+    {
+      value: SettingsTabValues.GENERAL,
+      icon: <GearIcon />,
+      label: 'com_nav_setting_general',
+    },
+    {
+      value: SettingsTabValues.CHAT,
+      icon: <MessageSquare className="icon-sm" />,
+      label: 'com_nav_setting_chat',
+    },
+    {
+      value: SettingsTabValues.BETA,
+      icon: <ExperimentIcon />,
+      label: 'com_nav_setting_beta',
+    },
+    {
+      value: SettingsTabValues.COMMANDS,
+      icon: <Command className="icon-sm" />,
+      label: 'com_nav_commands',
+    },
+    {
+      value: SettingsTabValues.SPEECH,
+      icon: <SpeechIcon className="icon-sm" />,
+      label: 'com_nav_setting_speech',
+    },
+    {
+      value: SettingsTabValues.DATA,
+      icon: <DataIcon />,
+      label: 'com_nav_setting_data',
+    },
+    {
+      value: SettingsTabValues.ACCOUNT,
+      icon: <UserIcon />,
+      label: 'com_nav_setting_account',
+    },
+  ];
+
   const handleTabChange = (value: string) => {
     setActiveTab(value as SettingsTabValues);
   };
@@ -126,43 +164,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
                     )}
                     onKeyDown={handleKeyDown}
                   >
-                    {[
-                      {
-                        value: SettingsTabValues.GENERAL,
-                        icon: <GearIcon />,
-                        label: 'com_nav_setting_general',
-                      },
-                      {
-                        value: SettingsTabValues.CHAT,
-                        icon: <MessageSquare className="icon-sm" />,
-                        label: 'com_nav_setting_chat',
-                      },
-                      {
-                        value: SettingsTabValues.BETA,
-                        icon: <ExperimentIcon />,
-                        label: 'com_nav_setting_beta',
-                      },
-                      {
-                        value: SettingsTabValues.COMMANDS,
-                        icon: <Command className="icon-sm" />,
-                        label: 'com_nav_commands',
-                      },
-                      {
-                        value: SettingsTabValues.SPEECH,
-                        icon: <SpeechIcon className="icon-sm" />,
-                        label: 'com_nav_setting_speech',
-                      },
-                      {
-                        value: SettingsTabValues.DATA,
-                        icon: <DataIcon />,
-                        label: 'com_nav_setting_data',
-                      },
-                      {
-                        value: SettingsTabValues.ACCOUNT,
-                        icon: <UserIcon />,
-                        label: 'com_nav_setting_account',
-                      },
-                    ].map(({ value, icon, label }) => (
+                    {settingsTabs.map(({ value, icon, label }) => (
                       <Tabs.Trigger
                         key={value}
                         className={cn(

diff --git a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
@@ -14,6 +14,7 @@ import { useDeleteUserMutation } from '~/data-provider';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
+import { LocalizeFunction } from '~/common';
 
 const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolean }) => {
   const localize = useLocalize();
@@ -103,7 +104,7 @@ const renderDeleteButton = (
   handleDeleteUser: () => void,
   isDeleting: boolean,
   isLocked: boolean,
-  localize: (key: string) => string,
+  localize: LocalizeFunction,
 ) => (
   <button
     className={cn(

diff --git a/client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx b/client/src/components/Nav/SettingsTabs/Commands/PlusCommandSwitch.tsx
@@ -18,7 +18,6 @@ export default function PlusCommandSwitch() {
         id="plusCommand"
         checked={plusCommand}
         onCheckedChange={handleCheckedChange}
-        f
         className="ml-4"
         data-testid="plusCommand"
       />

diff --git a/client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx b/client/src/components/Nav/SettingsTabs/Commands/SlashCommandSwitch.tsx
@@ -18,7 +18,6 @@ export default function SlashCommandSwitch() {
         id="slashCommand"
         checked={slashCommand}
         onCheckedChange={handleCheckedChange}
-        f
         data-testid="slashCommand"
       />
     </div>