MM-56071: Thread presence indicator (#25694)

We also track the channelID of the thread opened.

Additionally on every connection create or re-connect
with an existing queue, we reset the active state to empty
to avoid any edge-cases.

https://mattermost.atlassian.net/browse/MM-56071

```release-note
NONE
```

webapp/channels/src/components/threading/thread_viewer/thread_viewer.tsx

@@ -15,6 +15,8 @@ import deferComponentRender from 'components/deferComponentRender';
 import FileUploadOverlay from 'components/file_upload_overlay';
 import LoadingScreen from 'components/loading_screen';
 
+import WebSocketClient from 'client/web_websocket_client';
+
 import type {FakePost} from 'types/store/rhs';
 
 import ThreadViewerVirtualized from '../virtualized_thread_viewer';
@@ -78,6 +80,10 @@ export default class ThreadViewer extends React.PureComponent<Props, State> {
         }
     }
 
+    public componentWillUnmount() {
+        WebSocketClient.updateActiveThread('');
+    }
+
     public componentDidUpdate(prevProps: Props) {
         const reconnected = this.props.socketConnectionStatus && !prevProps.socketConnectionStatus;
 
@@ -177,6 +183,9 @@ export default class ThreadViewer extends React.PureComponent<Props, State> {
             await this.fetchThread();
         }
 
+        if (this.props.channel) {
+            WebSocketClient.updateActiveThread(this.props.channel?.id);
+        }
         this.setState({isLoading: false});
     };
 

webapp/platform/client/src/websocket.ts

@@ -396,6 +396,13 @@ export default class WebSocketClient {
         this.sendMessage('presence', data, callback);
     }
 
+    updateActiveThread(channelId: string, callback?: (msg: any) => void) {
+        const data = {
+            thread_channel_id: channelId,
+        };
+        this.sendMessage('presence', data, callback);
+    }
+
     userUpdateActiveStatus(userIsActive: boolean, manual: boolean, callback?: () => void) {
         const data = {
             user_is_active: userIsActive,