From 5c947be455d1abca6570495db823a99d86f04999 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 23 Jun 2025 14:29:21 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20fix:=20Minor=20Menu=20Issues=20(#80?=
 =?UTF-8?q?26)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Enable portal support in ExportAndShareMenu component

* fix: MCPSubMenu with focus loop and improved button click handling

* chore: remove "tools" header in toolsdropdown
---
 client/src/components/Chat/ExportAndShareMenu.tsx  |  1 +
 client/src/components/Chat/Input/MCPSubMenu.tsx    | 13 +++++++++----
 client/src/components/Chat/Input/ToolsDropdown.tsx | 12 +-----------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx
index 0ac0144da3..aa9ee8be9b 100644
--- a/client/src/components/Chat/ExportAndShareMenu.tsx
+++ b/client/src/components/Chat/ExportAndShareMenu.tsx
@@ -68,6 +68,7 @@ export default function ExportAndShareMenu({
   return (
     <>
       <DropdownPopup
+        portal={true}
         menuId={menuId}
         focusLoop={true}
         unmountOnHide={true}
diff --git a/client/src/components/Chat/Input/MCPSubMenu.tsx b/client/src/components/Chat/Input/MCPSubMenu.tsx
index 16772acd02..fd6bd7ad4a 100644
--- a/client/src/components/Chat/Input/MCPSubMenu.tsx
+++ b/client/src/components/Chat/Input/MCPSubMenu.tsx
@@ -26,6 +26,7 @@ const MCPSubMenu = ({
   const localize = useLocalize();
 
   const menuStore = Ariakit.useMenuStore({
+    focusLoop: true,
     showTimeout: 100,
     placement: 'right',
   });
@@ -35,7 +36,13 @@ const MCPSubMenu = ({
       <Ariakit.MenuItem
         {...props}
         render={
-          <Ariakit.MenuButton className="flex w-full cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-surface-hover" />
+          <Ariakit.MenuButton
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              menuStore.toggle();
+            }}
+            className="flex w-full cursor-pointer items-center justify-between rounded-lg p-2 hover:bg-surface-hover"
+          />
         }
       >
         <div className="flex items-center gap-2">
@@ -62,10 +69,8 @@ const MCPSubMenu = ({
         </button>
       </Ariakit.MenuItem>
       <Ariakit.Menu
-        gutter={-4}
-        shift={-8}
-        unmountOnHide
         portal={true}
+        unmountOnHide={true}
         className={cn(
           'animate-popover-left z-50 ml-3 flex min-w-[200px] flex-col rounded-xl',
           'border border-border-light bg-surface-secondary p-1 shadow-lg',
diff --git a/client/src/components/Chat/Input/ToolsDropdown.tsx b/client/src/components/Chat/Input/ToolsDropdown.tsx
index bc5e510929..a6c4de4eba 100644
--- a/client/src/components/Chat/Input/ToolsDropdown.tsx
+++ b/client/src/components/Chat/Input/ToolsDropdown.tsx
@@ -99,17 +99,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
   const mcpPlaceholder = startupConfig?.interface?.mcpServers?.placeholder;
 
   const dropdownItems = useMemo(() => {
-    const items: MenuItemProps[] = [
-      {
-        render: () => (
-          <div className="px-3 py-2 text-xs font-semibold text-text-secondary">
-            {localize('com_ui_tools')}
-          </div>
-        ),
-        hideOnClick: false,
-      },
-    ];
-
+    const items: MenuItemProps[] = [];
     items.push({
       onClick: handleFileSearchToggle,
       hideOnClick: false,