2.1.1

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "private-safesupport-chatbox",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,8 +1,8 @@
 {
   "name": "private-safesupport-chatbox",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "A secure and private embeddable chatbox that connects to Riot",
-  "main": "dist/chatbox.js",
+  "main": "dist/component.js",
   "scripts": {
     "build": "NODE_ENV=production webpack-cli --mode production",
     "build:profile": "webpack --mode production --config webpack.config.profile.js",
@@ -118,6 +118,8 @@
     "node-sass": "^4.13.1",
     "postcss-increase-specificity": "0.6.0",
     "postcss-loader": "3.0.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "sass-loader": "8.0.0",
     "style-loader": "1.1.2",
     "wait-for-expect": "^3.0.2",
@@ -137,11 +139,13 @@
     "node-localstorage": "^2.1.5",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
     "prop-types": "^15.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
     "react-onclickoutside": "^6.9.0",
     "react-test-renderer": "^16.13.0",
     "react-transition-group": "^4.0.0",
     "uuidv4": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   }
 }

src/components/chatbox.jsx

@@ -461,38 +461,15 @@ class ChatBox extends React.Component {
     const decryptionErrors = {...this.state.decryptionErrors}
     delete decryptionErrors[message.id]
 
-    const isOfflineNotice = message.content.msgtype === "m.notice" && message.content.body === CHAT_IS_OFFLINE_NOTICE
-
-    let newMessage = message
-
-    // when the bot sends a notice that the chat is offline
-    // replace the message with the client-configured message
-    // for now we're treating m.notice and m.text messages the same
-    if (isOfflineNotice) {
-      newMessage = {
-        ...message,
-        content: {
-          ...message.content,
-          body: this.props.chatOfflineMessage
-        }
-      }
-      this.handleChatOffline()
-    }
-
     this.setState({
       messages: {
         ...this.state.messages,
-        [message.id]: newMessage,
+        [message.id]: message,
       },
       decryptionErrors
     })
   }
 
-  handleChatOffline = () => {
-    this.exitChat(false) // close the chat connection but keep chatbox state
-    this.setState({ ready: true }) // no more loading animation
-  }
-
   handleKeyDown = (e) => {
     switch (e.keyCode) {
       case 27:
@@ -584,6 +561,9 @@ class ChatBox extends React.Component {
       case 'END_CHAT':
         this.displayBotMessage({ body: this.props.exitMessage })
         return this.exitChat(false); // keep chat state
+      case 'CHAT_OFFLINE':
+        this.displayBotMessage({ body: this.props.chatOfflineMessage })
+        return this.exitChat(false); // keep chat state
     }
   }
 

src/outputs/component.js

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

webpack.config.js

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