dcalvo / dcalvo/mindrian

[Feature] Add AI Slash Menu Option and Agent Mentions

Open
#6 0 comments 0 reactions 2 assignees Claimed by @amintze2 View on GitHub
Dominant language
Elixir
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

# [Feature] Add AI Slash Menu Option and Agent Mentions (`@`)

## Description

We are looking to enhance our `CollaborativeEditor` by adding two new suggestion menus.

We need two interactions:

1. **AI Slash Menu Item**: Integrate an "Agent" option into the existing slash menu.
2. **Agent Mentions**: Implement a new suggestion menu triggered by the `@` symbol for agent selection.

**Note**: For this issue, focus solely on the UI and event handling. Backend integration will be a separate task.

## Tasks

- [x] **1. Extend the Slash Menu (/)**

- Add a new item named **"Agent"** to the slash menu.
- **Action**: When selected, it should trigger a `console.log("AI Slash Menu Option Clicked")`.
- **Requirement**: Ensure the default BlockNote items (headings, lists, etc.) are still preserved and available in the menu.

- [x] **2. Create an Agent Mention Menu (@)**
- Implement a custom suggestion menu that opens when a user types the `@` character.
- **Data**: Use a hardcoded array of strings for now: `["Research Agent", "Coding Assistant", "Lawrence AI"]`.
- **Filtering**: The menu should filter the list as the user types (e.g., typing `@Res` should show "Research Agent").
- **Action**: When an agent is selected, it should trigger a `console.log("Mentioned Agent: [Name]")`.

## Technical Reference & Documentation

Take a look at the following documentation in BlockNote:

- **Primary Resource**: [BlockNote Documentation - Suggestion Menus](https://www.blocknotejs.org/docs/react/components/suggestion-menus#creating-additional-suggestion-menus)
- **Key Components to Research**:
- `SuggestionMenuController`: How to register new triggers.
- `getDefaultReactSlashMenuItems`: How to retrieve and extend default slash items.
- `BlockNoteView` children: How to pass controllers into the view.

## Acceptance Criteria

- Typing `/` shows the standard menu + the new "Custom AI" option.
- Typing `@` correctly opens the Agent selection menu.
- Clicking items in either menu results in the correct console output.
- Implementation should be clean and not break existing collaborative sync functionality in `CollaborativeEditor.tsx`.
- **You don't need to create a new component but should add the functions that can be passed as props into the editor (refer to the [BlockNote Documentation - Suggestion Menus](https://www.blocknotejs.org/docs/react/components/suggestion-menus#creating-additional-suggestion-menus) for an example)**

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.