🎨 feat: enhance Chat Input UI, File Mgmt. UI, Bookmarks a11y (#5112)

* 🎨 feat: improve file display and overflow handling in SidePanel components * 🎨 feat: enhance bookmarks management UI and improve accessibility features * 🎨 feat: enhance BookmarkTable and BookmarkTableRow components for improved layout and performance * 🎨 feat: enhance file display and interaction in FilesView and ImagePreview components * 🎨 feat: adjust minimum width for filename filter input in DataTable component * 🎨 feat: enhance file upload UI with improved layout and styling adjustments * 🎨 feat: add surface-hover-alt color and update FileContainer styling for improved UI * 🎨 feat: update ImagePreview component styling for improved visual consistency * 🎨 feat: add MaximizeChatSpace component and integrate chat space maximization feature * 🎨 feat: enhance DataTable component with transition effects and update Checkbox styling for improved accessibility * fix: enhance a11y for Bookmark buttons by adding space key support, ARIA labels, and correct html role for key presses * fix: return focus back to trigger for BookmarkEditDialog (Edit and new bookmark buttons) * refactor: ShareButton and ExportModal components children prop support; refactor DropdownPopup item handling * refactor: enhance ExportAndShareMenu and ShareButton components with improved props handling and accessibility features * refactor: add ref prop support to MenuItemProps and update ExportAndShareMenu and DropdownPopup components so focus correctly returns to menu item * refactor: enhance ConvoOptions and DeleteButton components with improved props handling and accessibility features * refactor: add triggerRef support to DeleteButton and update ConvoOptions for improved dialog handling * refactor: accessible bookmarks menu * refactor: improve styling and accessibility for bookmarks components * refactor: add focusLoop support to DropdownPopup and update BookmarkMenu with Tooltip * refactor: integrate TooltipAnchor into ExportAndShareMenu for enhanced accessibility --------- Co-authored-by: Danny Avila <[email protected]>
danny-avila · Dec 29, 2024 · cb19216 · cb19216
1 parent d9c59b0
commit cb19216
Show file tree

Hide file tree

Showing 50 changed files with 765 additions and 482 deletions.
diff --git a/client/src/common/index.ts b/client/src/common/index.ts
@@ -1,6 +1,7 @@
 export * from './a11y';
 export * from './artifacts';
 export * from './types';
+export * from './menus';
 export * from './tools';
 export * from './assistants-types';
 export * from './agents-types';
diff --git a/client/src/common/menus.ts b/client/src/common/menus.ts
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type RenderProp<
+  P = React.HTMLAttributes<any> & {
+    ref?: React.Ref<any>;
+  },
+> = (props: P) => React.ReactNode;
+
+export interface MenuItemProps {
+  id?: string;
+  label?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+  icon?: React.ReactNode;
+  kbd?: string;
+  show?: boolean;
+  disabled?: boolean;
+  separate?: boolean;
+  hideOnClick?: boolean;
+  dialog?: React.ReactElement;
+  ref?: React.Ref<any>;
+  render?:
+    | RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined }>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | undefined;
+}
diff --git a/client/src/components/Bookmarks/BookmarkEditDialog.tsx b/client/src/components/Bookmarks/BookmarkEditDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, Dispatch, SetStateAction } from 'react';
-import { TConversationTag, TConversation } from 'librechat-data-provider';
+import { TConversationTag } from 'librechat-data-provider';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { useConversationTagMutation } from '~/data-provider';
 import { OGDialog, Button, Spinner } from '~/components';
