Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 01:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

👐 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

50
client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
View file

@ -1,13 +1,12 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback } from 'react';
import { QueryKeys } from 'librechat-data-provider';
import { useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import type { TMessage } from 'librechat-data-provider';
import { useDeleteConversationMutation } from '~/data-provider';
import { OGDialog, OGDialogTrigger, Label, TooltipAnchor } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { TrashIcon } from '~/components/svg';
import { useLocalize, useNewConvo } from '~/hooks';
import { OGDialog, Label } from '~/components';
type DeleteButtonProps = {
conversationId: string;
@ -17,19 +16,21 @@ type DeleteButtonProps = {
setShowDeleteDialog?: (value: boolean) => void;
};
export default function DeleteButton({
export function DeleteConversationDialog({
conversationId,
retainView,
title,
showDeleteDialog,
setShowDeleteDialog,
}: DeleteButtonProps) {
}: {
conversationId: string;
retainView: () => void;
title: string;
}) {
const localize = useLocalize();
const navigate = useNavigate();
const queryClient = useQueryClient();
const { newConversation } = useNewConvo();
const { conversationId: currentConvoId } = useParams();
const [open, setOpen] = useState(false);
const deleteConvoMutation = useDeleteConversationMutation({
onSuccess: () => {
if (currentConvoId === conversationId || currentConvoId === 'new') {
@ -47,7 +48,7 @@ export default function DeleteButton({
deleteConvoMutation.mutate({ conversationId, thread_id, source: 'button' });
}, [conversationId, deleteConvoMutation, queryClient]);
const dialogContent = (
return (
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_conversation')}
@ -71,25 +72,26 @@ export default function DeleteButton({
}}
/>
);
}
if (showDeleteDialog !== undefined && setShowDeleteDialog !== undefined) {
return (
<OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
{dialogContent}
</OGDialog>
);
export default function DeleteButton({
conversationId,
retainView,
title,
showDeleteDialog,
setShowDeleteDialog,
}: DeleteButtonProps) {
if (showDeleteDialog === undefined && setShowDeleteDialog === undefined) {
return null;
}
return (
<OGDialog open={open} onOpenChange={setOpen}>
<TooltipAnchor description={localize('com_ui_delete')}>
<OGDialogTrigger asChild>
<button>
<TrashIcon className="h-5 w-5" />
</button>
</OGDialogTrigger>
</TooltipAnchor>
{dialogContent}
<OGDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
<DeleteConversationDialog
conversationId={conversationId}
retainView={retainView}
title={title}
/>
</OGDialog>
);
}