Adding a prototype for mentions #47
Conversation
The idea behihind this PR is to create a mentions input for prototyping in EH as well as the firefox fork. The firefox fork was able to impliment thier own place holder mentions with a 3rd party library. So this will continue to be a prototype for EH but I also intent to at least present this as an option to move into MC for our actual implimentation when the time comes. It has been created as a lit component with little deps and styling so that it can be moved into MC with little effort.
nickgrato
requested review from
Mardak and
Copilot
and removed request for
Mardak
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a prototype mentions input component for text-based interactions, allowing users to type @mentions for tabs and users. The component includes a contenteditable interface with keyboard navigation, mention filtering, and visual chip representation of selected mentions.
- Adds a new
MozMentionInputLit component with full keyboard navigation and mention selection functionality - Integrates the mentions component into the AI Mode page with sample mention options for tabs and users
- Registers the new component in the elements registry for use throughout the application
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/MozMentionInput.ts | New mentions input component with contenteditable functionality, keyboard navigation, and mention chip rendering |
| src/features/aimode/MozAIModePage.ts | Adds mention options data and integrates the mentions component into the AI mode interface |
| src/elements.ts | Registers the new MozMentionInput component with custom elements |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const emptyPattern = /^$/ | ||
| if (!textBeforeCaret?.match(emptyPattern)) { |
There was a problem hiding this comment.
[nitpick] The empty pattern check can be simplified to if (textBeforeCaret?.trim()) which is more readable and achieves the same result.
| const emptyPattern = /^$/ | |
| if (!textBeforeCaret?.match(emptyPattern)) { | |
| if (textBeforeCaret?.trim()) { |
src/components/MozMentionInput.ts
Outdated
| this._selectedIndex = -1 | ||
| } | ||
|
|
||
| private handleKeyDown = (event: KeyboardEvent) => { |
There was a problem hiding this comment.
[nitpick] This arrow function property conflicts with the method declaration pattern used elsewhere in the class. Consider using a consistent approach throughout the class.
| private handleKeyDown = (event: KeyboardEvent) => { | |
| private handleKeyDown(event: KeyboardEvent) { |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
src/features/aimode/MozAIModePage.ts:1
- Corrected spelling of 'filerting' to 'filtering'.
import { LitElement, PropertyValues, html } from 'lit'
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| <div class="mentions-bar"> | ||
| <p class="font-small"> | ||
| This is an example of updateing the options on the fly. We |
There was a problem hiding this comment.
Corrected spelling of 'updateing' to 'updating'.
| This is an example of updateing the options on the fly. We | |
| This is an example of updating the options on the fly. We |
Mardak
left a comment
Mardak
left a comment
There was a problem hiding this comment.
we can just wrap this up for now and leave it available from the ai mode page to test and reference
| // This is where you would handle the filter event and then we can update the options given to the | ||
| // mention input component and not have to worry about filerting in the component itself. | ||
| console.log('Received mention-input:filter event:', e.detail) |
There was a problem hiding this comment.
don't need to implement now but what's the expected way to filter? modify mockOptions?
There was a problem hiding this comment.
yes exactly - .mentionGroups=${this.mockOptions} since .mentionGroups is a reactive prop when that changes as you know that will live update the options. I think the mentions input should be agnostic to filtering and just receive options.
The idea behihind this PR is to create a mentions input for prototyping in EH as well as the firefox fork. The firefox fork was able to impliment thier own place holder mentions with a 3rd party library. So this will continue to be a prototype for EH but I also intent to at least present this as an option to move into MC for our actual implimentation when the time comes. It has been created as a lit component with little deps and styling so that it can be moved into MC with little effort.