From 3a60ff55d0ea5ff1802004ea8bae913c5c5bc665 Mon Sep 17 00:00:00 2001
From: mamadoudicko <mamadoudicko100@gmail.com>
Date: Mon, 21 Aug 2023 09:57:34 +0200
Subject: [PATCH] feat: improve mention popover ui

---
 .../components/MentionInput/MentionInput.tsx    | 17 +++++++++--------
 .../components/AddNewBrainButton.tsx            |  4 +++-
 .../MentionInput/components/BrainSuggestion.tsx |  2 +-
 .../MentionInput/hooks/useMentionInput.tsx      |  4 ++++
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx
index 404105d3a42a..c3f26f5188ac 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx
@@ -40,12 +40,7 @@ export const MentionInput = ({
   const { t } = useTranslation(["chat"]);
 
   return (
-    <div
-      className="w-full"
-      onClick={() => {
-        mentionInputRef.current?.focus();
-      }}
-    >
+    <div className="w-full">
       <Editor
         editorKey={"editor"}
         editorState={editorState}
@@ -54,6 +49,7 @@ export const MentionInput = ({
         ref={mentionInputRef}
         placeholder={t("actions_bar_placeholder")}
         keyBindingFn={keyBindingFn}
+        onBlur={() => mentionInputRef.current?.blur()}
       />
       <MentionSuggestions
         open={open}
@@ -62,14 +58,19 @@ export const MentionInput = ({
         onSearchChange={onSearchChange}
         popoverContainer={({ children }) => {
           return (
-            <div className="z-50 bg-white dark:bg-black border border-black/10 dark:border-white/25 rounded-md shadow-md overflow-y-auto min-w-32">
+            <div
+              style={{
+                maxWidth: "max-content",
+              }}
+              className="bg-white dark:bg-black border border-black/10 dark:border-white/25 rounded-md shadow-md overflow-y-auto"
+            >
               {children}
               <AddNewBrainButton />
             </div>
           );
         }}
         onAddMention={onAddMention}
-        entryComponent={({ mention, ...otherProps }) => (
+        entryComponent={({ mention, className, ...otherProps }) => (
           <div {...otherProps}>
             <BrainSuggestion id={mention.id as string} content={mention.name} />
           </div>
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx
index aafd042f4bc4..c06c142ea83d 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx
@@ -14,7 +14,9 @@ export const AddNewBrainButton = (): JSX.Element => {
         event.stopPropagation();
       }}
     >
-      <Button variant={"tertiary"}>{t("new_brain")}</Button>
+      <Button className="px-5 py-2 text-sm" variant={"tertiary"}>
+        {t("new_brain")}
+      </Button>
     </Link>
   );
 };
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx
index 3a905fd6018b..d622289907a3 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx
@@ -14,7 +14,7 @@ export const BrainSuggestion = ({
     <div className="relative flex group items-center">
       <div
         className={
-          "flex flex-1 items-center gap-2 w-full text-left px-5 py-3 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors"
+          "flex flex-1 items-center gap-2 w-full text-left px-5 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors"
         }
       >
         <span className="flex-1">{content}</span>
diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx
index 2e8fe544f8b9..d09a85d5bd6b 100644
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx
@@ -126,6 +126,10 @@ export const useMentionInput = ({
       return "submit";
     }
 
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      return undefined;
+    }
+
     return getDefaultKeyBinding(e);
   };