Add chat entry widget, with some clumsy css.

packages/chatbox/src/chatbox.ts

@@ -41,6 +41,10 @@ import {
   IRenderMime
 } from '@jupyterlab/rendermime';
 
+import {
+  ChatEntry
+} from './entry';
+
 
 /**
  * The class name added to chatbox widgets.
@@ -142,7 +146,11 @@ class Chatbox extends Widget {
           let cellWidget = this.contentFactory.createCell(options);
           cellWidget.readOnly = true;
           cellWidget.rendered = true;
-          this.addCell(cellWidget);
+          let entryWidget = new ChatEntry({
+            model: entry,
+            cell: cellWidget
+          });
+          this.addEntry(entryWidget);
         });
       });
     }
@@ -158,8 +166,8 @@ class Chatbox extends Widget {
    * into a chatbox. It is distinct from the `inject` method in that it requires
    * rendered code cell widgets and does not execute them.
    */
-  addCell(cell: BaseCellWidget) {
-    this._content.addWidget(cell);
+  addEntry(entry: ChatEntry) {
+    this._content.addWidget(entry);
   }
 
   /**
@@ -280,12 +288,24 @@ class Chatbox extends Widget {
     let prompt = this.prompt;
     let input = this._input;
 
+    let localCollaborator = {
+      shortName: 'IR',
+      color: '#0022FF'
+    };
+
     // Make the last prompt read-only, clear its signals, and move to content.
     if (prompt) {
       prompt.readOnly = true;
       prompt.removeClass(PROMPT_CLASS);
       (input.layout as PanelLayout).removeWidgetAt(0);
-      this.addCell(prompt);
+      let entryWidget = new ChatEntry({
+        model: {
+          text: prompt.model.value.text,
+          author: localCollaborator
+        },
+        cell: prompt
+      });
+      this.addEntry(entryWidget);
     }
 
     // Create the new prompt.

packages/chatbox/src/entry.ts

@@ -0,0 +1,107 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  Widget, PanelLayout
+} from '@phosphor/widgets';
+
+import {
+  JSONObject
+} from '@phosphor/coreutils';
+
+import {
+  MarkdownCellWidget
+} from '@jupyterlab/cells';
+
+/**
+ * The class name added to the chatbox entries.
+ */
+const CHAT_ENTRY_CLASS = 'jp-ChatEntry';
+
+/**
+ * The class name added to chatbox badges.
+ */
+const CHAT_BADGE_CLASS = 'jp-ChatEntry-badge';
+
+
+/**
+ * A chat entry widget, which hosts a user badge and a markdown cell.
+ */
+export
+class ChatEntry extends Widget {
+  /**
+   * Construct a chat entry widget.
+   */
+  constructor(options: ChatEntry.IOptions) {
+    super();
+    this.addClass(CHAT_ENTRY_CLASS);
+    this.model = options.model;
+
+    this.layout = new PanelLayout();
+
+    let color = this.model.author.color;
+    let r = parseInt(color.slice(1,3), 16);
+    let g = parseInt(color.slice(3,5), 16);
+    let b = parseInt(color.slice(5,7), 16);
+
+    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;
+
+    this._cell = options.cell;
+    this._cell.node.style.backgroundColor =
+      `rgba(${r}, ${g}, ${b}, 0.1)`;
+
+    let layout = this.layout as PanelLayout;
+    layout.addWidget(this._badge);
+    layout.addWidget(this._cell);
+  }
+
+  /**
+   * Get the underlying model for the entry.
+   */
+  readonly model: ChatEntry.IModel;
+
+  private _badge: Widget = null;
+  private _cell: MarkdownCellWidget = null;
+}
+
+
+/**
+ * The namespace for `InputAreaWidget` statics.
+ */
+export
+namespace ChatEntry {
+  /**
+   * Options for creating a chat entry widget.
+   */
+  export
+  interface IOptions {
+    /**
+     * A chat entry model for the widget.
+     */
+    model: IModel;
+
+    /**
+     * A markdown widget for rendering the entry.
+     */
+    cell: MarkdownCellWidget;
+  }
+
+  /**
+   * An interface for an entry in the chat log.
+   */
+  export
+  interface IModel extends JSONObject {
+    /**
+     * The text of the chat entry.
+     */
+    text: string;
+
+    /**
+     * The collaborator who logged the entry.
+     */
+    author: any;
+  }
+}

packages/chatbox/style/index.css

@@ -55,8 +55,22 @@
   display: none;
 }
 
-.jp-Chatbox .jp-InputArea {
-  background-color: pink;
+.jp-Chatbox-content .jp-Cell {
+  margin: 5px;
+  border-radius: 10px;
+  flex-grow: 1;
+}
+
+.jp-Chatbox .jp-ChatEntry {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px;
+}
+
+.jp-Chatbox .jp-ChatEntry-badge {
+  border-radius: 10px;
+  padding: 2px;
 }
 
 .jp-Chatbox-content .jp-InputArea-editor.jp-CellEditor {