⌨️ a11y(Settings): Improved Keyboard Navigation & Consistent Styling (#3975)

* feat: settings tba accessible

* refactor: cleanup unused code

* refactor: improve accessibility and user experience in ChatDirection component

* style: focus ring primary class

* improve a11y of avatar dialog

* style: a11y improvements for Settings

* style: focus ring primary class in OriginalDialog component

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import { useRecoilState } from 'recoil';
-import * as Tabs from '@radix-ui/react-tabs';
-import { SettingsTabValues } from 'librechat-data-provider';
 import HoverCardSettings from '../HoverCardSettings';
 import DeleteAccount from './DeleteAccount';
 import { Switch } from '~/components/ui';
@@ -21,33 +19,27 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
   };
 
   return (
-    <Tabs.Content
-      value={SettingsTabValues.ACCOUNT}
-      role="tabpanel"
-      className="w-full md:min-h-[271px]"
-    >
-      <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <Avatar />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <DeleteAccount />
-        </div>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            <div>{localize('com_nav_user_name_display')}</div>
-            <HoverCardSettings side="bottom" text="com_nav_info_user_name_display" />
-          </div>
-          <Switch
-            id="UsernameDisplay"
-            checked={UsernameDisplay}
-            onCheckedChange={handleCheckedChange}
-            className="ml-4 mt-2"
-            data-testid="UsernameDisplay"
-          />
-        </div>
+    <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <Avatar />
       </div>
-    </Tabs.Content>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <DeleteAccount />
+      </div>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <div>{localize('com_nav_user_name_display')}</div>
+          <HoverCardSettings side="bottom" text="com_nav_info_user_name_display" />
+        </div>
+        <Switch
+          id="UsernameDisplay"
+          checked={UsernameDisplay}
+          onCheckedChange={handleCheckedChange}
+          className="ml-4 mt-2"
+          data-testid="UsernameDisplay"
+        />
+      </div>
+    </div>
   );
 }
 

client/src/components/Nav/SettingsTabs/Account/Avatar.tsx

@@ -4,7 +4,14 @@ import { useSetRecoilState } from 'recoil';
 import AvatarEditor from 'react-avatar-editor';
 import { fileConfig as defaultFileConfig, mergeFileConfig } from 'librechat-data-provider';
 import type { TUser } from 'librechat-data-provider';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, Slider } from '~/components/ui';
+import {
+  OGDialog,
+  OGDialogContent,
+  OGDialogHeader,
+  OGDialogTitle,
+  OGDialogTrigger,
+  Slider,
+} from '~/components/ui';
 import { useUploadAvatarMutation, useGetFileConfig } from '~/data-provider';
 import { useToastContext } from '~/Providers';
 import { Spinner } from '~/components/svg';
