committing build files

README.md

@@ -23,6 +23,7 @@ Built on:
     exitMessage: 'The chat is closed. You may close this window.',
     chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
     anonymousDisplayName: 'Anonymous',
+    enableEncryption: 'yes',
   }
 
   EmbeddableChatbox.mount(config);
@@ -41,6 +42,7 @@ Options:
 | `exitMessage` (optional) | Text to show if the user rejects the Terms of Use. | `The chat is closed. You may close this window.` |
 | `anonymousDisplayName` (optional) | The display name for the chat user. | `Anonymous` |
 | `chatUnavailableMessage` (optional) | Text to show if no-one is available to respond  | `The chat service is not available right now. Please try again later.` |
+| `enableEncryption` (optional) | if set to "yes" then the chat will be encrypted by default  | `yes` |
 
 ## Feature list
 
@@ -80,7 +82,7 @@ You can try this out on the [live demo](https://nomadic-labs.github.io/safesuppo
 
 Clone the project:
 ```
-git clone https://github.com/nomadic-labs/safesupport-chatbox.git
+git clone https://git.umycode.com/dave/safesupport-chatbox.git
 ```
 Install the dependencies:
 ```

dist/index.html

@@ -23,6 +23,7 @@
         exitMessage: 'The chat is closed. You may close this window.',
         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
         anonymousDisplayName: 'Anonymous',
+        enableEncryption: 'no',
     }
 
       EmbeddableChatbox.mount(config);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safesupport-chatbox",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "A secure and private embeddable chatbox that connects to Riot",
   "main": "dist/chatbox.js",
   "scripts": {

public/index.html

@@ -23,6 +23,7 @@
         exitMessage: 'The chat is closed. You may close this window.',
         chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
         anonymousDisplayName: 'Anonymous',
+        enableEncryption: 'no',
     }
 
       EmbeddableChatbox.mount(config);

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

@@ -38,6 +38,7 @@ 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_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests."
+const DEFAULT_ENCRYPTION = "yes"
 
 
 class ChatBox extends React.Component {
@@ -229,9 +230,13 @@ class ChatBox extends React.Component {
     client.setDisplayName(this.props.anonymousDisplayName)
     this.setMatrixListeners(client)
 
-    try {
-      await client.initCrypto()
-    } catch(err) {
+    if(this.props.enableEncryption == "yes"){
+      try {
+        await client.initCrypto()
+      } catch(err) {
+        return this.initializeUnencryptedChat()
+      }
+    }else{
       return this.initializeUnencryptedChat()
     }
 
@@ -257,7 +262,9 @@ class ChatBox extends React.Component {
       isCryptoEnabled: false,
     })
 
-    this.displayBotMessage({ body: RESTARTING_UNENCRYPTED_CHAT_MESSAGE })
+    if(this.props.enableEncryption == "yes"){
+      this.displayBotMessage({ body: RESTARTING_UNENCRYPTED_CHAT_MESSAGE })
+    }
 
     let opts = {
       baseUrl: this.props.matrixServerUrl,
@@ -277,7 +284,9 @@ class ChatBox extends React.Component {
       client.setDisplayName(this.props.anonymousDisplayName)
       await this.createRoom(client)
       await client.startClient()
-      this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
+      if(this.props.enableEncryption == "yes"){
+        this.displayBotMessage({ body: UNENCRYPTION_NOTICE })
+      }
     } catch(err) {
       console.log("error", err)
       this.handleInitError(err)
@@ -599,103 +608,105 @@ class ChatBox extends React.Component {
     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> }
+                      {
+                        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>
+                      }
+
+                      { 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>
+                          </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 +724,7 @@ ChatBox.propTypes = {
   chatUnavailableMessage: PropTypes.string,
   anonymousDisplayName: PropTypes.string,
   waitMessage: PropTypes.string,
+  enableEncryption: PropTypes.string,
 }
 
 ChatBox.defaultProps = {
@@ -727,6 +739,7 @@ ChatBox.defaultProps = {
   anonymousDisplayName: DEFAULT_ANONYMOUS_DISPLAY_NAME,
   chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
   waitMessage: DEFAULT_WAIT_MESSAGE,
+  enableEncryption: DEFAULT_ENCRYPTION,
 }
 
 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,18 @@
 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.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',
+  enableEncryption: 'no',
+};
 
 export default function bookmarklet() {
   if (window.EmbeddableChatbox) {

yarn.lock

@@ -2763,15 +2763,10 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-caniuse-lite@^1.0.30001023:
-  version "1.0.30001023"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001023.tgz#b82155827f3f5009077bdd2df3d8968bcbcc6fc4"
-  integrity sha512-C5TDMiYG11EOhVOA62W1p3UsJ2z4DsHtMBQtjzp3ZsUglcQn62WOUgW0y795c7A5uZ+GCEIvzkMatLIlAsbNTA==
-
-caniuse-lite@^1.0.30001036, caniuse-lite@^1.0.30001038:
-  version "1.0.30001038"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz#44da3cbca2ab6cb6aa83d1be5d324e17f141caff"
-  integrity sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==
+caniuse-lite@^1.0.30001023, caniuse-lite@^1.0.30001036, caniuse-lite@^1.0.30001038:
+  version "1.0.30001251"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz"
+  integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
 
 capture-exit@^2.0.0:
   version "2.0.0"