Chat Auto-complete

Description

When viewers want to direct their chat messages at specific users they can use the “@username” tag in their chat messages. This change will add an auto-complete functionality to the chat field when viewers begin to type a partial username after the “@” symbol.

Features

  • Will suggest up to 5 usernames after viewers type at least 3 characters after the “@” symbol
  • Case-insensitive
  • Can handle multiple partial usernames in the same chat message
  • Can select suggestions with either the keyboard or mouse
  • Will only suggest usernames for chatters that have participated in chat within the last 2 hours (will not suggest lurkers).
  • Will attempt to sort suggestions based on the chatters with the most recent message.

Keyboard Support

When suggestions are visible, the up/down arrow keys can be used to navigate them and the enter key can be used to select the highlighted suggestion. When suggestions are not visible, the arrow keys will revert to recalling the previous message and the enter key will revert to submitting the message.

API Support

A new API query can be called to get autocomplete suggestions:

  query ChatAutocomplete($channelId: ID!, $partialUsernames: [String]!) {
    autocompleteRecentChatUsers(channelId: $channelId, partialUsernames: $partialUsernames)
  }

The endpoint will return a list of usernames (up to 5) that match the list of partial usernames passed in. Full usernames passed to the endpoint will be ignored and suggestions will be returned starting with the first partial username passed in the input list.

In Action

autocomplete-finished

I’ve opened this thread for feedback and more suggestions related to the auto-complete feature. Are there other enhancements you’d like to see with regards to this?

4 Likes

Handy feature although the sharp blue suggestion box is burning my retinas

1 Like

I agree with Banjax, I love the idea but the blue of the suggestion box is pretty sharp on the eyes. Overall though love love love this concept!

2 Likes

The selection box is actually black w/white text – the highlighted suggestion is blue. I can make that blue a little darker.

I’d say instead of black have it be like the same colour as the “Send a message” box while the highlight matches the darker colour of the chat bubbles. Should offer some better visual coherency

3 Likes

Love the concept, but agree with the others about colour change, but I feel its definitely one of the quality of life things we are missing at the moment.

1 Like

I’ve changed the autocomplete colors to match the input box background and the chat bubble background for the selected item let me know what you think:

image

3 Likes

That looks much better, much more in line with the rest of the stuff on Glimesh :smiley: my eyes thank you

1 Like