📱 fix: Mention Touch UX and MCP Tool UI Consistency (#11627)

* refactor: Reorganize imports in MCPTools component

- Updated import statements in MCPTools.tsx for improved clarity and maintainability.
- Moved `useAgentPanelContext` import above others and adjusted the order of `PermissionTypes` and `Permissions` imports to enhance readability.

* chore: imports

* refactor: Update MCPToolItem component props and styles

- Added new props: onToggleDefer, onToggleSelect, and onToggleProgrammatic for improved functionality.
- Adjusted class names for DropdownMenuLabel and text spans to enhance visual consistency and clarity.
- Increased width of DropdownMenuContent for better layout.

* refactor: Update DropdownMenu styles for improved visual consistency

- Changed background color of DropdownMenuContent and DropdownMenuSubContent from secondary to primary for better alignment with design standards.
- Updated text color to ensure readability against the new background, enhancing overall user experience.

* refactor: Update Mention component styles and interaction handling

- Increased ROW_HEIGHT in Mention and PromptsCommand components for improved layout consistency.
- Enhanced MentionItem component with touch event handling to improve mobile interaction experience.
- Updated button styles to ensure better visual alignment and responsiveness.

* refactor: Enhance MentionItem component event handling and button attributes

- Updated the onClick prop type in MentionItem to support both mouse and touch events, improving mobile interaction.
- Added a button type attribute for better accessibility and compliance with HTML standards.
- Refined event handling to ensure consistent behavior across different input methods.

* refactor: Add button type attribute to MentionItem for improved accessibility

- Added a type="button" attribute to the MentionItem component to enhance accessibility and compliance with HTML standards.
- This change ensures better interaction behavior across different input methods.

* refactor: Simplify MentionItem event handling for improved clarity

- Removed touch event handling from the MentionItem component, streamlining the onClick prop to only accept mouse events.
- This change simplifies the interaction logic, enhancing maintainability while retaining functionality for mouse interactions.

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

@@ -12,7 +12,7 @@ import useMentions from '~/hooks/Input/useMentions';
 import { removeCharIfLast } from '~/utils';
 import MentionItem from './MentionItem';
 
-const ROW_HEIGHT = 40;
+const ROW_HEIGHT = 44;
 
 export default function Mention({
   conversation,

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

@@ -25,15 +25,16 @@ export default function MentionItem({
 }: MentionItemProps) {
   return (
     <button
+      type="button"
+      style={style}
       tabIndex={index}
       onClick={onClick}
       id={`${type}-item-${index}`}
-      className="w-full"
-      style={style}
+      className="w-full touch-manipulation"
     >
       <div
         className={cn(
-          'text-token-text-primary bg-token-main-surface-secondary group flex h-10 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-surface-secondary',
+          'text-token-text-primary bg-token-main-surface-secondary group flex min-h-[44px] items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-surface-secondary active:bg-surface-active',
           isActive === true ? 'bg-surface-active' : 'bg-transparent',
         )}
       >

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

@@ -4,8 +4,8 @@ import { Spinner, useCombobox } from '@librechat/client';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 import type { TPromptGroup } from 'librechat-data-provider';
 import type { PromptOption } from '~/common';
-import { removeCharIfLast, detectVariables } from '~/utils';
 import VariableDialog from '~/components/Prompts/Groups/VariableDialog';
+import { removeCharIfLast, detectVariables } from '~/utils';
 import { usePromptGroupsContext } from '~/Providers';
 import MentionItem from './MentionItem';
 import { useLocalize } from '~/hooks';
@@ -48,7 +48,7 @@ const PopoverContainer = memo(
   },
 );
 
-const ROW_HEIGHT = 40;
+const ROW_HEIGHT = 44;
 
 function PromptsCommand({
   index,