🎨 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/Nav/Bookmarks/BookmarkNav.tsx

@@ -26,8 +26,8 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
         <>
           <MenuButton
             className={cn(
-              'mt-text-sm flex h-10 w-full items-center gap-2 rounded-lg p-2 text-sm transition-colors duration-200 hover:bg-surface-hover',
-              open ? 'bg-surface-hover' : '',
+              'mt-text-sm flex h-10 w-full items-center gap-2 rounded-lg p-2 text-sm transition-colors duration-200 hover:bg-surface-active-alt',
+              open ? 'bg-surface-active-alt' : '',
               isSmallScreen ? 'h-12' : '',
             )}
             data-testid="bookmark-menu"
@@ -45,7 +45,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags, isSmallScreen }: Boo
               {tags.length > 0 ? tags.join(', ') : localize('com_ui_bookmarks')}
             </div>
           </MenuButton>
-          <MenuItems className="absolute left-0 top-full z-[100] mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-header-primary p-1.5 shadow-lg outline-none">
+          <MenuItems className="absolute left-0 top-full z-[100] mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-surface-active-alt  p-1.5 shadow-lg outline-none">
             {data && conversation && (
               <BookmarkContext.Provider value={{ bookmarks: data.filter((tag) => tag.count > 0) }}>
                 <BookmarkNavItems

client/src/components/Nav/ExportConversation/ExportModal.tsx

@@ -10,11 +10,13 @@ export default function ExportModal({
   onOpenChange,
   conversation,
   triggerRef,
+  children,
 }: {
   open: boolean;
   conversation: TConversation | null;
-  onOpenChange: (open: boolean) => void;
-  triggerRef: React.RefObject<HTMLButtonElement>;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+  triggerRef?: React.RefObject<HTMLButtonElement>;
+  children?: React.ReactNode;
 }) {
   const localize = useLocalize();
 
@@ -34,7 +36,7 @@ export default function ExportModal({
   ];
 
   useEffect(() => {
-    if (!open && triggerRef.current) {
+    if (!open && triggerRef && triggerRef.current) {
       triggerRef.current.focus();
     }
   }, [open, triggerRef]);
@@ -70,6 +72,7 @@ export default function ExportModal({
 
   return (
     <OGDialog open={open} onOpenChange={onOpenChange} triggerRef={triggerRef}>
+      {children}
       <OGDialogTemplate
         title={localize('com_nav_export_conversation')}
         className="max-w-full sm:max-w-2xl"

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import MaximizeChatSpace from './MaximizeChatSpace';
 import FontSizeSelector from './FontSizeSelector';
 import SendMessageKeyEnter from './EnterToSend';
 import ShowCodeSwitch from './ShowCodeSwitch';
@@ -20,6 +21,9 @@ function Chat() {
       <div className="pb-3">
         <SendMessageKeyEnter />
       </div>
+      <div className="pb-3">
+        <MaximizeChatSpace />
+      </div>
       <div className="pb-3">
         <ShowCodeSwitch />
       </div>

client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx

@@ -0,0 +1,38 @@
+import { useRecoilState } from 'recoil';
+import HoverCardSettings from '../HoverCardSettings';
+import { Switch } from '~/components/ui/Switch';
+import useLocalize from '~/hooks/useLocalize';
+import store from '~/store';
+
+export default function MaximizeChatSpace({
+  onCheckedChange,
+}: {
+  onCheckedChange?: (value: boolean) => void;
+}) {
+  const [maximizeChatSpace, setmaximizeChatSpace] = useRecoilState<boolean>(
+    store.maximizeChatSpace,
+  );
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setmaximizeChatSpace(value);
+    if (onCheckedChange) {
+      onCheckedChange(value);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div>{localize('com_nav_maximize_chat_space')}</div>
+      </div>
+      <Switch
+        id="maximizeChatSpace"
+        checked={maximizeChatSpace}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4"
+        data-testid="maximizeChatSpace"
+      />
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx

@@ -27,12 +27,13 @@ import {
 } from '~/components';
 import { useConversationsInfiniteQuery, useArchiveConvoMutation } from '~/data-provider';
 import { DeleteConversationDialog } from '~/components/Conversations/ConvoOptions';
-import { useAuthContext, useLocalize } from '~/hooks';
+import { useAuthContext, useLocalize, useMediaQuery } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function ArchivedChatsTable() {
   const localize = useLocalize();
   const { isAuthenticated } = useAuthContext();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const [isOpened, setIsOpened] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState('');
@@ -133,11 +134,15 @@ export default function ArchivedChatsTable() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-[50%] p-4">{localize('com_nav_archive_name')}</TableHead>
-                <TableHead className="w-[35%] p-1">
-                  {localize('com_nav_archive_created_at')}
+                <TableHead className={cn('p-4', isSmallScreen ? 'w-[70%]' : 'w-[50%]')}>
+                  {localize('com_nav_archive_name')}
                 </TableHead>
-                <TableHead className="w-[15%] p-1 text-right">
+                {!isSmallScreen && (
+                  <TableHead className="w-[35%] p-1">
+                    {localize('com_nav_archive_created_at')}
+                  </TableHead>
+                )}
+                <TableHead className={cn('p-1 text-right', isSmallScreen ? 'w-[30%]' : 'w-[15%]')}>
                   {localize('com_assistants_actions')}
                 </TableHead>
               </TableRow>
@@ -145,10 +150,10 @@ export default function ArchivedChatsTable() {
             <TableBody>
               {conversations.map((conversation: TConversation) => (
                 <TableRow key={conversation.conversationId} className="hover:bg-transparent">
-                  <TableCell className="flex items-center py-3 text-text-primary">
+                  <TableCell className="py-3 text-text-primary">
                     <button
                       type="button"
-                      className="flex"
+                      className="flex max-w-full"
                       aria-label="Open conversation in a new tab"
                       onClick={() => {
                         const conversationId = conversation.conversationId ?? '';
@@ -158,22 +163,29 @@ export default function ArchivedChatsTable() {
                         handleChatClick(conversationId);
                       }}
                     >
-                      <MessageCircle className="mr-1 h-5 w-5" />
-                      <u>{conversation.title}</u>
+                      <MessageCircle className="mr-1 h-5 min-w-[20px]" />
+                      <u className="truncate">{conversation.title}</u>
                     </button>
                   </TableCell>
-                  <TableCell className="p-1">
-                    <div className="flex justify-between">
-                      <div className="flex justify-start text-text-secondary">
-                        {new Date(conversation.createdAt).toLocaleDateString('en-US', {
-                          month: 'long',
-                          day: 'numeric',
-                          year: 'numeric',
-                        })}
+                  {!isSmallScreen && (
+                    <TableCell className="p-1">
+                      <div className="flex justify-between">
+                        <div className="flex justify-start text-text-secondary">
+                          {new Date(conversation.createdAt).toLocaleDateString('en-US', {
+                            month: 'short',
+                            day: 'numeric',
+                            year: 'numeric',
+                          })}
+                        </div>
                       </div>
-                    </div>
-                  </TableCell>
-                  <TableCell className="flex items-center justify-end gap-2 p-1">
+                    </TableCell>
+                  )}
+                  <TableCell
+                    className={cn(
+                      'flex items-center gap-1 p-1',
+                      isSmallScreen ? 'justify-end' : 'justify-end gap-2',
+                    )}
+                  >
                     <TooltipAnchor
                       description={localize('com_ui_unarchive')}
                       render={
@@ -182,7 +194,7 @@ export default function ArchivedChatsTable() {
                           aria-label="Unarchive conversation"
                           variant="ghost"
                           size="icon"
-                          className="size-8"
+                          className={cn('size-8', isSmallScreen && 'size-7')}
                           onClick={() => {
                             const conversationId = conversation.conversationId ?? '';
                             if (!conversationId) {
@@ -191,7 +203,7 @@ export default function ArchivedChatsTable() {
                             handleUnarchive(conversationId);
                           }}
                         >
-                          <ArchiveRestore className="size-4" />
+                          <ArchiveRestore className={cn('size-4', isSmallScreen && 'size-3.5')} />
                         </Button>
                       }
                     />
@@ -206,9 +218,9 @@ export default function ArchivedChatsTable() {
                               aria-label="Delete archived conversation"
                               variant="ghost"
                               size="icon"
-                              className="size-8"
+                              className={cn('size-8', isSmallScreen && 'size-7')}
                             >
-                              <TrashIcon className="size-4" />
+                              <TrashIcon className={cn('size-4', isSmallScreen && 'size-3.5')} />
                             </Button>
                           }
                         />