├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── README.md
├── app.js
├── classes
    ├── markdown.js
    ├── message-handler.js
    └── sanitizer.js
├── components
    ├── avatar.jsx
    ├── client.jsx
    ├── event-tile.jsx
    ├── message-composer.jsx
    ├── message-toolbar.jsx
    ├── modal.jsx
    ├── reply-popup.jsx
    ├── room-header.jsx
    ├── room-tile.jsx
    ├── rooms-list.jsx
    ├── sign-in-form.jsx
    ├── theme-context.jsx
    └── timeline-panel.jsx
├── docs.md
├── index.html
├── package-lock.json
├── package.json
├── res
    ├── delete.svg
    ├── quote.svg
    ├── read.svg
    └── reply.svg
├── styles
    ├── colors.scss
    ├── layout.scss
    ├── main.scss
    └── themes.scss
├── test-page.html
└── webpack.config.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /dist


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     'env': {
 3 |         'browser': true,
 4 |         'es6': true,
 5 |         'node': true
 6 |     },
 7 |     'extends': [
 8 |         'eslint:recommended',
 9 |         'plugin:react/recommended'
10 |     ],
11 |     'globals': {
12 |         'Atomics': 'readonly',
13 |         'SharedArrayBuffer': 'readonly'
14 |     },
15 |     'parser': 'babel-eslint',
16 |     'parserOptions': {
17 |         'ecmaFeatures': {
18 |             'jsx': true
19 |         },
20 |         'ecmaVersion': 11,
21 |         'sourceType': 'module'
22 |     },
23 |     'plugins': [
24 |         'react'
25 |     ],
26 |     'rules': {
27 |         'strict': 0,
28 |         'indent': [
29 |             'error',
30 |             4
31 |         ],
32 |         'linebreak-style': [
33 |             'error',
34 |             'unix'
35 |         ],
36 |         'quotes': [
37 |             'error',
38 |             'single'
39 |         ],
40 |         'semi': [
41 |             'error',
42 |             'always'
43 |         ]
44 |     }
45 | };
46 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | config.js


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # riot-embedded
 2 | Embedded version of Riot. Currently work in progress. 
 3 | ## Development workflow   
 4 | ### Installing dependencies
 5 | ```
 6 | npm install
 7 | ```
 8 | ### Creating a bundle
 9 | #### For development:
10 | ```
11 | npm run dev
12 | ```
13 | #### For production:
14 | ```
15 | npm run build
16 | ```
17 | ### Deploying to `webpack-dev-server` with hot reloading enabled (deployed on port 9000)
18 | ```
19 | npm start
20 | ```
21 | ### Running the linter
22 | ```
23 | npm run lint
24 | ```
25 | ### Configuration
26 | Create `config.js` in the root directory of the repository with the following format.
27 | ```js
28 | export let config = {
29 |     baseUrl: '<BASE URL>',
30 |     roomId: '<DEFAULT ROOM ID>',
31 |     userId: '<DEFAULT USER ID>',
32 |     accessToken: '<DEFAULT ACCESS TOKEN>'
33 | };
34 | ```
35 | Leave out `userId` and `accessToken` to attempt registration as guest.   
36 | To set custom highlight colors, change the Sass variables `$color-highlight-custom` and `$color-txt-custom` in `styles/colors.scss` and set `highlight` to `'custom'` in the configuration. 
37 | #### Complete list of options:
38 | *  `baseUrl` (*string*) - Base URL of homeserver - **Required**
39 | *  `roomId` (*string*) - The internal ID of default room - **Required** 
40 | *  `userId` (*string*) - The ID of default user            
41 |     Ignore to register as guest
42 | *  `accessToken` (*string*) - Access token of default user     
43 |     Ignore to register as guest
44 | *  `readOnly` (*boolean*) - If the client is in read-only mode    
45 |     - `true`
46 |     - `false` (default)        
47 |     Disables `msgComposer` and `roomsList` (unless overriden)
48 | *  `theme` (*string*) - Theme of the client
49 |     - `'dark'` - Dark theme (default)
50 |     - `'light'` - Light theme
51 |     - `'auto'` - Use device theme
52 | *  `highlight` (*string*) - Highlight color  
53 |     - `'pink'` - Pink highlights (default)  
54 |     - `'green'` - Green highlights
55 |     - `'custom'` - Custom highlight color
56 | *  `roomHeader` (*boolean*) - If room header should be displayed        
57 |     - `true` (default)
58 |     - `false`          
59 | *  `roomsList` (*boolean*) - If rooms list should be displayed (overrides `readOnly`)      
60 |     - `true` (default)
61 |     - `false`          
62 | *  `msgComposer` (*boolean*) - If message composer should be displayed (overrides `readOnly`)          
63 |     - `true` (default)
64 |     - `false`          
65 | *  `whitelist` (*Array*) - Whitelisted origins         
66 |     Ignore to allow all origins
67 | *  `signInPrompt` (*string*) - Show sign in prompts    
68 |     - `'none'` - Never show (default)
69 |     - `'guests'` - Show if signed in as guest
70 |     - `'all'` - Always show


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | import {config} from './config.js';
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom';
 4 | import Client from './components/client.jsx';
 5 | import ThemeContext from './components/theme-context.jsx';
 6 | require('./styles/main.scss');
 7 | 
 8 | ReactDOM.render(
 9 |     <Client {...config} />,
10 |     document.getElementById('root')
11 | );


