feat(ee): AI menu (#1912)

* feat(ee): AI menu * - Add insert below and copy option * prebuild @editor-ext * sanitize output * clear existing output * switch to menu component * refactor directory * separator * refactor directory * support more languages * pass markdown to model * fix: close AI menu on page change * enhance text input and preview styling * fix: Use absolute positioning for the AI menu * make preview scrollable * activation controls * enhance bubble menu * sync * set width * fix line break * switch terminologies * cloud * buffer --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>
2026-05-15 13:14:11 +08:00 · 2026-02-15 05:58:08 +01:00
parent 41fa77b29d
commit b76f5adaad
25 changed files with 871 additions and 33 deletions
@@ -8,3 +8,5 @@ export const titleEditorAtom = atom<Editor | null>(null);
 export const readOnlyEditorAtom = atom<Editor | null>(null);

 export const yjsConnectionStatusAtom = atom<string>("");
+
+export const showAiMenuAtom = atom(false);
@@ -1,11 +1,38 @@
 .bubbleMenu {
  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  max-width: 100vw;
  width: fit-content;
-  border-radius: 2px;
+  box-shadow: 0 4px 12px light-dark(#cfcfcf, #0f0f0f);
+  border-radius: 6px;
  border: 1px solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));

+  > * {
+    flex-shrink: 0;
+  }
+
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
  .active {
    color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-gray-5));
  }
 }
+
+.buttonRoot {
+  height: 34px;
+  padding-left: rem(8);
+  padding-right: rem(4);
+  border: none;
+  border-radius: 6px;
+}
+
+.buttonSeparator {
+  border-right: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) !important;
+}
@@ -9,10 +9,11 @@ import {
  IconStrikethrough,
  IconUnderline,
  IconMessage,
+  IconSparkles,
 } from "@tabler/icons-react";
 import clsx from "clsx";
 import classes from "./bubble-menu.module.css";
-import { ActionIcon, rem, Tooltip } from "@mantine/core";
+import { ActionIcon, Button, rem, Tooltip } from "@mantine/core";
 import { ColorSelector } from "./color-selector";
 import { NodeSelector } from "./node-selector";
 import { TextAlignmentSelector } from "./text-alignment-selector";
@@ -20,11 +21,13 @@ import {
  draftCommentIdAtom,
  showCommentPopupAtom,
 } from "@/features/comment/atoms/comment-atom";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { v7 as uuid7 } from "uuid";
 import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
+import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";

 export interface BubbleMenuItem {
  name: string;
@@ -39,14 +42,22 @@ type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {

 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const { t } = useTranslation();
+  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
  const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const workspace = useAtomValue(workspaceAtom);
+  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
  const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
  const showCommentPopupRef = useRef(showCommentPopup);
+  const showAiMenuRef = useRef(showAiMenu);

  useEffect(() => {
    showCommentPopupRef.current = showCommentPopup;
  }, [showCommentPopup]);

+  useEffect(() => {
+    showAiMenuRef.current = showAiMenu;
+  }, [showAiMenu]);
+
  const editorState = useEditorState({
    editor: props.editor,
    selector: (ctx) => {
@@ -123,6 +134,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
        empty ||
        isNodeSelection(selection) ||
        isCellSelection(selection) ||
+        showAiMenuRef.current ||
        showCommentPopupRef?.current
      ) {
        return false;
@@ -146,9 +158,28 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);

+  // Hide the bubble menu immediately when AI menu is shown
+  if (showAiMenu) return;
+
  return (
-    <BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
+    <BubbleMenu
+      {...bubbleMenuProps}
+      style={{ zIndex: 200, position: "relative" }}
+    >
      <div className={classes.bubbleMenu}>
+        {isGenerativeAiEnabled && (
+          <Button
+            variant="default"
+            className={clsx(classes.buttonRoot)}
+            radius="0"
+            leftSection={<IconSparkles size={16} />}
+            onClick={() => {
+              setShowAiMenu(true);
+            }}
+          >
+            {t("Ask AI")}
+          </Button>
+        )}
        <NodeSelector
          editor={props.editor}
          isOpen={isNodeSelectorOpen}
@@ -215,7 +246,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
        <ActionIcon
          variant="default"
          size="lg"
-          radius="0"
+          radius="6px"
          aria-label={t(commentItem.name)}
          style={{ border: "none" }}
          onClick={commentItem.command}
@@ -1,7 +1,6 @@
 import React, { Dispatch, FC, SetStateAction } from "react";
-import { IconCheck, IconChevronDown, IconPalette } from "@tabler/icons-react";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
 import {
-  ActionIcon,
  Button,
  Popover,
  rem,
@@ -15,6 +14,8 @@ import {
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import classes from "./bubble-menu.module.css";

 export interface BubbleColorMenuItem {
  name: string;
@@ -166,14 +167,10 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
            onClick={() => setIsOpen(!isOpen)}
            data-text-color={activeColorItem?.color || ""}
            data-highlight-color={activeHighlightItem?.color || ""}
-            className="color-selector-trigger"
+            className={clsx(["color-selector-trigger", classes.buttonRoot])}
            style={{
-              height: "34px",
-              border: "none",
              fontWeight: 500,
              fontSize: rem(16),
-              paddingLeft: rem(8),
-              paddingRight: rem(4),
            }}
          >
            A
@@ -16,6 +16,7 @@ import { Popover, Button, ScrollArea } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import classes from "./bubble-menu.module.css";

 interface NodeSelectorProps {
  editor: Editor | null;
@@ -133,6 +134,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
    <Popover opened={isOpen} withArrow>
      <Popover.Target>
        <Button
+          className={classes.buttonRoot}
          variant="default"
          style={{ border: "none", height: "34px" }}
          radius="0"
@@ -66,6 +66,7 @@ import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
+import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";

 interface PageEditorProps {
  pageId: string;
@@ -405,6 +406,7 @@ export default function PageEditor({

        {editor && editorIsEditable && (
          <div>
+            <EditorAiMenu editor={editor} />
            <EditorBubbleMenu editor={editor} />
            <TableMenu editor={editor} />
            <TableCellMenu editor={editor} appendTo={menuContainerRef} />
@@ -140,7 +140,7 @@ export function SearchSpotlightFilters({
          <Switch
            checked={isAiMode}
            onChange={(event) => onAskClick()}
-            label={t("Ask AI")}
+            label={t("AI Answers")}
            size="sm"
            color="blue"
            labelPosition="left"
@@ -279,7 +279,7 @@ export function SearchSpotlightFilters({
                    isAiMode &&
                    option.value === "attachment" && (
                      <Text size="xs" mt={4}>
-                        {t("Ask AI not available for attachments")}
+                        {t("AI Answers not available for attachments")}
                      </Text>
                    )}
                </div>
@@ -23,6 +23,7 @@ export interface IWorkspace {
  hasLicenseKey?: boolean;
  enforceMfa?: boolean;
  aiSearch?: boolean;
+  generativeAi?: boolean;
  disablePublicSharing?: boolean;
 }

@@ -33,6 +34,7 @@ export interface IWorkspaceSettings {

 export interface IWorkspaceAiSettings {
  search?: boolean;
+  generative?: boolean;
 }

 export interface IWorkspaceSharingSettings {