@@ -20,6 +27,7 @@ function Avatar() {
   const [rotation, setRotation] = useState<number>(0);
   const editorRef = useRef<AvatarEditor | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const openButtonRef = useRef<HTMLButtonElement>(null);
 
   const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
     select: (data) => mergeFileConfig(data),
@@ -31,8 +39,8 @@ function Avatar() {
   const { mutate: uploadAvatar, isLoading: isUploading } = useUploadAvatarMutation({
     onSuccess: (data) => {
       showToast({ message: localize('com_ui_upload_success') });
-      setDialogOpen(false);
       setUser((prev) => ({ ...prev, avatar: data.url } as TUser));
+      openButtonRef.current?.click();
     },
     onError: (error) => {
       console.error('Error:', error);
@@ -102,113 +110,114 @@ function Avatar() {
   }, []);
 
   return (
-    <>
+    <OGDialog
+      open={isDialogOpen}
+      onOpenChange={(open) => {
+        setDialogOpen(open);
+        if (!open) {
+          resetImage();
+          setTimeout(() => {
+            openButtonRef.current?.focus();
+          }, 0);
+        }
+      }}
+    >
       <div className="flex items-center justify-between">
         <span>{localize('com_nav_profile_picture')}</span>
-        <button onClick={() => setDialogOpen(true)} className="btn btn-neutral relative">
+        <OGDialogTrigger ref={openButtonRef} className="btn btn-neutral relative">
           <FileImage className="mr-2 flex w-[22px] items-center stroke-1" />
           <span>{localize('com_nav_change_picture')}</span>
-        </button>
+        </OGDialogTrigger>
       </div>
 
-      <Dialog
-        open={isDialogOpen}
-        onOpenChange={(open) => {
-          setDialogOpen(open);
-          if (!open) {
-            resetImage();
-          }
-        }}
+      <OGDialogContent
+        className={cn('bg-surface-tertiary text-text-primary shadow-2xl  md:h-auto md:w-[450px]')}
+        style={{ borderRadius: '12px' }}
       >
-        <DialogContent
-          className={cn('shadow-2xl dark:bg-gray-700 dark:text-white md:h-auto md:w-[450px]')}
-          style={{ borderRadius: '12px' }}
-        >
-          <DialogHeader>
-            <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
-              {image ? localize('com_ui_preview') : localize('com_ui_upload_image')}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="flex flex-col items-center justify-center">
-            {image ? (
-              <>
-                <div className="relative overflow-hidden rounded-full">
-                  <AvatarEditor
-                    ref={editorRef}
-                    image={image}
-                    width={250}
-                    height={250}
-                    border={0}
-                    borderRadius={125}
-                    color={[255, 255, 255, 0.6]}
-                    scale={scale}
-                    rotate={rotation}
-                  />
-                </div>
-                <div className="mt-4 flex w-full flex-col items-center space-y-4">
-                  <div className="flex w-full items-center justify-center space-x-4">
-                    <span className="text-sm">Zoom:</span>
-                    <Slider
-                      value={[scale]}
-                      min={1}
-                      max={5}
-                      step={0.001}
-                      onValueChange={handleScaleChange}
-                      className="w-2/3 max-w-xs"
-                    />
-                  </div>
-                  <button
-                    onClick={handleRotate}
-                    className="rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500"
-                  >
-                    <RotateCw className="h-5 w-5" />
-                  </button>
-                </div>
-                <button
-                  className={cn(
-                    'mt-4 flex items-center rounded px-4 py-2 text-white transition-colors hover:bg-green-600 hover:text-gray-200',
-                    isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500',
-                  )}
-                  onClick={handleUpload}
-                  disabled={isUploading}
-                >
-                  {isUploading ? (
-                    <Spinner className="icon-sm mr-2" />
-                  ) : (
-                    <Upload className="mr-2 h-5 w-5" />
-                  )}
-                  {localize('com_ui_upload')}
-                </button>
-              </>
-            ) : (
-              <div
-                className="flex h-64 w-64 flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
-                onDrop={handleDrop}
-                onDragOver={handleDragOver}
-              >
-                <FileImage className="mb-4 h-12 w-12 text-gray-400" />
-                <p className="mb-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                  {localize('com_ui_drag_drop')}
-                </p>
-                <button
-                  onClick={openFileDialog}
-                  className="rounded bg-gray-200 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500"
-                >
-                  {localize('com_ui_select_file')}
-                </button>
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  className="hidden"
-                  accept=".png, .jpg, .jpeg"
-                  onChange={handleFileChange}
+        <OGDialogHeader>
+          <OGDialogTitle className="text-lg font-medium leading-6 text-text-primary">
+            {image ? localize('com_ui_preview') : localize('com_ui_upload_image')}
+          </OGDialogTitle>
+        </OGDialogHeader>
+        <div className="flex flex-col items-center justify-center">
+          {image ? (
+            <>
+              <div className="relative overflow-hidden rounded-full">
+                <AvatarEditor
+                  ref={editorRef}
+                  image={image}
+                  width={250}
+                  height={250}
+                  border={0}
+                  borderRadius={125}
+                  color={[255, 255, 255, 0.6]}
+                  scale={scale}
+                  rotate={rotation}
                 />
               </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
+              <div className="mt-4 flex w-full flex-col items-center space-y-4">
+                <div className="flex w-full items-center justify-center space-x-4">
+                  <span className="text-sm">Zoom:</span>
+                  <Slider
+                    value={[scale]}
+                    min={1}
+                    max={5}
+                    step={0.001}
+                    onValueChange={handleScaleChange}
+                    className="w-2/3 max-w-xs"
+                  />
+                </div>
+                <button
+                  onClick={handleRotate}
+                  className="rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500"
+                >
+                  <RotateCw className="h-5 w-5" />
+                </button>
+              </div>
+              <button
+                className={cn(
+                  'mt-4 flex items-center rounded px-4 py-2 text-white transition-colors hover:bg-green-600 hover:text-gray-200',
+                  isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500',
+                )}
+                onClick={handleUpload}
+                disabled={isUploading}
+              >
+                {isUploading ? (
+                  <Spinner className="icon-sm mr-2" />
+                ) : (
+                  <Upload className="mr-2 h-5 w-5" />
+                )}
+                {localize('com_ui_upload')}
+              </button>
+            </>
+          ) : (
+            <div
+              className="flex h-64 w-64 flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+            >
+              <FileImage className="mb-4 h-12 w-12 text-gray-400" />
+              <p className="mb-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                {localize('com_ui_drag_drop')}
+              </p>
+              <button
+                onClick={openFileDialog}
+                className="rounded bg-gray-200 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500"
+              >
+                {localize('com_ui_select_file')}
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                accept=".png, .jpg, .jpeg"
+                onChange={handleFileChange}
+              />
+            </div>
+          )}
+        </div>
+      </OGDialogContent>
+    </OGDialog>
   );
 }
 

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

@@ -1,21 +1,13 @@
 import { memo } from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-import { SettingsTabValues } from 'librechat-data-provider';
 import CodeArtifacts from './CodeArtifacts';
 
 function Beta() {
   return (
-    <Tabs.Content
-      value={SettingsTabValues.BETA}
-      role="tabpanel"
-      className="w-full md:min-h-[271px]"
-    >
-      <div className="flex flex-col gap-3 text-sm text-text-primary">
-        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-          <CodeArtifacts />
-        </div>
+    <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <CodeArtifacts />
       </div>
-    </Tabs.Content>
+    </div>
   );
 }
 

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

@@ -1,6 +1,4 @@
 import { memo } from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-import { SettingsTabValues } from 'librechat-data-provider';
 import FontSizeSelector from './FontSizeSelector';
 import SendMessageKeyEnter from './EnterToSend';
 import ShowCodeSwitch from './ShowCodeSwitch';
@@ -12,32 +10,30 @@ import SaveDraft from './SaveDraft';
 
 function Chat() {
   return (
-    <Tabs.Content value={SettingsTabValues.CHAT} role="tabpanel" className="md: w-full">
-      <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <FontSizeSelector />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <ChatDirection />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <SendMessageKeyEnter />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <ShowCodeSwitch />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <SaveDraft />
-        </div>
-        <ForkSettings />
-        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-          <ModularChat />
-        </div>
-        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-          <LaTeXParsing />
-        </div>
+    <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
+      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+        <FontSizeSelector />
       </div>
-    </Tabs.Content>
+      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+        <ChatDirection />
+      </div>
+      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+        <SendMessageKeyEnter />
+      </div>
+      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+        <ShowCodeSwitch />
+      </div>
+      <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
+        <SaveDraft />
+      </div>
+      <ForkSettings />
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <ModularChat />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <LaTeXParsing />
+      </div>
+    </div>
   );
 }
 

client/src/components/Nav/SettingsTabs/Chat/ChatDirection.tsx

@@ -14,16 +14,22 @@ const ChatDirection = () => {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <span>{localize('com_nav_chat_direction')}</span>
+        <span id="chat-direction-label">{localize('com_nav_chat_direction')}</span>
       </div>
-      <label
+      <button
         onClick={toggleChatDirection}
         data-testid="chatDirection"
-        className="btn btn-neutral relative"
-        style={{ userSelect: 'none' }}
+        className="btn btn-neutral relative ring-ring-primary"
+        aria-labelledby="chat-direction-label chat-direction-status"
+        aria-pressed={direction === 'RTL'}
       >
-        {direction.toLowerCase()}
-      </label>
+        <span aria-hidden="true">{direction.toLowerCase()}</span>
+        <span id="chat-direction-status" className="sr-only">
+          {direction === 'LTR'
+            ? localize('chat_direction_left_to_right')
+            : localize('chat_direction_right_to_left')}
+        </span>
+      </button>
     </div>
   );
 };

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

@@ -1,6 +1,5 @@
 import { memo } from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-import { SettingsTabValues, PermissionTypes, Permissions } from 'librechat-data-provider';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import HoverCardSettings from '~/components/Nav/SettingsTabs/HoverCardSettings';
 import { useLocalize, useHasAccess } from '~/hooks';
 import SlashCommandSwitch from './SlashCommandSwitch';
@@ -21,35 +20,29 @@ function Commands() {
   });
 
   return (
-    <Tabs.Content
-      value={SettingsTabValues.COMMANDS}
-      role="tabpanel"
-      className="w-full md:min-h-[271px]"
-    >
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <h3 className="text-lg font-medium text-text-primary">
-            {localize('com_nav_chat_commands')}
-          </h3>
-          <HoverCardSettings side="bottom" text="com_nav_chat_commands_info" />
-        </div>
-        <div className="flex flex-col gap-3 text-sm text-text-primary">
-          <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-            <AtCommandSwitch />
-          </div>
-          {hasAccessToMultiConvo === true && (
-            <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-              <PlusCommandSwitch />
-            </div>
-          )}
-          {hasAccessToPrompts === true && (
-            <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-              <SlashCommandSwitch />
-            </div>
-          )}
-        </div>
+    <div className="space-y-4 p-1">
+      <div className="flex items-center gap-2">
+        <h3 className="text-lg font-medium text-text-primary">
+          {localize('com_nav_chat_commands')}
+        </h3>
+        <HoverCardSettings side="bottom" text="com_nav_chat_commands_info" />
       </div>
-    </Tabs.Content>
+      <div className="flex flex-col gap-3 text-sm text-text-primary">
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <AtCommandSwitch />
+        </div>
+        {hasAccessToMultiConvo === true && (
+          <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+            <PlusCommandSwitch />
+          </div>
+        )}
+        {hasAccessToPrompts === true && (
+          <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+            <SlashCommandSwitch />
+          </div>
+        )}
+      </div>
+    </div>
   );
 }
 

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

@@ -1,7 +1,5 @@
 import React, { useState, useRef } from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
 import { useClearConversationsMutation } from 'librechat-data-provider/react-query';
-import { SettingsTabValues } from 'librechat-data-provider';
 import { useConversation, useConversations, useOnClickOutside } from '~/hooks';
 import { RevokeKeysButton } from './RevokeKeysButton';
 import { DeleteCacheButton } from './DeleteCacheButton';
@@ -37,35 +35,28 @@ function Data() {
   };
 
   return (
-    <Tabs.Content
-      value={SettingsTabValues.DATA}
-      role="tabpanel"
-      className="w-full md:min-h-[271px]"
-      ref={dataTabRef}
-    >
-      <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <ImportConversations />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <SharedLinks />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <RevokeKeysButton all={true} />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <DeleteCacheButton />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <ClearChatsButton
-            confirmClear={confirmClearConvos}
-            onClick={clearConvos}
-            showText={true}
-            mutation={clearConvosMutation}
-          />
-        </div>
+    <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <ImportConversations />
       </div>
-    </Tabs.Content>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <SharedLinks />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <RevokeKeysButton all={true} />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <DeleteCacheButton />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <ClearChatsButton
+          confirmClear={confirmClearConvos}
+          onClick={clearConvos}
+          showText={true}
+          mutation={clearConvosMutation}
+        />
+      </div>
+    </div>
   );
 }
 

client/src/components/Nav/SettingsTabs/Data/ImportConversations.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Import } from 'lucide-react';
 import type { TError } from 'librechat-data-provider';
 import { useUploadConversationsMutation } from '~/data-provider';
