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

🎨 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

60
client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
View file

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