Merge pull request #2739 from daostack/CW-mention-arrow-bug

Two mention (@) bugs (ai + arrows)
daostack · Oct 8, 2024 · c48ade7 · c48ade7
2 parents d0483cf + 81087f6
commit c48ade7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -261,6 +261,7 @@ export default function ChatComponent({
   const [shouldReinitializeEditor, setShouldReinitializeEditor] =
     useState(false);
   const onClear = () => {
+    textInputRef?.current?.clear?.();
     setShouldReinitializeEditor(true);
     setMessage(parseStringToTextEditorValue());
   };

diff --git 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<BaseTextEditorHandles, TextEditorProps>((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<Range | null>();
   const [shouldFocusTarget, setShouldFocusTarget] = useState(false);
@@ -227,7 +236,7 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((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
@@ -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<MentionDropdownProps> = (props) => {
   const {
     onClick,
-    users: initialUsers = [],
+    users = [],
     onClose,
     shouldFocusTarget,
   } = props;
   const mentionRef = useRef(null);
   const listRefs = useRef<HTMLLIElement[]>([]);
-  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(() => {