2.2.0

Bot signal

.circleci/config.yml

@@ -1,48 +0,0 @@
-version: 2
-jobs:
-  build:
-    docker:
-      - image: node:10
-    steps:
-      - checkout
-      - run:
-          name: dep install
-          command: npm install
-      - run:
-          name: install codecov
-          command: npm install -g codecov
-      - run:
-          name: test
-          command: npm test && codecov
-      - run:
-          name: build
-          command: |
-            npm run build
-            [ -f ./dist/index.html ] || exit 1
-            [ -f ./dist/blank.html ] || exit 1
-            [ -f ./dist/widget.js ] || exit 1
-            [ -f ./dist/bookmarklet.js ] || exit 1
-      - run:
-          name: npm start works
-          command: |
-            npm run start &
-            pid=$!
-            sleep 10s
-            ps $pid
-      - run:
-          name: deploy
-          command: |
-            if [ "$CIRCLE_BRANCH" = "master" ]; then
-              git config --global user.email $GH_EMAIL
-              git config --global user.name $GH_NAME
-              npm run deploy
-            fi
-
-workflows:
-  version: 2
-  build-deploy:
-    jobs:
-      - build:
-          filters:
-            branches:
-              ignore: gh-pages

.storybook/addons.js

@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

.storybook/config.js

@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);

.storybook/webpack.config.js

@@ -1,13 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-        include: path.resolve(__dirname, '../'),
-      },
-    ],
-  },
-}

README.md

@@ -10,11 +10,11 @@ Built on:
 
 ## Usage
 ```
-<script src="https://unpkg.com/safesupport-chatbox" type="text/javascript"></script>
+<script src="https://unpkg.com/private-safesupport-chatbox" type="text/javascript"></script>
 <script>
   var config = {
-    matrixServerUrl: 'https://matrix.rhok.space',
-    botId: '@help-bot:rhok.space',
+    matrixServerUrl: 'https://matrix-client.matrix.org',
+    botId: '@your-help-bot:matrix.org',
     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.',
@@ -31,8 +31,8 @@ Built on:
 Options:
 | Name | Description | Default
 | ----------- | ----------- | --------- |
-| `matrixServerUrl` (required) | URL for the Matrix homeserver you want to connect to | `https://matrix.rhok.space` |
-| `botId` (required) | User ID for the bot account that handles invites | `@help-bot:rhok.space` |
+| `matrixServerUrl` (required) | URL for the Matrix homeserver you want to connect to | `https://matrix-client.matrix.org` |
+| `botId` (required) | User ID for the bot account that handles invites | null |
 | `introMessage` (optional) | First message the user sees before agreeing to the Terms of Use | `This chat application does not collect any of your personal data or any data from your use of this service.` |
 | `termsUrl` (optional) | URL for the Terms of Use for the chat service | `https://tosdr.org/` |
 | `roomName` (optional)  | Name of the chatroom generated in Riot | 'Support Chat' |
@@ -40,7 +40,14 @@ Options:
 | `confirmationMessage` (optional) | Text to show to ask for agreement to continue | `Waiting for a facilitator to join the chat...` |
 | `exitMessage` (optional) | Text to show if the user rejects the Terms of Use. | `The chat is closed. You may close this window.` |
 | `anonymousDisplayName` (optional) | The display name for the chat user. | `Anonymous` |
-| `chatUnavailableMessage` (optional) | Text to show if no-one is available to respond  | `The chat service is not available right now. Please try again later.` |
+| `chatUnavailableMessage` (optional) | Text to show on error or if the service is otherwise unavailable  | `The chat service is not available right now. Please try again later.` |
+| `waitMessage` (optional) | Text to show if there is at least one facilitator online but they do not respond right away | `Please be patient, our online facilitators are currently responding to other support requests.` |
+| `chatOfflineMessage` (optional) | Text to show if there is no-one online respond | `All of the chat facilitators are currently offline.` |
+| `size` (optional) | The size of the start button. Can be 'small' or 'large' | `large` |
+| `position` (optional) | The position of the start button. Can be 'top left', 'top right', 'bottom left', 'bottom right'. | `bottom right` |
+| `maxWaitTime` (optional) | The maximum time (in ms) the chatbox will wait for someone to join before closing the chat and displaying the chat unavailable message | 600000 |
+| `waitInterval` (optional) | The interval (in ms) at which the bot sends the wait message | 120000 |
+
 
 ## Feature list
 

