Chat text autocomplete (design only): needs design completion

[bradlegge]

Chat text autocomplete (design only): needs more design work as per comments and feedback

[ara4n]

Only the design is needed here - implementing this is on @aviraldg's radar (the implementation already exists; he'll just need to update the look & feel to match the final design).

Just to record yesterday's proposal, the idea is:

• Status bar is hidden by default. It appears only for:
  • Error messages (e.g. the "connectivity failure" warning)
  • "You have N unread messages" (when scrolled up the page)
  • "Matthew and 5 others are typing" (but only when scrolled up the page)
• Typing notifications are shown like the iMessage ellipsis chat bubble, as a phantom inline message in the timeline. To stop the timeline bouncing up and down as people start and stop typing, we debounce the timeline animation - after making room for the typing notification by scrolling up, the timeline waits N seconds (if at all?) to scroll back down again.

On autocomplete UI itself:

• Press tab to bring up the autocomplete UI at any point. It tries to autocomplete the thing you're typing (if any), if not gives a selection of all the terms you could autocomplete.
• Options are arranged into sections: slash-commands, emoji, room aliases, room IDs etc.
• User hits tab and shift-tab to cycle through the options (as a raster scan: left-to-right and then wrapping to the next row when hitting the end).
• User can hit up & down cursor keys to skip between the rows to navigate the 'grid'.
• User can also trigger the autocomplete UI by starting to type something known to trigger it - : for emoji, @ for username, # for room alias, / for command.

@aviraldg - i think this ^ is what we'd basically converged on already, and I assume that adjusting the current labs implementation to match is on your radar. The final design is in progress, but looks very similar indeed to what you've already built :)

[bradlegge]

Screen URL:

https://app.zeplin.io/project.html#pid=573bea252e3e73497df13165&sid=57838023cba01af440b28692

[ara4n]

See also #1153

[antikewl]

Aviral's current implentation, for reference:

[ara4n]

You can also get at this on vector.im/develop by flipping the 'Rich Text Editor' labs button in Settings. The UI/UX there is entirely placeholder, needless to say.

[antikewl]

Ben posted these to the vector design chat last week, but adding them here too for review.

http://zpl.io/1LOFp2
http://zpl.io/ZqX6TS

[jansol]

Some additions from my other issue about this:

• If the completion dialog appears automatically, it should not touch the input and not activate any completion list entry until the user presses tab or an arrow to navigate it. Selecting an entry should insert it immediately but keep the dialog open for cycling through completions.
• Pressing esc should revert the current completion to whatever the user actually has typed. If the user has typed something immediately after the completion, that completion should be considered actual user input.
• Continuing typing should append to a completion if one has been done.
• Many people expect enter to accept a completion. Maybe do that, insert a space and close the completion dialog in this case?

[ara4n]

Agreed with @jansol, with the following provisos:

• only tab should trigger shifting into autocompletion mode (i.e. actually using the autocomplete UI). Arrow keys are otherwise for navigating history, moving the or editing (in future).
• i'm not sure that enter/return is necessary to accept an autocompletion. The act of pressing tab/shift-tab/cursor-keys should (temporarily) replace the current contents in the MessageComposer, so you shouldn't need the additional keypress, which could be preserved for actually sending messages.

[aviraldg]

Tacking on what @ara4n said on #vector:matrix.org:

• The idea is that autocomplete popups can be entirely ignored by the user whilst typing unless they actually want to make use of them.
• The autocomplete grid UI appears after a delay if the user pauses mid-word, and there are possible autocompletion results for completing the current word.
  • This delay could be shorter if the last character typed is an autocomplete-trigger - one of :, @, #, /)
• The UI does nothing unless the user clicks on one of the proposals, or hits tab to enter autocompleting mode.
• In autocompleting mode:
  • pressing tab replaces the current partial word in the message composer with an autocompletion result (e.g. a user object, room object, emoji, /command).
  • pressing arrow keys navigates the options presented in the autocomplete grid UI. left and right arrows are equivalent to tab & shift-tab.
  • Hitting escape cancels autocomplete mode, returning the messagecomposer to the state before autocompletion mode was entered.
  • Hitting tab or shift-tab cycles forwards/backwards through the list of results (of all available types).
  • The available types vary based on the sigil of the term being completed:
    • If the completion term has no sigil, we should search users and then rooms.
    • If the completion term has a @ sigil, we should search only users (both by displayname and by user id)
    • If the completion term has a # sigil, we should search only rooms (both by room name and by room alias)
    • If the completion term has a / sigil, we should search only slash commands
    • If the completion term has a : sigil, we should search only emoji.
      • :) and :/ etc could be added as special case emoji shortcuts for :smiley_face: etc.
  • There is no need to ever hit 'return' or 'enter' to accept a result, given possible results are already provisionally accepted in the composer during navigation.

[wmwragg]

As it is now being implemented, I am assuming this design only ticket is complete

[ara4n]

reopening to turn this into an implementation ticket for @aviraldg

[ara4n]

I've split out the Status Bar bits of this into a new ticket (#1991)

[aviraldg]

@ara4n I'd say the design here has been sufficiently implemented with the remaining work mainly being bug fixing?

[ara4n]

Whilst the autocomplete stuff is merged, there is a bunch of polish & bugfixing required. As discussed on #riot-dev with @aviraldg : rather than, filing a million little tickets, going to track the remaining work needed before we merge here as tickyboxes.

...except these were duplicated into the PR checklist at matrix-org/matrix-react-sdk#518, so deleting them from here in favour of there.

And three nice-to-have:

• Still no :( :) style shortcuts for :smile: style emoji (but isn't a blocker)
• It'd be even nicer if common emoticons like ;) where recognised and prompted for conversion to emoji with an autocomplete that you could engage by hitting tab.
• Not having an emoji grid is an oversight (but isn't a blocker)

In general, it's feeling incredibly good though - so close...

[turt2live]

I'm not sure this is the right ticket, but to avoid opening another ticket, here we go.

There's a couple oddities in the current rendition of the composer. Not sure if they've been fixed in a PR somewhere (I don't have a nice way to test it), but for documentation's sake:

• Pasting multiline text between triple backticks causes the composer to not highlight correctly
  
  1. Type 3 backticks
  2. Paste multiple lines of text
  3. Close the backticks
  4. Note that the block doesn't format itself
     This is a non-issue when composing the multiple lines yourself (ie: 3 backticks, type, shift+enter, type, backticks). This is also a non-issue when the text you're pasting is 1 line (ie: no linefeed).
• Autocompleting /kick and /ban aren't friendly at all
  1. Start the autocomplete process, like so:
     
  2. Approve the suggestion
  3. Note that the inserted text won't help you kick/ban that user
     
• Underscores in code sections get italicized
  

[aviraldg]

@turt2live Couple of points:

1. I would actually prefer separate issues, since batching everything up makes slows down the rate at which features/fixes can be released.
2. Highlighting has been disabled on the upcoming RTE fixes PR, since it's based on a hacky regexp.
3. I would not create a separate issue for /kick / /ban completions as those should start working once we do user entities with embedded mxids (something I plan to work on as soon as rte-fixes is merged)
4. Like I said, the markdown highlighting feature has been disabled.

[turt2live]

@aviraldg Good to know, thanks! The composer is a great feature - hopefully it makes it in soon ;)

[grahamperrin]

Is a review of this issue timely? Just a thought.

[lukebarnard1]

I think the majority of things discussed in this issue are either covered in other issues or out of date, so I'm going to close this.