From 95b46ca66ed1580f4edd05f68717c3b5d8cd5a3a Mon Sep 17 00:00:00 2001 From: mamadoudicko 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 ( -
{ - mentionInputRef.current?.focus(); - }} - > +
mentionInputRef.current?.blur()} /> { return ( -
+
{children}
); }} onAddMention={onAddMention} - entryComponent={({ mention, ...otherProps }) => ( + entryComponent={({ mention, className, ...otherProps }) => (
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(); }} > - + ); }; 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 = ({
{content} 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); };