💡 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

client/src/components/Nav/SettingsTabs/Data/SharedLinkTable.tsx

@@ -1,20 +1,13 @@
-import { useMemo, useState, MouseEvent } from 'react';
+import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { MessageSquare, Link as LinkIcon } from 'lucide-react';
+import { Link as LinkIcon } from 'lucide-react';
 import type { SharedLinksResponse, TSharedLink } from 'librechat-data-provider';
 import { useDeleteSharedLinkMutation, useSharedLinksInfiniteQuery } from '~/data-provider';
 import { useAuthContext, useLocalize, useNavScrolling } from '~/hooks';
+import { Spinner, TooltipAnchor, TrashIcon } from '~/components';
 import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
 import { cn } from '~/utils';
-import {
-  Spinner,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  TrashIcon,
-} from '~/components';
 
 function SharedLinkDeleteButton({
   shareId,
@@ -36,7 +29,7 @@ function SharedLinkDeleteButton({
     },
   });
 
-  const handleDelete = async (e: MouseEvent<HTMLButtonElement>) => {
+  const handleDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
     e.preventDefault();
     if (mutation.isLoading) {
       return;
@@ -46,36 +39,14 @@ function SharedLinkDeleteButton({
     setIsDeleting(false);
   };
   return (
-    <TooltipProvider delayDuration={250}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button id="delete-shared-link" aria-label="Delete shared link" onClick={handleDelete}>
-            <TrashIcon />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent side="top" sideOffset={0}>
-          {localize('com_ui_delete')}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
-function SourceChatButton({ conversationId }: { conversationId: string }) {
-  const localize = useLocalize();
-
-  return (
-    <TooltipProvider delayDuration={250}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Link to={`/c/${conversationId}`} target="_blank" rel="noreferrer">
-            <MessageSquare className="h-4 w-4 hover:text-gray-300" />
-          </Link>
-        </TooltipTrigger>
-        <TooltipContent side="top" sideOffset={0}>
-          {localize('com_nav_source_chat')}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <TooltipAnchor
+      description={localize('com_ui_delete')}
+      id="delete-shared-link"
+      aria-label="Delete shared link"
+      onClick={handleDelete}
+    >
+      <TrashIcon className="size-4" />
+    </TooltipAnchor>
   );
 }
 
@@ -114,15 +85,12 @@ function ShareLinkRow({ sharedLink }: { sharedLink: TSharedLink }) {
             )}
           >
             {sharedLink.conversationId && (
-              <>
-                <SourceChatButton conversationId={sharedLink.conversationId} />
-                <div className={cn('h-4 w-4 cursor-pointer', !isDeleting && 'hover:text-gray-300')}>
-                  <SharedLinkDeleteButton
-                    shareId={sharedLink.shareId}
-                    setIsDeleting={setIsDeleting}
-                  />
-                </div>
-              </>
+              <div className={cn('cursor-pointer', !isDeleting && 'hover:text-gray-300')}>
+                <SharedLinkDeleteButton
+                  shareId={sharedLink.shareId}
+                  setIsDeleting={setIsDeleting}
+                />
+              </div>
             )}
           </div>
         </div>

client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx

@@ -1,6 +1,6 @@
 import { useLocalize } from '~/hooks';
-import { Dialog, DialogTrigger } from '~/components/ui';
-import DialogTemplate from '~/components/ui/DialogTemplate';
+import { OGDialog, OGDialogTrigger } from '~/components/ui';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 
 import ShareLinkTable from './SharedLinkTable';
 
@@ -11,19 +11,19 @@ export default function SharedLinks() {
     <div className="flex items-center justify-between">
       <div>{localize('com_nav_shared_links')}</div>
 
-      <Dialog>
-        <DialogTrigger asChild>
+      <OGDialog>
+        <OGDialogTrigger asChild>
           <button className="btn btn-neutral relative ">
             {localize('com_nav_shared_links_manage')}
           </button>
-        </DialogTrigger>
-        <DialogTemplate
+        </OGDialogTrigger>
+        <OGDialogTemplate
           title={localize('com_nav_shared_links')}
           className="max-w-[1000px]"
           showCancelButton={false}
           main={<ShareLinkTable />}
         />
-      </Dialog>
+      </OGDialog>
     </div>
   );
 }