fix and build

README.md

@@ -10,7 +10,7 @@ Built on:
 
 ## Usage
 ```
-<script src="https://unpkg.com/private-safesupport-chatbox" type="text/javascript"></script>
+<script src="https://safesupport.chat/chatbox.js" type="text/javascript"></script>
 <script>
   var config = {
     matrixServerUrl: 'https://matrix-client.matrix.org',
@@ -23,6 +23,7 @@ Built on:
     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',
+    enableEncryption: 'yes',
   }
 
   EmbeddableChatbox.mount(config);
@@ -45,8 +46,8 @@ Options:
 | `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 |
+| `enableEncryption` (optional) | if set to "yes" then the chat will be encrypted by default  | `yes` |
 
 
 ## Feature list
@@ -75,7 +76,7 @@ This chatbox is meant to be used with a bot account that handles a number of fun
 
 The bot account is invited to the chatroom when a support request is initiated.
 
-You can find the code for the bot at [safesupport-bot](https://github.com/nomadic-labs/safesupport-bot).
+You can find the code for the bot at [ocrcc-bot](https://github.com/Safe-Support-Chat/ocrcc-bot).
 
 ## Bookmarklet
 
@@ -87,11 +88,11 @@ You can try this out on the [live demo](https://nomadic-labs.github.io/safesuppo
 
 Clone the project:
 ```
-git clone https://github.com/nomadic-labs/safesupport-chatbox.git
+git clone https://git.umycode.com/dave/ocrcc-chatbox.git
 ```
 Install the dependencies:
 ```
-cd safesupport-chatbox
+cd ocrcc-chatbox
 yarn
 ```
 

dist/index.html

@@ -13,9 +13,8 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        settingsEndpoint: 'https://safesupport-admin.herokuapp.com/api/get-settings'
+        matrixServerUrl: 'https://matrix.safesupport.chat'
-      }
+      };
-
       EmbeddableChatbox.mount(config);
     </script>
 

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "private-safesupport-chatbox",
+  "name": "ocrcc-chatbox",
-  "version": "2.2.0",
+  "version": "2.3.2",
-  "description": "A secure and private embeddable chatbox that connects to Riot",
+  "description": "A secure and private embeddable chatbox that connects to Matrix",
   "main": "dist/chatbox.js",
   "scripts": {
     "build": "NODE_ENV=production webpack-cli --mode production",

public/index.html

@@ -13,9 +13,8 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        settingsEndpoint: 'https://safesupport-admin.herokuapp.com/api/get-settings'
+        matrixServerUrl: 'https://matrix.safesupport.chat'
-      }
+      };
-
       EmbeddableChatbox.mount(config);
     </script>
 

src/components/ChatboxWithSettings.js

@@ -2,25 +2,30 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Chatbox from './chatbox';
 
