Typing indicators in chat [web client]

[Antreesy]

☑️ Resolves

• Overview at ✍️ Typing indicators #9248
• Close Frontend "Typing indicators" #9271
• Requires Add signaling messages for typing indicators #9431

🖼️ Screenshots

For users, depending in how many actors are typing
For guests (they don't have access to participants information, so it's impossible to show typing actor)
Settings

🚧 Tasks

API part

• When the chat input is non empty a signaling message is sent in periodical interval
• When the signaling messages is received a small max contrast line is shown above the chat input
• Ability to disable sending / receiving of signals (like reading status)

Visual part

• The line is shown inbetween the last message and the input field, not shifting any messages above (in case people stop typing)
• It includes avatar(s) and a text in --color-text-maxcontrast, with the name in bold
• Single person indicator centers the small avatar horizontally with the bigger avatars in the chat. Text is "Name is typing"
• Multiple people are simply shown comma-separated and with the overlapped avatars, up until 3 people like: "Marco and Nimisha are typing"
• For more than 3 people, only 3 keep showing as avatars and full name (could be either the ones who have most recently typed or have started typing first, whatever is more performant), and ends with "and X others are typing" like "Nimisha, Marco, Joas and 3 others are typing"

Overall

• Visual check
• Code review
• Test coverage

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not required
• 📘 API documentation in docs/ has been updated or is not required
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required
• 🔖 Capability is added or not needed

[Antreesy]

• Rebased onto master, connected to capabilities from Add user setting for toggle typing privacy #9455
• Commits from API Add signaling messages for typing indicators #9431 are here to not break additional code
• Component was renamed for easier integration with Refactor NewMessageForm component #9430

[nickvergessen]

Is this an effective change? What is the difference and is it needed to do this on stable26 and others?

[Antreesy]

this.name?trim() && check that name is non-empty, like "" or " "
Without fix it breaks avatars for recepients, if, for example, guest will set a name like this

[nickvergessen]

ah, then I guess it should be backported

[Antreesy]

Rebased on top of signaling API, fix capabilities check visibility (in fixup commit)

[nickvergessen]

Seems to work fine