feat: AI menu UX

[matthewlipski]

This PR adds a proper stop button to the AI menu and also updates the UX.

I ended up having to refactor the PromptSuggestionMenu component quite a bit, since I wasn't able to copy how Notion displays the loading indicator right after the "Thinking" text due to an annoying quirk of text inputs (see comment in PromptSuggestionMenu.tsx for more info).

To get around this, I made it so the PromptSuggestionMenu now has its own leftSection and rightSection which are used for the AI icon on the left and pause button/error icon on the right. These have been moved out of the text input, as we now render a loader element instead while the isLoading prop is true.

For the AI menu, the loader element consists of the same placeholder text and loading indicator that was previously in the text input. However, since the placeholder text is now in a regular div, we can place the indicator right after it.

This is quite a big workaround for the fact that text input width can't scale to the length of their content/placeholder, but unfortunately the CSS/JS workarounds I've found are all super hacky, whereas this refactor is imo at least somewhat sensible.

TODO:

• Fix styling for Ariakit
• Fix styling for ShadCN
• Update e2e snapshots?

[vercel]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jul 17, 2025 2:43am
blocknote-website	❌ Failed (Inspect)		Jul 17, 2025 2:43am

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1853

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1853

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1853

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1853

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1853

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1853

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1853

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1853

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1853

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1853

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1853

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1853

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1853

commit: 2ab0b32