🎨 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 <danny@librechat.ai>

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -1,8 +1,9 @@
-import { useState, useId } from 'react';
+import { useState, useId, useRef } from 'react';
 import * as Menu from '@ariakit/react/menu';
 import { Ellipsis, Share2, Copy, Archive, Pen, Trash } from 'lucide-react';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { MouseEvent } from 'react';
+import type * as t from '~/common';
 import { useLocalize, useArchiveHandler, useNavigateToConvo } from '~/hooks';
 import { useToastContext, useChatContext } from '~/Providers';
 import { useDuplicateConversationMutation } from '~/data-provider';
@@ -34,6 +35,8 @@ export default function ConvoOptions({
   const archiveHandler = useArchiveHandler(conversationId, true, retainView);
   const { navigateToConvo } = useNavigateToConvo(index);
   const { showToast } = useToastContext();
+  const shareButtonRef = useRef<HTMLButtonElement>(null);
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
@@ -62,12 +65,10 @@ export default function ConvoOptions({
   });
 
   const shareHandler = () => {
-    setIsPopoverActive(false);
     setShowShareDialog(true);
   };
 
   const deleteHandler = () => {
-    setIsPopoverActive(false);
     setShowDeleteDialog(true);
   };
 
@@ -78,12 +79,16 @@ export default function ConvoOptions({
     });
   };
 
-  const dropdownItems = [
+  const dropdownItems: t.MenuItemProps[] = [
     {
       label: localize('com_ui_share'),
       onClick: shareHandler,
       icon: <Share2 className="icon-sm mr-2 text-text-primary" />,
       show: startupConfig && startupConfig.sharedLinksEnabled,
+      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+      hideOnClick: false,
+      ref: shareButtonRef,
+      render: (props) => <button {...props} />,
     },
     {
       label: localize('com_ui_rename'),
@@ -104,6 +109,9 @@ export default function ConvoOptions({
       label: localize('com_ui_delete'),
       onClick: deleteHandler,
       icon: <Trash className="icon-sm mr-2 text-text-primary" />,
+      hideOnClick: false,
+      ref: deleteButtonRef,
+      render: (props) => <button {...props} />,
     },
   ];
 
@@ -135,8 +143,9 @@ export default function ConvoOptions({
         <ShareButton
           title={title ?? ''}
           conversationId={conversationId ?? ''}
-          showShareDialog={showShareDialog}
-          setShowShareDialog={setShowShareDialog}
+          open={showShareDialog}
+          onOpenChange={setShowShareDialog}
+          triggerRef={shareButtonRef}
         />
       )}
       {showDeleteDialog && (
@@ -146,6 +155,7 @@ export default function ConvoOptions({
           conversationId={conversationId ?? ''}
           showDeleteDialog={showDeleteDialog}
           setShowDeleteDialog={setShowDeleteDialog}
+          triggerRef={deleteButtonRef}
         />
       )}
     </>

client/src/components/Conversations/ConvoOptions/DeleteButton.tsx

@@ -14,6 +14,7 @@ type DeleteButtonProps = {
   title: string;
   showDeleteDialog?: boolean;
   setShowDeleteDialog?: (value: boolean) => void;
+  triggerRef?: React.RefObject<HTMLButtonElement>;
 };
 
 export function DeleteConversationDialog({
@@ -81,13 +82,18 @@ export default function DeleteButton({
   title,
   showDeleteDialog,
   setShowDeleteDialog,
+  triggerRef,
 }: DeleteButtonProps) {
   if (showDeleteDialog === undefined && setShowDeleteDialog === undefined) {
     return null;
   }
 
+  if (!conversationId) {
+    return null;
+  }
+
   return (
-    <OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+    <OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog} triggerRef={triggerRef}>
       <DeleteConversationDialog
         conversationId={conversationId}
         retainView={retainView}

client/src/components/Conversations/ConvoOptions/ShareButton.tsx

@@ -12,13 +12,17 @@ import { useLocalize } from '~/hooks';
 export default function ShareButton({
   conversationId,
   title,
-  showShareDialog,
-  setShowShareDialog,
+  open,
+  onOpenChange,
+  triggerRef,
+  children,
 }: {
   conversationId: string;
   title: string;
-  showShareDialog: boolean;
-  setShowShareDialog: (value: boolean) => void;
+  open: boolean;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+  triggerRef?: React.RefObject<HTMLButtonElement>;
+  children?: React.ReactNode;
 }) {
   const localize = useLocalize();
   const { showToast } = useToastContext();
@@ -27,6 +31,12 @@ export default function ShareButton({
   const [isUpdated, setIsUpdated] = useState(false);
   const [isNewSharedLink, setIsNewSharedLink] = useState(false);
 
+  useEffect(() => {
+    if (!open && triggerRef && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [open, triggerRef]);
+
   useEffect(() => {
     if (isLoading || share) {
       return;
@@ -55,6 +65,10 @@ export default function ShareButton({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (!conversationId) {
+    return null;
+  }
+
   const buttons = share && (
     <SharedLinkButton
       share={share}
@@ -66,7 +80,8 @@ export default function ShareButton({
   );
 
   return (
-    <OGDialog open={showShareDialog} onOpenChange={setShowShareDialog}>
+    <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
+      {children}
       <OGDialogTemplate
         buttons={buttons}
         showCloseButton={true}
@@ -87,7 +102,7 @@ export default function ShareButton({
                     : localize('com_ui_share_updated_message');
                 }
 
-                return share?.isPublic
+                return share?.isPublic === true
                   ? localize('com_ui_share_update_message')
                   : localize('com_ui_share_create_message');
               })()}