__mocks__/matrix-js-sdk.js

@@ -24,7 +24,13 @@ export const mockInitCrypto = jest.fn()
 export const mockStartClient = jest.fn(() => {
   return Promise.resolve('value');
 });
-export const mockOnce = jest.fn()
+export const mockOnce = jest
+  .fn()
+  .mockImplementation((event, callback) => {
+    if (event === 'sync') {
+      callback('PREPARED')
+    }
+  })
 export const mockStopClient = jest.fn(() => {
   return Promise.resolve('value');
 });

dist/index.html

@@ -13,17 +13,8 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        matrixServerUrl: 'https://matrix.safesupport.chat',
-        botId: '@help-bot:safesupport.chat',
-        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.",
-        agreementMessage: 'Do you want to continue?',
-        confirmationMessage: 'Waiting for a facilitator to join the chat...',
-        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',
-    }
+        settingsEndpoint: 'https://safesupport-admin.herokuapp.com/api/get-settings'
+      }
 
       EmbeddableChatbox.mount(config);
     </script>

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "safesupport-chatbox",
-  "version": "1.1.3",
+  "name": "private-safesupport-chatbox",
+  "version": "2.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",
@@ -76,7 +77,7 @@
   "author": "Nomadic Labs <sharon@nomadiclabs.ca",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.7.7",
+    "@babel/core": "^7.10.3",
     "@babel/plugin-proposal-class-properties": "7.7.4",
     "@babel/plugin-proposal-decorators": "7.7.4",
     "@babel/plugin-proposal-export-namespace-from": "7.7.4",
@@ -89,10 +90,6 @@
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
-    "@storybook/addon-actions": "5.2.8",
-    "@storybook/addon-links": "5.2.8",
-    "@storybook/addons": "5.2.8",
-    "@storybook/react": "5.2.8",
     "autoprefixer": "^9.7.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
@@ -121,16 +118,20 @@
     "node-sass": "^4.13.1",
     "postcss-increase-specificity": "0.6.0",
     "postcss-loader": "3.0.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "sass-loader": "8.0.0",
     "style-loader": "1.1.2",
     "wait-for-expect": "^3.0.2",
     "webpack": "4.41.5",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1",
     "webpack-obfuscator": "0.22.0",
     "webpack-serve": "3.2.0"
   },
   "dependencies": {
+    "airtable": "^0.10.0",
     "browser-encrypt-attachment": "^0.3.0",
     "emoji-picker-react": "^3.1.3",
     "isomorphic-fetch": "^2.2.1",
@@ -139,11 +140,13 @@
     "node-localstorage": "^2.1.5",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
     "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
     "react-onclickoutside": "^6.9.0",
     "react-test-renderer": "^16.13.0",
     "react-transition-group": "^4.0.0",
     "uuidv4": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   }
 }

public/index.html

@@ -13,17 +13,8 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        matrixServerUrl: 'https://matrix.safesupport.chat',
-        botId: '@help-bot:safesupport.chat',
-        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.",
-        agreementMessage: 'Do you want to continue?',
-        confirmationMessage: 'Waiting for a facilitator to join the chat...',
-        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',
-    }
+        settingsEndpoint: 'https://safesupport-admin.herokuapp.com/api/get-settings'
+      }
 
       EmbeddableChatbox.mount(config);
     </script>

