🎨 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/Chat/ExportAndShareMenu.tsx

@@ -2,10 +2,11 @@ import { useState, useId, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Ariakit from '@ariakit/react';
 import { Upload, Share2 } from 'lucide-react';
-import { ShareButton } from '~/components/Conversations/ConvoOptions';
-import { useMediaQuery, useLocalize } from '~/hooks';
+import type * as t from '~/common';
 import ExportModal from '~/components/Nav/ExportConversation/ExportModal';
-import { DropdownPopup } from '~/components/ui';
+import { ShareButton } from '~/components/Conversations/ConvoOptions';
+import { DropdownPopup, TooltipAnchor } from '~/components/ui';
+import { useMediaQuery, useLocalize } from '~/hooks';
 import store from '~/store';
 
 export default function ExportAndShareMenu({
@@ -19,6 +20,7 @@ export default function ExportAndShareMenu({
   const [showShareDialog, setShowShareDialog] = useState(false);
 
   const menuId = useId();
+  const shareButtonRef = useRef<HTMLButtonElement>(null);
   const exportButtonRef = useRef<HTMLButtonElement>(null);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const conversation = useRecoilValue(store.conversationByIndex(0));
@@ -33,31 +35,33 @@ export default function ExportAndShareMenu({
     return null;
   }
 
-  const onOpenChange = (value: boolean) => {
-    setShowExports(value);
-  };
-
   const shareHandler = () => {
-    setIsPopoverActive(false);
     setShowShareDialog(true);
   };
 
   const exportHandler = () => {
-    setIsPopoverActive(false);
     setShowExports(true);
   };
 
-  const dropdownItems = [
+  const dropdownItems: t.MenuItemProps[] = [
     {
       label: localize('com_endpoint_export'),
       onClick: exportHandler,
       icon: <Upload className="icon-md mr-2 text-text-secondary" />,
+      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+      hideOnClick: false,
+      ref: exportButtonRef,
+      render: (props) => <button {...props} />,
     },
     {
       label: localize('com_ui_share'),
       onClick: shareHandler,
       icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
       show: isSharedButtonEnabled,
+      /** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
+      hideOnClick: false,
+      ref: shareButtonRef,
+      render: (props) => <button {...props} />,
     },
   ];
 
@@ -65,38 +69,44 @@ export default function ExportAndShareMenu({
     <>
       <DropdownPopup
         menuId={menuId}
+        focusLoop={true}
         isOpen={isPopoverActive}
         setIsOpen={setIsPopoverActive}
         trigger={
-          <Ariakit.MenuButton
-            ref={exportButtonRef}
-            id="export-menu-button"
-            aria-label="Export options"
-            className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
-          >
-            <Upload className="icon-md text-text-secondary" aria-hidden="true" focusable="false" />
-          </Ariakit.MenuButton>
+          <TooltipAnchor
+            description={localize('com_endpoint_export_share')}
+            render={
+              <Ariakit.MenuButton
+                id="export-menu-button"
+                aria-label="Export options"
+                className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
+              >
+                <Upload
+                  className="icon-md text-text-secondary"
+                  aria-hidden="true"
+                  focusable="false"
+                />
+              </Ariakit.MenuButton>
+            }
+          />
         }
         items={dropdownItems}
         className={isSmallScreen ? '' : 'absolute right-0 top-0 mt-2'}
       />
-      {showShareDialog && conversation.conversationId != null && (
-        <ShareButton
-          conversationId={conversation.conversationId}
-          title={conversation.title ?? ''}
-          showShareDialog={showShareDialog}
-          setShowShareDialog={setShowShareDialog}
-        />
-      )}
-      {showExports && (
-        <ExportModal
-          open={showExports}
-          onOpenChange={onOpenChange}
-          conversation={conversation}
-          triggerRef={exportButtonRef}
-          aria-label={localize('com_ui_export_convo_modal')}
-        />
-      )}
+      <ExportModal
+        open={showExports}
+        onOpenChange={setShowExports}
+        conversation={conversation}
+        triggerRef={exportButtonRef}
+        aria-label={localize('com_ui_export_convo_modal')}
+      />
+      <ShareButton
+        triggerRef={shareButtonRef}
+        conversationId={conversation.conversationId ?? ''}
+        title={conversation.title ?? ''}
+        open={showShareDialog}
+        onOpenChange={setShowShareDialog}
+      />
     </>
   );
 }