Render local chat entries so that they may be distinguished from

nonlocal ones.

packages/chatbox/src/chatbox.ts

@@ -198,13 +198,11 @@ class Chatbox extends Widget {
 
     // Populate with the new model values.
     let modelDB = this._model.modelDB;
-    // Update the chatlog vector.
-    if (!modelDB.has('internal:chat')) {
-      modelDB.createList('internal:chat');
-    }
-    this._log = modelDB.get('internal:chat') as IObservableList<ChatEntry.IModel>;
-    this._log.changed.connect(this._onLogChanged, this);
     modelDB.connected.then(() => {
+      // Update the chatlog vector.
+      modelDB.createList('internal:chat');
+      this._log = modelDB.get('internal:chat') as IObservableList<ChatEntry.IModel>;
+      this._log.changed.connect(this._onLogChanged, this);
       this._start = this._log.length;
 
       if (this.isVisible) {
@@ -629,6 +627,7 @@ class Chatbox extends Widget {
         }
         break;
     }
+    this.update();
   }
 
   /**
@@ -663,7 +662,9 @@ class Chatbox extends Widget {
     cellWidget.rendered = true;
     let entryWidget = new ChatEntry({
       model: entry,
-      cell: cellWidget
+      cell: cellWidget,
+      isMe: entry.author.userId ===
+            this._model.modelDB.collaborators.localCollaborator.userId
     });
     return entryWidget;
   }

packages/chatbox/src/entry.ts

@@ -51,12 +51,17 @@ class ChatEntry extends Widget {
 
     this._badge = new Widget();
     this._badge.addClass(CHAT_BADGE_CLASS);
-    this._badge.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
-    this._badge.node.textContent = this.model.author.shortName;
+    let badgeName = this.model.author.shortName ||
+                    this.model.author.displayName.split(' ')
+                    .filter(s => s).map(s => s[0]).join('');
+    this._badge.node.textContent = badgeName;
 
     this.cell = options.cell;
-    this.cell.node.style.backgroundColor =
-      `rgba(${r}, ${g}, ${b}, 0.1)`;
+
+    if (!options.isMe) {
+      this._badge.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
+      this.cell.node.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
+    }
 
     let layout = this.layout as PanelLayout;
     layout.addWidget(this._badge);
@@ -96,6 +101,11 @@ namespace ChatEntry {
      * A markdown widget for rendering the entry.
      */
     cell: MarkdownCell;
+
+    /**
+     * Whether this author is the local collaborator.
+     */
+    isMe: boolean;
   }
 
   /**

packages/chatbox/style/index.css

@@ -56,6 +56,7 @@
 
 .jp-Chatbox-content .jp-Cell {
   margin: 5px;
+  background-color: var(--jp-layout-color1);
   border-radius: 10px;
   flex-grow: 1;
 }
@@ -72,6 +73,7 @@
 }
 
 .jp-Chatbox .jp-ChatEntry-badge {
+  background-color: var(--jp-layout-color1);
   border-radius: 10px;
   padding: 2px;
   min-width: 22px;