From a1b22b745de2a67b1337315aeab6c3fd4bda993c Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Wed, 24 Jun 2026 17:58:23 +0200
Subject: [PATCH] refactor(client): migrate low-risk primitives to
 @librechat/client

Swap raw <label>, <textarea>, and native title= tooltips for the
@librechat/client Label, Textarea, and TooltipAnchor components across
Agents, Endpoints settings, Export modal, Prompts, Sharing, and Memory
dialogs. Add localization keys (scroll, sibling navigation, none
selected, select var) for the remaining swap waves.
---
 client/src/components/Agents/AgentDetail.tsx  | 52 ++++++++++++-------
 .../components/Agents/AgentDetailContent.tsx  | 46 +++++++++-------
 .../Agents/tests/AgentDetailContent.spec.tsx  |  1 +
 .../Endpoints/Settings/Advanced.tsx           |  8 +--
 .../Nav/ExportConversation/ExportModal.tsx    | 14 ++---
 .../Prompts/lists/ChatGroupItem.tsx           | 18 ++++---
 .../Sharing/GenericGrantAccessDialog.tsx      | 46 ++++++++--------
 .../SidePanel/Memories/MemoryCreateDialog.tsx |  3 +-
 .../SidePanel/Memories/MemoryEditDialog.tsx   |  3 +-
 client/src/locales/en/translation.json        |  7 +++
 10 files changed, 120 insertions(+), 78 deletions(-)

diff --git a/client/src/components/Agents/AgentDetail.tsx b/client/src/components/Agents/AgentDetail.tsx
index 9fa05a4d93..9b26aa8339 100644
--- a/client/src/components/Agents/AgentDetail.tsx
+++ b/client/src/components/Agents/AgentDetail.tsx
@@ -1,7 +1,13 @@
 import React, { useRef } from 'react';
 import { Link, Pin, PinOff } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
-import { OGDialog, OGDialogContent, Button, useToastContext } from '@librechat/client';
+import {
+  OGDialog,
+  OGDialogContent,
+  Button,
+  TooltipAnchor,
+  useToastContext,
+} from '@librechat/client';
 import {
   QueryKeys,
   Constants,
@@ -165,24 +171,32 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
 
         {/* Action button */}
         <div className="mb-4 mt-6 flex justify-center gap-2">
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={handleFavoriteClick}
-            title={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
-            aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
-          >
-            {isFavorite ? <PinOff className="h-4 w-4" /> : <Pin className="h-4 w-4" />}
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={handleCopyLink}
-            title={localize('com_agents_copy_link')}
-            aria-label={localize('com_agents_copy_link')}
-          >
-            <Link className="h-4 w-4" aria-hidden="true" />
-          </Button>
+          <TooltipAnchor
+            description={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
+            render={
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleFavoriteClick}
+                aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
+              >
+                {isFavorite ? <PinOff className="h-4 w-4" /> : <Pin className="h-4 w-4" />}
+              </Button>
+            }
+          />
+          <TooltipAnchor
+            description={localize('com_agents_copy_link')}
+            render={
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleCopyLink}
+                aria-label={localize('com_agents_copy_link')}
+              >
+                <Link className="h-4 w-4" aria-hidden="true" />
+              </Button>
+            }
+          />
           <Button
             variant="submit"
             className="w-full max-w-xs"
diff --git a/client/src/components/Agents/AgentDetailContent.tsx b/client/src/components/Agents/AgentDetailContent.tsx
index 356da52df1..8aabe11412 100644
--- a/client/src/components/Agents/AgentDetailContent.tsx
+++ b/client/src/components/Agents/AgentDetailContent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, Pin, PinOff } from 'lucide-react';
 import { useQueryClient } from '@tanstack/react-query';
