Chat username autocomplete (Lurker Friendly)

[MemoryLeakDeath]

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

[MemoryLeakDeath]

I Want to do additional refactoring -- going to close this for the moment.