First working version, 0.1.0

Closes #1. Used atom-message-panel

README.md

@@ -1,4 +1,22 @@
-atom-gitter
+[atom-gitter](https://github.com/Glavin001/atom-gitter)
 ===========
 
-Gitter chat integration with Atom.io
+> [Gitter chat](https://gitter.im/) integration with [Atom.io](https://atom.io/).
+
+## Install
+
+```bash
+apm install gitter
+```
+
+Or Settings/Preferences ➔ Packages ➔ Search for `gitter`
+
+Then go to https://developer.gitter.im/apps and retrieve your *Personal Access Token*.  
+Enter your Token in the Package Settings.
+Go to Settings/Preferences ➔ Search for installed package `gitter` ➔ Enter your `Token`.
+
+## Features
+
+- [x] Automatically detect the room using the Git repository remote URL
+- [x] Listen and display new messages
+- [ ] Post message

lib/atom-gitter.js

@@ -2,6 +2,9 @@ var AtomGitterView, Git, githubUrlFromGit, gitterStream, url;
 
 AtomGitterView = require('./atom-gitter-view');
 
+var MessagePanelView = require('atom-message-panel').MessagePanelView;
+var PlainMessageView = require('atom-message-panel').PlainMessageView;
+
 //var atom = require('atom');
 //var Git = atom.Git;
 
@@ -13,16 +16,41 @@ gitter = require('./gitter');
 
 module.exports = {
   configDefaults: {
-    token: ""
+    token: "",
+    openOnNewMessage: true,
+    recentMessagesAtTop: true
   },
   atomGitterView: null,
   activate: function(state) {
     this.atomGitterView = new AtomGitterView(state.atomGitterViewState);
 
+    var messages = new MessagePanelView({
+      title: 'Gitter'
+    });
+    messages.attach();
+    function addMessage(msgView) {
+      var recentMessagesAtTop = atom.config.get('gitter.recentMessagesAtTop');
+      // Add Message
+      messages.messages.push(msgView);
+      if (recentMessagesAtTop) {
+        // Add msgView to top
+        messages.body.prepend(msgView);
+      } else {
+        messages.body.append(msgView);
+      }
+      // Force the summary to be recent
+      messages.setSummary(msgView.getSummary());
+    }
+
     var token = atom.config.get('gitter.token');
 
     if (!token) {
-      console.log('Please setup your Gitter Token.');
+      //console.log('Please setup your Gitter Token.');
+      addMessage(new PlainMessageView({
+        message: 'Please setup your Gitter Personal Access Token. See https://developer.gitter.im/apps',
+        raw: true,
+        className: 'gitter-message text-danger'
+      }));
       return;
     }
 
@@ -32,26 +60,85 @@ module.exports = {
     var temp = url.parse(githubUrl).path.split('/');
     var userName = temp[1];
     var projectName = temp[2];
-    console.log(userName);
-    console.log(projectName);
+    //console.log(userName);
+    //console.log(projectName);
     var Gitter = new gitter(token);
-    Gitter.v1.roomWithRepoUri(userName+'/'+projectName, function(error, room) {
-        //console.log(error, room);
-        if (room) {
-          console.log('Found room:', room);
-          var stream = Gitter.v1.room(room.id).stream('chatMessages');
-          stream.on('message', function(error, msg) {
-            console.log('Message: '+JSON.stringify(msg, undefined, 4));
-          });
-          stream.on('heartbeat', function() {
-            console.log('Heartbeat');
-          });
-          stream.on('error', function(error) {
-            console.log(error);
-          });
-        }
+    Gitter.v1.roomWithRepoUri(userName + '/' + projectName, function(error, room) {
+      //console.log(error, room);
+      if (room) {
+        console.log('Found room:', room);
+
+        messages.setTitle('Gitter - ' + room.name + ' - ' + room.topic);
+        addMessage(new PlainMessageView({
+          message: 'Found room: ' + room.name,
+          raw: true,
+          className: 'gitter-message text-success'
+        }));
+
+        var stream = Gitter.v1.room(room.id).stream('chatMessages');
+        stream.on('connected', function() {
+          addMessage(new PlainMessageView({
+            message: 'Connected to Gitter chat room.',
+            raw: true,
+            className: 'gitter-message text-success'
+          }));
+        });
+        stream.on('message', function(error, msg) {
+          console.log('Message: ' + JSON.stringify(msg, undefined, 4));
+
+          if (msg === null) {
+            addMessage(new PlainMessageView({
+              message: 'Error reading message.',
+              className: 'gitter-message text-danger'
+            }));
+          } else {
+              var html = msg.html;
+              var d = new Date(msg.sent);
+              var dateStr = d.toDateString() + ' ' + d.toTimeString();
+              var message = '<a href="https://github.com' + msg.fromUser.url + '">' + msg.fromUser.username + '</a>' +
+                ' - ' + dateStr + '<br/>' + html;
+
+              var msgView = new PlainMessageView({
+                message: message,
+                raw: true,
+                className: 'gitter-message'
+              });
+              addMessage(msgView);
+              // Force the summary to be recent
+              messages.setSummary({
+                'summary': msg.fromUser.username + ': ' + msg.text,
+                'className': 'text-italic'
+              });
+
+              // Check if should force open
+              var openOnNewMessage = atom.config.get('gitter.openOnNewMessage');
+              if (openOnNewMessage && messages.summary.css('display') !== 'none') {
+                // Open panel on new message
+                messages.toggle();
+              }
+          }
+
+        });
+        stream.on('heartbeat', function() {
+          console.log('Heartbeat');
+        });
+        stream.on('error', function(error) {
+          console.log(error);
+          addMessage(new PlainMessageView({
+            message: 'Error: ' + error.message,
+            className: 'gitter-message text-danger'
+          }));
+        });
+        stream.on('close', function() {
+          addMessage(new PlainMessageView({
+            message: 'Connection closed.',
+            className: 'gitter-message text-danger'
+          }));
+        });
+
+      }
     });
-    
+
     return;
   },
   deactivate: function() {

lib/gitter.js

@@ -61,7 +61,8 @@ module.exports = function(token) {
             };
 
             var req = https.request(options, function(res) {
-              //console.log(res);
+              streamEventEmitter.emit('connected');
+
               res.on('data', function(chunk) {
                 var msg = chunk.toString();
                 //console.log(msg);
@@ -72,6 +73,8 @@ module.exports = function(token) {
                     //console.log('Message: '+JSON.stringify(json, undefined, 4));
                     streamEventEmitter.emit('message', null, json);
                   } catch (e) {
+                    console.error(e);
+                    console.log(msg);
                     streamEventEmitter.emit('message', e, null);
                   }
                 } else {
@@ -85,6 +88,9 @@ module.exports = function(token) {
               //console.log('Something went wrong: ' + e.message);
               streamEventEmitter.emit('error', e);
             });
+            req.on('end', function() {
+              streamEventEmitter.emit('close');
+            });
 
             req.end();
 

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "github-url-from-git": "^1.1.1",
     "request": "^2.34.0",
-    "lodash": "^2.4.1"
+    "lodash": "^2.4.1",
+    "atom-message-panel": "^1.0.0"
   }
 }

stylesheets/atom-gitter.less

@@ -5,4 +5,17 @@
 @import "ui-variables";
 
 .atom-gitter {
+
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.am-panel {
+  .panel-body {
+    .gitter-message {
+      margin-bottom: 15px;
+    }
+  }
 }