-
+const ChatboxWithSettings = ({ settingsEndpoint = null, matrixServerUrl, ...rest }) => {
-const ChatboxWithSettings = ({ settingsEndpoint, ...rest }) => {
   const [settings, setSettings] = useState({});
-
+  const [shifts, setShifts] = useState();
-  const settingsObj = {};
+  const [isAvailable, setAvailability] = useState(true);
 
   const getSettings = async () => {
-    if (!settingsEndpoint) {
+    const url = `${settingsEndpoint}?homeserver=${encodeURIComponent(matrixServerUrl)}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    const { fields, schedule = [] } = data;
+
+    if (!fields) {
       const props = {
         ...rest,
-        enabled: true
+        enabled: true,
-      }
+        isAvailable: true,
+      };
 
       return setSettings(props);
     }
 
-    const res = await fetch(settingsEndpoint);
+    const settingsObj = {};
-    const data = await res.json();
+
-    const { fields } = data;
+    setShifts(schedule);
 
     Object.entries(fields).forEach(([k, v]) => {
       const [scope, key] = k.split('_');
@@ -37,17 +42,53 @@ const ChatboxWithSettings = ({ settingsEndpoint, ...rest }) => {
     return setSettings(settingsObj);
   };
 
+  const checkSchedule = () => {
+    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+    const now = new Date();
+    const weekday = weekdays[now.getDay()];
+    const hours = now.getHours();
+    const minutes = now.getMinutes();
+
+    shifts.map(async (shift) => {
+      const [startHours, startMinutes] = shift.start.split(':').map((t) => Number(t));
+      const [endHours, endMinutes] = shift.end.split(':').map((t) => Number(t));
+      if (
+        shift.service === 'web'
+        && shift.weekday === weekday
+        && ((startHours < hours) || (startHours === hours && startMinutes <= minutes))
+        && ((endHours > hours) || (endHours === hours && endMinutes > minutes))
+      ) {
+        setAvailability(true);
+      }
+    });
+  };
+
   useEffect(() => {
-    getSettings();
+    if (settingsEndpoint) {
-  }, []);
+      getSettings();
+    }
+  }, [settingsEndpoint]);
+
+  useEffect(() => {
+    if (shifts && shifts.length > 0) {
+      checkSchedule();
+    }
+  }, [shifts]);
 
   return (
-    <Chatbox {...settings} {...rest} />
+    /* eslint-disable react/jsx-props-no-spreading */
+    <Chatbox matrixServerUrl={matrixServerUrl} isAvailable={isAvailable} {...settings} {...rest} />
   );
 };
 
 ChatboxWithSettings.propTypes = {
+  matrixServerUrl: PropTypes.string.isRequired,
   settingsEndpoint: PropTypes.string,
 };
 
+ChatboxWithSettings.defaultProps = {
+  settingsEndpoint: null,
+};
+
 export default ChatboxWithSettings;

src/components/chatbox.jsx

@@ -18,33 +18,13 @@ import Header from "./header";
 import EmojiSelector from './emoji-selector';
 
 import './styles.scss';
+import defaultConfig from '../defaultConfig.js';
 
 
 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 CHAT_IS_OFFLINE_NOTICE = "CHAT_OFFLINE"
-
-const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space/"
-const DEFAULT_BOT_ID = "@help-bot:rhok.space"
-const DEFAULT_TERMS_URL = "https://tosdr.org/"
-const DEFAULT_ROOM_NAME = "Support Chat"
-const DEFAULT_INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service."
-const DEFAULT_AGREEMENT_MESSAGE = "Do you want to continue?"
-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 = "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
-const DEFAULT_DOCK_LABEL = 'Start a new chat'
-const DEFAULT_ENABLED = false
 
 class ChatBox extends React.Component {
   constructor(props) {
@@ -69,7 +49,7 @@ class ChatBox extends React.Component {
       isMobile: true,
       isSlowConnection: true,
       decryptionErrors: {},
-      messagesInFlight: [],
+      messagesInFlight: []
     }
     this.state = this.initialState
     this.chatboxInput = React.createRef();
@@ -152,23 +132,28 @@ class ChatBox extends React.Component {
 
   exitChat = async (resetState=true) => {
     if (this.state.client) {
-      await this.state.client.leave(this.state.roomId)
+      try {
+        await this.state.client.leave(this.state.roomId)
 
-      const auth = {
+        const auth = {
-        type: 'm.login.password',
+          type: 'm.login.password',
-        user: this.state.userId,
+          user: this.state.userId,
-        identifier: {
+          identifier: {
-            type: "m.id.user",
+              type: "m.id.user",
-            user: this.state.userId,
+              user: this.state.userId,
-        },
+          },
-        password: this.state.password,
+          password: this.state.password,
-      };
+        };
 
-      await this.state.client.deactivateAccount(auth, true)
+        await this.state.client.deactivateAccount(auth, true)
-      await this.state.client.stopClient()
+        await this.state.client.stopClient()
-      await this.state.client.clearStores()
+        await this.state.client.clearStores()
-      this.setState({ client: null, ready: true }) // no more loading animation
+      } catch (err) {
-      window.clearInterval(this.state.waitIntervalId) // no more waiting messages
+        console.log("Error exiting chat", err)
+      } finally {
+        this.setState({ client: null, ready: true }) // no more loading animation
+        window.clearInterval(this.state.waitIntervalId) // no more waiting messages
+      }
     }
 
     if (this.state.localStorage) {
@@ -236,9 +221,14 @@ class ChatBox extends React.Component {
     this.setState({ ready: false })
 
     const client = await this.createClientWithAccount()
-    try {
+
-      await client.initCrypto()
+    if(this.props.enableEncryption == "yes"){
-    } catch(err) {
+       try {
+        await client.initCrypto()
+      } catch(err) {
+        return this.restartWithoutCrypto()
+      }
+    }else{
       return this.restartWithoutCrypto()
     }
 
@@ -247,7 +237,7 @@ class ChatBox extends React.Component {
     client.once('sync', async (state, prevState, data) => {
       if (state === "PREPARED") {
         this.setState({ client })
-        client.setDisplayName(this.props.anonymousDisplayName)
+        client.setDisplayName(this.props.displayName)
         this.setMatrixListeners(client)
         await this.createRoom(client)
       }
@@ -272,7 +262,9 @@ class ChatBox extends React.Component {
       isCryptoEnabled: false,
     })
 
-    this.displayBotMessage({ body: RESTARTING_UNENCRYPTED_CHAT_MESSAGE })
+    if(this.props.enableEncryption == "yes"){
+      this.displayBotMessage({ body: RESTARTING_UNENCRYPTED_CHAT_MESSAGE })
+    }
 
     let opts = {
       baseUrl: this.props.matrixServerUrl,
@@ -289,10 +281,12 @@ class ChatBox extends React.Component {
       if (state === "PREPARED") {
         try {
           this.setState({ client })
-          client.setDisplayName(this.props.anonymousDisplayName)
+          client.setDisplayName(this.props.displayName)
           this.setMatrixListeners(client)
           await this.createRoom(client)
-          this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
+          if(this.props.enableEncryption == "yes"){
+            this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
+          }
         } catch(err) {
           console.log("error", err)
           this.handleInitError(err)
@@ -308,7 +302,7 @@ class ChatBox extends React.Component {
     await client.startClient()
 
     client.once('sync', async (state, prevState, data) => {
-      client.setDisplayName(this.props.anonymousDisplayName)
+      client.setDisplayName(this.props.displayName)
       this.setMatrixListeners(client)
       await this.createRoom(client)
     })
@@ -561,7 +555,7 @@ class ChatBox extends React.Component {
     switch (signal) {
       case 'END_CHAT':
         this.displayBotMessage({ body: this.props.exitMessage })
-        return this.exitChat(false); // keep chat state
+        return this.exitChat(false); // keepg chat state
       case 'CHAT_OFFLINE':
         this.displayBotMessage({ body: this.props.chatOfflineMessage })
         return this.exitChat(false); // keep chat state
@@ -587,14 +581,14 @@ class ChatBox extends React.Component {
   }
 
   componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown, false);
+    document.addEventListener("keydown", this.handleKeyDown, false)
     window.addEventListener('beforeunload', this.exitChat)
   }
 
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown, false);
+    document.removeEventListener("keydown", this.handleKeyDown, false)
     window.removeEventListener('beforeunload', this.exitChat)
-    this.exitChat();
+    this.exitChat()
   }
 
   handleInputChange = e => {
@@ -655,7 +649,8 @@ class ChatBox extends React.Component {
   }
 
   render() {
-    if (!this.props.enabled) {
+    console.log(this.props)
+    if (!this.props.enabled || !this.props.isAvailable) {
       return null
     }
 
@@ -779,39 +774,20 @@ ChatBox.propTypes = {
   confirmationMessage: PropTypes.string,
   exitMessage: PropTypes.string,
   chatUnavailableMessage: PropTypes.string,
-  anonymousDisplayName: PropTypes.string,
+  displayName: PropTypes.string,
   waitMessage: PropTypes.string,
+  enableEncryption: 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,
   dockLabel: PropTypes.string,
   enabled: PropTypes.bool,
+  isAvailable: PropTypes.bool
 }
 
-ChatBox.defaultProps = {
+ChatBox.defaultProps = defaultConfig
-  matrixServerUrl: DEFAULT_MATRIX_SERVER,
-  botId: DEFAULT_BOT_ID,
-  termsUrl: DEFAULT_TERMS_URL,
-  roomName: DEFAULT_ROOM_NAME,
-  introMessage: DEFAULT_INTRO_MESSAGE,
-  agreementMessage: DEFAULT_AGREEMENT_MESSAGE,
-  confirmationMessage: DEFAULT_CONFIRMATION_MESSAGE,
-  exitMessage: DEFAULT_EXIT_MESSAGE,
-  anonymousDisplayName: DEFAULT_ANONYMOUS_DISPLAY_NAME,
-  chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
-  waitMessage: DEFAULT_WAIT_MESSAGE,
-  chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE,
-  isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED,
-  position: DEFAULT_POSITION,
-  size: DEFAULT_SIZE,
-  maxWaitTime: DEFAULT_MAX_WAIT_MS,
-  waitInterval: DEFAULT_WAIT_INTERVAL_MS,
-  dockLabel: DEFAULT_DOCK_LABEL,
-  enabled: DEFAULT_ENABLED,
-}
 
 export default ChatBox;
 

src/components/chatbox.test.js

@@ -27,8 +27,8 @@ import waitForExpect from 'wait-for-expect'
 config.disabled = true
 
 var testConfig = {
-  matrixServerUrl: 'https://matrix.rhok.space',
+  matrixServerUrl: 'https://test.matrix.tld',
-  botId: '@help-bot:rhok.space',
+  botId: '@help-bot:matrix.tld',
   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.',

src/defaultConfig.js

@@ -0,0 +1,41 @@
+const DEFAULT_TERMS_URL = 'https://tosdr.org/';
+const DEFAULT_ROOM_NAME = 'Support Chat';
+const DEFAULT_INTRO_MESSAGE = 'This chat application does not collect any of your personal data or any data from your use of this service.';
+const DEFAULT_AGREEMENT_MESSAGE = 'Do you want to continue?';
+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_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 = '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_WAIT_INTERVAL_MS = 120000; // 2 minutes
+const DEFAULT_DOCK_LABEL = 'Start a new chat';
+const DEFAULT_ENABLED = true;
+const DEFAULT_AVAILABLE = true;
+const DEFAULT_ENCRYPTION = 'yes';
+
+const defaultConfig = {
+  termsUrl: DEFAULT_TERMS_URL,
+  roomName: DEFAULT_ROOM_NAME,
+  introMessage: DEFAULT_INTRO_MESSAGE,
+  agreementMessage: DEFAULT_AGREEMENT_MESSAGE,
+  confirmationMessage: DEFAULT_CONFIRMATION_MESSAGE,
+  exitMessage: DEFAULT_EXIT_MESSAGE,
+  displayName: DEFAULT_DISPLAY_NAME,
+  chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
+  waitMessage: DEFAULT_WAIT_MESSAGE,
+  enableEncryption: DEFAULT_ENCRYPTION,
+  chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE,
+  isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED,
+  position: DEFAULT_POSITION,
+  size: DEFAULT_SIZE,
+  waitInterval: DEFAULT_WAIT_INTERVAL_MS,
+  dockLabel: DEFAULT_DOCK_LABEL,
+  enabled: DEFAULT_ENABLED,
+  isAvailable: DEFAULT_AVAILABLE,
+};
+
+export default defaultConfig;

src/outputs/bookmarklet.js

@@ -1,17 +1,7 @@
 import EmbeddableChatbox from './embeddable-chatbox';
+import defaultConfig from '../defaultConfig';
 
-const config = {
+const config = defaultConfig;
-  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) {

yarn.lock

@@ -2966,15 +2966,10 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-caniuse-lite@^1.0.30001023:
+caniuse-lite@^1.0.30001023, caniuse-lite@^1.0.30001036, caniuse-lite@^1.0.30001038:
-  version "1.0.30001023"
+  version "1.0.30001300"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz#b82155827f3f5009077bdd2df3d8968bcbcc6fc4"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz"
-  integrity sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==
+  integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==
-
-caniuse-lite@^1.0.30001036, caniuse-lite@^1.0.30001038:
-  version "1.0.30001038"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz#44da3cbca2ab6cb6aa83d1be5d324e17f141caff"
-  integrity sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"