refactor: ai menu (#5400)

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -87,6 +87,7 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
     >
       <div ref={menuRef} className="z-10">
         {menu?.({
+          isOpen: isPopupVisible,
           onClose: hidePopup,
         })}
       </div>

packages/editor/src/core/components/menus/index.ts

@@ -1,4 +1,4 @@
-export * from "./bubble-menu";
 export * from "./ai-menu";
+export * from "./bubble-menu";
 export * from "./block-menu";
 export * from "./menu-items";

packages/editor/src/core/extensions/side-menu.tsx

@@ -182,7 +182,7 @@ const SideMenu = (options: SideMenuPluginProps) => {
             aiHandleDOMEvents?.mousemove?.();
           }
         },
-        keydown: () => hideSideMenu(),
+        // keydown: () => hideSideMenu(),
         mousewheel: () => hideSideMenu(),
         dragenter: (view) => {
           if (handlesConfig.dragDrop) {

packages/editor/src/core/types/ai.ts

@@ -1,7 +1,8 @@
-type TMenuProps = {
+export type TAIMenuProps = {
+  isOpen: boolean;
   onClose: () => void;
 };
 
 export type TAIHandler = {
-  menu?: (props: TMenuProps) => React.ReactNode;
+  menu?: (props: TAIMenuProps) => React.ReactNode;
 };

web/ce/components/pages/editor/ai/menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { RefObject, useRef, useState } from "react";
+import React, { RefObject, useEffect, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
 // plane editor
@@ -20,6 +20,7 @@ const aiService = new AIService();
 
 type Props = {
   editorRef: RefObject<EditorRefApi>;
+  isOpen: boolean;
   onClose: () => void;
 };
 
@@ -57,7 +58,7 @@ const TONES_LIST = [
 ];
 
 export const EditorAIMenu: React.FC<Props> = (props) => {
-  const { editorRef, onClose } = props;
+  const { editorRef, isOpen, onClose } = props;
   // states
   const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
   const [response, setResponse] = useState<string | undefined>(undefined);
@@ -126,6 +127,14 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
     onClose();
   };
 
+  // reset on close
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveTask(null);
+      setResponse(undefined);
+    }
+  }, [isOpen]);
+
   return (
     <div
       className={cn(

web/core/components/pages/editor/editor-body.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // document-editor
@@ -8,6 +8,7 @@ import {
   EditorReadOnlyRefApi,
   EditorRefApi,
   IMarking,
+  TAIMenuProps,
   TDisplayConfig,
 } from "@plane/editor";
 // types
@@ -95,6 +96,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     fontStyle,
   };
 
+  const getAIMenu = useCallback(
+    ({ isOpen, onClose }: TAIMenuProps) => <EditorAIMenu editorRef={editorRef} isOpen={isOpen} onClose={onClose} />,
+    [editorRef]
+  );
+
   useEffect(() => {
     updateMarkings(pageDescription ?? "<p></p>");
   }, [pageDescription, updateMarkings]);
@@ -158,7 +164,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               }}
               disabledExtensions={documentEditor}
               aiHandler={{
-                menu: ({ onClose }) => <EditorAIMenu editorRef={editorRef} onClose={onClose} />,
+                menu: getAIMenu,
               }}
             />
           ) : (