-import { OGDialogContent, Button, useToastContext } from '@librechat/client';
+import { OGDialogContent, Button, TooltipAnchor, useToastContext } from '@librechat/client';
 import {
   QueryKeys,
   Constants,
@@ -119,24 +119,32 @@ const AgentDetailContent: React.FC<AgentDetailContentProps> = ({ agent }) => {
 
       {/* Action button */}
       <div className="mb-4 mt-6 flex justify-center gap-2">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleFavoriteClick}
-          title={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
-          aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
-        >
-          {isFavorite ? <PinOff className="h-4 w-4" /> : <Pin className="h-4 w-4" />}
-        </Button>
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleCopyLink}
-          title={localize('com_agents_copy_link')}
-          aria-label={localize('com_agents_copy_link')}
-        >
-          <Link className="h-4 w-4" aria-hidden="true" />
-        </Button>
+        <TooltipAnchor
+          description={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
+          render={
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleFavoriteClick}
+              aria-label={isFavorite ? localize('com_ui_unpin') : localize('com_ui_pin')}
+            >
+              {isFavorite ? <PinOff className="h-4 w-4" /> : <Pin className="h-4 w-4" />}
+            </Button>
+          }
+        />
+        <TooltipAnchor
+          description={localize('com_agents_copy_link')}
+          render={
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleCopyLink}
+              aria-label={localize('com_agents_copy_link')}
+            >
+              <Link className="h-4 w-4" aria-hidden="true" />
+            </Button>
+          }
+        />
         <Button
           variant="submit"
           className="w-full max-w-xs"
diff --git a/client/src/components/Agents/tests/AgentDetailContent.spec.tsx b/client/src/components/Agents/tests/AgentDetailContent.spec.tsx
index a60b8dd870..130e039d4c 100644
--- a/client/src/components/Agents/tests/AgentDetailContent.spec.tsx
+++ b/client/src/components/Agents/tests/AgentDetailContent.spec.tsx
@@ -32,6 +32,7 @@ jest.mock(
     Button: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
       <button {...props}>{children}</button>
     ),
+    TooltipAnchor: ({ render }: { render: React.ReactNode }) => render,
     useToastContext: () => ({
       showToast: jest.fn(),
     }),
diff --git a/client/src/components/Endpoints/Settings/Advanced.tsx b/client/src/components/Endpoints/Settings/Advanced.tsx
index 11067313ea..647e7f1b59 100644
--- a/client/src/components/Endpoints/Settings/Advanced.tsx
+++ b/client/src/components/Endpoints/Settings/Advanced.tsx
@@ -283,18 +283,18 @@ export default function Settings({
         </HoverCard>
         <div className="w-full">
           <div className="mb-2 flex w-full justify-between gap-2">
-            <label
+            <Label
               htmlFor="resend-files"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
             >
               <small>{localize('com_endpoint_plug_resend_files')}</small>
-            </label>
-            <label
+            </Label>
+            <Label
               htmlFor="image-detail-value"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
             >
               <small>{localize('com_endpoint_plug_image_detail')}</small>
-            </label>
+            </Label>
             <Input
               id="image-detail-value"
               disabled={true}
diff --git a/client/src/components/Nav/ExportConversation/ExportModal.tsx b/client/src/components/Nav/ExportConversation/ExportModal.tsx
index 1f900893b7..f9cd73875c 100644
--- a/client/src/components/Nav/ExportConversation/ExportModal.tsx
+++ b/client/src/components/Nav/ExportConversation/ExportModal.tsx
@@ -1,5 +1,5 @@
-import filenamify from 'filenamify';
 import { useEffect, useState, useMemo, useCallback } from 'react';
+import filenamify from 'filenamify';
 import {
   Input,
   Label,
@@ -126,7 +126,7 @@ export default function ExportModal({
                       onCheckedChange={setIncludeOptions}
                       aria-labelledby="includeOptions-label"
                     />
-                    <label
+                    <Label
                       id="includeOptions-label"
                       htmlFor="includeOptions"
                       className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -134,7 +134,7 @@ export default function ExportModal({
                       {exportOptionsSupport
                         ? localize('com_nav_export_include_endpoint_options')
                         : localize('com_nav_not_supported')}
-                    </label>
+                    </Label>
                   </div>
                 </div>
               </div>
@@ -150,7 +150,7 @@ export default function ExportModal({
                     onCheckedChange={setExportBranches}
                     aria-labelledby="exportBranches-label"
                   />
-                  <label
+                  <Label
                     id="exportBranches-label"
                     htmlFor="exportBranches"
                     className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -158,7 +158,7 @@ export default function ExportModal({
                     {exportBranchesSupport
                       ? localize('com_nav_export_all_message_branches')
                       : localize('com_nav_not_supported')}
-                  </label>
+                  </Label>
                 </div>
               </div>
               {type === 'json' ? (
@@ -173,13 +173,13 @@ export default function ExportModal({
                       onCheckedChange={setRecursive}
                       aria-labelledby="recursive-label"
                     />
-                    <label
+                    <Label
                       id="recursive-label"
                       htmlFor="recursive"
                       className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     >
                       {localize('com_nav_export_recursive')}
-                    </label>
+                    </Label>
                   </div>
                 </div>
               ) : null}
diff --git a/client/src/components/Prompts/lists/ChatGroupItem.tsx b/client/src/components/Prompts/lists/ChatGroupItem.tsx
index 2b05964e03..c5695c2c1c 100644
--- a/client/src/components/Prompts/lists/ChatGroupItem.tsx
+++ b/client/src/components/Prompts/lists/ChatGroupItem.tsx
@@ -1,9 +1,8 @@
 import { useState, memo, useRef, useCallback, useId, useMemo } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Ellipsis, Eye, SquarePen, Trash, EarthIcon, User } from 'lucide-react';
 import { PermissionBits, ResourceType } from 'librechat-data-provider';
-import type { TPromptGroup } from 'librechat-data-provider';
+import { Ellipsis, Eye, SquarePen, Trash, EarthIcon, User } from 'lucide-react';
 import {
   Label,
   Button,
@@ -14,12 +13,13 @@ import {
   OGDialogTemplate,
   useToastContext,
 } from '@librechat/client';
+import type { TPromptGroup } from 'librechat-data-provider';
 import { useLocalize, useAuthContext, useSubmitMessage, useResourcePermissions } from '~/hooks';
 import { useRecordPromptUsage, useDeletePromptGroup } from '~/data-provider';
-import { useLiveAnnouncer } from '~/Providers';
 import VariableDialog from '../dialogs/VariableDialog';
 import PreviewPrompt from '../dialogs/PreviewPrompt';
 import CategoryIcon from '../utils/CategoryIcon';
+import { useLiveAnnouncer } from '~/Providers';
 import { detectVariables, cn } from '~/utils';
 
 const PROMPT_PATH = '/prompts';
@@ -157,9 +157,15 @@ function ChatGroupItem({
           />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-1.5">
-              <span className="truncate text-sm font-semibold text-text-primary" title={group.name}>
-                {group.name}
-              </span>
+              <TooltipAnchor
+                description={group.name}
+                side="top"
+                render={
+                  <span className="truncate text-sm font-semibold text-text-primary">
+                    {group.name}
+                  </span>
+                }
+              />
               {isSharedPrompt && (
                 <TooltipAnchor
                   description={localize('com_ui_by_author', { 0: group.authorName })}
diff --git a/client/src/components/Sharing/GenericGrantAccessDialog.tsx b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
index fd6af744c1..ecf246491c 100644
--- a/client/src/components/Sharing/GenericGrantAccessDialog.tsx
+++ b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
@@ -380,31 +380,35 @@ export default function GenericGrantAccessDialog({
           <div className="flex justify-between pt-4">
             <div className="flex gap-2">
               {resourceId && resourceUrl && (
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    if (isCopying) return;
-                    copyResourceUrl(setIsCopying);
-                    showToast({
-                      message: localize('com_ui_agent_url_copied'),
-                      status: 'success',
-                    });
-                  }}
-                  disabled={isCopying}
-                  className={cn('shrink-0', isCopying ? 'cursor-default' : '')}
-                  aria-label={localize('com_ui_copy_url_to_clipboard')}
-                  title={
+                <TooltipAnchor
+                  description={
                     isCopying
                       ? config?.getCopyUrlMessage()
                       : localize('com_ui_copy_url_to_clipboard')
                   }
-                >
-                  {isCopying ? (
-                    <CopyCheck className="h-4 w-4" aria-hidden="true" />
-                  ) : (
-                    <Link className="h-4 w-4" aria-hidden="true" />
-                  )}
-                </Button>
+                  render={
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        if (isCopying) return;
+                        copyResourceUrl(setIsCopying);
+                        showToast({
+                          message: localize('com_ui_agent_url_copied'),
+                          status: 'success',
+                        });
+                      }}
+                      disabled={isCopying}
+                      className={cn('shrink-0', isCopying ? 'cursor-default' : '')}
+                      aria-label={localize('com_ui_copy_url_to_clipboard')}
+                    >
+                      {isCopying ? (
+                        <CopyCheck className="h-4 w-4" aria-hidden="true" />
+                      ) : (
+                        <Link className="h-4 w-4" aria-hidden="true" />
+                      )}
+                    </Button>
+                  }
+                />
               )}
             </div>
             <div className="flex gap-2">
diff --git a/client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx b/client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
index df5d5befff..ebdb3e7133 100644
--- a/client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryCreateDialog.tsx
@@ -7,6 +7,7 @@ import {
   Label,
   Input,
   Spinner,
+  Textarea,
   useToastContext,
 } from '@librechat/client';
 import { useCreateMemoryMutation } from '~/data-provider';
@@ -129,7 +130,7 @@ export default function MemoryCreateDialog({
               <Label htmlFor="memory-value" className="text-sm font-medium text-text-primary">
                 {localize('com_ui_value')}
               </Label>
-              <textarea
+              <Textarea
                 id="memory-value"
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
diff --git a/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx b/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
index 196db5e65a..f794ff7bd6 100644
--- a/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx
@@ -7,6 +7,7 @@ import {
   Label,
   Input,
   Spinner,
+  Textarea,
   useToastContext,
 } from '@librechat/client';
 import type { TUserMemory } from 'librechat-data-provider';
@@ -200,7 +201,7 @@ export default function MemoryEditDialog({
               <Label htmlFor="memory-value" className="text-sm font-medium text-text-primary">
                 {localize('com_ui_value')}
               </Label>
-              <textarea
+              <Textarea
                 id="memory-value"
                 value={value}
                 onChange={(e) => hasUpdateAccess && setValue(e.target.value)}
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 3344ac46e1..dfdfa5eedb 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1464,6 +1464,7 @@
   "com_ui_new_project": "New project",
   "com_ui_next": "Next",
   "com_ui_next_result": "Next result",
+  "com_ui_next_sibling": "Next sibling message",
   "com_ui_no": "No",
   "com_ui_no_auth": "None (Auto-detect)",
   "com_ui_no_bookmarks": "it seems like you have no bookmarks yet. Click on a chat and add a new one",
@@ -1487,6 +1488,7 @@
   "com_ui_no_skills_found": "No skills found",
   "com_ui_no_terms_content": "No terms and conditions content to display",
   "com_ui_none": "None",
+  "com_ui_none_selected": "None selected",
   "com_ui_not_used": "Not Used",
   "com_ui_nothing_found": "Nothing found",
   "com_ui_oauth": "OAuth",
@@ -1541,6 +1543,7 @@
   "com_ui_preview_failed": "Preview unavailable",
   "com_ui_preview_preparing": "Preparing preview…",
   "com_ui_preview_unavailable": "Preview not available for this file type",
+  "com_ui_previous_sibling": "Previous sibling message",
   "com_ui_privacy_policy": "Privacy policy",
   "com_ui_privacy_policy_url": "Privacy Policy URL",
   "com_ui_pro": "Pro",
@@ -1686,6 +1689,8 @@
   "com_ui_saving": "Saving...",
   "com_ui_schema": "Schema",
   "com_ui_scope": "Scope",
+  "com_ui_scroll_left": "Scroll left",
+  "com_ui_scroll_right": "Scroll right",
   "com_ui_scroll_to_bottom": "Scroll to bottom",
   "com_ui_search": "Search",
   "com_ui_search_above_to_add": "Search above to add users or groups",
@@ -1717,6 +1722,7 @@
   "com_ui_select_search_model": "Search model by name",
   "com_ui_select_search_provider": "Search provider by name",
   "com_ui_select_search_region": "Search region by name",
+  "com_ui_select_var": "Select {{0}}",
   "com_ui_send_now": "Send now",
   "com_ui_set": "Set",
   "com_ui_settings_label_2fa": "Two-factor authentication",
@@ -1819,6 +1825,7 @@
   "com_ui_show_more": "Show more",
   "com_ui_show_n_files": "Show {{0}} files",
   "com_ui_show_qr": "Show QR Code",
+  "com_ui_sibling_navigation": "Sibling message navigation",
   "com_ui_sign_in_to_domain": "Sign-in to {{0}}",
   "com_ui_size": "Size",
   "com_ui_size_sort": "Sort by Size",