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 1

🎨 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

22
client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
View file

@ -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}
setShowShareDialog={setShowShareDialog}
open={showShareDialog}
onOpenChange={setShowShareDialog}
triggerRef={shareButtonRef}
/>
)}
{showDeleteDialog && (
@ -146,6 +155,7 @@ export default function ConvoOptions({
conversationId={conversationId ?? ''}
showDeleteDialog={showDeleteDialog}
setShowDeleteDialog={setShowDeleteDialog}
triggerRef={deleteButtonRef}
/>
)}
</>