From fd4dbf7f78a2a94d09b4533d2f5a9a4fbbbbcbf1 Mon Sep 17 00:00:00 2001 From: Pavel Meyer Date: Tue, 1 Oct 2024 14:49:00 +0300 Subject: [PATCH] CW-mention-arrow-bug Added filtering for AI name --- src/shared/ui-kit/TextEditor/BaseTextEditor.tsx | 11 ++++++++++- .../components/MentionDropdown/MentionDropdown.tsx | 11 ++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx index 7400b1212..526f8faa3 100644 --- a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx +++ b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx @@ -45,6 +45,8 @@ import { checkIsEmptyCheckboxCreationText, } from "./utils"; import styles from "./BaseTextEditor.module.scss"; +import { useFeatureFlag } from "@/shared/hooks"; +import { AI_PRO_USER, AI_USER, FeatureFlags } from "@/shared/constants"; export interface BaseTextEditorHandles { focus: () => void; @@ -123,6 +125,13 @@ const BaseTextEditor = forwardRef((props ), [], ); + const featureFlags = useFeatureFlag(); + const isAiBotProEnabled = featureFlags?.get(FeatureFlags.AiBotPro); + + const usersWithAI = useMemo( + () => [isAiBotProEnabled ? AI_PRO_USER : AI_USER, ...(users ?? [])], + [users], + ); const [target, setTarget] = useState(); const [shouldFocusTarget, setShouldFocusTarget] = useState(false); @@ -227,7 +236,7 @@ const BaseTextEditor = forwardRef((props } }; - const chars = (users ?? []).filter((user) => { + const chars = (usersWithAI ?? []).filter((user) => { return getUserName(user) ?.toLowerCase() .startsWith(search.text.substring(1).toLowerCase()); diff --git a/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.tsx b/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.tsx index e4a2f3c24..583477cc1 100644 --- a/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.tsx +++ b/src/shared/ui-kit/TextEditor/components/MentionDropdown/MentionDropdown.tsx @@ -1,10 +1,8 @@ import React, { FC, useEffect, useMemo, useRef, useState } from "react"; import { uniq } from "lodash"; import { UserAvatar } from "@/shared/components"; -import { AI_PRO_USER, AI_USER, FeatureFlags } from "@/shared/constants"; import { KeyboardKeys } from "@/shared/constants/keyboardKeys"; import { useOutsideClick } from "@/shared/hooks"; -import { useFeatureFlag } from "@/shared/hooks/useFeatureFlag"; import { User } from "@/shared/models"; import { Loader } from "@/shared/ui-kit"; import { getUserName } from "@/shared/utils"; @@ -22,20 +20,15 @@ export interface MentionDropdownProps { const MentionDropdown: FC = (props) => { const { onClick, - users: initialUsers = [], + users = [], onClose, shouldFocusTarget, } = props; const mentionRef = useRef(null); const listRefs = useRef([]); - const featureFlags = useFeatureFlag(); - const isAiBotProEnabled = featureFlags?.get(FeatureFlags.AiBotPro); const { isOutside, setOutsideValue } = useOutsideClick(mentionRef); const [index, setIndex] = useState(0); - const users = useMemo( - () => [isAiBotProEnabled ? AI_PRO_USER : AI_USER, ...initialUsers], - [initialUsers, isAiBotProEnabled], - ); + const userIds = useMemo(() => users.map(({ uid }) => uid), [users]); useEffect(() => {