[NEW] Add activity indicators for Uploading and Recording using new API; Support thread context; Deprecate the old typing API

[sumukhah]

New statuses for user actions/events (Typing 2.0)

Rocket chat sponsored GSoC Project
Mentor: Rodrigo Nascimento
student: Sumukha Hegde

Primary tasks of this project:

• To implement Recording, and uploading activity indicators
• To implement thread statuses

Implementation of Recording and Uploading activity indicators

Showing activity indicators (such as typing, recording, uploading) improves overall user experience and offers a live chat experience to users who may expect quick response times. For this reason, many chat applications have used these activity indicators.
I have implemented recording and uploading indicators in mobile and in the web application(live chat remaining). We have used a separate activity type (named user-activity) that would handle all three activity indicators. We would pass the (typing, recording, uploading) action types as actionType parameter while calling the streamer to broadcast these user events.
But the new activity type (user-activity) supports only on the web and mobile platform and does not support live chat, bot, e.t.c,. The backend fires the new event when receives the old one and fires the old event when receives the new one, firing both events allows old clients to stay compatible until the next breaking change.

Implementation of thread statuses

In the previous app, Thread activities were not displaying on the thread but on the main channel. This issue is fixed in this Project, we used a parameter extra that would take thread id (tmid) as a value if the user is performing on a thread. Both the mobile and web applications can show these improvements.

Formats

Old events

// Sending event
{
  "msg": "method",
  "id": "1",
  "method": "stream-notify-room",
  "params": [
    "GENERAL/typing",
    "username",
    true, // true when typing, false when not typing
    {
      "token": "cu4B8Aab4ZbowqiwX" // When livechat
    }
  ]
}

// Receiving event
{
  "msg": "changed",
  "collection": "stream-notify-room",
  "id": "id",
  "fields": {
    "eventName": "GENERAL/typing",
    "args": [
      "username",
      true,
      {
        "token": "defaYPat68LevQpLm" // When livechat
      }
    ]
  }
}

New events

// Sendind event
{
  "msg": "method",
  "id": "1",
  "method": "stream-notify-room",
  "params": [
    "GENERAL/user-activity",
    "username",
    ["user-typing"], // Can be multiple events ["user-typing", "user-recording", "user-uploading"]. Remove the event to stop, pass empty array to stop all
    {
      "tmid": "cu4B8Aab4ZbowqiwX", // When thread
      "token": "defaYPat68LevQpLm" // When livechat
    }
  ]
}

// Receiving event
{
  "msg": "changed",
  "collection": "stream-notify-room",
  "id": "id",
  "fields": {
    "eventName": "GENERAL/user-activity",
    "args": [
      "username",
      ["user-typing"], // Can be single, multiple or empty
      {
        "tmid": "cu4B8Aab4ZbowqiwX", // When thread
        "token": "defaYPat68LevQpLm" // When livechat
      }
    ]
  }
}

References

#22392 web app PR
#3243 mobile PR
#139 SDK support for mobile

extras

https://user-images.githubusercontent.com/23723464/121769591-0a10eb00-cb82-11eb-96d8-241486dbccd4.mov
https://user-images.githubusercontent.com/23723464/122437728-9aeb2a80-cfb7-11eb-945a-dd9131f9df74.mov

[rodrigok]

Can you convert the new files to typescript?

[sumukhah]

I have converted the UserAction.js file to TS. Other than this I had also converted userActionIndicator to TS. But it was a helper method for the userActionIndicator template, and cannot be imported on another template file. So I did not include the file.