detect typing

src/index.js

@@ -8,6 +8,8 @@ var ui = new UI();
 
 var channels = new ChannelManager();
 
+let usersTyping = {};
+
 channels.events.on('update', () => {
   ui.availableChannels(channels.getChannelList());
 });
@@ -45,11 +47,41 @@ var handleProtocolMessages = function(channelName, data) {
     channel.users.addUserOrUpdate(user);
     channels.events.emit("update");
  }
+
+  if (msg.type === 'typing') {
+    usersTyping[fromUser] = (new Date().getTime());
+  }
 }
 
 channels.events.on('update', updateUsers);
 channels.events.on('channelSwitch', updateUsers);
 
+setInterval(function() {
+  let typingUsers = [];
+  let currentTime = (new Date().getTime());
+  for (let pubkey in usersTyping) {
+    let lastTyped = usersTyping[pubkey];
+  if (currentTime - lastTyped > 5*1000 || currentTime < lastTyped) {
+      delete usersTyping[pubkey];
+  } else {
+   if (channels.allUsers.users[pubkey]) {
+     typingUsers.push(channels.allUsers.users[pubkey].username);
+      }
+  }
+  }
+
+ if (typingUsers.length === 0) {
+   ui.consoleState.setContent("");
+  return;
+ }
+  if (typingUsers.length === 1) {
+   ui.consoleState.setContent(typingUsers[0] + " is typing");
+    return;
+  }
+
+ ui.consoleState.setContent(typingUsers.join(', ') + " are typing");
+}, 3*1000);
+
 ui.logEntry(`
   Welcome to
     _________ __          __               ____  ___
@@ -119,5 +151,10 @@ ui.events.on('cmd', (cmd) => {
   }
 
   status.sendMessage(channels.getCurrentChannel().name, cmd);
-})
+});
+
+ui.events.on('typing', () => {
+  // TODO: use async.cargo instead and/or a to avoid unnecessary requests
+ status.sendJsonMessage(channels.getCurrentChannel().name, {type: "typing"});
+});
 

src/ui.js

@@ -242,32 +242,46 @@ class UI {
       self.input.focus();
     });
 
+    this.input.key('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), function () {
+      self.events.emit("typing");
+    });
+
     this.input.on('submit', this.submitCmd.bind(this));
 
     this.screen.append(this.consoleBox);
   }
 
   layoutState() {
-    this.consoleState = blessed.box({
+    this.consoleStateContainer = blessed.layout({
-      label: '',
-      tags: true,
-      padding: 0,
       width: '73%',
       height: '5%',
       left: '7%',
       top: '90%',
+      layout: "grid"
+    });
+
+    this.consoleState = blessed.box({
+      parent: this.consoleStateContainer,
+      label: "",
+      tags: true,
+      padding: {
+        left: 1
+      },
+      width: "100%",
+      height: "100%",
+      valign: "middle",
       border: {
-        type: 'line'
+        type: "line"
       },
       style: {
-        fg: 'black',
+        fg: -1,
         border: {
           fg: this.color
         }
       }
     });
 
-    this.screen.append(this.consoleState);
+    this.screen.append(this.consoleStateContainer);
   }
 
   submitCmd(cmd) {