💡 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/Chat/Input/AudioRecorder.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { ListeningIcon, Spinner } from '~/components/svg';
 import { useLocalize, useSpeechToText } from '~/hooks';
 import { useChatFormContext } from '~/Providers';
+import { TooltipAnchor } from '~/components/ui';
 import { globalAudioId } from '~/common';
 import { cn } from '~/utils';
 
@@ -74,29 +74,20 @@ export default function AudioRecorder({
   };
 
   return (
-    <TooltipProvider delayDuration={250}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            id="audio-recorder"
-            aria-label={localize('com_ui_use_micrphone')}
-            onClick={isListening ? handleStopRecording : handleStartRecording}
-            disabled={disabled}
-            className={cn(
-              'absolute flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700',
-              isRTL
-                ? 'bottom-1.5 left-4 md:bottom-3 md:left-12'
-                : 'bottom-1.5 right-12 md:bottom-3 md:right-12',
-            )}
-            type="button"
-          >
-            {renderIcon()}
-          </button>
-        </TooltipTrigger>
-        <TooltipContent side="top" sideOffset={10}>
-          {localize('com_ui_use_micrphone')}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <TooltipAnchor
+      id="audio-recorder"
+      aria-label={localize('com_ui_use_micrphone')}
+      onClick={isListening ? handleStopRecording : handleStartRecording}
+      disabled={disabled}
+      className={cn(
+        'absolute flex h-[30px] w-[30px] items-center justify-center rounded-lg p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700',
+        isRTL
+          ? 'bottom-1.5 left-4 md:bottom-3 md:left-12'
+          : 'bottom-1.5 right-12 md:bottom-3 md:right-12',
+      )}
+      description={localize('com_ui_use_micrphone')}
+    >
+      {renderIcon()}
+    </TooltipAnchor>
   );
 }

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -5,10 +5,10 @@ import {
   fileConfig as defaultFileConfig,
   mergeFileConfig,
 } from 'librechat-data-provider';
+import { FileUpload, TooltipAnchor } from '~/components/ui';
+import { useFileHandling, useLocalize } from '~/hooks';
 import { useGetFileConfig } from '~/data-provider';
 import { AttachmentIcon } from '~/components/svg';
-import { FileUpload } from '~/components/ui';
-import { useFileHandling } from '~/hooks';
 import { cn } from '~/utils';
 
 const AttachFile = ({
@@ -22,6 +22,7 @@ const AttachFile = ({
   isRTL: boolean;
   disabled?: boolean | null;
 }) => {
+  const localize = useLocalize();
   const { handleFileChange } = useFileHandling();
   const { data: fileConfig = defaultFileConfig } = useGetFileConfig({
     select: (data) => mergeFileConfig(data),
@@ -42,17 +43,18 @@ const AttachFile = ({
       )}
     >
       <FileUpload handleFileChange={handleFileChange} className="flex">
-        <button
+        <TooltipAnchor
+          id="audio-recorder"
+          aria-label={localize('com_sidepanel_attach_files')}
           disabled={!!disabled}
-          type="button"
           className="btn relative text-black focus:outline-none focus:ring-2 focus:ring-border-xheavy focus:ring-opacity-50 dark:text-white"
-          aria-label="Attach files"
           style={{ padding: 0 }}
+          description={localize('com_sidepanel_attach_files')}
         >
           <div className="flex w-full items-center justify-center gap-2">
             <AttachmentIcon />
           </div>
-        </button>
+        </TooltipAnchor>
       </FileUpload>
     </div>
   );

client/src/components/Chat/Input/HeaderOptions.tsx

@@ -5,13 +5,12 @@ import { useState, useEffect, useMemo } from 'react';
 import { tPresetUpdateSchema, EModelEndpoint, paramEndpoints } from 'librechat-data-provider';
 import type { TPreset, TInterfaceConfig } from 'librechat-data-provider';
 import { EndpointSettings, SaveAsPresetDialog, AlternativeSettings } from '~/components/Endpoints';
+import { PluginStoreDialog, TooltipAnchor } from '~/components';
 import { ModelSelect } from '~/components/Input/ModelSelect';
-import { PluginStoreDialog } from '~/components';
+import { useSetIndexOptions, useLocalize } from '~/hooks';
 import OptionsPopover from './OptionsPopover';
 import PopoverButtons from './PopoverButtons';
-import { useSetIndexOptions } from '~/hooks';
 import { useChatContext } from '~/Providers';
-import { Button } from '~/components/ui';
 import store from '~/store';
 
 export default function HeaderOptions({
@@ -23,6 +22,7 @@ export default function HeaderOptions({
   const [showPluginStoreDialog, setShowPluginStoreDialog] = useRecoilState(
     store.showPluginStoreDialog,
   );
+  const localize = useLocalize();
 
   const { showPopover, conversation, latestMessage, setShowPopover, setShowBingToneSetting } =
     useChatContext();
@@ -84,17 +84,18 @@ export default function HeaderOptions({
               {!noSettings[endpoint] &&
                 interfaceConfig?.parameters === true &&
                 !paramEndpoints.has(endpoint) && (
-                <Button
-                  aria-label="Settings/parameters"
+                <TooltipAnchor
                   id="parameters-button"
-                  data-testid="parameters-button"
-                  type="button"
-                  variant="outline"
+                  aria-label={localize('com_ui_model_parameters')}
+                  description={localize('com_ui_model_parameters')}
+                  tabIndex={0}
+                  role="button"
                   onClick={triggerAdvancedMode}
-                  className="flex h-[40px] min-w-4 px-3 radix-state-open:bg-surface-hover"
+                  data-testid="parameters-button"
+                  className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
                 >
-                  <Settings2 className="w-4 text-gray-600 dark:text-white" />
-                </Button>
+                  <Settings2 size={16} aria-label="Settings/Parameters Icon" />
+                </TooltipAnchor>
               )}
             </div>
             {interfaceConfig?.parameters === true && !paramEndpoints.has(endpoint) && (

client/src/components/Chat/Input/SendButton.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { useWatch } from 'react-hook-form';
 import type { Control } from 'react-hook-form';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
+import { TooltipAnchor } from '~/components/ui';
 import { SendIcon } from '~/components/svg';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
@@ -17,33 +17,29 @@ const SubmitButton = React.memo(
     (props: { disabled: boolean; isRTL: boolean }, ref: React.ForwardedRef<HTMLButtonElement>) => {
       const localize = useLocalize();
       return (
-        <TooltipProvider delayDuration={250}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                ref={ref}
-                aria-label={localize('com_nav_send_message')}
-                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',
-                  props.isRTL
-                    ? 'bottom-1.5 left-2 md:bottom-3 md:left-3'
-                    : 'bottom-1.5 right-2 md:bottom-3 md:right-3',
-                )}
-                data-testid="send-button"
-                type="submit"
-              >
-                <span className="" data-state="closed">
-                  <SendIcon size={24} />
-                </span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top" sideOffset={10}>
-              {localize('com_nav_send_message')}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <TooltipAnchor
+          description={localize('com_nav_send_message')}
+          render={
+            <button
+              ref={ref}
+              aria-label={localize('com_nav_send_message')}
+              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',
+                props.isRTL
+                  ? 'bottom-1.5 left-2 md:bottom-3 md:left-3'
+                  : 'bottom-1.5 right-2 md:bottom-3 md:right-3',
+              )}
+              data-testid="send-button"
+              type="submit"
+            >
+              <span className="" data-state="closed">
+                <SendIcon size={24} />
+              </span>
+            </button>
+          }
+        ></TooltipAnchor>
       );
     },
   ),