👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fi…

…x: SearchBar focus issues (#4091) * fix: cursor pointer not applying correct in the root component * fix: add cursor-not-allowed to disabled state in SendButton component * feat: update Dropdown to ariakit and changed LLM error's style * feat: switched to ariakit's Dropdown and style improvements * feat: archive updates * refactor: delete conversations in archive * refactor: settings * add cool settings animation * a11y: settings update * style: update settings * style: settings account settings menu; a11y(AccountSettings): switched to AriaKit * a11y: account settings update * style: update my files dialog * fix: tests * chore: remove console.log() --------- Co-authored-by: Danny Avila <danny@librechat.ai>
danny-avila · Sep 22, 2024 · 2d62eca · 2d62eca
1 parent eba2c9a
commit 2d62eca
Show file tree

Hide file tree

Showing 58 changed files with 1,053 additions and 823 deletions.
diff --git a/client/src/components/Bookmarks/DeleteBookmarkButton.tsx b/client/src/components/Bookmarks/DeleteBookmarkButton.tsx
@@ -50,7 +50,7 @@ const DeleteBookmarkButton: FC<{
         <OGDialogTrigger asChild>
           <TooltipAnchor
             description={localize('com_ui_delete')}
-            className="flex size-7 cursor-pointer items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
+            className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
             tabIndex={tabIndex}
             onFocus={onFocus}
             onBlur={onBlur}

diff --git a/client/src/components/Bookmarks/EditBookmarkButton.tsx b/client/src/components/Bookmarks/EditBookmarkButton.tsx
@@ -35,7 +35,7 @@ const EditBookmarkButton: FC<{
         onFocus={onFocus}
         onBlur={onBlur}
         onClick={() => setOpen(!open)}
-        className="flex size-7 cursor-pointer items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
+        className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
         onKeyDown={handleKeyDown}
       >
         <EditIcon />

diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
@@ -1,4 +1,4 @@
-import { memo, useRef, useMemo } from 'react';
+import { memo, useRef, useMemo, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
   supportsFiles,
@@ -44,6 +44,7 @@ const ChatForm = ({ index = 0 }) => {
   const TextToSpeech = useRecoilValue(store.textToSpeech);
   const automaticPlayback = useRecoilValue(store.automaticPlayback);
 
+  const isSearching = useRecoilValue(store.isSearching);
   const [showStopButton, setShowStopButton] = useRecoilState(store.showStopButtonByIndex(index));
   const [showPlusPopover, setShowPlusPopover] = useRecoilState(store.showPlusPopoverFamily(index));
   const [showMentionPopover, setShowMentionPopover] = useRecoilState(
@@ -123,6 +124,12 @@ const ChatForm = ({ index = 0 }) => {
     },
   });
 
+  useEffect(() => {
+    if (!isSearching && textAreaRef.current && !disableInputs) {
+      textAreaRef.current.focus();
+    }
+  }, [isSearching, disableInputs]);
+
   return (
     <form
       onSubmit={methods.handleSubmit((data) => submitMessage(data))}
@@ -164,9 +171,6 @@ const ChatForm = ({ index = 0 }) => {
             {endpoint && (
               <TextareaAutosize
                 {...registerProps}
-                // TODO: remove autofocus due to a11y issues
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus
                 ref={(e) => {
                   ref(e);
                   textAreaRef.current = e;

diff --git a/client/src/components/Chat/Input/Files/FilesView.tsx b/client/src/components/Chat/Input/Files/FilesView.tsx
@@ -1,10 +1,9 @@
 import { FileSources, FileContext } from 'librechat-data-provider';
 import type { TFile } from 'librechat-data-provider';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
+import { OGDialog, OGDialogContent, OGDialogHeader, OGDialogTitle } from '~/components';
 import { useGetFiles } from '~/data-provider';
 import { DataTable, columns } from './Table';
 import { useLocalize } from '~/hooks';
-import { cn } from '~/utils/';
 
 export default function Files({ open, onOpenChange }) {
   const localize = useLocalize();
@@ -19,20 +18,16 @@ export default function Files({ open, onOpenChange }) {
   });
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className={cn('w-11/12 overflow-x-auto shadow-2xl dark:bg-gray-700 dark:text-white')}
+    <OGDialog open={open} onOpenChange={onOpenChange}>
+      <OGDialogContent
+        title={localize('com_nav_my_files')}
+        className="w-11/12 overflow-x-auto bg-background text-text-primary shadow-2xl"
       >
-        <DialogHeader>
-          <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
-            {localize('com_nav_my_files')}
-          </DialogTitle>
-        </DialogHeader>
-        <div className="overflow-x-auto p-0 sm:p-6 sm:pt-4">
-          <DataTable columns={columns} data={files} />
-          <div className="mt-5 sm:mt-4" />
-        </div>
-      </DialogContent>
-    </Dialog>
+        <OGDialogHeader>
+          <OGDialogTitle>{localize('com_nav_my_files')}</OGDialogTitle>
+        </OGDialogHeader>
+        <DataTable columns={columns} data={files} />
+      </OGDialogContent>
+    </OGDialog>
   );
 }
diff --git a/client/src/components/Chat/Input/SendButton.tsx b/client/src/components/Chat/Input/SendButton.tsx
@@ -26,7 +26,7 @@ const SubmitButton = React.memo(
               id="send-button"
               disabled={props.disabled}
               className={cn(
-                'absolute rounded-lg border border-black p-0.5 text-white outline-offset-4 transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white',
+                'absolute rounded-lg border border-black p-0.5 text-white outline-offset-4 transition-colors enabled:bg-black disabled:cursor-not-allowed disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white',
                 props.isRTL
                   ? 'bottom-1.5 left-2 md:bottom-3 md:left-3'
                   : 'bottom-1.5 right-2 md:bottom-3 md:right-3',

diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/client/src/components/Chat/Messages/Content/MessageContent.tsx
@@ -57,7 +57,7 @@ export const ErrorMessage = ({
     <Container message={message}>
       <div
         className={cn(
-          'rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
+          'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
           className,
         )}
       >

diff --git a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
@@ -1,13 +1,12 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
 import type { TMessage } from 'librechat-data-provider';
 import { useDeleteConversationMutation } from '~/data-provider';
-import { OGDialog, OGDialogTrigger, Label, TooltipAnchor } from '~/components/ui';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
-import { TrashIcon } from '~/components/svg';
 import { useLocalize, useNewConvo } from '~/hooks';
+import { OGDialog, Label } from '~/components';
 
 type DeleteButtonProps = {
   conversationId: string;
@@ -17,19 +16,21 @@ type DeleteButtonProps = {
   setShowDeleteDialog?: (value: boolean) => void;
 };
 
-export default function DeleteButton({
+export function DeleteConversationDialog({
   conversationId,
   retainView,
   title,
-  showDeleteDialog,
-  setShowDeleteDialog,
-}: DeleteButtonProps) {
+}: {
+  conversationId: string;
+  retainView: () => void;
+  title: string;
+}) {
   const localize = useLocalize();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { newConversation } = useNewConvo();
   const { conversationId: currentConvoId } = useParams();
-  const [open, setOpen] = useState(false);
+
   const deleteConvoMutation = useDeleteConversationMutation({
     onSuccess: () => {
       if (currentConvoId === conversationId || currentConvoId === 'new') {
@@ -47,7 +48,7 @@ export default function DeleteButton({
     deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
   }, [conversationId, deleteConvoMutation, queryClient]);
 
-  const dialogContent = (
+  return (
     <OGDialogTemplate
       showCloseButton={false}
       title={localize('com_ui_delete_conversation')}
@@ -71,25 +72,26 @@ export default function DeleteButton({
       }}
     />
   );
+}
 
-  if (showDeleteDialog !== undefined && setShowDeleteDialog !== undefined) {
-    return (
-      <OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        {dialogContent}
-      </OGDialog>
-    );
+export default function DeleteButton({
+  conversationId,
+  retainView,
+  title,
+  showDeleteDialog,
+  setShowDeleteDialog,
+}: DeleteButtonProps) {
+  if (showDeleteDialog === undefined && setShowDeleteDialog === undefined) {
+    return null;
   }
 
   return (
-    <OGDialog open={open} onOpenChange={setOpen}>
-      <TooltipAnchor description={localize('com_ui_delete')}>
-        <OGDialogTrigger asChild>
-          <button>
-            <TrashIcon className="h-5 w-5" />
-          </button>
-        </OGDialogTrigger>
-      </TooltipAnchor>
-      {dialogContent}
+    <OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+      <DeleteConversationDialog
+        conversationId={conversationId}
+        retainView={retainView}
+        title={title}
+      />
     </OGDialog>
   );
 }
diff --git a/client/src/components/Conversations/ConvoOptions/index.ts b/client/src/components/Conversations/ConvoOptions/index.ts
@@ -1,4 +1,4 @@
-export { default as DeleteButton } from './DeleteButton';
+export * from './DeleteButton';
 export { default as ShareButton } from './ShareButton';
 export { default as SharedLinkButton } from './SharedLinkButton';
 export { default as ConvoOptions } from './ConvoOptions';