styling for bot messages

src/components/_chat.scss

@@ -30,7 +30,8 @@
     font-size: 0.9rem;
 
     > div {
-      padding-bottom: 0.5rem;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
     }
   }
 
@@ -41,11 +42,14 @@
     }
 
     .text {
-      padding: 0.5rem 0.75rem;
       margin-top: 0.5rem;
       margin-bottom: 0.5rem;
       width: fit-content;
-      border: 1px solid $theme-color;
+    }
+
+    &.from-bot {
+      color: $dark-color;
+      font-size: 0.9rem;
     }
 
     &.from-me {
@@ -53,10 +57,12 @@
       justify-content: flex-end;
 
       .text {
+        border: 1px solid $theme-color;
         background-color: $theme-color;
         color: $white;
         border-radius: 15px 15px 0 15px;
         margin-left: 10%;
+        padding: 0.5rem 0.75rem;
       }
     }
 
@@ -65,10 +71,12 @@
       justify-content: flex-start;
 
       .text {
+        border: 1px solid $theme-color;
         background-color: $white;
         color: $dark-color;
         border-radius: 15px 15px 15px 0;
         margin-right: 10%;
+        padding: 0.5rem 0.75rem;
       }
     }
   }

src/components/chatbox.jsx

@@ -16,8 +16,9 @@ import Message from "./message";
 
 const DEFAULT_MATRIX_SERVER = "https://matrix.rhok.space"
 const DEFAULT_ROOM_NAME = "Support Chat"
-const FACILITATOR_USERNAME = "@help-bot:rhok.space"
+const BOT_USERNAME = "@help-bot:rhok.space"
 const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
+const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption."
 const DEFAULT_THEME = {
   themeColor: "#008080", // teal
   lightColor: "#FFF8F0",
@@ -134,7 +135,7 @@ class ChatBox extends React.Component {
     const chatTime = currentDate.toLocaleTimeString()
     return this.state.client.createRoom({
       room_alias_name: `private-support-chat-${uuid()}`,
-      invite: [FACILITATOR_USERNAME], // TODO: create bot user to add
+      invite: [BOT_USERNAME], // TODO: create bot user to add
       visibility: 'private',
       name: `${chatDate} - ${this.props.roomName} - started at ${chatTime}`,
       initial_state: [
@@ -148,7 +149,7 @@ class ChatBox extends React.Component {
     })
     .then(data => {
       this.verifyAllRoomDevices(data.room_id)
-      this.state.client.setPowerLevel(data.room_id, FACILITATOR_USERNAME, 100)
+      this.state.client.setPowerLevel(data.room_id, BOT_USERNAME, 100)
       .then(() => console.log("Set bot power level to 100"))
       .catch(err => console.log("Error setting bot power level", err))
       this.setState({
@@ -193,6 +194,8 @@ class ChatBox extends React.Component {
       content: event.getContent(),
     }
 
+    console.log("INCOMING MESSAGE", message)
+
     const messages = [...this.state.messages]
     messages.push(message)
     this.setState({ messages })
@@ -216,29 +219,31 @@ class ChatBox extends React.Component {
       });
 
       this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => {
-        if (event.getType() === "m.room.message") {
+        // if (event.getType() === "m.room.message") {
 
-          if (event.status === "sending") {
-            return; // do nothing
-          }
+        //   if (event.status === "not sent") {
+        //     return console.log("message not sent!", event)
+        //   }
 
-          if (event.status === "not sent") {
-            return console.log("message not sent!", event)
-          }
+        //   if (event.isEncrypted()) {
+        //     return console.log("message encrypted")
+        //   }
 
-          if (event.isEncrypted()) {
-            return console.log("message encrypted")
-          }
-
-          this.handleMessageEvent(event)
-        }
+        //   this.handleMessageEvent(event)
+        // }
 
         if (event.getType() === "m.room.encryption") {
-          this.setState({ isRoomEncrypted: true })
-        }
+          const msgList = [...this.state.messages]
+          const encryptionMsg = {
+            id: 'encryption-msg-id',
+            type: 'm.room.message',
+            sender: BOT_USERNAME,
+            roomId: room.room_id,
+            content: { body: ENCRYPTION_NOTICE },
+          }
+          msgList.unshift(encryptionMsg)
 
-        if (event.getType() === "m.notice") {
-          console.log("GOT BOT NOTICE!", event)
+          this.setState({ messages: msgList })
         }
       });
 
@@ -258,11 +263,11 @@ class ChatBox extends React.Component {
       });
     }
 
-    if (prevState.roomId !== this.state.roomId) {
-      this.setState({
-        isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId)
-      })
-    }
+    // if (prevState.roomId !== this.state.roomId) {
+    //   this.setState({
+    //     isRoomEncrypted: this.state.client.isRoomEncrypted(this.state.roomId)
+    //   })
+    // }
 
     if (!prevState.ready && this.state.ready) {
       this.chatboxInput.current.focus()
@@ -298,7 +303,7 @@ class ChatBox extends React.Component {
   }
 
   render() {
-    const { ready, messages, inputValue, userId, isRoomEncrypted, typingStatus } = this.state;
+    const { ready, messages, inputValue, userId, typingStatus } = this.state;
     const { opened, handleToggleOpen, privacyStatement, termsUrl } = this.props;
     const inputLabel = 'Send a message...'
 
@@ -320,23 +325,20 @@ class ChatBox extends React.Component {
 
         <div className="message-window">
           <div className="messages">
-            <div className="notices">
-              { typingStatus && <div>{typingStatus}</div> }
-            </div>
-          {
-            ready ?
-            messages.map((message, index) => {
-              return(
-                <Message key={message.id} message={message} userId={userId} />
-              )
-            }) :
-            <div className="loader">loading...</div>
-          }
-          </div>
-          <div className="notices">
-            { privacyStatement && <div>{privacyStatement}</div> }
-            { termsUrl && <div>By using this service you agree to the <a href={termsUrl} target="_blank">Terms of Use</a>.</div> }
-            { isRoomEncrypted && <div role="status">Messages in this chat are secured with end-to-end encryption.</div> }
+            {
+              ready ?
+              messages.map((message, index) => {
+                return(
+                  <Message key={message.id} message={message} userId={userId} botId={BOT_USERNAME} />
+                )
+              }) :
+              <div className="loader">loading...</div>
+            }
+            { typingStatus &&
+              <div className="notices">
+                <div role="status">{typingStatus}</div>
+              </div>
+            }
           </div>
         </div>
         <div className="input-window">

src/components/message.jsx

@@ -1,11 +1,29 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const Message = ({ message, userId }) => {
-  const fromMe = message.sender === userId;
+const Message = ({ message, userId, botId }) => {
+
+  const senderClass = () => {
+    switch (message.sender) {
+      case userId:
+        return 'from-me'
+      case botId:
+        return 'from-bot'
+      default:
+        return 'from-support'
+    }
+  }
+
+  if (message.content.formatted_body) {
+    return (
+      <div className={`message ${senderClass()}`}>
+        <div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
+      </div>
+    )
+  }
 
   return (
-    <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
+    <div className={`message ${senderClass()}`}>
       <div className="text">{ message.content.body }</div>
     </div>
   )

src/components/notice.jsx

@@ -0,0 +1,22 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Notice = ({ message, userId }) => {
+  const fromMe = message.sender === userId;
+
+  if (message.content.formatted_body) {
+    return (
+      <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
+        <div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={`message ${fromMe ? "from-me" : "from-support"}`}>
+      <div className="text">{ message.content.body }</div>
+    </div>
+  )
+}
+
+export default Notice;