feat: AI block UI

[matthewlipski]

This PR adds all the UX/UI for AI integration in BlockNote according to the Notion doc. The UI is not yet plugged into an API for querying AI models, so it uses a mock function which accepts a string prompt and returns a string AI response.

There are a few differences in the implementation vs the spec listed in the doc:

• The AI inline toolbar now instantly opens after selecting a prompt. This also means there are no AI related loaders outside of the AI inline toolbar. Currently the loader is just an Updating... string but can easily be changed.
• The "Accept", "Retry", and "Revert" buttons shown after an AI response is inserted are an entirely separate toolbar, instead of being part of the formatting toolbar.
  • Inserting content via the AI suggestion menu also shows this separate toolbar.

TODOs:

• AI Block update button text isn't being set to Updating... on click.
• Autofocus not working for prompt input in the AI button popover in the formatting toolbar.
• Error is thrown when calling mockAIReplaceSelection or mockAIInsertAfterSelection in AIInlineToolbar while React strict mode is enabled. Everything works fine for the user though.
• The AI suggestion menu items are currently derived from dictionary entries, which we probably want to change.
• AI menu close on escape.
• AI menu close on backspace.
• AI menu fade in.
• AI menu smaller height.
• AI menu plugin should pass previous block pos when current block is empty. Currently this position change is done in the controller via CSS.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	❌ Failed (Inspect)		Sep 30, 2024 1:02pm
blocknote-website	❌ Failed (Inspect)		Sep 30, 2024 1:02pm

[YousefED]

In general looks good, I only looked at the overall architecture for now (not line-by-line). So far I have a few main comments:

Extracting package
Just realizing this now, I think we should try to ship this as a separate package. Two reasons for this: (a) it's likely this may be licensed differently (i.e.: GPL / Pro only) and (b) it would be a good "proof of the pudding" to see whether we can externalize larger plugins / extensions in a way that still makes sense

Duplicated toolbar code?
I think we're starting to see a lot of similar code with the AI Toolbar and plugin that we already have for FilePanel and LinkToolbar, right? If so, it might be a sign that we need to generalize this code and reduce the duplicate code

AI specific

• We need a way to pass in the mockAIModelCall function
• The AI Model call might need access to the rest of the document / blocks above / below the block
• I think the current mockup is some good first steps but the Notion AI Block is definitely more polished. Specifically, I like their "Generated by AI x minutes ago" context and don't really like our "show prompt" button.

wdyt?