💡 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/SidePanel/SidePanel.tsx

@@ -9,9 +9,8 @@ import {
 import type { ImperativePanelHandle } from 'react-resizable-panels';
 import type { TEndpointsConfig } from 'librechat-data-provider';
 import { ResizableHandleAlt, ResizablePanel, ResizablePanelGroup } from '~/components/ui/Resizable';
-import { TooltipProvider, Tooltip } from '~/components/ui/Tooltip';
-import useSideNavLinks from '~/hooks/Nav/useSideNavLinks';
 import { useMediaQuery, useLocalStorage, useLocalize } from '~/hooks';
+import useSideNavLinks from '~/hooks/Nav/useSideNavLinks';
 import NavToggle from '~/components/Nav/NavToggle';
 import { useChatContext } from '~/Providers';
 import Switcher from './Switcher';
@@ -176,116 +175,109 @@ const SidePanel = ({
 
   return (
     <>
-      <TooltipProvider delayDuration={0}>
-        <ResizablePanelGroup
-          direction="horizontal"
-          onLayout={(sizes) => throttledSaveLayout(sizes)}
-          className="transition-width relative h-full w-full flex-1 overflow-auto bg-white dark:bg-gray-800"
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes) => throttledSaveLayout(sizes)}
+        className="transition-width relative h-full w-full flex-1 overflow-auto bg-white dark:bg-gray-800"
+      >
+        <ResizablePanel
+          defaultSize={currentLayout[0]}
+          minSize={minSizeMain}
+          order={1}
+          id="messages-view"
         >
-          <ResizablePanel
-            defaultSize={currentLayout[0]}
-            minSize={minSizeMain}
-            order={1}
-            id="messages-view"
-          >
-            {children}
-          </ResizablePanel>
-          {artifacts != null && (
-            <>
-              <ResizableHandleAlt withHandle className="ml-3 bg-border-medium dark:text-white" />
-              <ResizablePanel
-                defaultSize={currentLayout[1]}
-                minSize={minSizeMain}
-                order={2}
-                id="artifacts-panel"
-              >
-                {artifacts}
-              </ResizablePanel>
-            </>
-          )}
-          <TooltipProvider delayDuration={400}>
-            <Tooltip>
-              <div
-                onMouseEnter={() => setIsHovering(true)}
-                onMouseLeave={() => setIsHovering(false)}
-                className="relative flex w-px items-center justify-center"
-              >
-                <NavToggle
-                  navVisible={!isCollapsed}
-                  isHovering={isHovering}
-                  onToggle={toggleNavVisible}
-                  setIsHovering={setIsHovering}
-                  className={cn(
-                    'fixed top-1/2',
-                    (isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse
-                      ? 'mr-9'
-                      : 'mr-16',
-                  )}
-                  translateX={false}
-                  side="right"
-                />
-              </div>
-            </Tooltip>
-          </TooltipProvider>
-          {(!isCollapsed || minSize > 0) && !isSmallScreen && !fullCollapse && (
-            <ResizableHandleAlt withHandle className="bg-transparent dark:text-white" />
-          )}
-          <ResizablePanel
-            tagName="nav"
-            id="controls-nav"
-            order={artifacts != null ? 3 : 2}
-            aria-label={localize('com_ui_controls')}
-            role="region"
-            collapsedSize={collapsedSize}
-            defaultSize={currentLayout[currentLayout.length - 1]}
-            collapsible={true}
-            minSize={minSize}
-            maxSize={40}
-            ref={panelRef}
-            style={{
-              overflowY: 'auto',
-              transition: 'width 0.2s ease, visibility 0s linear 0.2s',
-            }}
-            onExpand={() => {
-              setIsCollapsed(false);
-              localStorage.setItem('react-resizable-panels:collapsed', 'false');
-            }}
-            onCollapse={() => {
-              setIsCollapsed(true);
-              localStorage.setItem('react-resizable-panels:collapsed', 'true');
-            }}
+          {children}
+        </ResizablePanel>
+        {artifacts != null && (
+          <>
+            <ResizableHandleAlt withHandle className="ml-3 bg-border-medium dark:text-white" />
+            <ResizablePanel
+              defaultSize={currentLayout[1]}
+              minSize={minSizeMain}
+              order={2}
+              id="artifacts-panel"
+            >
+              {artifacts}
+            </ResizablePanel>
+          </>
+        )}
+        <div
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
+          className="relative flex w-px items-center justify-center"
+        >
+          <NavToggle
+            navVisible={!isCollapsed}
+            isHovering={isHovering}
+            onToggle={toggleNavVisible}
+            setIsHovering={setIsHovering}
             className={cn(
-              'sidenav hide-scrollbar border-l border-border-light bg-surface-primary-alt transition-opacity',
-              isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
-              (isSmallScreen && isCollapsed && (minSize === 0 || collapsedSize === 0)) ||
-                fullCollapse
-                ? 'hidden min-w-0'
-                : 'opacity-100',
+              'fixed top-1/2',
+              (isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse
+                ? 'mr-9'
+                : 'mr-16',
             )}
-          >
-            {interfaceConfig.modelSelect && (
-              <div
-                className={cn(
-                  'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-surface-primary-alt',
-                  isCollapsed ? 'h-[52px]' : 'px-2',
-                )}
-              >
-                <Switcher
-                  isCollapsed={isCollapsed}
-                  endpointKeyProvided={keyProvided}
-                  endpoint={endpoint}
-                />
-              </div>
-            )}
-            <Nav
-              resize={panelRef.current?.resize}
-              isCollapsed={isCollapsed}
-              defaultActive={defaultActive}
-              links={Links}
-            />
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </TooltipProvider>
+            translateX={false}
+            side="right"
+          />
+        </div>
+        {(!isCollapsed || minSize > 0) && !isSmallScreen && !fullCollapse && (
+          <ResizableHandleAlt withHandle className="bg-transparent dark:text-white" />
+        )}
+        <ResizablePanel
+          tagName="nav"
+          id="controls-nav"
+          order={artifacts != null ? 3 : 2}
+          aria-label={localize('com_ui_controls')}
+          role="region"
+          collapsedSize={collapsedSize}
+          defaultSize={currentLayout[currentLayout.length - 1]}
+          collapsible={true}
+          minSize={minSize}
+          maxSize={40}
+          ref={panelRef}
+          style={{
+            overflowY: 'auto',
+            transition: 'width 0.2s ease, visibility 0s linear 0.2s',
+          }}
+          onExpand={() => {
+            setIsCollapsed(false);
+            localStorage.setItem('react-resizable-panels:collapsed', 'false');
+          }}
+          onCollapse={() => {
+            setIsCollapsed(true);
+            localStorage.setItem('react-resizable-panels:collapsed', 'true');
+          }}
+          className={cn(
+            'sidenav hide-scrollbar border-l border-border-light bg-surface-primary-alt transition-opacity',
+            isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
+            (isSmallScreen && isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse
+              ? 'hidden min-w-0'
+              : 'opacity-100',
+          )}
+        >
+          {interfaceConfig.modelSelect && (
+            <div
+              className={cn(
+                'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-surface-primary-alt',
+                isCollapsed ? 'h-[52px]' : 'px-2',
+              )}
+            >
+              <Switcher
+                isCollapsed={isCollapsed}
+                endpointKeyProvided={keyProvided}
+                endpoint={endpoint}
+              />
+            </div>
+          )}
+          <Nav
+            resize={panelRef.current?.resize}
+            isCollapsed={isCollapsed}
+            defaultActive={defaultActive}
+            links={Links}
+          />
+        </ResizablePanel>
+      </ResizablePanelGroup>
       <button
         aria-label="Close right side panel"
         className={`nav-mask ${!isCollapsed ? 'active' : ''}`}