src/components/ChatboxWithSettings.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Chatbox from './chatbox';
+
+
+const ChatboxWithSettings = ({ settingsEndpoint, ...rest }) => {
+  const [settings, setSettings] = useState({});
+
+  const settingsObj = {};
+
+  const getSettings = async () => {
+    if (!settingsEndpoint) {
+      const props = {
+        ...rest,
+        enabled: true
+      }
+
+      return setSettings(props);
+    }
+
+    const res = await fetch(settingsEndpoint);
+    const data = await res.json();
+    const { fields } = data;
+
+    Object.entries(fields).forEach(([k, v]) => {
+      const [scope, key] = k.split('_');
+
+      if (scope === 'web') {
+        settingsObj[key] = v;
+      }
+    });
+
+    if (!settingsObj.enabled) {
+      settingsObj.enabled = false;
+    }
+
+    return setSettings(settingsObj);
+  };
+
+  useEffect(() => {
+    getSettings();
+  }, []);
+
+  return (
+    <Chatbox {...settings} {...rest} />
+  );
+};
+
+ChatboxWithSettings.propTypes = {
+  settingsEndpoint: PropTypes.string,
+};
+
+export default ChatboxWithSettings;

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;
@@ -99,11 +141,16 @@
   width: 400px;
   max-width: calc(100vw - 10px);
   border-bottom: none;
