Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-30 23:28:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🎨 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

46
client/src/components/Bookmarks/BookmarkEditDialog.tsx
View file

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