Show in live who is writing

assets/js/components/conversations/writingNotifier.js

@@ -13,7 +13,66 @@ class ConversationWritingNotifier {
             class: "user-writing-message"
         })
 
-        this.setText("hello world for conv " + convID)
+        this.setText("")
+
+        this.usersFifo = []
+
+        // Listen to events
+        this.listener = (e) => {
+            if(!this.messageArea.isConnected) {
+                document.removeEventListener("WritingMessageInConv", this.listener)
+                return;
+            }
+            
+            if (e.detail.conv_id == convID)
+                this.newWritingEvent(e.detail.user_id)
+        }
+        document.addEventListener("WritingMessageInConv", e => this.listener(e))
+    }
+
+    /**
+     * Handle new writing event
+     * 
+     * @param {number} user_id Target user ID
+     */
+    async newWritingEvent(user_id) {
+        this.usersFifo.push(user_id)
+        await this.refreshText()
+
+        setTimeout(() => {
+            this.usersFifo.shift();
+            this.refreshText()
+        }, ServerConfig.conf.conversation_writing_event_lifetime * 1000)
+    }
+
+    /**
+     * Apply new text
+     */
+    async refreshText() {
+        try {
+            if (this.usersFifo.length == 0)
+                return this.setText("");
+            
+            const users = [...new Set([...this.usersFifo])];
+            const info = await getUsers(users);
+
+            if (users.length == 1)
+                this.setText(tr("%1% is writing...", {"1": info.get(users[0]).fullName}))
+            
+            else
+            {
+                let last = users.pop();
+                this.setText(tr("%1% and %2% are writing...", {
+                    "1": users.map(id => info.get(id).fullName).join(", "),
+                    "2": info.get(last).fullName
+                }));
+            }
+        
+        
+        } catch(e) {
+            console.error(e);
+            this.setText("")
+        }
     }
 
     /**