feat: improve mention popover ui

QuivrHQ · Aug 21, 2023 · 3a60ff5 · 3a60ff5
1 parent b718be4
commit 3a60ff5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/...tionsBar/components/ChatInput/components/ChatBar/components/MentionInput/MentionInput.tsx b/...tionsBar/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/...nts/ChatInput/components/ChatBar/components/MentionInput/components/AddNewBrainButton.tsx b/...nts/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/...nents/ChatInput/components/ChatBar/components/MentionInput/components/BrainSuggestion.tsx b/...nents/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/...components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx b/...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);
   };