1.2.0

dist/index.html

@@ -13,8 +13,8 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        matrixServerUrl: 'https://matrix.safesupport.chat',
-        botId: '@help-bot:safesupport.chat',
+        matrixServerUrl: 'https://matrix.rhok.space',
+        botId: '@help-bot:rhok.space',
         roomName: 'Support Chat',
         termsUrl: 'https://tosdr.org/',
         introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
@@ -23,6 +23,9 @@
         exitMessage: 'The chat is closed. You may close this window.',
         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
         anonymousDisplayName: 'Anonymous',
+        position: 'bottom right',
+        size: 'large',
+        maxWaitTime: 6000*3,
     }
 
       EmbeddableChatbox.mount(config);

package.json

@@ -1,10 +1,11 @@
 {
   "name": "private-safesupport-chatbox",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A secure and private embeddable chatbox that connects to Riot",
   "main": "dist/chatbox.js",
   "scripts": {
     "build": "NODE_ENV=production webpack-cli --mode production",
+    "build:profile": "webpack --mode production --config webpack.config.profile.js",
     "start": "webpack-dev-server",
     "test": "jest",
     "test-update-snapshots": "jest --updateSnapshot",
@@ -121,7 +122,7 @@
     "style-loader": "1.1.2",
     "wait-for-expect": "^3.0.2",
     "webpack": "4.41.5",
-    "webpack-bundle-analyzer": "^3.7.0",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1",
     "webpack-obfuscator": "0.22.0",

public/index.html

@@ -23,6 +23,9 @@
         exitMessage: 'The chat is closed. You may close this window.',
         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
         anonymousDisplayName: 'Anonymous',
+        position: 'bottom right',
+        size: 'large',
+        maxWaitTime: 6000*3,
     }
 
       EmbeddableChatbox.mount(config);

src/components/_chat.scss

@@ -26,14 +26,56 @@
   }
 }
 
