- AI Menu input spans full block width

- AI Menu items look more similar to Notion
- `getDefaultAIMenuItems` uses same pattern as `getDefaultSlashMenuItems`
- AI Block actually sets the `timeGenerated` prop after generating a response
- AI Block only appears in the block type dropdown when the selection is in one
- AI button in Formatting Toolbar now opens the AI Menu normally instead of in a popover

Author: matthewlipski

packages/ai/src/core/blocks/AIBlockContent/AIBlockContent.ts

@@ -30,12 +30,17 @@ export const aiRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   if (!block.props.prompt) {
-    const replaceContent = () => {
+    const replaceContent = async () => {
       const prompt = span.innerText;
       // TODO: Updating text content in this way isn't working
       generateButton.textContent = "Generating...";
 
-      mockAIReplaceBlockContent(editor, prompt, block);
+      await mockAIReplaceBlockContent(editor, prompt, block);
+      editor.updateBlock(block, {
+        props: {
+          timeGenerated: Date.now(),
+        },
+      });
     };
 
     const promptBox = document.createElement("div");

packages/ai/src/react/components/AIMenu/AIMenuController.tsx

@@ -39,7 +39,10 @@ export const AIMenuController = (props: { aiMenu?: FC<AIMenuProps> }) => {
   const Component = props.aiMenu || AIMenu;
 
   return (
-    <div ref={ref} style={style} {...getFloatingProps()}>
+    <div
+      ref={ref}
+      style={{ ...style, width: state.referencePos.width }}
+      {...getFloatingProps()}>
       <Component />
     </div>
   );

packages/ai/src/react/components/AIMenu/getDefaultAIMenuItems.tsx

@@ -23,15 +23,18 @@ export function getDefaultAIMenuItems<
   editor: BlockNoteEditor<BSchema, I, S>,
   operation: "insertAfterSelection" | "replaceSelection"
 ): DefaultReactSuggestionItem[] {
-  return Object.values(getAIDictionary(editor).ai_menu).map((item) => ({
-    name: item.title as any,
-    ...item,
+  const items = ["make_longer", "make_shorter", "rewrite"] as const;
+
+  const dict = getAIDictionary(editor);
+
+  return items.map((item) => ({
+    name: item,
+    title: dict.ai_menu[item].title,
     onItemClick: async () => {
-      editor.formattingToolbar.closeMenu();
       (editor.extensions.aiMenu as AIMenuProsemirrorPlugin).close();
       (
         editor.extensions.aiInlineToolbar as AIInlineToolbarProsemirrorPlugin
-      ).open(item.title, operation);
+      ).open(dict.ai_menu[item].title, operation);
     },
   }));
 }

packages/ai/src/react/components/FormattingToolbar/DefaultButtons/AIButton.tsx

@@ -4,7 +4,7 @@ import { RiSparkling2Fill } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "@blocknote/react";
 import { useAIDictionary } from "../../../hooks/useAIDictionary";
-import { AIMenu } from "../../AIMenu/AIMenu";
+import { AIMenuProsemirrorPlugin } from "../../../../core";
 
 // TODO: name?
 export const AIButton = () => {
@@ -17,25 +17,22 @@ export const AIButton = () => {
     StyleSchema
   >();
 
+  const onClick = () => {
+    editor.formattingToolbar.closeMenu();
+    (editor.extensions.aiMenu as AIMenuProsemirrorPlugin).open();
+  };
+
   if (!editor.isEditable) {
     return null;
   }
 
   return (
-    <Components.Generic.Popover.Root>
-      <Components.Generic.Popover.Trigger>
-        <Components.Toolbar.Button
-          className={"bn-button"}
-          label={dict.formatting_toolbar.ai.tooltip}
-          mainTooltip={dict.formatting_toolbar.ai.tooltip}
-          icon={<RiSparkling2Fill />}
-        />
-      </Components.Generic.Popover.Trigger>
-      <Components.Generic.Popover.Content
-        variant="form-popover"
-        className={"bn-popover-content bn-form-popover"}>
-        <AIMenu />
-      </Components.Generic.Popover.Content>
-    </Components.Generic.Popover.Root>
+    <Components.Toolbar.Button
+      className={"bn-button"}
+      label={dict.formatting_toolbar.ai.tooltip}
+      mainTooltip={dict.formatting_toolbar.ai.tooltip}
+      icon={<RiSparkling2Fill />}
+      onClick={onClick}
+    />
   );
 };

packages/ai/src/react/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx

@@ -12,5 +12,7 @@ export const aiBlockTypeSelectItems = (
     type: "ai",
     icon: RiSparkling2Fill,
     isSelected: (block) => block.type === "ai",
+    showWhileSelected: true,
+    showWhileNotSelected: false,
   },
 ];

packages/ai/src/react/editor/style.css

@@ -2,7 +2,15 @@
     height: 58px;
 }
 
-div:not(.bn-popover-content) > .bn-ai-menu {
+.bn-ai-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+}
+
+div:not(.bn-popover-content) > .bn-ai-menu-input,
+div:not(.bn-popover-content) > .bn-ai-menu-items:not(:empty) {
     background-color: var(--bn-colors-menu-background);
     border: var(--bn-border);
     border-radius: var(--bn-border-radius-medium);
@@ -16,13 +24,18 @@ div:not(.bn-popover-content) > .bn-ai-menu {
 /* TODO: How to split UI libs CSS? */
 .bn-ai-menu-input .mantine-Input-input {
     border: none;
-    font-size: 12px;
+    font-size: 14px;
+    height: 52px;
+}
+
+.bn-ai-menu-items {
+    max-width: 50%;
 }
 
 .bn-ai-menu .bn-suggestion-menu-item {
     height: revert;
 }
 
 .bn-ai-menu .bn-mt-suggestion-menu-item-title {
-    font-size: 12px;
+    /*font-size: 12px;*/
 }

packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx

@@ -34,6 +34,8 @@ export type BlockTypeSelectItem = {
   isSelected: (
     block: Block<BlockSchema, InlineContentSchema, StyleSchema>
   ) => boolean;
+  showWhileSelected?: boolean;
+  showWhileNotSelected?: boolean;
 };
 
 export const blockTypeSelectItems = (
@@ -110,10 +112,21 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
   const [block, setBlock] = useState(editor.getTextCursorPosition().block);
 
   const filteredItems: BlockTypeSelectItem[] = useMemo(() => {
-    return (props.items || blockTypeSelectItems(dict)).filter(
-      (item) => item.type in editor.schema.blockSchema
-    );
-  }, [editor, dict, props.items]);
+    return (props.items || blockTypeSelectItems(dict)).filter((item) => {
+      const blockTypeInSchema = item.type in editor.schema.blockSchema;
+      const isSelected = item.isSelected(block);
+
+      const showWhileSelected =
+        item.showWhileSelected === undefined || item.showWhileSelected;
+      const showWhileNotSelected =
+        item.showWhileNotSelected === undefined || item.showWhileNotSelected;
+
+      return (
+        blockTypeInSchema &&
+        (isSelected ? showWhileSelected : showWhileNotSelected)
+      );
+    });
+  }, [props.items, dict, editor.schema.blockSchema, block]);
 
   const shouldShow: boolean = useMemo(
     () => filteredItems.find((item) => item.type === block.type) !== undefined,