Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-11 13:08:51 +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

4
client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
View file

@ -1,4 +1,5 @@
import { memo } from 'react';
import MaximizeChatSpace from './MaximizeChatSpace';
import FontSizeSelector from './FontSizeSelector';
import SendMessageKeyEnter from './EnterToSend';
import ShowCodeSwitch from './ShowCodeSwitch';
@ -20,6 +21,9 @@ function Chat() {
<div className="pb-3">
<SendMessageKeyEnter />
</div>
<div className="pb-3">
<MaximizeChatSpace />
</div>
<div className="pb-3">
<ShowCodeSwitch />
</div>

38
client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx Normal file
View file

@ -0,0 +1,38 @@
import { useRecoilState } from 'recoil';
import HoverCardSettings from '../HoverCardSettings';
import { Switch } from '~/components/ui/Switch';
import useLocalize from '~/hooks/useLocalize';
import store from '~/store';
export default function MaximizeChatSpace({
onCheckedChange,
}: {
onCheckedChange?: (value: boolean) => void;
}) {
const [maximizeChatSpace, setmaximizeChatSpace] = useRecoilState<boolean>(
store.maximizeChatSpace,
);
const localize = useLocalize();
const handleCheckedChange = (value: boolean) => {
setmaximizeChatSpace(value);
if (onCheckedChange) {
onCheckedChange(value);
}
};
return (
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<div>{localize('com_nav_maximize_chat_space')}</div>
</div>
<Switch
id="maximizeChatSpace"
checked={maximizeChatSpace}
onCheckedChange={handleCheckedChange}
className="ml-4"
data-testid="maximizeChatSpace"
/>
</div>
);
}