🎨 style: Focus Outlines (#2913)

* style: add back focus ring removal as the outer/inner containers maintain focus stylings

* style: add focus outline to default buttonVariants class

client/src/components/Chat/Input/ChatForm.tsx

@@ -11,7 +11,7 @@ import { useChatContext, useAssistantsMapContext } from '~/Providers';
 import { useRequiresKey, useTextarea } from '~/hooks';
 import { TextareaAutosize } from '~/components/ui';
 import { useGetFileConfig } from '~/data-provider';
-import { cn, removeFocusOutlines } from '~/utils';
+import { cn, removeFocusRings } from '~/utils';
 import AttachFile from './Files/AttachFile';
 import AudioRecorder from './AudioRecorder';
 import { mainTextareaId } from '~/common';
@@ -142,8 +142,8 @@ const ChatForm = ({ index = 0 }) => {
                     : 'pl-3 md:pl-4',
                   'm-0 w-full resize-none border-0 bg-transparent py-[10px] placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5  ',
                   SpeechToText ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
-                  removeFocusOutlines,
                   'max-h-[65vh] md:max-h-[75vh]',
+                  removeFocusRings,
                 )}
               />
             )}

client/src/components/Endpoints/Settings/AgentSettings.tsx

@@ -2,15 +2,15 @@ import type { TModelSelectProps } from '~/common';
 import { ESide } from '~/common';
 import {
   Switch,
-  SelectDropDown,
   Label,
   Slider,
-  InputNumber,
   HoverCard,
+  InputNumber,
+  SelectDropDown,
   HoverCardTrigger,
 } from '~/components';
 import OptionHover from './OptionHover';
-import { cn, optionText, defaultTextProps, removeFocusOutlines } from '~/utils/';
+import { cn, optionText, defaultTextProps, removeFocusRings } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
@@ -42,7 +42,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Endpoints/Settings/Anthropic.tsx

@@ -11,7 +11,7 @@ import {
   SelectDropDown,
   HoverCardTrigger,
 } from '~/components/ui';
-import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils';
+import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils';
 import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
 import { useLocalize, useDebouncedInput } from '~/hooks';
 import OptionHover from './OptionHover';
@@ -59,7 +59,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Endpoints/Settings/Assistants.tsx

@@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import type { Assistant, TPreset } from 'librechat-data-provider';
 import type { TModelSelectProps, Option } from '~/common';
 import { Label, HoverCard, SelectDropDown, HoverCardTrigger } from '~/components/ui';
-import { cn, defaultTextProps, removeFocusOutlines, mapAssistants } from '~/utils';
+import { cn, defaultTextProps, removeFocusRings, mapAssistants } from '~/utils';
 import { useLocalize, useDebouncedInput, useAssistantListMap } from '~/hooks';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';
@@ -116,7 +116,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={modelOptions}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>
@@ -131,7 +131,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                 setValue={setAssistant}
                 availableValues={assistants as Option[]}
                 disabled={readonly}
-                className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+                className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
                 containerClassName="flex w-full resize-none"
               />
             </div>

client/src/components/Endpoints/Settings/BingAI.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useUpdateTokenCountMutation } from 'librechat-data-provider/react-query';
 import type { TUpdateTokenCountResponse } from 'librechat-data-provider';
-import { cn, defaultTextProps, removeFocusOutlines } from '~/utils/';
 import { Label, Checkbox, SelectDropDown } from '~/components/ui';
+import { cn, defaultTextProps, removeFocusRings } from '~/utils';
 import { useLocalize, useDebounce } from '~/hooks';
 import type { TSettingsProps } from '~/common';
 
@@ -60,7 +60,7 @@ export default function Settings({ conversation, setOption, readonly }: TSetting
             setValue={setToneStyle}
             availableValues={['Creative', 'Fast', 'Balanced', 'Precise']}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Endpoints/Settings/Google.tsx

@@ -10,7 +10,7 @@ import {
   SelectDropDown,
   HoverCardTrigger,
 } from '~/components/ui';
-import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils';
+import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils';
 import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
 import { useLocalize, useDebouncedInput } from '~/hooks';
 import OptionHover from './OptionHover';
@@ -59,7 +59,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Endpoints/Settings/OpenAI.tsx

@@ -17,7 +17,7 @@ import {
   SelectDropDown,
   HoverCardTrigger,
 } from '~/components/ui';
-import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils';
+import { cn, defaultTextProps, optionText, removeFocusOutlines, removeFocusRings } from '~/utils';
 import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
 import { DynamicTags } from '~/components/SidePanel/Parameters';
 import { useLocalize, useDebouncedInput } from '~/hooks';
@@ -109,7 +109,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -15,12 +15,13 @@ import {
   MultiSelectDropDown,
 } from '~/components/ui';
 import {
-  cn,
-  defaultTextProps,
-  optionText,
   removeFocusOutlines,
+  defaultTextProps,
+  removeFocusRings,
   processPlugins,
   selectPlugins,
+  optionText,
+  cn,
 } from '~/utils';
 import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
 import { useLocalize, useDebouncedInput } from '~/hooks';
@@ -126,7 +127,7 @@ export default function Settings({
             setValue={setModel}
             availableValues={models}
             disabled={readonly}
-            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
+            className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusRings)}
             containerClassName="flex w-full resize-none"
           />
         </div>

client/src/components/ui/Button.tsx

@@ -4,7 +4,7 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { cn } from '../../utils';
 
 const buttonVariants = cva(
-  'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none dark:hover:bg-gray-700 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-700',
+  'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors dark:hover:bg-gray-700 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-700',
   {
     variants: {
       variant: {

client/src/utils/index.ts

@@ -48,6 +48,8 @@ export const languages = [
 ];
 
 export const removeFocusOutlines = '';
+export const removeFocusRings =
+  'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
 
 export const cardStyle =
   'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-gray-50 dark:data-[state=open]:bg-gray-700';