1.1.1

.circleci/config.yml

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

.storybook/addons.js

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

.storybook/config.js

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

.storybook/webpack.config.js

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

README.md

@@ -10,11 +10,11 @@ Built on:
 
 ## Usage
 ```
-<script src="https://unpkg.com/safesupport-chatbox" type="text/javascript"></script>
+<script src="https://unpkg.com/private-safesupport-chatbox" type="text/javascript"></script>
 <script>
   var config = {
-    matrixServerUrl: 'https://matrix.rhok.space',
-    botId: '@help-bot:rhok.space',
+    matrixServerUrl: 'https://matrix-client.matrix.org',
+    botId: '@your-help-bot:matrix.org',
     roomName: 'Support Chat',
     termsUrl: 'https://tosdr.org/',
     introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
@@ -31,8 +31,8 @@ Built on:
 Options:
 | Name | Description | Default
 | ----------- | ----------- | --------- |
-| `matrixServerUrl` (required) | URL for the Matrix homeserver you want to connect to | `https://matrix.rhok.space` |
-| `botId` (required) | User ID for the bot account that handles invites | `@help-bot:rhok.space` |
+| `matrixServerUrl` (required) | URL for the Matrix homeserver you want to connect to | `https://matrix-client.matrix.org` |
+| `botId` (required) | User ID for the bot account that handles invites | null |
 | `introMessage` (optional) | First message the user sees before agreeing to the Terms of Use | `This chat application does not collect any of your personal data or any data from your use of this service.` |
 | `termsUrl` (optional) | URL for the Terms of Use for the chat service | `https://tosdr.org/` |
 | `roomName` (optional)  | Name of the chatroom generated in Riot | 'Support Chat' |

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "safesupport-chatbox",
-  "version": "1.1.3",
+  "name": "private-safesupport-chatbox",
+  "version": "1.1.1",
   "description": "A secure and private embeddable chatbox that connects to Riot",
   "main": "dist/chatbox.js",
   "scripts": {
@@ -89,10 +89,6 @@
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
-    "@storybook/addon-actions": "5.2.8",
-    "@storybook/addon-links": "5.2.8",
-    "@storybook/addons": "5.2.8",
-    "@storybook/react": "5.2.8",
     "autoprefixer": "^9.7.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
@@ -125,6 +121,7 @@
     "style-loader": "1.1.2",
     "wait-for-expect": "^3.0.2",
     "webpack": "4.41.5",
+    "webpack-bundle-analyzer": "^3.7.0",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1",
     "webpack-obfuscator": "0.22.0",

public/index.html

@@ -13,8 +13,8 @@
     <script src="./chatbox.js"></script>
     <script>
       var config = {
-        matrixServerUrl: 'https://matrix.safesupport.chat',
-        botId: '@help-bot:safesupport.chat',
+        matrixServerUrl: 'https://matrix.rhok.space',
+        botId: '@help-bot:rhok.space',
         roomName: 'Support Chat',
         termsUrl: 'https://tosdr.org/',
         introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",

src/components/_chat.scss

@@ -99,6 +99,7 @@
   width: 400px;
   max-width: calc(100vw - 10px);
   border-bottom: none;
+  margin: 0;
   animation-duration: 0.2s;
   animation-fill-mode: forwards;
 

src/components/_dark_mode.scss

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

src/components/chatbox.jsx

@@ -25,7 +25,7 @@ const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end enc
 const UNENCRYPTION_NOTICE = "Messages in this chat are not encrypted."
 const RESTARTING_UNENCRYPTED_CHAT_MESSAGE = "Restarting chat without encryption."
 const WAIT_TIME_MS = 120000 // 2 minutes
-const CHAT_IS_OFFLINE_NOTICE = "Chat is offline"
+const CHAT_IS_OFFLINE_NOTICE = "CHAT_OFFLINE"
 
 const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space/"
 const DEFAULT_BOT_ID = "@help-bot:rhok.space"
@@ -37,7 +37,9 @@ const DEFAULT_CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat
 const DEFAULT_EXIT_MESSAGE = "The chat is closed. You may close this window."
 const DEFAULT_ANONYMOUS_DISPLAY_NAME="Anonymous"
 const DEFAULT_CHAT_UNAVAILABLE_MESSAGE = "The chat service is not available right now. Please try again later."
+const DEFAULT_CHAT_OFFLINE_MESSAGE = "All of the chat facilitators are currently offline."
 const DEFAULT_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests."
+const DEFAULT_ENCRYPTION_DISABLED = false
 
 
 class ChatBox extends React.Component {
@@ -52,7 +54,7 @@ class ChatBox extends React.Component {
       userId: null,
       password: null,
       localStorage: null,
-      messages: [],
+      messages: {},
       inputValue: "",
       errors: [],
       roomId: null,
@@ -144,27 +146,31 @@ class ChatBox extends React.Component {
     }
   }
 
-  exitChat = async () => {
-    if (!this.state.client) return null;
+  exitChat = async (resetState=true) => {
+    if (this.state.client) {
+      await this.state.client.leave(this.state.roomId)
 
-    await this.state.client.leave(this.state.roomId)
+      const auth = {
+        type: 'm.login.password',
+        user: this.state.userId,
+        identifier: {
+            type: "m.id.user",
+            user: this.state.userId,
+        },
+        password: this.state.password,
+      };
 
-    const auth = {
-      type: 'm.login.password',
-      user: this.state.userId,
-      identifier: {
-          type: "m.id.user",
-          user: this.state.userId,
-      },
-      password: this.state.password,
-    };
-
-    await this.state.client.deactivateAccount(auth, true)
-    await this.state.client.stopClient()
-    await this.state.client.clearStores()
+      await this.state.client.deactivateAccount(auth, true)
+      await this.state.client.stopClient()
+      await this.state.client.clearStores()
+      this.setState({ client: null })
+    }
 
     this.state.localStorage.clear()
-    this.setState(this.initialState)
+
+    if (resetState) {
+      this.setState(this.initialState)
+    }
   }
 
   createLocalStorage = async (deviceId, sessionId) => {
@@ -232,14 +238,14 @@ class ChatBox extends React.Component {
     try {
       await client.initCrypto()
     } catch(err) {
-      return this.initializeUnencryptedChat()
+      return this.restartWithoutCrypto()
     }
 
     await client.startClient()
     await this.createRoom(client)
   }
 
-  initializeUnencryptedChat = async () => {
+  restartWithoutCrypto = async () => {
     if (this.state.client) {
       this.state.client.leave(this.state.roomId)
       this.state.client.stopClient()
@@ -282,7 +288,21 @@ class ChatBox extends React.Component {
       console.log("error", err)
       this.handleInitError(err)
     }
+  }
 
+
+  initializeUnencryptedChat = async () => {
+    this.setState({ ready: false })
+
+    const client = await this.createClientWithAccount()
+    this.setState({
+      client: client
+    })
+    client.setDisplayName(this.props.anonymousDisplayName)
+    this.setMatrixListeners(client)
+
+    await client.startClient()
+    await this.createRoom(client)
   }
 
   handleInitError = (err) => {
@@ -292,17 +312,8 @@ class ChatBox extends React.Component {
   }
 
   handleDecryptionError = async (event, err) => {
-    if (this.state.client) {
-      const isCryptoEnabled = await this.state.client.isCryptoEnabled()
-      const isRoomEncrypted = this.state.client.isRoomEncrypted(this.state.roomId)
-
-      if (!isCryptoEnabled || !isRoomEncrypted) {
-        return this.initializeUnencryptedChat()
-      }
-    }
-
     const eventId = event.getId()
-    this.displayFakeMessage({ body: '** Unable to decrypt message **' }, event.getSender(), eventId)
+    this.handleMessageEvent(event)
     this.setState({ decryptionErrors: { [eventId]: true }})
   }
 
@@ -376,31 +387,39 @@ class ChatBox extends React.Component {
   }
 
   displayFakeMessage = (content, sender, messageId=uuid()) => {
-    const msgList = [...this.state.messages]
     const msg = {
       id: messageId,
       type: 'm.room.message',
       sender: sender,
       roomId: this.state.roomId,
       content: content,
+      timestamp: Date.now(),
     }
-    msgList.push(msg)
 
-    this.setState({ messages: msgList })
+    this.setState({
+      messages: {
+        ...this.state.messages,
+        [messageId]: msg
+      }
+    })
   }
 
-  displayBotMessage = (content, roomId) => {
-    const msgList = [...this.state.messages]
+  displayBotMessage = (content, roomId, messageId=uuid()) => {
     const msg = {
-      id: uuid(),
+      id: messageId,
       type: 'm.room.message',
       sender: this.props.botId,
       roomId: roomId || this.state.roomId,
       content: content,
+      timestamp: Date.now(),
     }
-    msgList.push(msg)
 
-    this.setState({ messages: msgList })
+    this.setState({
+      messages: {
+        ...this.state.messages,
+        [messageId]: msg
+      }
+    })
   }
 
   handleMessageEvent = event => {
@@ -410,8 +429,12 @@ class ChatBox extends React.Component {
       sender: event.getSender(),
       roomId: event.getRoomId(),
       content: event.getContent(),
+      timestamp: event.getTs(),
     }
 
+    // there's also event.getClearContent() which only works on encrypted messages
+    // but not really sure when it should be used vs event.getContent()
+
     if (message.content.showToUser && message.content.showToUser !== this.state.userId) {
       return;
     }
@@ -427,22 +450,41 @@ class ChatBox extends React.Component {
       this.setState({ messagesInFlight })
     }
 
-    // check for decryption error message and replace with decrypted message
-    // or push message to messages array
-    const messages = [...this.state.messages]
     const decryptionErrors = {...this.state.decryptionErrors}
     delete decryptionErrors[message.id]
-    const existingMessageIndex = messages.findIndex(({ id }) => id === message.id)
 
-    if (existingMessageIndex > -1) {
-      messages.splice(existingMessageIndex, 1, message)
-    } else {
-      messages.push(message)
+    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(event.getRoomId())
     }
 
-    this.setState({ messages, decryptionErrors })
+    this.setState({
+      messages: {
+        ...this.state.messages,
+        [message.id]: newMessage,
+      },
+      decryptionErrors
+    })
   }
 
+  handleChatOffline = (roomId) => {
+    this.exitChat(false) // close the chat connection but keep chatbox state
+    window.clearInterval(this.state.timeoutId) // no more waiting messages
+    this.setState({ ready: true }) // no more loading animation
+  }
 
   handleKeyDown = (e) => {
     switch (e.keyCode) {
@@ -492,12 +534,6 @@ class ChatBox extends React.Component {
         return this.handleDecryptionError(event, err)
       }
       if (event.getType() === "m.room.message") {
-        const content = event.getContent()
-
-        if (content.msgtype === "m.notice" && content.body === CHAT_IS_OFFLINE_NOTICE) {
-          this.setState({ ready: true })
-          return window.clearInterval(this.state.timeoutId)
-        }
         this.handleMessageEvent(event)
       }
     });
@@ -513,7 +549,7 @@ class ChatBox extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevState.messages.length !== this.state.messages.length) {
+    if ((prevState.messages !== this.state.messages) || (prevState.messagesInFlight !== this.state.messagesInFlight) || (prevState.typingStatus !== this.state.typingStatus)) {
       if (this.messageWindow.current.scrollTo) {
         this.messageWindow.current.scrollTo(0, this.messageWindow.current.scrollHeight)
       }
@@ -549,7 +585,11 @@ class ChatBox extends React.Component {
     this.setState({ awaitingAgreement: false })
     this.startWaitTimeForFacilitator()
     try {
-      this.initializeChat()
+      if (this.props.isEncryptionDisabled) {
+        this.initializeUnencryptedChat()
+      } else {
+        this.initializeChat()
+      }
     } catch(err) {
       this.handleInitError(err)
     }
@@ -557,7 +597,7 @@ class ChatBox extends React.Component {
 
   startWaitTimeForFacilitator = () => {
     const timeoutId = window.setInterval(() => {
-      if (!this.state.facilitatorId) {
+      if (!this.state.facilitatorId && !this.state.ready) {
         this.displayBotMessage({ body: this.props.waitMessage })
       }
     }, WAIT_TIME_MS)
@@ -575,7 +615,7 @@ class ChatBox extends React.Component {
     const message = this.state.inputValue
     if (!Boolean(message)) return null;
 
-    if (this.state.isCryptoEnabled && !(this.state.client.isRoomEncrypted(this.state.roomId) && this.state.client.isCryptoEnabled())) return null;
+    if (this.state.isCryptoEnabled && this.state.client && !(this.state.client.isRoomEncrypted(this.state.roomId) && this.state.client.isCryptoEnabled())) return null;
 
     if (this.state.client && this.state.roomId) {
       const messagesInFlight = [...this.state.messagesInFlight]
@@ -596,106 +636,109 @@ class ChatBox extends React.Component {
 
   render() {
     const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
+    const orderedMessages = Object.values(messages).sort((a,b) => a.timestamp - b.timestamp)
     const inputLabel = 'Send a message...'
 
     return (
-      <div className="docked-widget" role="complementary">
-        <Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
-          {(status) => {
-            return (
-            <div className={`widget widget-${status}`} aria-hidden={!opened}>
-              <div id="safesupport-chatbox" aria-haspopup="dialog">
-                <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
+      <div id="safesupport">
+        <div className="docked-widget" role="complementary">
+          <Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
+            {(status) => {
+              return (
+              <div className={`widget widget-${status}`} aria-hidden={!opened}>
+                <div id="safesupport-chatbox" aria-haspopup="dialog">
+                  <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
 
-                <div className="message-window" ref={this.messageWindow}>
-                  <div className="messages">
-                    <div className={`message from-bot`}>
-                      <div className="text">{ this.props.introMessage }</div>
-                    </div>
-
-                    <div className={`message from-bot`}>
-                      <div className="text">Please read the full <a href={this.props.termsUrl} ref={this.termsUrl} target='_blank' rel='noopener noreferrer'>terms and conditions</a>. By using this chat, you agree to these terms.</div>
-                    </div>
-
-                    <div className={`message from-bot`}>
-                      <div className="text">{ this.props.agreementMessage }</div>
-                    </div>
-
-                    <div className={`message from-bot`}>
-                      <div className="text buttons">
-                        {`👉`}
-                        <button className="btn" id="accept" onClick={this.handleAcceptTerms}>YES</button>
-                        <button className="btn" id="reject" onClick={this.handleRejectTerms}>NO</button>
+                  <div className="message-window" ref={this.messageWindow}>
+                    <div className="messages">
+                      <div className={`message from-bot`}>
+                        <div className="text">{ this.props.introMessage }</div>
                       </div>
-                    </div>
 
-                    {
-                      messages.map((message, index) => {
-                        return(
-                          <Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
-                        )
-                      })
-                    }
-
-                    {
-                      messagesInFlight.map((message, index) => {
-                        return(
-                          <Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
-                        )
-                      })
-                    }
-
-                    { typingStatus &&
-                      <div className="notices">
-                        <div role="status">{typingStatus}</div>
+                      <div className={`message from-bot`}>
+                        <div className="text">Please read the full <a href={this.props.termsUrl} ref={this.termsUrl} target='_blank' rel='noopener noreferrer'>terms and conditions</a>. By using this chat, you agree to these terms.</div>
+                      </div>
+
+                      <div className={`message from-bot`}>
+                        <div className="text">{ this.props.agreementMessage }</div>
                       </div>
-                    }
 
-                    { Boolean(Object.keys(decryptionErrors).length) &&
                       <div className={`message from-bot`}>
                         <div className="text buttons">
-                          {`Restart chat without encryption?`}
-                          <button className="btn" id="accept" onClick={this.initializeUnencryptedChat}>RESTART</button>
+                          {`👉`}
+                          <button className="btn" id="accept" onClick={this.handleAcceptTerms}>YES</button>
+                          <button className="btn" id="reject" onClick={this.handleRejectTerms}>NO</button>
                         </div>
                       </div>
-                    }
 
-                    { !ready && <div className={`loader`}>loading...</div> }
+                      {
+                        orderedMessages.map((message, index) => {
+                          return(
+                            <Message key={message.id} message={message} userId={userId} botId={this.props.botId} client={this.state.client} />
+                          )
+                        })
+                      }
+
+                      {
+                        messagesInFlight.map((message, index) => {
+                          return(
+                            <Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
+                          )
+                        })
+                      }
+
+                      { typingStatus &&
+                        <div className="notices">
+                          <div role="status">{typingStatus}</div>
+                        </div>
+                      }
+
+                      { Boolean(Object.keys(decryptionErrors).length) &&
+                        <div className={`message from-bot`}>
+                          <div className="text buttons">
+                            {`Restart chat without encryption?`}
+                            <button className="btn" id="accept" onClick={this.restartWithoutCrypto}>RESTART</button>
+                          </div>
+                        </div>
+                      }
+
+                      { !ready && <div className={`loader`}>loading...</div> }
+                    </div>
+                  </div>
+                  <div className="input-window">
+                    <form onSubmit={this.handleSubmit}>
+                      <div className="message-input-container">
+                        <input
+                          id="message-input"
+                          type="text"
+                          onChange={this.handleInputChange}
+                          value={inputValue}
+                          aria-label={inputLabel}
+                          placeholder={inputLabel}
+                          autoFocus={true}
+                          ref={this.chatboxInput}
+                        />
+                        {
+                          (status === "entered") && !isMobile &&
+                          <EmojiSelector
+                            onEmojiClick={this.onEmojiClick}
+                            emojiSelectorOpen={emojiSelectorOpen}
+                            toggleEmojiSelector={this.toggleEmojiSelector}
+                            closeEmojiSelector={this.closeEmojiSelector}
+                          />
+                        }
+                      </div>
+                      <input type="submit" value="Send" id="submit" onClick={this.handleSubmit} />
+                    </form>
                   </div>
                 </div>
-                <div className="input-window">
-                  <form onSubmit={this.handleSubmit}>
-                    <div className="message-input-container">
-                      <input
-                        id="message-input"
-                        type="text"
-                        onChange={this.handleInputChange}
-                        value={inputValue}
-                        aria-label={inputLabel}
-                        placeholder={inputLabel}
-                        autoFocus={true}
-                        ref={this.chatboxInput}
-                      />
-                      {
-                        (status === "entered") && !isMobile &&
-                        <EmojiSelector
-                          onEmojiClick={this.onEmojiClick}
-                          emojiSelectorOpen={emojiSelectorOpen}
-                          toggleEmojiSelector={this.toggleEmojiSelector}
-                          closeEmojiSelector={this.closeEmojiSelector}
-                        />
-                      }
-                    </div>
-                    <input type="submit" value="Send" id="submit" onClick={this.handleSubmit} />
-                  </form>
-                </div>
               </div>
-            </div>
-            )}
-          }
-        </Transition>
-        {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
-        {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
+              )}
+            }
+          </Transition>
+          {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />}
+          {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
+        </div>
       </div>
     );
   }
@@ -713,6 +756,8 @@ ChatBox.propTypes = {
   chatUnavailableMessage: PropTypes.string,
   anonymousDisplayName: PropTypes.string,
   waitMessage: PropTypes.string,
+  chatOfflineMessage: PropTypes.string,
+  isEncryptionDisabled: PropTypes.bool,
 }
 
 ChatBox.defaultProps = {
@@ -727,6 +772,8 @@ ChatBox.defaultProps = {
   anonymousDisplayName: DEFAULT_ANONYMOUS_DISPLAY_NAME,
   chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
   waitMessage: DEFAULT_WAIT_MESSAGE,
+  chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE,
+  isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED
 }
 
 export default ChatBox;

src/components/styles.scss

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

src/outputs/bookmarklet.js

@@ -1,17 +1,17 @@
 import EmbeddableChatbox from './embeddable-chatbox';
 
 const config = {
-        matrixServerUrl: 'https://matrix.safesupport.chat',
-        botId: '@help-bot:safesupport.chat',
-        roomName: 'Support Chat',
-        termsUrl: 'https://tosdr.org/',
-        introMessage: "This chat application does not collect any of your personal data or any data from your use of this service.",
-        agreementMessage: 'Do you want to continue?',
-        confirmationMessage: 'Waiting for a facilitator to join the chat...',
-        exitMessage: 'The chat is closed. You may close this window.',
-        chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
-        anonymousDisplayName: 'Anonymous',
-    }
+  matrixServerUrl: 'https://matrix.rhok.space',
+  botId: '@help-bot:rhok.space',
+  roomName: 'Support Chat',
+  termsUrl: 'https://tosdr.org/',
+  introMessage: 'This chat application does not collect any of your personal data or any data from your use of this service.',
+  agreementMessage: 'Do you want to continue?',
+  confirmationMessage: 'Waiting for a facilitator to join the chat...',
+  exitMessage: 'The chat is closed. You may close this window.',
+  chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
+  anonymousDisplayName: 'Anonymous',
+};
 
 export default function bookmarklet() {
   if (window.EmbeddableChatbox) {

stories/index.stories.js

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