├── .eslintrc
├── .gitignore
├── .travis.yml
├── README.md
├── __mocks__
    ├── emoji-picker-react.js
    └── matrix-js-sdk.js
├── dist
    ├── bookmarklet.js
    ├── chatbox.js
    ├── index.html
    └── olm.wasm
├── jest
    ├── cssTransform.js
    ├── fileTransform.js
    └── setup.js
├── package.json
├── public
    ├── index.html
    └── olm.wasm
├── renovate.json
├── src
    ├── components
    │   ├── _chat.scss
    │   ├── _dark_mode.scss
    │   ├── _loader.scss
    │   ├── _variables.scss
    │   ├── chatbox.jsx
    │   ├── chatbox.test.js
    │   ├── dock.jsx
    │   ├── emoji-selector.jsx
    │   ├── emoji_icon.svg
    │   ├── header.jsx
    │   ├── message.jsx
    │   ├── notice.jsx
    │   └── styles.scss
    ├── outputs
    │   ├── bookmarklet.js
    │   ├── bookmarklet.test.js
    │   ├── embeddable-chatbox.js
    │   └── embeddable-chatbox.test.js
    └── utils
    │   ├── decryptFile.js
    │   └── test-helpers.js
├── vendor
    └── cleanslate.css
├── webpack.config.js
└── yarn.lock


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "jest": true
 5 |   },
 6 |   "parser": "babel-eslint",
 7 |   "extends": "airbnb",
 8 |   "rules": {
 9 |     "no-underscore-dangle": 0,
10 |     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
11 |     "import/prefer-default-export": 1,
12 |     "import/no-extraneous-dependencies": 1,
13 |     "no-await-in-loop": 1
14 |   },
15 |   "plugins": ["react"],
16 |   "settings": {
17 |     "import/resolver": "webpack"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | .DS_Store


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "stable"
4 | cache:
5 |   directories:
6 |     - node_modules
7 | script:
8 |   - npm test
9 |   - npm run build


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Embeddable Matrix Chatbox
  2 | 
  3 | ![Demo video of chatbox](https://media.giphy.com/media/IhmtP0NoG22k6FRQDF/giphy.gif)
  4 | 
  5 | Live demo: https://nomadic-labs.github.io/safesupport-chatbox/
  6 | 
  7 | Built on:
  8 | - [Embeddable React Widget](https://github.com/seriousben/embeddable-react-widget)
  9 | - [Matrix JS SDK](https://github.com/matrix-org/matrix-js-sdk)
 10 | 
 11 | ## Usage
 12 | ```
 13 | <script src="https://unpkg.com/safesupport-chatbox" type="text/javascript"></script>
 14 | <script>
 15 |   var config = {
 16 |     matrixServerUrl: 'https://matrix-client.matrix.org',
 17 |     botId: '@your-help-bot:matrix.org',
 18 |     roomName: 'Support Chat',
 19 |     termsUrl: 'https://tosdr.org/',
 20 |     introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
 21 |     agreementMessage: 'Do you want to continue?',
 22 |     confirmationMessage: 'Waiting for a facilitator to join the chat...',
 23 |     exitMessage: 'The chat is closed. You may close this window.',
 24 |     chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
 25 |     anonymousDisplayName: 'Anonymous',
 26 |   }
 27 | 
 28 |   EmbeddableChatbox.mount(config);
 29 | </script>
 30 | ```
 31 | Options:
 32 | | Name | Description | Default
 33 | | ----------- | ----------- | --------- |
 34 | | `matrixServerUrl` (required) | URL for the Matrix homeserver you want to connect to | `https://matrix-client.matrix.org` |
 35 | | `botId` (required) | User ID for the bot account that handles invites | null |
 36 | | `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.` |
 37 | | `termsUrl` (optional) | URL for the Terms of Use for the chat service | `https://tosdr.org/` |
 38 | | `roomName` (optional)  | Name of the chatroom generated in Riot | 'Support Chat' |
 39 | | `agreementMessage` (optional)  | Text to show to request agreement to the Terms of Use | `Do you want to continue?` |
 40 | | `confirmationMessage` (optional) | Text to show to ask for agreement to continue | `Waiting for a facilitator to join the chat...` |
 41 | | `exitMessage` (optional) | Text to show if the user rejects the Terms of Use. | `The chat is closed. You may close this window.` |
 42 | | `anonymousDisplayName` (optional) | The display name for the chat user. | `Anonymous` |
 43 | | `chatUnavailableMessage` (optional) | Text to show if no-one is available to respond  | `The chat service is not available right now. Please try again later.` |
 44 | 
 45 | ## Feature list
 46 | 
 47 | - [x] Can be embedded on any website with Javascript enabled
 48 | - [x] WCAG AA compliant
 49 | - [x] Light and dark theme
 50 | - [x] Support seekers are anonymous
 51 | - [x] Uses Matrix's end to end encryption
 52 | - [x] If encryption fails, falls back to unencrypted chat
 53 | - [x] Status notifications are customizeable
 54 | - [x] Only initiates chat after user agrees to Terms of Service
 55 | - [x] Upon exiting chat, user data is wiped - account deleted, local datastore cleared
 56 | - [x] If enabled, the bot account can provide transcript of the conversation
 57 | - [x] Automatically parses incoming text messages for URLs and adds the <a> tags
 58 | - [x] Easy to customize colour scheme
 59 | - [x] Bookmarklet allows users to open the chat on any website
 60 | 
 61 | ## Bot account
 62 | 
 63 | This chatbox is meant to be used with a bot account that handles a number of functions:
 64 | * Sends out invitations to facilitators to join the support chat
 65 | * Revokes unused invitations when the first facilitator join the chat
 66 | * Keeps a transcript of the conversation
 67 | * Notifies user if there are not facilitators available
 68 | 
 69 | The bot account is invited to the chatroom when a support request is initiated.
 70 | 
 71 | You can find the code for the bot at [safesupport-bot](https://github.com/nomadic-labs/safesupport-bot).
 72 | 
 73 | ## Bookmarklet
 74 | 
 75 | The bookmarklet is a special link that runs a script on any website. The user saves the link by dragging it to their bookmarks bar. Then they can click on the bookmark on any page to run the script and load the chatbox.
 76 | 
 77 | You can try this out on the [live demo](https://nomadic-labs.github.io/safesupport-chatbox/).
 78 | 
 79 | ## Local development
 80 | 
 81 | Clone the project:
 82 | ```
 83 | git clone https://github.com/nomadic-labs/safesupport-chatbox.git
 84 | ```
 85 | Install the dependencies:
 86 | ```
 87 | cd safesupport-chatbox
 88 | yarn
 89 | ```
 90 | 
 91 | Start the development server:
 92 | ```
 93 | yarn start
 94 | ```
 95 | 
 96 | Open the demo page at http://localhost:9000/
 97 | 
 98 | Don't forget to also set up the bot account, otherwise you'll never get the chat invitations on Riot. Follow the instructions at [safesupport-bot](https://github.com/nomadic-labs/safesupport-bot).
 99 | 
100 | ## Production build
101 | ```
102 | yarn build
103 | ```
104 | 


--------------------------------------------------------------------------------
/__mocks__/emoji-picker-react.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { ReactElement } from "react";
3 | 
4 | const MockPicker = () => <div>Emoji Picker</div>
5 | 
6 | export default MockPicker;


--------------------------------------------------------------------------------
/__mocks__/matrix-js-sdk.js:
--------------------------------------------------------------------------------
 1 | export const mockRegisterRequest = jest
 2 |   .fn()
 3 |   .mockImplementation((params) => {
 4 |     if (!params.auth) {
 5 |       return Promise.reject({
 6 |         data: { session: "session_id_1234" }
 7 |       })
 8 |     } else {
 9 |       return Promise.resolve({
10 |         data: {
11 |           device_id: 'device_id_1234',
12 |           access_token: 'token_1234',
13 |           user_id: 'user_id_1234',
14 |           session: "session_id_1234"
15 |         }
16 |       })
17 |     }
18 |   })
19 | 
20 | export const mockLeave = jest.fn(() => {
21 |   return Promise.resolve('value');
22 | });
23 | export const mockInitCrypto = jest.fn()
24 | export const mockStartClient = jest.fn(() => {
25 |   return Promise.resolve('value');
26 | });
27 | export const mockOnce = jest.fn()
28 | export const mockStopClient = jest.fn(() => {
29 |   return Promise.resolve('value');
30 | });
31 | export const mockClearStores = jest.fn(() => {
32 |   return Promise.resolve('value');
33 | });
34 | export const mockGetRoom = jest.fn()
35 | export const mockDownloadKeys = jest.fn()
36 | export const mockSetDeviceVerified = jest.fn()
37 | export const mockIsCryptoEnabled = jest.fn()
38 | export const mockIsRoomEncrypted = jest.fn()
39 | export const mockCreateRoom = jest.fn().mockReturnValue({ room_id: 'room_id_1234' })
40 | export const mockSetPowerLevel = jest.fn()
41 | export const mockSendTextMessage = jest.fn(() => {
42 |   return Promise.resolve('value');
43 | });
44 | export const mockSetDeviceKnown = jest.fn()
45 | export const mockDeactivateAccount = jest.fn(() => {
46 |   return Promise.resolve('value');
47 | });
48 | export const mockOn = jest.fn()
49 | export const mockSetDisplayName = jest.fn()
50 | 
51 | export const mockClient = {
52 |   registerRequest: mockRegisterRequest,
53 |   initCrypto: mockInitCrypto,
54 |   startClient: mockStartClient,
55 |   on: mockOn,
56 |   once: mockOnce,
57 |   leave: mockLeave,
58 |   stopClient: mockStopClient,
59 |   clearStores: mockClearStores,
60 |   getRoom: mockGetRoom,
61 |   downloadKeys: mockDownloadKeys,
62 |   setDeviceVerified: mockSetDeviceVerified,
63 |   setDeviceKnown: mockSetDeviceKnown,
64 |   isCryptoEnabled: mockIsCryptoEnabled,
65 |   isRoomEncrypted: mockIsRoomEncrypted,
66 |   createRoom: mockCreateRoom,
67 |   setPowerLevel: mockSetPowerLevel,
68 |   sendTextMessage: mockSendTextMessage,
69 |   deactivateAccount: mockDeactivateAccount,
70 |   setDisplayName: mockSetDisplayName,
71 | }
72 | 
73 | export const WebStorageSessionStore = jest.fn()
74 | 
75 | export const createClient = jest.fn().mockReturnValue(mockClient)
76 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Embeddable Chatbox Demo</title>
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
 6 |   </head>
 7 |   <body style="height: 100vh;">
 8 |     <p style="font-family:sans-serif; padding: 3rem 5rem;">
 9 |       <a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a>
10 |     </p>
11 |     <p style="font-family:sans-serif; padding: 3rem 5rem;">Look down!</p>
12 | 
13 |     <script src="./chatbox.js"></script>
14 |     <script>
15 |       var config = {
16 |         matrixServerUrl: 'https://matrix.safesupport.chat',
17 |         botId: '@help-bot:safesupport.chat',
18 |         roomName: 'Support Chat',
19 |         termsUrl: 'https://tosdr.org/',
20 |         introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
21 |         agreementMessage: 'Do you want to continue?',
22 |         confirmationMessage: 'Waiting for a facilitator to join the chat...',
23 |         exitMessage: 'The chat is closed. You may close this window.',
24 |         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
25 |         anonymousDisplayName: 'Anonymous',
26 |     }
27 | 
28 |       EmbeddableChatbox.mount(config);
29 |     </script>
30 | 
31 |     <script>
32 |        var bookmarklet = "var s= document.createElement('script'); s.setAttribute('src', '"+window.location.href+"bookmarklet.js'); s.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(s);"
33 |        bookmarklet = '(function(){'+ bookmarklet +'})();'
34 |        document.querySelector('a#bookmarklet').setAttribute("href", "javascript:" + encodeURIComponent(bookmarklet));
35 |       </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/dist/olm.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamside-digital/safesupport-chatbox/569a8e76c2c75bce5623e985238bc322d619bb47/dist/olm.wasm


--------------------------------------------------------------------------------
/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   process() {
3 |     return 'module.exports = {};';
4 |   },
5 |   getCacheKey() {
6 |     return 'cssTransform';
7 |   },
8 | };
9 | 


--------------------------------------------------------------------------------
/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | 
3 | module.exports = {
4 |   process(src, filename) {
5 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/jest/setup.js:
--------------------------------------------------------------------------------
 1 | import Enzyme from 'enzyme';
 2 | import Adapter from 'enzyme-adapter-react-16';
 3 | 
 4 | Enzyme.configure({ adapter: new Adapter() });
 5 | 
 6 | Object.defineProperty(document, 'readyState', {
 7 |   value: 'complete',
 8 |   writable: true,
 9 |   enumerable: true,
10 |   configurable: true,
11 | });
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "safesupport-chatbox",
  3 |   "version": "1.1.5",
  4 |   "description": "A secure and private embeddable chatbox that connects to Riot",
  5 |   "main": "dist/chatbox.js",
  6 |   "scripts": {
  7 |     "build": "NODE_ENV=production webpack-cli --mode production",
  8 |     "start": "webpack-dev-server",
  9 |     "test": "jest",
 10 |     "deploy": "yarn build && gh-pages -d dist",
 11 |     "lint": "./node_modules/.bin/eslint ."
 12 |   },
 13 |   "babel": {
 14 |     "presets": [
 15 |       "airbnb",
 16 |       [
 17 |         "@babel/preset-env",
 18 |         {
 19 |           "targets": {
 20 |             "node": "12"
 21 |           }
 22 |         }
 23 |       ],
 24 |       "@babel/preset-react"
 25 |     ],
 26 |     "plugins": [
 27 |       "@babel/plugin-syntax-dynamic-import",
 28 |       "@babel/plugin-syntax-import-meta",
 29 |       "@babel/plugin-proposal-class-properties",
 30 |       "@babel/plugin-proposal-json-strings",
 31 |       [
 32 |         "@babel/plugin-proposal-decorators",
 33 |         {
 34 |           "legacy": true
 35 |         }
 36 |       ],
 37 |       "@babel/plugin-proposal-function-sent",
 38 |       "@babel/plugin-proposal-export-namespace-from",
 39 |       "@babel/plugin-proposal-numeric-separator",
 40 |       "@babel/plugin-proposal-throw-expressions",
 41 |       "@babel/plugin-transform-runtime"
 42 |     ]
 43 |   },
 44 |   "browserslist": "> 0.25%, not dead",
 45 |   "jest": {
 46 |     "coverageDirectory": "./coverage/",
 47 |     "collectCoverage": true,
 48 |     "collectCoverageFrom": [
 49 |       "<rootDir>/src/**/*.js?(x)"
 50 |     ],
 51 |     "coveragePathIgnorePatterns": [
 52 |       "/node_modules/",
 53 |       "/test-helpers/"
 54 |     ],
 55 |     "transform": {
 56 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 57 |       "^.+\\.(css|scss)$": "<rootDir>/jest/cssTransform.js",
 58 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/jest/fileTransform.js"
 59 |     },
 60 |     "setupFiles": [
 61 |       "<rootDir>/jest/setup.js"
 62 |     ]
 63 |   },
 64 |   "serve": {
 65 |     "content": [
 66 |       "./dist",
 67 |       "./public"
 68 |     ]
 69 |   },
 70 |   "author": "Nomadic Labs <sharon@nomadiclabs.ca",
 71 |   "license": "MIT",
 72 |   "devDependencies": {
 73 |     "@babel/core": "7.7.7",
 74 |     "@babel/plugin-proposal-class-properties": "7.7.4",
 75 |     "@babel/plugin-proposal-decorators": "7.7.4",
 76 |     "@babel/plugin-proposal-export-namespace-from": "7.7.4",
 77 |     "@babel/plugin-proposal-function-sent": "7.7.4",
 78 |     "@babel/plugin-proposal-json-strings": "7.7.4",
 79 |     "@babel/plugin-proposal-numeric-separator": "7.7.4",
 80 |     "@babel/plugin-proposal-throw-expressions": "7.7.4",
 81 |     "@babel/plugin-syntax-dynamic-import": "7.7.4",
 82 |     "@babel/plugin-syntax-import-meta": "7.7.4",
 83 |     "@babel/plugin-transform-runtime": "^7.9.0",
 84 |     "@babel/preset-env": "^7.9.0",
 85 |     "@babel/preset-react": "^7.9.4",
 86 |     "autoprefixer": "^9.7.5",
 87 |     "babel-core": "7.0.0-bridge.0",
 88 |     "babel-eslint": "10.0.3",
 89 |     "babel-jest": "24.9.0",
 90 |     "babel-loader": "8.0.6",
 91 |     "babel-preset-airbnb": "4.4.0",
 92 |     "clean-webpack-plugin": "3.0.0",
 93 |     "copy-webpack-plugin": "5.1.1",
 94 |     "css-loader": "3.4.1",
 95 |     "cssimportant-loader": "0.4.0",
 96 |     "enzyme": "^3.11.0",
 97 |     "enzyme-adapter-react-16": "^1.15.2",
 98 |     "enzyme-to-json": "3.4.3",
 99 |     "enzyme-wait": "^1.0.9",
100 |     "eslint": "6.8.0",
101 |     "eslint-config-airbnb": "18.0.1",
102 |     "eslint-import-resolver-webpack": "0.12.0",
103 |     "eslint-loader": "3.0.3",
104 |     "eslint-plugin-import": "2.19.1",
105 |     "eslint-plugin-jsx-a11y": "6.2.3",
106 |     "eslint-plugin-react": "7.17.0",
107 |     "gh-pages": "^2.2.0",
108 |     "jest": "24.9.0",
109 |     "jest-cli": "24.9.0",
110 |     "mini-css-extract-plugin": "0.9.0",
111 |     "node-sass": "^4.13.1",
112 |     "postcss-increase-specificity": "0.6.0",
113 |     "postcss-loader": "3.0.0",
114 |     "sass-loader": "8.0.0",
115 |     "style-loader": "1.1.2",
116 |     "wait-for-expect": "^3.0.2",
117 |     "webpack": "4.41.5",
118 |     "webpack-cli": "3.3.10",
119 |     "webpack-dev-server": "3.10.1",
120 |     "webpack-obfuscator": "0.22.0",
121 |     "webpack-serve": "3.2.0"
122 |   },
123 |   "dependencies": {
124 |     "browser-encrypt-attachment": "^0.3.0",
125 |     "emoji-picker-react": "^3.1.3",
126 |     "isomorphic-fetch": "^2.2.1",
127 |     "linkifyjs": "^2.1.9",
128 |     "matrix-js-sdk": "^4.0.0",
129 |     "node-localstorage": "^2.1.5",
130 |     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
131 |     "prop-types": "^15.6.2",
132 |     "react": "^16.8.6",
133 |     "react-dom": "^16.8.6",
134 |     "react-onclickoutside": "^6.9.0",
135 |     "react-test-renderer": "^16.13.0",
136 |     "react-transition-group": "^4.0.0",
137 |     "uuidv4": "^6.0.2"
138 |   }
139 | }
140 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Embeddable Chatbox Demo</title>
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
 6 |   </head>
 7 |   <body style="height: 100vh;">
 8 |     <p style="font-family:sans-serif; padding: 3rem 5rem;">
 9 |       <a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a>
10 |     </p>
11 |     <p style="font-family:sans-serif; padding: 3rem 5rem;">Look down!</p>
12 | 
13 |     <script src="./chatbox.js"></script>
14 |     <script>
15 |       var config = {
16 |         matrixServerUrl: 'https://matrix.safesupport.chat',
17 |         botId: '@help-bot:safesupport.chat',
18 |         roomName: 'Support Chat',
19 |         termsUrl: 'https://tosdr.org/',
20 |         introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
21 |         agreementMessage: 'Do you want to continue?',
22 |         confirmationMessage: 'Waiting for a facilitator to join the chat...',
23 |         exitMessage: 'The chat is closed. You may close this window.',
24 |         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
25 |         anonymousDisplayName: 'Anonymous',
26 |     }
27 | 
28 |       EmbeddableChatbox.mount(config);
29 |     </script>
30 | 
31 |     <script>
32 |        var bookmarklet = "var s= document.createElement('script'); s.setAttribute('src', '"+window.location.href+"bookmarklet.js'); s.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(s);"
33 |        bookmarklet = '(function(){'+ bookmarklet +'})();'
34 |        document.querySelector('a#bookmarklet').setAttribute("href", "javascript:" + encodeURIComponent(bookmarklet));
35 |       </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/public/olm.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreamside-digital/safesupport-chatbox/569a8e76c2c75bce5623e985238bc322d619bb47/public/olm.wasm


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "config:base"
 4 |   ],
 5 |   "automerge": true,
 6 |   "major": {
 7 |     "automerge": false
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/_chat.scss:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | @keyframes slideInUp {
  6 |   from {
  7 |     transform: translate3d(0, 100%, 0);
  8 |     display: inherit;
  9 |     visibility: visible;
 10 |   }
 11 | 
 12 |   to {
 13 |     transform: translate3d(0, 0, 0);
 14 |   }
 15 | }
 16 | 
 17 | @keyframes slideOutDown {
 18 |   from {
 19 |     transform: translate3d(0, 0, 0);
 20 |   }
 21 | 
 22 |   to {
 23 |     display: none;
 24 |     visibility: hidden;
 25 |     transform: translate3d(0, 100%, 0);
 26 |   }
 27 | }
 28 | 
 29 | .docked-widget {
 30 |   position: fixed;
 31 |   bottom: 10px;
 32 |   right: 10px;
 33 |   z-index: 9999;
 34 |   width: 400px;
 35 |   max-width: 100vw;
 36 |   font-size: $base-font-size;
 37 | }
 38 | 
 39 | .dock {
 40 |   cursor: pointer;
 41 |   display: flex;
 42 |   align-items: center;
 43 |   justify-content: space-between;
 44 |   width: 400px;
 45 |   max-width: calc(100vw - 10px);
 46 |   color: $white;
 47 |   font-family: $theme-font;
 48 |   font-size: 1em;
 49 |   border: none;
 50 |   color: $white;
 51 |   font-size: 1em;
 52 |   line-height: 1;
 53 |   background-color: transparent;
 54 |   padding: 5px;
 55 | 
 56 |   #open-chatbox-label {
 57 |     background: $theme-color;
 58 |     padding: 0.75em;
 59 |     flex: 1 1 auto;
 60 |     text-align: left;
 61 |     margin-right: 0.25em;
 62 |     border: 1px solid $white;
 63 |     border-radius: 0.625em;
 64 |     transition: all 0.2s ease-in-out;
 65 |   }
 66 | 
 67 |   .label-icon {
 68 |     background: $theme-color;
 69 |     height: 2.625em;
 70 |     width: 2.625em;
 71 |     border-radius: 2.625em;
 72 |     display: flex;
 73 |     justify-content: center;
 74 |     align-items: center;
 75 |     border: 1px solid $white;
 76 |     transition: all 0.2s ease-in-out;
 77 |   }
 78 | 
 79 |   &:hover {
 80 |     #open-chatbox-label, .label-icon {
 81 |       border: 1px solid $dark-color;
 82 |       box-shadow: inset 0px 0px 0px 1px $dark-color;
 83 |     }
 84 |   }
 85 | 
 86 |   &:focus {
 87 |     outline: none;
 88 | 
 89 |     #open-chatbox-label, .label-icon {
 90 |       border: 1px solid $dark-color;
 91 |       box-shadow: inset 0px 0px 0px 1px $dark-color;
 92 |       background-color: $theme-highlight-color;
 93 |     }
 94 |   }
 95 | }
 96 | 
 97 | 
 98 | .widget {
 99 |   width: 400px;
100 |   max-width: calc(100vw - 10px);
101 |   border-bottom: none;
102 |   margin: 0;
103 |   animation-duration: 0.2s;
104 |   animation-fill-mode: forwards;
105 | 
106 |   &-entering {
107 |     animation-name: slideInUp;
108 |   }
109 |   &-entered {
110 |     display: inherit;
111 |     visibility: visible;
112 |   }
113 |   &-exiting {
114 |     animation-name: slideOutDown;
115 |   }
116 |   &-exited {
117 |     display: none;
118 |     visibility: hidden;
119 |   }
120 | 
121 |   &-header {
122 |     display: flex;
123 |     align-items: center;
124 |     margin-bottom: 0.2em;
125 |     justify-content: flex-end;
126 |     flex: 0 0 auto;
127 | 
128 |     &-title {
129 |       display: flex;
130 |       flex-grow: 1;
131 |     }
132 | 
133 |     &-minimize {
134 |       cursor: pointer;
135 |       display: flex;
136 |       align-items: center;
137 |       justify-content: flex-start;
138 |       border: 1px solid $dark-color !important;
139 |       background: $white;
140 |       color: $dark-color;
141 |       flex: 1 1 auto;
142 |       font-family: $theme-font;
143 |       font-size: 1em;
144 |       padding: 0.5em;
145 |       border-radius: 0.625em;
146 |       transition: all 0.2s ease-in-out;
147 | 
148 |       &:hover {
149 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
150 |       }
151 | 
152 |       &:focus {
153 |         outline: none;
154 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
155 |         background-color: $theme-light-color;
156 |       }
157 |     }
158 | 
159 |     &-close {
160 |       font-size: inherit;
161 |       cursor: pointer;
162 |       display: flex;
163 |       align-items: center;
164 |       justify-content: center;
165 |       border: 1px solid $dark-color !important;
166 |       background: $white;
167 |       border-radius: 2.625em;
168 |       padding: 0.5em;
169 |       margin-left: 0.2em;
170 |       color: $dark-color;
171 |       transition: all 0.2s ease-in-out;
172 |       width: 2.625em;
173 | 
174 |       &:hover {
175 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
176 |       }
177 | 
178 |       &:focus {
179 |         outline: none;
180 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
181 |         background-color: $theme-light-color;
182 |       }
183 |     }
184 |   }
185 |   &-body {
186 |     background: white;
187 |     padding: 10px;
188 |     height: 150px;
189 |   }
190 |   &-footer {
191 |     background: green;
192 |     line-height: 30px;
193 |     padding-left: 10px;
194 |   }
195 | 
196 |   button {
197 |     transition: all 0.2s ease-in-out;
198 | 
199 |     &:hover {
200 |       box-shadow: inset 0px 0px 0px 1px $dark-color;
201 |     }
202 | 
203 |     &:focus {
204 |       background-color: $theme-light-color;
205 |       outline: none;
206 |     }
207 |   }
208 | }
209 | 
210 | .btn-icon {
211 |   font-size: 1.5em;
212 |   line-height: 1;
213 |   transform: rotateX(0deg);
214 |   transition: all 0.5s linear;
215 |   display: flex;
216 |   align-items: center;
217 |   justify-content: center;
218 | }
219 | 
220 | .arrow {
221 |   margin-right: 0.5em;
222 |   transform: translateY(0.15em);
223 | 
224 |   &.opened {
225 |     color: $dark-color;
226 |     transform: rotateX(180deg) translateY(0.15em);
227 |   }
228 | 
229 | }
230 | 
231 | #safesupport-chatbox {
232 |   font-family: $theme-font;
233 |   display: flex;
234 |   flex-direction: column;
235 |   height: calc(40vh + 180px);
236 |   max-height: 100vh;
237 |   padding: 5px;
238 | 
239 |   a {
240 |     color: inherit;
241 |     transition: all 0.2s ease-in-out;
242 | 
243 |     &:hover, &:focus {
244 |       color: $theme-color;
245 |     }
246 |   }
247 | 
248 |   .message-window {
249 |     background-color: $white;
250 |     border: 1px solid $dark-color;
251 |     flex: 1 1 auto;
252 |     padding: 0.5em;
253 |     overflow: scroll;
254 |     display: flex;
255 |     flex-direction: column-reverse;
256 |     justify-content: space-between;
257 |     margin-bottom: 0.2em;
258 |     border-radius: 0.625em;
259 |   }
260 | 
261 |   .notices {
262 |     color: $gray-color;
263 |     font-size: 0.9em;
264 | 
265 |     > div {
266 |       margin-top: 0.5em;
267 |       margin-bottom: 0.5em;
268 |     }
269 |   }
270 | 
271 |   .message {
272 |     margin-top: 0.5em;
273 |     margin-bottom: 0.5em;
274 | 
275 |     .text {
276 |       width: fit-content;
277 |       line-height: 1.2;
278 |     }
279 | 
280 |     .buttons {
281 |       display: flex;
282 |       align-items: center;
283 | 
284 |       button {
285 |         background-color: transparent;
286 |         padding: 0.25em 0.5em;
287 |         font-size: 0.9em;
288 |         color: inherit;
289 |         font-weight: bold;
290 |         font-family: $theme-font;
291 |         cursor: pointer;
292 |         display: flex;
293 |         flex: 0 1 auto;
294 |         border: 1px solid $theme-color;
295 |         transition: all 0.2s ease-in-out;
296 |         border-radius: 0.625em;
297 |         margin-left: 0.25em;
298 | 
299 |         &:hover {
300 |           border: 1px solid $dark-color;
301 |           box-shadow: inset 0px 0px 0px 1px $dark-color;
302 |         }
303 | 
304 |         &:focus {
305 |           outline: none;
306 |           color: $white;
307 |           border: 1px solid $dark-color;
308 |           box-shadow: inset 0px 0px 0px 1px $dark-color;
309 |           background-color: $theme-highlight-color;
310 |         }
311 |       }
312 |     }
313 | 
314 | 
315 |     &.from-bot {
316 |       color: $gray-color;
317 |       font-size: 0.9em;
318 |     }
319 | 
320 |     &.from-me {
321 |       display: flex;
322 |       justify-content: flex-end;
323 | 
324 |       &.placeholder {
325 |         opacity: 0.5;
326 |       }
327 | 
328 |       .text {
329 |         border: 1px solid $theme-color;
330 |         background-color: $theme-color;
331 |         color: $white;
332 |         border-radius: 1em 1em 0 1em;
333 |         margin-left: 10%;
334 |         padding: 0.3em 0.6em;
335 |       }
336 | 
337 |       a {
338 |         color: $white;
339 | 
340 |         &:hover, &:focus {
341 |           color: $light-purple;
342 |         }
343 |       }
344 |     }
345 | 
346 |     &.from-support {
347 |       display: flex;
348 |       justify-content: flex-start;
349 | 
350 |       .text {
351 |         border: 1px solid $light-color;
352 |         background-color: $light-color;
353 |         color: $dark-color;
354 |         border-radius: 1em 1em 1em 0;
355 |         margin-right: 10%;
356 |         padding: 0.5em 0.75em;
357 |       }
358 | 
359 |       a {
360 |         color: $dark-color;
361 | 
362 |         &:hover, &:focus {
363 |           color: $medium-purple;
364 |         }
365 |       }
366 |     }
367 |   }
368 | 
369 |   .input-window {
370 |     flex: 0 0 auto;
371 | 
372 |     form {
373 |       display: flex;
374 |       align-items: center;
375 |       margin-bottom: 0;
376 |     }
377 | 
378 |     input[type="submit"] {
379 |       background-color: $theme-color;
380 |       height: 100%;
381 |       padding: 0.5em 1em;
382 |       font-size: 1em;
383 |       color: $white;
384 |       font-weight: bold;
385 |       font-family: $theme-font;
386 |       cursor: pointer;
387 |       display: flex;
388 |       flex: 0 1 auto;
389 |       border: 1px solid $theme-color;
390 |       transition: all 0.2s ease-in-out;
391 |       border-radius: 0.625em;
392 | 
393 |       &:hover {
394 |         border: 1px solid $dark-color;
395 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
396 |       }
397 | 
398 |       &:focus {
399 |         outline: none;
400 |         border: 1px solid $dark-color;
401 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
402 |         background-color: $theme-highlight-color;
403 |       }
404 |     }
405 | 
406 |     .message-input-container {
407 |       display: flex;
408 |       flex: 1 1 auto;
409 |       position: relative;
410 | 
411 |       input[type="text"] {
412 |         font-size: 1em;
413 |         padding: 0.5em;
414 |         padding-right: 32px;
415 |         border: none;
416 |         display: flex;
417 |         flex: 1 1 auto;
418 |         background: $white;
419 |         color: $dark-color;
420 |         font-family: $theme-font;
421 |         margin-right: 0.2em;
422 |         transition: all 0.2s ease-in-out;
423 |         border-radius: 0.625em;
424 |         border: 1px solid $dark-color;
425 | 
426 |         &:hover {
427 |           box-shadow: inset 0px 0px 0px 1px $dark-color;
428 |         }
429 | 
430 |         &:focus {
431 |           outline: none;
432 |           box-shadow: inset 0px 0px 0px 1px $dark-color;
433 |           background: $theme-light-color;
434 |         }
435 |       }
436 | 
437 |       .emoji-button-container {
438 |         position: absolute;
439 |         right: 6px;
440 |         top: 0;
441 |         bottom: 0;
442 |         height: 100%;
443 |         display: flex;
444 |         align-items: center;
445 |         justify-content: flex-start;
446 | 
447 | 
448 |         button {
449 |           transition: all 0.2s ease-in-out;
450 | 
451 |           &:hover {
452 |             box-shadow: none;
453 |           }
454 | 
455 |           &:focus {
456 |             outline: none;
457 |           }
458 | 
459 |           &#emoji-button {
460 |             background: transparent;
461 |             border: none;
462 |             padding: 0;
463 |             margin-right: 3px;
464 |             transition: all 0.2s ease-in-out;
465 | 
466 |             &:hover {
467 |               svg path#icon {
468 |                 fill: $theme-color;
469 |               }
470 |             }
471 | 
472 |             &:focus {
473 |               svg path#icon {
474 |                 fill: $theme-highlight-color;
475 |               }
476 |             }
477 |           }
478 |         }
479 |       }
480 | 
481 |       .emoji-picker {
482 |         animation-duration: 0.2s;
483 |         animation-fill-mode: forwards;
484 |         position: absolute;
485 |         bottom: 32px;
486 |         right: -4px;
487 | 
488 |         &-entering {
489 |           animation-name: slideInUp;
490 |           opacity: 0.5;
491 |         }
492 |         &-entered {
493 |           display: inherit;
494 |           visibility: visible;
495 |           opacity: 1;
496 |         }
497 |         &-exiting {
498 |           animation-name: slideOutDown;
499 |           opacity: 0.5;
500 |         }
501 |         &-exited {
502 |           display: none;
503 |           visibility: hidden;
504 |           opacity: 0;
505 |         }
506 |       }
507 |     }
508 |   }
509 | 
510 |   .highlight-text {
511 |     color: $theme-color;
512 |   }
513 | 
514 |   .pos-relative {
515 |     position: relative;
516 |   }
517 | }
518 | 
519 | .hidden {
520 |   display: none;
521 | }
522 | 
523 | @media screen and (max-width: 420px){
524 |   .docked-widget {
525 |     right: 0;
526 |     left: 0;
527 |     bottom: 0;
528 |   }
529 | 
530 |   .dock, .widget {
531 |     width: 100vw;
532 |     max-width: 100vw;
533 |     padding: 5px;
534 |   }
535 | 
536 |   #safesupport-chatbox {
537 |     height: calc(180px + 60vh);
538 |   }
539 | }
540 | 
541 | @media screen and (max-width: 360px){
542 |   #safesupport-chatbox .input-window .message-input-container .emoji-picker {
543 |     position: fixed;
544 |     left: 5px;
545 |     right: 5px;
546 |     bottom: 42px;
547 |   }
548 | }
549 | 


