🎨 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

@ -2,11 +2,7 @@ import React, { useEffect } from 'react';
import { QueryKeys } from 'librechat-data-provider';
import { Controller, useForm } from 'react-hook-form';
import { useQueryClient } from '@tanstack/react-query';
import type {
TConversation,
TConversationTag,
TConversationTagRequest,
} from 'librechat-data-provider';
import type { TConversationTag, TConversationTagRequest } from 'librechat-data-provider';
import { Checkbox, Label, TextareaAutosize, Input } from '~/components';
import { useBookmarkContext } from '~/Providers/BookmarkContext';
import { useConversationTagMutation } from '~/data-provider';
@ -17,7 +13,7 @@ import { cn, logger } from '~/utils';
type TBookmarkFormProps = {
tags?: string[];
bookmark?: TConversationTag;
conversation?: TConversation;
conversationId?: string;
formRef: React.RefObject<HTMLFormElement>;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
mutation: ReturnType<typeof useConversationTagMutation>;
@ -26,7 +22,7 @@ const BookmarkForm = ({
tags,
bookmark,
mutation,
conversation,
conversationId,
setOpen,
formRef,
}: TBookmarkFormProps) => {
@ -46,8 +42,8 @@ const BookmarkForm = ({
defaultValues: {
tag: bookmark?.tag ?? '',
description: bookmark?.description ?? '',
conversationId: conversation?.conversationId ?? '',
addToConversation: conversation ? true : false,
conversationId: conversationId ?? '',
addToConversation: conversationId != null && conversationId ? true : false,
},
});
@ -142,7 +138,7 @@ const BookmarkForm = ({
)}
/>
</div>
{conversation && (
{conversationId != null && conversationId && (
<div className="mt-2 flex w-full items-center">
<Controller
name="addToConversation"