+
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    display: inherit;
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    display: none;
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
 .docked-widget {
   position: fixed;
-  bottom: 10px;
-  right: 10px;
   z-index: 9999;
-  width: 400px;
   max-width: 100vw;
   font-size: $base-font-size;
+
+  &.size-large {
+    width: 400px;
+
+    .dock {
+      width: 400px;
+    }
+  }
+
+  &.size-small {
+    #open-chatbox-label {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-left: 0.5em;
+        font-size: 1.2em;
+      }
+    }
+  }
 }
 
 .dock {
@@ -41,7 +83,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 400px;
   max-width: calc(100vw - 10px);
   color: $white;
   font-family: $theme-font;
@@ -53,6 +94,7 @@
   background-color: transparent;
   padding: 5px;
 
+
   #open-chatbox-label {
     background: $theme-color;
     padding: 0.75em;
@@ -105,6 +147,10 @@
 
   &-entering {
     animation-name: slideInUp;
+
+    &.position-top {
+      animation-name: slideInDown;
+    }
   }
   &-entered {
     display: inherit;
@@ -112,6 +158,10 @@
   }
   &-exiting {
     animation-name: slideOutDown;
+
+    &.position-top {
+      animation-name: slideOutUp;
+    }
   }
   &-exited {
     display: none;

src/components/chatbox.jsx

@@ -24,7 +24,6 @@ const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
 const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption."
 const UNENCRYPTION_NOTICE = "Messages in this chat are not encrypted."
 const RESTARTING_UNENCRYPTED_CHAT_MESSAGE = "Restarting chat without encryption."
-const WAIT_TIME_MS = 120000 // 2 minutes
 const CHAT_IS_OFFLINE_NOTICE = "CHAT_OFFLINE"
 
 const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space/"
@@ -37,9 +36,13 @@ const DEFAULT_CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat
 const DEFAULT_EXIT_MESSAGE = "The chat is closed. You may close this window."
 const DEFAULT_ANONYMOUS_DISPLAY_NAME="Anonymous"
 const DEFAULT_CHAT_UNAVAILABLE_MESSAGE = "The chat service is not available right now. Please try again later."
-const DEFAULT_CHAT_OFFLINE_MESSAGE = "There are no facilitators currently available. For immediate service, please call 123-456-7890."
+const DEFAULT_CHAT_OFFLINE_MESSAGE = "All of the chat facilitators are currently offline."
 const DEFAULT_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests."
 const DEFAULT_ENCRYPTION_DISABLED = false
+const DEFAULT_POSITION = 'bottom right'
+const DEFAULT_SIZE = 'large'
+const DEFAULT_MAX_WAIT_MS = 600000 // 10 minutes
+const DEFAULT_WAIT_INTERVAL_MS = 120000 // 2 minutes
 
 
 class ChatBox extends React.Component {
@@ -468,7 +471,7 @@ class ChatBox extends React.Component {
           body: this.props.chatOfflineMessage
         }
       }
-      this.handleChatOffline(event.getRoomId())
+      this.handleChatOffline()
     }
 
     this.setState({
@@ -480,9 +483,10 @@ class ChatBox extends React.Component {
     })
   }
 
-  handleChatOffline = (roomId) => {
+  handleChatOffline = () => {
     this.exitChat(false) // close the chat connection but keep chatbox state
-    window.clearInterval(this.state.timeoutId) // no more waiting messages
+    window.clearInterval(this.state.waitIntervalId) // no more waiting messages
+    window.clearInterval(this.state.waitTimeoutId) // no more waiting messages
     this.setState({ ready: true }) // no more loading animation
   }
 
@@ -524,7 +528,8 @@ class ChatBox extends React.Component {
       if (eventType === "m.room.member" && content.membership === "join" && sender !== this.props.botId && sender !== this.state.userId) {
         this.verifyAllRoomDevices(client, room)
         this.setState({ facilitatorId: sender, ready: true })
-        window.clearInterval(this.state.timeoutId)
+        window.clearInterval(this.state.waitIntervalId)
+        window.clearInterval(this.state.waitTimeoutId)
       }
     });
 
@@ -596,13 +601,20 @@ class ChatBox extends React.Component {
   }
 
   startWaitTimeForFacilitator = () => {
-    const timeoutId = window.setInterval(() => {
+    const waitIntervalId = window.setInterval(() => {
       if (!this.state.facilitatorId && !this.state.ready) {
         this.displayBotMessage({ body: this.props.waitMessage })
       }
-    }, WAIT_TIME_MS)
+    }, this.props.waitInterval)
 
-    this.setState({ timeoutId })
+    const waitTimeoutId = window.setTimeout(() => {
+      if (!this.state.facilitatorId && !this.state.ready) {
+        this.displayBotMessage({ body: this.props.chatUnavailableMessage })
+        this.handleChatOffline()
+      }
+    }, this.props.maxWaitTime)
+
+    this.setState({ waitIntervalId, waitTimeoutId })
   }
 
   handleRejectTerms = () => {
@@ -638,14 +650,15 @@ class ChatBox extends React.Component {
     const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
     const orderedMessages = Object.values(messages).sort((a,b) => a.timestamp - b.timestamp)
     const inputLabel = 'Send a message...'
+    const [positionY, positionX] = this.props.position.split(' ')
 
     return (
       <div id="safesupport">
-        <div className="docked-widget" role="complementary">
+        <div className={`docked-widget size-${this.props.size}`} role="complementary" style={{ [positionY]: '10px', [positionX]: '10px' }}>
           <Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
             {(status) => {
               return (
-              <div className={`widget widget-${status}`} aria-hidden={!opened}>
+              <div className={`widget widget-${status} position-${positionY}`} aria-hidden={!opened}>
                 <div id="safesupport-chatbox" aria-haspopup="dialog">
                   <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
 
@@ -736,7 +749,7 @@ class ChatBox extends React.Component {
               )}
             }
           </Transition>
-          {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
+          {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} size={this.props.size} />}
           {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
         </div>
       </div>
@@ -758,6 +771,10 @@ ChatBox.propTypes = {
   waitMessage: PropTypes.string,
   chatOfflineMessage: PropTypes.string,
   isEncryptionDisabled: PropTypes.bool,
+  position: PropTypes.oneOf(['top left', 'top right', 'bottom left', 'bottom right']),
+  size: PropTypes.oneOf(['small', 'large']),
+  maxWaitTime: PropTypes.number,
+  waitInterval: PropTypes.number,
 }
 
 ChatBox.defaultProps = {
@@ -773,7 +790,11 @@ ChatBox.defaultProps = {
   chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
   waitMessage: DEFAULT_WAIT_MESSAGE,
   chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE,
-  isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED
+  isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED,
+  position: DEFAULT_POSITION,
+  size: DEFAULT_SIZE,
+  maxWaitTime: DEFAULT_MAX_WAIT_MS,
+  waitInterval: DEFAULT_WAIT_INTERVAL_MS,
 }
 
 export default ChatBox;

src/components/dock.jsx

@@ -1,8 +1,7 @@
-import React from "react"
+import React, { Fragment } from "react"
 import PropTypes from "prop-types"
 
-const Dock = ({ handleToggleOpen }) => {
-
+const Dock = ({ handleToggleOpen, size }) => {
   return(
     <button
       type="button"
@@ -11,10 +10,19 @@ const Dock = ({ handleToggleOpen }) => {
       onKeyPress={handleToggleOpen}
       aria-labelledby="open-chatbox-label"
     >
-      <div id="open-chatbox-label">Start a new chat</div>
-      <div className="label-icon">
-        <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
-      </div>
+      {
+        size === 'small' ?
+          <div id="open-chatbox-label">
+            <span>Chat</span><span className="icon">+</span>
+          </div>
+        :
+        <Fragment>
+          <div id="open-chatbox-label">Start a new chat</div>
+          <div className="label-icon">
+            <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
+          </div>
+        </Fragment>
+      }
     </button>
   )
 }

webpack.config.profile.js

@@ -0,0 +1,7 @@
+const config = require('./webpack.config');
+
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+config[0].plugins = config[0].plugins.concat([new BundleAnalyzerPlugin({ analyzerPort: 5555 })]);
+
+module.exports = config;