🎨 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>
This commit is contained in:
Marco Beretta 2024-12-29 23:31:41 +01:00 committed by GitHub
parent d9c59b08e6
commit cb1921626e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
50 changed files with 767 additions and 484 deletions

View file

@ -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>
);
}

View file

@ -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}