💡 style: switched to Ariakit's tooltip (#3748)

* inital Tooltip implementation and test

* style(tooltip): L/R sidePanel and Nav

* style(tooltip): unarchive button; refactor: `useArchiveHandler` and `ArchiveButton`

* style(tooltip): Delete button

* refactor: remove unused className prop in DeleteButton component

* style(tooltip): finish final tooltip and fix bookmark edit and delete button

* refactor(ui): remove TooltipTest and DropDownMenu component and unused imports

* style: update mobile UI

* fix: sidePanel icon not showing

* feat(AttachFile): add tooltip

* fix(NavToggle): remove button
without this button, kb users don't have to manually press 2 times to change the focus
Also, tooltips with buttons focus don't trigger

* fix: right side panel issue with double button

* fix: merge issues

* fix: sharedLink table issue

* chore: update ariakit and framer-motion version

* a11y: kb toggle for sidebar

* feat: tooltip for some buttons
This commit is contained in:
Marco Beretta 2024-09-13 08:59:09 -04:00 committed by GitHub
parent e293ff63f9
commit 4ef5ae6f71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 747 additions and 967 deletions

View file

@ -4,15 +4,7 @@ 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,
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '~/components/ui';
import { OGDialog, OGDialogTrigger, Label, TooltipAnchor } from '~/components/ui';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { TrashIcon } from '~/components/svg';
import { useLocalize, useNewConvo } from '~/hooks';
@ -21,7 +13,6 @@ type DeleteButtonProps = {
conversationId: string;
retainView: () => void;
title: string;
className?: string;
showDeleteDialog?: boolean;
setShowDeleteDialog?: (value: boolean) => void;
};
@ -30,7 +21,6 @@ export default function DeleteButton({
conversationId,
retainView,
title,
className = '',
showDeleteDialog,
setShowDeleteDialog,
}: DeleteButtonProps) {
@ -92,20 +82,13 @@ export default function DeleteButton({
return (
<OGDialog open={open} onOpenChange={setOpen}>
<TooltipProvider delayDuration={250}>
<Tooltip>
<OGDialogTrigger asChild>
<TooltipTrigger asChild>
<button>
<TrashIcon className="h-5 w-5" />
</button>
</TooltipTrigger>
</OGDialogTrigger>
<TooltipContent side="top" sideOffset={0} className={className}>
{localize('com_ui_delete')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipAnchor description={localize('com_ui_delete')}>
<OGDialogTrigger asChild>
<button>
<TrashIcon className="h-5 w-5" />
</button>
</OGDialogTrigger>
</TooltipAnchor>
{dialogContent}
</OGDialog>
);