+  margin: 0;
   animation-duration: 0.2s;
   animation-fill-mode: forwards;
 
   &-entering {
     animation-name: slideInUp;
+
+    &.position-top {
+      animation-name: slideInDown;
+    }
   }
   &-entered {
     display: inherit;
@@ -111,6 +158,10 @@
   }
   &-exiting {
     animation-name: slideOutDown;
+
+    &.position-top {
+      animation-name: slideOutUp;
+    }
   }
   &-exited {
     display: none;
@@ -520,6 +571,16 @@
 }
 
 @media screen and (max-width: 420px){
+  .docked-widget  {
+    .dock {
+      justify-content: flex-end;
+    }
+
+    #open-chatbox-label {
+      flex: 0 1 auto;
+    }
+  }
+
   .docked-widget {
     right: 0;
     left: 0;

src/components/_dark_mode.scss

@@ -68,7 +68,6 @@
     .message {
       &.from-bot {
         color: transparentize($light-text-color, 0.3);
-        font-size: 0.9rem;
       }
 
       &.from-me {

src/components/chatbox.test.js

@@ -115,9 +115,7 @@ describe('Chatbox', () => {
     expect(createClient).toHaveBeenCalled()
     expect(mockInitCrypto).toHaveBeenCalled()
     expect(mockStartClient).toHaveBeenCalled()
-    expect(mockCreateRoom).toHaveBeenCalled()
-    expect(mockSetPowerLevel).toHaveBeenCalled()
-    expect(mockOn).toHaveBeenCalled()
+    expect(mockOnce).toHaveBeenCalled()
   })
 
   test('rejecting terms should not start chat', async () => {
@@ -146,6 +144,10 @@ describe('Chatbox', () => {
 
     acceptButton.simulate('click')
 
+    await waitForExpect(() => {
+      expect(mockOnce).toHaveBeenCalled()
+    });
+
     await waitForExpect(() => {
       expect(mockCreateRoom).toHaveBeenCalled()
     });
@@ -169,7 +171,7 @@ describe('Chatbox', () => {
   })
 
 
-  test('decryption failure should lead to a new unencrypted chat', async () => {
+  test('decryption failure should handle the message event and save the event ID in state', async () => {
     const chatbox = mount(<Chatbox {...testConfig} />)
     const dock = chatbox.find('button.dock')
     const instance = chatbox.instance()
@@ -183,25 +185,25 @@ describe('Chatbox', () => {
     acceptButton.simulate('click')
 
     await waitForExpect(() => {
-      expect(mockCreateRoom).toHaveBeenCalled()
+      expect(mockOnce).toHaveBeenCalled()
     });
 
-    jest.spyOn(instance, 'initializeUnencryptedChat')
-    instance.handleDecryptionError()
+    jest.spyOn(instance, 'handleMessageEvent')
+
+    instance.handleDecryptionError({
+      getId: () => 'test_event_id',
+      getType: () => 'm.message',
+      getSender: () => 'sender',
+      getRoomId: () => 'room id',
+      getContent: () => ({ body: 'test msg' }),
+      getTs: () => '123',
+    })
 
     await waitForExpect(() => {
-      expect(mockLeave).toHaveBeenCalled()
-    });
+      expect(instance.handleMessageEvent).toHaveBeenCalled()
+    })
 
-    await waitForExpect(() => {
-      expect(mockStopClient).toHaveBeenCalled()
-    });
-
-    await waitForExpect(() => {
-      expect(mockClearStores).toHaveBeenCalled()
-    });
-
-    expect(instance.initializeUnencryptedChat).toHaveBeenCalled()
+    expect(chatbox.state().decryptionErrors).toEqual({ 'test_event_id': true })
   })
 
   test('creating an unencrypted chat', async () => {

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, label }) => {
   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>{label}</span><span className="icon">+</span>
+          </div>
+        :
+        <Fragment>
+          <div id="open-chatbox-label">{label}</div>
+          <div className="label-icon">
+            <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
+          </div>
+        </Fragment>
+      }
     </button>
   )
 }

src/components/styles.scss

@@ -1,4 +1,6 @@
-@import "variables";
-@import "loader";
-@import "chat";
-@import "dark_mode";
+#safesupport {
+  @import "variables";
+  @import "loader";
+  @import "chat";
+  @import "dark_mode";
+}

src/outputs/bookmarklet.js

@@ -1,17 +1,17 @@
 import EmbeddableChatbox from './embeddable-chatbox';
 
 const config = {
-        matrixServerUrl: 'https://matrix.safesupport.chat',
-        botId: '@help-bot:safesupport.chat',
-        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.",
-        agreementMessage: 'Do you want to continue?',
-        confirmationMessage: 'Waiting for a facilitator to join the chat...',
-        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',
-    }
+  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.',
+  agreementMessage: 'Do you want to continue?',
+  confirmationMessage: 'Waiting for a facilitator to join the chat...',
+  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',
+};
 
 export default function bookmarklet() {
   if (window.EmbeddableChatbox) {

src/outputs/component.js

@@ -0,0 +1,3 @@
+import Chatbox from '../components/chatbox';
+
+export default Chatbox;

src/outputs/embeddable-chatbox.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Chatbox from '../components/chatbox';
+import ChatboxWithSettings from '../components/ChatboxWithSettings';
 import '../../vendor/cleanslate.css';
 
 export default class EmbeddableChatbox {
   static el;
 
   static mount({ parentElement = null, ...props } = {}) {
-    const component = <Chatbox {...props} />; // eslint-disable-line
+    const component = <ChatboxWithSettings {...props} />; // eslint-disable-line
+
 
     function doRender() {
       if (EmbeddableChatbox.el) {

src/setupTests.js

@@ -0,0 +1,3 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+configure({ adapter: new Adapter() });

stories/index.stories.js

@@ -1,6 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Widget from '../src/components/widget'
-
-storiesOf(`Widget`)
-  .add(`default`, () => <Widget />)

webpack.config.js

@@ -94,4 +94,29 @@ module.exports = [{
     publicPath: '/',
     filename: 'bookmarklet.js',
   },
+}, {
+  ...defaultConfig,
+  entry: './src/outputs/component.js',
+  output: {
+    path: distDir,
+    publicPath: '/',
+    filename: 'component.js',
+    library: 'Chatbox',
+    libraryExport: 'default',
+    libraryTarget: 'commonjs2',
+  },
+  externals: {
+    react: {
+        commonjs: "react",
+        commonjs2: "react",
+        amd: "React",
+        root: "React"
+    },
+    "react-dom": {
+        commonjs: "react-dom",
+        commonjs2: "react-dom",
+        amd: "ReactDOM",
+        root: "ReactDOM"
+    }
+  }
 }];

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;