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

@@ -2,13 +2,15 @@ import { PlusCircle } from 'lucide-react';
 import { isAssistantsEndpoint } from 'librechat-data-provider';
 import type { TConversation } from 'librechat-data-provider';
 import { useChatContext, useAddedChatContext } from '~/Providers';
+import { TooltipAnchor } from '~/components';
 import { mainTextareaId } from '~/common';
-import { Button } from '~/components/ui';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
-function AddMultiConvo({ className = '' }: { className?: string }) {
+function AddMultiConvo() {
   const { conversation } = useChatContext();
   const { setConversation: setAddedConvo } = useAddedChatContext();
+  const localize = useLocalize();
 
   const clickHandler = () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -33,15 +35,18 @@ function AddMultiConvo({ className = '' }: { className?: string }) {
   }
 
   return (
-    <Button
+    <TooltipAnchor
       id="add-multi-conversation-button"
-      aria-label="Add multi-conversation"
+      aria-label={localize('com_ui_add_multi_conversation')}
+      description={localize('com_ui_add_multi_conversation')}
+      tabIndex={0}
+      role="button"
       onClick={clickHandler}
-      variant="outline"
-      className={cn('h-10 w-10 p-0 transition-all duration-300 ease-in-out', className)}
+      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"
     >
-      <PlusCircle size={16} />
-    </Button>
+      <PlusCircle size={16} aria-label="Plus Icon" />
+    </TooltipAnchor>
   );
 }
 

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>
       );
     },
   ),

client/src/components/Chat/Landing.tsx

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 import { EModelEndpoint, isAssistantsEndpoint, Constants } from 'librechat-data-provider';
 import { useGetEndpointsQuery, useGetStartupConfig } from 'librechat-data-provider/react-query';
 import type { ReactNode } from 'react';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { useChatContext, useAssistantsMapContext } from '~/Providers';
 import { useGetAssistantDocsQuery } from '~/data-provider';
 import ConvoIcon from '~/components/Endpoints/ConvoIcon';
 import { useLocalize, useSubmitMessage } from '~/hooks';
+import { TooltipAnchor } from '~/components/ui';
 import { BirthdayIcon } from '~/components/svg';
 import { getIconEndpoint, cn } from '~/utils';
 import ConvoStarter from './ConvoStarter';
