From 8cbb6ba1660c5a35593699e1a453c3f9209b5178 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 12 Aug 2024 15:06:23 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A7=20fix:=20@/+command=20timing=20for?=
 =?UTF-8?q?=20click=20selections=20-=20closes=20#3613=20(#3617)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Chat/Input/Mention.tsx  |  6 ++++--
 .../src/components/Chat/Input/MentionItem.tsx | 20 ++++++++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Chat/Input/Mention.tsx b/client/src/components/Chat/Input/Mention.tsx
index 516328af24c..65dd07c7925 100644
--- a/client/src/components/Chat/Input/Mention.tsx
+++ b/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);
                   }
diff --git a/client/src/components/Chat/Input/MentionItem.tsx b/client/src/components/Chat/Input/MentionItem.tsx
index c15a51472c2..7cdaa127c5d 100644
--- a/client/src/components/Chat/Input/MentionItem.tsx
+++ b/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',
-}: {
-  name: string;
-  onClick: () => void;
-  index: number;
-  type?: 'prompt' | 'mention' | 'add-convo';
-  icon?: React.ReactNode;
-  isActive?: boolean;
-  description?: string;
-}) {
+}: MentionItemProps) {
   return (
     <button tabIndex={index} onClick={onClick} id={`${type}-item-${index}`} className="w-full">
       <div