--------------------------------------------------------------------------------
/classes/markdown.js:
--------------------------------------------------------------------------------
 1 | import commonmark from 'commonmark';
 2 | 
 3 | /**
 4 |  * Class for generating HTML from markdown messages
 5 |  * 
 6 |  * @param   {string} input - Message body containing markdown
 7 |  */
 8 | export default class Markdown {
 9 |     constructor(input) {
10 |         // Replace < to escape HTML
11 |         input = input.replace(/</g, '&lt;');
12 |         const parser = new commonmark.Parser();
13 |         this.parsed = parser.parse(input);
14 |     }
15 | 
16 |     /** Return parsed HTML */
17 |     toHtml() {
18 |         const renderer = new commonmark.HtmlRenderer({
19 |             safe: false,
20 |             softbreak: '<br />'
21 |         });
22 | 
23 |         return renderer.render(this.parsed);
24 |     }
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/classes/message-handler.js:
--------------------------------------------------------------------------------
  1 | import EventEmitter from 'events';
  2 | 
  3 | /**
  4 |  * Class for handling messages to and from parent frame
  5 |  * 
  6 |  * @param   {Array} origins - List of whitelisted origin domains
  7 |  */
  8 | export default class MessageHandler extends EventEmitter{
  9 |     constructor(origins) {
 10 |         super();
 11 |         this.origins = origins;
 12 | 
 13 |         this.onMessage = this.onMessage.bind(this);
 14 | 
 15 |         // Attach listener to window
 16 |         window.addEventListener('message', this.onMessage, false);
 17 |     }
 18 | 
 19 |     /** Callback for handling messages */
 20 |     onMessage(event) {
 21 |         // Origin of message event
 22 |         let origin = event.origin;
 23 | 
 24 |         if (!origin) {
 25 |             // Chrome fix
 26 |             origin = event.originalEvent.origin;
 27 |         }
 28 | 
 29 |         // If origin is in whitelist or if whitelist is undefined
 30 |         if ( this.origins === undefined || this.origins.includes(origin) ) {
 31 |             let data = event.data;
 32 | 
 33 |             // Parse data
 34 |             this.parseMessage(data);
 35 |         }
 36 |     }
 37 | 
 38 |     /** Parse message and invoke a command */
 39 |     parseMessage(data) {
 40 |         // Check if data is an object
 41 |         if (typeof data !== 'object') {
 42 |             parent.postMessage({
 43 |                 'status' : 'error',
 44 |                 'message' : 'Invalid message format.'
 45 |             }, '*');
 46 |             return;
 47 |         }
 48 | 
 49 |         let cmd = data.cmd;
 50 |         if (typeof cmd !== 'string') {
 51 |             parent.postMessage({
 52 |                 'status' : 'error',
 53 |                 'message' : 'Invalid or missing command.'
 54 |             }, '*');
 55 |             return;
 56 |         }
 57 | 
 58 |         // Invoke command
 59 |         let args = data.args;
 60 |         switch(cmd) {
 61 |         case 'setTheme':
 62 |             // Change theme
 63 |             if (typeof args !== 'object') {
 64 |                 parent.postMessage({
 65 |                     'status' : 'error',
 66 |                     'message' : 'Invalid or missing arguments.'
 67 |                 }, '*');
 68 |                 return;
 69 |             }
 70 |             this.emit('setTheme', args);
 71 |             parent.postMessage({
 72 |                 'status' : 'success',
 73 |                 'message' : 'Theme set.'
 74 |             }, '*');
 75 |             break;
 76 | 
 77 |         case 'roomHeader':
 78 |             // Toggle room header
 79 |             if (typeof args !== 'boolean') {
 80 |                 parent.postMessage({
 81 |                     'status' : 'error',
 82 |                     'message' : 'Invalid or missing arguments.'
 83 |                 }, '*');
 84 |                 return;
 85 |             }
 86 |             this.emit('roomHeader', args);
 87 |             parent.postMessage({
 88 |                 'status' : 'success',
 89 |                 'message' : 'Toggled room header.'
 90 |             }, '*');
 91 |             break;
 92 | 
 93 |         case 'roomsList':
 94 |             // Toggle rooms list
 95 |             if (typeof args !== 'boolean') {
 96 |                 parent.postMessage({
 97 |                     'status' : 'error',
 98 |                     'message' : 'Invalid or missing arguments.'
 99 |                 }, '*');
100 |                 return;
101 |             }
102 |             this.emit('roomsList', args);
103 |             parent.postMessage({
104 |                 'status' : 'success',
105 |                 'message' : 'Toggled rooms list.'
106 |             }, '*');
107 |             break;
108 | 
109 |         case 'msgComposer':
110 |             // Toggle message composer
111 |             if (typeof args !== 'boolean') {
112 |                 parent.postMessage({
113 |                     'status' : 'error',
114 |                     'message' : 'Invalid or missing arguments.'
115 |                 }, '*');
116 |                 return;
117 |             }
118 |             this.emit('msgComposer', args);
119 |             parent.postMessage({
120 |                 'status' : 'success',
121 |                 'message' : 'Toggled message composer.'
122 |             }, '*');
123 |             break;
124 | 
125 |         case 'login':
126 |             // Sign in to account using password
127 |             if (typeof args !== 'object') {
128 |                 parent.postMessage({
129 |                     'status' : 'error',
130 |                     'message' : 'Invalid or missing arguments.'
131 |                 }, '*');
132 |                 return;
133 |             }
134 |             this.emit('login', args);
135 |             parent.postMessage({
136 |                 'status' : 'success',
137 |                 'message' : 'Attempting sign in...'
138 |             }, '*');
139 |             break;
140 | 
141 |         case 'switchRoom':
142 |             // Switch to this room
143 |             if (typeof args !== 'string') {
144 |                 parent.postMessage({
145 |                     'status' : 'error',
146 |                     'message' : 'Invalid or missing arguments.'
147 |                 }, '*');
148 |                 return;
149 |             }
150 |             this.emit('switchRoom', args);
151 |             parent.postMessage({
152 |                 'status' : 'success',
153 |                 'message' : 'Attempting to switch room...'
154 |             }, '*');
155 |             break;
156 | 
157 |         default:
158 |             // No matching command
159 |             parent.postMessage({
160 |                 'status' : 'error',
161 |                 'message' : 'Invalid command.'
162 |             }, '*');
163 |             return;
164 |         }
165 |     }
166 | }


--------------------------------------------------------------------------------
/classes/sanitizer.js:
--------------------------------------------------------------------------------
 1 | import sanitizeHtml from 'sanitize-html';
 2 | 
 3 | /**
 4 |  * Class for sanitizing HTML
 5 |  * 
 6 |  * @param   {string} html - HTML to sanitize
 7 |  * @param   {object} params - Custom parameters for sanitization (optional)
 8 |  */
 9 | export default class Sanitizer {
10 |     constructor(html, params=null) {
11 |         this.html = html;
12 | 
13 |         // Sanitizer Params copied from matrix-react-sdk
14 |         this.sanitizeHtmlParams = {
15 |             allowedTags: [
16 |                 'font', // custom to matrix for IRC-style font coloring
17 |                 'del', // for markdown
18 |                 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'sup', 'sub',
19 |                 'nl', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
20 |                 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span', 'img',
21 |             ],
22 |             allowedAttributes: {
23 |                 font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
24 |                 span: ['data-mx-bg-color', 'data-mx-color', 'data-mx-spoiler', 'style'], // custom to matrix
25 |                 // a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
26 |                 img: ['src', 'width', 'height', 'alt', 'title'],
27 |                 ol: ['start'],
28 |                 code: ['class'],
29 |             },
30 |             selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta'],
31 | 
32 |             transformTags: {
33 |                 'a': 'b',
34 |             }
35 |         };
36 |         if (params) this.sanitizeHtmlParams = params;
37 | 
38 |         this.sanitize = this.sanitize.bind(this);
39 |     }
40 | 
41 |     /** Sanitize HTML for client */
42 |     sanitize() {
43 |         return sanitizeHtml(this.html, this.sanitizeHtmlParams);
44 |     }
45 | }


--------------------------------------------------------------------------------
/components/avatar.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | /** 
 5 |  * React component for an avatar icon
 6 |  * 
 7 |  * @param   {string} imgUrl - The avatar URL
 8 |  * @param   {number} size - The height and width of avatar
 9 |  * @param   {string} name - String to get initial letter from
10 |  */
11 | export default class Avatar extends PureComponent {
12 |     static propTypes = {
13 |         imgUrl: PropTypes.string, // The avatar URL
14 |         size: PropTypes.number, // The height and width of avatar
15 |         name: PropTypes.string, // String to get initial letter from
16 |     };
17 | 
18 |     /** Get first letter of name */
19 |     getInitialLetter() {
20 |         let idx = 0;
21 |         if (['@', '#', '+'].includes(this.props.name[0]) && this.props.name[1]) idx++;
22 |         let char = String.fromCharCode(this.props.name.codePointAt(idx));
23 |         return char.toUpperCase();
24 |     }
25 | 
26 |     /** Hash function for names */
27 |     cyrb53(str, seed = 0) {
28 |         let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
29 |         for (let i = 0, ch; i < str.length; i++) {
30 |             ch = str.charCodeAt(i);
31 |             h1 = Math.imul(h1 ^ ch, 2654435761);
32 |             h2 = Math.imul(h2 ^ ch, 1597334677);
33 |         }
34 |         h1 = Math.imul(h1 ^ h1>>>16, 2246822507) ^ Math.imul(h2 ^ h2>>>13, 3266489909);
35 |         h2 = Math.imul(h2 ^ h2>>>16, 2246822507) ^ Math.imul(h1 ^ h1>>>13, 3266489909);
36 |         return 4294967296 * (2097151 & h2) + (h1>>>0);
37 |     }
38 | 
39 |     /** Generate HSL color from name */
40 |     generateHsl() {
41 |         let h = this.cyrb53(this.props.name)%360;
42 |         return `hsl(${h}, 100%, 30%)`;
43 |     }
44 | 
45 |     render() {
46 |         let imgUrl = this.props.imgUrl;
47 | 
48 |         // Placeholder avatar if imgUrl is falsy
49 |         if (!this.props.imgUrl) return (
50 |             <div className='rounded-container' style={{
51 |                 height: this.props.size,
52 |                 width: this.props.size,
53 |                 minHeight: this.props.size,
54 |                 minWidth: this.props.size,
55 |                 backgroundColor: this.generateHsl()
56 |             }}>
57 |                 <b>{this.getInitialLetter()}</b>
58 |             </div>
59 |         );
60 |         return (
61 |             <img src={imgUrl} 
62 |                 height={this.props.size} 
63 |                 width={this.props.size} 
64 |                 className='rounded-img'
65 |                 style={{
66 |                     minHeight: this.props.size,
67 |                     minWidth: this.props.size,
68 |                 }} />
69 |         );
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/components/client.jsx:
--------------------------------------------------------------------------------
  1 | import React, {Component, createRef} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import RoomsList from './rooms-list';
  4 | import TimelinePanel from './timeline-panel.jsx';
  5 | import RoomHeader from './room-header';
  6 | import MessageComposer from './message-composer';
  7 | import ThemeContext from './theme-context.jsx';
  8 | import Modal from './modal';
  9 | import SignInForm from './sign-in-form';
 10 | import ReplyPopup from './reply-popup';
 11 | import MessageHandler from '../classes/message-handler.js';
 12 | import Avatar from './avatar';
 13 | 
 14 | /** 
 15 |  * React component for the client 
 16 |  * 
 17 |  * @param   {string} roomId - The ID of default room
 18 |  * @param   {string} userId - The ID of default user
 19 |  * @param   {string} accessToken - Access token of default user
 20 |  * @param   {string} baseUrl - Base URL of homeserver
 21 |  * @param   {boolean} readOnly - If the client is in read-only mode
 22 |  * @param   {string} theme - Theme (dark or light)
 23 |  * @param   {string} highlight - Highlight color (green or pink)
 24 |  * @param   {boolean} roomHeader - If room header should be displayed
 25 |  * @param   {boolean} roomsList - If rooms list should be displayed
 26 |  * @param   {boolean} msgComposer - If message composer should be displayed
 27 |  * @param   {Array} whitelist - Whitelisted origins
 28 |  * @param   {string} signInPrompt - Show sign in prompt for - none, guests, all 
 29 |  */
 30 | export default class Client extends Component{
 31 |     static propTypes = {
 32 |         roomId: PropTypes.string.isRequired, // The ID of default room
 33 |         userId: PropTypes.string, // The ID of default user
 34 |         accessToken: PropTypes.string, // The access token of default user
 35 |         baseUrl: PropTypes.string.isRequired, // The base URL of homeserver
 36 |         readOnly: PropTypes.bool, // Enable read only mode
 37 |         theme: PropTypes.string, // Theme - default dark
 38 |         highlight: PropTypes.string, // Highlight - default pink
 39 |         roomHeader: PropTypes.bool, // Enable roomHeader? 
 40 |         roomsList: PropTypes.bool, // Enable roomsList? Overrides readOnly
 41 |         msgComposer: PropTypes.bool, // Enable msgComposer? Overrides readOnly
 42 |         whitelist: PropTypes.array, // Whitelisted origins - ignore to allow all
 43 |         signInPrompt: PropTypes.string // Show signInPrompt for - none, guests, all
 44 |     };
 45 | 
 46 |     constructor(props) {
 47 |         super(props);
 48 |         this.state = {
 49 |             room: null,
 50 |             theme: props.theme === undefined ? 'dark' : 
 51 |                 (props.theme === 'auto' ? this.getDeviceTheme() : props.theme),  // Client theme (dark/light)
 52 |             highlight: props.highlight === undefined ? 'pink' : props.highlight,   // Client theme highlight (pink/green)
 53 |             roomHeader: props.roomHeader !== undefined ? props.roomHeader : true,   // If room header should be displayed
 54 |             roomsList: props.roomsList !== undefined ? props.roomsList : 
 55 |                 props.readOnly !== undefined ? !props.readOnly : true,    // If rooms list should be displayed
 56 |             msgComposer: props.msgComposer !== undefined ? props.msgComposer : 
 57 |                 props.readOnly !== undefined ? !props.readOnly : true,  // If message composer should be displayed
 58 |             reply: null,    // Event to reply to
 59 |             connectionError: false,  // Display connection error message
 60 |             currentlyTyping: new Set(), //  People currently typing in the room
 61 |             readOnly: props.readOnly // If client is still read only
 62 |         };
 63 |         if (props.theme === 'auto') this.deviceTheme = true;
 64 |         this.sdk = require('matrix-js-sdk');
 65 | 
 66 |         // TODO: Load from whitelist from config
 67 |         this.messageHandler = new MessageHandler(this.props.whitelist);
 68 | 
 69 |         this.init = this.init.bind(this);
 70 |         this.onSelectRoom = this.onSelectRoom.bind(this);
 71 |         this._onRoomTimeline = this._onRoomTimeline.bind(this);
 72 |         this.setTheme = this.setTheme.bind(this);
 73 |         this.setUser = this.setUser.bind(this);
 74 |         this.toggleRoomHeader = this.toggleRoomHeader.bind(this);
 75 |         this.toggleRoomsList = this.toggleRoomsList.bind(this);
 76 |         this.toggleMsgComposer = this.toggleMsgComposer.bind(this);
 77 |         this.switchRoom = this.switchRoom.bind(this);
 78 |         this.login = this.login.bind(this);
 79 |         this.replyTo = this.replyTo.bind(this);
 80 |         this.showReceipts = this.showReceipts.bind(this);
 81 |         this.checkConnectivity = this.checkConnectivity.bind(this);
 82 |         this.joinRoomConsentSafe = this.joinRoomConsentSafe.bind(this);
 83 | 
 84 |         // Consume events from MessageHandler
 85 |         this.messageHandler.on('setTheme', this.setTheme);
 86 |         this.messageHandler.on('roomHeader', this.toggleRoomHeader);
 87 |         this.messageHandler.on('roomsList', this.toggleRoomsList);
 88 |         this.messageHandler.on('msgComposer', this.toggleMsgComposer);
 89 |         this.messageHandler.on('switchRoom', this.switchRoom);
 90 |         this.messageHandler.on('login', this.login);
 91 | 
 92 |         // Refs
 93 |         this.signInModal = createRef();
 94 |         this.receiptsModal = createRef();
 95 |         this.continueModal = createRef();
 96 |         this.consentModal = createRef();
 97 |         this.msgComposer = createRef();
 98 | 
 99 |         if (!props.accessToken || !props.userId) {
100 |             // If either accessToken or userId is absent
101 |             // Register as guest
102 |             this.isGuest = true;
103 | 
104 |             this.client = this.sdk.createClient({
105 |                 baseUrl: props.baseUrl
106 |             });
107 | 
108 |             this.client.registerGuest({}, (err, data) => {
109 |                 if (err) {
110 |                     console.log('ERR: ', err);
111 |                     return;
112 |                 }
113 | 
114 |                 let userId = data.user_id;
115 |                 let accessToken = data.access_token;
116 |                 this.client = this.sdk.createClient({
117 |                     baseUrl: props.baseUrl,
118 |                     accessToken: accessToken,
119 |                     userId: userId
120 |                 });
121 |                 this.client.setGuest(true);
122 |                 if (props.readOnly) {
123 |                     this.client.peekInRoom(this.props.roomId, {syncRoom: true}).then(() => {
124 |                         this.init();
125 |                     });
126 |                 } else {
127 |                     this.joinRoomConsentSafe(this.props.roomId, () => {
128 |                         this.init();
129 |                     });
130 |                 }
131 |             });
132 |         } else {
133 |             this.isGuest = false;
134 | 
135 |             this.client = this.sdk.createClient({
136 |                 baseUrl: props.baseUrl,
137 |                 accessToken: props.accessToken,
138 |                 userId: props.userId
139 |             });
140 | 
141 |             if (props.readOnly) {
142 |                 this.client.peekInRoom(this.props.roomId, {syncRoom: true}).then(() => {
143 |                     this.init();
144 |                 });
145 |             } else {
146 |                 this.client.joinRoom(this.props.roomId, {syncRoom: true}).then(() => {
147 |                     this.init();
148 |                 });
149 |             }
150 |         }
151 |     }
152 | 
153 |     /** Listener for timeline events */
154 |     _onRoomTimeline(event, room) {
155 |         if (room === this.state.room) {
156 |             // If event is from current room, update
157 |             this.setState({
158 |                 room: room
159 |             });
160 |         }
161 |     }
162 | 
163 |     /** Connect client to homeserver */
164 |     async init(callback=null) {
165 |         this.client.startClient();
166 |         this.client.once('sync', (state) => {
167 |             console.log(state);
168 |             if (state === 'PREPARED') {
169 |                 this.setState({
170 |                     room: this.client.getRoom(this.props.roomId)
171 |                 });
172 | 
173 |                 if (callback) callback();
174 | 
175 |                 // Add listeners
176 |                 this.client.on('Room.timeline', this._onRoomTimeline);
177 |                 this.client.on('sync', this.checkConnectivity);
178 |                 window.addEventListener('online', () => {
179 |                     // Force SDK to recheck
180 |                     this.client.retryImmediately();
181 |                 });
182 |                 window.addEventListener('offline', () => {
183 |                     // Manually show error
184 |                     this.setState({
185 |                         connectionError: true
186 |                     });
187 |                     this.client.retryImmediately();
188 |                 });
189 |                 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
190 |                     // Watch for changes in device theme
191 |                     const newTheme = e.matches ? 'dark' : 'light';
192 |                     if (this.deviceTheme) this.setState({ theme: newTheme });
193 |                 });                
194 |                 this.client.on('RoomMember.typing', (_, member) => {
195 |                     // Add or remove member from currently typing members
196 |                     let roomId = member.roomId;
197 |                     let username = member.name;
198 |                     let typing = member.typing;
199 |                     if (roomId === (this.state.room ? this.state.room.roomId : null)) {
200 |                         // If event is in current room
201 |                         let currentlyTyping = this.state.currentlyTyping;
202 |                         if (typing) {
203 |                             // Add to list
204 |                             if (!currentlyTyping.has(username)) {
205 |                                 currentlyTyping.add(username);
206 |                                 this.setState({
207 |                                     currentlyTyping: currentlyTyping
208 |                                 });
209 |                             }
210 |                         } else {
211 |                             // Remove from list
212 |                             if (currentlyTyping.delete(username)) {
213 |                                 this.setState({
214 |                                     currentlyTyping: currentlyTyping
215 |                                 });
216 |                             }
217 |                         }
218 |                     }
219 |                 });
220 |             }
221 |         });
222 |     }
223 | 
224 |     /** Join room with consent */
225 |     joinRoomConsentSafe(roomId, callback=null) {
226 |         this.client.joinRoom(roomId, {syncRoom: true})
227 |             .then(callback)
228 |             .catch(e => {
229 |                 if (e.errcode === 'M_CONSENT_NOT_GIVEN') {
230 |                     if (this.signInModal.current) this.signInModal.current.close();
231 |                     if (this.continueModal.current) this.continueModal.current.close();
232 |                     this.consentModal.current.open();
233 |                     document.querySelector('#consent-given').disabled = true;
234 |                     document.querySelector('#consent-error').style.display = 'none';
235 |                     this.consentHref = e.data.consent_uri;
236 |                     this.consentCallback = callback;
237 |                 } else console.log('Unhandled exception!', e);
238 |             });
239 |     }
240 | 
241 |     /** Get current device theme */
242 |     getDeviceTheme() {
243 |         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
244 |         return 'light';
245 |     }
246 | 
247 |     /** Handle clicks from room list */
248 |     onSelectRoom(e) {
249 |         // Unset reply
250 |         this.replyTo();
251 |         
252 |         let roomId = e.currentTarget.getAttribute('id');
253 |         this.setState({
254 |             room: this.client.getRoom(roomId),
255 |             currentlyTyping: new Set()
256 |         });
257 |     }
258 | 
259 |     /** Reinitialize client after login */
260 |     setUser(userId, accessToken, callback=null) {
261 |         this.isGuest = false;
262 | 
263 |         this.client = this.sdk.createClient({
264 |             baseUrl: this.props.baseUrl,
265 |             accessToken: accessToken,
266 |             userId: userId,
267 |             currentlyTyping: new Set()
268 |         });
269 | 
270 |         // Unset reply
271 |         this.replyTo();
272 | 
273 |         // Set R/W
274 |         this.setState({
275 |             readOnly: false
276 |         });
277 |         
278 |         this.init(callback);
279 |     }
280 | 
281 |     /** Set the reply */
282 |     replyTo(mxEvent=null) {
283 |         this.setState({
284 |             reply: mxEvent
285 |         });
286 |     }
287 | 
288 |     /** Consume setTheme event from MessageHandler */
289 |     setTheme(args) {
290 |         this.setState({
291 |             theme: args.theme ? 
292 |                 (args.theme === 'auto' ? this.getDeviceTheme() : args.theme) : this.state.theme,
293 |             highlight: args.highlight ? args.highlight : this.state.highlight
294 |         });
295 |     }
296 | 
297 |     /** Consume roomHeader event from MessageHandler */
298 |     toggleRoomHeader(args) {
299 |         this.setState({
300 |             roomHeader: args
301 |         });
302 |     }
303 | 
304 |     /** Consume roomsList event from MessageHandler */
305 |     toggleRoomsList(args) {
306 |         this.setState({
307 |             roomsList: args
308 |         });
309 |     }
310 | 
311 |     /** Consume msgComposer event from MessageHandler */
312 |     toggleMsgComposer(args) {
313 |         this.setState({
314 |             msgComposer: args
315 |         });
316 |     }
317 | 
318 |     /** Switch room */
319 |     switchRoom(args) {
320 |         if (typeof args != 'string' && !this.isGuest) return;
321 |         // Unset reply
322 |         this.replyTo();
323 |         
324 |         this.setState({
325 |             room: this.client.getRoom(args),
326 |             currentlyTyping: new Set()
327 |         });
328 |     }
329 | 
330 |     /** Attempt login with password */
331 |     login(args) {
332 |         let user = args.user;
333 |         let passwd = args.passwd;
334 |         if (!user || !passwd) return;
335 |         this.client.loginWithPassword(user, passwd, (err, data) => {
336 |             if (err) {
337 |                 // Handle error
338 |                 console.log('ERROR: ', err);
339 |             } else {
340 |                 console.log('SUCCESS: ', data);
341 |                 this.setUser(user, data.access_token);
342 |             }
343 |         });
344 |     }
345 | 
346 |     /** Show read receipts for event */
347 |     showReceipts(event) {
348 |         // Construct read receipts for event from latest to current
349 |         let receipts = [];
350 |         let timeline = this.state.room.timeline;
351 |         for (let i=timeline.length-1; i>=0; i--) {
352 |             let evt = timeline[i];
353 |             receipts.push(
354 |                 ...this.state.room.getReceiptsForEvent(evt)
355 |             );
356 |             if (event.getId() === evt.getId()) break;
357 |         }
358 | 
359 |         // Sort in alphabetical order on userId
360 |         // Can't sort on time as receipts are not available
361 |         // for previous messages (hence no timestamp)
362 |         receipts.sort((a,b) => a.userId.localeCompare(b.userId));
363 |         
364 |         // Generate JSX for list
365 |         this.list = [];
366 |         for (let receipt of receipts) {
367 |             const userId = receipt.userId;
368 |             let user = this.client.getUser(userId);
369 |             let avatarUrl = user.avatarUrl;
370 |             if (avatarUrl) {
371 |                 avatarUrl = this.client.mxcUrlToHttp(avatarUrl, 32, 32);
372 |             }
373 |             this.list.push(
374 |                 <li className='user-list-item'
375 |                     key={user.userId}>
376 |                     <Avatar imgUrl={avatarUrl} size={32} name={user.userId} />
377 |                     <h4>{user.displayName} <i className='text-muted'>{user.userId}</i></h4>
378 |                 </li>
379 |             );
380 |         }
381 | 
382 |         // Show modal
383 |         this.receiptsModal.current.open();
384 |         this.forceUpdate();
385 |     }
386 | 
387 |     /** Check connection and show/hide error */
388 |     checkConnectivity() {
389 |         // this.client.turnServer()
390 |         //     .then(() => {
391 |         //         this.setState({
392 |         //             connectionError: false
393 |         //         });
394 |         //     })
395 |         //     .catch(() => {
396 |         //         this.setState({
397 |         //             connectionError: true
398 |         //         });
399 |         //     });
400 | 
401 |         // Fetch state from client
402 |         const syncState = this.client.getSyncState();
403 |         const syncStateData = this.client.getSyncStateData();
404 | 
405 |         // Logic copied from RoomStatusBar in matrix-react-sdk
406 |         const errorIsMauError = Boolean(
407 |             syncStateData &&
408 |             syncStateData.error &&
409 |             syncStateData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED',
410 |         );
411 |         const connErr = Boolean(syncState === 'ERROR' && !errorIsMauError);
412 | 
413 |         // Show or hide error
414 |         this.setState({
415 |             connectionError: connErr
416 |         });
417 |     }
418 | 
419 |     render() {
420 |         if (!this.client) return <></>;
421 | 
422 |         // Get current room ID
423 |         let currentRoomId = this.state.room ? this.state.room.roomId : '';
424 |         let homeserver = this.client.getHomeserverUrl();
425 |         
426 |         // Sign-in prompt
427 |         let siPrompt = false;
428 |         if (this.props.signInPrompt === 'all') {
429 |             // Show for everyone
430 |             siPrompt = true;
431 |         } else if (this.props.signInPrompt === 'guests' && this.isGuest) {
432 |             // Show for guests and currently signed in as guest
433 |             siPrompt = true;
434 |         }
435 | 
436 |         // Generate typing text
437 |         let typingText = '';
438 |         let setSize = this.state.currentlyTyping.size;
439 |         if (setSize > 0 && setSize <= 3) {
440 |             // Display names of currently typing users
441 |             const verb = setSize == 1 ? 'is' : 'are';
442 |             typingText = 
443 |                 `${Array.from(this.state.currentlyTyping).join(', ')} ${verb} typing...`;
444 | 
445 |         } else if (setSize > 3) {
446 |             // Display number of currently typing users
447 |             typingText = `${setSize} users are typing...`;
448 |         }
449 | 
450 |         return (
451 |             <ThemeContext.Provider value={{theme: this.state.theme, highlight: this.state.highlight}}>
452 |                 <div className={`client bg-primary-${this.state.theme}`}>
453 |                     <Modal visible={siPrompt} title='Sign in' ref={this.signInModal}>
454 |                         <SignInForm client={this.client} setUser={this.setUser} msgComposer={this.msgComposer} />
455 |                     </Modal>
456 |                     
457 |                     <Modal visible={false} title='Read by' ref={this.receiptsModal}>
458 |                         <div className={`user-panel scrollable-${this.state.theme}`}>
459 |                             <ul className='user-list'>
460 |                                 {this.list}
461 |                             </ul>
462 |                         </div>
463 |                     </Modal>
464 | 
465 |                     <Modal visible={false} title='Privacy Agreement' ref={this.consentModal}>
466 |                         <div className='form'>
467 |                             <b>
468 |                                 Please open the privacy agreement and accept the terms and conditions to continue.
469 |                             </b>
470 |                             <div>
471 |                                 <input className='form-checkbox' type='checkbox' id='consent-chk' disabled onChange={(event) => {
472 |                                     let checked = event.target.checked;
473 |                                     document.querySelector('#consent-given').disabled = !checked;
474 |                                 }} /> <i>I have accepted the terms given on the privacy agreement page</i>
475 |                             </div>
476 |                             <i className='error-msg' id='consent-error'>You need to accept the terms on the privacy agreement page to continue.</i>
477 |                             <div className='form-button-panel'>
478 |                                 <button className='form-button' onClick={() => {
479 |                                     document.querySelector('#consent-chk').disabled = false;
480 |                                     window.open(this.consentHref);
481 |                                 }}>Privacy Agreement</button>
482 |                                 <button className='form-button' id='consent-given' onClick={(event) => {
483 |                                     let button = event.target;
484 |                                     button.textContent = '...';
485 |                                     button.disabled = true;
486 |                                     this.client.joinRoom(this.props.roomId, {syncRoom: true})
487 |                                         .then(() => {
488 |                                             button.textContent = 'Continue';
489 |                                             button.disabled = false;
490 |                                             this.consentModal.current.close();
491 |                                             this.setState({
492 |                                                 readOnly: false
493 |                                             });
494 |                                             if (this.consentCallback) this.consentCallback();
495 |                                             if (this.msgComposer.current) this.msgComposer.current.sendMessage();
496 |                                         })
497 |                                         .catch(() => {
498 |                                             button.textContent = 'Continue';
499 |                                             button.disabled = false;
500 |                                             document.querySelector('#consent-error').style.display = 'block';
501 |                                         });
502 |                                 }}>Continue</button>
503 |                             </div>
504 |                         </div>
505 |                     </Modal>
506 | 
507 |                     <Modal visible={false} title='Sign in to continue' ref={this.continueModal}>
508 |                         <div className='form'>
509 |                             <b>Please sign in or register a guest account to send a message.</b>
510 |                             <div className='form-button-panel'>
511 |                                 <button className='form-button' id='csiButton' onClick={() => {
512 |                                     // Open the sign in modal
513 |                                     this.continueModal.current.close();
514 |                                     this.signInModal.current.open();
515 |                                 }}>Sign in</button>
516 |                                 <button className='form-button' onClick={(event) => {
517 |                                     event.target.textContent = 'Joining...';
518 |                                     event.target.disabled = true;
519 |                                     document.querySelector('#csiButton').disabled = true;
520 |                                     this.joinRoomConsentSafe(this.state.room.roomId, () => {
521 |                                         this.continueModal.current.close();
522 |                                         this.setState({
523 |                                             readOnly: false
524 |                                         });
525 |                                         if (this.msgComposer.current) this.msgComposer.current.sendMessage();
526 |                                     });
527 |                                 }}>Register as guest</button>
528 |                             </div>
529 |                         </div>
530 |                     </Modal>
531 | 
532 |                     {this.state.roomHeader && (<RoomHeader homeserver={homeserver}
533 |                         room={this.state.room} />)}
534 | 
535 |                     {this.state.connectionError && <div className='room-status-bar'>
536 |                         <b>Lost connection to the server.</b>
537 |                     </div>}       
538 |                     
539 |                     <div className={`client-body bg-primary-${this.state.theme}`}>
540 |                         {this.state.roomsList && (<RoomsList list={this.client.getRooms()} 
541 |                             currentRoomId={currentRoomId}
542 |                             onClick={this.onSelectRoom} />)}
543 |                         <TimelinePanel homeserver={homeserver} room={this.state.room} 
544 |                             client={this.client} replyTo={this.replyTo} 
545 |                             canWrite={this.state.msgComposer} isGuest={this.isGuest}
546 |                             showReceipts={this.showReceipts} typingText={typingText} >
547 |                             {this.state.reply && this.state.msgComposer ? 
548 |                                 <ReplyPopup homeserver={homeserver} 
549 |                                     mxEvent={this.state.reply} client={this.client} 
550 |                                     replyTo={this.replyTo} /> : 
551 |                                 <></>}
552 |                             {this.state.msgComposer ? <MessageComposer client={this.client} 
553 |                                 roomId={currentRoomId} mxEvent={this.state.reply} 
554 |                                 unsetReply={this.replyTo} ref={this.msgComposer}
555 |                                 openContinueModal={this.state.readOnly && this.continueModal.current ? 
556 |                                     this.continueModal.current.open : null} /> : <></>}
557 |                             
558 |                         </TimelinePanel>
559 |                     </div>
560 |                 </div>
561 |             </ThemeContext.Provider>
562 |         );
563 |     }
564 | }
565 | 


--------------------------------------------------------------------------------
/components/event-tile.jsx:
--------------------------------------------------------------------------------
  1 | import React, {PureComponent} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import Avatar from './avatar.jsx';
  4 | import MessageToolbar from './message-toolbar.jsx';
  5 | import ThemeContext from './theme-context.jsx';
  6 | import Sanitizer from '../classes/sanitizer.js';
  7 | import linkifyHtml from 'linkifyjs/html';
  8 | 
  9 | /**
 10 |  * React component for an event in the room timeline
 11 |  * 
 12 |  * @param   {string} homeserver - The homeserver URL
 13 |  * @param   {object} mxEvent - The event object
 14 |  * @param   {object} client - The matrix client object
 15 |  * @param   {func} replyTo - Callback for setting reply
 16 |  * @param   {boolean} canWrite - If client can send messages
 17 |  * @param   {boolean} isGuest - If client is in guest mode
 18 |  * @param   {func} showReceipts - Callback to show read receipts
 19 |  */
 20 | export default class EventTile extends PureComponent {
 21 |     static propTypes = {
 22 |         homeserver: PropTypes.string.isRequired, // Homeserver URL
 23 |         mxEvent: PropTypes.object.isRequired, // Event object
 24 |         client: PropTypes.object.isRequired, // Client object
 25 |         replyTo: PropTypes.func.isRequired, // Callback for setting reply
 26 |         canWrite: PropTypes.bool.isRequired, // If client can send messages
 27 |         isGuest: PropTypes.bool.isRequired, // If client is in guest mode
 28 |         showReceipts: PropTypes.func.isRequired // Callback to show read receipts
 29 |     };
 30 | 
 31 |     constructor(props) {
 32 |         super(props);
 33 | 
 34 |         this.delete = this.delete.bind(this);
 35 |     }
 36 | 
 37 |     /** Delete this event */
 38 |     delete() {
 39 |         const roomId = this.props.mxEvent.getRoomId();
 40 |         const eventId = this.props.mxEvent.event.event_id;
 41 |         this.props.client.redactEvent(roomId, eventId, (err, data) => {
 42 |             if (err) console.log(err);
 43 |             console.log(data);
 44 |         });
 45 |     }
 46 | 
 47 |     // Consume theme context
 48 |     static contextType = ThemeContext;
 49 |     render() {
 50 |         let theme = this.context;
 51 | 
 52 |         // Extract details from event
 53 |         let sender = this.props.mxEvent.sender;
 54 |         let avatarUrl = sender.getAvatarUrl(this.props.homeserver, 32, 32, 'scale', false);
 55 |         let {name, userId} = sender;
 56 |         let fmtBody = this.props.mxEvent.event.content.formatted_body;
 57 |         let mxBody;
 58 | 
 59 |         // If deleting is possible by current user
 60 |         let canDelete = this.props.client.getUserId() == userId &&
 61 |             !this.props.isGuest;
 62 | 
 63 |         if (this.props.mxEvent.event.content.msgtype === 'm.image') {
 64 |             // Load images
 65 |             let content = this.props.mxEvent.event.content;
 66 |             let img_url;
 67 |             if (content.info && content.info.thumbnail_url) {
 68 |                 // Usual format
 69 |                 img_url = this.props.client.mxcUrlToHttp(
 70 |                     content.info.thumbnail_url
 71 |                 );
 72 |             } else {
 73 |                 // GIFs
 74 |                 img_url = this.props.client.mxcUrlToHttp(
 75 |                     content.url
 76 |                 );
 77 |             }
 78 |             mxBody = (
 79 |                 // eslint-disable-next-line react/jsx-no-target-blank
 80 |                 <a href={img_url} target='_blank'>
 81 |                     <img src={img_url} className={`timeline-img-${theme.highlight}`} />
 82 |                 </a>
 83 |             );
 84 |         } else if (this.props.mxEvent.event.content.msgtype === 'm.text') {
 85 |             // Load text only messages
 86 |             if (fmtBody) {
 87 |                 let saneHtml = new Sanitizer(fmtBody).sanitize();
 88 |                 saneHtml = linkifyHtml(saneHtml, {
 89 |                     defaultProtocol: 'https',
 90 |                     ignoreTags: ['a', 'blockquote']
 91 |                 });
 92 |                 mxBody = (
 93 |                     <span dangerouslySetInnerHTML={{ __html: saneHtml }} />
 94 |                 );
 95 |             } else mxBody = this.props.mxEvent.event.content.body;
 96 |         } else return <></>; // Return empty message
 97 |         
 98 |         return (
 99 |             <li>
100 |                 <div className={`list-panel-item msg-body-${theme.theme}`}>
101 |                     <Avatar imgUrl={avatarUrl} size={32} name={userId} />
102 |                     <MessageToolbar 
103 |                         mxEvent={this.props.mxEvent} 
104 |                         replyTo={this.props.replyTo} 
105 |                         delete={this.delete}
106 |                         canDelete={canDelete}
107 |                         canWrite={this.props.canWrite}
108 |                         showReceipts={this.props.showReceipts} />
109 |                     <div className='msg-data'>
110 |                         <h4>{name} <i className='text-muted'>{userId}</i></h4>
111 |                         <p>
112 |                             {mxBody}
113 |                         </p>
114 |                     </div>
115 |                 </div>
116 |             </li>
117 |         );
118 |     }
119 | }
120 | 


--------------------------------------------------------------------------------
/components/message-composer.jsx:
--------------------------------------------------------------------------------
  1 | import React, {PureComponent} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import ThemeContext from './theme-context.jsx';
  4 | import Markdown from '../classes/markdown.js';
  5 | import Sanitizer from '../classes/sanitizer.js';
  6 | 
  7 | /**
  8 |  * React component for composing and sending messages
  9 |  * 
 10 |  * @param   {string} roomId - The ID of current room
 11 |  * @param   {MatrixClient} client - The client object
 12 |  * @param   {object} mxEvent - Event to reply to
 13 |  * @param   {func} unsetReply - Callback to unset reply
 14 |  * @param   {func} openContinueModal - Callback to open continue dialog box
 15 |  */
 16 | export default class MessageComposer extends PureComponent {
 17 |     static propTypes = {
 18 |         roomId: PropTypes.string.isRequired, // Current room ID
 19 |         client: PropTypes.object.isRequired, // Client object
 20 |         mxEvent: PropTypes.object, // Event to reply to
 21 |         unsetReply: PropTypes.func.isRequired, // Callback to unset reply
 22 |         openContinueModal: PropTypes.func // Callback to open continue dialog box
 23 |     };
 24 | 
 25 |     constructor(props) {
 26 |         super(props);
 27 |         this.state = {
 28 |             value: '',
 29 |             busy: false
 30 |         };
 31 | 
 32 |         this._msgCallback = this._msgCallback.bind(this);
 33 |         this.onChange = this.onChange.bind(this);
 34 |         this.onKeyDown = this.onKeyDown.bind(this);
 35 |         this.onSubmit = this.onSubmit.bind(this);
 36 |     }
 37 | 
 38 |     /** Callback for sending a message */
 39 |     _msgCallback(err) {
 40 |         if (err) {
 41 |             console.log(err);
 42 |             // TODO: Handle it by showing a prompt
 43 |         }
 44 | 
 45 |         // Re-enable message composer
 46 |         this.setState({
 47 |             busy: false
 48 |         });
 49 |     }
 50 | 
 51 |     /** Construct reply content */
 52 |     _constructReply(htmlBody) {
 53 |         // Extract details from original event
 54 |         let eventId = this.props.mxEvent.event.event_id;
 55 |         let userId = this.props.mxEvent.sender.userId;
 56 |         let fmtBody = this.props.mxEvent.event.content.formatted_body || 
 57 |             new Sanitizer(this.props.mxEvent.event.content.body).sanitize();
 58 |         let body = this.props.mxEvent.event.content.body;
 59 |         
 60 |         // Generate reply bodies
 61 |         let finalFmtBody = `<mx-reply><blockquote><a href="#">In reply to</a> <a href="#">${userId}</a>`
 62 |             + `<br>${fmtBody}</blockquote></mx-reply>` + htmlBody;
 63 |         let finalBody = `> <${userId}> ${body}\n\n${this.state.value}`;
 64 |         
 65 |         // Return final content object
 66 |         const content = {
 67 |             msgtype: 'm.text',
 68 |             format: 'org.matrix.custom.html',
 69 |             body: finalBody,
 70 |             formatted_body: finalFmtBody,
 71 |             'm.relates_to': {
 72 |                 'm.in_reply_to': {
 73 |                     event_id: eventId
 74 |                 }
 75 |             }
 76 |         };
 77 |         return content;
 78 |     }
 79 | 
 80 |     /** Send the value in composer */
 81 |     sendMessage() {
 82 |         if (this.state.value.length <= 0) return;
 83 | 
 84 |         if (this.props.openContinueModal) {
 85 |             this.props.openContinueModal();
 86 |             return;
 87 |         }
 88 |         this.setState({ busy: true });
 89 | 
 90 |         const htmlBody = new Markdown(this.state.value).toHtml();
 91 | 
 92 |         if (this.props.mxEvent == null) {
 93 |             // Message is not a reply
 94 |             this.props.client.sendHtmlMessage(this.props.roomId, this.state.value, 
 95 |                 htmlBody, this._msgCallback);
 96 |         } else {
 97 |             // Message is a reply
 98 |             this.props.client.sendMessage(this.props.roomId, 
 99 |                 this._constructReply(htmlBody), null, this._msgCallback);
100 |             this.props.unsetReply();
101 |         }
102 |         this.setState({ value: '' });
103 |     }
104 | 
105 |     /** Callback for updating text */
106 |     onChange(event) {
107 |         if (this.busy) return;
108 | 
109 |         this.setState({
110 |             value: event.target.value
111 |         });
112 |     }
113 | 
114 |     /** Callback for handling special keys */
115 |     onKeyDown(event) {
116 |         let handled = false;
117 |         const isMac = navigator.platform.indexOf('Mac') !== -1;
118 | 
119 |         if (event.key === 'Enter' && (event.shiftKey || (isMac && event.altKey))) {
120 |             // Insert newline character on shift+enter
121 |             this.setState({
122 |                 value: this.state.value + '\n'
123 |             });
124 |             handled = true;
125 |         } else if (event.key === 'Enter') {
126 |             // Send message
127 |             this.sendMessage();
128 |             handled = true;
129 |         }
130 | 
131 |         if (handled) {
132 |             event.preventDefault();
133 |             event.stopPropagation();
134 |         }
135 |     }
136 | 
137 |     /** Callback for handling clicks on button */
138 |     onSubmit(event) {
139 |         // Send message
140 |         this.sendMessage();
141 | 
142 |         event.preventDefault();
143 |         event.stopPropagation();
144 |     }
145 | 
146 |     // Consume theme context
147 |     static contextType = ThemeContext;
148 |     render() {
149 |         let theme = this.context;
150 | 
151 |         let placeholder = this.state.busy ? 'Sending...' : 'Send a message...';
152 |         let shouldSend = this.state.value.length > 0 && !this.state.busy;
153 | 
154 |         return (
155 |             <form className='composer-panel' onSubmit={this.onSubmit}>
156 |                 <textarea className={`msg-composer bg-primary-${theme.theme} scrollable-${theme.theme}`} 
157 |                     value={this.state.value} onChange={this.onChange} 
158 |                     onKeyDown={this.onKeyDown}
159 |                     placeholder={placeholder} id='composer-field' />
160 |                 <input className={`send-button-${theme.highlight}`} type='submit' 
161 |                     disabled={!shouldSend} value='Send' />
162 |             </form>
163 |         );
164 |     }
165 | }


--------------------------------------------------------------------------------
/components/message-toolbar.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ThemeContext from './theme-context.jsx';
 4 | import Reply from '../res/reply.svg';
 5 | import Quote from '../res/quote.svg';
 6 | import Delete from '../res/delete.svg';
 7 | import Read from '../res/read.svg';
 8 | 
 9 | /**
10 |  * React component for message toolbar
11 |  * 
12 |  * @param   {object} mxEvent - The event object
13 |  * @param   {func} replyTo - Callback for setting reply
14 |  * @param   {func} delete - Callback for deleting current event
15 |  * @param   {bool} canDelete - If current user can delete this event
16 |  * @param   {bool} canWrite - If client can write messages
17 |  * @param   {func} showReceipts - Callback to show read receipts
18 |  */
19 | export default class MessageToolbar extends PureComponent {
20 |     static propTypes = {
21 |         mxEvent: PropTypes.object.isRequired, // Event object
22 |         replyTo: PropTypes.func.isRequired, // Callback for setting reply
23 |         delete: PropTypes.func.isRequired, // Callback for deleting current event
24 |         canDelete: PropTypes.bool.isRequired, // If current user can delete event
25 |         canWrite: PropTypes.bool.isRequired, // If client can write messages
26 |         showReceipts: PropTypes.func.isRequired // Callback to show read receipts
27 |     };
28 | 
29 |     constructor(props) {
30 |         super(props);
31 | 
32 |         this.quote = this.quote.bind(this);
33 |         this.reply = this.reply.bind(this);
34 |         this.showReceipts = this.showReceipts.bind(this);
35 |     }
36 | 
37 |     /** Reply to this message */
38 |     reply() {
39 |         this.props.replyTo(this.props.mxEvent);
40 |     }
41 | 
42 |     /** Quote this message */
43 |     quote() {
44 |         let msgComposer = document.getElementById('composer-field');
45 |         let content = this.props.mxEvent.event.content.body;
46 |         // Quote every line
47 |         content = content.replace(/^/gm, '> ');
48 |         let newMsg = `${content}\n\n${msgComposer.value}`;
49 | 
50 |         // Trigger change event
51 |         const setValue = Object.getOwnPropertyDescriptor(msgComposer.__proto__, 'value').set;
52 |         const event = new Event('input', { bubbles: true });
53 |         setValue.call(msgComposer, newMsg);
54 |         msgComposer.dispatchEvent(event);
55 | 
56 |         // Focus on msgComposer
57 |         msgComposer.focus();
58 |     }
59 | 
60 |     /** Show read receipts for current message */
61 |     showReceipts() {
62 |         this.props.showReceipts(this.props.mxEvent);
63 |     }
64 | 
65 |     // Consume theme context
66 |     static contextType = ThemeContext;
67 |     render() {
68 |         let theme = this.context;
69 | 
70 |         return (
71 |             <div className='msg-toolbar'>
72 |                 {this.props.canWrite && <div className={`msg-tool-${theme.theme}`} title='Read by'>
73 |                     <Read height={20} 
74 |                         className={`ico-${theme.theme}`}
75 |                         onClick={this.showReceipts} />
76 |                 </div>}
77 |                 {this.props.canWrite && <div className={`msg-tool-${theme.theme}`} title='Reply'>
78 |                     <Reply height={20} 
79 |                         className={`ico-${theme.theme}`}
80 |                         onClick={this.reply} />
81 |                 </div>}
82 |                 {this.props.canWrite && <div className={`msg-tool-${theme.theme}`} title='Quote'>
83 |                     <Quote height={20} 
84 |                         className={`ico-${theme.theme}`} 
85 |                         onClick={this.quote} />
86 |                 </div>}
87 |                 {this.props.canDelete && <div className={`msg-tool-${theme.theme}`} title='Delete'>
88 |                     <Delete height={20} 
89 |                         className={`ico-${theme.theme}`}
90 |                         onClick={this.props.delete} />
91 |                 </div>}
92 |             </div>
93 |         );
94 |     }
95 | }


--------------------------------------------------------------------------------
/components/modal.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ThemeContext from './theme-context.jsx';
 4 | 
 5 | /**
 6 |  * React component for modal dialog box
 7 |  * 
 8 |  * @param   {boolean} visible - If the modal box is visible 
 9 |  * @param   {string} title - Title of the modal
10 |  * @param   {object} children - Form body
11 |  */
12 | export default class Modal extends PureComponent {
13 |     static propTypes = {
14 |         visible: PropTypes.bool, // If modal is visible
15 |         title: PropTypes.string, // Modal title
16 |         children: PropTypes.object // Form body
17 |     }
18 | 
19 |     constructor(props) {
20 |         super(props);
21 |         this.state = {
22 |             visible: props.visible // If modal is visible
23 |         };
24 | 
25 |         this.close = this.close.bind(this);
26 |         this.open = this.open.bind(this);
27 |     }
28 | 
29 |     close() {
30 |         this.setState({
31 |             visible: false
32 |         });
33 |     }
34 | 
35 |     open() {
36 |         this.setState({
37 |             visible: true
38 |         });
39 |     }
40 | 
41 |     // Consume theme context
42 |     static contextType = ThemeContext;
43 |     render() {
44 |         let theme = this.context;
45 | 
46 |         // If hidden, return empty element
47 |         if (!this.state.visible) return <></>;
48 | 
49 |         return (
50 |             <div className='modal'>
51 |                 <div className={`modal-content-${theme.theme}`}>
52 |                     <div className={`modal-topbar highlight-${theme.highlight}`}>
53 |                         <h3 className='modal-title'>{this.props.title}</h3>
54 |                         <div className='cross-container' onClick={this.close}>
55 |                             <div className={`cross-${theme.highlight}`}></div>
56 |                         </div>
57 |                     </div>
58 |                     {this.props.children}
59 |                 </div>
60 |             </div>
61 |         );
62 |     }
63 | }


--------------------------------------------------------------------------------
/components/reply-popup.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Avatar from './avatar.jsx';
 4 | import ThemeContext from './theme-context.jsx';
 5 | import Sanitizer from '../classes/sanitizer.js';
 6 | 
 7 | /**
 8 |  * React component for an reply popup
 9 |  * 
10 |  * @param   {string} homeserver - The homeserver URL
11 |  * @param   {object} mxEvent - The event object
12 |  * @param   {object} client - The matrix client object
13 |  * @param   {func} replyTo - Callback for setting reply
14 |  */
15 | export default class ReplyPopup extends PureComponent {
16 |     static propTypes = {
17 |         homeserver: PropTypes.string.isRequired, // Homeserver URL
18 |         mxEvent: PropTypes.object.isRequired, // Event object
19 |         client: PropTypes.object.isRequired, // Client object
20 |         replyTo: PropTypes.func.isRequired // Callback for setting reply
21 |     };
22 | 
23 |     constructor(props) {
24 |         super(props);
25 | 
26 |         this.unsetReply = this.unsetReply.bind(this);
27 |     }
28 | 
29 |     unsetReply() {
30 |         this.props.replyTo();
31 |     }
32 | 
33 |     // Consume theme context
34 |     static contextType = ThemeContext;
35 |     render() {
36 |         let theme = this.context;
37 | 
38 |         // Extract details from event
39 |         let sender = this.props.mxEvent.sender;
40 |         let avatarUrl = sender.getAvatarUrl(this.props.homeserver, 32, 32, 'scale', false);
41 |         let {name, userId} = sender;
42 |         let fmtBody = this.props.mxEvent.event.content.formatted_body;
43 |         let mxBody;
44 | 
45 |         if (this.props.mxEvent.event.content.msgtype === 'm.image') {
46 |             // Load images
47 |             let content = this.props.mxEvent.event.content;
48 |             let img_url = this.props.client.mxcUrlToHttp(
49 |                 content.info.thumbnail_url
50 |             );
51 |             mxBody = (
52 |                 // eslint-disable-next-line react/jsx-no-target-blank
53 |                 <a href={img_url} target='_blank'>
54 |                     <img src={img_url} className={`timeline-img-${theme.highlight}`} />
55 |                 </a>
56 |             );
57 |         } else if (this.props.mxEvent.event.content.msgtype === 'm.text') {
58 |             // Load text only messages
59 |             if (fmtBody) {
60 |                 let saneHtml = new Sanitizer(fmtBody).sanitize();
61 |                 mxBody = (
62 |                     <span dangerouslySetInnerHTML={{ __html: saneHtml }} />
63 |                 );
64 |             } else mxBody = this.props.mxEvent.event.content.body;
65 |         } else return <></>; // Return empty message
66 |         
67 |         if (this.props.mxEvent == null) return <></>;
68 | 
69 |         return (
70 |             <div className='reply-popup'>
71 |                 <div className={`list-panel-item msg-body bg-primary-${theme.theme}`}>
72 |                     <Avatar imgUrl={avatarUrl} size={32} name={userId} />
73 |                     <div className='msg-data'>
74 |                         <h4>{name} <i className='text-muted'>{userId}</i></h4>
75 |                         <p>
76 |                             {mxBody}
77 |                         </p>
78 |                     </div>
79 |                 </div>
80 |                 <div className='cross-container' onClick={this.unsetReply}>
81 |                     <div className={'cross'}></div>
82 |                 </div>
83 |             </div>
84 |         );
85 |     }
86 | }
87 | 


--------------------------------------------------------------------------------
/components/room-header.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Avatar from './avatar.jsx';
 4 | import ThemeContext from './theme-context.jsx';
 5 | 
 6 | /**
 7 |  * React component for the header containing room information and avatar
 8 |  * 
 9 |  * @param   {string} homeserver - Homeserver URL
10 |  * @param   {object} room - Room object for the corresponding room
11 |  */
12 | export default class RoomHeader extends PureComponent {
13 |     static propTypes = {
14 |         homeserver: PropTypes.string.isRequired, // Homeserver URL 
15 |         room: PropTypes.object // Room object for corresponding room    
16 |     };
17 | 
18 |     // Consume theme context
19 |     static contextType = ThemeContext;
20 |     render() {
21 |         let theme = this.context;
22 | 
23 |         // Get avatar URL of room
24 |         let avatarUrl = this.props.room ? 
25 |             this.props.room.getAvatarUrl(this.props.homeserver, 32, 32, 'scale', false) : 
26 |             null;
27 |         
28 |         let roomName = this.props.room ? this.props.room.name : '';
29 | 
30 |         return (
31 |             <div className={`top-bar highlight-${theme.highlight}`}>
32 |                 <Avatar imgUrl={avatarUrl} size={32} name={roomName} />
33 |                 <h3>{roomName}</h3>
34 |             </div>
35 |         );
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/components/room-tile.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import ThemeContext from './theme-context.jsx';
 4 | 
 5 | /**
 6 |  * React component for a single room tile in the list of rooms
 7 |  * 
 8 |  * @param   {object} room - Room object for the corresponding room
 9 |  * @param   {boolean} selected - True if current room is selected false otherwise
10 |  * @param   {func} onClick - Callback to handle clicks
11 |  */
12 | export default class RoomTile extends PureComponent {
13 |     static propTypes = {
14 |         room: PropTypes.object.isRequired, // Room object for corresponding room
15 |         selected: PropTypes.bool.isRequired, // True if currently selected else false
16 |         onClick: PropTypes.func.isRequired // Callback for handling clicks
17 |     };
18 | 
19 |     // Consume theme context
20 |     static contextType = ThemeContext;
21 |     render() {
22 |         let theme = this.context;
23 | 
24 |         // Set appropriate class if it is selected
25 |         let className = this.props.selected ? 
26 |             `highlight-${theme.highlight}` : `bg-secondary-${theme.theme}`;
27 |         
28 |         return (
29 |             <li className={`list-panel-item hoverable-${theme.highlight} 
30 |                 ${className}`} onClick={this.props.onClick} id={this.props.room.roomId} >
31 |                 {this.props.room.name}
32 |             </li>
33 |         );
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/components/rooms-list.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import RoomTile from './room-tile.jsx';
 4 | import ThemeContext from './theme-context.jsx';
 5 | 
 6 | /**
 7 |  * React component for list of rooms
 8 |  * 
 9 |  * @param   {Array<Room>} list - List of room objects
10 |  * @param   {string} currentRoomId - The currently selected roomId
11 |  * @param   {func} onClick - Callback for onclick events
12 |  */
13 | export default class RoomsList extends PureComponent {
14 |     static propTypes = {
15 |         list: PropTypes.arrayOf(PropTypes.object).isRequired, // List of rooms
16 |         currentRoomId: PropTypes.string.isRequired, // Currently selected room ID
17 |         onClick: PropTypes.func // Callback for onclick events
18 |     };
19 | 
20 |     // Consume theme context
21 |     static contextType = ThemeContext;
22 |     render() {
23 |         let theme = this.context;
24 | 
25 |         // Construct a list of RoomTile components from list of rooms
26 |         let rooms = [];
27 |         for (let room of this.props.list) {
28 |             rooms.push(
29 |                 <RoomTile key={room.roomId} room={room} 
30 |                     selected={room.roomId === this.props.currentRoomId}
31 |                     onClick={event => {
32 |                         if (room.roomId !== this.props.currentRoomId) {
33 |                             this.props.onClick(event);
34 |                         }
35 |                     }} />
36 |             );
37 |         }
38 |         
39 |         return (
40 |             <div className={`bg-secondary-${theme.theme} rooms-panel scrollable-${theme.theme}`}>
41 |                 <ul className='list-panel'>
42 |                     {rooms}
43 |                 </ul>
44 |             </div>
45 |         );
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/components/sign-in-form.jsx:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | /**
 5 |  * React component for sign in form
 6 |  * 
 7 |  * @param   {object} client - Client object
 8 |  * @param   {func} setUser - Callback to change user
 9 |  * @param   {object} msgComposer - Ref to message composer
10 |  */
11 | export default class SignInForm extends PureComponent {
12 |     constructor(props) {
13 |         super(props);
14 | 
15 |         this.state = {
16 |             state: 'init'
17 |         };
18 | 
19 |         this.onSubmit = this.onSubmit.bind(this);
20 |     }
21 | 
22 |     static propTypes = {
23 |         client: PropTypes.object.isRequired, // Client object
24 |         setUser: PropTypes.func.isRequired, // Callback to change user
25 |         msgComposer: PropTypes.object.isRequired // Ref to message composer
26 |     }
27 | 
28 |     onSubmit(event) {
29 |         // Get credentials from event
30 |         let formData = new FormData(document.forms['sign-in']);
31 |         let user = formData.get('uname');
32 |         let passwd = formData.get('passwd');
33 |         let submit = document.getElementById('sign-in-submit');
34 | 
35 |         // Reject invalid username format
36 |         if (!user.startsWith('@')) {
37 |             this.setState( {state:'err'} );
38 |             event.preventDefault();
39 |             event.stopPropagation();
40 |             return;
41 |         }
42 | 
43 |         submit.value = '...';
44 |         submit.disabled = true;
45 |         this.props.client.loginWithPassword(user, passwd, (err, data) => {
46 |             if (err) {
47 |                 // Handle error
48 |                 console.log('ERROR: ', err);
49 |                 submit.value = 'Sign in';
50 |                 submit.disabled = false;
51 |                 this.setState({
52 |                     state: 'err'
53 |                 });
54 |             } else {
55 |                 console.log('SUCCESS: ', data);
56 |                 this.props.setUser(user, data.access_token, () => {
57 |                     submit.value = 'Sign in';
58 |                     submit.disabled = false;
59 |                     this.setState({
60 |                         state: 'success'
61 |                     });
62 |                     if (this.props.msgComposer.current) {
63 |                         this.props.msgComposer.current.sendMessage();
64 |                     }
65 |                 });
66 |             }
67 |         });
68 | 
69 | 
70 |         event.preventDefault();
71 |         event.stopPropagation();
72 |     }
73 | 
74 |     render() {
75 |         if (this.state.state == 'success') return (
76 |             <div className='form'>
77 |                 <h2>Signed in successfully!</h2>
78 |             </div>
79 |         );
80 |         return (
81 |             <form className='form' onSubmit={this.onSubmit} id='sign-in'>
82 |                 { (this.state.state == 'err') && 
83 |                 <i className='error-msg'>Invalid username or password.</i> }
84 |                 <div className='form-element'>
85 |                     <h4 className='form-label'>Username: <i className='text-muted'>@user:site.com</i></h4>
86 |                     <input type='text' name='uname' />
87 |                 </div>
88 |                 <div className='form-element'>
89 |                     <h4 className='form-label'>Password: </h4>
90 |                     <input type='password' name='passwd' />
91 |                 </div>
92 |                 <div className='form-element'>
93 |                     <input className='form-button' type='submit' id='sign-in-submit' value='Sign in' />
94 |                 </div>
95 |             </form>
96 |         );
97 |     }
98 | }


--------------------------------------------------------------------------------
/components/theme-context.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | /** Theme context for client */
4 | const ThemeContext = React.createContext(null);
5 | 
6 | export default ThemeContext;


--------------------------------------------------------------------------------
/components/timeline-panel.jsx:
--------------------------------------------------------------------------------
  1 | import React, {PureComponent} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import EventTile from './event-tile.jsx';
  4 | import ThemeContext from './theme-context.jsx';
  5 | 
  6 | /**
  7 |  * React component for the room timeline
  8 |  * 
  9 |  * @param   {string} homeserver - The homeserver URL
 10 |  * @param   {object} room - The room object
 11 |  * @param   {object} client - The client object
 12 |  * @param   {array} children - Children of room timeline
 13 |  * @param   {func} replyTo - Callback for setting reply 
 14 |  * @param   {boolean} canWrite - If client can send messages
 15 |  * @param   {boolean} isGuest - If client is in guest mode
 16 |  * @param   {func} showReceipts - Callback to show read receipts
 17 |  * @param   {string} typingText - Prompt about currently typing users
 18 |  */
 19 | export default class TimelinePanel extends PureComponent {
 20 |     static propTypes = {
 21 |         homeserver: PropTypes.string.isRequired, // Homeserver URL
 22 |         room: PropTypes.object, // Room object
 23 |         client: PropTypes.object, // Client object
 24 |         children: PropTypes.array, // Children of the room body
 25 |         replyTo: PropTypes.func, // Callback for setting reply
 26 |         canWrite: PropTypes.bool, // If client can send messages
 27 |         isGuest: PropTypes.bool, // If client is in guest mode
 28 |         showReceipts: PropTypes.func, // Callback to show read receipts
 29 |         typingText: PropTypes.string // Prompt about currently typing users
 30 |     };
 31 | 
 32 |     constructor(props) {
 33 |         super(props);
 34 | 
 35 |         this.oldRoomId = this.props.room ? this.props.room.roomId : null;
 36 |         this.attachedToBottom = true;
 37 |         this.updated = false;
 38 | 
 39 |         this.loadPrevious = this.loadPrevious.bind(this);
 40 |         this.onScroll = this.onScroll.bind(this);
 41 |     }
 42 | 
 43 |     componentDidUpdate() {
 44 |         if ( !(this.props.room) ) return;
 45 |         let timelineBody = document.getElementById('timeline-body');
 46 |         
 47 |         if (!this.updated) {
 48 |             let height = document.getElementById('timeline-list').clientHeight;
 49 |             this.loadPrevious(height);
 50 |         }
 51 | 
 52 |         // Scroll to bottom on room change or message
 53 |         if ( this.props.room.roomId !== this.oldRoomId || 
 54 |             this.attachedToBottom ) {
 55 |             this.attachedToBottom = true;
 56 |             let height = timelineBody.clientHeight;
 57 |             timelineBody.scrollTop += height + 999999;
 58 |             this.oldRoomId = this.props.room.roomId;
 59 | 
 60 |             // Send read receipt
 61 |             if (this.props.room.timeline.lengh > 0) {
 62 |                 const timelineLength = this.props.room.timeline.lengh;
 63 |                 let lastEvent = this.props.room.timeline[timelineLength - 1];
 64 |                 this.props.client.sendReadReceipt(lastEvent, {hidden: false});
 65 |             }
 66 |         }
 67 | 
 68 |         // Load messages if timeline not filled
 69 |         if (timelineBody.scrollTop <= 0) {
 70 |             let height = timelineBody.clientHeight;
 71 |             this.loadPrevious(height);
 72 |         }
 73 |     }
 74 | 
 75 |     /** Load older messages */
 76 |     loadPrevious(oldHeight) {
 77 |         this.updated = true;
 78 |         let loader = document.getElementById('timeline-loading');
 79 |         
 80 |         // Hide loader if at end of timeline
 81 |         if (this.props.room.oldState.paginationToken == null) {
 82 |             loader.style.display = 'none';
 83 |             return;
 84 |         }
 85 | 
 86 |         // Show loader
 87 |         loader.style.display = 'block';
 88 |         
 89 |         this.props.client.scrollback(this.props.room, 30, () => {
 90 |             // Hide loader
 91 |             loader.style.display = 'none';
 92 | 
 93 |             let timelineList = document.getElementById('timeline-list');
 94 |             let newHeight = timelineList.clientHeight;
 95 |             let timelineBody = document.getElementById('timeline-body');
 96 |             
 97 |             // Scroll to original position (position += diff in height)
 98 |             let change = newHeight - oldHeight;
 99 |             timelineBody.scrollTop += change;
100 |             
101 |             // If scrolled to top or not fully scrolled to top or
102 |             // if change in height is less than threshold (300)
103 |             if (timelineBody.scrollTop <= 0 || 
104 |                 change < 300) {
105 |                 this.loadPrevious(newHeight);
106 |             }
107 |         });
108 |     }
109 | 
110 |     /** Check if scrolled to top of timeline */
111 |     onScroll(event) {
112 |         let timelineBody = event.target;
113 |         // Get old height
114 |         let timelineList = document.getElementById('timeline-list');
115 |         let oldHeight = timelineList.clientHeight;
116 |         let maxScroll = timelineBody.scrollHeight - timelineBody.clientHeight;
117 | 
118 |         if (timelineBody.scrollTop <= 0) {
119 |             this.loadPrevious(oldHeight);
120 |         } else if (timelineBody.scrollTop >= maxScroll) {
121 |             this.attachedToBottom = true;
122 |         } else this.attachedToBottom = false;
123 |     }
124 | 
125 |     // Consume theme context
126 |     static contextType = ThemeContext;
127 |     render() {
128 |         let theme = this.context;
129 | 
130 |         // Construct timeline from room
131 |         let timeline = [];
132 |         if (this.props.room) {
133 |             for (let event of this.props.room.timeline) {
134 |                 timeline.push(
135 |                     <EventTile key={event.event.event_id} 
136 |                         homeserver={this.props.homeserver}
137 |                         mxEvent={event} client={this.props.client}
138 |                         replyTo={this.props.replyTo} 
139 |                         canWrite={this.props.canWrite}
140 |                         isGuest={this.props.isGuest}
141 |                         showReceipts={this.props.showReceipts} />
142 |                 ); 
143 |             }
144 |         }
145 |         
146 |         return (
147 |             <div className='main-body'>
148 |                 <div className={
149 |                     `bg-primary-${theme.theme} body-panel scrollable-${theme.theme}`
150 |                 } onScroll={this.onScroll} id='timeline-body' >
151 |                     <div className='loader-panel'>
152 |                         <div id='timeline-loading' className={`loader-${theme.theme}`}></div>
153 |                     </div>
154 |                     <ul className='list-panel' id='timeline-list' >
155 |                         {timeline}
156 |                         <div className='typing-panel'>
157 |                             <i>{this.props.typingText}</i>
158 |                         </div>
159 |                     </ul>
160 |                 </div>
161 |                 {this.props.children}
162 |             </div>
163 |         );
164 |     }
165 | }
166 | 


--------------------------------------------------------------------------------
/docs.md:
--------------------------------------------------------------------------------
  1 | # Documentation
  2 | This is a version of the Matrix client intended to be embedded within iframes of variable sizes on a webpage.   
  3 | ## Features
  4 | Currently, the client supports:   
  5 | * List of joined rooms that can be selected 
  6 | * Live room timeline events
  7 | * Support for image based messages  
  8 | * Support for markdown in messages   
  9 | * Message composer and ability to send messages to a room
 10 | * Dark and light themes for the client
 11 | * Changeable highlight colors
 12 | * Toggleable message composer, room header, and room timeline components
 13 | * `postMessage` interface for sending commands from the parent window    
 14 | * Support for guest mode
 15 | * Support for read-only mode
 16 | 
 17 | More features to be added soon.
 18 | ## Usage
 19 | ### Installing dependencies
 20 | ```
 21 | npm install
 22 | ```
 23 | ### Creating a bundle
 24 | #### For development:
 25 | ```
 26 | npm run dev
 27 | ```
 28 | #### For production:
 29 | ```
 30 | npm run build
 31 | ```
 32 | ### Deploying to `webpack-dev-server` with hot reloading enabled (deployed on port 9000)
 33 | ```
 34 | npm start
 35 | ```
 36 | ### Running the linter
 37 | ```
 38 | npm run lint
 39 | ```
 40 | ### Configuration
 41 | Create `config.js` in the root directory of the repository with the following format.
 42 | ```js
 43 | export let config = {
 44 |     baseUrl: '<BASE URL>',
 45 |     roomId: '<DEFAULT ROOM ID>',
 46 |     userId: '<DEFAULT USER ID>',
 47 |     accessToken: '<DEFAULT ACCESS TOKEN>'
 48 | };
 49 | ```
 50 | Leave out `userId` and `accessToken` to attempt registration as guest.   
 51 | To set custom highlight colors, change the Sass variables `$color-highlight-custom` and `$color-txt-custom` in `styles/colors.scss` and set `highlight` to `'custom'` in the configuration.
 52 | #### Complete list of options:
 53 | *  `baseUrl` (*string*) - Base URL of homeserver - **Required**
 54 | *  `roomId` (*string*) - The internal ID of default room - **Required** 
 55 | *  `userId` (*string*) - The ID of default user            
 56 |     Ignore to register as guest
 57 | *  `accessToken` (*string*) - Access token of default user     
 58 |     Ignore to register as guest
 59 | *  `readOnly` (*boolean*) - If the client is in read-only mode    
 60 |     - `true`
 61 |     - `false` (default)        
 62 |     Disables `msgComposer` and `roomsList` (unless overriden)
 63 | *  `theme` (*string*) - Theme of the client
 64 |     - `'dark'` - Dark theme (default)
 65 |     - `'light'` - Light theme
 66 |     - `'auto'` - Use device theme
 67 | *  `highlight` (*string*) - Highlight color  
 68 |     - `'pink'` - Pink highlights (default)  
 69 |     - `'green'` - Green highlights
 70 |     - `'custom'` - Custom highlight color
 71 | *  `roomHeader` (*boolean*) - If room header should be displayed        
 72 |     - `true` (default)
 73 |     - `false`          
 74 | *  `roomsList` (*boolean*) - If rooms list should be displayed (overrides `readOnly`)      
 75 |     - `true` (default)
 76 |     - `false`          
 77 | *  `msgComposer` (*boolean*) - If message composer should be displayed (overrides `readOnly`)          
 78 |     - `true` (default)
 79 |     - `false`          
 80 | *  `whitelist` (*Array*) - Whitelisted origins         
 81 |     Ignore to allow all origins
 82 | *  `signInPrompt` (*string*) - Show sign in prompts    
 83 |     - `'none'` - Never show (default)
 84 |     - `'guests'` - Show if signed in as guest
 85 |     - `'all'` - Always show
 86 | ### Using the `postMessage` interface
 87 | All messages will follow this format
 88 | ```js
 89 | {
 90 |     cmd: 'Some command',
 91 |     args: 'Arguments'
 92 | }
 93 | ```
 94 | #### Change theme or highlight color
 95 | ```js
 96 | iframe.contentWindow.postMessage({
 97 |     cmd: 'setTheme',
 98 |     args: {
 99 |         theme: 'light',
100 |         highlight:, 'green'
101 |     }
102 | }, origin);
103 | ```
104 | *Arguments:*
105 | 
106 | `args` (object):   
107 | * `theme` (string) - `'dark'`, `'light'` or `'auto'`
108 | * `highlight` (string) - highlight color such as `'pink'`,  `'green'`  or `'custom'` 
109 | 
110 | *Response:*
111 | ```js
112 | {
113 |     status: 'success', 
114 |     message: 'Theme set.'
115 | }
116 | ```
117 | #### Toggle `roomHeader`
118 | ```js
119 | iframe.contentWindow.postMessage({
120 |     cmd: 'roomHeader',
121 |     args: false
122 | }, origin);
123 | ```
124 | *Arguments:*
125 | 
126 | `args` (boolean) -  
127 | `false` for hidden, `true` for visible  
128 | 
129 | *Response:*
130 | ```js
131 | {
132 |     status: 'success', 
133 |     message: 'Toggled room header.'
134 | }
135 | ```
136 | #### Toggle `roomsList`
137 | ```js
138 | iframe.contentWindow.postMessage({
139 |     cmd: 'roomsList',
140 |     args: false
141 | }, origin);
142 | ```
143 | *Arguments:*
144 | 
145 | `args` (boolean) -  
146 | `false` for hidden, `true` for visible  
147 | 
148 | *Response:*
149 | ```js
150 | {
151 |     status: 'success', 
152 |     message: 'Toggled rooms list.'
153 | }
154 | ```
155 | #### Toggle `messageComposer`
156 | ```js
157 | iframe.contentWindow.postMessage({
158 |     cmd: 'msgComposer',
159 |     args: false
160 | }, origin);
161 | ```
162 | *Arguments:*
163 | 
164 | `args` (boolean) -  
165 | `false` for hidden, `true` for visible  
166 | 
167 | *Response:*
168 | ```js
169 | {
170 |     status: 'success', 
171 |     message: 'Toggled message composer.'
172 | }
173 | ```
174 | #### Switch room
175 | ```js
176 | iframe.contentWindow.postMessage({
177 |     cmd: 'switchRoom',
178 |     args: '!abcdef123456'
179 | }, origin);
180 | ```
181 | *Arguments:*
182 | 
183 | `args` (string) -  
184 | Internal room ID
185 | 
186 | *Response:*
187 | ```js
188 | {
189 |     status: 'success', 
190 |     message: 'Attempting to switch room...'
191 | }
192 | ```
193 | #### Login with username and password
194 | ```js
195 | iframe.contentWindow.postMessage({
196 |     cmd: 'login',
197 |     args: {
198 |         user: 'username',
199 |         passwd: 'password'
200 |     }
201 | }, origin);
202 | ```
203 | *Arguments:*
204 | 
205 | `args` (object):   
206 | * `username` (string) - Username
207 | * `passwd` (string) - Password   
208 | 
209 | *Response:*
210 | ```js
211 | {
212 |     status: 'success', 
213 |     message: 'Attempting sign in...'
214 | }
215 | ```


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>Riot Embedded</title>
 5 |         <script src="./dist/bundle.js" async defer></script>
 6 |     </head>
 7 |     <body>
 8 |         <div id='root'></div>
 9 |     </body>
10 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "riot-embedded",
 3 |   "version": "1.0.0",
 4 |   "description": "Riot Embedded",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack --mode production",
 9 |     "dev": "webpack --mode development",
10 |     "start": "webpack-dev-server --config './webpack.config.js'",
11 |     "lint": "eslint . --ext .js,.jsx"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/arnav-t/riot-embedded.git"
16 |   },
17 |   "keywords": [
18 |     "Riot"
19 |   ],
20 |   "author": "arnav-t",
21 |   "license": "Apache-2.0",
22 |   "bugs": {
23 |     "url": "https://github.com/arnav-t/riot-embedded/issues"
24 |   },
25 |   "homepage": "https://github.com/arnav-t/riot-embedded#readme",
26 |   "devDependencies": {
27 |     "@babel/core": "^7.9.6",
28 |     "@babel/plugin-proposal-class-properties": "^7.8.3",
29 |     "@babel/preset-env": "^7.9.6",
30 |     "@svgr/webpack": "^5.4.0",
31 |     "babel-eslint": "^10.1.0",
32 |     "babel-loader": "^8.1.0",
33 |     "css-loader": "^2.1.1",
34 |     "eslint": "^7.0.0",
35 |     "eslint-plugin-react": "^7.19.0",
36 |     "node-sass": "^4.14.1",
37 |     "sass-loader": "^8.0.2",
38 |     "style-loader": "^0.23.1",
39 |     "webpack": "^4.43.0",
40 |     "webpack-cli": "^3.3.11",
41 |     "webpack-dev-server": "^3.11.0"
42 |   },
43 |   "dependencies": {
44 |     "@babel/preset-react": "^7.9.4",
45 |     "commonmark": "^0.29.1",
46 |     "linkifyjs": "^2.1.9",
47 |     "matrix-js-sdk": "^1.2.0",
48 |     "prop-types": "^15.7.2",
49 |     "react": "^16.13.1",
50 |     "react-dom": "^16.13.1",
51 |     "sanitize-html": "^2.3.2"
52 |   },
53 |   "babel": {
54 |     "presets": [
55 |       [
56 |         "@babel/preset-env",
57 |         {
58 |           "targets": {
59 |             "node": "current"
60 |           }
61 |         }
62 |       ],
63 |       "@babel/preset-react"
64 |     ]
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/res/delete.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="50" height="50"><defs><path d="M488.53 574.85L488.47 575.81L488.37 576.76L488.24 577.69L488.07 578.62L487.87 579.53L487.63 580.43L487.35 581.31L487.04 582.18L486.7 583.03L486.33 583.86L485.93 584.68L485.49 585.48L485.03 586.26L484.54 587.02L484.01 587.76L483.47 588.48L482.89 589.17L482.29 589.85L481.67 590.5L481.02 591.12L480.34 591.72L479.65 592.3L478.93 592.85L478.19 593.37L477.43 593.86L476.65 594.32L475.85 594.76L475.03 595.16L474.2 595.53L473.35 595.87L472.48 596.18L471.6 596.46L470.7 596.7L469.79 596.9L468.86 597.07L467.93 597.2L466.98 597.3L466.02 597.36L465.05 597.38L165.27 597.38L164.3 597.36L163.34 597.3L162.4 597.2L161.46 597.07L160.54 596.9L159.62 596.7L158.73 596.46L157.84 596.18L156.98 595.87L156.13 595.53L155.29 595.16L154.47 594.76L153.67 594.32L152.89 593.86L152.13 593.37L151.39 592.85L150.68 592.3L149.98 591.72L149.31 591.12L148.66 590.5L148.03 589.85L147.43 589.17L146.86 588.48L146.31 587.76L145.79 587.02L145.29 586.26L144.83 585.48L144.4 584.68L143.99 583.86L143.62 583.03L143.28 582.18L142.97 581.31L142.7 580.43L142.46 579.53L142.25 578.62L142.08 577.69L141.95 576.76L141.85 575.81L141.79 574.85L141.77 573.88L141.77 163.67L488.55 163.67L488.55 573.88L488.53 574.85ZM219.82 197.48L219 197.53L218.2 197.61L217.4 197.72L216.61 197.87L215.84 198.04L215.08 198.25L214.32 198.48L213.59 198.74L212.86 199.03L212.15 199.35L211.45 199.69L210.77 200.06L210.11 200.46L209.46 200.88L208.83 201.32L208.22 201.78L207.63 202.27L207.06 202.79L206.5 203.32L205.97 203.87L205.46 204.44L204.97 205.04L204.5 205.65L204.06 206.28L203.64 206.92L203.25 207.59L202.88 208.27L202.53 208.96L202.22 209.67L201.93 210.4L201.66 211.14L201.43 211.89L201.23 212.65L201.05 213.43L200.91 214.22L200.79 215.01L200.71 215.82L200.66 216.64L200.65 217.46L200.65 543.59L200.66 544.41L200.71 545.23L200.79 546.04L200.91 546.83L201.05 547.62L201.23 548.39L201.43 549.16L201.66 549.91L201.93 550.65L202.22 551.37L202.53 552.08L202.88 552.78L203.25 553.46L203.64 554.12L204.06 554.77L204.5 555.4L204.97 556.01L205.46 556.6L205.97 557.18L206.5 557.73L207.06 558.26L207.63 558.77L208.22 559.26L208.83 559.73L209.46 560.17L210.11 560.59L210.77 560.99L211.45 561.36L212.15 561.7L212.86 562.02L213.59 562.31L214.32 562.57L215.08 562.8L215.84 563.01L216.61 563.18L217.4 563.33L218.2 563.44L219 563.52L219.82 563.57L220.65 563.59L225.81 563.59L226.63 563.57L227.45 563.52L228.25 563.44L229.05 563.33L229.84 563.18L230.61 563.01L231.38 562.8L232.13 562.57L232.87 562.31L233.59 562.02L234.3 561.7L235 561.36L235.68 560.99L236.34 560.59L236.99 560.17L237.62 559.73L238.23 559.26L238.82 558.77L239.4 558.26L239.95 557.73L240.48 557.18L240.99 556.6L241.48 556.01L241.95 555.4L242.39 554.77L242.81 554.12L243.2 553.46L243.57 552.78L243.92 552.08L244.23 551.37L244.52 550.65L244.79 549.91L245.02 549.16L245.23 548.39L245.4 547.62L245.54 546.83L245.66 546.04L245.74 545.23L245.79 544.41L245.81 543.59L245.81 217.46L245.79 216.64L245.74 215.82L245.66 215.01L245.54 214.22L245.4 213.43L245.23 212.65L245.02 211.89L244.79 211.14L244.52 210.4L244.23 209.67L243.92 208.96L243.57 208.27L243.2 207.59L242.81 206.92L242.39 206.28L241.95 205.65L241.48 205.04L240.99 204.44L240.48 203.87L239.95 203.32L239.4 202.79L238.82 202.27L238.23 201.78L237.62 201.32L236.99 200.88L236.34 200.46L235.68 200.06L235 199.69L234.3 199.35L233.59 199.03L232.87 198.74L232.13 198.48L231.38 198.25L230.61 198.04L229.84 197.87L229.05 197.72L228.25 197.61L227.45 197.53L226.63 197.48L225.81 197.46L220.65 197.46L219.82 197.48ZM413.37 195.94L412.55 195.99L411.75 196.08L410.95 196.19L410.16 196.33L409.39 196.51L408.62 196.71L407.87 196.95L407.13 197.21L406.41 197.5L405.7 197.82L405 198.16L404.32 198.53L403.66 198.92L403.01 199.34L402.38 199.79L401.77 200.25L401.18 200.74L400.6 201.25L400.05 201.79L399.52 202.34L399.01 202.91L398.52 203.5L398.05 204.12L397.61 204.75L397.19 205.39L396.8 206.06L396.43 206.74L396.08 207.43L395.77 208.14L395.48 208.87L395.21 209.61L394.98 210.36L394.77 211.12L394.6 211.9L394.46 212.68L394.34 213.48L394.26 214.29L394.21 215.1L394.19 215.93L394.19 542.06L394.21 542.88L394.26 543.7L394.34 544.5L394.46 545.3L394.6 546.09L394.77 546.86L394.98 547.63L395.21 548.38L395.48 549.12L395.77 549.84L396.08 550.55L396.43 551.25L396.8 551.93L397.19 552.59L397.61 553.24L398.05 553.87L398.52 554.48L399.01 555.07L399.52 555.65L400.05 556.2L400.6 556.73L401.18 557.24L401.77 557.73L402.38 558.2L403.01 558.64L403.66 559.06L404.32 559.45L405 559.82L405.7 560.17L406.41 560.48L407.13 560.77L407.87 561.04L408.62 561.27L409.39 561.48L410.16 561.65L410.95 561.79L411.75 561.91L412.55 561.99L413.37 562.04L414.19 562.06L419.35 562.06L420.18 562.04L421 561.99L421.8 561.91L422.6 561.79L423.39 561.65L424.16 561.48L424.92 561.27L425.68 561.04L426.41 560.77L427.14 560.48L427.85 560.17L428.55 559.82L429.23 559.45L429.89 559.06L430.54 558.64L431.17 558.2L431.78 557.73L432.37 557.24L432.94 556.73L433.5 556.2L434.03 555.65L434.54 555.07L435.03 554.48L435.5 553.87L435.94 553.24L436.36 552.59L436.75 551.93L437.12 551.25L437.47 550.55L437.78 549.84L438.07 549.12L438.34 548.38L438.57 547.63L438.77 546.86L438.95 546.09L439.09 545.3L439.21 544.5L439.29 543.7L439.34 542.88L439.35 542.06L439.35 215.93L439.34 215.1L439.29 214.29L439.21 213.48L439.09 212.68L438.95 211.9L438.77 211.12L438.57 210.36L438.34 209.61L438.07 208.87L437.78 208.14L437.47 207.43L437.12 206.74L436.75 206.06L436.36 205.39L435.94 204.75L435.5 204.12L435.03 203.5L434.54 202.91L434.03 202.34L433.5 201.79L432.94 201.25L432.37 200.74L431.78 200.25L431.17 199.79L430.54 199.34L429.89 198.92L429.23 198.53L428.55 198.16L427.85 197.82L427.14 197.5L426.41 197.21L425.68 196.95L424.92 196.71L424.16 196.51L423.39 196.33L422.6 196.19L421.8 196.08L421 195.99L420.18 195.94L419.35 195.93L414.19 195.93L413.37 195.94ZM316.59 195.94L315.78 195.99L314.97 196.08L314.18 196.19L313.39 196.33L312.61 196.51L311.85 196.71L311.1 196.95L310.36 197.21L309.63 197.5L308.92 197.82L308.23 198.16L307.55 198.53L306.88 198.92L306.24 199.34L305.61 199.79L305 200.25L304.4 200.74L303.83 201.25L303.28 201.79L302.74 202.34L302.23 202.91L301.74 203.5L301.28 204.12L300.84 204.75L300.42 205.39L300.02 206.06L299.65 206.74L299.31 207.43L298.99 208.14L298.7 208.87L298.44 209.61L298.21 210.36L298 211.12L297.83 211.9L297.68 212.68L297.57 213.48L297.49 214.29L297.44 215.1L297.42 215.93L297.42 542.06L297.44 542.88L297.49 543.7L297.57 544.5L297.68 545.3L297.83 546.09L298 546.86L298.21 547.63L298.44 548.38L298.7 549.12L298.99 549.84L299.31 550.55L299.65 551.25L300.02 551.93L300.42 552.59L300.84 553.24L301.28 553.87L301.74 554.48L302.23 555.07L302.74 555.65L303.28 556.2L303.83 556.73L304.4 557.24L305 557.73L305.61 558.2L306.24 558.64L306.88 559.06L307.55 559.45L308.23 559.82L308.92 560.17L309.63 560.48L310.36 560.77L311.1 561.04L311.85 561.27L312.61 561.48L313.39 561.65L314.18 561.79L314.97 561.91L315.78 561.99L316.59 562.04L317.42 562.06L322.58 562.06L323.41 562.04L324.22 561.99L325.03 561.91L325.82 561.79L326.61 561.65L327.39 561.48L328.15 561.27L328.9 561.04L329.64 560.77L330.37 560.48L331.08 560.17L331.77 559.82L332.45 559.45L333.12 559.06L333.76 558.64L334.39 558.2L335 557.73L335.6 557.24L336.17 556.73L336.72 556.2L337.26 555.65L337.77 555.07L338.26 554.48L338.72 553.87L339.16 553.24L339.58 552.59L339.98 551.93L340.35 551.25L340.69 550.55L341.01 549.84L341.3 549.12L341.56 548.38L341.79 547.63L342 546.86L342.17 546.09L342.32 545.3L342.43 544.5L342.51 543.7L342.56 542.88L342.58 542.06L342.58 215.93L342.56 215.1L342.51 214.29L342.43 213.48L342.32 212.68L342.17 211.9L342 211.12L341.79 210.36L341.56 209.61L341.3 208.87L341.01 208.14L340.69 207.43L340.35 206.74L339.98 206.06L339.58 205.39L339.16 204.75L338.72 204.12L338.26 203.5L337.77 202.91L337.26 202.34L336.72 201.79L336.17 201.25L335.6 200.74L335 200.25L334.39 199.79L333.76 199.34L333.12 198.92L332.45 198.53L331.77 198.16L331.08 197.82L330.37 197.5L329.64 197.21L328.9 196.95L328.15 196.71L327.39 196.51L326.61 196.33L325.82 196.19L325.03 196.08L324.22 195.99L323.41 195.94L322.58 195.93L317.42 195.93L316.59 195.94ZM514.54 105.67L515.35 105.75L516.15 105.87L516.93 106.01L517.71 106.19L518.47 106.39L519.22 106.62L519.96 106.89L520.69 107.18L521.4 107.49L522.09 107.84L522.77 108.21L523.44 108.6L524.09 109.02L524.71 109.46L525.33 109.93L525.92 110.42L526.49 110.93L527.05 111.46L527.58 112.02L528.09 112.59L528.58 113.18L529.04 113.79L529.49 114.42L529.91 115.07L530.3 115.73L530.67 116.41L531.01 117.11L531.33 117.82L531.62 118.54L531.88 119.28L532.12 120.03L532.32 120.8L532.5 121.57L532.64 122.36L532.76 123.16L532.84 123.96L532.89 124.78L532.9 125.6L532.9 151.73L532.89 152.56L532.84 153.37L532.76 154.18L532.67 154.8L107.33 154.8L107.24 154.18L107.16 153.37L107.11 152.56L107.1 151.73L107.1 125.6L107.11 124.78L107.16 123.96L107.24 123.16L107.36 122.36L107.5 121.57L107.68 120.8L107.88 120.03L108.12 119.28L108.38 118.54L108.67 117.82L108.99 117.11L109.33 116.41L109.7 115.73L110.09 115.07L110.51 114.42L110.96 113.79L111.42 113.18L111.91 112.59L112.42 112.02L112.95 111.46L113.51 110.93L114.08 110.42L114.67 109.93L115.29 109.46L115.91 109.02L116.56 108.6L117.23 108.21L117.91 107.84L118.6 107.49L119.31 107.18L120.04 106.89L120.78 106.62L121.53 106.39L122.29 106.19L123.07 106.01L123.85 105.87L124.65 105.75L125.46 105.67L126.27 105.62L127.1 105.6L512.9 105.6L513.73 105.62L514.54 105.67ZM398.41 42.69L399.22 42.77L400.02 42.88L400.8 43.03L401.58 43.2L402.34 43.41L403.1 43.64L403.83 43.9L404.56 44.19L405.27 44.51L405.97 44.85L406.65 45.22L407.31 45.62L407.96 46.04L408.59 46.48L409.2 46.95L409.79 47.44L410.36 47.95L410.92 48.48L411.45 49.03L411.96 49.61L412.45 50.2L412.92 50.81L413.36 51.44L413.78 52.09L414.17 52.75L414.54 53.43L414.89 54.13L415.2 54.84L415.49 55.56L415.75 56.3L415.99 57.05L416.19 57.81L416.37 58.59L416.51 59.38L416.63 60.17L416.71 60.98L416.76 61.8L416.77 62.62L416.77 105.6L396.61 105.6L396.61 77.66L396.6 76.97L396.56 76.28L396.49 75.6L396.39 74.93L396.27 74.27L396.12 73.62L395.95 72.98L395.76 72.35L395.54 71.73L395.29 71.12L395.02 70.52L394.74 69.93L394.43 69.36L394.09 68.8L393.74 68.26L393.37 67.73L392.98 67.22L392.57 66.72L392.14 66.24L391.69 65.77L391.22 65.32L390.74 64.89L390.24 64.48L389.73 64.09L389.2 63.72L388.66 63.37L388.1 63.03L387.53 62.72L386.94 62.43L386.34 62.17L385.73 61.92L385.11 61.7L384.48 61.51L383.84 61.34L383.19 61.19L382.53 61.07L381.86 60.97L381.18 60.9L380.49 60.86L379.8 60.85L260.2 60.85L259.51 60.86L258.82 60.9L258.14 60.97L257.47 61.07L256.81 61.19L256.16 61.34L255.52 61.51L254.89 61.7L254.27 61.92L253.66 62.17L253.06 62.43L252.47 62.72L251.9 63.03L251.34 63.37L250.8 63.72L250.27 64.09L249.76 64.48L249.26 64.89L248.78 65.32L248.31 65.77L247.86 66.24L247.43 66.72L247.02 67.22L246.63 67.73L246.26 68.26L245.91 68.8L245.57 69.36L245.26 69.93L244.98 70.52L244.71 71.12L244.46 71.73L244.24 72.35L244.05 72.98L243.88 73.62L243.73 74.27L243.61 74.93L243.51 75.6L243.44 76.28L243.4 76.97L243.39 77.66L243.39 105.6L223.23 105.6L223.23 62.62L223.24 61.8L223.29 60.98L223.37 60.17L223.49 59.38L223.63 58.59L223.81 57.81L224.01 57.05L224.25 56.3L224.51 55.56L224.8 54.84L225.11 54.13L225.46 53.43L225.83 52.75L226.22 52.09L226.64 51.44L227.08 50.81L227.55 50.2L228.04 49.61L228.55 49.03L229.08 48.48L229.64 47.95L230.21 47.44L230.8 46.95L231.41 46.48L232.04 46.04L232.69 45.62L233.35 45.22L234.03 44.85L234.73 44.51L235.44 44.19L236.17 43.9L236.9 43.64L237.66 43.41L238.42 43.2L239.2 43.03L239.98 42.88L240.78 42.77L241.59 42.69L242.4 42.64L243.23 42.62L396.77 42.62L397.6 42.64L398.41 42.69Z" id="a2XjHEoVKO"></path></defs><g><g><g><use xlink:href="#a2XjHEoVKO" opacity="1" fill="#000000" fill-opacity="1"></use></g></g></g></svg>


--------------------------------------------------------------------------------
/res/quote.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="50" height="50"><defs><path d="M266.01 119.27L266.8 119.35L267.58 119.46L268.35 119.6L269.11 119.77L269.86 119.97L270.59 120.2L271.31 120.46L272.02 120.74L272.72 121.05L273.4 121.39L274.06 121.75L274.71 122.13L275.35 122.54L275.96 122.98L276.56 123.43L277.14 123.91L277.7 124.41L278.24 124.93L278.76 125.47L279.26 126.03L279.74 126.61L280.2 127.21L280.63 127.83L281.04 128.46L281.43 129.11L281.79 129.78L282.13 130.46L282.44 131.15L282.72 131.86L282.98 132.58L283.2 133.32L283.4 134.07L283.58 134.83L283.72 135.59L283.83 136.37L283.91 137.16L283.96 137.96L283.97 138.77L283.97 330.9L283.96 331.7L283.91 332.5L283.83 333.29L283.72 334.07L283.58 334.84L283.4 335.6L283.2 336.34L283.14 336.56L283.73 344.23L283.97 352.57L283.81 360.98L283.26 369.45L282.31 377.97L280.98 386.53L279.27 395.12L277.18 403.73L274.73 412.34L271.9 420.96L268.72 429.56L265.18 438.14L261.28 446.68L257.05 455.19L252.47 463.64L247.55 472.03L242.3 480.35L236.72 488.58L230.82 496.72L224.61 504.76L218.08 512.68L211.24 520.48L210.95 520.8L197.08 520.7L167.8 458.8L165.09 437.87L166.01 435.95L168.56 430.14L170.87 424.3L172.95 418.45L174.78 412.58L176.36 406.71L177.69 400.84L178.78 394.99L179.6 389.14L180.17 383.33L180.47 377.54L180.51 371.79L180.28 366.08L179.78 360.42L179.01 354.82L178.18 350.46L90.4 350.46L89.59 350.45L88.8 350.4L88.01 350.32L87.23 350.21L86.46 350.06L85.7 349.89L84.95 349.69L84.22 349.46L83.49 349.21L82.78 348.92L82.09 348.61L81.41 348.28L80.74 347.92L80.09 347.53L79.46 347.12L78.84 346.69L78.25 346.23L77.67 345.75L77.11 345.25L76.56 344.73L76.04 344.19L75.54 343.63L75.06 343.05L74.61 342.45L74.18 341.84L73.76 341.2L73.38 340.55L73.02 339.89L72.68 339.21L72.37 338.51L72.09 337.8L71.83 337.08L71.6 336.34L71.4 335.6L71.23 334.84L71.09 334.07L70.98 333.29L70.9 332.5L70.85 331.7L70.83 330.9L70.83 138.77L70.85 137.96L70.9 137.16L70.98 136.37L71.09 135.59L71.23 134.83L71.4 134.07L71.6 133.32L71.83 132.58L72.09 131.86L72.37 131.15L72.68 130.46L73.02 129.78L73.38 129.11L73.76 128.46L74.18 127.83L74.61 127.21L75.06 126.61L75.54 126.03L76.04 125.47L76.56 124.93L77.11 124.41L77.67 123.91L78.25 123.43L78.84 122.98L79.46 122.54L80.09 122.13L80.74 121.75L81.41 121.39L82.09 121.05L82.78 120.74L83.49 120.46L84.22 120.2L84.95 119.97L85.7 119.77L86.46 119.6L87.23 119.46L88.01 119.35L88.8 119.27L89.59 119.22L90.4 119.2L264.41 119.2L265.21 119.22L266.01 119.27Z" id="ao9CtKETs"></path><path d="M539.24 119.27L540.03 119.35L540.81 119.46L541.58 119.6L542.34 119.77L543.08 119.97L543.82 120.2L544.54 120.46L545.25 120.74L545.95 121.05L546.63 121.39L547.29 121.75L547.94 122.13L548.58 122.54L549.19 122.98L549.79 123.43L550.37 123.91L550.93 124.41L551.47 124.93L551.99 125.47L552.49 126.03L552.97 126.61L553.43 127.21L553.86 127.83L554.27 128.46L554.66 129.11L555.02 129.78L555.35 130.46L555.66 131.15L555.95 131.86L556.2 132.58L556.43 133.32L556.63 134.07L556.8 134.83L556.95 135.59L557.06 136.37L557.14 137.16L557.19 137.96L557.2 138.77L557.2 330.9L557.19 331.7L557.14 332.5L557.06 333.29L556.95 334.07L556.8 334.84L556.63 335.6L556.43 336.34L556.37 336.56L556.96 344.23L557.2 352.57L557.04 360.98L556.49 369.45L555.54 377.97L554.21 386.53L552.5 395.12L550.41 403.73L547.95 412.34L545.13 420.96L541.95 429.56L538.41 438.14L534.51 446.68L530.27 455.19L525.69 463.64L520.78 472.03L515.53 480.35L509.95 488.58L504.05 496.72L497.83 504.76L491.31 512.68L484.47 520.48L484.18 520.8L470.31 520.7L441.03 458.8L438.32 437.87L439.24 435.95L441.79 430.14L444.1 424.3L446.18 418.45L448.01 412.58L449.59 406.71L450.92 400.84L452 394.99L452.83 389.14L453.4 383.33L453.7 377.54L453.74 371.79L453.51 366.08L453.01 360.42L452.24 354.82L451.41 350.46L363.63 350.46L362.82 350.45L362.02 350.4L361.24 350.32L360.46 350.21L359.69 350.06L358.93 349.89L358.18 349.69L357.44 349.46L356.72 349.21L356.01 348.92L355.32 348.61L354.64 348.28L353.97 347.92L353.32 347.53L352.69 347.12L352.07 346.69L351.48 346.23L350.9 345.75L350.33 345.25L349.79 344.73L349.27 344.19L348.77 343.63L348.29 343.05L347.84 342.45L347.4 341.84L346.99 341.2L346.61 340.55L346.25 339.89L345.91 339.21L345.6 338.51L345.32 337.8L345.06 337.08L344.83 336.34L344.63 335.6L344.46 334.84L344.32 334.07L344.21 333.29L344.13 332.5L344.08 331.7L344.06 330.9L344.06 138.77L344.08 137.96L344.13 137.16L344.21 136.37L344.32 135.59L344.46 134.83L344.63 134.07L344.83 133.32L345.06 132.58L345.32 131.86L345.6 131.15L345.91 130.46L346.25 129.78L346.61 129.11L346.99 128.46L347.4 127.83L347.84 127.21L348.29 126.61L348.77 126.03L349.27 125.47L349.79 124.93L350.33 124.41L350.9 123.91L351.48 123.43L352.07 122.98L352.69 122.54L353.32 122.13L353.97 121.75L354.64 121.39L355.32 121.05L356.01 120.74L356.72 120.46L357.44 120.2L358.18 119.97L358.93 119.77L359.69 119.6L360.46 119.46L361.24 119.35L362.02 119.27L362.82 119.22L363.63 119.2L537.64 119.2L538.44 119.22L539.24 119.27Z" id="f5L1ecTcI"></path></defs><g><g><g><use xlink:href="#ao9CtKETs" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><use xlink:href="#f5L1ecTcI" opacity="1" fill="#000000" fill-opacity="1"></use></g></g></g></svg>


--------------------------------------------------------------------------------
/res/read.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="50" height="50"><defs><path d="M365.42 168.5L380.21 170.36L394.82 172.72L409.21 175.58L423.39 178.92L437.34 182.74L451.06 187.03L464.52 191.77L477.71 196.95L490.63 202.56L503.26 208.6L515.59 215.05L527.6 221.9L539.3 229.14L550.65 236.76L561.66 244.75L572.31 253.1L582.58 261.8L592.47 270.84L601.97 280.2L611.05 289.88L619.72 299.87L627.95 310.16L635.74 320.72L640 327.03L635.74 333.28L627.95 343.78L619.72 353.99L611.05 363.9L601.97 373.51L592.47 382.81L582.58 391.78L572.31 400.41L561.66 408.7L550.65 416.64L539.3 424.2L527.6 431.39L515.59 438.19L503.26 444.59L490.63 450.59L477.71 456.16L464.52 461.31L451.06 466.01L437.34 470.26L423.39 474.06L409.21 477.38L394.82 480.21L380.21 482.56L365.42 484.4L350.44 485.73L335.3 486.54L320 486.81L304.7 486.54L289.56 485.73L274.58 484.4L259.79 482.56L245.19 480.21L230.79 477.38L216.61 474.06L202.66 470.26L188.95 466.01L175.49 461.31L162.29 456.16L149.37 450.59L136.74 444.59L124.41 438.19L112.4 431.39L100.71 424.2L89.35 416.64L78.34 408.7L67.69 400.41L57.42 391.78L47.53 382.81L38.04 373.51L28.95 363.9L20.28 353.99L12.05 343.78L4.26 333.28L0 327.03L4.26 320.72L12.05 310.16L20.28 299.87L28.95 289.88L38.04 280.2L47.53 270.84L57.42 261.8L67.69 253.1L78.34 244.75L89.35 236.76L100.71 229.14L112.4 221.9L124.41 215.05L136.74 208.6L149.37 202.56L162.29 196.95L175.49 191.77L188.95 187.03L202.66 182.74L216.61 178.92L230.79 175.58L245.19 172.72L259.79 170.36L274.58 168.5L289.56 167.16L304.7 166.35L320 166.08L335.3 166.35L350.44 167.16L350.44 167.16L365.42 168.5ZM304.52 204.07L299.65 204.76L294.84 205.65L290.1 206.73L285.44 207.98L280.85 209.42L276.33 211.03L271.9 212.81L267.56 214.76L263.31 216.86L259.16 219.13L255.1 221.56L251.14 224.13L247.3 226.85L243.56 229.71L239.94 232.72L236.43 235.86L233.05 239.12L229.8 242.52L226.67 246.04L223.68 249.68L220.83 253.43L218.12 257.29L215.56 261.26L213.14 265.34L210.89 269.51L208.78 273.78L206.85 278.14L205.07 282.59L203.47 287.12L202.04 291.73L200.79 296.42L199.72 301.17L198.83 306L198.14 310.89L197.64 315.84L197.34 320.84L197.23 325.9L197.34 330.95L197.64 335.96L198.14 340.91L198.83 345.8L199.72 350.62L200.79 355.38L202.04 360.07L203.47 364.68L205.07 369.21L206.85 373.66L208.78 378.02L210.89 382.29L213.14 386.46L215.56 390.53L218.12 394.51L220.83 398.37L223.68 402.12L226.67 405.76L229.8 409.28L233.05 412.67L236.43 415.94L239.94 419.08L243.56 422.08L247.3 424.95L251.14 427.67L255.1 430.24L259.16 432.66L263.31 434.93L267.56 437.04L271.9 438.99L276.33 440.77L280.85 442.38L285.44 443.81L290.1 445.07L294.84 446.15L299.65 447.03L304.52 447.73L309.44 448.23L314.43 448.54L319.46 448.64L324.5 448.54L329.48 448.23L334.41 447.73L339.28 447.03L344.08 446.15L348.82 445.07L353.49 443.81L358.08 442.38L362.59 440.77L367.02 438.99L371.36 437.04L375.61 434.93L379.77 432.66L383.83 430.24L387.78 427.67L391.63 424.95L395.37 422.08L398.99 419.08L402.49 415.94L405.88 412.67L409.13 409.28L412.25 405.76L415.24 402.12L418.1 398.37L420.81 394.51L423.37 390.53L425.78 386.46L428.04 382.29L430.14 378.02L432.08 373.66L433.85 369.21L435.46 364.68L436.89 360.07L438.14 355.38L439.21 350.62L440.09 345.8L440.79 340.91L441.29 335.96L441.59 330.95L441.69 325.9L441.59 320.84L441.29 315.84L440.79 310.89L440.09 306L439.21 301.17L438.14 296.42L436.89 291.73L435.46 287.12L433.85 282.59L432.08 278.14L430.14 273.78L428.04 269.51L425.78 265.34L423.37 261.26L420.81 257.29L418.1 253.43L415.24 249.68L412.25 246.04L409.13 242.52L405.88 239.12L402.49 235.86L398.99 232.72L395.37 229.71L391.63 226.85L387.78 224.13L383.83 221.56L379.77 219.13L375.61 216.86L371.36 214.76L367.02 212.81L362.59 211.03L358.08 209.42L353.49 207.98L348.82 206.73L344.08 205.65L339.28 204.76L334.41 204.07L329.48 203.56L324.5 203.26L319.46 203.16L314.43 203.26L309.44 203.56L309.44 203.56L304.52 204.07ZM323.63 291.67L324.99 291.87L326.33 292.12L327.66 292.42L328.96 292.77L330.24 293.17L331.5 293.63L332.73 294.13L333.95 294.67L335.13 295.27L336.29 295.9L337.42 296.58L338.53 297.31L339.6 298.07L340.64 298.88L341.65 299.72L342.63 300.6L343.58 301.52L344.48 302.47L345.36 303.46L346.19 304.48L346.99 305.54L347.74 306.62L348.46 307.74L349.13 308.88L349.76 310.06L350.35 311.26L350.89 312.48L351.38 313.73L351.83 315L352.23 316.3L352.58 317.62L352.88 318.95L353.12 320.31L353.32 321.68L353.46 323.07L353.54 324.48L353.57 325.9L353.54 327.32L353.46 328.73L353.32 330.12L353.12 331.49L352.88 332.84L352.58 334.18L352.23 335.5L351.83 336.79L351.38 338.07L350.89 339.32L350.35 340.54L349.76 341.74L349.13 342.91L348.46 344.06L347.74 345.17L346.99 346.26L346.19 347.31L345.36 348.33L344.48 349.32L343.58 350.28L342.63 351.2L341.65 352.08L340.64 352.92L339.6 353.72L338.53 354.49L337.42 355.21L336.29 355.89L335.13 356.53L333.95 357.12L332.73 357.67L331.5 358.17L330.24 358.62L328.96 359.03L327.66 359.38L326.33 359.68L324.99 359.93L323.63 360.13L322.26 360.27L320.87 360.35L319.46 360.38L318.06 360.35L316.67 360.27L315.29 360.13L313.93 359.93L312.59 359.68L311.27 359.38L309.97 359.03L308.69 358.62L307.43 358.17L306.19 357.67L304.98 357.12L303.79 356.53L302.63 355.89L301.5 355.21L300.4 354.49L299.32 353.72L298.28 352.92L297.27 352.08L296.29 351.2L295.35 350.28L294.44 349.32L293.57 348.33L292.74 347.31L291.94 346.26L291.18 345.17L290.47 344.06L289.8 342.91L289.16 341.74L288.58 340.54L288.04 339.32L287.54 338.07L287.1 336.79L286.7 335.5L286.35 334.18L286.05 332.84L285.8 331.49L285.61 330.12L285.47 328.73L285.38 327.32L285.36 325.9L285.38 324.48L285.47 323.07L285.61 321.68L285.8 320.31L286.05 318.95L286.35 317.62L286.7 316.3L287.1 315L287.54 313.73L288.04 312.48L288.58 311.26L289.16 310.06L289.8 308.88L290.47 307.74L291.18 306.62L291.94 305.54L292.74 304.48L293.57 303.46L294.44 302.47L295.35 301.52L296.29 300.6L297.27 299.72L298.28 298.88L299.32 298.07L300.4 297.31L301.5 296.58L302.63 295.9L303.79 295.27L304.98 294.67L306.19 294.13L307.43 293.63L308.69 293.17L309.97 292.77L311.27 292.42L312.59 292.12L313.93 291.87L315.29 291.67L316.67 291.53L318.06 291.44L319.46 291.42L320.87 291.44L322.26 291.53L322.26 291.53L323.63 291.67Z" id="b1NBLM1N6u"></path></defs><g><g><g><use xlink:href="#b1NBLM1N6u" opacity="1" fill="#000000" fill-opacity="1"></use></g></g></g></svg>


--------------------------------------------------------------------------------
/res/reply.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="50" height="50"><defs><path d="" id="c2zaqiA6Hd"></path><path d="M132.53 329.65L260.69 420.7L260.69 238.59L260.69 56.5L132.53 147.54L4.36 238.59L132.53 329.65Z" id="d91Fhd0M92"></path><path d="" id="cbrjMOq6ce"></path><path d="" id="b4suIbm7"></path><path d="M285.01 175.83L300.6 177.14L316 178.95L331.21 181.26L346.2 184.06L360.96 187.33L375.48 191.06L389.76 195.25L403.77 199.88L417.51 204.95L430.96 210.43L444.11 216.34L456.94 222.64L469.45 229.33L481.63 236.41L493.45 243.86L504.91 251.67L515.99 259.83L526.69 268.34L536.99 277.17L546.87 286.32L556.33 295.79L565.35 305.55L573.92 315.6L582.03 325.93L589.67 336.53L596.81 347.39L603.46 358.49L609.59 369.84L615.2 381.41L620.27 393.19L624.79 405.19L628.75 417.38L632.14 429.76L634.94 442.31L637.13 455.03L638.72 467.9L639.68 480.92L640 494.07L639.68 507.23L638.72 520.24L637.13 533.12L634.94 545.84L632.14 558.39L628.75 570.77L624.79 582.96L621.22 592.43L620.22 581.82L618.25 569.37L615.51 557.07L612.03 544.94L607.83 532.97L602.9 521.18L597.28 509.59L590.97 498.19L584 487.01L576.37 476.04L568.1 465.3L559.21 454.81L549.72 444.56L539.63 434.57L528.97 424.85L517.76 415.41L505.99 406.27L493.7 397.42L480.89 388.88L467.59 380.66L453.8 372.76L439.55 365.21L424.85 358.01L409.71 351.17L394.15 344.69L378.19 338.6L361.83 332.89L345.11 327.59L328.02 322.69L310.6 318.21L292.85 314.17L274.78 310.56L256.42 307.39L253.32 306.95L253.32 174.77L253.32 174.77L269.25 175.04L285.01 175.83Z" id="g7r0nIX0sh"></path></defs><g><g><g><g><use xlink:href="#c2zaqiA6Hd" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#d91Fhd0M92" opacity="1" fill="#000000" fill-opacity="1"></use></g><g><g><use xlink:href="#cbrjMOq6ce" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"></use></g></g><g><g><use xlink:href="#b4suIbm7" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#g7r0nIX0sh" opacity="1" fill="#000000" fill-opacity="1"></use></g></g></g></svg>


--------------------------------------------------------------------------------
/styles/colors.scss:
--------------------------------------------------------------------------------
 1 | /* Highlight colors */
 2 | $color-highlight-custom: rgb(65, 82, 235); // Custom highlight color
 3 | $color-highlight-pink: rgb(221, 15, 135); // Highlight color
 4 | $color-highlight-green: rgb(30, 235, 108); // Highlight color
 5 | 
 6 | /* Shadow colors */
 7 | $color-dark-shadow: #111;
 8 | $color-light-shadow: #666;
 9 | 
10 | /* Dark Theme */
11 | // Background colors
12 | $color-primary-dark: #222; // Darker background color
13 | $color-secondary-dark: #333; // Dark background color
14 | 
15 | // Scrollbar colors
16 | $color-scrollbar-dark: #555;
17 | $color-scrollbar-hover-dark: #777;
18 | 
19 | /* Light Theme */
20 | // Background colors
21 | $color-primary-light: white; // Darker background color
22 | $color-secondary-light: #ddd; // Dark background color
23 | 
24 | // Scrollbar colors
25 | $color-scrollbar-light: #333;
26 | $color-scrollbar-hover-light: #555;
27 | 
28 | 
29 | /* Text colors */
30 | $color-txt-custom: white; // Text color on custom highlight
31 | $color-txt-light: white; // Light text color
32 | $color-txt-dark: black; // Dark text color
33 | $color-txt-muted: gray; // Muted text text


--------------------------------------------------------------------------------
/styles/layout.scss:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
  2 | 
  3 | // Font
  4 | $font-main: 'Roboto', sans-serif;
  5 | 
  6 | // Colors
  7 | @import './colors.scss';
  8 | 
  9 | // Layout values
 10 | $body-panel-h-padding: 15px;
 11 | 
 12 | /* || Layout */
 13 | html {
 14 |     height: 100%
 15 | }
 16 | 
 17 | body {
 18 |     overflow: hidden;
 19 |     margin: 0;
 20 |     font-family: $font-main;
 21 |     height: 100%;
 22 | }
 23 | 
 24 | #root {
 25 |     height: 100%;
 26 | }
 27 | 
 28 | .client {
 29 |     height: 100%;
 30 |     display: flex;
 31 |     flex-flow: column nowrap;
 32 | }
 33 | 
 34 | .top-bar {
 35 |     height: 50px;
 36 |     width: 100%;
 37 |     display: flex;
 38 |     z-index: 999;
 39 |     align-items: center;
 40 |     padding-left: 100px;
 41 | }
 42 | 
 43 | .room-status-bar {
 44 |     position: absolute;
 45 |     left: 0px;
 46 |     top: 50px;
 47 |     width: 100%;
 48 |     display: flex;
 49 |     z-index: 998;
 50 |     background-color: rgba(10, 0, 0, 0.9);
 51 |     color: red;
 52 |     backdrop-filter: blur(10px);
 53 |     box-shadow: 0 0 2px $color-dark-shadow;
 54 |     padding: 10px;
 55 |     justify-content: center;
 56 |     align-items: center;
 57 | }
 58 | 
 59 | .client-body {
 60 |     overflow: hidden;
 61 |     flex-grow: 1;
 62 |     width: 100%;
 63 |     display: flex;
 64 |     align-items: stretch;
 65 |     flex-flow: row nowrap;
 66 | }
 67 | 
 68 | .rooms-panel {
 69 |     padding-top: 15px;
 70 |     height: inherit;
 71 |     width: fit-content;
 72 |     max-width: 20vw;
 73 |     white-space: nowrap;
 74 |     z-index: 97;
 75 | }
 76 | 
 77 | .main-body {
 78 |     height: inherit;
 79 |     width: 100%;
 80 |     display: flex;
 81 |     flex-flow: column;
 82 |     align-items: stretch;
 83 |     overflow-wrap: break-word;
 84 |     word-break: break-all;
 85 | }
 86 | 
 87 | .body-panel {
 88 |     height: inherit;
 89 |     padding-left: $body-panel-h-padding;
 90 |     flex-grow: 1;
 91 |     display: flex;
 92 |     flex-flow: column nowrap;
 93 |     align-items: stretch;
 94 | }
 95 | 
 96 | .list-panel {
 97 |     margin-top: auto;
 98 |     height: fit-content;
 99 |     padding-left: 0;
100 |     padding-right: 0;
101 |     margin-bottom: 5px;
102 |     display: flex;
103 |     flex-flow: column nowrap;
104 |     align-items: stretch;
105 |     list-style: none;
106 | }
107 | 
108 | .list-panel-item {
109 |     padding: 5px;
110 |     overflow: hidden;
111 |     text-overflow: ellipsis;
112 | }
113 | 
114 | .typing-panel {
115 |     display: flex;
116 |     justify-content: center;
117 |     align-items: center;
118 |     min-height: 19px;
119 |     animation: pulse 1s infinite;
120 | }
121 | 
122 | .composer-panel {
123 |     display: flex;
124 |     align-items: stretch;
125 |     box-shadow: 0 0 5px $color-light-shadow;
126 |     z-index: 50;
127 | }
128 | 
129 | .msg-composer {
130 |     min-height: 45px;
131 |     width: 100%;
132 |     padding: 15px; 
133 |     resize: none;
134 |     border: none;
135 |     outline: none;
136 | }
137 | 
138 | .msg-composer:focus {
139 |     outline: none;
140 |     box-shadow: none;
141 | }
142 | 
143 | .loader {
144 |     margin: 5px;
145 |     border: 4px solid rgba(0, 0, 0, 0);
146 |     border-radius: 50%;
147 |     width: 32px;
148 |     height: 32px;
149 |     animation: spin 0.75s linear infinite;
150 | }
151 | 
152 | .loader-panel {
153 |     display: flex;
154 |     align-items: center;
155 |     justify-content: center;
156 | }
157 | 
158 | .timeline-img {
159 |     max-width: calc(#{100%} - #{$body-panel-h-padding*2});
160 |     border: 2px solid grey;
161 | }
162 | 
163 | .modal {
164 |     position: fixed;
165 |     z-index: 9999;
166 |     left: 0;
167 |     right: 0;
168 |     width: 100%;
169 |     height: 100%;
170 |     overflow: none;
171 |     display: flex;
172 |     align-items: center;
173 |     justify-content: center;
174 |     background-color: rgba(0,0,0,0.7);
175 |     backdrop-filter: blur(20px);
176 | 
177 | }
178 | 
179 | .modal-content {
180 |     position: relative;
181 |     background-color: white;
182 |     box-shadow: 0 0 10px $color-dark-shadow;
183 |     width: fit-content;
184 |     min-width: 200px;
185 |     min-height: 50px;
186 |     max-height: 80%;
187 | }
188 | 
189 | .modal-topbar {
190 |     @extend .top-bar;
191 |     height: 40px;
192 |     z-index: inherit;
193 |     padding-left: 0px;
194 |     display: flex;
195 |     flex-flow: row nowrap;
196 |     align-items: center;
197 |     justify-content: flex-end;
198 | }
199 | 
200 | .modal-title {
201 |     margin: auto;
202 | }
203 | 
204 | .form {
205 |     display: flex;
206 |     margin-left: 15px;
207 |     margin-right: 15px;
208 |     padding: 5px;
209 |     flex-flow: column nowrap;
210 |     align-items: center;
211 |     justify-content: center;
212 | }
213 | 
214 | .form-element {
215 |     margin-top: 5px;
216 |     margin-bottom: 5px;
217 | }
218 | 
219 | .form-label {
220 |     margin: 0;
221 | }
222 | 
223 | .form-button-panel {
224 |     width: 50%;
225 |     display: flex;
226 |     flex-flow: row nowrap;
227 |     justify-content: center;
228 |     align-items: center;
229 |     margin-top: 5px;
230 | }
231 | 
232 | .form-button {
233 |     margin-left: 4px;
234 |     margin-right: 4px;
235 |     background-color: #444;
236 |     border: none;
237 |     color: #fff;
238 |     padding: 5px 10px;
239 |     text-align: center;
240 |     text-decoration: none;
241 |     display: inline-block;
242 | }
243 | 
244 | .form-button:hover {
245 |     background-color: #666;
246 |     cursor: pointer;
247 | }
248 | 
249 | .form-checkbox {
250 |     border-radius: 0;
251 |     cursor: pointer;
252 | }
253 | 
254 | .form-checkbox:disabled {
255 |     cursor: not-allowed;
256 | }
257 | 
258 | .form-button:disabled {
259 |     background-color: #666;
260 |     color: #888;
261 |     cursor: not-allowed;
262 | }
263 | 
264 | .error-msg {
265 |     font-size: 14px;
266 |     color: #f00;
267 | }
268 | 
269 | .cross-container {
270 |     width: fit-content;
271 |     height: fit-content;
272 |     opacity: 0.5;
273 |     background-color: rgba(0,0,0,0);
274 | }
275 | 
276 | .cross-container:hover {
277 |     opacity: 1;
278 |     cursor: pointer;
279 | }
280 | 
281 | .cross {
282 |     margin-left: 12.5px;
283 |     width: 25px;
284 |     height: 25px;
285 | }
286 | 
287 | .cross:before, .cross:after {
288 |     position: absolute;
289 |     content: ' ';
290 |     height: 25px;
291 |     width: 2px;
292 |     background-color: gray;
293 | }
294 | .cross:before {
295 |     transform: rotate(45deg);
296 | }
297 | .cross:after {
298 |     transform: rotate(-45deg);
299 | }
300 | 
301 | /* ||| Avatar */
302 | .rounded-img {
303 |     background-color: black;
304 |     margin-top: 15px;
305 |     margin-bottom: 15px;
306 |     margin-right: 20px;
307 |     margin-left: 20px;
308 |     border-radius: 50%;
309 |     object-fit: cover;
310 |     -webkit-user-select: none;        
311 |     -moz-user-select: none; 
312 |     -ms-user-select: none; 
313 |     user-select: none; 
314 | }
315 | 
316 | .rounded-container {
317 |     margin-top: 15px;
318 |     margin-bottom: 15px;
319 |     margin-right: 20px;
320 |     margin-left: 20px;
321 |     border-radius: 50%;
322 |     display: flex;
323 |     justify-content: center;
324 |     align-items: center;
325 |     color: white;
326 |     -webkit-user-select: none;   
327 |     -moz-user-select: none;
328 |     -ms-user-select: none;
329 |     user-select: none;
330 | }
331 | 
332 | /* ||| Timeline event */
333 | .msg-body {
334 |     position: relative;
335 |     z-index: 1;
336 |     margin-left: 15px;
337 |     margin-right: 15px;
338 |     display: flex;
339 |     flex-flow: row nowrap;
340 |     align-items: flex-start;
341 |     height: 100%;
342 |     border-radius: 4px;
343 | }
344 | 
345 | .msg-toolbar {
346 |     position: absolute;
347 |     top: 0px;
348 |     right: 0px;
349 |     float: right;
350 |     margin-left: auto;
351 |     height: fit-content;
352 |     width: fit-content;
353 |     display: none;
354 |     border-radius: 3px;
355 |     border: 1px solid $color-light-shadow;
356 |     border-left: 0px;
357 | }
358 | 
359 | .msg-tool {
360 |     height: 22px;
361 |     width: 30px;
362 |     display: flex;
363 |     justify-content: center;
364 |     align-items: center;
365 |     border-left: 1px solid gray;
366 | }
367 | 
368 | .msg-tool:hover {
369 |     cursor: pointer;
370 | }
371 | 
372 | .msg-body:hover .msg-toolbar {
373 |     display: flex;
374 | }
375 | 
376 | .msg-data {
377 |     height: fit-content;
378 | }
379 | 
380 | /* || Styling and themes */
381 | .send-button {
382 |     height: 100%;
383 |     width: 75px;
384 |     padding: 0px;
385 |     cursor: pointer;
386 |     border: none;
387 |     outline: none;
388 |     box-shadow: none;
389 | 
390 |     transition: width 0.2s, box-shadow 0.2s;
391 | }
392 | 
393 | .send-button:disabled {
394 |     width: 0px;
395 | }
396 | 
397 | .send-button:hover {
398 |     box-shadow: 0 0 20px $color-light-shadow;
399 | }
400 | 
401 | .reply-popup {
402 |     z-index: 49;
403 |     border-top: 1px solid $color-light-shadow;
404 |     display: flex;
405 |     flex-flow: row nowrap;
406 |     justify-content: space-between;
407 |     padding-top: 5px;
408 |     min-height: 125px;
409 |     max-height: 20%;
410 |     -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 100%);
411 |     mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 100%);
412 |     box-shadow: 0 0 20px $color-light-shadow;
413 | }
414 | 
415 | blockquote {
416 |     display: block;
417 |     margin: 0;
418 |     padding-left: 15px;
419 |     border-left: 3px solid grey;
420 | }
421 | 
422 | a {
423 |     color: #238cf5;
424 |     text-decoration: none;
425 |     font-weight: 600;
426 | }
427 | 
428 | a:hover, a:active {
429 |     text-decoration: underline;
430 | }
431 | 
432 | a:visited {
433 |     text-decoration: none;
434 |     color: #238cf5;
435 | }
436 | 
437 | .user-list {
438 |     display: flex;
439 |     flex-flow: column nowrap;
440 |     max-height: 100%;
441 |     padding-left: 0px;
442 |     padding-right: 10px;
443 | }
444 | 
445 | .user-list-item {
446 |     display: flex;
447 |     flex-flow: row nowrap;
448 |     align-items: center;
449 | }
450 | 
451 | .user-panel {
452 |     max-height: calc(80% - 50px);
453 |     max-height: calc(80vh - 50px);
454 | }
455 | 
456 | /* ||| Scrollbar */
457 | .scrollable {
458 |     overflow: auto;
459 | }
460 | 
461 | .scrollable::-webkit-scrollbar {
462 |     width: 5px;
463 | }
464 | 
465 | .scrollable::-webkit-scrollbar-track {
466 |     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
467 | }
468 | 
469 | .scrollable::-webkit-scrollbar-thumb {
470 |     border-radius: 5px;
471 | }
472 | 
473 | /* ||| Animations */
474 | .hoverable:hover {
475 |     box-shadow: 0 0 5px $color-light-shadow;
476 |     z-index: 99;
477 |     cursor: pointer;
478 | }
479 | 
480 | @keyframes spin {
481 |     0% { 
482 |         transform: rotate(0deg); 
483 |     }
484 |     100% { 
485 |         transform: rotate(360deg); 
486 |     }
487 | }
488 | 
489 | @keyframes pulse {
490 |     0% {
491 |         transform: scale(0.95);
492 |     }
493 | 
494 |     70% {
495 |         transform: scale(1);
496 |     }
497 | 
498 |     100% {
499 |         transform: scale(0.95);
500 |     }
501 | }


--------------------------------------------------------------------------------
/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import './themes.scss';


--------------------------------------------------------------------------------
/styles/themes.scss:
--------------------------------------------------------------------------------
  1 | @import './layout.scss';
  2 | 
  3 | /* Highlights */
  4 | // Custom
  5 | .send-button-custom {
  6 |     @extend .send-button;
  7 |     background-color: $color-highlight-custom;
  8 |     color: $color-txt-light;
  9 | }
 10 | 
 11 | .highlight-custom {
 12 |     z-index: 98;
 13 |     color: $color-txt-custom;
 14 |     background-color: $color-highlight-custom;
 15 |     box-shadow: 0 0 5px $color-light-shadow;
 16 | }
 17 | 
 18 | .hoverable-custom:hover {
 19 |     @extend .hoverable;
 20 |     color: $color-txt-custom;
 21 |     background-color: $color-highlight-custom;
 22 | }
 23 | 
 24 | .timeline-img-custom {
 25 |     @extend .timeline-img;
 26 |     border-color: $color-highlight-custom;
 27 | }
 28 | 
 29 | .cross-custom {
 30 |     @extend .cross;
 31 | }
 32 | 
 33 | .cross-custom:before, .cross-custom:after {
 34 |     background-color: $color-txt-custom;
 35 | }
 36 | 
 37 | // Pink
 38 | .send-button-pink {
 39 |     @extend .send-button;
 40 |     background-color: $color-highlight-pink;
 41 |     color: $color-txt-light;
 42 | }
 43 | 
 44 | .highlight-pink {
 45 |     z-index: 98;
 46 |     color: $color-txt-light;
 47 |     background-color: $color-highlight-pink;
 48 |     box-shadow: 0 0 5px $color-light-shadow;
 49 | }
 50 | 
 51 | .hoverable-pink:hover {
 52 |     @extend .hoverable;
 53 |     color: $color-txt-light;
 54 |     background-color: $color-highlight-pink;
 55 | }
 56 | 
 57 | .timeline-img-pink {
 58 |     @extend .timeline-img;
 59 |     border-color: $color-highlight-pink;
 60 | }
 61 | 
 62 | .cross-pink {
 63 |     @extend .cross;
 64 | }
 65 | 
 66 | .cross-pink:before, .cross-pink:after {
 67 |     background-color: $color-txt-light;
 68 | }
 69 | 
 70 | // Green
 71 | .send-button-green {
 72 |     @extend .send-button;
 73 |     background-color: $color-highlight-green;
 74 |     color: $color-txt-dark;
 75 | }
 76 | 
 77 | .highlight-green {
 78 |     z-index: 98;
 79 |     color: $color-txt-dark;
 80 |     background-color: $color-highlight-green;
 81 |     box-shadow: 0 0 5px $color-light-shadow;
 82 | }
 83 | 
 84 | .hoverable-green:hover {
 85 |     @extend .hoverable;
 86 |     color: $color-txt-dark;
 87 |     background-color: $color-highlight-green;
 88 | }
 89 | 
 90 | .timeline-img-green {
 91 |     @extend .timeline-img;
 92 |     border-color: $color-highlight-green;
 93 | }
 94 | 
 95 | .cross-green {
 96 |     @extend .cross;
 97 | }
 98 | 
 99 | .cross-green:before, .cross-green:after {
100 |     background-color: $color-txt-dark;
101 | }
102 | 
103 | /* Themes */
104 | // Dark
105 | .bg-primary-dark {
106 |     color: $color-txt-light;
107 |     background-color: $color-primary-dark;
108 | }
109 | 
110 | .bg-secondary-dark {
111 |     color: $color-txt-light;
112 |     background-color: $color-secondary-dark;
113 | }
114 | 
115 | .scrollable-dark {
116 |     @extend .scrollable;
117 | }
118 | 
119 | .scrollable-dark::-webkit-scrollbar-thumb {
120 |     border-radius: 5px;
121 |     background-color: $color-scrollbar-dark;
122 | }
123 | 
124 | .scrollable-dark::-webkit-scrollbar-thumb:hover {
125 |     background-color: $color-scrollbar-hover-dark;
126 | }
127 | 
128 | .loader-dark {
129 |     @extend .loader;
130 |     border-top: 4px solid $color-secondary-light;
131 |     border-left: 4px solid $color-secondary-light;
132 | }
133 | 
134 | .modal-content-dark {
135 |     @extend .modal-content;
136 |     background-color: $color-primary-dark;
137 | }
138 | 
139 | .msg-body-dark {
140 |     @extend .msg-body;
141 |     background-color: $color-primary-dark;
142 | }
143 | 
144 | .msg-body-dark:hover {
145 |     background-color: $color-secondary-dark;
146 | }
147 | 
148 | .msg-tool-dark {
149 |     @extend .msg-tool;
150 |     background-color: $color-primary-dark;
151 | }
152 | 
153 | .msg-tool-dark:hover {
154 |     background-color: $color-secondary-dark;
155 | }
156 | 
157 | .ico-dark {
158 |     filter: invert(80%);
159 | }
160 | 
161 | // Light
162 | .bg-primary-light {
163 |     color: $color-txt-dark;
164 |     background-color: $color-primary-light;
165 | }
166 | 
167 | .bg-secondary-light {
168 |     color: $color-txt-dark;
169 |     background-color: $color-secondary-light;
170 | }
171 | 
172 | .scrollable-light {
173 |     @extend .scrollable;
174 | }
175 | 
176 | .scrollable-light::-webkit-scrollbar-thumb {
177 |     border-radius: 5px;
178 |     background-color: $color-scrollbar-light;
179 | }
180 | 
181 | .scrollable-light::-webkit-scrollbar-thumb:hover {
182 |     background-color: $color-scrollbar-hover-light;
183 | }
184 | 
185 | .loader-light {
186 |     @extend .loader;
187 |     border-top: 4px solid $color-secondary-dark;
188 |     border-left: 4px solid $color-secondary-dark;
189 | }
190 | 
191 | .modal-content-light {
192 |     @extend .modal-content;
193 |     background-color: $color-primary-light;
194 | }
195 | 
196 | .msg-body-light {
197 |     @extend .msg-body;
198 |     background-color: $color-primary-light;
199 | }
200 | 
201 | .msg-body-light:hover {
202 |     background-color: $color-secondary-light;
203 | }
204 | 
205 | .msg-tool-light {
206 |     @extend .msg-tool;
207 |     background-color: $color-primary-light;
208 | }
209 | 
210 | .msg-tool-light:hover {
211 |     background-color: $color-secondary-light;
212 | }
213 | 
214 | .ico-light {
215 |     filter: invert(30%);
216 | }
217 | 
218 | /* ||| Text styles */
219 | .text-muted {
220 |     color: $color-txt-muted;
221 | }


--------------------------------------------------------------------------------
/test-page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |     <head>
 3 |         <!-- Required meta tags -->
 4 |         <meta charset="utf-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 | 
 7 |         <!-- Bootstrap CSS -->
 8 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">	  
 9 | 
10 |         <!-- Optional JavaScript -->
11 |         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
12 |         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
13 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
14 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
15 |  
16 |         <title>Test page</title>
17 | 
18 |         <style>
19 |             .page-body {
20 |                 display: flex;
21 |                 flex-direction: row;
22 |             }
23 |         </style>
24 |     </head>
25 |     <body class="bg-dark text-white">
26 |         <h1>Test Page</h1>
27 | 
28 |         <div class="page-body">
29 |             <div class="mx-1">
30 |                 <h5 class="text-muted">600x400</h5>
31 |                 <iframe src="http://localhost:9000/" width="600" height="400" id="6x4" class="border"></iframe>
32 |             </div>
33 | 
34 |             <div class="mx-1">
35 |                 <h5 class="text-muted">800x800</h5>
36 |                 <iframe src="http://localhost:9000/" width="800" height="800" id="8x8" class="border"></iframe>
37 |             </div>
38 |         </div>
39 |     </body>
40 | </html>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |     entry: './app.js',
 5 |     output: {
 6 |         filename: 'bundle.js',
 7 |         path: path.resolve(__dirname, 'dist')
 8 |     },
 9 |     module: {
10 |         rules: [
11 |             {
12 |                 test:/\.jsx?$/,
13 |                 exclude: /node_modules/,
14 |                 use: {
15 |                     loader: 'babel-loader',
16 |                     options: {
17 |                         presets: [
18 |                             [
19 |                                 '@babel/preset-env',
20 |                                 {
21 |                                     'targets': {
22 |                                         'node': 'current'
23 |                                     }
24 |                                 }
25 |                             ],
26 |                             '@babel/react',
27 |                             {
28 |                                 'plugins': ['@babel/plugin-proposal-class-properties']
29 |                             }
30 |                         ]
31 |                     }
32 |                 }
33 |             },
34 |             {
35 |                 test:/\.s[ac]ss$/,
36 |                 use:['style-loader', 'css-loader', 'sass-loader']
37 |             },
38 |             {
39 |                 test:/\.svg$/,
40 |                 use:['@svgr/webpack']
41 |             }
42 |         ]
43 |     },
44 |     resolve: {
45 |         extensions: ['*', '.js', '.jsx']
46 |     },
47 |     watch: false,
48 |     devServer: {
49 |         contentBase: path.resolve(__dirname, '.'),
50 |         port: 9000,
51 |         hot: true,
52 |         writeToDisk: true
53 |     },
54 | };
55 | 


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