--------------------------------------------------------------------------------
/src/components/_dark_mode.scss:
--------------------------------------------------------------------------------
  1 | @media (prefers-color-scheme: dark) {
  2 | 
  3 |   .loader {
  4 |     color: $dark-theme-color;
  5 |   }
  6 | 
  7 |   .dock {
  8 |     #open-chatbox-label, .label-icon {
  9 |       border-color: $white;
 10 |     }
 11 | 
 12 |     &:hover {
 13 |       #open-chatbox-label, .label-icon {
 14 |         border: 1px solid $dark-color;
 15 |         box-shadow: inset 0px 0px 0px 1px $dark-color;
 16 |       }
 17 |     }
 18 |   }
 19 | 
 20 |   .widget-header-minimize, .widget-header-close {
 21 |     background: $dark-background-color;
 22 |     color: $light-text-color;
 23 |     border: 1px solid $white;
 24 |     transition: all 0.2s ease-in-out;
 25 | 
 26 |     &:hover {
 27 |       border-color: $theme-color;
 28 |       box-shadow: inset 0px 0px 0px 1px $theme-color;
 29 |     }
 30 | 
 31 |     &:focus {
 32 |       border-color: $theme-color;
 33 |       background: $dark-theme-highlight-color;
 34 |       box-shadow: inset 0px 0px 0px 1px $theme-color;
 35 |       outline: none;
 36 |     }
 37 |   }
 38 | 
 39 |   .widget {
 40 |     button {
 41 |       transition: all 0.2s ease-in-out;
 42 | 
 43 |       &:hover {
 44 |         border-color: $theme-color;
 45 |         box-shadow: inset 0px 0px 0px 1px $theme-color;
 46 |       }
 47 | 
 48 |       &:focus {
 49 |         background: $dark-theme-highlight-color;
 50 |         box-shadow: inset 0px 0px 0px 1px $theme-color;
 51 |         outline: none;
 52 |       }
 53 |     }
 54 |   }
 55 |   #safesupport-chatbox {
 56 |     .btn-icon {
 57 |       color: $light-text-color;
 58 |     }
 59 |     .message-window {
 60 |       background-color: $dark-background-color;
 61 |       border: 1px solid $white;
 62 |     }
 63 | 
 64 |     .notices {
 65 |       color: transparentize($light-text-color, 0.3);
 66 |     }
 67 | 
 68 |     .message {
 69 |       &.from-bot {
 70 |         color: transparentize($light-text-color, 0.3);
 71 |       }
 72 | 
 73 |       &.from-me {
 74 |         .text {
 75 |           background-color: $theme-color;
 76 |           color: $light-text-color;
 77 |           border: 1px solid $theme-color;
 78 |         }
 79 |       }
 80 | 
 81 |       &.from-support {
 82 |         .text {
 83 |           background-color: $dark-theme-color;
 84 |           color: $light-text-color;
 85 |           border: 1px solid $dark-theme-color;
 86 |         }
 87 | 
 88 |         a {
 89 |           color: $light-text-color;
 90 | 
 91 |           &:hover, &:focus {
 92 |             color: $light-purple;
 93 |           }
 94 |         }
 95 |       }
 96 | 
 97 |       .buttons {
 98 |         button {
 99 |           background-color: transparent;
100 |           border: 1px solid $theme-color;
101 | 
102 |           &:hover {
103 |             border: 1px solid $light-purple;
104 |             box-shadow: inset 0px 0px 0px 1px $light-purple;
105 |           }
106 | 
107 |           &:focus {
108 |             outline: none;
109 |             color: $white;
110 |             border: 1px solid $light-purple;
111 |             box-shadow: inset 0px 0px 0px 1px $light-purple;
112 |             background-color: $dark-theme-highlight-color;
113 |           }
114 |         }
115 |       }
116 |     }
117 | 
118 |     .input-window {
119 |       .message-input-container {
120 |         input[type="text"] {
121 |           background-color: $dark-background-color;
122 |           color: $light-text-color;
123 |           border: 1px solid $white;
124 | 
125 |           &:hover {
126 |             border: 1px solid $theme-color;
127 |             box-shadow: inset 0px 0px 0px 1px $theme-color;
128 |           }
129 | 
130 |           &:focus {
131 |             outline: none;
132 |             border: 1px solid $theme-color;
133 |             box-shadow: inset 0px 0px 0px 1px $theme-color;
134 |             background: $dark-theme-highlight-color;
135 |           }
136 |         }
137 | 
138 |         ::placeholder {
139 |           color: transparentize($light-text-color, 0.3);
140 |         }
141 | 
142 |         .emoji-button-container {
143 |           button {
144 |             &#emoji-button {
145 | 
146 |               &:hover {
147 |                 svg path#icon {
148 |                   fill: $theme-color;
149 |                 }
150 |               }
151 | 
152 |               &:focus {
153 |                 svg path#icon {
154 |                   fill: $light-purple;
155 |                 }
156 |               }
157 |             }
158 |           }
159 |         }
160 | 
161 |       }
162 | 
163 |       input[type="submit"] {
164 |         background-color: $dark-theme-color;
165 |         color: $light-text-color;
166 |         border: 1px solid $white;
167 | 
168 |         &:hover {
169 |           border: 1px solid $theme-color;
170 |           box-shadow: inset 0px 0px 0px 1px $theme-color;
171 |         }
172 | 
173 |         &:focus {
174 |           outline: none;
175 |           border: 1px solid $theme-color;
176 |           box-shadow: inset 0px 0px 0px 1px $theme-color;
177 |           background-color: $dark-theme-highlight-color;
178 |         }
179 |       }
180 |     }
181 | 
182 |     .highlight-text {
183 |       color: $light-text-color;
184 |     }
185 |   }
186 | }
187 | 


