🎨 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/ui/Checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className,
     )}
     {...props}

client/src/components/ui/DropdownPopup.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
 import * as Ariakit from '@ariakit/react';
+import type * as t from '~/common';
 import { cn } from '~/utils';
 
 interface DropdownProps {
   trigger: React.ReactNode;
-  items: {
-    label?: string;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
-    icon?: React.ReactNode;
-    kbd?: string;
-    show?: boolean;
-    disabled?: boolean;
-    separate?: boolean;
-  }[];
+  items: t.MenuItemProps[];
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   className?: string;
@@ -22,6 +15,7 @@ interface DropdownProps {
   anchor?: { x: string; y: string };
   gutter?: number;
   modal?: boolean;
+  focusLoop?: boolean;
   menuId: string;
 }
 
@@ -35,10 +29,11 @@ const DropdownPopup: React.FC<DropdownProps> = ({
   gutter = 8,
   sameWidth,
   className,
+  focusLoop,
   iconClassName,
   itemClassName,
 }) => {
-  const menu = Ariakit.useMenuStore({ open: isOpen, setOpen: setIsOpen });
+  const menu = Ariakit.useMenuStore({ open: isOpen, setOpen: setIsOpen, focusLoop });
 
   return (
     <Ariakit.MenuProvider store={menu}>
@@ -52,22 +47,30 @@ const DropdownPopup: React.FC<DropdownProps> = ({
       >
         {items
           .filter((item) => item.show !== false)
-          .map((item, index) =>
-            item.separate === true ? (
-              <Ariakit.MenuSeparator key={index} className="my-1 h-px bg-white/10" />
-            ) : (
+          .map((item, index) => {
+            if (item.separate === true) {
+              return <Ariakit.MenuSeparator key={index} className="my-1 h-px bg-white/10" />;
+            }
+            return (
               <Ariakit.MenuItem
                 key={index}
+                id={item.id}
                 className={cn(
                   'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-3.5 text-sm text-text-primary outline-none transition-colors duration-200 hover:bg-surface-hover focus:bg-surface-hover md:px-2.5 md:py-2',
                   itemClassName,
                 )}
                 disabled={item.disabled}
+                render={item.render}
+                ref={item.ref}
+                hideOnClick={item.hideOnClick}
                 onClick={(event) => {
                   event.preventDefault();
                   if (item.onClick) {
                     item.onClick(event);
                   }
+                  if (item.hideOnClick === false) {
+                    return;
+                  }
                   menu.hide();
                 }}
               >
@@ -83,8 +86,8 @@ const DropdownPopup: React.FC<DropdownProps> = ({
                   </kbd>
                 )}
               </Ariakit.MenuItem>
-            ),
-          )}
+            );
+          })}
       </Ariakit.Menu>
     </Ariakit.MenuProvider>
   );