[WEB-2047] dev: pages side menu refactor (#5371)

* dev: pages ai menu

* chore: remove unused tasks

packages/editor/src/ce/extensions/ai-features/handle.ts

@@ -1,13 +0,0 @@
-// extensions
-import { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
-  const view = () => {};
-  const domEvents = {};
-
-  return {
-    view,
-    domEvents,
-  };
-};

packages/editor/src/ce/extensions/ai-features/index.ts

@@ -1 +0,0 @@
-export * from "./handle";

packages/editor/src/ce/extensions/index.ts

@@ -1,2 +1 @@
-export * from "./ai-features";
 export * from "./document-extensions";

packages/editor/src/core/components/editors/document/editor.tsx

@@ -14,12 +14,14 @@ import {
   EditorRefApi,
   IMentionHighlight,
   IMentionSuggestion,
+  TAIHandler,
   TDisplayConfig,
   TExtensions,
   TFileHandler,
 } from "@/types";
 
 interface IDocumentEditor {
+  aiHandler?: TAIHandler;
   containerClassName?: string;
   disabledExtensions?: TExtensions[];
   displayConfig?: TDisplayConfig;
@@ -41,6 +43,7 @@ interface IDocumentEditor {
 
 const DocumentEditor = (props: IDocumentEditor) => {
   const {
+    aiHandler,
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
@@ -84,6 +87,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
   return (
     <PageRenderer
       displayConfig={displayConfig}
+      aiHandler={aiHandler}
       editor={editor}
       editorContainerClassName={editorContainerClassNames}
       id={id}

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -15,11 +15,12 @@ import { Editor, ReactRenderer } from "@tiptap/react";
 // components
 import { EditorContainer, EditorContentWrapper } from "@/components/editors";
 import { LinkView, LinkViewProps } from "@/components/links";
-import { BlockMenu } from "@/components/menus";
+import { AIFeaturesMenu, BlockMenu } from "@/components/menus";
 // types
-import { TDisplayConfig } from "@/types";
+import { TAIHandler, TDisplayConfig } from "@/types";
 
 type IPageRenderer = {
+  aiHandler?: TAIHandler;
   displayConfig: TDisplayConfig;
   editor: Editor;
   editorContainerClassName: string;
@@ -28,7 +29,7 @@ type IPageRenderer = {
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
-  const { displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
+  const { aiHandler, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
   // states
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
@@ -138,7 +139,12 @@ export const PageRenderer = (props: IPageRenderer) => {
           id={id}
         >
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor.isEditable && <BlockMenu editor={editor} />}
+          {editor.isEditable && (
+            <>
+              <BlockMenu editor={editor} />
+              <AIFeaturesMenu menu={aiHandler?.menu} />
+            </>
+          )}
         </EditorContainer>
       </div>
       {isOpen && linkViewProps && coordinates && (

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

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import tippy, { Instance } from "tippy.js";
+// helpers
+import { cn } from "@/helpers/common";
+// types
+import { TAIHandler } from "@/types";
+
+type Props = {
+  menu: TAIHandler["menu"];
+};
+
+export const AIFeaturesMenu: React.FC<Props> = (props) => {
+  const { menu } = props;
+  // states
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+  // refs
+  const menuRef = useRef<HTMLDivElement>(null);
+  const popup = useRef<Instance | null>(null);
+
+  useEffect(() => {
+    if (!menuRef.current) return;
+
+    menuRef.current.remove();
+    menuRef.current.style.visibility = "visible";
+
+    // @ts-expect-error - tippy types are incorrect
+    popup.current = tippy(document.body, {
+      getReferenceClientRect: null,
+      content: menuRef.current,
+      appendTo: () => document.querySelector(".frame-renderer"),
+      trigger: "manual",
+      interactive: true,
+      arrow: false,
+      placement: "bottom-start",
+      animation: "shift-away",
+      hideOnClick: true,
+      onShown: () => menuRef.current?.focus(),
+    });
+
+    return () => {
+      popup.current?.destroy();
+      popup.current = null;
+    };
+  }, []);
+
+  const hidePopup = useCallback(() => {
+    popup.current?.hide();
+    setIsPopupVisible(false);
+  }, []);
+
+  useEffect(() => {
+    const handleClickAIHandle = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.matches("#ai-handle") || menuRef.current?.contains(e.target as Node)) {
+        e.preventDefault();
+
+        if (!isPopupVisible) {
+          popup.current?.setProps({
+            getReferenceClientRect: () => target.getBoundingClientRect(),
+          });
+          popup.current?.show();
+          setIsPopupVisible(true);
+        }
+        return;
+      }
+
+      hidePopup();
+      return;
+    };
+
+    document.addEventListener("click", handleClickAIHandle);
+    document.addEventListener("contextmenu", handleClickAIHandle);
+    document.addEventListener("keydown", hidePopup);
+
+    return () => {
+      document.removeEventListener("click", handleClickAIHandle);
+      document.removeEventListener("contextmenu", handleClickAIHandle);
+      document.removeEventListener("keydown", hidePopup);
+    };
+  }, [hidePopup, isPopupVisible]);
+
+  return (
+    <div
+      className={cn("opacity-0 pointer-events-none fixed inset-0 size-full z-10 transition-opacity", {
+        "opacity-100 pointer-events-auto": isPopupVisible,
+      })}
+    >
+      <div ref={menuRef} className="z-10">
+        {menu?.({
+          onClose: hidePopup,
+        })}
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -1,8 +1,8 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
-// plane editor extensions
-import { AIHandlePlugin } from "@/plane-editor/extensions";
+// plugins
+import { AIHandlePlugin } from "@/plugins/ai-handle";
 import { DragHandlePlugin } from "@/plugins/drag-handle";
 
 type Props = {
@@ -105,7 +105,7 @@ const SideMenu = (options: SideMenuPluginProps) => {
   const showSideMenu = () => editorSideMenu?.classList.remove("side-menu-hidden");
   // side menu elements
   const { view: dragHandleView, domEvents: dragHandleDOMEvents } = DragHandlePlugin(options);
-  const { view: aiHandleView } = AIHandlePlugin(options);
+  const { view: aiHandleView, domEvents: aiHandleDOMEvents } = AIHandlePlugin(options);
 
   return new Plugin({
     key: new PluginKey("sideMenu"),
@@ -113,12 +113,12 @@ const SideMenu = (options: SideMenuPluginProps) => {
       hideSideMenu();
       view?.dom.parentElement?.appendChild(editorSideMenu);
       // side menu elements' initialization
-      if (handlesConfig.dragDrop) {
-        dragHandleView(view, editorSideMenu);
-      }
       if (handlesConfig.ai) {
         aiHandleView(view, editorSideMenu);
       }
+      if (handlesConfig.dragDrop) {
+        dragHandleView(view, editorSideMenu);
+      }
 
       return {
         destroy: () => hideSideMenu(),
@@ -175,7 +175,12 @@ const SideMenu = (options: SideMenuPluginProps) => {
           editorSideMenu.style.left = `${rect.left - rect.width}px`;
           editorSideMenu.style.top = `${rect.top}px`;
           showSideMenu();
-          dragHandleDOMEvents?.mousemove();
+          if (handlesConfig.dragDrop) {
+            dragHandleDOMEvents?.mousemove();
+          }
+          if (handlesConfig.ai) {
+            aiHandleDOMEvents?.mousemove?.();
+          }
         },
         keydown: () => hideSideMenu(),
         mousewheel: () => hideSideMenu(),

packages/editor/src/core/hooks/use-editor.ts

@@ -1,4 +1,5 @@
 import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
+import { DOMSerializer } from "@tiptap/pm/model";
 import { Selection } from "@tiptap/pm/state";
 import { EditorProps } from "@tiptap/pm/view";
 import { useEditor as useTiptapEditor, Editor } from "@tiptap/react";
@@ -213,6 +214,41 @@ export const useEditor = (props: CustomEditorProps) => {
           console.error("An error occurred while setting focus at position:", error);
         }
       },
+      getSelectedText: () => {
+        if (!editorRef.current) return null;
+
+        const { state } = editorRef.current;
+        const { from, to, empty } = state.selection;
+
+        if (empty) return null;
+
+        const nodesArray: string[] = [];
+        state.doc.nodesBetween(from, to, (node, pos, parent) => {
+          if (parent === state.doc && editorRef.current) {
+            const serializer = DOMSerializer.fromSchema(editorRef.current?.schema);
+            const dom = serializer.serializeNode(node);
+            const tempDiv = document.createElement("div");
+            tempDiv.appendChild(dom);
+            nodesArray.push(tempDiv.innerHTML);
+          }
+        });
+        const selection = nodesArray.join("");
+        console.log(selection);
+        return selection;
+      },
+      insertText: (contentHTML, insertOnNextLine) => {
+        if (!editor) return;
+        // get selection
+        const { from, to, empty } = editor.state.selection;
+        if (empty) return;
+        if (insertOnNextLine) {
+          // move cursor to the end of the selection and insert a new line
+          editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
+        } else {
+          // replace selected text with the content provided
+          editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+        }
+      },
     }),
     [editorRef, savedSelection, fileHandler.upload]
   );

packages/editor/src/core/plugins/ai-handle.ts

@@ -0,0 +1,153 @@
+import { NodeSelection } from "@tiptap/pm/state";
+import { EditorView } from "@tiptap/pm/view";
+// extensions
+import { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
+
+const sparklesIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
+
+const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
+  const elements = document.elementsFromPoint(coords.x, coords.y);
+  const generalSelectors = [
+    "li",
+    "p:not(:first-child)",
+    ".code-block",
+    "blockquote",
+    "img",
+    "h1, h2, h3, h4, h5, h6",
+    "[data-type=horizontalRule]",
+    ".table-wrapper",
+    ".issue-embed",
+  ].join(", ");
+
+  for (const elem of elements) {
+    if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
+      return elem;
+    }
+
+    // if the element is a <p> tag that is the first child of a td or th
+    if (
+      (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
+      elem?.textContent?.trim() !== ""
+    ) {
+      return elem; // Return only if p tag is not empty in td or th
+    }
+
+    // apply general selector
+    if (elem.matches(generalSelectors)) {
+      return elem;
+    }
+  }
+  return null;
+};
+
+const nodePosAtDOM = (node: Element, view: EditorView, options: SideMenuPluginProps) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const nodePosAtDOMForBlockQuotes = (node: Element, view: EditorView) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 1,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const calcNodePos = (pos: number, view: EditorView, node: Element) => {
+  const maxPos = view.state.doc.content.size;
+  const safePos = Math.max(0, Math.min(pos, maxPos));
+  const $pos = view.state.doc.resolve(safePos);
+
+  if ($pos.depth > 1) {
+    if (node.matches("ul li, ol li")) {
+      // only for nested lists
+      const newPos = $pos.before($pos.depth);
+      return Math.max(0, Math.min(newPos, maxPos));
+    }
+  }
+
+  return safePos;
+};
+
+export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
+  let aiHandleElement: HTMLButtonElement | null = null;
+
+  const handleClick = (event: MouseEvent, view: EditorView) => {
+    view.focus();
+
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY,
+    });
+
+    if (!(node instanceof Element)) return;
+
+    if (node.matches("blockquote")) {
+      let nodePosForBlockQuotes = nodePosAtDOMForBlockQuotes(node, view);
+      if (nodePosForBlockQuotes === null || nodePosForBlockQuotes === undefined) return;
+
+      const docSize = view.state.doc.content.size;
+      nodePosForBlockQuotes = Math.max(0, Math.min(nodePosForBlockQuotes, docSize));
+
+      if (nodePosForBlockQuotes >= 0 && nodePosForBlockQuotes <= docSize) {
+        // TODO FIX ERROR
+        const nodeSelection = NodeSelection.create(view.state.doc, nodePosForBlockQuotes);
+        view.dispatch(view.state.tr.setSelection(nodeSelection));
+      }
+      return;
+    }
+
+    let nodePos = nodePosAtDOM(node, view, options);
+
+    if (nodePos === null || nodePos === undefined) return;
+
+    // Adjust the nodePos to point to the start of the node, ensuring NodeSelection can be applied
+    nodePos = calcNodePos(nodePos, view, node);
+
+    // TODO FIX ERROR
+    // Use NodeSelection to select the node at the calculated position
+    const nodeSelection = NodeSelection.create(view.state.doc, nodePos);
+
+    // Dispatch the transaction to update the selection
+    view.dispatch(view.state.tr.setSelection(nodeSelection));
+  };
+
+  const view = (view: EditorView, sideMenu: HTMLDivElement | null) => {
+    // create handle element
+    const className =
+      "grid place-items-center font-medium size-5 aspect-square text-xs text-custom-text-300 hover:bg-custom-background-80 rounded-sm opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
+    aiHandleElement = document.createElement("button");
+    aiHandleElement.type = "button";
+    aiHandleElement.id = "ai-handle";
+    aiHandleElement.classList.value = className;
+    const iconElement = document.createElement("span");
+    iconElement.classList.value = "pointer-events-none";
+    iconElement.innerHTML = sparklesIcon;
+    aiHandleElement.appendChild(iconElement);
+    // bind events
+    aiHandleElement.addEventListener("click", (e) => handleClick(e, view));
+
+    sideMenu?.appendChild(aiHandleElement);
+
+    return {
+      // destroy the handle element on un-initialize
+      destroy: () => {
+        aiHandleElement?.remove();
+        aiHandleElement = null;
+      },
+    };
+  };
+
+  const domEvents = {};
+
+  return {
+    view,
+    domEvents,
+  };
+};

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

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

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

@@ -20,6 +20,8 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
   isEditorReadyToDiscard: () => boolean;
   setSynced: () => void;
   hasUnsyncedChanges: () => boolean;
+  getSelectedText: () => string | null;
+  insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
 }
 
 export interface IEditorProps {

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

@@ -1,3 +1,4 @@
+export * from "./ai";
 export * from "./config";
 export * from "./editor";
 export * from "./embed";

packages/editor/src/styles/drag-drop.css

@@ -3,7 +3,7 @@
   position: fixed;
   display: flex;
   align-items: center;
-  opacity: 100;
+  opacity: 1;
   transition:
     opacity 0.2s ease 0.2s,
     top 0.2s ease,
@@ -19,7 +19,7 @@
 
 /* drag handle */
 #drag-handle {
-  opacity: 100;
+  opacity: 1;
 
   &.drag-handle-hidden {
     opacity: 0;
@@ -28,6 +28,17 @@
 }
 /* end drag handle */
 
+/* ai handle */
+#ai-handle {
+  opacity: 1;
+
+  &.handle-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end ai handle */
+
 .ProseMirror:not(.dragging) .ProseMirror-selectednode {
   position: relative;
   cursor: grab;

web/ce/components/pages/editor/ai/ask-pi-menu.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { CircleArrowUp, CornerDownRight, RefreshCcw, Sparkles } from "lucide-react";
+// ui
+import { Tooltip } from "@plane/ui";
+// components
+import { RichTextReadOnlyEditor } from "@/components/editor";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  handleInsertText: (insertOnNextLine: boolean) => void;
+  handleRegenerate: () => Promise<void>;
+  isRegenerating: boolean;
+  response: string | undefined;
+};
+
+export const AskPiMenu: React.FC<Props> = (props) => {
+  const { handleInsertText, handleRegenerate, isRegenerating, response } = props;
+  // states
+  const [query, setQuery] = useState("");
+
+  return (
+    <>
+      <div
+        className={cn("flex items-center gap-3 px-4 py-3.5", {
+          "items-start": response,
+        })}
+      >
+        <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+          <Sparkles className="size-3" />
+        </span>
+        {response ? (
+          <div>
+            <RichTextReadOnlyEditor
+              displayConfig={{
+                fontSize: "small-font",
+              }}
+              id="editor-ai-response"
+              initialValue={response}
+              containerClassName="!p-0 border-none"
+              editorClassName="!pl-0"
+            />
+            <div className="mt-3 flex items-center gap-4">
+              <button
+                type="button"
+                className="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
+                onClick={() => handleInsertText(false)}
+              >
+                Replace selection
+              </button>
+              <Tooltip tooltipContent="Add to next line">
+                <button
+                  type="button"
+                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                  onClick={() => handleInsertText(true)}
+                >
+                  <CornerDownRight className="text-custom-text-300 size-4" />
+                </button>
+              </Tooltip>
+              <Tooltip tooltipContent="Re-generate response">
+                <button
+                  type="button"
+                  className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRegenerate();
+                  }}
+                  disabled={isRegenerating}
+                >
+                  <RefreshCcw
+                    className={cn("text-custom-text-300 size-4", {
+                      "animate-spin": isRegenerating,
+                    })}
+                  />
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-custom-text-200">Pi is answering...</p>
+        )}
+      </div>
+      <div className="py-3 px-4">
+        <div className="flex items-center gap-2 border border-custom-border-200 rounded-md p-2">
+          <span className="flex-shrink-0 size-3 grid place-items-center">
+            <Sparkles className="size-3 text-custom-text-200" />
+          </span>
+          <input
+            type="text"
+            className="w-full bg-transparent border-none outline-none placeholder:text-custom-text-400 text-sm"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Tell Pi what to do..."
+          />
+          <span className="flex-shrink-0 size-4 grid place-items-center">
+            <CircleArrowUp className="size-4 text-custom-text-200" />
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};

web/ce/components/pages/editor/ai/index.ts

@@ -0,0 +1,2 @@
+export * from "./ask-pi-menu";
+export * from "./menu";

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

@@ -0,0 +1,290 @@
+"use client";
+
+import React, { RefObject, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane ui
+import { Tooltip } from "@plane/ui";
+// components
+import { RichTextReadOnlyEditor } from "@/components/editor";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// plane web constants
+import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@/plane-web/constants/ai";
+// plane web services
+import { AIService, TTaskPayload } from "@/services/ai.service";
+import { AskPiMenu } from "./ask-pi-menu";
+const aiService = new AIService();
+
+type Props = {
+  editorRef: RefObject<EditorRefApi>;
+  onClose: () => void;
+};
+
+const MENU_ITEMS: {
+  icon: LucideIcon;
+  key: AI_EDITOR_TASKS;
+  label: string;
+}[] = [
+  {
+    key: AI_EDITOR_TASKS.ASK_ANYTHING,
+    icon: Sparkles,
+    label: "Ask Pi",
+  },
+];
+
+const TONES_LIST = [
+  {
+    key: "default",
+    label: "Default",
+    casual_score: 5,
+    formal_score: 5,
+  },
+  {
+    key: "professional",
+    label: "💼 Professional",
+    casual_score: 0,
+    formal_score: 10,
+  },
+  {
+    key: "casual",
+    label: "😃 Casual",
+    casual_score: 10,
+    formal_score: 0,
+  },
+];
+
+export const EditorAIMenu: React.FC<Props> = (props) => {
+  const { editorRef, onClose } = props;
+  // states
+  const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
+  const [response, setResponse] = useState<string | undefined>(undefined);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  // refs
+  const responseContainerRef = useRef<HTMLDivElement>(null);
+  // params
+  const { workspaceSlug } = useParams();
+  const handleGenerateResponse = async (payload: TTaskPayload) => {
+    if (!workspaceSlug) return;
+    await aiService.performEditorTask(workspaceSlug.toString(), payload).then((res) => setResponse(res.response));
+  };
+  // handle task click
+  const handleClick = async (key: AI_EDITOR_TASKS) => {
+    const selection = editorRef.current?.getSelectedText();
+    if (!selection || activeTask === key) return;
+    setActiveTask(key);
+    if (key === AI_EDITOR_TASKS.ASK_ANYTHING) return;
+    setResponse(undefined);
+    setIsRegenerating(false);
+    await handleGenerateResponse({
+      task: key,
+      text_input: selection,
+    });
+  };
+  // handle re-generate response
+  const handleRegenerate = async () => {
+    const selection = editorRef.current?.getSelectedText();
+    if (!selection || !activeTask) return;
+    setIsRegenerating(true);
+    await handleGenerateResponse({
+      task: activeTask,
+      text_input: selection,
+    })
+      .then(() =>
+        responseContainerRef.current?.scrollTo({
+          top: 0,
+          behavior: "smooth",
+        })
+      )
+      .finally(() => setIsRegenerating(false));
+  };
+  // handle re-generate response
+  const handleToneChange = async (key: string) => {
+    const selectedTone = TONES_LIST.find((t) => t.key === key);
+    const selection = editorRef.current?.getSelectedText();
+    if (!selectedTone || !selection || !activeTask) return;
+    setResponse(undefined);
+    setIsRegenerating(false);
+    await handleGenerateResponse({
+      casual_score: selectedTone.casual_score,
+      formal_score: selectedTone.formal_score,
+      task: activeTask,
+      text_input: selection,
+    }).then(() =>
+      responseContainerRef.current?.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      })
+    );
+  };
+  // handle replace selected text with the response
+  const handleInsertText = (insertOnNextLine: boolean) => {
+    if (!response) return;
+    editorRef.current?.insertText(response, insertOnNextLine);
+    onClose();
+  };
+
+  return (
+    <div
+      className={cn(
+        "w-[210px] flex flex-col rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg transition-all",
+        {
+          "w-[700px]": activeTask,
+        }
+      )}
+    >
+      <div
+        className={cn("flex max-h-72 w-full", {
+          "divide-x divide-custom-border-200": activeTask,
+        })}
+      >
+        <div className="flex-shrink-0 w-[210px] overflow-y-auto px-2 py-2.5 transition-all">
+          {MENU_ITEMS.map((item) => {
+            const isActiveTask = activeTask === item.key;
+
+            return (
+              <button
+                key={item.key}
+                type="button"
+                className={cn(
+                  "w-full flex items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80 transition-colors",
+                  {
+                    "bg-custom-background-80": isActiveTask,
+                  }
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClick(item.key);
+                }}
+              >
+                <span className="flex-shrink-0 flex items-center gap-2 truncate">
+                  <item.icon className="flex-shrink-0 size-3" />
+                  {item.label}
+                </span>
+                <ChevronRight
+                  className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
+                    "opacity-100 pointer-events-auto": isActiveTask,
+                  })}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <div
+          ref={responseContainerRef}
+          className={cn("flex-shrink-0 w-0 overflow-hidden transition-all", {
+            "w-[490px] overflow-auto vertical-scrollbar scrollbar-sm": activeTask,
+          })}
+        >
+          {activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
+            <AskPiMenu
+              handleInsertText={handleInsertText}
+              handleRegenerate={handleRegenerate}
+              isRegenerating={isRegenerating}
+              response={response}
+            />
+          ) : (
+            <>
+              <div
+                className={cn("flex items-center gap-3 px-4 py-3.5", {
+                  "items-start": response,
+                })}
+              >
+                <span className="flex-shrink-0 size-7 grid place-items-center text-custom-text-200 rounded-full border border-custom-border-200">
+                  <Sparkles className="size-3" />
+                </span>
+                {response ? (
+                  <div>
+                    <RichTextReadOnlyEditor
+                      displayConfig={{
+                        fontSize: "small-font",
+                      }}
+                      id="editor-ai-response"
+                      initialValue={response}
+                      containerClassName="!p-0 border-none"
+                      editorClassName="!pl-0"
+                    />
+                    <div className="mt-3 flex items-center gap-4">
+                      <button
+                        type="button"
+                        className="p-1 text-custom-text-300 text-sm font-medium rounded hover:bg-custom-background-80 outline-none"
+                        onClick={() => handleInsertText(false)}
+                      >
+                        Replace selection
+                      </button>
+                      <Tooltip tooltipContent="Add to next line">
+                        <button
+                          type="button"
+                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                          onClick={() => handleInsertText(true)}
+                        >
+                          <CornerDownRight className="text-custom-text-300 size-4" />
+                        </button>
+                      </Tooltip>
+                      <Tooltip tooltipContent="Re-generate response">
+                        <button
+                          type="button"
+                          className="flex-shrink-0 size-6 grid place-items-center rounded hover:bg-custom-background-80 outline-none"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleRegenerate();
+                          }}
+                          disabled={isRegenerating}
+                        >
+                          <RefreshCcw
+                            className={cn("text-custom-text-300 size-4", {
+                              "animate-spin": isRegenerating,
+                            })}
+                          />
+                        </button>
+                      </Tooltip>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-sm text-custom-text-200">
+                    {activeTask ? LOADING_TEXTS[activeTask] : "Pi is writing"}...
+                  </p>
+                )}
+              </div>
+              <div className="sticky bottom-0 w-full bg-custom-background-100 pl-[54.8px] py-2 flex items-center gap-2">
+                {TONES_LIST.map((tone) => (
+                  <button
+                    key={tone.key}
+                    type="button"
+                    className={cn(
+                      "p-1 text-xs text-custom-text-200 font-medium bg-custom-background-80 rounded transition-colors outline-none",
+                      {
+                        "bg-custom-primary-100/20 text-custom-primary-100": tone.key === "default",
+                      }
+                    )}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleToneChange(tone.key);
+                    }}
+                  >
+                    {tone.label}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {activeTask && (
+        <div className="bg-custom-background-90 rounded-b-md py-2 px-4 text-custom-text-300 flex items-center gap-2 border-t border-custom-border-200">
+          <span className="flex-shrink-0 size-4 grid place-items-center">
+            <TriangleAlert className="size-3" />
+          </span>
+          <p className="flex-shrink-0 text-xs font-medium">
+            By using this feature, you consent to sharing the message with a 3rd party service.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

web/ce/components/pages/editor/index.ts

@@ -1 +1,2 @@
+export * from "./ai";
 export * from "./embed";

web/ce/constants/ai.ts

@@ -0,0 +1,9 @@
+export enum AI_EDITOR_TASKS {
+  ASK_ANYTHING = "ASK_ANYTHING",
+}
+
+export const LOADING_TEXTS: {
+  [key in AI_EDITOR_TASKS]: string;
+} = {
+  [AI_EDITOR_TASKS.ASK_ANYTHING]: "Pi is generating response",
+};

web/ce/hooks/use-editor-flagging.ts

@@ -3,18 +3,11 @@ import { TExtensions } from "@plane/editor";
 
 /**
  * @description extensions disabled in various editors
- * @returns
- * ```ts
- * {
- * documentEditor: TExtensions[]
- * richTextEditor: TExtensions[]
- * }
- * ```
  */
 export const useEditorFlagging = (): {
   documentEditor: TExtensions[];
   richTextEditor: TExtensions[];
 } => ({
-  documentEditor: [],
-  richTextEditor: [],
+  documentEditor: ["ai"],
+  richTextEditor: ["ai"],
 });

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

@@ -19,6 +19,8 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
 import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web components
+import { EditorAIMenu } from "@/plane-web/components/pages";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
@@ -155,6 +157,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 issue: issueEmbedProps,
               }}
               disabledExtensions={documentEditor}
+              aiHandler={{
+                menu: ({ onClose }) => <EditorAIMenu editorRef={editorRef} onClose={onClose} />,
+              }}
             />
           ) : (
             <DocumentReadOnlyEditorWithRef

web/core/services/ai.service.ts

@@ -1,10 +1,21 @@
+// helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
+// plane web constants
+import { AI_EDITOR_TASKS } from "@/plane-web/constants/ai";
+// services
 import { APIService } from "@/services/api.service";
 // types
 // FIXME:
 // import { IGptResponse } from "@plane/types";
 // helpers
 
+export type TTaskPayload = {
+  casual_score?: number;
+  formal_score?: number;
+  task: AI_EDITOR_TASKS;
+  text_input: string;
+};
+
 export class AIService extends APIService {
   constructor() {
     super(API_BASE_URL);
@@ -17,4 +28,17 @@ export class AIService extends APIService {
         throw error?.response;
       });
   }
+
+  async performEditorTask(
+    workspaceSlug: string,
+    data: TTaskPayload
+  ): Promise<{
+    response: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/rephrase-grammar/`, data)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }