Merge pull request #53 from gausie/send-message-on-land

Automatically send message to existing session on page load if instructed

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.5.4
+- When reconnecting to an existing chat session, the bot will send a message contained in the localStorage key specified by the `NEXT_MESSAGE` constant. The message should be stringified JSON with a `message` property describing the message and an `expiry` property set to a UNIX timestamp in milliseconds after which this message should not be sent.
+
 ## 0.5.3
 - Added the parameter hideWhenNotConnected to not display the widget when the server is not connected (defaults to true)
 - Fixed issue where the 'connected' property was being loaded from previous session instead of being triggered on actual connection

README.md

@@ -208,6 +208,10 @@ emit('bot_uttered', message, room=socket_id)
 `storage: "local"` defines the state to be stored in the local stoage. The local storage persists after the the browser is closed, and is cleared when the cookies of the browser are cleared, or when `localStorage.clear()`is called.
 
 
+### Sending a message on page load
+
+When reconnecting to an existing chat session, the bot will send a message contained in the localStorage key specified by the `NEXT_MESSAGE` constant. The message should be stringified JSON with a `message` property describing the message and an `expiry` property set to a UNIX timestamp in milliseconds after which this message should not be sent. This is useful if you would like your bot to be able to offer your user to navigate around the site.
+
 
 ## API
 

src/components/Widget/components/Conversation/components/Messages/components/Message/index.js

@@ -12,7 +12,7 @@ class Message extends PureComponent {
       <div className={sender}>
         <div className="message-text" >
           {sender === 'response' ? (
-            <ReactMarkdown className={'markdown'} source={text} linkTarget={(url) => { if (!url.startsWith('mailto')) return '_blank'; }} />
+            <ReactMarkdown className={'markdown'} source={text} linkTarget={(url) => { if (!url.startsWith('mailto') && !url.startsWith('javascript')) return '_blank'; }} transformLinkUri={null} />
           ) : (
             text
           )}

src/components/Widget/index.js

@@ -22,7 +22,7 @@ import {
 import { isSnippet, isVideo, isImage, isQR, isText } from './msgProcessor';
 import WidgetLayout from './layout';
 import { storeLocalSession, getLocalSession } from '../../store/reducers/helper';
-import { SESSION_NAME } from 'constants';
+import { SESSION_NAME, NEXT_MESSAGE } from 'constants';
 
 class Widget extends Component {
 
@@ -71,6 +71,20 @@ class Widget extends Component {
         storeLocalSession(storage, SESSION_NAME, remote_id);
         this.props.dispatch(pullSession());
         this.trySendInitPayload()
+      } else {
+        // If this is an existing session, it's possible we changed pages and want to send a
+        // user message when we land.
+        const nextMessage = window.localStorage.getItem(NEXT_MESSAGE);
+
+        if (nextMessage !== null) {
+          const { message, expiry } = JSON.parse(nextMessage);
+          window.localStorage.removeItem(NEXT_MESSAGE);
+
+          if (expiry === 0 || expiry > Date.now()) {
+            this.props.dispatch(addUserMessage(message));
+            this.props.dispatch(emitUserMessage(message));
+          }
+        }
       }
     });
 

src/constants.js

@@ -23,6 +23,8 @@ export const MESSAGES_TYPES = {
   CUSTOM_COMPONENT: 'component'
 };
 
+export const NEXT_MESSAGE = 'mrbot_next_message';
+
 export const PROP_TYPES = {
 
   MESSAGE: ImmutablePropTypes.contains({