Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-02 08:38:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091)

Browse source 
* fix: cursor pointer not applying correct in the root component

* fix: add cursor-not-allowed to disabled state in SendButton component

* feat: update Dropdown to ariakit and changed LLM error's style

* feat: switched to ariakit's Dropdown and style improvements

* feat: archive updates

* refactor: delete conversations in archive

* refactor: settings

* add cool settings animation

* a11y: settings update

* style: update settings

* style: settings account settings menu; a11y(AccountSettings): switched to AriaKit

* a11y: account settings update

* style: update my files dialog

* fix: tests

* chore: remove console.log()

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2024-09-22 04:45:50 +02:00 • committed by GitHub
parent eba2c9a032
commit 2d62eca612
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
58 changed files with 1054 additions and 824 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -1,4 +1,4 @@
import { memo, useRef, useMemo } from 'react';
import { memo, useRef, useMemo, useEffect } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import {
supportsFiles,
@ -44,6 +44,7 @@ const ChatForm = ({ index = 0 }) => {
const TextToSpeech = useRecoilValue(store.textToSpeech);
const automaticPlayback = useRecoilValue(store.automaticPlayback);
const isSearching = useRecoilValue(store.isSearching);
const [showStopButton, setShowStopButton] = useRecoilState(store.showStopButtonByIndex(index));
const [showPlusPopover, setShowPlusPopover] = useRecoilState(store.showPlusPopoverFamily(index));
const [showMentionPopover, setShowMentionPopover] = useRecoilState(
@ -123,6 +124,12 @@ const ChatForm = ({ index = 0 }) => {
},
});
useEffect(() => {
if (!isSearching && textAreaRef.current && !disableInputs) {
textAreaRef.current.focus();
}
}, [isSearching, disableInputs]);
return (
<form
onSubmit={methods.handleSubmit((data) => submitMessage(data))}
@ -164,9 +171,6 @@ const ChatForm = ({ index = 0 }) => {
{endpoint && (
<TextareaAutosize
{...registerProps}
// TODO: remove autofocus due to a11y issues
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
ref={(e) => {
ref(e);
textAreaRef.current = e;

27
client/src/components/Chat/Input/Files/FilesView.tsx
View file

@ -1,10 +1,9 @@
import { FileSources, FileContext } from 'librechat-data-provider';
import type { TFile } from 'librechat-data-provider';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
import { OGDialog, OGDialogContent, OGDialogHeader, OGDialogTitle } from '~/components';
import { useGetFiles } from '~/data-provider';
import { DataTable, columns } from './Table';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils/';
export default function Files({ open, onOpenChange }) {
const localize = useLocalize();
@ -19,20 +18,16 @@ export default function Files({ open, onOpenChange }) {
});
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className={cn('w-11/12 overflow-x-auto shadow-2xl dark:bg-gray-700 dark:text-white')}
<OGDialog open={open} onOpenChange={onOpenChange}>
<OGDialogContent
title={localize('com_nav_my_files')}
className="w-11/12 overflow-x-auto bg-background text-text-primary shadow-2xl"
>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
{localize('com_nav_my_files')}
</DialogTitle>
</DialogHeader>
<div className="overflow-x-auto p-0 sm:p-6 sm:pt-4">
<DataTable columns={columns} data={files} />
<div className="mt-5 sm:mt-4" />
</div>
</DialogContent>
</Dialog>
<OGDialogHeader>
<OGDialogTitle>{localize('com_nav_my_files')}</OGDialogTitle>
</OGDialogHeader>
<DataTable columns={columns} data={files} />
</OGDialogContent>
</OGDialog>
);
}

2
client/src/components/Chat/Input/SendButton.tsx
View file

@ -26,7 +26,7 @@ const SubmitButton = React.memo(
id="send-button"
disabled={props.disabled}
className={cn(
'absolute rounded-lg border border-black p-0.5 text-white outline-offset-4 transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white',
'absolute rounded-lg border border-black p-0.5 text-white outline-offset-4 transition-colors enabled:bg-black disabled:cursor-not-allowed disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white',
props.isRTL
? 'bottom-1.5 left-2 md:bottom-3 md:left-3'
: 'bottom-1.5 right-2 md:bottom-3 md:right-3',