@@ -9,6 +9,7 @@ import { cn } from '~/utils';
 
 function ImportConversations() {
   const localize = useLocalize();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const { showToast } = useToastContext();
   const [, setErrors] = useState<string[]>([]);
@@ -26,7 +27,7 @@ function ImportConversations() {
       console.error('Error: ', error);
       setAllowImport(true);
       setError(
-        (error as TError)?.response?.data?.message ?? 'An error occurred while uploading the file.',
+        (error as TError).response?.data?.message ?? 'An error occurred while uploading the file.',
       );
       if (error?.toString().includes('Unsupported import type')) {
         showToast({
@@ -44,13 +45,12 @@ function ImportConversations() {
 
   const startUpload = async (file: File) => {
     const formData = new FormData();
-    formData.append('file', file, encodeURIComponent(file?.name || 'File'));
+    formData.append('file', file, encodeURIComponent(file.name || 'File'));
 
     uploadFile.mutate(formData);
   };
 
   const handleFiles = async (_file: File) => {
-    /* Process files */
     try {
       await startUpload(_file);
     } catch (error) {
@@ -59,33 +59,49 @@ function ImportConversations() {
     }
   };
 
-  const handleFileChange = (event) => {
-    const file = event.target.files[0];
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
     if (file) {
       handleFiles(file);
     }
   };
 
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleImportClick();
+    }
+  };
+
   return (
     <div className="flex items-center justify-between">
       <div>{localize('com_ui_import_conversation_info')}</div>
-      <label htmlFor={'import-conversations-file'} className="btn btn-neutral relative">
+      <button
+        onClick={handleImportClick}
+        onKeyDown={handleKeyDown}
+        disabled={!allowImport}
+        aria-label={localize('com_ui_import_conversation')}
+        className="btn btn-neutral relative"
+      >
         {allowImport ? (
           <Import className="mr-1 flex h-4 w-4 items-center stroke-1" />
         ) : (
           <Spinner className="mr-1 w-4" />
         )}
         <span>{localize('com_ui_import_conversation')}</span>
-        <input
-          id={'import-conversations-file'}
-          disabled={!allowImport}
-          value=""
-          type="file"
-          className={cn('hidden')}
-          accept=".json"
-          onChange={handleFileChange}
-        />
-      </label>
+      </button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        className={cn('hidden')}
+        accept=".json"
+        onChange={handleFileChange}
+        aria-hidden="true"
+      />
     </div>
   );
 }

client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.tsx

@@ -25,7 +25,7 @@ export default function AutoScrollSwitch({
         id="autoScroll"
         checked={autoScroll}
         onCheckedChange={handleCheckedChange}
-        className="ml-4 mt-2"
+        className="ml-4 mt-2 ring-ring-primary"
         data-testid="autoScroll"
       />
     </div>

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

@@ -1,7 +1,5 @@
 import { useRecoilState } from 'recoil';
-import * as Tabs from '@radix-ui/react-tabs';
 import Cookies from 'js-cookie';
-import { SettingsTabValues } from 'librechat-data-provider';
 import React, { useContext, useCallback, useRef } from 'react';
 import type { TDangerButtonProps } from '~/common';
 import { ThemeContext, useLocalize } from '~/hooks';
@@ -151,32 +149,25 @@ function General() {
   );
 
   return (
-    <Tabs.Content
-      value={SettingsTabValues.GENERAL}
-      role="tabpanel"
-      className="w-full md:min-h-[271px]"
-      ref={contentRef}
-    >
-      <div className="flex flex-col gap-3 text-sm text-text-primary">
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <ThemeSelector theme={theme} onChange={changeTheme} />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <LangSelector langcode={langcode} onChange={changeLang} />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <AutoScrollSwitch />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <HideSidePanelSwitch />
-        </div>
-        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-          <ArchivedChats />
-        </div>
-        {/* <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-600">
-        </div> */}
+    <div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <ThemeSelector theme={theme} onChange={changeTheme} />
       </div>
-    </Tabs.Content>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <LangSelector langcode={langcode} onChange={changeLang} />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <AutoScrollSwitch />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <HideSidePanelSwitch />
+      </div>
+      <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+        <ArchivedChats />
+      </div>
+      {/* <div className="border-b pb-3 last-of-type:border-b-0 border-border-medium">
+        </div> */}
+    </div>
   );
 }
 

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

@@ -1,7 +1,6 @@
 import { useRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import { Lightbulb, Cog } from 'lucide-react';
-import { SettingsTabValues } from 'librechat-data-provider';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { useGetCustomConfigSpeechQuery } from 'librechat-data-provider/react-query';
 import {
@@ -141,130 +140,123 @@ function Speech() {
   useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
 
   return (
-    <Tabs.Content
-      value={SettingsTabValues.SPEECH}
-      role="tabpanel"
-      className="w-full md:min-h-[271px]"
-      ref={contentRef}
+    <Tabs.Root
+      defaultValue={'simple'}
+      orientation="horizontal"
+      value={advancedMode ? 'advanced' : 'simple'}
     >
-      <Tabs.Root
-        defaultValue={'simple'}
-        orientation="horizontal"
-        value={advancedMode ? 'advanced' : 'simple'}
-      >
-        <div className="sticky -top-1 z-50 mb-4 bg-white dark:bg-gray-700">
-          <Tabs.List className="flex justify-center bg-white dark:bg-gray-700">
-            <Tabs.Trigger
-              onClick={() => setAdvancedMode(false)}
-              className={cn(
-                'group m-1 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
-                isSmallScreen
-                  ? 'flex-row items-center justify-center text-sm text-gray-700 radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-gray-300 dark:radix-state-active:text-white'
-                  : 'bg-white radix-state-active:bg-gray-100 dark:bg-gray-700',
-                'w-full',
-              )}
-              value="simple"
-              style={{ userSelect: 'none' }}
-            >
-              <Lightbulb />
-              Simple
-            </Tabs.Trigger>
-            <Tabs.Trigger
-              onClick={() => setAdvancedMode(true)}
-              className={cn(
-                'group m-1 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
-                isSmallScreen
-                  ? 'flex-row items-center justify-center text-sm text-gray-700 radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-gray-300 dark:radix-state-active:text-white'
-                  : 'bg-white radix-state-active:bg-gray-100 dark:bg-gray-700',
-                'w-full',
-              )}
-              value="advanced"
-              style={{ userSelect: 'none' }}
-            >
-              <Cog />
-              Advanced
-            </Tabs.Trigger>
-          </Tabs.List>
+      <div className="sticky -top-1 z-50 mb-4 bg-white dark:bg-gray-700">
+        <Tabs.List className="flex justify-center bg-white dark:bg-gray-700">
+          <Tabs.Trigger
+            onClick={() => setAdvancedMode(false)}
+            className={cn(
+              'group m-1 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+              isSmallScreen
+                ? 'flex-row items-center justify-center text-sm text-gray-700 radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-gray-300 dark:radix-state-active:text-white'
+                : 'bg-white radix-state-active:bg-gray-100 dark:bg-gray-700',
+              'w-full',
+            )}
+            value="simple"
+            style={{ userSelect: 'none' }}
+          >
+            <Lightbulb />
+            Simple
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            onClick={() => setAdvancedMode(true)}
+            className={cn(
+              'group m-1 flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm text-black transition-all duration-200 ease-in-out radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-600',
+              isSmallScreen
+                ? 'flex-row items-center justify-center text-sm text-gray-700 radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-gray-300 dark:radix-state-active:text-white'
+                : 'bg-white radix-state-active:bg-gray-100 dark:bg-gray-700',
+              'w-full',
+            )}
+            value="advanced"
+            style={{ userSelect: 'none' }}
+          >
+            <Cog />
+            Advanced
+          </Tabs.Trigger>
+        </Tabs.List>
+      </div>
+
+      <Tabs.Content value={'simple'}>
+        <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <SpeechToTextSwitch />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <EngineSTTDropdown external={sttExternal} />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <LanguageSTTDropdown />
+          </div>
+          <div className="h-px bg-black/20 bg-white/20" role="none" />
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <TextToSpeechSwitch />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <EngineTTSDropdown external={ttsExternal} />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <VoiceDropdown />
+          </div>
         </div>
+      </Tabs.Content>
 
-        <Tabs.Content value={'simple'}>
-          <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <SpeechToTextSwitch />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <EngineSTTDropdown external={sttExternal} />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <LanguageSTTDropdown />
-            </div>
-            <div className="h-px bg-black/20 bg-white/20" role="none" />
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <TextToSpeechSwitch />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <EngineTTSDropdown external={ttsExternal} />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <VoiceDropdown />
-            </div>
+      <Tabs.Content value={'advanced'}>
+        <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
+          <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+            <ConversationModeSwitch />
           </div>
-        </Tabs.Content>
-
-        <Tabs.Content value={'advanced'}>
-          <div className="flex flex-col gap-3 text-sm text-black dark:text-gray-50">
-            <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-              <ConversationModeSwitch />
-            </div>
-            <div className="h-px bg-black/20 bg-white/20" role="none" />
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <SpeechToTextSwitch />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <EngineSTTDropdown external={sttExternal} />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <LanguageSTTDropdown />
-            </div>
-            <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
-              <AutoTranscribeAudioSwitch />
-            </div>
-            {autoTranscribeAudio && (
-              <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
-                <DecibelSelector />
-              </div>
-            )}
-            <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-              <AutoSendTextSelector />
-            </div>
-            <div className="h-px bg-black/20 bg-white/20" role="none" />
-            <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-              <TextToSpeechSwitch />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <AutomaticPlaybackSwitch />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <EngineTTSDropdown external={ttsExternal} />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <VoiceDropdown />
-            </div>
-            {engineTTS === 'browser' && (
-              <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
-                <CloudBrowserVoicesSwitch />
-              </div>
-            )}
-            <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
-              <PlaybackRate />
-            </div>
-            <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
-              <CacheTTSSwitch />
-            </div>
+          <div className="h-px bg-black/20 bg-white/20" role="none" />
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <SpeechToTextSwitch />
           </div>
-        </Tabs.Content>
-      </Tabs.Root>
-    </Tabs.Content>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <EngineSTTDropdown external={sttExternal} />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <LanguageSTTDropdown />
+          </div>
+          <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
+            <AutoTranscribeAudioSwitch />
+          </div>
+          {autoTranscribeAudio && (
+            <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
+              <DecibelSelector />
+            </div>
+          )}
+          <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+            <AutoSendTextSelector />
+          </div>
+          <div className="h-px bg-black/20 bg-white/20" role="none" />
+          <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+            <TextToSpeechSwitch />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <AutomaticPlaybackSwitch />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <EngineTTSDropdown external={ttsExternal} />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <VoiceDropdown />
+          </div>
+          {engineTTS === 'browser' && (
+            <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
+              <CloudBrowserVoicesSwitch />
+            </div>
+          )}
+          <div className="border-b pb-2 last-of-type:border-b-0 dark:border-gray-700">
+            <PlaybackRate />
+          </div>
+          <div className="border-b last-of-type:border-b-0 dark:border-gray-700">
+            <CacheTTSSwitch />
+          </div>
+        </div>
+      </Tabs.Content>
+    </Tabs.Root>
   );
 }