@@ -58,66 +58,58 @@ export default function Landing({ Header }: { Header?: ReactNode }) {
   const sendConversationStarter = (text: string) => submitMessage({ text });
 
   return (
-    <TooltipProvider delayDuration={50}>
-      <Tooltip>
-        <div className="relative h-full">
-          <div className="absolute left-0 right-0">{Header != null ? Header : null}</div>
-          <div className="flex h-full flex-col items-center justify-center">
-            <div className={cn('relative h-12 w-12', assistantName && avatar ? 'mb-0' : 'mb-3')}>
-              <ConvoIcon
-                conversation={conversation}
-                assistantMap={assistantMap}
-                endpointsConfig={endpointsConfig}
-                containerClassName={containerClassName}
-                context="landing"
-                className="h-2/3 w-2/3"
-                size={41}
-              />
-              {startupConfig?.showBirthdayIcon === true ? (
-                <div>
-                  <TooltipTrigger>
-                    <BirthdayIcon className="absolute bottom-8 right-2.5" />
-                  </TooltipTrigger>
-                  <TooltipContent side="top" sideOffset={110} className="">
-                    {localize('com_ui_happy_birthday')}
-                  </TooltipContent>
-                </div>
-              ) : null}
-            </div>
-            {assistantName ? (
-              <div className="flex flex-col items-center gap-0 p-2">
-                <div className="text-center text-2xl font-medium dark:text-white">
-                  {assistantName}
-                </div>
-                <div className="max-w-md text-center text-sm font-normal text-text-primary ">
-                  {assistantDesc ? assistantDesc : localize('com_nav_welcome_message')}
-                </div>
-                {/* <div className="mt-1 flex items-center gap-1 text-token-text-tertiary">
-              <div className="text-sm text-token-text-tertiary">By Daniel Avila</div>
-            </div> */}
-              </div>
-            ) : (
-              <h2 className="mb-5 max-w-[75vh] px-12 text-center text-lg font-medium dark:text-white md:px-0 md:text-2xl">
-                {isAssistant
-                  ? conversation?.greeting ?? localize('com_nav_welcome_assistant')
-                  : conversation?.greeting ?? localize('com_nav_welcome_message')}
-              </h2>
-            )}
-            <div className="mt-8 flex flex-wrap justify-center gap-3 px-4">
-              {conversation_starters.length > 0 &&
-                conversation_starters
-                  .slice(0, Constants.MAX_CONVO_STARTERS)
-                  .map((text, index) => (
-                    <ConvoStarter
-                      key={index}
-                      text={text}
-                      onClick={() => sendConversationStarter(text)}
-                    />
-                  ))}
-            </div>
-          </div>
+    <div className="relative h-full">
+      <div className="absolute left-0 right-0">{Header != null ? Header : null}</div>
+      <div className="flex h-full flex-col items-center justify-center">
+        <div className={cn('relative h-12 w-12', assistantName && avatar ? 'mb-0' : 'mb-3')}>
+          <ConvoIcon
+            conversation={conversation}
+            assistantMap={assistantMap}
+            endpointsConfig={endpointsConfig}
+            containerClassName={containerClassName}
+            context="landing"
+            className="h-2/3 w-2/3"
+            size={41}
+          />
+          {startupConfig?.showBirthdayIcon === true ? (
+            <TooltipAnchor
+              className="absolute bottom-8 right-2.5"
+              description={localize('com_ui_happy_birthday')}
+            >
+              <BirthdayIcon />
+            </TooltipAnchor>
+          ) : null}
         </div>
-      </Tooltip>
-    </TooltipProvider>
+        {assistantName ? (
+          <div className="flex flex-col items-center gap-0 p-2">
+            <div className="text-center text-2xl font-medium dark:text-white">{assistantName}</div>
+            <div className="max-w-md text-center text-sm font-normal text-text-primary ">
+              {assistantDesc ? assistantDesc : localize('com_nav_welcome_message')}
+            </div>
+            {/* <div className="mt-1 flex items-center gap-1 text-token-text-tertiary">
+            <div className="text-sm text-token-text-tertiary">By Daniel Avila</div>
+          </div> */}
+          </div>
+        ) : (
+          <h2 className="mb-5 max-w-[75vh] px-12 text-center text-lg font-medium dark:text-white md:px-0 md:text-2xl">
+            {isAssistant
+              ? conversation?.greeting ?? localize('com_nav_welcome_assistant')
+              : conversation?.greeting ?? localize('com_nav_welcome_message')}
+          </h2>
+        )}
+        <div className="mt-8 flex flex-wrap justify-center gap-3 px-4">
+          {conversation_starters.length > 0 &&
+            conversation_starters
+              .slice(0, Constants.MAX_CONVO_STARTERS)
+              .map((text, index) => (
+                <ConvoStarter
+                  key={index}
+                  text={text}
+                  onClick={() => sendConversationStarter(text)}
+                />
+              ))}
+        </div>
+      </div>
+    </div>
   );
 }

client/src/components/Chat/Menus/PresetsMenu.tsx

@@ -4,7 +4,7 @@ import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
 import { EditPresetDialog, PresetItems } from './Presets';
 import { useLocalize, usePresets } from '~/hooks';
 import { useChatContext } from '~/Providers';
-import { Button } from '~/components/ui';
+import { TooltipAnchor } from '~/components';
 
 const PresetsMenu: FC = () => {
   const localize = useLocalize();
@@ -25,17 +25,17 @@ const PresetsMenu: FC = () => {
   return (
     <Root>
       <Trigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          className="flex h-[40px] min-w-4 px-3 radix-state-open:bg-surface-hover"
+        <TooltipAnchor
           id="presets-button"
-          data-testid="presets-button"
-          title={localize('com_endpoint_examples')}
           aria-label={localize('com_endpoint_examples')}
+          description={localize('com_endpoint_examples')}
+          tabIndex={0}
+          role="button"
+          data-testid="presets-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"
         >
-          <BookCopy className="icon-sm" id="presets-button" />
-        </Button>
+          <BookCopy size={16} aria-label="Preset Icon" />
+        </TooltipAnchor>
       </Trigger>
       <Portal>
         <div