--------------------------------------------------------------------------------
/src/components/_loader.scss:
--------------------------------------------------------------------------------
 1 | .loader,
 2 | .loader:before,
 3 | .loader:after {
 4 |   border-radius: 50%;
 5 |   width: 2.5em;
 6 |   height: 2.5em;
 7 |   -webkit-animation-fill-mode: both;
 8 |   animation-fill-mode: both;
 9 |   -webkit-animation: load7 1.8s infinite ease-in-out;
10 |   animation: load7 1.8s infinite ease-in-out;
11 | }
12 | .loader {
13 |   color: $theme-color;
14 |   font-size: 10px;
15 |   margin: 1rem auto;
16 |   margin-bottom: 2rem;
17 |   position: relative;
18 |   text-indent: -9999em;
19 |   -webkit-transform: translateZ(0);
20 |   -ms-transform: translateZ(0);
21 |   transform: translateZ(0);
22 |   -webkit-animation-delay: -0.16s;
23 |   animation-delay: -0.16s;
24 | }
25 | .loader:before,
26 | .loader:after {
27 |   content: '';
28 |   position: absolute;
29 |   top: 0;
30 | }
31 | .loader:before {
32 |   left: -3.5em;
33 |   -webkit-animation-delay: -0.32s;
34 |   animation-delay: -0.32s;
35 | }
36 | .loader:after {
37 |   left: 3.5em;
38 | }
39 | @keyframes load7 {
40 |   0%,
41 |   80%,
42 |   100% {
43 |     box-shadow: 0 2.5em 0 -1.3em;
44 |   }
45 |   40% {
46 |     box-shadow: 0 2.5em 0 0;
47 |   }
48 | }


--------------------------------------------------------------------------------
/src/components/_variables.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Assistant&display=swap');
 2 | 
 3 | $purple: #785BEC;
 4 | $light-purple: #ebe6fc;
 5 | $medium-purple: #4D3A97;
 6 | $charcoal: #828282;
 7 | $light-color: #F2F2F2;
 8 | $gray-color: $charcoal;
 9 | $dark-color: #04090F;
10 | $yellow: #FFFACD;
11 | $dark-blue: #2660A4;
12 | $white: #ffffff;
13 | $highlight-color: $yellow;
14 | $theme-color: $purple;
15 | $theme-light-color: $light-purple;
16 | $theme-font: 'Assistant', 'Helvetica', sans-serif;
17 | $theme-highlight-color: $medium-purple;
18 | 
19 | 
20 | /* Dark mode colors */
21 | 
22 | $dark-background-color: #0F1116;
23 | $light-background-color: #ffffff;
24 | $light-text-color: #ffffff;
25 | $dark-text-color: #0F1116;
26 | $dark-theme-color: #4F4F4F;
27 | $dark-theme-highlight-color: #211943;
28 | 
29 | 
30 | $base-font-size: 16px;


