[Spike] Action Menu on text highlight

[Pashaminkovsky]

Motivation

We're looking to improve AI writing, translation, and summarization mods. The goal of this spike is to gauge the complexity of implementing an "Action Menu" similar to what Grammarly and moly.ai have implemented (see screenshot below).

The ideal flow would be:

1. User highlights text
2. Action Menu opens near text
3. User can choose an action, type a prompt, etc.
4. User is able to drag the Action Menu to relocate it.
5. Action Menu presents results to the user, who can can choose to insert text at cursor, or choose other actions.

Note: Compatability with Google Workspace is out of scope, the screenshot is meant to highlight the Action Menu.

The Action Menu would appear as an option in the "New Mod" selection in the Page Editor, and would be mutually exclusive with the Text Selection Menu (emojis that appear on highlight).

The exact naming of "Action Menu" is tbd -- we're open to suggestions.

Acceptance Criteria

• T shirt sizing on implementation, and high-level steps / constraints / unknowns are mapped out. The main pieces to size are:

1. Action Menu appears next to text when text is highlighted.
2. Selecting a mod from the Action Menu to trigger the mod (along w/ any input into the text box in the Action Menu)
3. Ability to drag the Action Menu to relocate it on the screen.
4. Ability to show Mod response in the Action Menu (e.g. user highlights text, clicks "improve to make more confident" in Action Menu, response from Write Assist mod populates in field in Action Menu for the user to preview).
5. Ability to insert the Mod response from Bump @fortawesome/free-brands-svg-icons from 5.14.0 to 5.15.0 #4 at the cursor with a button click.
6. Ability to automatically replace highlighted text with Mod response (e.g. user highlights text, clicks "translate to English", highlighted text is automatically replaced with Mod response).
7. Ability to close the Action Menu by clicking "x".

Timebox

8 hours

[twschiller]

The Action Menu would appear as an option in the "New Mod" selection in the page editor, and would be mutually exclusive with the Text Selection Menu (emojis that appear on highlight).

@Pashaminkovsky I recommend we put the UX considerations through a PRD. There's a lot to sort out with how this feature interacts with other features and how mods interact with each other.

Or are you just looking for engineering to determine the feasibility for adding a draggable floating panel to the page?

The kinds of things to sort out are:

• I'm assuming the panel container is fixed, but the content is configurable? E.g., using the Document Builder
• Or are you imagining the mod contributes actions to the action menu (like what we do for the Snippet Shortcut Menu, Quick Bar, etc.)

[grahamlangford]

Or are you just looking for engineering to determine the feasibility for adding a draggable floating panel to the page?

This was my understanding. Also, is "draggable" a requirement? That wasn't clear to me based on the description

[Pashaminkovsky]

Or are you just looking for engineering to determine the feasibility for adding a draggable floating panel to the page?

Correct this is a feasibility spike; we'll have the PRD once we sync w/ customer on their requirements.

Is "draggable" a requirement?

"Draggable" is in scope for this spike; I added it more explicitly to acceptance criteria of the spike. TBD whether it is actually a requirement for customer. cc @fungairino

I'm assuming the panel container is fixed, but the content is configurable? E.g., using the Document Builder

Correct, this was my assumption as well. Based on what we've heard so far about the customer reqs I think this suffices and would be simplest to maintain.

[grahamlangford]

1. Action Menu appears next to text when text is highlighted.

• ✅ Same logic as the Text Selection Menu

2. Selecting a mod from the Action Menu to trigger the mod (along w/ any input into the text box in the Action Menu)

• ✅ Again, same logic as the Text Selection Menu

3. Ability to drag the Action Menu to relocate it on the screen.

• ✅ Same logic as the Floating Action Button

4. Ability to show Mod response in the Action Menu (e.g. user highlights text, clicks "improve to make more confident" in Action Menu, response from Write Assist mod populates in field in Action Menu for the user to preview).

5. Ability to insert the Mod response from Bump @fortawesome/free-brands-svg-icons from 5.14.0 to 5.15.0 #4 at the cursor with a button click.

• ✅ Essentially the same logic as Insert at Cursor

6. Ability to automatically replace highlighted text with Mod response (e.g. user highlights text, clicks "translate to English", highlighted text is automatically replaced with Mod response).

7. Ability to close the Action Menu by clicking "x".

• ✅ Trivial