📧 fix: @/+command timing for click selections - closes #3613 (#3617)

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

@@ -27,7 +27,7 @@ export default function Mention({
   const localize = useLocalize();
   const assistantMap = useAssistantsMapContext();
   const { options, presets, modelSpecs, modelsConfig, endpointsConfig, assistantListMap } =
-    useMentions({ assistantMap, includeAssistants });
+    useMentions({ assistantMap: assistantMap || {}, includeAssistants });
   const { onSelectMention } = useSelectMention({
     presets,
     modelSpecs,
@@ -161,7 +161,9 @@ export default function Mention({
                 type={type}
                 index={index}
                 key={`${mention.value}-${index}`}
-                onClick={() => {
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
                   if (timeoutRef.current) {
                     clearTimeout(timeoutRef.current);
                   }

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

@@ -2,6 +2,16 @@ import React from 'react';
 import { Clock4 } from 'lucide-react';
 import { cn } from '~/utils';
 
+export interface MentionItemProps {
+  name: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  index: number;
+  type?: 'prompt' | 'mention' | 'add-convo';
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  description?: string;
+}
+
 export default function MentionItem({
   name,
   onClick,
@@ -10,15 +20,7 @@ export default function MentionItem({
   isActive,
   description,
   type = 'mention',
-}: {
+}: MentionItemProps) {
-  name: string;
-  onClick: () => void;
-  index: number;
-  type?: 'prompt' | 'mention' | 'add-convo';
-  icon?: React.ReactNode;
-  isActive?: boolean;
-  description?: string;
-}) {
   return (
     <button tabIndex={index} onClick={onClick} id={`${type}-item-${index}`} className="w-full">
       <div