🎨 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/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';

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;
+}

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>

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 {
+import type { TConversationTag, TConversationTagRequest } from 'librechat-data-provider';
-  TConversation,
-  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 ?? '',
+      conversationId: conversationId ?? '',
-      addToConversation: conversation ? true : false,
+      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"

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(
+      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"
-        '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',
-      )}
       {...rest}
       as="button"
       onClick={clickHandler}

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}

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,20 +16,22 @@ 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}
-      />
+    >
+      <OGDialogTrigger asChild>
         <TooltipAnchor
+          role="button"
+          aria-label={localize('com_ui_bookmarks_edit')}
           description={localize('com_ui_edit')}
           tabIndex={tabIndex}
           onFocus={onFocus}
@@ -40,7 +42,8 @@ const EditBookmarkButton: FC<{
         >
           <EditIcon />
         </TooltipAnchor>
-    </>
+      </OGDialogTrigger>
+    </BookmarkEditDialog>
   );
 };
 

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 type * as t from '~/common';
-import { useMediaQuery, useLocalize } from '~/hooks';
 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={
+          <TooltipAnchor
+            description={localize('com_endpoint_export_share')}
+            render={
               <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" />
+                <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}
+        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}
+      />
     </>
   );
 }

client/src/components/Chat/Input/ChatForm.tsx

