[Contribution: @kaxi1993] Add typing indicator (#127)

* Add typing indicator

* Update readme to include typing feature

* fix sample code issue in readme

* Update demo to include typing example

* Remove vendor prefixes from typing indicator style

* Update typing indicator prop name

* Add missing comma

Author: kaxi1993

README.md

@@ -42,7 +42,8 @@ class Demo extends Component {
   constructor() {
     super();
     this.state = {
-      messageList: []
+      messageList: [],
+      isTyping: true
     };
   }
 
@@ -74,6 +75,7 @@ class Demo extends Component {
         onMessageWasSent={this._onMessageWasSent.bind(this)}
         messageList={this.state.messageList}
         showEmoji
+        showTypingIndicator={this.state.isTyping}
       />
     </div>)
   }
@@ -92,15 +94,16 @@ Launcher props:
 
 |      prop        | type   | required | description |
 |------------------|--------|----------|-------------|
-| agentProfile     | [object](#agent-profile-objects) | yes | Represents your product or service's customer service agent. Fields: imageUrl (string), teamName (string). |
-| handleClick      | function | yes | Intercept the click event on the launcher. No argument sent when function is called. |
-| isOpen           | boolean | yes | Force the open/close state of the chat window. If this is not set, it will open and close when clicked. |
-| messageList      | [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
-| mute             | boolean | no | Don't play sound for incoming messages. Defaults to `false`. |
-| newMessagesCount | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. |
-| onFilesSelected  | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
-| onMessageWasSent | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
-| showEmoji        | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
+| agentProfile          | [object](#agent-profile-objects) | yes | Represents your product or service's customer service agent. Fields: imageUrl (string), teamName (string). |
+| handleClick           | function | yes | Intercept the click event on the launcher. No argument sent when function is called. |
+| isOpen                | boolean | yes | Force the open/close state of the chat window. If this is not set, it will open and close when clicked. |
+| messageList           | [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
+| mute                  | boolean | no | Don't play sound for incoming messages. Defaults to `false`. |
+| newMessagesCount      | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. |
+| onFilesSelected       | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
+| onMessageWasSent      | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
+| showEmoji             | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
+| showTypingIndicator   | boolean | no | Whether or not to show typing indicator in the message box. Defaults to `false`.
 
 
 ### Message Objects

demo/src/TestArea.js

@@ -1,6 +1,26 @@
 import React, { Component } from 'react';
 
 class TestArea extends Component {
+  constructor (props) {
+    super(props);
+
+    this.timeout = null;
+    this._onKeyUp = this._onKeyUp.bind(this);
+  }
+
+  _onKeyUp() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+
+    this.props.startTyping();
+
+    // stop typing after 1 second of inactivity
+    this.timeout = setTimeout(() => {
+      this.props.stopTyping();
+    }, 1000);
+  }
+
   render () {
     return (
       <div className="demo-test-area--wrapper">
@@ -13,13 +33,15 @@ class TestArea extends Component {
         <form className="demo-test-area" onSubmit={(e)=> {
           e.preventDefault();
           this.props.onMessage(this.textArea.value);
+          this.props.stopTyping();
           this.textArea.value = '';
         }}>
           <div className="demo-test-area--preamble">Test the chat window by sending a message:</div>
           <textarea
             ref={(e) => { this.textArea = e; }}
             className="demo-test-area--text"
             placeholder="Write a test message...."
+            onKeyUp={this._onKeyUp}
           />
           <button className="demo-test-area--button"> Send Message! </button>
         </form>

demo/src/index.js

@@ -17,7 +17,8 @@ class Demo extends Component {
     this.state = {
       messageList: messageHistory,
       newMessagesCount: 0,
-      isOpen: false
+      isOpen: false,
+      isTyping: false
     };
   }
 
@@ -54,6 +55,18 @@ class Demo extends Component {
     }
   }
 
+  _startTyping() {
+    this.setState({
+      isTyping: true
+    });
+  }
+
+  _stopTyping() {
+    this.setState({
+      isTyping: false
+    });
+  }
+
   _handleClick() {
     this.setState({
       isOpen: !this.state.isOpen,
@@ -66,6 +79,8 @@ class Demo extends Component {
       <Header />
       <TestArea
         onMessage={this._sendMessage.bind(this)}
+        startTyping={this._startTyping.bind(this)}
+        stopTyping={this._stopTyping.bind(this)}
       />
       <Launcher
         agentProfile={{
@@ -79,6 +94,7 @@ class Demo extends Component {
         handleClick={this._handleClick.bind(this)}
         isOpen={this.state.isOpen}
         showEmoji
+        showTypingIndicator={this.state.isTyping}
       />
       <img className="demo-monster-img" src={monsterImgUrl} />
       <Footer />

src/components/ChatWindow.js

@@ -34,6 +34,7 @@ class ChatWindow extends Component {
         <MessageList
           messages={messageList}
           imageUrl={this.props.agentProfile.imageUrl}
+          showTypingIndicator={this.props.showTypingIndicator}
         />
         <UserInput
           onSubmit={this.onUserInputSubmit.bind(this)}
@@ -51,7 +52,8 @@ ChatWindow.propTypes = {
   onClose: PropTypes.func.isRequired,
   onFilesSelected: PropTypes.func,
   onUserInputSubmit: PropTypes.func.isRequired,
-  showEmoji: PropTypes.bool
+  showEmoji: PropTypes.bool,
+  showTypingIndicator: PropTypes.bool
 };
 
 export default ChatWindow;

src/components/Launcher.js

@@ -60,6 +60,7 @@ class Launcher extends Component {
           isOpen={isOpen}
           onClose={this.handleClick.bind(this)}
           showEmoji={this.props.showEmoji}
+          showTypingIndicator={this.props.showTypingIndicator}
         />
       </div>
     );
@@ -84,11 +85,13 @@ Launcher.propTypes = {
   messageList: PropTypes.arrayOf(PropTypes.object),
   mute: PropTypes.bool,
   showEmoji: PropTypes.bool,
+  showTypingIndicator: PropTypes.bool
 };
 
 Launcher.defaultProps = {
   newMessagesCount: 0,
-  showEmoji: true
+  showEmoji: true,
+  showTypingIndicator: false
 };
 
 export default Launcher;

src/components/MessageList.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Message from './Messages';
+import TypingIndicator from './TypingIndicator';
 
 class MessageList extends Component {
 
@@ -13,6 +14,7 @@ class MessageList extends Component {
         {this.props.messages.map((message, i) => {
           return <Message message={message} key={i} />;
         })}
+        {this.props.showTypingIndicator && <TypingIndicator />}
       </div>);
   }
 }

src/components/TypingIndicator.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+function TypingIndicator () {
+  return (
+    <div className="sc-typing-indicator">
+      <div className="sc-typing-indicator--message">
+        <div className="sc-typing-indicator--dot"></div>
+        <div className="sc-typing-indicator--dot"></div>
+        <div className="sc-typing-indicator--dot"></div>
+      </div>
+    </div>
+  )
+}
+
+
+export default TypingIndicator

src/styles/index.js

@@ -5,3 +5,4 @@ import './header.css';
 import './message.css';
 import './user-input.css';
 import './popup-window.css';
+import './typing-indicator.css';

src/styles/typing-indicator.css

@@ -0,0 +1,52 @@
+.sc-typing-indicator {
+  padding-top: 20px;
+  width: 300px;
+  margin: auto;
+}
+
+.sc-typing-indicator--circle {
+  width: 28px;
+  height: 22px;
+  padding: 5px 8px;
+  border-radius: 15px;
+  background-color: #f4f7f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sc-typing-indicator--dot {
+  background-color: #90949c;
+  animation: typing-indicator 1.5s infinite ease-in-out;
+  display: inline-block;
+  border-radius: 2px;
+  margin-right: 2px;
+  height: 4px;
+  width: 4px;
+}
+
+@keyframes typing-indicator {
+  0% {
+    transform: translateY(0px)
+  }
+
+  28% {
+    transform: translateY(-5px)
+  }
+
+  44% {
+    transform: translateY(0px)
+  }
+}
+
+.sc-typing-indicator--dot:nth-child(1) {
+  animation-delay: 200ms;
+}
+
+.sc-typing-indicator--dot:nth-child(2) {
+  animation-delay: 300ms;
+}
+
+.sc-typing-indicator--dot:nth-child(3) {
+  animation-delay: 400ms;
+}