chat: add startup content

pkg/interface/chat/src/js/components/lib/welcome.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+
+export class Welcome extends Component {
+  constructor() {
+    super();
+    this.state = {
+      show: true
+    }
+  }
+  render() {
+    let wasWelcomed = localStorage.getItem("urbit-chat:wasWelcomed");
+    if (wasWelcomed === null) {
+      localStorage.setItem("urbit-chat:wasWelcomed", JSON.stringify(false));
+      return wasWelcomed = false;
+    } else {
+      wasWelcomed = JSON.parse(wasWelcomed);
+    }
+
+    let inbox = !!this.props.inbox ? this.props.inbox : {};
+
+    return ((!wasWelcomed && this.state.show) && (inbox.length !== 0)) ? (
+      <div className="ma4 pa2 ba bg-gray5 b--gray4 bg-gray0-d b--gray1-d white-d">
+      <p className="f9 lh-copy">Chats are basic, instant, linear modes of conversation. Many chats can be bundled under one group.</p>
+      <p className="f9 pt2 dib fw6 pointer"
+      onClick={(() => {
+        localStorage.setItem("urbit-chat:wasWelcomed", JSON.stringify(true));
+        this.setState({show: false})
+      })}>
+        Close this message
+      </p>
+      </div>
+    ) : <div/>
+  }
+}
+
+export default Welcome

pkg/interface/chat/src/js/components/sidebar.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import classnames from 'classnames';
 import _ from 'lodash';
 
+import Welcome from '/components/lib/welcome.js';
 import { SidebarInvite } from '/components/lib/sidebar-invite';
 import { SidebarItem } from '/components/lib/sidebar-item';
 
@@ -111,6 +112,7 @@ export class Sidebar extends Component {
           </a>
         </div>
         <div className="overflow-y-auto h-100">
+          <Welcome inbox={props.inbox}/>
           {sidebarInvites}
           {sidebarItems}
         </div>