--------------------------------------------------------------------------------
/src/components/chatbox.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react"
  2 | import PropTypes from "prop-types"
  3 | import { Transition } from 'react-transition-group';
  4 | import * as util from "util";
  5 | import * as os from "os";
  6 | import * as path from "path";
  7 | import * as fs from "fs";
  8 | import { LocalStorage } from "node-localstorage";
  9 | import * as olm from "olm/olm_legacy.js"
 10 | global.Olm = olm
 11 | 
 12 | import * as matrix from "matrix-js-sdk";
 13 | import {uuid} from "uuidv4"
 14 | 
 15 | import Message from "./message";
 16 | import Dock from "./dock";
 17 | import Header from "./header";
 18 | import EmojiSelector from './emoji-selector';
 19 | 
 20 | import './styles.scss';
 21 | 
 22 | 
 23 | const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
 24 | const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption."
 25 | const UNENCRYPTION_NOTICE = "Messages in this chat are not encrypted."
 26 | const RESTARTING_UNENCRYPTED_CHAT_MESSAGE = "Restarting chat without encryption."
 27 | const WAIT_TIME_MS = 120000 // 2 minutes
 28 | const CHAT_IS_OFFLINE_NOTICE = "Chat is offline"
 29 | 
 30 | const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space/"
 31 | const DEFAULT_BOT_ID = "@help-bot:rhok.space"
 32 | const DEFAULT_TERMS_URL = "https://tosdr.org/"
 33 | const DEFAULT_ROOM_NAME = "Support Chat"
 34 | const DEFAULT_INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service."
 35 | const DEFAULT_AGREEMENT_MESSAGE = "Do you want to continue?"
 36 | const DEFAULT_CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat..."
 37 | const DEFAULT_EXIT_MESSAGE = "The chat is closed. You may close this window."
 38 | const DEFAULT_ANONYMOUS_DISPLAY_NAME="Anonymous"
 39 | const DEFAULT_CHAT_UNAVAILABLE_MESSAGE = "The chat service is not available right now. Please try again later."
 40 | const DEFAULT_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests."
 41 | 
 42 | 
 43 | class ChatBox extends React.Component {
 44 |   constructor(props) {
 45 |     super(props)
 46 |     this.initialState = {
 47 |       opened: false,
 48 |       showDock: true,
 49 |       client: null,
 50 |       ready: true,
 51 |       accessToken: null,
 52 |       userId: null,
 53 |       password: null,
 54 |       localStorage: null,
 55 |       messages: [],
 56 |       inputValue: "",
 57 |       errors: [],
 58 |       roomId: null,
 59 |       typingStatus: null,
 60 |       awaitingAgreement: true,
 61 |       emojiSelectorOpen: false,
 62 |       facilitatorInvited: false,
 63 |       isMobile: true,
 64 |       isSlowConnection: true,
 65 |       decryptionErrors: {},
 66 |       messagesInFlight: []
 67 |     }
 68 |     this.state = this.initialState
 69 |     this.chatboxInput = React.createRef();
 70 |     this.messageWindow = React.createRef();
 71 |     this.termsUrl = React.createRef();
 72 |   }
 73 | 
 74 |   detectMobile = () => {
 75 |     let isMobile = false;
 76 | 
 77 |     if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 78 |       isMobile = true;
 79 |     }
 80 | 
 81 |     if (screen.width < 767) {
 82 |       isMobile = true;
 83 |     }
 84 | 
 85 |     this.setState({ isMobile })
 86 |   }
 87 | 
 88 |   detectSlowConnection = () => {
 89 |     let isSlowConnection = false;
 90 | 
 91 |     const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 92 | 
 93 |     if (typeof connection !== 'undefined' || connection === null) {
 94 |       const connectionType = connection.effectiveType;
 95 |       const slowConnections = ['slow-2g', '2g']
 96 | 
 97 |       isSlowConnection = slowConnections.includes(connectionType)
 98 |     }
 99 | 
100 |     this.setState({ isSlowConnection })
101 |   }
102 | 
103 |   handleToggleOpen = () => {
104 |     this.setState((prev) => {
105 |       let { showDock } = prev;
106 |       if (!prev.opened) {
107 |         showDock = false;
108 |       }
109 |       return {
110 |         showDock,
111 |         opened: !prev.opened,
112 |       };
113 |     });
114 |   }
115 | 
116 |   toggleEmojiSelector = (e) => {
117 |     e.preventDefault();
118 |     this.setState({ emojiSelectorOpen: !this.state.emojiSelectorOpen })
119 |   }
120 | 
121 |   closeEmojiSelector = () => {
122 |     this.setState({ emojiSelectorOpen: false })
123 |   }
124 | 
125 |   handleWidgetExit = () => {
126 |     this.setState({
127 |       showDock: true,
128 |     });
129 |   }
130 | 
131 |   handleWidgetEnter = () => {
132 |     if (this.state.awaitingAgreement) {
133 |       this.termsUrl.current.focus()
134 |     } else {
135 |       this.chatboxInput.current.focus()
136 |     }
137 |   }
138 | 
139 |   handleExitChat = () => {
140 |     if (this.state.client) {
141 |       this.exitChat()
142 |     } else {
143 |       this.setState(this.initialState)
144 |     }
145 |   }
146 | 
147 |   exitChat = async () => {
148 |     if (!this.state.client) return null;
149 | 
150 |     await this.state.client.leave(this.state.roomId)
151 | 
152 |     const auth = {
153 |       type: 'm.login.password',
154 |       user: this.state.userId,
155 |       identifier: {
156 |           type: "m.id.user",
157 |           user: this.state.userId,
158 |       },
159 |       password: this.state.password,
160 |     };
161 | 
162 |     await this.state.client.deactivateAccount(auth, true)
163 |     await this.state.client.stopClient()
164 |     await this.state.client.clearStores()
165 | 
166 |     this.state.localStorage.clear()
167 |     this.setState(this.initialState)
168 |   }
169 | 
170 |   createLocalStorage = async (deviceId, sessionId) => {
171 |     let localStorage = global.localStorage;
172 |     if (typeof localStorage === "undefined" || localStorage === null) {
173 |       const deviceDesc = `matrix-chat-${deviceId}-${sessionId}`
174 |       const localStoragePath = path.resolve(path.join(os.homedir(), ".local-storage", deviceDesc))
175 |       localStorage = new LocalStorage(localStoragePath);
176 |     }
177 |     return localStorage;
178 |   }
179 | 
180 |   createClientWithAccount = async () => {
181 |     const tmpClient = matrix.createClient(this.props.matrixServerUrl)
182 | 
183 |     try {
184 |       await tmpClient.registerRequest({})
185 |     } catch(err) {
186 |       const username = uuid()
187 |       const password = uuid()
188 |       const sessionId = err.data.session
189 | 
190 |       const account = await tmpClient.registerRequest({
191 |         auth: {session: sessionId, type: "m.login.dummy"},
192 |         inhibit_login: false,
193 |         password: password,
194 |         username: username,
195 |         x_show_msisdn: true,
196 |       })
197 | 
198 |       const localStorage = await this.createLocalStorage(account.device_id, sessionId)
199 | 
200 |       this.setState({
201 |         accessToken: account.access_token,
202 |         userId: account.user_id,
203 |         username: username,
204 |         password: password,
205 |         localStorage: localStorage,
206 |         sessionId: sessionId,
207 |         deviceId: account.device_id,
208 |       })
209 | 
210 |       let opts = {
211 |         baseUrl: this.props.matrixServerUrl,
212 |         accessToken: account.access_token,
213 |         userId: account.user_id,
214 |         deviceId: account.device_id,
215 |         sessionStore: new matrix.WebStorageSessionStore(localStorage),
216 |       }
217 | 
218 |       return matrix.createClient(opts)
219 |     }
220 |   }
221 | 
222 |   initializeChat = async () => {
223 |     this.setState({ ready: false })
224 | 
225 |     const client = await this.createClientWithAccount()
226 |     this.setState({
227 |       client: client
228 |     })
229 |     client.setDisplayName(this.props.anonymousDisplayName)
230 |     this.setMatrixListeners(client)
231 | 
232 |     try {
233 |       await client.initCrypto()
234 |     } catch(err) {
235 |       return this.initializeUnencryptedChat()
236 |     }
237 | 
238 |     await client.startClient()
239 |     await this.createRoom(client)
240 |   }
241 | 
242 |   initializeUnencryptedChat = async () => {
243 |     if (this.state.client) {
244 |       this.state.client.leave(this.state.roomId)
245 |       this.state.client.stopClient()
246 |       this.state.client.clearStores()
247 |       this.state.localStorage.clear()
248 |     }
249 | 
250 |     this.setState({
251 |       ready: false,
252 |       facilitatorInvited: false,
253 |       decryptionErrors: {},
254 |       roomId: null,
255 |       typingStatus: null,
256 |       client: null,
257 |       isCryptoEnabled: false,
258 |     })
259 | 
260 |     this.displayBotMessage({ body: RESTARTING_UNENCRYPTED_CHAT_MESSAGE })
261 | 
262 |     let opts = {
263 |       baseUrl: this.props.matrixServerUrl,
264 |       accessToken: this.state.accessToken,
265 |       userId: this.state.userId,
266 |       deviceId: this.state.deviceId,
267 |     }
268 | 
269 |     let client;
270 |     client = matrix.createClient(opts)
271 |     this.setState({
272 |       client: client,
273 |     })
274 | 
275 |     try {
276 |       this.setMatrixListeners(client)
277 |       client.setDisplayName(this.props.anonymousDisplayName)
278 |       await this.createRoom(client)
279 |       await client.startClient()
280 |       this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
281 |     } catch(err) {
282 |       console.log("error", err)
283 |       this.handleInitError(err)
284 |     }
285 | 
286 |   }
287 | 
288 |   handleInitError = (err) => {
289 |     console.log("error", err)
290 |     this.displayBotMessage({ body: this.props.chatUnavailableMessage })
291 |     this.setState({ ready: true })
292 |   }
293 | 
294 |   handleDecryptionError = async (event, err) => {
295 |     if (this.state.client) {
296 |       const isCryptoEnabled = await this.state.client.isCryptoEnabled()
297 |       const isRoomEncrypted = this.state.client.isRoomEncrypted(this.state.roomId)
298 | 
299 |       if (!isCryptoEnabled || !isRoomEncrypted) {
300 |         return this.initializeUnencryptedChat()
301 |       }
302 |     }
303 | 
304 |     const eventId = event.getId()
305 |     this.displayFakeMessage({ body: '** Unable to decrypt message **' }, event.getSender(), eventId)
306 |     this.setState({ decryptionErrors: { [eventId]: true }})
307 |   }
308 | 
309 |   verifyAllRoomDevices = async (client, room) => {
310 |     if (!room) return;
311 |     if (!client) return;
312 |     if (!this.state.isCryptoEnabled) return;
313 | 
314 |     let members = (await room.getEncryptionTargetMembers()).map(x => x["userId"])
315 |     let memberkeys = await client.downloadKeys(members);
316 |     for (const userId in memberkeys) {
317 |       for (const deviceId in memberkeys[userId]) {
318 |         await client.setDeviceVerified(userId, deviceId);
319 |       }
320 |     }
321 |   }
322 | 
323 |   createRoom = async (client) => {
324 |     const currentDate = new Date()
325 |     const chatDate = currentDate.toLocaleDateString()
326 |     const chatTime = currentDate.toLocaleTimeString()
327 |     let roomConfig = {
328 |       room_alias_name: `private-support-chat-${uuid()}`,
329 |       invite: [this.props.botId],
330 |       visibility: 'private',
331 |       name: `${chatTime}, ${chatDate} - ${this.props.roomName}`,
332 |     }
333 | 
334 |     const isCryptoEnabled = await client.isCryptoEnabled()
335 | 
336 |     if (isCryptoEnabled) {
337 |       roomConfig.initial_state = [
338 |         {
339 |           type: 'm.room.encryption',
340 |           state_key: '',
341 |           content: ENCRYPTION_CONFIG,
342 |         },
343 |       ]
344 |     }
345 | 
346 |     const { room_id } = await client.createRoom(roomConfig)
347 | 
348 |     client.setPowerLevel(room_id, this.props.botId, 100)
349 | 
350 |     this.setState({
351 |       roomId: room_id,
352 |       isCryptoEnabled
353 |     })
354 |   }
355 | 
356 |   sendMessage = async (message) => {
357 |     if (this.state.client && this.state.roomId) {
358 |       try {
359 |         await this.state.client.sendTextMessage(this.state.roomId, message)
360 |       } catch(err) {
361 |           switch (err["name"]) {
362 |           case "UnknownDeviceError":
363 |             Object.keys(err.devices).forEach((userId) => {
364 |               Object.keys(err.devices[userId]).map(async (deviceId) => {
365 |                 await this.state.client.setDeviceKnown(userId, deviceId, true);
366 |               });
367 |             });
368 |             this.sendMessage(message)
369 |             break;
370 |           default:
371 |             this.displayBotMessage({ body: "Your message was not sent." })
372 |             console.log("Error sending message", err);
373 |         }
374 |       }
375 |     }
376 |   }
377 | 
378 |   displayFakeMessage = (content, sender, messageId=uuid()) => {
379 |     const msgList = [...this.state.messages]
380 |     const msg = {
381 |       id: messageId,
382 |       type: 'm.room.message',
383 |       sender: sender,
384 |       roomId: this.state.roomId,
385 |       content: content,
386 |     }
387 |     msgList.push(msg)
388 | 
389 |     this.setState({ messages: msgList })
390 |   }
391 | 
392 |   displayBotMessage = (content, roomId) => {
393 |     const msgList = [...this.state.messages]
394 |     const msg = {
395 |       id: uuid(),
396 |       type: 'm.room.message',
397 |       sender: this.props.botId,
398 |       roomId: roomId || this.state.roomId,
399 |       content: content,
400 |     }
401 |     msgList.push(msg)
402 | 
403 |     this.setState({ messages: msgList })
404 |   }
405 | 
406 |   handleMessageEvent = event => {
407 |     const message = {
408 |       id: event.getId(),
409 |       type: event.getType(),
410 |       sender: event.getSender(),
411 |       roomId: event.getRoomId(),
412 |       content: event.getContent(),
413 |     }
414 | 
415 |     if (message.content.showToUser && message.content.showToUser !== this.state.userId) {
416 |       return;
417 |     }
418 | 
419 |     if (message.content.body.startsWith('!bot') && message.sender !== this.state.userId) {
420 |       return;
421 |     }
422 | 
423 |     const messagesInFlight = [...this.state.messagesInFlight]
424 |     const placeholderMessageIndex = messagesInFlight.findIndex(msg => msg === message.content.body)
425 |     if (placeholderMessageIndex > -1) {
426 |       messagesInFlight.splice(placeholderMessageIndex, 1)
427 |       this.setState({ messagesInFlight })
428 |     }
429 | 
430 |     // check for decryption error message and replace with decrypted message
431 |     // or push message to messages array
432 |     const messages = [...this.state.messages]
433 |     const decryptionErrors = {...this.state.decryptionErrors}
434 |     delete decryptionErrors[message.id]
435 |     const existingMessageIndex = messages.findIndex(({ id }) => id === message.id)
436 | 
437 |     if (existingMessageIndex > -1) {
438 |       messages.splice(existingMessageIndex, 1, message)
439 |     } else {
440 |       messages.push(message)
441 |     }
442 | 
443 |     this.setState({ messages, decryptionErrors })
444 |   }
445 | 
446 | 
447 |   handleKeyDown = (e) => {
448 |     switch (e.keyCode) {
449 |       case 27:
450 |         if (this.state.emojiSelectorOpen) {
451 |           this.closeEmojiSelector()
452 |         } else if (this.state.opened) {
453 |           this.handleToggleOpen()
454 |         };
455 |       default:
456 |         break;
457 |     }
458 |   }
459 | 
460 |   setMatrixListeners = client => {
461 |     client.on("Room.timeline", (event, room) => {
462 |       const eventType = event.getType()
463 |       const content = event.getContent()
464 |       const sender = event.getSender()
465 | 
466 |       if (eventType === "m.room.encryption") {
467 |         this.displayBotMessage({ body: ENCRYPTION_NOTICE }, room.room_id)
468 |         this.verifyAllRoomDevices(client, room)
469 |       }
470 | 
471 |       if (eventType === "m.room.message" && !this.state.isCryptoEnabled) {
472 |         if (event.isEncrypted()) {
473 |           return;
474 |         }
475 |         this.handleMessageEvent(event)
476 |       }
477 | 
478 |       if (eventType === "m.room.member" && content.membership === "invite" && sender === this.props.botId) {
479 |         this.setState({ facilitatorInvited: true })
480 |       }
481 | 
482 |       if (eventType === "m.room.member" && content.membership === "join" && sender !== this.props.botId && sender !== this.state.userId) {
483 |         this.verifyAllRoomDevices(client, room)
484 |         this.setState({ facilitatorId: sender, ready: true })
485 |         window.clearInterval(this.state.timeoutId)
486 |       }
487 |     });
488 | 
489 | 
490 |     client.on("Event.decrypted", (event, err) => {
491 |       if (err) {
492 |         return this.handleDecryptionError(event, err)
493 |       }
494 |       if (event.getType() === "m.room.message") {
495 |         const content = event.getContent()
496 | 
497 |         if (content.msgtype === "m.notice" && content.body === CHAT_IS_OFFLINE_NOTICE) {
498 |           this.setState({ ready: true })
499 |           return window.clearInterval(this.state.timeoutId)
500 |         }
501 |         this.handleMessageEvent(event)
502 |       }
503 |     });
504 | 
505 |     client.on("RoomMember.typing", (event, member) => {
506 |       if (member.typing && member.roomId === this.state.roomId) {
507 |         this.setState({ typingStatus: `${member.name} is typing...` })
508 |       }
509 |       else {
510 |         this.setState({ typingStatus: null })
511 |       }
512 |     });
513 |   }
514 | 
515 |   componentDidUpdate(prevProps, prevState) {
516 |     if (prevState.messages.length !== this.state.messages.length) {
517 |       if (this.messageWindow.current.scrollTo) {
518 |         this.messageWindow.current.scrollTo(0, this.messageWindow.current.scrollHeight)
519 |       }
520 |     }
521 | 
522 |     if (!prevState.facilitatorInvited && this.state.facilitatorInvited) {
523 |       this.displayBotMessage({ body: this.props.confirmationMessage })
524 |     }
525 | 
526 |     if (!prevState.opened && this.state.opened) {
527 |       this.detectMobile()
528 |       // not sure what to do with this
529 |       // this.detectSlowConnection()
530 |     }
531 |   }
532 | 
533 |   componentDidMount() {
534 |     document.addEventListener("keydown", this.handleKeyDown, false);
535 |     window.addEventListener('beforeunload', this.exitChat)
536 |   }
537 | 
538 |   componentWillUnmount() {
539 |     document.removeEventListener("keydown", this.handleKeyDown, false);
540 |     window.removeEventListener('beforeunload', this.exitChat)
541 |     this.exitChat();
542 |   }
543 | 
544 |   handleInputChange = e => {
545 |     this.setState({ inputValue: e.target.value })
546 |   }
547 | 
548 |   handleAcceptTerms = () => {
549 |     this.setState({ awaitingAgreement: false })
550 |     this.startWaitTimeForFacilitator()
551 |     try {
552 |       this.initializeChat()
553 |     } catch(err) {
554 |       this.handleInitError(err)
555 |     }
556 |   }
557 | 
558 |   startWaitTimeForFacilitator = () => {
559 |     const timeoutId = window.setInterval(() => {
560 |       if (!this.state.facilitatorId) {
561 |         this.displayBotMessage({ body: this.props.waitMessage })
562 |       }
563 |     }, WAIT_TIME_MS)
564 | 
565 |     this.setState({ timeoutId })
566 |   }
567 | 
568 |   handleRejectTerms = () => {
569 |     this.exitChat()
570 |     this.displayBotMessage({ body: this.props.exitMessage })
571 |   }
572 | 
573 |   handleSubmit = e => {
574 |     e.preventDefault()
575 |     const message = this.state.inputValue
576 |     if (!Boolean(message)) return null;
577 | 
578 |     if (this.state.isCryptoEnabled && !(this.state.client.isRoomEncrypted(this.state.roomId) && this.state.client.isCryptoEnabled())) return null;
579 | 
580 |     if (this.state.client && this.state.roomId) {
581 |       const messagesInFlight = [...this.state.messagesInFlight]
582 |       messagesInFlight.push(message)
583 |       this.setState({ inputValue: "", messagesInFlight }, () => this.sendMessage(message))
584 |       this.chatboxInput.current.focus()
585 |     }
586 |   }
587 | 
588 |   onEmojiClick = (event, emojiObject) => {
589 |     event.preventDefault()
590 |     const { emoji } = emojiObject;
591 |     this.setState({
592 |       inputValue: this.state.inputValue.concat(emoji),
593 |       emojiSelectorOpen: false,
594 |     }, this.chatboxInput.current.focus())
595 |   }
596 | 
597 |   render() {
598 |     const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
599 |     const inputLabel = 'Send a message...'
600 | 
601 |     return (
602 |       <div id="safesupport">
603 |         <div className="docked-widget" role="complementary">
604 |           <Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
605 |             {(status) => {
606 |               return (
607 |               <div className={`widget widget-${status}`} aria-hidden={!opened}>
608 |                 <div id="safesupport-chatbox" aria-haspopup="dialog">
609 |                   <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
610 | 
611 |                   <div className="message-window" ref={this.messageWindow}>
612 |                     <div className="messages">
613 |                       <div className={`message from-bot`}>
614 |                         <div className="text">{ this.props.introMessage }</div>
615 |                       </div>
616 | 
617 |                       <div className={`message from-bot`}>
618 |                         <div className="text">Please read the full <a href={this.props.termsUrl} ref={this.termsUrl} target='_blank' rel='noopener noreferrer'>terms and conditions</a>. By using this chat, you agree to these terms.</div>
619 |                       </div>
620 | 
621 |                       <div className={`message from-bot`}>
622 |                         <div className="text">{ this.props.agreementMessage }</div>
623 |                       </div>
624 | 
625 |                       <div className={`message from-bot`}>
626 |                         <div className="text buttons">
627 |                           {`👉`}
628 |                           <button className="btn" id="accept" onClick={this.handleAcceptTerms}>YES</button>
629 |                           <button className="btn" id="reject" onClick={this.handleRejectTerms}>NO</button>
630 |                         </div>
631 |                       </div>
632 | 
633 |                       {
634 |                         messages.map((message, index) => {
635 |                           return(
636 |                             <Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
637 |                           )
638 |                         })
639 |                       }
640 | 
641 |                       {
642 |                         messagesInFlight.map((message, index) => {
643 |                           return(
644 |                             <Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
645 |                           )
646 |                         })
647 |                       }
648 | 
649 |                       { typingStatus &&
650 |                         <div className="notices">
651 |                           <div role="status">{typingStatus}</div>
652 |                         </div>
653 |                       }
654 | 
655 |                       { Boolean(Object.keys(decryptionErrors).length) &&
656 |                         <div className={`message from-bot`}>
657 |                           <div className="text buttons">
658 |                             {`Restart chat without encryption?`}
659 |                             <button className="btn" id="accept" onClick={this.initializeUnencryptedChat}>RESTART</button>
660 |                           </div>
661 |                         </div>
662 |                       }
663 | 
664 |                       { !ready && <div className={`loader`}>loading...</div> }
665 |                     </div>
666 |                   </div>
667 |                   <div className="input-window">
668 |                     <form onSubmit={this.handleSubmit}>
669 |                       <div className="message-input-container">
670 |                         <input
671 |                           id="message-input"
672 |                           type="text"
673 |                           onChange={this.handleInputChange}
674 |                           value={inputValue}
675 |                           aria-label={inputLabel}
676 |                           placeholder={inputLabel}
677 |                           autoFocus={true}
678 |                           ref={this.chatboxInput}
679 |                         />
680 |                         {
681 |                           (status === "entered") && !isMobile &&
682 |                           <EmojiSelector
683 |                             onEmojiClick={this.onEmojiClick}
684 |                             emojiSelectorOpen={emojiSelectorOpen}
685 |                             toggleEmojiSelector={this.toggleEmojiSelector}
686 |                             closeEmojiSelector={this.closeEmojiSelector}
687 |                           />
688 |                         }
689 |                       </div>
690 |                       <input type="submit" value="Send" id="submit" onClick={this.handleSubmit} />
691 |                     </form>
692 |                   </div>
693 |                 </div>
694 |               </div>
695 |               )}
696 |             }
697 |           </Transition>
698 |           {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
699 |           {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
700 |         </div>
701 |       </div>
702 |     );
703 |   }
704 | };
705 | 
706 | ChatBox.propTypes = {
707 |   matrixServerUrl: PropTypes.string.isRequired,
708 |   botId: PropTypes.string.isRequired,
709 |   termsUrl: PropTypes.string,
710 |   introMessage: PropTypes.string,
711 |   roomName: PropTypes.string,
712 |   agreementMessage: PropTypes.string,
713 |   confirmationMessage: PropTypes.string,
714 |   exitMessage: PropTypes.string,
715 |   chatUnavailableMessage: PropTypes.string,
716 |   anonymousDisplayName: PropTypes.string,
717 |   waitMessage: PropTypes.string,
718 | }
719 | 
720 | ChatBox.defaultProps = {
721 |   matrixServerUrl: DEFAULT_MATRIX_SERVER,
722 |   botId: DEFAULT_BOT_ID,
723 |   termsUrl: DEFAULT_TERMS_URL,
724 |   roomName: DEFAULT_ROOM_NAME,
725 |   introMessage: DEFAULT_INTRO_MESSAGE,
726 |   agreementMessage: DEFAULT_AGREEMENT_MESSAGE,
727 |   confirmationMessage: DEFAULT_CONFIRMATION_MESSAGE,
728 |   exitMessage: DEFAULT_EXIT_MESSAGE,
729 |   anonymousDisplayName: DEFAULT_ANONYMOUS_DISPLAY_NAME,
730 |   chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
731 |   waitMessage: DEFAULT_WAIT_MESSAGE,
732 | }
733 | 
734 | export default ChatBox;
735 | 
736 | 


--------------------------------------------------------------------------------
/src/components/chatbox.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Chatbox from './chatbox';
  3 | import {
  4 |   createClient,
  5 |   mockClient,
  6 |   mockRegisterRequest,
  7 |   mockInitCrypto,
  8 |   mockStartClient,
  9 |   mockSetPowerLevel,
 10 |   mockCreateRoom,
 11 |   mockLeave,
 12 |   mockDeactivateAccount,
 13 |   mockStopClient,
 14 |   mockClearStores,
 15 |   mockOn,
 16 |   mockOnce,
 17 |   mockSendTextMessage,
 18 |   mockIsCryptoEnabled,
 19 |   mockIsRoomEncrypted,
 20 | } from "matrix-js-sdk";
 21 | import { mount, shallow } from 'enzyme';
 22 | import { createWaitForElement } from 'enzyme-wait';
 23 | import { config } from 'react-transition-group';
 24 | import waitForExpect from 'wait-for-expect'
 25 | 
 26 | 
 27 | config.disabled = true
 28 | 
 29 | var testConfig = {
 30 |   matrixServerUrl: 'https://matrix.rhok.space',
 31 |   botId: '@help-bot:rhok.space',
 32 |   roomName: 'Support Chat',
 33 |   termsUrl: 'https://tosdr.org/',
 34 |   introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
 35 |   agreementMessage: 'Do you want to continue?',
 36 |   confirmationMessage: 'Waiting for a facilitator to join the chat...',
 37 |   exitMessage: 'The chat is closed. You may close this window.',
 38 |   chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
 39 |   anonymousDisplayName: 'Anonymous',
 40 | }
 41 | 
 42 | 
 43 | describe('Chatbox', () => {
 44 |   beforeEach(() => {
 45 |     createClient.mockClear()
 46 |     mockInitCrypto.mockClear()
 47 |     mockStartClient.mockClear()
 48 |     mockRegisterRequest.mockClear()
 49 |     mockSetPowerLevel.mockClear()
 50 |     mockCreateRoom.mockClear()
 51 |     mockLeave.mockClear()
 52 |     mockDeactivateAccount.mockClear()
 53 |     mockStopClient.mockClear()
 54 |     mockClearStores.mockClear()
 55 |     mockOnce.mockClear()
 56 |     mockOn.mockClear()
 57 |     mockSendTextMessage.mockClear()
 58 |     mockIsCryptoEnabled.mockClear()
 59 |     mockIsRoomEncrypted.mockClear()
 60 |   })
 61 | 
 62 |   test('chat window should open and close', async () => {
 63 |     const chatbox = mount(<Chatbox {...testConfig} />)
 64 | 
 65 |     let dock = chatbox.find('button.dock')
 66 |     let chatWindow = chatbox.find('.widget')
 67 | 
 68 |     expect(dock.length).toEqual(1)
 69 |     expect(chatWindow.hasClass('widget-exited')).toEqual(true)
 70 | 
 71 |     // open chat window
 72 |     dock.simulate('click')
 73 | 
 74 |     const openChatWindow = await createWaitForElement('.widget-entered')(chatbox)
 75 |     dock = chatbox.find('button.dock')
 76 |     expect(openChatWindow.length).toEqual(1)
 77 |     expect(dock.length).toEqual(0)
 78 | 
 79 |     // close chat window
 80 |     const closeButton = chatbox.find('button.widget-header-close')
 81 |     closeButton.simulate('click')
 82 | 
 83 |     chatWindow = chatbox.find('.widget')
 84 |     dock = chatbox.find('button.dock')
 85 | 
 86 |     expect(dock.length).toEqual(1)
 87 |     expect(chatWindow.hasClass('widget-exited')).toEqual(true)
 88 |   })
 89 | 
 90 |   test('chat window should contain the right messages', () => {
 91 |     const chatbox = mount(<Chatbox {...testConfig} />)
 92 |     const props = chatbox.props()
 93 |     const messages = chatbox.find('.messages')
 94 | 
 95 |     expect(messages.text()).toContain(props.introMessage)
 96 |     expect(messages.html()).toContain(props.termsUrl)
 97 |     expect(messages.text()).toContain(props.agreementMessage)
 98 |   });
 99 | 
100 |   test('agreeing to terms should start encrypted chat', async () => {
101 |     const chatbox = mount(<Chatbox {...testConfig} />)
102 |     const dock = chatbox.find('button.dock')
103 | 
104 |     dock.simulate('click')
105 | 
106 |     const openChatWindow = await createWaitForElement('.widget-entered')(chatbox)
107 |     let acceptButton = await createWaitForElement('button#accept')(chatbox)
108 |     acceptButton = chatbox.find('button#accept')
109 | 
110 |     acceptButton.simulate('click')
111 | 
112 |     const ready = await createWaitForElement('.loader')(chatbox)
113 |     expect(ready.length).toEqual(1)
114 | 
115 |     expect(createClient).toHaveBeenCalled()
116 |     expect(mockInitCrypto).toHaveBeenCalled()
117 |     expect(mockStartClient).toHaveBeenCalled()
118 |     expect(mockCreateRoom).toHaveBeenCalled()
119 |     expect(mockSetPowerLevel).toHaveBeenCalled()
120 |     expect(mockOn).toHaveBeenCalled()
121 |   })
122 | 
123 |   test('rejecting terms should not start chat', async () => {
124 |     const chatbox = mount(<Chatbox {...testConfig} />)
125 |     const dock = chatbox.find('button.dock')
126 | 
127 |     dock.simulate('click')
128 | 
129 |     const openChatWindow = await createWaitForElement('.widget-entered')(chatbox)
130 |     let rejectButton = await createWaitForElement('button#reject')(chatbox)
131 |     rejectButton = chatbox.find('button#reject')
132 | 
133 |     rejectButton.simulate('click')
134 | 
135 |     expect(createClient.mock.calls.length).toEqual(0)
136 |   })
137 | 
138 |   test('submitted messages should be sent to matrix', async () => {
139 |     const chatbox = mount(<Chatbox {...testConfig} />)
140 |     const dock = chatbox.find('button.dock')
141 | 
142 |     dock.simulate('click')
143 | 
144 |     let acceptButton = await createWaitForElement('button#accept')(chatbox)
145 |     acceptButton = chatbox.find('button#accept')
146 | 
147 |     acceptButton.simulate('click')
148 | 
149 |     await waitForExpect(() => {
150 |       expect(mockCreateRoom).toHaveBeenCalled()
151 |     });
152 | 
153 |     const input = chatbox.find('#message-input')
154 |     const form = chatbox.find('form')
155 |     const message = 'Hello'
156 | 
157 |     input.simulate('change', { target: { value: message }})
158 | 
159 |     await waitForExpect(() => {
160 |       chatbox.update()
161 |       expect(chatbox.state().inputValue).toEqual(message)
162 |     })
163 | 
164 |     form.simulate('submit')
165 | 
166 |     await waitForExpect(() => {
167 |       expect(mockSendTextMessage).toHaveBeenCalledWith(chatbox.state().roomId, message)
168 |     });
169 |   })
170 | 
171 | 
172 |   test('decryption failure should lead to a new unencrypted chat', async () => {
173 |     const chatbox = mount(<Chatbox {...testConfig} />)
174 |     const dock = chatbox.find('button.dock')
175 |     const instance = chatbox.instance()
176 | 
177 |     dock.simulate('click')
178 | 
179 |     const openChatWindow = await createWaitForElement('.widget-entered')(chatbox)
180 |     let acceptButton = await createWaitForElement('button#accept')(chatbox)
181 |     acceptButton = chatbox.find('button#accept')
182 | 
183 |     acceptButton.simulate('click')
184 | 
185 |     await waitForExpect(() => {
186 |       expect(mockCreateRoom).toHaveBeenCalled()
187 |     });
188 | 
189 |     jest.spyOn(instance, 'initializeUnencryptedChat')
190 |     instance.handleDecryptionError()
191 | 
192 |     await waitForExpect(() => {
193 |       expect(mockLeave).toHaveBeenCalled()
194 |     });
195 | 
196 |     await waitForExpect(() => {
197 |       expect(mockStopClient).toHaveBeenCalled()
198 |     });
199 | 
200 |     await waitForExpect(() => {
201 |       expect(mockClearStores).toHaveBeenCalled()
202 |     });
203 | 
204 |     expect(instance.initializeUnencryptedChat).toHaveBeenCalled()
205 |   })
206 | 
207 |   test('creating an unencrypted chat', async () => {
208 |     const chatbox = mount(<Chatbox {...testConfig} />)
209 |     const instance = chatbox.instance()
210 | 
211 |     instance.initializeUnencryptedChat()
212 | 
213 |     await waitForExpect(() => {
214 |       expect(createClient).toHaveBeenCalled()
215 |     })
216 | 
217 |     await waitForExpect(() => {
218 |       expect(mockStartClient).toHaveBeenCalled()
219 |     })
220 | 
221 |     await waitForExpect(() => {
222 |       expect(mockInitCrypto).not.toHaveBeenCalled()
223 |     })
224 |   })
225 | 
226 |   test('exiting the chat should leave the room and destroy client', async () => {
227 |     const chatbox = mount(<Chatbox {...testConfig} />)
228 |     const dock = chatbox.find('button.dock')
229 | 
230 |     dock.simulate('click')
231 | 
232 |     const openChatWindow = await createWaitForElement('.widget-entered')(chatbox)
233 |     let acceptButton = await createWaitForElement('button#accept')(chatbox)
234 |     acceptButton = chatbox.find('button#accept')
235 | 
236 |     acceptButton.simulate('click')
237 | 
238 |     await waitForExpect(() => {
239 |       expect(mockCreateRoom).toHaveBeenCalled()
240 |     });
241 | 
242 |     const exitButton = chatbox.find('button.widget-header-close')
243 | 
244 |     exitButton.simulate('click')
245 | 
246 |     let closed = await createWaitForElement('button.dock')
247 |     expect(closed.length).toEqual(1)
248 | 
249 |     await waitForExpect(() => {
250 |       expect(mockLeave).toHaveBeenCalled()
251 |     });
252 | 
253 |     await waitForExpect(() => {
254 |       expect(mockDeactivateAccount).toHaveBeenCalled()
255 |     });
256 | 
257 |     await waitForExpect(() => {
258 |       expect(mockStopClient).toHaveBeenCalled()
259 |     });
260 | 
261 |     await waitForExpect(() => {
262 |       expect(mockClearStores).toHaveBeenCalled()
263 |     });
264 |   })
265 | 
266 |   test('notification should appear when facilitator joins chat', () => {
267 |     //
268 |   })
269 | 
270 |   test('received messages should appear in chat window', () => {
271 |     //
272 |   })
273 | 
274 | });
275 | 


--------------------------------------------------------------------------------
/src/components/dock.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | 
 4 | const Dock = ({ handleToggleOpen }) => {
 5 | 
 6 |   return(
 7 |     <button
 8 |       type="button"
 9 |       className="dock"
10 |       onClick={handleToggleOpen}
11 |       onKeyPress={handleToggleOpen}
12 |       aria-labelledby="open-chatbox-label"
13 |     >
14 |       <div id="open-chatbox-label">Start a new chat</div>
15 |       <div className="label-icon">
16 |         <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
17 |       </div>
18 |     </button>
19 |   )
20 | }
21 | 
22 | export default Dock;


--------------------------------------------------------------------------------
/src/components/emoji-selector.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | import { Transition } from 'react-transition-group';
 4 | import EmojiPicker from 'emoji-picker-react';
 5 | import onClickOutside from "react-onclickoutside";
 6 | 
 7 | 
 8 | const SVG = () => <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path id="icon" fill="#828282" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
 9 | 
10 | class EmojiSelector extends React.Component {
11 |   constructor(props){
12 |     super(props)
13 |   }
14 | 
15 |   handleClickOutside = e => {
16 |     this.props.closeEmojiSelector()
17 |   };
18 | 
19 | 
20 |   render() {
21 |     const { onEmojiClick, emojiSelectorOpen, toggleEmojiSelector } = this.props;
22 | 
23 |     return(
24 |       <div className="emoji-button-container">
25 |         <div className="pos-relative">
26 |           <Transition in={emojiSelectorOpen} timeout={250}>
27 |             {
28 |               status => {
29 |                 return(
30 |                   <div className={`emoji-picker emoji-picker-${status}`} aria-hidden={!emojiSelectorOpen}>
31 |                     <EmojiPicker
32 |                       onEmojiClick={onEmojiClick}
33 |                       emojiUrl="https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64"
34 |                     />
35 |                   </div>
36 |                 )
37 |               }
38 |             }
39 |           </Transition>
40 |           <button type="button" id="emoji-button" onClick={toggleEmojiSelector} aria-label="Emoji picker">
41 |             <SVG />
42 |           </button>
43 |         </div>
44 |       </div>
45 |     )
46 |   }
47 | }
48 | 
49 | export default onClickOutside(EmojiSelector)
50 | 
51 | 


--------------------------------------------------------------------------------
/src/components/emoji_icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
 5 | <path style="fill:none;" d="M0,0h24v24H0V0z"/>
 6 | <path style="fill:#828282;" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8
 7 | 	s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z M15.5,11c0.8,0,1.5-0.7,1.5-1.5S16.3,8,15.5,8S14,8.7,14,9.5S14.7,11,15.5,11z M8.5,11
 8 | 	c0.8,0,1.5-0.7,1.5-1.5S9.3,8,8.5,8S7,8.7,7,9.5S7.7,11,8.5,11z M12,17.5c2.3,0,4.3-1.5,5.1-3.5H6.9C7.7,16,9.7,17.5,12,17.5z"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/header.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | 
 4 | const Header = ({ handleToggleOpen, handleExitChat, opened }) => {
 5 | 
 6 |   return(
 7 |     <div className="widget-header">
 8 |       <button
 9 |         type="button"
10 |         className={`widget-header-minimize`}
11 |         onClick={handleToggleOpen}
12 |         onKeyPress={handleToggleOpen}
13 |         aria-label="Minimize the chat window"
14 |         title="Minimize the chat window"
15 |       >
16 |         <span className={`btn-icon arrow ${opened ? "opened" : "closed"}`}>⌃</span>
17 |         <span>{`${opened ? "Hide" : "Show"} the chat`}</span>
18 |       </button>
19 |       <button
20 |         type="button"
21 |         className={`widget-header-close`}
22 |         onClick={handleExitChat}
23 |         onKeyPress={handleExitChat}
24 |         aria-label="Exit the chat"
25 |         title="Exit the chat"
26 |       >
27 |         <span className={`btn-icon`}>×</span>
28 |       </button>
29 |     </div>
30 |   )
31 | }
32 | 
33 | export default Header;


--------------------------------------------------------------------------------
/src/components/message.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | import Linkify from 'linkifyjs/react';
 4 | 
 5 | const Message = ({ message, userId, botId, client, placeholder }) => {
 6 | 
 7 |   const senderClass = () => {
 8 |     switch (message.sender) {
 9 |       case 'from-me':
10 |         return 'from-me'
11 |       case userId:
12 |         return 'from-me'
13 |       case botId:
14 |         return 'from-bot'
15 |       default:
16 |         return 'from-support'
17 |     }
18 |   }
19 | 
20 |   if (placeholder) {
21 |     return(
22 |       <div className={`message from-me placeholder`}>
23 |         <div className="text">
24 |           { message.content.body }
25 |         </div>
26 |       </div>
27 |     )
28 |   }
29 | 
30 | 
31 |   if (message.content.msgtype === 'm.file') {
32 |     const url = client.mxcUrlToHttp(message.content.url);
33 |     return (
34 |       <div className={`message ${senderClass()}`}>
35 |         <div className="text">
36 |           <a href={url} target='_blank' rel='noopener noreferrer'>{ message.content.body }</a>
37 |         </div>
38 |       </div>
39 |     )
40 |   }
41 | 
42 |   if (message.content.formatted_body) {
43 |     return (
44 |       <div className={`message ${senderClass()}`}>
45 |         <div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
46 |       </div>
47 |     )
48 |   }
49 | 
50 |   const linkifyOpts = {
51 |     linkAttributes: {
52 |       rel: 'noreferrer noopener',
53 |     },
54 |   }
55 | 
56 |   return (
57 |     <div className={`message ${senderClass()}`}>
58 |       <div className="text">
59 |         <Linkify options={linkifyOpts}>{ message.content.body }</Linkify>
60 |       </div>
61 |     </div>
62 |   )
63 | }
64 | 
65 | export default Message;


--------------------------------------------------------------------------------
/src/components/notice.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import PropTypes from "prop-types"
 3 | 
 4 | const Notice = ({ message, userId }) => {
 5 |   const fromMe = message.sender === userId;
 6 | 
 7 |   if (message.content.formatted_body) {
 8 |     return (
 9 |       <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
10 |         <div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
11 |       </div>
12 |     )
13 |   }
14 | 
15 |   return (
16 |     <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
17 |       <div className="text">{ message.content.body }</div>
18 |     </div>
19 |   )
20 | }
21 | 
22 | export default Notice;


--------------------------------------------------------------------------------
/src/components/styles.scss:
--------------------------------------------------------------------------------
1 | #safesupport {
2 |   @import "variables";
3 |   @import "loader";
4 |   @import "chat";
5 |   @import "dark_mode";
6 | }


