Fix @ mention name selection

[cpolitano]

@ mentions on Hylo web are not really working. Putting a space in someone's name to search last name in addition to first, the person selector popup disappears. You also can't scroll the person selector. so if the person isn't one of the top 7 who show up in the selector, you can't mention them!

At a minimum, it would be great to be able to scroll the name selector.

This is a web issue...not sure how things are on mobile

[lorenjohnson]

It would be good to have a basic analysis of what other sites that do this in a way that is preferred. Examples will help. Try and break down into specifics the behaviors we want. Behavioral design is tricky, and can be a lot of back and forth if we don’t nail down a bit what we’re expecting in specifics.

Making the suggestion box scrollable and returning more/all results should be easily done.

If we want a better search algorithm for matching people we should look to where else we're also matching for people results (i.e. Message participants, Search, Add Moderator, etc) and decide if we want the same updated algorithm there also, or if they are doing something different which we like, inherit that here.

[lorenjohnson]

As per conversations on Slack (https://terrans.slack.com/archives/C01C9047TTR/p1669138524095689), here is my roll-up:

It turns-out that making the mention and topic suggestions have a limited height with scroll bars is problematic due to limitations of the underlying "tippy" library. There are solutions, but all of them are compromises and will be problematic for how it’s embedded in the TipTap plugin. (https://kabbouchi.github.io/tippyjs-v4-docs/misc/#scrollable-containers).

I’m not yet sure if making the suggestions box “scrollable” was what we were talking about. Something feels lost in translation. But it is true that we also can’t “just return all results” without something with scroll bars for when that list is really long. In my testing Facebook returns a maximum of 5 curated results, and never “all the results”. I prefer that interaction to the shotgun approach, though I’d certainly just do that if it had proven to be simple.

So from what I've gathered from the conversations. and the above information, are the following actions:

• Scope mention results by selected groups, as per https://github.com/Hylozoic/hylo-evo/issues/1318

• [ ] Test with allowSpaces on such that "@Loren Jo" remains in mention selection mode until either Escape is pressed or the mention text through the "@" is deleted. Currently the plugin we use is implemented such that multiple spaces will still leave you in mention selection when allowSpaces is on, which could be a bit confusing. So, I recommend we turn it on and test it and discuss and/or get feedback as to whether it's a problem or not. I think the ideal behavior would be that a double space exits out of mention mode and just leaves the @ text as plain text. To have that right now it requires customizing the plugin and then is something we need to maintain. Meanwhile, this is already a planned "high-priority" enhancement for the TipTap Suggestions plugin which is actively under development, so if we wait it out, we'll likely be able to get what we want without the custom extension in coming months. So unless in testing we find we're good with multiple spaces keeping us in suggestions mode, then I think we should just wait to introduce the space as part of the search.

• [ ] Gather solutions for further refining our search results for names to be most useful. Right now I have as reference points the Add Participant list in Messages which does mostly the same thing we’re currently doing here, but also has a Recent Contacts default list. We could do the same here. The task here is to come-up with our ideal algorithm and then figure-out what is most achievable given what we have to work with in our data, and then create a ticket/s related to that work.

[KevinTriplett]

FYI, Mighty Networks displays up to ten top suggestions, ordered by member id, but does allow spaces until the text being entered doesn't match anything at which point the list disappears. But when backspacing, as soon as the entry after the "@" matches something, the list reappears. The list does scroll.

[cpolitano]

I would be super happy to test out allowSpaces, I think that would solve the issue. Better search algo could also help, but that's a "nice to have". Thanks Kevin for looking at what MN does!

[KevinTriplett]

@tibetsprague @thomasgwatson I would be happy to study the allowSpaces implementation if you want to assign the issue to me. The search algo sounds complex due to the search space (since it sounds context-based)

[thomasgwatson]

From following Loren's comments, it looks TipTap has updated to help with this issue: https://github.com/ni/nimble/pull/1694

@KevinTriplett I would say go for it. I'm hoping that tiptap now handles this use-case more elegantly and that you don't have to futz around with anything too custom.