Add AI Editing Features

[steven-tey]

This PR adds a "highlight + edit with AI" feature to Novel.

It's adds an "Ask AI" dropdown to the EditorBubbleMenu component and another custom bubblemenu component (AIBubbleMenu) to show the changes.

However, as you can see from the screenshot above, the AIBubbleMenu component can't expand to the full width of the editor for some reason :/

Would love some help with this!

cc: Tiptap wizard @sereneinserenade 🙏

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
novel	❌ Failed (Inspect)			Jun 26, 2023 1:53pm

[socket-security]

New and updated dependency changes detected. Learn more about Socket for GitHub ↗︎

Packages		Version	New capabilities	Transitives1	Size	Publisher
next	🆕	13.4.7-canary.1	eval, network, filesystem, shell, environment	+8	54.2 MB	vercel-release-bot
@floating-ui/react-dom	🆕	2.0.1	None	+2	368 kB	atomiks
clsx	🆕	1.2.1	None	+0	5.67 kB	lukeed
@tippyjs/react	🆕	4.2.6	environment	+0	263 kB	atomiks

Footnotes

1. https://docs.socket.dev ↩

[redac]

Hey @steven-tey !

Apparently, Tippy's maxWidth is set to 350px by default...

However, changing that option alone doesn't give it full width. I had to directly target the tippy-2 element to get this to work. (see #30)

Note: was looking at Notion's menu and i think that constraining the menu to be inside the text editor would be better. For reference:

[steven-tey]

@redac thanks for looking into this! I tried constraining menu directly in the editor but that came with another trade off - I couldn't make sure that the menu was directly below the currently selected mode 😅

Also, the current approach causes the menu to move along with the cursor, which is incorrect as well. Looks like your idea of positioning it directly in the editor might be better after all - we just need to figure out how to make sure it's aligned properly to the currently selected node.

[GraemeFulton]

Hey I gave it a go on this PR into this same branch: #32

https://www.loom.com/share/33babc8605da4f179894d3aa44c80e05?sid=6491ce36-aa1f-48d2-9948-5dae43c2130b

it's not quite right though! On this line: https:/GraemeFulton/novel/blob/490a8cbf008edb9322785566935b3b840fd99c60/ui/editor/components/bubble-menu/ai.tsx#L69, I minus 120 from the left offset, which made it go in the right place during testing with no suggestion:

but when there is a suggestion, it looks like that pulls it to the left too far:

It's a good starting point and show you how to modify the positioning though!

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Issue	Package	Version	Note	Source
Network access	next	13.4.7-canary.1	Module: tls Location: dist/compiled/http-proxy-agent/index.js	package.json, pnpm-lock.yaml
Telemetry	next	13.4.7-canary.1	Note: Can be disabled by setting the environment variable NEXT_TELEMETRY_DISABLED=1	package.json, pnpm-lock.yaml
Network access	styled-jsx	5.1.1	Module: globalThis["fetch"] Location: dist/babel/index.js	pnpm-lock.yaml via [email protected]

Next steps

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

What is telemetry?

This package contains telemetry which tracks you.

Most telemetry comes with settings to disable it. Consider disabling telemetry if you do not want to be tracked.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore [email protected]
• @SocketSecurity ignore [email protected]

[mathiasrscom]

I would really like this one to succeed. It would be a core feature of my app. How can I help contribute. What seems to be the issue which is preventing this to come out?

[andrewdoro]

I'll close this PR because I opened a new one here #297
It basically follows the Notion system but you can also add your custom prompt. This implementation should also with Markdown streaming. If you have any other ideas, just write them in the other PR.