--------------------------------------------------------------------------------
/src/outputs/bookmarklet.js:
--------------------------------------------------------------------------------
 1 | import EmbeddableChatbox from './embeddable-chatbox';
 2 | 
 3 | const config = {
 4 |         matrixServerUrl: 'https://matrix.safesupport.chat',
 5 |         botId: '@help-bot:safesupport.chat',
 6 |         roomName: 'Support Chat',
 7 |         termsUrl: 'https://tosdr.org/',
 8 |         introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
 9 |         agreementMessage: 'Do you want to continue?',
10 |         confirmationMessage: 'Waiting for a facilitator to join the chat...',
11 |         exitMessage: 'The chat is closed. You may close this window.',
12 |         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
13 |         anonymousDisplayName: 'Anonymous',
14 |     }
15 | 
16 | export default function bookmarklet() {
17 |   if (window.EmbeddableChatbox) {
18 |     return;
19 |   }
20 |   window.EmbeddableChatbox = EmbeddableChatbox;
21 | 
22 |   EmbeddableChatbox.mount(config);
23 | }
24 | 
25 | bookmarklet();
26 | 


--------------------------------------------------------------------------------
/src/outputs/bookmarklet.test.js:
--------------------------------------------------------------------------------
 1 | import ReactDOM from 'react-dom';
 2 | import bookmarklet from './bookmarklet';
 3 | 
 4 | describe('bookmarklet', () => {
 5 |   afterEach(() => {
 6 |     const el = document.querySelectorAll('body > div');
 7 |     ReactDOM.unmountComponentAtNode(el[0]);
 8 |     el[0].parentNode.removeChild(el[0]);
 9 |     window.EmbeddableChatbox = null;
10 |   });
11 | 
12 |   test('#mount document becomes ready', async () => {
13 |     expect(window.EmbeddableChatbox).not.toBeNull();
14 |     bookmarklet();
15 |     const el = document.querySelectorAll('body > div');
16 |     expect(el).toHaveLength(1);
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/src/outputs/embeddable-chatbox.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import Chatbox from '../components/chatbox';
 4 | import '../../vendor/cleanslate.css';
 5 | 
 6 | export default class EmbeddableChatbox {
 7 |   static el;
 8 | 
 9 |   static mount({ parentElement = null, ...props } = {}) {
10 |     const component = <Chatbox {...props} />; // eslint-disable-line
11 | 
12 |     function doRender() {
13 |       if (EmbeddableChatbox.el) {
14 |         throw new Error('EmbeddableChatbox is already mounted, unmount first');
15 |       }
16 | 
17 |       const el = document.createElement('div');
18 |       el.setAttribute('class', 'cleanslate');
19 | 
20 |       if (parentElement) {
21 |         document.querySelector(parentElement).appendChild(el);
22 |       } else {
23 |         document.body.appendChild(el);
24 |       }
25 |       ReactDOM.render(
26 |         component,
27 |         el,
28 |       );
29 |       EmbeddableChatbox.el = el;
30 |     }
31 | 
32 |     if (document.readyState === 'complete') {
33 |       doRender();
34 |     } else {
35 |       window.addEventListener('load', () => {
36 |         doRender();
37 |       });
38 |     }
39 |   }
40 | 
41 |   static unmount() {
42 |     if (!EmbeddableChatbox.el) {
43 |       throw new Error('EmbeddableChatbox is not mounted, mount first');
44 |     }
45 |     ReactDOM.unmountComponentAtNode(EmbeddableChatbox.el);
46 |     EmbeddableChatbox.el.parentNode.removeChild(EmbeddableChatbox.el);
47 |     EmbeddableChatbox.el = null;
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/outputs/embeddable-chatbox.test.js:
--------------------------------------------------------------------------------
 1 | import EmbeddableChatbox from './embeddable-chatbox';
 2 | import { waitForSelection } from '../utils/test-helpers';
 3 | 
 4 | 
 5 | describe('EmbeddableChatbox', () => {
 6 |   beforeAll(() => {
 7 |     document.readyState = 'complete';
 8 |     if (EmbeddableChatbox.el) {
 9 |       EmbeddableChatbox.unmount();
10 |     }
11 |   });
12 | 
13 |   afterEach(() => {
14 |     document.readyState = 'complete';
15 |     if (EmbeddableChatbox.el) {
16 |       EmbeddableChatbox.unmount();
17 |     }
18 |   });
19 | 
20 |   test('#mount document becomes ready', async () => {
21 |     document.readyState = 'loading';
22 |     EmbeddableChatbox.mount();
23 |     window.dispatchEvent(new Event('load', {}));
24 |     await waitForSelection(document, 'div');
25 |   });
26 | 
27 |   test('#mount document complete', async () => {
28 |     EmbeddableChatbox.mount();
29 |     await waitForSelection(document, 'div');
30 |   });
31 | 
32 |   test('#mount to document element', async () => {
33 |     const newElement = document.createElement('span');
34 |     newElement.setAttribute('id', 'widget-mount');
35 |     document.body.appendChild(newElement);
36 | 
37 |     EmbeddableChatbox.mount({
38 |       parentElement: '#widget-mount',
39 |     });
40 | 
41 |     await waitForSelection(document, 'div');
42 | 
43 |     expect(document.querySelectorAll('#widget-mount')).toHaveLength(1);
44 |   });
45 | 
46 |   test('#mount twice', async () => {
47 |     EmbeddableChatbox.mount();
48 |     expect(() => EmbeddableChatbox.mount()).toThrow('already mounted');
49 |   });
50 | 
51 |   test('#unmount', async () => {
52 |     const el = document.createElement('div');
53 |     document.body.appendChild(el);
54 |     expect(document.querySelectorAll('div')).toHaveLength(1);
55 | 
56 |     EmbeddableChatbox.el = el;
57 |     EmbeddableChatbox.unmount();
58 | 
59 |     expect(document.querySelectorAll('div')).toHaveLength(0);
60 |   });
61 | 
62 |   test('#unmount without mounting', async () => {
63 |     expect(() => EmbeddableChatbox.unmount()).toThrow('not mounted');
64 |   });
65 | });
66 | 


--------------------------------------------------------------------------------
/src/utils/decryptFile.js:
--------------------------------------------------------------------------------
 1 | import encrypt from 'browser-encrypt-attachment';
 2 | import 'isomorphic-fetch';
 3 | 
 4 | const ALLOWED_BLOB_MIMETYPES = {
 5 |   'image/jpeg': true,
 6 |   'image/gif': true,
 7 |   'image/png': true,
 8 | 
 9 |   'video/mp4': true,
10 |   'video/webm': true,
11 |   'video/ogg': true,
12 | 
13 |   'audio/mp4': true,
14 |   'audio/webm': true,
15 |   'audio/aac': true,
16 |   'audio/mpeg': true,
17 |   'audio/ogg': true,
18 |   'audio/wave': true,
19 |   'audio/wav': true,
20 |   'audio/x-wav': true,
21 |   'audio/x-pn-wav': true,
22 |   'audio/flac': true,
23 |   'audio/x-flac': true,
24 | };
25 | 
26 | const decryptFile = (file, client) => {
27 |   const url = client.mxcUrlToHttp(file.url);
28 |   // Download the encrypted file as an array buffer.
29 |   return Promise.resolve(fetch(url))
30 |     .then((response) => response.arrayBuffer())
31 |     .then((responseData) => encrypt.decryptAttachment(responseData, file))
32 |     .then((dataArray) => {
33 |       // IMPORTANT: we must not allow scriptable mime-types into Blobs otherwise
34 |       // they introduce XSS attacks if the Blob URI is viewed directly in the
35 |       // browser (e.g. by copying the URI into a new tab or window.)
36 |       let mimetype = file.mimetype ? file.mimetype.split(';')[0].trim() : '';
37 |       if (!ALLOWED_BLOB_MIMETYPES[mimetype]) {
38 |         mimetype = 'application/octet-stream';
39 |       }
40 | 
41 |       const blob = new Blob([dataArray], { type: mimetype });
42 |       return blob;
43 |     });
44 | };
45 | 
46 | export default decryptFile;
47 | 


--------------------------------------------------------------------------------
/src/utils/test-helpers.js:
--------------------------------------------------------------------------------
 1 | function checkFunc(dom, selector) {
 2 |   if (typeof dom.update === 'function') {
 3 |     const el = dom.update().find(selector);
 4 |     if (el.exists()) {
 5 |       return el;
 6 |     }
 7 |     return null;
 8 |   }
 9 |   const els = dom.querySelectorAll(selector);
10 |   if (els.length !== 0) {
11 |     return els;
12 |   }
13 |   return null;
14 | }
15 | 
16 | 
17 | export async function waitForSelection(dom, selector) {
18 |   let numSleep = 0;
19 |   for (;;) {
20 |     const el = checkFunc(dom, selector);
21 |     if (el) {
22 |       return el;
23 |     }
24 |     if (numSleep > 2) {
25 |       throw new Error(`could not find ${selector}`);
26 |     }
27 |     await new Promise(resolve => setTimeout(resolve, 250));
28 |     numSleep += 1;
29 |   }
30 | }


--------------------------------------------------------------------------------
/vendor/cleanslate.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 | * CleanSlate
  3 | *   github.com/premasagar/cleanslate
  4 | *
  5 | *//*
  6 |     An extreme CSS reset stylesheet, for normalising the styling of a container element and its children.
  7 | 
  8 |     by Premasagar Rose
  9 |         dharmafly.com
 10 | 
 11 |     license
 12 |         opensource.org/licenses/mit-license.php
 13 | 
 14 |     **
 15 | 
 16 |     v0.10.1
 17 | 
 18 | */
 19 | 
 20 | /* == BLANKET RESET RULES == */
 21 | 
 22 | /* HTML 4.01 */
 23 | .cleanslate, .cleanslate h1, .cleanslate h2, .cleanslate h3, .cleanslate h4, .cleanslate h5, .cleanslate h6, .cleanslate p, .cleanslate td, .cleanslate dl, .cleanslate tr, .cleanslate dt, .cleanslate ol, .cleanslate form, .cleanslate select, .cleanslate option, .cleanslate pre, .cleanslate div, .cleanslate table,  .cleanslate th, .cleanslate tbody, .cleanslate tfoot, .cleanslate caption, .cleanslate thead, .cleanslate ul, .cleanslate li, .cleanslate address, .cleanslate blockquote, .cleanslate dd, .cleanslate fieldset, .cleanslate li, .cleanslate iframe, .cleanslate strong, .cleanslate legend, .cleanslate em, .cleanslate summary, .cleanslate cite, .cleanslate span, .cleanslate input, .cleanslate sup, .cleanslate label, .cleanslate dfn, .cleanslate object, .cleanslate big, .cleanslate q, .cleanslate samp, .cleanslate acronym, .cleanslate small, .cleanslate img, .cleanslate strike, .cleanslate code, .cleanslate sub, .cleanslate ins, .cleanslate textarea, .cleanslate button, .cleanslate var, .cleanslate a, .cleanslate abbr, .cleanslate applet, .cleanslate del, .cleanslate kbd, .cleanslate tt, .cleanslate b, .cleanslate i, .cleanslate hr,
 24 | 
 25 | /* HTML5 - Sept 2013 taken from MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list */
 26 | .cleanslate article, .cleanslate aside, .cleanslate figure, .cleanslate figcaption, .cleanslate footer, .cleanslate header, .cleanslate menu, .cleanslate nav, .cleanslate section, .cleanslate time, .cleanslate mark, .cleanslate audio, .cleanslate video, .cleanslate abbr, .cleanslate address, .cleanslate area, .cleanslate blockquote, .cleanslate canvas, .cleanslate caption, .cleanslate cite, .cleanslate code, .cleanslate colgroup, .cleanslate col, .cleanslate datalist, .cleanslate fieldset, .cleanslate main, .cleanslate map, .cleanslate meta, .cleanslate optgroup, .cleanslate output, .cleanslate progress, .cleanslate svg {
 27 |     background-attachment:scroll !important;
 28 |     background-color:transparent !important;
 29 |     background-image:none !important; /* This rule affects the use of pngfix JavaScript http://dillerdesign.com/experiment/DD_BelatedPNG for IE6, which is used to force the browser to recognise alpha-transparent PNGs files that replace the IE6 lack of PNG transparency. (The rule overrides the VML image that is used to replace the given CSS background-image). If you don't know what that means, then you probably haven't used the pngfix script, and this comment may be ignored :) */
 30 |     background-position:0 0 !important;
 31 |     background-repeat:repeat !important;
 32 |     border-color:black !important;
 33 |     border-color:currentColor !important; /* `border-color` should match font color. Modern browsers (incl. IE9) allow the use of "currentColor" to match the current font 'color' value <http://www.w3.org/TR/css3-color/#currentcolor>. For older browsers, a default of 'black' is given before this rule. Guideline to support older browsers: if you haven't already declared a border-color for an element, be sure to do so, e.g. when you first declare the border-width. */
 34 |     border-radius:0 !important;
 35 |     border-style:none !important;
 36 |     border-width:medium !important;
 37 |     bottom:auto !important;
 38 |     clear:none !important;
 39 |     clip:auto !important;
 40 |     color:inherit !important;
 41 |     counter-increment:none !important;
 42 |     counter-reset:none !important;
 43 |     cursor:auto !important;
 44 |     direction:inherit !important;
 45 |     display:inline !important;
 46 |     float:none !important;
 47 |     font-family: inherit !important; /* As with other inherit values, this needs to be set on the root container element */
 48 |     font-size: inherit !important;
 49 |     font-style:inherit !important;
 50 |     font-variant:normal !important;
 51 |     font-weight:inherit !important;
 52 |     height:auto !important;
 53 |     left:auto !important;
 54 |     letter-spacing:normal !important;
 55 |     line-height:inherit !important;
 56 |     list-style-type: inherit !important; /* Could set list-style-type to none */
 57 |     list-style-position: outside !important;
 58 |     list-style-image: none !important;
 59 |     margin:0 !important;
 60 |     max-height:none !important;
 61 |     max-width:none !important;
 62 |     min-height:0 !important;
 63 |     min-width:0 !important;
 64 |     opacity:1;
 65 |     outline:invert none medium !important;
 66 |     overflow:visible !important;
 67 |     padding:0 !important;
 68 |     position:static !important;
 69 |     quotes: "" "" !important;
 70 |     right:auto !important;
 71 |     table-layout:auto !important;
 72 |     text-align:inherit !important;
 73 |     text-decoration:inherit !important;
 74 |     text-indent:0 !important;
 75 |     text-transform:none !important;
 76 |     top:auto !important;
 77 |     unicode-bidi:normal !important;
 78 |     vertical-align:baseline !important;
 79 |     visibility:inherit !important;
 80 |     white-space:normal !important;
 81 |     width:auto !important;
 82 |     word-spacing:normal !important;
 83 |     z-index:auto !important;
 84 | 
 85 |     /* CSS3 */
 86 |     /* Including all prefixes according to http://caniuse.com/ */
 87 |     /* CSS Animations don't cascade, so don't require resetting */
 88 |     -webkit-background-origin: padding-box !important;
 89 |             background-origin: padding-box !important;
 90 |     -webkit-background-clip: border-box !important;
 91 |             background-clip: border-box !important;
 92 |     -webkit-background-size: auto !important;
 93 |        -moz-background-size: auto !important;
 94 |             background-size: auto !important;
 95 |     -webkit-border-image: none !important;
 96 |        -moz-border-image: none !important;
 97 |          -o-border-image: none !important;
 98 |             border-image: none !important;
 99 |     -webkit-border-radius:0 !important;
100 |        -moz-border-radius:0 !important;
101 |             border-radius: 0 !important;
102 |     -webkit-box-shadow: none !important;
103 |             box-shadow: none !important;
104 |     -webkit-box-sizing: content-box !important;
105 |        -moz-box-sizing: content-box !important;
106 |             box-sizing: content-box !important;
107 |     -webkit-column-count: auto !important;
108 |        -moz-column-count: auto !important;
109 |             column-count: auto !important;
110 |     -webkit-column-gap: normal !important;
111 |        -moz-column-gap: normal !important;
112 |             column-gap: normal !important;
113 |     -webkit-column-rule: medium none black !important;
114 |        -moz-column-rule: medium none black !important;
115 |             column-rule: medium none black !important;
116 |     -webkit-column-span: 1 !important;
117 |        -moz-column-span: 1 !important; /* doesn't exist yet but probably will */
118 |             column-span: 1 !important;
119 |     -webkit-column-width: auto !important;
120 |        -moz-column-width: auto !important;
121 |             column-width: auto !important;
122 |     font-feature-settings: normal !important;
123 |     overflow-x: visible !important;
124 |     overflow-y: visible !important;
125 |     -webkit-hyphens: manual !important;
126 |        -moz-hyphens: manual !important;
127 |             hyphens: manual !important;
128 |     -webkit-perspective: none !important;
129 |        -moz-perspective: none !important;
130 |         -ms-perspective: none !important;
131 |          -o-perspective: none !important;
132 |             perspective: none !important;
133 |     -webkit-perspective-origin: 50% 50% !important;
134 |        -moz-perspective-origin: 50% 50% !important;
135 |         -ms-perspective-origin: 50% 50% !important;
136 |          -o-perspective-origin: 50% 50% !important;
137 |             perspective-origin: 50% 50% !important;
138 |     -webkit-backface-visibility: visible !important;
139 |        -moz-backface-visibility: visible !important;
140 |         -ms-backface-visibility: visible !important;
141 |          -o-backface-visibility: visible !important;
142 |             backface-visibility: visible !important;
143 |     text-shadow: none !important;
144 |     -webkit-transition: all 0s ease 0s !important;
145 |             transition: all 0s ease 0s !important;
146 |     -webkit-transform: none !important;
147 |        -moz-transform: none !important;
148 |         -ms-transform: none !important;
149 |          -o-transform: none !important;
150 |             transform: none !important;
151 |     -webkit-transform-origin: 50% 50% !important;
152 |        -moz-transform-origin: 50% 50% !important;
153 |         -ms-transform-origin: 50% 50% !important;
154 |          -o-transform-origin: 50% 50% !important;
155 |             transform-origin: 50% 50% !important;
156 |     -webkit-transform-style: flat !important;
157 |        -moz-transform-style: flat !important;
158 |         -ms-transform-style: flat !important;
159 |          -o-transform-style: flat !important;
160 |             transform-style: flat !important;
161 |     word-break: normal !important;
162 | }
163 | 
164 | /* == BLOCK-LEVEL == */
165 | /* Actually, some of these should be inline-block and other values, but block works fine (TODO: rigorously verify this) */
166 | /* HTML 4.01 */
167 | .cleanslate, .cleanslate h3, .cleanslate h5, .cleanslate p, .cleanslate h1, .cleanslate dl, .cleanslate dt, .cleanslate h6, .cleanslate ol, .cleanslate form, .cleanslate option, .cleanslate pre, .cleanslate div, .cleanslate h2, .cleanslate caption, .cleanslate h4, .cleanslate ul, .cleanslate address, .cleanslate blockquote, .cleanslate dd, .cleanslate fieldset, .cleanslate hr,
168 | 
169 | /* HTML5 new elements */
170 | .cleanslate article, .cleanslate dialog, .cleanslate figure, .cleanslate footer, .cleanslate header, .cleanslate hgroup, .cleanslate menu, .cleanslate nav, .cleanslate section, .cleanslate audio, .cleanslate video, .cleanslate address, .cleanslate blockquote, .cleanslate colgroup, .cleanslate main, .cleanslate progress, .cleanslate summary {
171 |     display:block !important;
172 | }
173 | .cleanslate h1, .cleanslate h2, .cleanslate h3, .cleanslate h4, .cleanslate h5, .cleanslate h6 {
174 |     font-weight: bold !important;
175 | }
176 | .cleanslate h1 {
177 |     font-size: 2em !important;
178 |     padding: .67em 0 !important;
179 | }
180 | .cleanslate h2 {
181 |     font-size: 1.5em !important;
182 |     padding: .83em 0 !important;
183 | }
184 | .cleanslate h3 {
185 |     font-size: 1.17em !important;
186 |     padding: .83em 0 !important;
187 | }
188 | .cleanslate h4 {
189 |     font-size: 1em !important;
190 | }
191 | .cleanslate h5 {
192 |     font-size: .83em !important;
193 | }
194 | .cleanslate p {
195 |     margin: 1em 0 !important;
196 | }
197 | .cleanslate table {
198 |     display: table !important;
199 | }
200 | .cleanslate thead {
201 |     display: table-header-group !important;
202 | }
203 | .cleanslate tbody {
204 |     display: table-row-group !important;
205 | }
206 | .cleanslate tfoot {
207 |     display: table-footer-group !important;
208 | }
209 | .cleanslate tr {
210 |     display: table-row !important;
211 | }
212 | .cleanslate th, .cleanslate td {
213 |     display: table-cell !important;
214 |     padding: 2px !important;
215 | }
216 | 
217 | /* == SPECIFIC ELEMENTS == */
218 | /* Some of these are browser defaults; some are just useful resets */
219 | .cleanslate ol, .cleanslate ul {
220 |     margin: 1em 0 !important;
221 | }
222 | .cleanslate ul li, .cleanslate ul ul li, .cleanslate ul ul ul li, .cleanslate ol li, .cleanslate ol ol li, .cleanslate ol ol ol li, .cleanslate ul ol ol li, .cleanslate ul ul ol li, .cleanslate ol ul ul li, .cleanslate ol ol ul li {
223 |     list-style-position: inside !important;
224 |     margin-top: .08em !important;
225 | }
226 | .cleanslate ol ol, .cleanslate ol ol ol, .cleanslate ul ul, .cleanslate ul ul ul, .cleanslate ol ul, .cleanslate ol ul ul, .cleanslate ol ol ul, .cleanslate ul ol, .cleanslate ul ol ol, .cleanslate ul ul ol {
227 |     padding-left: 40px !important;
228 |     margin: 0 !important;
229 | }
230 | /* helper for general navigation */
231 | .cleanslate nav ul, .cleanslate nav ol {
232 |     list-style-type:none !important;
233 | 
234 | }
235 | .cleanslate ul, .cleanslate menu {
236 |     list-style-type:disc !important;
237 | }
238 | .cleanslate ol {
239 |     list-style-type:decimal !important;
240 | }
241 | .cleanslate ol ul, .cleanslate ul ul, .cleanslate menu ul, .cleanslate ol menu, .cleanslate ul menu, .cleanslate menu menu {
242 |     list-style-type:circle !important;
243 | }
244 | .cleanslate ol ol ul, .cleanslate ol ul ul, .cleanslate ol menu ul, .cleanslate ol ol menu, .cleanslate ol ul menu, .cleanslate ol menu menu, .cleanslate ul ol ul, .cleanslate ul ul ul, .cleanslate ul menu ul, .cleanslate ul ol menu, .cleanslate ul ul menu, .cleanslate ul menu menu, .cleanslate menu ol ul, .cleanslate menu ul ul, .cleanslate menu menu ul, .cleanslate menu ol menu, .cleanslate menu ul menu, .cleanslate menu menu menu {
245 |     list-style-type:square !important;
246 | }
247 | .cleanslate li {
248 |     display:list-item !important;
249 |     /* Fixes IE7 issue with positioning of nested bullets */
250 |     min-height:auto !important;
251 |     min-width:auto !important;
252 |     padding-left: 20px !important; /* replace -webkit-padding-start: 40px; */
253 | }
254 | .cleanslate strong {
255 |     font-weight:bold !important;
256 | }
257 | .cleanslate em {
258 |     font-style:italic !important;
259 | }
260 | .cleanslate kbd, .cleanslate samp, .cleanslate code, .cleanslate pre {
261 |   font-family:monospace !important;
262 | }
263 | .cleanslate a {
264 |     color: blue !important;
265 |     text-decoration: underline !important;
266 | }
267 | .cleanslate a:visited {
268 |     color: #529 !important;
269 | }
270 | .cleanslate a, .cleanslate a *, .cleanslate input[type=submit], .cleanslate input[type=button], .cleanslate input[type=radio], .cleanslate input[type=checkbox], .cleanslate select, .cleanslate button {
271 |     cursor:pointer !important;
272 | }
273 | .cleanslate button, .cleanslate input[type=submit] {
274 |     text-align: center !important;
275 |     padding: 2px 6px 3px !important;
276 |     border-radius: 4px !important;
277 |     text-decoration: none !important;
278 |     font-family: arial, helvetica, sans-serif !important;
279 |     font-size: small !important;
280 |     background: white !important;
281 |     -webkit-appearance: push-button !important;
282 |     color: buttontext !important;
283 |     border: 1px #a6a6a6 solid !important;
284 |     background: lightgrey !important; /* Old browsers */
285 |     background: rgb(255,255,255); /* Old browsers */
286 |     background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%, rgba(209,209,209,1) 100%, rgba(221,221,221,1) 100%) !important; /* FF3.6+ */
287 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)), color-stop(100%,rgba(209,209,209,1)), color-stop(100%,rgba(221,221,221,1))) !important; /* Chrome,Safari4+ */
288 |     background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* Chrome10+,Safari5.1+ */
289 |     background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* Opera 11.10+ */
290 |     background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* IE10+ */
291 |     background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%,rgba(209,209,209,1) 100%,rgba(221,221,221,1) 100%) !important; /* W3C */
292 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ) !important; /* IE6-9 */
293 |     -webkit-box-shadow: 1px 1px 0px #eee !important;
294 |        -moz-box-shadow: 1px 1px 0px #eee !important;
295 |          -o-box-shadow: 1px 1px 0px #eee !important;
296 |             box-shadow: 1px 1px 0px #eee !important;
297 |     outline: initial !important;
298 | }
299 | .cleanslate button:active, .cleanslate input[type=submit]:active, .cleanslate input[type=button]:active, .cleanslate button:active {
300 | 	background: rgb(59,103,158) !important; /* Old browsers */
301 | 	background: -moz-linear-gradient(top, rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%) !important; /* FF3.6+ */
302 | 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))) !important; /* Chrome,Safari4+ */
303 | 	background: -webkit-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* Chrome10+,Safari5.1+ */
304 | 	background: -o-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* Opera 11.10+ */
305 | 	background: -ms-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* IE10+ */
306 | 	background: linear-gradient(to bottom, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%) !important; /* W3C */
307 | 	border-color: #5259b0 !important;
308 | }
309 | .cleanslate button {
310 |     padding: 1px 6px 2px 6px !important;
311 |     margin-right: 5px !important;
312 | }
313 | .cleanslate input[type=hidden] {
314 |     display:none !important;
315 | }
316 | /* restore form defaults */
317 | .cleanslate textarea {
318 |     -webkit-appearance: textarea !important;
319 |     background: white !important;
320 |     padding: 2px !important;
321 |     margin-left: 4px !important;
322 |     word-wrap: break-word !important;
323 |     white-space: pre-wrap !important;
324 |     font-size: 11px !important;
325 |     font-family: arial, helvetica, sans-serif !important;
326 |     line-height: 13px !important;
327 |     resize: both !important;
328 | }
329 | .cleanslate select, .cleanslate textarea, .cleanslate input {
330 |     border:1px solid #ccc !important;
331 | }
332 | .cleanslate select {
333 |     font-size: 11px !important;
334 |     font-family: helvetica, arial, sans-serif !important;
335 |     display: inline-block;
336 | }
337 | .cleanslate textarea:focus, .cleanslate input:focus {
338 |     outline: auto 5px -webkit-focus-ring-color !important;
339 |     outline: initial !important;
340 | }
341 | .cleanslate input[type=text] {
342 |     background: white !important;
343 |     padding: 1px !important;
344 |     font-family: initial !important;
345 |     font-size: small !important;
346 | }
347 | .cleanslate input[type=checkbox], .cleanslate input[type=radio] {
348 |     border: 1px #2b2b2b solid !important;
349 |     border-radius: 4px !important;
350 | }
351 | .cleanslate input[type=checkbox], .cleanslate input[type=radio] {
352 |     outline: initial !important;
353 | }
354 | .cleanslate input[type=radio] {
355 |     margin: 2px 2px 3px 2px !important;
356 | }
357 | .cleanslate abbr[title], .cleanslate acronym[title], .cleanslate dfn[title] {
358 |     cursor:help !important;
359 |     border-bottom-width:1px !important;
360 |     border-bottom-style:dotted !important;
361 | }
362 | .cleanslate ins {
363 |     background-color:#ff9 !important;
364 |     color:black !important;
365 | }
366 | .cleanslate del {
367 |     text-decoration: line-through !important;
368 | }
369 | .cleanslate blockquote, .cleanslate q  {
370 |     quotes:none !important; /* HTML5 */
371 | }
372 | .cleanslate blockquote:before, .cleanslate blockquote:after, .cleanslate q:before, .cleanslate q:after, .cleanslate li:before, .cleanslate li:after  {
373 |     content:"" !important;
374 | }
375 | .cleanslate input, .cleanslate select {
376 |     vertical-align:middle !important;
377 | }
378 | 
379 | .cleanslate table {
380 |     border-collapse:collapse !important;
381 |     border-spacing:0 !important;
382 | }
383 | .cleanslate hr {
384 |     display:block !important;
385 |     height:1px !important;
386 |     border:0 !important;
387 |     border-top:1px solid #ccc !important;
388 |     margin:1em 0 !important;
389 | }
390 | .cleanslate *[dir=rtl] {
391 |     direction: rtl !important;
392 | }
393 | .cleanslate mark {
394 |     background-color:#ff9 !important;
395 |     color:black !important;
396 |     font-style:italic !important;
397 |     font-weight:bold !important;
398 | }
399 | .cleanslate menu {
400 |     padding-left: 40px !important;
401 |     padding-top: 8px !important;
402 | }
403 | 
404 | /* additional helpers */
405 | .cleanslate [hidden],
406 | .cleanslate template {
407 |     display: none !important;
408 | }
409 | .cleanslate abbr[title] {
410 |     border-bottom: 1px dotted !important;
411 | }
412 | .cleanslate sub, .cleanslate sup {
413 |     font-size: 75% !important;
414 |     line-height: 0 !important;
415 |     position: relative !important;
416 |     vertical-align: baseline !important;
417 | }
418 | .cleanslate sup {
419 |     top: -0.5em !important;
420 | }
421 | .cleanslate sub {
422 |     bottom: -0.25em !important;
423 | }
424 | .cleanslate img {
425 |     border: 0 !important;
426 | }
427 | .cleanslate figure {
428 |     margin: 0 !important;
429 | }
430 | .cleanslate textarea {
431 |     overflow: auto !important;
432 |     vertical-align: top !important;
433 | }
434 | 
435 | /* == ROOT CONTAINER ELEMENT == */
436 | /* This contains default values for child elements to inherit  */
437 | .cleanslate {
438 |     font-size: medium !important;
439 |     line-height: 1 !important;
440 |     direction:ltr !important;
441 |     text-align: left !important; /* for IE, Opera */
442 |     text-align: start !important; /* recommended W3C Spec */
443 |     font-family: "Times New Roman", Times, serif !important; /* Override this with whatever font-family is required */
444 |     color: black !important;
445 |     font-style:normal !important;
446 |     font-weight:normal !important;
447 |     text-decoration:none !important;
448 |     list-style-type:disc !important;
449 | }
450 | 
451 | .cleanslate pre {
452 |     white-space:pre !important;
453 | }
454 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 2 | const increaseSpecificity = require('postcss-increase-specificity');
 3 | const autoprefixer = require('autoprefixer');
 4 | const CopyPlugin = require('copy-webpack-plugin');
 5 | const path = require('path');
 6 | 
 7 | const devMode = process.env.NODE_ENV !== 'production';
 8 | 
 9 | const publicDir = path.join(__dirname, 'public');
