merge master in feature/button

Author: Jerome Houdan

CHANGELOG.md

@@ -0,0 +1,6 @@
+# Version 1.0.0 (Jun 21, 2018)
+
+## Description
+
+The first versioned release of the webchat.
+Every breaking change, buug fix or improvement will be referenced here.

README.md

@@ -52,9 +52,51 @@ Once you're satisfied with the settings, click on the **SAVE** button. A script
 
 If you want to customize your webchat even more, you can opt for a self-hosted installatiton. Just fork this project to get started!
 
+#### Installation
+
+Clone the repository you forked, and install the dependencies.
+
+```
+$> git clone YOUR_REPO_URL
+$> cd webchat
+$> npm install
+```
+
+#### Run in development mode
+
+```
+$> npm run start
+```
+
+#### Eslint + prettier
+
+```
+$> npm run prettier
+```
+
+#### Build for production
+
+```
+$> npm run build
+```
+
+#### Use your webchat
+
+Once you're done, build it and host it.
+To use it instead of the default one provided by Recast.AI, you need to set up the Webchat channel in the **CONNECT** tab of your bot.
+You'll be using the same script as the default installation, but you have **to replace the src field by your own URL**.
+
+
+```
+<script
+  src="YOUR_WEBCHAT_URL"
+  ...
+></script>
+```
+
 ### React component
 You can import the webchat as a React component like the following example:
-```
+``` js
 import RecastWebchat from 'webchat';
 
 export default class ReactWebchat extends Component {
@@ -115,47 +157,6 @@ this.webchat.clearMessages();
 |---|---|
 |clearMessages()|Clear all messages in the webchat|
 
-#### Installation
-
-Clone the repository you forked, and install the dependencies.
-
-```
-$> git clone YOUR_REPO_URL
-$> cd webchat
-$> npm install
-```
-
-#### Run in development mode
-
-```
-$> npm run start
-```
-
-#### Eslint + prettier
-
-```
-$> npm run prettier
-```
-
-#### Build for production
-
-```
-$> npm run build
-```
-
-#### Use your webchat
-
-Once you're done, build it and host it.
-To use it instead of the default one provided by Recast.AI, you need to set up the Webchat channel in the **CONNECT** tab of your bot.
-You'll be using the same script as the default installation, but you have **to replace the src field by your own URL**.
-
-
-```
-<script
-  src="YOUR_WEBCHAT_URL"
-  ...
-></script>
-```
 
 
 ## Getting started with Recast.AI

lib/index.js

@@ -26,6 +26,7 @@
     "progress-bar-webpack-plugin": "^1.10.0",
     "prop-types": "^15.6.0",
     "query-string": "^5.0.1",
+    "ramda": "^0.25.0",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
     "react-redux": "^5.0.6",

package.json

@@ -53,7 +53,7 @@ class QuickReplies extends Component {
       >
         <Text content={title} style={style} />
 
-        {displayQuickReplies && (
+        {displayQuickReplies && buttons && !!buttons.length && (
           <Slider
             arrows={showArrow}
             variableWidth

src/components/Message/QuickReplies.js

@@ -138,12 +138,11 @@ class Chat extends Component {
     }
     this._isPolling = true
 
-    const { token, channelId, conversationId } = this.props
     let shouldPoll = true
     let index = 0
 
     do {
-      const { lastMessageId } = this.props
+      const { lastMessageId, conversationId, channelId, token } = this.props
       let shouldWaitXseconds = false
       let timeToSleep = 0
       try {

src/containers/Chat/index.js

@@ -1,4 +1,5 @@
 import { handleActions } from 'redux-actions'
+import { uniqWith } from 'ramda'
 
 const initialState = []
 
@@ -19,7 +20,7 @@ export default handleActions(
     },
 
     POLL_MESSAGES_SUCCESS: (state, { payload }) => {
-      return [...state, ...payload.messages]
+      return uniqWith((m1, m2) => m1.id === m2.id, [...state, ...payload.messages])
     },
 
     GET_MESSAGES_SUCCESS: (state, { payload: messages }) => {

src/reducers/messages.js

@@ -6,8 +6,14 @@ import { store } from 'store'
 import { getChannelPreferences } from 'actions/channel'
 import App from 'containers/App'
 
-document.body.innerHTML += '<div id="recast-webchat-div"></div>'
-const root = document.getElementById('recast-webchat-div')
+const idChatDiv = 'recast-webchat-div'
+
+if (!document.getElementById(idChatDiv)) {
+  document.body.innerHTML += `<div id="${idChatDiv}"></div>`
+}
+
+const root = document.getElementById(idChatDiv)
+
 const script = document.currentScript || document.getElementById('recast-webchat')
 
 const channelId = script.getAttribute('channelId')