Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

🎨 feat: enhance Chat Input UI, File Mgmt. UI, Bookmarks a11y (#5112)

Browse source 
* 🎨 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
Download patch file Download diff file Expand all files Collapse all files

21
client/src/components/Chat/Input/Files/Table/Columns.tsx
View file

@ -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 { AzureMinimalIcon } from '~/components/svg';
import { Button, Checkbox } from '~/components/ui';
import { useLocalize, useMediaQuery } from '~/hooks';
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')}