10 | const distDir = path.join(__dirname, 'dist');
11 | 
12 | const defaultConfig = {
13 |   mode: process.env.NODE_ENV || 'development',
14 |   devServer: {
15 |     contentBase: publicDir,
16 |     port: 9000,
17 |   },
18 |   plugins: [
19 |     // new CleanWebpackPlugin({protectWebpackAssets: false}),
20 |     new MiniCssExtractPlugin({
21 |       // Options similar to the same options in webpackOptions.output
22 |       // both options are optional
23 |       filename: devMode ? '[name].css' : '[name].[hash].css',
24 |       chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
25 |     }),
26 |     new CopyPlugin([
27 |       { from: 'public', to: '.' },
28 |     ]),
29 |   ],
30 |   module: {
31 |     rules: [
32 |       {
33 |         test: /\.(js|jsx)$/,
34 |         exclude: /node_modules/,
35 |         use: ['babel-loader'],
36 |       },
37 |       {
38 |         test: /\.js$/,
39 |         exclude: /node_modules/,
40 |         loader: 'eslint-loader',
41 |         options: {
42 |           emitWarning: true,
43 |         },
44 |       },
45 |       {
46 |         test: /\.(scss|css)$/,
47 |         use: [
48 |           // fallback to style-loader in development
49 |           // devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
50 |           'style-loader',
51 |           'css-loader',
52 |           'cssimportant-loader',
53 |           {
54 |             loader: 'postcss-loader',
55 |             options: {
56 |               ident: 'postcss',
57 |               plugins: [
58 |                 increaseSpecificity({
59 |                   stackableRoot: '.cleanslate',
60 |                   repeat: 1,
61 |                 }),
62 |                 autoprefixer()
63 |               ],
64 |               sourceMap: devMode,
65 |             },
66 |           },
67 |           'sass-loader',
68 |         ],
69 |       },
70 |     ],
71 |   },
72 |   resolve: {
73 |     extensions: ['*', '.js', '.jsx'],
74 |   },
75 |   node: { fs: 'empty' }
76 | };
77 | 
78 | module.exports = [{
79 |   ...defaultConfig,
80 |   entry: './src/outputs/embeddable-chatbox.js',
81 |   output: {
82 |     path: distDir,
83 |     publicPath: '/',
84 |     filename: 'chatbox.js',
85 |     library: 'EmbeddableChatbox',
86 |     libraryExport: 'default',
87 |     libraryTarget: 'window',
88 |   },
89 | }, {
90 |   ...defaultConfig,
91 |   entry: './src/outputs/bookmarklet.js',
92 |   output: {
93 |     path: distDir,
94 |     publicPath: '/',
95 |     filename: 'bookmarklet.js',
96 |   },
97 | }];
98 | 


--------------------------------------------------------------------------------