@@ -42,6 +42,7 @@ const ChatForm = ({ index = 0 }) => {
   const SpeechToText = useRecoilValue(store.speechToText);
   const TextToSpeech = useRecoilValue(store.textToSpeech);
   const automaticPlayback = useRecoilValue(store.automaticPlayback);
+  const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
 
   const isSearching = useRecoilValue(store.isSearching);
   const [showStopButton, setShowStopButton] = useRecoilState(store.showStopButtonByIndex(index));
@@ -142,7 +143,10 @@ const ChatForm = ({ index = 0 }) => {
   return (
     <form
       onSubmit={methods.handleSubmit((data) => submitMessage(data))}
-      className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl"
+      className={cn(
+        'mx-auto flex flex-row gap-3 pl-2 transition-all duration-200 last:mb-2',
+        maximizeChatSpace ? 'w-full max-w-full' : 'md:max-w-2xl xl:max-w-3xl',
+      )}
     >
       <div className="relative flex h-full flex-1 items-stretch md:flex-col">
         <div className="flex w-full items-center">

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -26,7 +26,7 @@ const AttachFile = ({
         disabled={isUploadDisabled}
         className={cn(
           'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
-          isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
+          isRTL ? 'bottom-2 right-2' : 'bottom-2 left-2',
         )}
         description={localize('com_sidepanel_attach_files')}
         onKeyDownCapture={(e) => {

client/src/components/Chat/Input/Files/DragDropOverlay.tsx

@@ -1,6 +1,12 @@
 export default function DragDropOverlay() {
   return (
-    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-200 opacity-80 dark:bg-gray-800 dark:text-gray-200">
+    <div
+      className="bg-surface-primary/85 fixed inset-0 z-[9999] flex flex-col items-center justify-center
+        gap-2 text-text-primary
+        backdrop-blur-[4px] transition-all duration-200
+        ease-in-out animate-in fade-in
+        zoom-in-95 hover:backdrop-blur-sm"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 132 108"
@@ -50,7 +56,7 @@ export default function DragDropOverlay() {
         </defs>
       </svg>
       <h3>Add anything</h3>
-      <h4 className="w-2/3">Drop any file here to add it to the conversation</h4>
+      <h4>Drop any file here to add it to the conversation</h4>
     </div>
   );
 }

client/src/components/Chat/Input/Files/FileContainer.tsx

@@ -15,13 +15,17 @@ const FileContainer = ({
 
   return (
     <div className="group relative inline-block text-sm text-text-primary">
-      <div className="relative overflow-hidden rounded-xl border border-border-medium">
+      <div className="relative overflow-hidden rounded-2xl border border-border-light">
-        <div className="w-60 bg-surface-active p-2">
+        <div className="w-56 bg-surface-hover-alt p-1.5">
           <div className="flex flex-row items-center gap-2">
             <FilePreview file={file} fileType={fileType} className="relative" />
             <div className="overflow-hidden">
-              <div className="truncate font-medium">{file.filename}</div>
+              <div className="truncate font-medium" title={file.filename}>
-              <div className="truncate text-text-secondary">{fileType.title}</div>
+                {file.filename}
+              </div>
+              <div className="truncate text-text-secondary" title={fileType.title}>
+                {fileType.title}
+              </div>
             </div>
           </div>
         </div>

client/src/components/Chat/Input/Files/FileFormWrapper.tsx

@@ -70,9 +70,7 @@ function FileFormWrapper({
         abortUpload={abortUpload}
         setFilesLoading={setFilesLoading}
         isRTL={isRTL}
-        Wrapper={({ children }) => (
+        Wrapper={({ children }) => <div className="mx-2 mt-2 flex flex-wrap gap-2">{children}</div>}
-          <div className="mx-2 mt-2 flex flex-wrap gap-2 px-2.5 md:pl-0 md:pr-4">{children}</div>
-        )}
       />
       {children}
       {renderAttachFile()}

client/src/components/Chat/Input/Files/FilePreview.tsx

@@ -21,7 +21,7 @@ const FilePreview = ({
 }) => {
   const radius = 55; // Radius of the SVG circle
   const circumference = 2 * Math.PI * radius;
-  const progress = useProgress(file?.['progress'] ?? 1, 0.001, (file as ExtendedFile)?.size ?? 1);
+  const progress = useProgress(file?.['progress'] ?? 1, 0.001, (file as ExtendedFile).size ?? 1);
 
   // Calculate the offset based on the loading progress
   const offset = circumference - progress * circumference;
@@ -30,7 +30,7 @@ const FilePreview = ({
   };
 
   return (
-    <div className={cn('h-10 w-10 shrink-0 overflow-hidden rounded-md', className)}>
+    <div className={cn('size-10 shrink-0 overflow-hidden rounded-xl', className)}>
       <FileIcon file={file} fileType={fileType} />
       <SourceIcon source={file?.source} />
       {progress < 1 && (

client/src/components/Chat/Input/Files/FileRow.tsx

@@ -74,8 +74,21 @@ export default function FileRow({
 
   const renderFiles = () => {
     const rowStyle = isRTL
-      ? { display: 'flex', flexDirection: 'row-reverse', gap: '4px' }
+      ? {
-      : { display: 'flex', gap: '4px' };
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        flexWrap: 'wrap',
+        gap: '4px',
+        width: '100%',
+        maxWidth: '100%',
+      }
+      : {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '4px',
+        width: '100%',
+        maxWidth: '100%',
+      };
 
     return (
       <div style={rowStyle as React.CSSProperties}>
@@ -98,18 +111,28 @@ export default function FileRow({
               deleteFile({ file, setFiles });
             };
             const isImage = file.type?.startsWith('image') ?? false;
-            if (isImage) {
+
             return (
-                <Image
+              <div
                 key={index}
+                style={{
+                  flexBasis: '70px',
+                  flexGrow: 0,
+                  flexShrink: 0,
+                }}
+              >
+                {isImage ? (
+                  <Image
                     url={file.preview ?? file.filepath}
                     onDelete={handleDelete}
                     progress={file.progress}
                     source={file.source}
                   />
+                ) : (
+                  <FileContainer file={file} onDelete={handleDelete} />
+                )}
+              </div>
             );
-            }
-            return <FileContainer key={index} file={file} onDelete={handleDelete} />;
           })}
       </div>
     );

client/src/components/Chat/Input/Files/FilesView.tsx

@@ -21,7 +21,7 @@ export default function Files({ open, onOpenChange }) {
     <OGDialog open={open} onOpenChange={onOpenChange}>
       <OGDialogContent
         title={localize('com_nav_my_files')}
-        className="w-11/12 overflow-x-auto bg-background text-text-primary shadow-2xl"
+        className="w-11/12 bg-background text-text-primary shadow-2xl"
       >
         <OGDialogHeader>
           <OGDialogTitle>{localize('com_nav_my_files')}</OGDialogTitle>

client/src/components/Chat/Input/Files/Image.tsx

@@ -17,7 +17,7 @@ const Image = ({
 }) => {
   return (
     <div className="group relative inline-block text-sm text-black/70 dark:text-white/90">
-      <div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
+      <div className="relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-600">
         <ImagePreview source={source} imageBase64={imageBase64} url={url} progress={progress} />
       </div>
       <RemoveFile onRemove={onDelete} />

client/src/components/Chat/Input/Files/ImagePreview.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Maximize2 } from 'lucide-react';
+import { OGDialog, OGDialogContent } from '~/components/ui';
 import { FileSources } from 'librechat-data-provider';
 import ProgressCircle from './ProgressCircle';
 import SourceIcon from './SourceIcon';
@@ -111,13 +112,13 @@ const ImagePreview = ({
   return (
     <>
       <div
-        className={cn('relative size-14 rounded-lg', className)}
+        className={cn('relative size-14 rounded-xl', className)}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
         <button
           type="button"
-          className="size-full overflow-hidden rounded-lg"
+          className="size-full overflow-hidden rounded-xl"
           style={style}
           aria-label={`View ${alt} in full size`}
           aria-haspopup="dialog"
@@ -137,7 +138,7 @@ const ImagePreview = ({
         ) : (
           <div
             className={cn(
-              'absolute inset-0 flex cursor-pointer items-center justify-center rounded-lg transition-opacity duration-200 ease-in-out',
+              'absolute inset-0 flex transform-gpu cursor-pointer items-center justify-center rounded-xl transition-opacity duration-200 ease-in-out',
               isHovered ? 'bg-black/20 opacity-100' : 'opacity-0',
             )}
             onClick={(e) => {
@@ -157,53 +158,19 @@ const ImagePreview = ({
         <SourceIcon source={source} aria-label={source ? `Source: ${source}` : undefined} />
       </div>
 
-      {isModalOpen && (
+      <OGDialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <div
+        <OGDialogContent
-          role="dialog"
+          showCloseButton={false}
-          aria-modal="true"
+          className={cn('w-11/12 overflow-x-auto bg-transparent p-0 sm:w-auto')}
-          aria-label={`Full view of ${alt}`}
+          disableScroll={false}
-          className="fixed inset-0 z-[999] bg-black bg-opacity-80 transition-opacity duration-200 ease-in-out"
-          onClick={closeModal}
-        >
-          <div className="flex h-full w-full cursor-default items-center justify-center">
-            <button
-              type="button"
-              className="absolute right-4 top-4 z-[1000] rounded-full p-2 text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
-              onClick={(e) => {
-                e.stopPropagation();
-                closeModal(e);
-              }}
-              aria-label="Close full view"
-            >
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-            <div
-              className="max-h-[90vh] max-w-[90vw] transform transition-transform duration-50 ease-in-out animate-in zoom-in-90"
-              role="presentation"
         >
           <img
             src={imageUrl}
             alt={alt}
-                className="max-w-screen max-h-screen object-contain"
+            className="max-w-screen h-full max-h-screen w-full object-contain"
-                onClick={(e) => e.stopPropagation()}
           />
-            </div>
+        </OGDialogContent>
-          </div>
+      </OGDialog>
-        </div>
-      )}
     </>
   );
 };

client/src/components/Chat/Input/Files/Table/Columns.tsx

@@ -3,14 +3,12 @@ import { ArrowUpDown, Database } from 'lucide-react';
 import { FileSources, FileContext } from 'librechat-data-provider';
 import type { ColumnDef } from '@tanstack/react-table';
 import type { TFile } from 'librechat-data-provider';
+import { Button, Checkbox, OpenAIMinimalIcon, AzureMinimalIcon } from '~/components';
 import ImagePreview from '~/components/Chat/Input/Files/ImagePreview';
 import FilePreview from '~/components/Chat/Input/Files/FilePreview';
 import { SortFilterHeader } from './SortFilterHeader';
-import { OpenAIMinimalIcon } from '~/components/svg';
+import { useLocalize, useMediaQuery } from '~/hooks';
-import { AzureMinimalIcon } from '~/components/svg';
-import { Button, Checkbox } from '~/components/ui';
 import { formatDate, getFileType } from '~/utils';
-import useLocalize from '~/hooks/useLocalize';
 
 const contextMap = {
   [FileContext.avatar]: 'com_ui_avatar',
@@ -60,7 +58,7 @@ export const columns: ColumnDef<TFile>[] = [
       return (
         <Button
           variant="ghost"
-          className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
+          className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           {localize('com_ui_name')}
@@ -70,13 +68,13 @@ export const columns: ColumnDef<TFile>[] = [
     },
     cell: ({ row }) => {
       const file = row.original;
-      if (file.type?.startsWith('image')) {
+      if (file.type.startsWith('image')) {
         return (
           <div className="flex gap-2">
             <ImagePreview
               url={file.filepath}
               className="relative h-10 w-10 shrink-0 overflow-hidden rounded-md"
-              source={file?.source}
+              source={file.source}
             />
             <span className="self-center truncate ">{file.filename}</span>
           </div>
@@ -100,14 +98,17 @@ export const columns: ColumnDef<TFile>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
+          className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
         >
           {localize('com_ui_date')}
           <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
         </Button>
       );
     },
-    cell: ({ row }) => formatDate(row.original.updatedAt),
+    cell: ({ row }) => {
+      const isSmallScreen = useMediaQuery('(max-width: 768px)');
+      return formatDate(row.original.updatedAt?.toString() ?? '', isSmallScreen);
+    },
   },
   {
     accessorKey: 'filterSource',
@@ -193,7 +194,7 @@ export const columns: ColumnDef<TFile>[] = [
       return (
         <Button
           variant="ghost"
-          className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
+          className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
         >
           {localize('com_ui_size')}

client/src/components/Chat/Input/Files/Table/DataTable.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import { ListFilter } from 'lucide-react';
 import {
   flexRender,
@@ -34,6 +34,8 @@ import {
 import { useDeleteFilesFromTable } from '~/hooks/Files';
 import { TrashIcon, Spinner } from '~/components/svg';
 import useLocalize from '~/hooks/useLocalize';
+import { useMediaQuery } from '~/hooks';
+import { cn } from '~/utils';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -57,11 +59,12 @@ type Style = {
 
 export default function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
   const localize = useLocalize();
-  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
-  const [rowSelection, setRowSelection] = React.useState({});
+  const [rowSelection, setRowSelection] = useState({});
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
   const { deleteFiles } = useDeleteFilesFromTable(() => setIsDeleting(false));
 
   const table = useReactTable({
@@ -84,10 +87,10 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
   });
 
   return (
-    <>
+    <div className="flex h-full flex-col gap-4">
-      <div className="flex items-center gap-4 py-4">
+      <div className="flex flex-wrap items-center gap-2 py-2 sm:gap-4 sm:py-4">
         <Button
-          variant="ghost"
+          variant="outline"
           onClick={() => {
             setIsDeleting(true);
             const filesToDelete = table
@@ -96,74 +99,69 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
             deleteFiles({ files: filesToDelete as TFile[] });
             setRowSelection({});
           }}
-          className="ml-1 gap-2 dark:hover:bg-gray-850/25 sm:ml-0"
           disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
+          className={cn('min-w-[40px] transition-all duration-200', isSmallScreen && 'px-2 py-1')}
         >
           {isDeleting ? (
-            <Spinner className="h-4 w-4" />
+            <Spinner className="size-3.5 sm:size-4" />
           ) : (
-            <TrashIcon className="h-4 w-4 text-red-400" />
+            <TrashIcon className="size-3.5 text-red-400 sm:size-4" />
           )}
-          {localize('com_ui_delete')}
+          {!isSmallScreen && <span className="ml-2">{localize('com_ui_delete')}</span>}
         </Button>
         <Input
           placeholder={localize('com_files_filter')}
           value={(table.getColumn('filename')?.getFilterValue() as string | undefined) ?? ''}
           onChange={(event) => table.getColumn('filename')?.setFilterValue(event.target.value)}
-          className="max-w-sm border-border-medium placeholder:text-text-secondary"
+          className="flex-1 text-sm"
         />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto border border-border-medium">
+            <Button variant="outline" className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}>
-              <ListFilter className="h-4 w-4" />
+              <ListFilter className="size-3.5 sm:size-4" />
             </Button>
           </DropdownMenuTrigger>
-          {/* Filter Menu */}
           <DropdownMenuContent
             align="end"
-            className="z-[1001] dark:border-gray-700 dark:bg-gray-850"
+            className="max-h-[300px] overflow-y-auto dark:border-gray-700 dark:bg-gray-850"
           >
             {table
               .getAllColumns()
               .filter((column) => column.getCanHide())
-              .map((column) => {
+              .map((column) => (
-                return (
                 <DropdownMenuCheckboxItem
                   key={column.id}
-                    className="cursor-pointer capitalize dark:text-white dark:hover:bg-gray-800"
+                  className="cursor-pointer text-sm capitalize dark:text-white dark:hover:bg-gray-800"
                   checked={column.getIsVisible()}
                   onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
                 >
                   {localize(contextMap[column.id])}
                 </DropdownMenuCheckboxItem>
-                );
+              ))}
-              })}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="relative max-h-[25rem] min-h-0 overflow-y-auto rounded-md border border-black/10 pb-4 dark:border-white/10 sm:min-h-[28rem]">
+      <div className="relative grid h-full max-h-[calc(100vh-20rem)] w-full flex-1 overflow-hidden overflow-x-auto overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
-        <Table className="w-full min-w-[600px] border-separate border-spacing-0">
+        <Table className="w-full min-w-[300px] border-separate border-spacing-0">
-          <TableHeader>
+          <TableHeader className="sticky top-0 z-50">
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className="border-b border-border-light">
                 {headerGroup.headers.map((header, index) => {
-                  const style: Style = { maxWidth: '32px', minWidth: '125px', zIndex: 50 };
+                  const style: Style = {};
-                  if (header.id === 'filename') {
+                  if (index === 0 && header.id === 'select') {
-                    style.maxWidth = '50%';
+                    style.width = '35px';
-                    style.width = '50%';
+                    style.minWidth = '35px';
-                    style.minWidth = '300px';
+                  } else if (header.id === 'filename') {
+                    style.width = isSmallScreen ? '60%' : '40%';
+                  } else {
+                    style.width = isSmallScreen ? '20%' : '15%';
                   }
 
-                  if (index === 0 && header.id === 'select') {
-                    style.width = '25px';
-                    style.maxWidth = '25px';
-                    style.minWidth = '35px';
-                  }
                   return (
                     <TableHead
                       key={header.id}
-                      className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-700 dark:text-gray-100 sm:px-4 sm:py-2"
+                      className="whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary sm:px-4"
-                      style={style}
+                      style={{ ...style }}
                     >
                       {header.isPlaceholder
                         ? null
@@ -174,13 +172,13 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
               </TableRow>
             ))}
           </TableHeader>
-          <TableBody>
+          <TableBody className="w-full">
             {table.getRowModel().rows.length ? (
               table.getRowModel().rows.map((row) => (
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
-                  className="border-b border-black/10 text-left text-gray-600 dark:border-white/10 dark:text-gray-300 [tr:last-child_&]:border-b-0"
+                  className="border-b border-border-light transition-colors hover:bg-surface-secondary [tr:last-child_&]:border-b-0"
                 >
                   {row.getVisibleCells().map((cell, index) => {
                     const maxWidth =
@@ -216,16 +214,30 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           </TableBody>
         </Table>
       </div>
-      <div className="ml-4 mr-4 mt-4 flex h-auto items-center justify-end space-x-2 py-4 sm:ml-0 sm:mr-0 sm:h-0">
+
-        <div className="text-muted-foreground ml-2 flex-1 text-sm">
+      <div className="flex items-center justify-end gap-2 py-4">
+        <div className="ml-2 flex-1 truncate text-xs text-muted-foreground sm:ml-4 sm:text-sm">
+          <span className="hidden sm:inline">
             {localize(
               'com_files_number_selected',
               `${table.getFilteredSelectedRowModel().rows.length}`,
               `${table.getFilteredRowModel().rows.length}`,
             )}
+          </span>
+          <span className="sm:hidden">
+            {`${table.getFilteredSelectedRowModel().rows.length}/${
+              table.getFilteredRowModel().rows.length
+            }`}
+          </span>
+        </div>
+        <div className="flex items-center space-x-1 pr-2 text-xs font-bold text-text-primary sm:text-sm">
+          <span className="hidden sm:inline">{localize('com_ui_page')}</span>
+          <span>{table.getState().pagination.pageIndex + 1}</span>
+          <span>/</span>
+          <span>{table.getPageCount()}</span>
         </div>
         <Button
-          className="select-none border-border-medium"
+          className="select-none"
           variant="outline"
           size="sm"
           onClick={() => table.previousPage()}
@@ -234,7 +246,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           {localize('com_ui_prev')}
         </Button>
         <Button
-          className="select-none border-border-medium"
+          className="select-none"
           variant="outline"
           size="sm"
           onClick={() => table.nextPage()}
@@ -243,6 +255,6 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           {localize('com_ui_next')}
         </Button>
       </div>
-    </>
+    </div>
   );
 }

client/src/components/Chat/Input/Files/Table/SortFilterHeader.tsx

@@ -37,22 +37,24 @@ export function SortFilterHeader<TData, TValue>({
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="px-2 py-0 text-xs sm:px-2 sm:py-2 sm:text-sm"
+            className="px-2 py-0 text-xs hover:bg-surface-hover data-[state=open]:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
-            // className="data-[state=open]:bg-accent -ml-3 h-8"
           >
             <span>{title}</span>
             {column.getIsFiltered() ? (
-              <ListFilter className="icon-sm text-muted-foreground/70 ml-2" />
+              <ListFilter className="icon-sm ml-2 text-muted-foreground/70" />
             ) : (
               <ListFilter className="icon-sm ml-2 opacity-30" />
             )}
-            {column.getIsSorted() === 'desc' ? (
+            {(() => {
-              <ArrowDownIcon className="icon-sm ml-2" />
+              const sortState = column.getIsSorted();
-            ) : column.getIsSorted() === 'asc' ? (
+              if (sortState === 'desc') {
-              <ArrowUpIcon className="icon-sm ml-2" />
+                return <ArrowDownIcon className="icon-sm ml-2" />;
-            ) : (
+              }
-              <CaretSortIcon className="icon-sm ml-2" />
+              if (sortState === 'asc') {
-            )}
+                return <ArrowUpIcon className="icon-sm ml-2" />;
+              }
+              return <CaretSortIcon className="icon-sm ml-2" />;
+            })()}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
@@ -61,16 +63,16 @@ export function SortFilterHeader<TData, TValue>({
         >
           <DropdownMenuItem
             onClick={() => column.toggleSorting(false)}
-            className="cursor-pointer dark:text-white dark:hover:bg-gray-800"
+            className="cursor-pointer text-text-primary"
           >
-            <ArrowUpIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             {localize('com_ui_ascending')}
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => column.toggleSorting(true)}
-            className="cursor-pointer dark:text-white dark:hover:bg-gray-800"
+            className="cursor-pointer text-text-primary"
           >
-            <ArrowDownIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             {localize('com_ui_descending')}
           </DropdownMenuItem>
           <DropdownMenuSeparator className="dark:bg-gray-500" />
@@ -78,19 +80,19 @@ export function SortFilterHeader<TData, TValue>({
             Object.entries(filters).map(([key, values]) =>
               values.map((value: string | number) => {
                 const localizedValue = localize(valueMap?.[value] ?? '');
-                const filterValue = localizedValue?.length ? localizedValue : valueMap?.[value];
+                const filterValue = localizedValue.length ? localizedValue : valueMap?.[value];
                 if (!filterValue) {
                   return null;
                 }
                 return (
                   <DropdownMenuItem
-                    className="cursor-pointer dark:text-white dark:hover:bg-gray-800"
+                    className="cursor-pointer text-text-primary"
                     key={`${key}-${value}`}
                     onClick={() => {
                       column.setFilterValue(value);
                     }}
                   >
-                    <ListFilter className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+                    <ListFilter className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
                     {filterValue}
                   </DropdownMenuItem>
                 );
@@ -107,7 +109,7 @@ export function SortFilterHeader<TData, TValue>({
                 column.setFilterValue(undefined);
               }}
             >
-              <FilterX className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+              <FilterX className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
               {localize('com_ui_show_all')}
             </DropdownMenuItem>
           )}

client/src/components/Chat/Menus/BookmarkMenu.tsx

@@ -1,22 +1,26 @@
-import { useState, type FC, useCallback } from 'react';
+import { useState, useId, useCallback, useMemo, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
+import * as Ariakit from '@ariakit/react';
+import { BookmarkPlusIcon } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
 import { Constants, QueryKeys } from 'librechat-data-provider';
-import { Menu, MenuButton, MenuItems } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
 import type { TConversationTag } from 'librechat-data-provider';
+import type { FC } from 'react';
+import type * as t from '~/common';
 import { useConversationTagsQuery, useTagConversationMutation } from '~/data-provider';
-import { BookmarkMenuItems } from './Bookmarks/BookmarkMenuItems';
+import { DropdownPopup, TooltipAnchor } from '~/components/ui';
 import { BookmarkContext } from '~/Providers/BookmarkContext';
 import { BookmarkEditDialog } from '~/components/Bookmarks';
+import { useBookmarkSuccess, useLocalize } from '~/hooks';
 import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
-import { useBookmarkSuccess } from '~/hooks';
 import { Spinner } from '~/components';
 import { cn, logger } from '~/utils';
 import store from '~/store';
 
 const BookmarkMenu: FC = () => {
+  const localize = useLocalize();
   const queryClient = useQueryClient();
   const { showToast } = useToastContext();
 
@@ -24,13 +28,20 @@ const BookmarkMenu: FC = () => {
   const conversationId = conversation?.conversationId ?? '';
   const updateConvoTags = useBookmarkSuccess(conversationId);
 
-  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [tags, setTags] = useState<string[]>(conversation?.tags || []);
 
   const mutation = useTagConversationMutation(conversationId, {
-    onSuccess: (newTags: string[]) => {
+    onSuccess: (newTags: string[], vars) => {
       setTags(newTags);
       updateConvoTags(newTags);
+      const tagElement = document.getElementById(vars.tag);
+      console.log('tagElement', tagElement);
+      if (tagElement) {
+        setTimeout(() => tagElement.focus(), 2);
+      }
     },
     onError: () => {
       showToast({
@@ -38,6 +49,13 @@ const BookmarkMenu: FC = () => {
         severity: NotificationSeverity.ERROR,
       });
     },
+    onMutate: (vars) => {
+      const tagElement = document.getElementById(vars.tag);
+      console.log('tagElement', tagElement);
+      if (tagElement) {
+        setTimeout(() => tagElement.focus(), 2);
+      }
+    },
   });
 
   const { data } = useConversationTagsQuery();
@@ -60,22 +78,62 @@ const BookmarkMenu: FC = () => {
       }
 
       logger.log('tag_mutation', 'BookmarkMenu - handleSubmit: tags before setting', tags);
+
       const allTags =
         queryClient.getQueryData<TConversationTag[]>([QueryKeys.conversationTags]) ?? [];
       const existingTags = allTags.map((t) => t.tag);
       const filteredTags = tags.filter((t) => existingTags.includes(t));
+
       logger.log('tag_mutation', 'BookmarkMenu - handleSubmit: tags after filtering', filteredTags);
       const newTags = filteredTags.includes(tag)
         ? filteredTags.filter((t) => t !== tag)
         : [...filteredTags, tag];
+
       logger.log('tag_mutation', 'BookmarkMenu - handleSubmit: tags after', newTags);
       mutation.mutate({
         tags: newTags,
+        tag,
       });
     },
     [tags, conversationId, mutation, queryClient, showToast],
   );
 
+  const newBookmarkRef = useRef<HTMLButtonElement>(null);
+
+  const dropdownItems: t.MenuItemProps[] = useMemo(() => {
+    const items: t.MenuItemProps[] = [
+      {
+        id: '%___new___bookmark___%',
+        label: localize('com_ui_bookmarks_new'),
+        icon: <BookmarkPlusIcon className="size-4" />,
+        hideOnClick: false,
+        ref: newBookmarkRef,
+        render: (props) => <button {...props} />,
+        onClick: () => setIsDialogOpen(true),
+      },
+    ];
+
+    if (data) {
+      for (const tag of data) {
+        const isSelected = tags.includes(tag.tag);
+        items.push({
+          id: tag.tag,
+          hideOnClick: false,
+          label: tag.tag,
+          icon: isSelected ? (
+            <BookmarkFilledIcon className="size-4" />
+          ) : (
+            <BookmarkIcon className="size-4" />
+          ),
+          onClick: () => handleSubmit(tag.tag),
+          disabled: mutation.isLoading,
+        });
+      }
+    }
+
+    return items;
+  }, [tags, data, handleSubmit, mutation.isLoading, localize]);
+
   if (!isActiveConvo) {
     return null;
   }
@@ -90,47 +148,43 @@ const BookmarkMenu: FC = () => {
     return <BookmarkIcon className="icon-sm" aria-label="Bookmark" />;
   };
 
-  const handleToggleOpen = () => setOpen(!open);
-
   return (
-    <>
+    <BookmarkContext.Provider value={{ bookmarks: data || [] }}>
-      <Menu as="div" className="group relative">
+      <DropdownPopup
-        {({ open }) => (
+        focusLoop={true}
-          <>
+        menuId={menuId}
-            <MenuButton
+        isOpen={isMenuOpen}
-              aria-label="Add bookmarks"
+        setIsOpen={setIsMenuOpen}
+        trigger={
+          <TooltipAnchor
+            description={localize('com_ui_bookmarks_add')}
+            render={
+              <Ariakit.MenuButton
+                id="bookmark-menu-button"
+                aria-label={localize('com_ui_bookmarks_add')}
                 className={cn(
                   'mt-text-sm flex size-10 items-center justify-center gap-2 rounded-lg border border-border-light text-sm transition-colors duration-200 hover:bg-surface-hover',
-                open ? 'bg-surface-hover' : '',
+                  isMenuOpen ? 'bg-surface-hover' : '',
                 )}
                 data-testid="bookmark-menu"
               >
                 {renderButtonContent()}
-            </MenuButton>
+              </Ariakit.MenuButton>
-            <MenuItems
+            }
-              anchor="bottom start"
+          />
-              className="overflow-hidden rounded-lg bg-header-primary p-1.5 shadow-lg outline-none"
+        }
-            >
+        items={dropdownItems}
-              <BookmarkContext.Provider value={{ bookmarks: data || [] }}>
-                <BookmarkMenuItems
-                  handleToggleOpen={handleToggleOpen}
-                  tags={tags}
-                  handleSubmit={handleSubmit}
       />
-              </BookmarkContext.Provider>
-            </MenuItems>
-          </>
-        )}
-      </Menu>
       <BookmarkEditDialog
-        context="BookmarkMenu - BookmarkEditDialog"
-        conversation={conversation}
         tags={tags}
         setTags={setTags}
-        open={open}
+        open={isDialogOpen}
-        setOpen={setOpen}
+        setOpen={setIsDialogOpen}
+        triggerRef={newBookmarkRef}
+        conversationId={conversationId}
+        context="BookmarkMenu - BookmarkEditDialog"
       />
-    </>
+    </BookmarkContext.Provider>
   );
 };
 

client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx

@@ -1,27 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BookmarkPlusIcon } from 'lucide-react';
 import type { FC } from 'react';
-import { BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
+import { BookmarkEditDialog, BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
+import { OGDialogTrigger } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
 export const BookmarkMenuItems: FC<{
   tags: string[];
-  handleToggleOpen?: () => void;
+  setTags: React.Dispatch<React.SetStateAction<string[]>>;
   handleSubmit: (tag?: string) => void;
-}> = ({
+  conversationId?: string;
-  tags,
+}> = ({ tags, setTags, handleSubmit, conversationId }) => {
-  handleSubmit,
-  handleToggleOpen = async () => {
-    ('');
-  },
-}) => {
   const localize = useLocalize();
+  const [open, setOpen] = useState(false);
+  const handleToggleOpen = () => setOpen(!open);
 
   return (
     <BookmarkItems
       tags={tags}
       handleSubmit={handleSubmit}
       header={
+        <BookmarkEditDialog
+          context="BookmarkMenu - BookmarkEditDialog"
+          conversationId={conversationId}
+          tags={tags}
+          setTags={setTags}
+          open={open}
+          setOpen={setOpen}
+        >
+          <OGDialogTrigger asChild>
             <BookmarkItem
               tag={localize('com_ui_bookmarks_new')}
               data-testid="bookmark-item-new"
@@ -29,6 +36,8 @@ export const BookmarkMenuItems: FC<{
               selected={false}
               icon={<BookmarkPlusIcon className="size-4" aria-label="Add Bookmark" />}
             />
+          </OGDialogTrigger>
+        </BookmarkEditDialog>
       }
     />
   );

client/src/components/Chat/Messages/Message.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import { useRecoilValue } from 'recoil';
 import { useMessageProcess } from '~/hooks';
 import type { TMessageProps } from '~/common';
 import MessageRender from './ui/MessageRender';
 // eslint-disable-next-line import/no-cycle
 import MultiMessage from './MultiMessage';
+import { cn } from '~/utils';
+import store from '~/store';
 
 const MessageContainer = React.memo(
   ({
@@ -35,6 +38,7 @@ export default function Message(props: TMessageProps) {
     isSubmittingFamily,
   } = useMessageProcess({ message: props.message });
   const { message, currentEditId, setCurrentEditId } = props;
+  const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
 
   if (!message || typeof message !== 'object') {
     return null;
@@ -47,7 +51,12 @@ export default function Message(props: TMessageProps) {
       <MessageContainer handleScroll={handleScroll}>
         {showSibling ? (
           <div className="m-auto my-2 flex justify-center p-4 py-2 md:gap-6">
-            <div className="flex w-full flex-row flex-wrap justify-between gap-1 md:max-w-5xl md:flex-nowrap md:gap-2 lg:max-w-5xl xl:max-w-6xl">
+            <div
+              className={cn(
+                'flex w-full flex-row flex-wrap justify-between gap-1 md:flex-nowrap md:gap-2',
+                maximizeChatSpace ? 'w-full max-w-full' : 'md:max-w-5xl xl:max-w-6xl',
+              )}
+            >
               <MessageRender
                 {...props}
                 message={message}

client/src/components/Chat/Messages/MessagesView.tsx

@@ -3,8 +3,8 @@ import { useRecoilValue } from 'recoil';
 import { CSSTransition } from 'react-transition-group';
 import type { ReactNode } from 'react';
 import type { TMessage } from 'librechat-data-provider';
+import { useScreenshot, useMessageScrolling, useLocalize } from '~/hooks';
 import ScrollToBottom from '~/components/Messages/ScrollToBottom';
-import { useScreenshot, useMessageScrolling } from '~/hooks';
 import MultiMessage from './MultiMessage';
 import { cn } from '~/utils';
 import store from '~/store';
@@ -16,6 +16,7 @@ export default function MessagesView({
   messagesTree?: TMessage[] | null;
   Header?: ReactNode;
 }) {
+  const localize = useLocalize();
   const fontSize = useRecoilValue(store.fontSize);
   const { screenshotTargetRef } = useScreenshot();
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
@@ -47,11 +48,11 @@ export default function MessagesView({
             {(_messagesTree && _messagesTree.length == 0) || _messagesTree === null ? (
               <div
                 className={cn(
-                  'flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300',
+                  'flex w-full items-center justify-center p-3 text-text-secondary',
                   fontSize,
                 )}
               >
-                Nothing found
+                {localize('com_ui_nothing_found')}
               </div>
             ) : (
               <>

client/src/components/Chat/Messages/ui/MessageRender.tsx

@@ -56,8 +56,8 @@ const MessageRender = memo(
       isMultiMessage,
       setCurrentEditId,
     });
-
     const fontSize = useRecoilValue(store.fontSize);
+    const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
     const handleRegenerateMessage = useCallback(() => regenerateMessage(), [regenerateMessage]);
     const { isCreatedByUser, error, unfinished } = msg ?? {};
     const hasNoChildren = !(msg?.children?.length ?? 0);
@@ -82,16 +82,31 @@ const MessageRender = memo(
         }
         : undefined;
 
+    // Style classes
+    const baseClasses =
+      'final-completion group mx-auto flex flex-1 gap-3 transition-all duration-300 transform-gpu';
+    let layoutClasses = '';
+
+    if (isCard ?? false) {
+      layoutClasses =
+        'relative w-full gap-1 rounded-lg border border-border-medium bg-surface-primary-alt p-2 md:w-1/2 md:gap-3 md:p-4';
+    } else if (maximizeChatSpace) {
+      layoutClasses = 'md:max-w-full md:px-5';
+    } else {
+      layoutClasses = 'md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5';
+    }
+
+    const latestCardClasses = isLatestCard ? 'bg-surface-secondary' : '';
+    const showRenderClasses = showCardRender ? 'cursor-pointer transition-colors duration-300' : '';
+
     return (
       <div
         aria-label={`message-${msg.depth}-${msg.messageId}`}
         className={cn(
-          'final-completion group mx-auto flex flex-1 gap-3',
+          baseClasses,
-          isCard === true
+          layoutClasses,
-            ? 'relative w-full gap-1 rounded-lg border border-border-medium bg-surface-primary-alt p-2 md:w-1/2 md:gap-3 md:p-4'
+          latestCardClasses,
-            : 'md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5',
+          showRenderClasses,
-          isLatestCard === true ? 'bg-surface-secondary' : '',
-          showCardRender ? 'cursor-pointer transition-colors duration-300' : '',
           'focus:outline-none focus:ring-2 focus:ring-border-xheavy',
         )}
         onClick={clickHandler}

client/src/components/Chat/Presentation.tsx

@@ -98,7 +98,7 @@ export default function Presentation({
               ) : null
           }
         >
-          <main className="flex h-full flex-col" role="main">
+          <main className="flex h-full flex-col overflow-y-auto" role="main">
             {children}
           </main>
         </SidePanel>

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}
+          open={showShareDialog}
-          setShowShareDialog={setShowShareDialog}
+          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,
+  open,
-  setShowShareDialog,
+  onOpenChange,
+  triggerRef,
+  children,
 }: {
   conversationId: string;
   title: string;
-  showShareDialog: boolean;
+  open: boolean;
-  setShowShareDialog: (value: boolean) => void;
+  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');
               })()}

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',
+              '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-hover' : '',
+              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;
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
-  triggerRef: React.RefObject<HTMLButtonElement>;
+  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={cn('p-4', isSmallScreen ? 'w-[70%]' : 'w-[50%]')}>
+                  {localize('com_nav_archive_name')}
+                </TableHead>
+                {!isSmallScreen && (
                   <TableHead className="w-[35%] p-1">
                     {localize('com_nav_archive_created_at')}
                   </TableHead>
-                <TableHead className="w-[15%] p-1 text-right">
+                )}
+                <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" />
+                      <MessageCircle className="mr-1 h-5 min-w-[20px]" />
-                      <u>{conversation.title}</u>
+                      <u className="truncate">{conversation.title}</u>
                     </button>
                   </TableCell>
+                  {!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: 'long',
+                            month: 'short',
                             day: 'numeric',
                             year: 'numeric',
                           })}
                         </div>
                       </div>
                     </TableCell>
-                  <TableCell className="flex items-center justify-end gap-2 p-1">
+                  )}
+                  <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>
                           }
                         />

client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx

@@ -1,28 +1,14 @@
-import { useState } from 'react';
-import { BookmarkPlusIcon } from 'lucide-react';
 import { useConversationTagsQuery } from '~/data-provider';
-import { Button } from '~/components/ui';
 import { BookmarkContext } from '~/Providers/BookmarkContext';
-import { BookmarkEditDialog } from '~/components/Bookmarks';
 import BookmarkTable from './BookmarkTable';
-import { useLocalize } from '~/hooks';
 
 const BookmarkPanel = () => {
-  const localize = useLocalize();
   const { data } = useConversationTagsQuery();
-  const [open, setOpen] = useState(false);
 
   return (
     <div className="h-auto max-w-full overflow-x-hidden">
       <BookmarkContext.Provider value={{ bookmarks: data || [] }}>
         <BookmarkTable />
-        <div className="flex justify-between gap-2">
-          <BookmarkEditDialog context="BookmarkPanel" open={open} setOpen={setOpen} />
-          <Button variant="outline" className="w-full gap-2 text-sm" onClick={() => setOpen(!open)}>
-            <BookmarkPlusIcon className="size-4" />
-            <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
-          </Button>
-        </div>
       </BookmarkContext.Provider>
     </div>
   );

client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx

@@ -1,7 +1,19 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { BookmarkPlusIcon } from 'lucide-react';
 import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
-import { Table, TableHeader, TableBody, TableRow, TableCell, Input, Button } from '~/components/ui';
+import {
+  Table,
+  Input,
+  Button,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  TableHeader,
+  OGDialogTrigger,
+} from '~/components/ui';
 import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
+import { BookmarkEditDialog } from '~/components/Bookmarks';
 import BookmarkTableRow from './BookmarkTableRow';
 import { useLocalize } from '~/hooks';
 
@@ -19,9 +31,11 @@ const BookmarkTable = () => {
   const [rows, setRows] = useState<ConversationTagsResponse>([]);
   const [pageIndex, setPageIndex] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
+  const [open, setOpen] = useState(false);
   const pageSize = 10;
 
   const { bookmarks = [] } = useBookmarkContext();
+
   useEffect(() => {
     const _bookmarks = removeDuplicates(bookmarks).sort((a, b) => a.position - b.position);
     setRows(_bookmarks);
@@ -37,9 +51,9 @@ const BookmarkTable = () => {
   }, []);
 
   const renderRow = useCallback(
-    (row: TConversationTag) => {
+    (row: TConversationTag) => (
-      return <BookmarkTableRow key={row._id} moveRow={moveRow} row={row} position={row.position} />;
+      <BookmarkTableRow key={row._id} moveRow={moveRow} row={row} position={row.position} />
-    },
+    ),
     [moveRow],
   );
 
@@ -48,46 +62,77 @@ const BookmarkTable = () => {
   );
 
   const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+
   return (
     <BookmarkContext.Provider value={{ bookmarks }}>
-      <div className=" mt-2 space-y-2">
+      <div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-2">
         <div className="flex items-center gap-4">
           <Input
-            aria-label={localize('com_ui_bookmarks_filter')}
             placeholder={localize('com_ui_bookmarks_filter')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
+            aria-label={localize('com_ui_bookmarks_filter')}
           />
         </div>
-        <div className="overflow-y-auto rounded-md border border-border-light">
+
-          <Table className="table-fixed border-separate border-spacing-0">
+        <div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
+          <Table className="w-full table-fixed">
             <TableHeader>
-              <TableRow>
+              <TableRow className="border-b border-border-light">
-                <TableCell className="w-full bg-header-primary px-3 py-3.5 pl-6">
+                <TableHead className="w-[70%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
-                  <div>{localize('com_ui_bookmarks_title')}</div>
+                  <div className="px-4">{localize('com_ui_bookmarks_title')}</div>
-                </TableCell>
+                </TableHead>
-                <TableCell className="w-full bg-header-primary px-3 py-3.5 sm:pl-6">
+                <TableHead className="w-[30%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
-                  <div>{localize('com_ui_bookmarks_count')}</div>
+                  <div className="px-4">{localize('com_ui_bookmarks_count')}</div>
-                </TableCell>
+                </TableHead>
+                <TableHead className="w-[40%] bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary">
+                  <div className="px-4">{localize('com_assistants_actions')}</div>
+                </TableHead>
               </TableRow>
             </TableHeader>
-            <TableBody>{currentRows.map((row) => renderRow(row))}</TableBody>
+            <TableBody>
+              {currentRows.length ? (
+                currentRows.map(renderRow)
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={3} className="h-24 text-center text-sm text-text-secondary">
+                    {localize('com_ui_no_bookmarks')}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
           </Table>
         </div>
-        <div className="flex items-center justify-between py-4">
+
-          <div className="pl-1 text-text-secondary">
+        <div className="flex items-center justify-between">
-            {localize('com_ui_page')} {pageIndex + 1} {localize('com_ui_of')}{' '}
+          <div className="flex justify-between gap-2">
-            {Math.ceil(filteredRows.length / pageSize)}
+            <BookmarkEditDialog context="BookmarkPanel" open={open} setOpen={setOpen}>
+              <OGDialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full gap-2 text-sm"
+                  onClick={() => setOpen(!open)}
+                >
+                  <BookmarkPlusIcon className="size-4" />
+                  <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
+                </Button>
+              </OGDialogTrigger>
+            </BookmarkEditDialog>
           </div>
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center gap-2" role="navigation" aria-label="Pagination">
             <Button
               variant="outline"
               size="sm"
               onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
               disabled={pageIndex === 0}
+              aria-label={localize('com_ui_prev')}
             >
               {localize('com_ui_prev')}
             </Button>
+            <div aria-live="polite" className="text-sm">
+              {`${pageIndex + 1} / ${Math.ceil(filteredRows.length / pageSize)}`}
+            </div>
             <Button
               variant="outline"
               size="sm"
@@ -97,6 +142,7 @@ const BookmarkTable = () => {
                 )
               }
               disabled={(pageIndex + 1) * pageSize >= filteredRows.length}
+              aria-label={localize('com_ui_next')}
             >
               {localize('com_ui_next')}
             </Button>

client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import type { TConversationTag } from 'librechat-data-provider';
 import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
@@ -21,42 +21,32 @@ interface DragItem {
 }
 
 const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, position }) => {
-  const [isHovered, setIsHovered] = useState(false);
   const ref = useRef<HTMLTableRowElement>(null);
-
   const mutation = useConversationTagMutation({ context: 'BookmarkTableRow', tag: row.tag });
   const localize = useLocalize();
   const { showToast } = useToastContext();
 
   const handleDrop = (item: DragItem) => {
-    const data = {
+    mutation.mutate(
-      ...row,
+      { ...row, position: item.index },
-      position: item.index,
+      {
-    };
-    mutation.mutate(data, {
         onError: () => {
           showToast({
             message: localize('com_ui_bookmarks_update_error'),
             severity: NotificationSeverity.ERROR,
           });
         },
-    });
+      },
+    );
   };
 
   const [, drop] = useDrop({
     accept: 'bookmark',
-    drop: (item: DragItem) => handleDrop(item),
+    drop: handleDrop,
     hover(item: DragItem) {
-      if (!ref.current) {
+      if (!ref.current || item.index === position) {return;}
-        return;
+      moveRow(item.index, position);
-      }
+      item.index = position;
-      const dragIndex = item.index;
-      const hoverIndex = position;
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      moveRow(dragIndex, hoverIndex);
-      item.index = hoverIndex;
     },
   });
 
@@ -73,39 +63,17 @@ const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, posit
   return (
     <TableRow
       ref={ref}
-      className="cursor-move hover:bg-surface-tertiary"
+      className="cursor-move hover:bg-surface-secondary"
       style={{ opacity: isDragging ? 0.5 : 1 }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
     >
-      <TableCell className="w-full px-3 py-3.5 pl-6">
+      <TableCell className="w-[70%] px-4 py-4">
-        <div className="truncate">{row.tag}</div>
+        <div className="overflow-hidden text-ellipsis whitespace-nowrap">{row.tag}</div>
       </TableCell>
-      <TableCell className="w-full px-3 py-3.5 sm:pl-6">
+      <TableCell className="w-[10%] px-12 py-4">{row.count}</TableCell>
-        <div className="flex items-center justify-between py-1">
+      <TableCell className="w-[20%] px-4 py-4">
-          <div>{row.count}</div>
+        <div className="flex gap-2">
-          <div
+          <EditBookmarkButton bookmark={row} tabIndex={0} />
-            className="flex items-center gap-2"
+          <DeleteBookmarkButton bookmark={row.tag} tabIndex={0} />
-            style={{
-              opacity: isHovered ? 1 : 0,
-              transition: 'opacity 0.1s ease-in-out',
-            }}
-            onFocus={() => setIsHovered(true)}
-            onBlur={() => setIsHovered(false)}
-          >
-            <EditBookmarkButton
-              bookmark={row}
-              tabIndex={0}
-              onFocus={() => setIsHovered(true)}
-              onBlur={() => setIsHovered(false)}
-            />
-            <DeleteBookmarkButton
-              bookmark={row.tag}
-              tabIndex={0}
-              onFocus={() => setIsHovered(true)}
-              onBlur={() => setIsHovered(false)}
-            />
-          </div>
         </div>
       </TableCell>
     </TableRow>

client/src/components/SidePanel/Files/PanelFileCell.tsx

@@ -8,18 +8,22 @@ export default function PanelFileCell({ row }: { row: Row<TFile> }) {
   const file = row.original;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex w-full items-center gap-2">
       {file.type.startsWith('image') ? (
         <ImagePreview
           url={file.filepath}
-          className="h-10 w-10"
+          className="h-10 w-10 flex-shrink-0"
           source={file.source}
           alt={file.filename}
         />
       ) : (
         <FilePreview fileType={getFileType(file.type)} file={file} />
       )}
-      <span className="truncate text-xs">{file.filename}</span>
+      <div className="min-w-0 flex-1 overflow-hidden">
+        <span className="block w-full overflow-hidden truncate text-ellipsis whitespace-nowrap text-xs">
+          {file.filename}
+        </span>
+      </div>
     </div>
   );
 }

client/src/components/SidePanel/Files/PanelTable.tsx

@@ -212,6 +212,13 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
 
                       return (
                         <TableCell
+                          style={{
+                            width: '150px',
+                            maxWidth: '150px',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
                           data-skip-refocus="true"
                           key={cell.id}
                           role={isFilenameCell ? 'button' : undefined}

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: {
+  items: t.MenuItemProps[];
-    label?: string;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
-    icon?: React.ReactNode;
-    kbd?: string;
-    show?: boolean;
-    disabled?: boolean;
-    separate?: boolean;
-  }[];
   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) =>
+          .map((item, index) => {
-            item.separate === true ? (
+            if (item.separate === true) {
-              <Ariakit.MenuSeparator key={index} className="my-1 h-px bg-white/10" />
+              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>
   );

client/src/localization/languages/Eng.ts

@@ -419,6 +419,7 @@ export default {
   com_ui_min_tags: 'Cannot remove more values, a minimum of {0} are required.',
   com_ui_max_tags: 'Maximum number allowed is {0}, using latest values.',
   com_ui_bookmarks: 'Bookmarks',
+  com_ui_bookmarks_add: 'Add Bookmarks',
   com_ui_bookmarks_new: 'New Bookmark',
   com_ui_bookmark_delete_confirm: 'Are you sure you want to delete this bookmark?',
   com_ui_bookmarks_title: 'Title',
@@ -433,6 +434,7 @@ export default {
   com_ui_bookmarks_delete_error: 'There was an error deleting the bookmark',
   com_ui_bookmarks_add_to_conversation: 'Add to current conversation',
   com_ui_bookmarks_filter: 'Filter bookmarks...',
+  com_ui_bookmarks_edit: 'Edit Bookmark',
   com_ui_bookmarks_delete: 'Delete Bookmark',
   com_ui_no_bookmarks: 'it seems like you have no bookmarks yet. Click on a chat and add a new one',
   com_ui_no_conversation_id: 'No conversation ID found',
@@ -763,6 +765,7 @@ export default {
   com_nav_theme_dark: 'Dark',
   com_nav_theme_light: 'Light',
   com_nav_enter_to_send: 'Press Enter to send messages',
+  com_nav_maximize_chat_space: 'Maximize chat space',
   com_nav_user_name_display: 'Display username in messages',
   com_nav_save_drafts: 'Save drafts locally',
   com_nav_chat_direction: 'Chat direction',

client/src/store/settings.ts

@@ -28,8 +28,9 @@ const localStorageAtoms = {
     true,
   ),
 
-  // Messages settings
+  // Chat settings
   enterToSend: atomWithLocalStorage('enterToSend', true),
+  maximizeChatSpace: atomWithLocalStorage('maximizeChatSpace', false),
   chatDirection: atomWithLocalStorage('chatDirection', 'LTR'),
   showCode: atomWithLocalStorage(LocalStorageKeys.SHOW_ANALYSIS_CODE, true),
   saveDrafts: atomWithLocalStorage('saveDrafts', true),

client/src/style.css

@@ -51,6 +51,7 @@ html {
   --surface-active: var(--gray-100);
   --surface-active-alt: var(--gray-200);
   --surface-hover: var(--gray-200);
+  --surface-hover-alt: var(--gray-300);
   --surface-primary: var(--white);
   --surface-primary-alt: var(--gray-50);
   --surface-primary-contrast: var(--gray-100);
@@ -104,6 +105,7 @@ html {
   --surface-active: var(--gray-500);
   --surface-active-alt: var(--gray-700);
   --surface-hover: var(--gray-600);
+  --surface-hover-alt: var(--gray-600);
   --surface-primary: var(--gray-900);
   --surface-primary-alt: var(--gray-850);
   --surface-primary-contrast: var(--gray-850);

client/src/utils/files.ts

@@ -45,6 +45,7 @@ export const fileTypes = {
 
   /* Partial matches */
   csv: spreadsheet,
+  'application/pdf': textDocument,
   pdf: textDocument,
   'text/x-': codeFile,
   artifact: artifact,
@@ -114,7 +115,21 @@ export const getFileType = (
  * @example
  * formatDate('2020-01-01T00:00:00.000Z') // '1 Jan 2020'
  */
-export function formatDate(dateString: string) {
+export function formatDate(dateString: string, isSmallScreen = false) {
+  if (!dateString) {
+    return '';
+  }
+
+  const date = new Date(dateString);
+
+  if (isSmallScreen) {
+    return date.toLocaleDateString('en-US', {
+      month: 'numeric',
+      day: 'numeric',
+      year: '2-digit',
+    });
+  }
+
   const months = [
     'Jan',
     'Feb',
@@ -129,7 +144,6 @@ export function formatDate(dateString: string) {
     'Nov',
     'Dec',
   ];
-  const date = new Date(dateString);
 
   const day = date.getDate();
   const month = months[date.getMonth()];

client/tailwind.config.cjs

@@ -73,6 +73,7 @@ module.exports = {
         'surface-active': 'var(--surface-active)',
         'surface-active-alt': 'var(--surface-active-alt)',
         'surface-hover': 'var(--surface-hover)',
+        'surface-hover-alt': 'var(--surface-hover-alt)',
         'surface-primary': 'var(--surface-primary)',
         'surface-primary-alt': 'var(--surface-primary-alt)',
         'surface-primary-contrast': 'var(--surface-primary-contrast)',

package-lock.json

@@ -36335,7 +36335,7 @@
     },
     "packages/data-provider": {
       "name": "librechat-data-provider",
-      "version": "0.7.66",
+      "version": "0.7.67",
       "license": "ISC",
       "dependencies": {
         "axios": "^1.7.7",

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.66",
+  "version": "0.7.67",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/types.ts

@@ -195,20 +195,23 @@ export type TConversationTagRequest = Partial<
 
 export type TConversationTagResponse = TConversationTag;
 
-// type for tagging conversation
 export type TTagConversationRequest = {
   tags: string[];
+  tag: string;
 };
+
 export type TTagConversationResponse = string[];
 
 export type TDuplicateConvoRequest = {
   conversationId?: string;
 };
 
-export type TDuplicateConvoResponse = {
+export type TDuplicateConvoResponse =
+  | {
       conversation: TConversation;
       messages: TMessage[];
-} | undefined;
+    }
+  | undefined;
 
 export type TForkConvoRequest = {
   messageId: string;