@@ -10,23 +10,27 @@ import { useLocalize } from '~/hooks';
 import { logger } from '~/utils';
 
 type BookmarkEditDialogProps = {
-  context: string;
-  bookmark?: TConversationTag;
-  conversation?: TConversation;
-  tags?: string[];
-  setTags?: (tags: string[]) => void;
   open: boolean;
   setOpen: Dispatch<SetStateAction<boolean>>;
+  tags?: string[];
+  setTags?: (tags: string[]) => void;
+  context: string;
+  bookmark?: TConversationTag;
+  conversationId?: string;
+  children?: React.ReactNode;
+  triggerRef?: React.RefObject<HTMLButtonElement>;
 };
 
 const BookmarkEditDialog = ({
-  context,
-  bookmark,
-  conversation,
-  tags,
-  setTags,
   open,
   setOpen,
+  tags,
+  setTags,
+  context,
+  bookmark,
+  children,
+  triggerRef,
+  conversationId,
 }: BookmarkEditDialogProps) => {
   const localize = useLocalize();
   const formRef = useRef<HTMLFormElement>(null);
@@ -44,12 +48,26 @@ const BookmarkEditDialog = ({
         });
         setOpen(false);
         logger.log('tag_mutation', 'tags before setting', tags);
+
         if (setTags && vars.addToConversation === true) {
           const newTags = [...(tags || []), vars.tag].filter(
             (tag) => tag !== undefined,
           ) as string[];
           setTags(newTags);
+
           logger.log('tag_mutation', 'tags after', newTags);
+          if (vars.tag == null || vars.tag === '') {
+            return;
+          }
+
+          setTimeout(() => {
+            const tagElement = document.getElementById(vars.tag ?? '');
+            console.log('tagElement', tagElement);
+            if (!tagElement) {
+              return;
+            }
+            tagElement.focus();
+          }, 5);
         }
       },
       onError: () => {
@@ -70,7 +88,8 @@ const BookmarkEditDialog = ({
   };
 
   return (
-    <OGDialog open={open} onOpenChange={setOpen}>
+    <OGDialog open={open} onOpenChange={setOpen} triggerRef={triggerRef}>
+      {children}
       <OGDialogTemplate
         title="Bookmark"
         showCloseButton={false}
@@ -80,7 +99,7 @@ const BookmarkEditDialog = ({
             tags={tags}
             setOpen={setOpen}
             mutation={mutation}
-            conversation={conversation}
+            conversationId={conversationId}
             bookmark={bookmark}
             formRef={formRef}
           />
@@ -91,6 +110,7 @@ const BookmarkEditDialog = ({
             type="submit"
             disabled={mutation.isLoading}
             onClick={handleSubmitForm}
+            className="text-white"
           >
             {mutation.isLoading ? <Spinner /> : localize('com_ui_save')}
           </Button>

diff --git a/client/src/components/Bookmarks/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm.tsx
@@ -2,11 +2,7 @@ import React, { useEffect } from 'react';
 import { QueryKeys } from 'librechat-data-provider';
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from '@tanstack/react-query';
-import type {
-  TConversation,
-  TConversationTag,
-  TConversationTagRequest,
-} from 'librechat-data-provider';
+import type { TConversationTag, TConversationTagRequest } from 'librechat-data-provider';
 import { Checkbox, Label, TextareaAutosize, Input } from '~/components';
 import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import { useConversationTagMutation } from '~/data-provider';
@@ -17,7 +13,7 @@ import { cn, logger } from '~/utils';
 type TBookmarkFormProps = {
   tags?: string[];
   bookmark?: TConversationTag;
-  conversation?: TConversation;
+  conversationId?: string;
   formRef: React.RefObject<HTMLFormElement>;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   mutation: ReturnType<typeof useConversationTagMutation>;
@@ -26,7 +22,7 @@ const BookmarkForm = ({
   tags,
   bookmark,
   mutation,
-  conversation,
+  conversationId,
   setOpen,
   formRef,
 }: TBookmarkFormProps) => {
@@ -46,8 +42,8 @@ const BookmarkForm = ({
     defaultValues: {
       tag: bookmark?.tag ?? '',
       description: bookmark?.description ?? '',
-      conversationId: conversation?.conversationId ?? '',
-      addToConversation: conversation ? true : false,
+      conversationId: conversationId ?? '',
+      addToConversation: conversationId != null && conversationId ? true : false,
     },
   });
 
@@ -142,7 +138,7 @@ const BookmarkForm = ({
             )}
           />
         </div>
-        {conversation && (
+        {conversationId != null && conversationId && (
           <div className="mt-2 flex w-full items-center">
             <Controller
               name="addToConversation"

diff --git a/client/src/components/Bookmarks/BookmarkItem.tsx b/client/src/components/Bookmarks/BookmarkItem.tsx
@@ -3,7 +3,6 @@ import { MenuItem } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
 import type { FC } from 'react';
 import { Spinner } from '~/components/svg';
-import { cn } from '~/utils';
 
 type MenuItemProps = {
   tag: string | React.ReactNode;
@@ -47,10 +46,7 @@ const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ..
   return (
     <MenuItem
       aria-label={tag as string}
-      className={cn(
-        'group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200',
-        selected ? 'bg-surface-hover' : 'data-[focus]:bg-surface-hover',
-      )}
+      className="group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200 focus:outline-none data-[focus]:bg-surface-secondary data-[focus]:ring-2 data-[focus]:ring-primary"
       {...rest}
       as="button"
       onClick={clickHandler}

diff --git a/client/src/components/Bookmarks/DeleteBookmarkButton.tsx b/client/src/components/Bookmarks/DeleteBookmarkButton.tsx
@@ -37,7 +37,7 @@ const DeleteBookmarkButton: FC<{
   }, [bookmark, deleteBookmarkMutation]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       event.stopPropagation();
       setOpen(!open);
@@ -49,6 +49,8 @@ const DeleteBookmarkButton: FC<{
       <OGDialog open={open} onOpenChange={setOpen}>
         <OGDialogTrigger asChild>
           <TooltipAnchor
+            role="button"
+            aria-label={localize('com_ui_bookmarks_delete')}
             description={localize('com_ui_delete')}
             className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
             tabIndex={tabIndex}

diff --git a/client/src/components/Bookmarks/EditBookmarkButton.tsx b/client/src/components/Bookmarks/EditBookmarkButton.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import type { FC } from 'react';
 import type { TConversationTag } from 'librechat-data-provider';
+import { TooltipAnchor, OGDialogTrigger } from '~/components/ui';
 import BookmarkEditDialog from './BookmarkEditDialog';
-import { TooltipAnchor } from '~/components/ui';
 import { EditIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 
@@ -16,31 +16,34 @@ const EditBookmarkButton: FC<{
   const [open, setOpen] = useState(false);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' || event.key === ' ') {
       setOpen(!open);
     }
   };
 
   return (
-    <>
-      <BookmarkEditDialog
-        context="EditBookmarkButton"
-        bookmark={bookmark}
-        open={open}
-        setOpen={setOpen}
-      />
-      <TooltipAnchor
-        description={localize('com_ui_edit')}
-        tabIndex={tabIndex}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onClick={() => setOpen(!open)}
-        className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
-        onKeyDown={handleKeyDown}
-      >
-        <EditIcon />
-      </TooltipAnchor>
-    </>
+    <BookmarkEditDialog
+      context="EditBookmarkButton"
+      bookmark={bookmark}
+      open={open}
+      setOpen={setOpen}
+    >
+      <OGDialogTrigger asChild>
+        <TooltipAnchor
+          role="button"
+          aria-label={localize('com_ui_bookmarks_edit')}
+          description={localize('com_ui_edit')}
+          tabIndex={tabIndex}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={() => setOpen(!open)}
+          className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover"
+          onKeyDown={handleKeyDown}
+        >
+          <EditIcon />
+        </TooltipAnchor>
+      </OGDialogTrigger>
+    </BookmarkEditDialog>
   );
 };