From 066824cb3b4f267ac212fc9437b7e2f0c1477e0a Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Sun, 23 Feb 2020 16:57:16 -0500 Subject: [PATCH] styling for bot messages --- src/components/_chat.scss | 14 ++++-- src/components/chatbox.jsx | 88 +++++++++++++++++++------------------- src/components/message.jsx | 24 +++++++++-- src/components/notice.jsx | 22 ++++++++++ 4 files changed, 99 insertions(+), 49 deletions(-) create mode 100644 src/components/notice.jsx diff --git a/src/components/_chat.scss b/src/components/_chat.scss index bed91c2..41d938b 100644 --- a/src/components/_chat.scss +++ b/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; } } } diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index a64b7ce..3746edc 100644 --- a/src/components/chatbox.jsx +++ b/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 {
-
- { typingStatus &&
{typingStatus}
} -
- { - ready ? - messages.map((message, index) => { - return( - - ) - }) : -
loading...
- } -
-
- { privacyStatement &&
{privacyStatement}
} - { termsUrl &&
By using this service you agree to the Terms of Use.
} - { isRoomEncrypted &&
Messages in this chat are secured with end-to-end encryption.
} + { + ready ? + messages.map((message, index) => { + return( + + ) + }) : +
loading...
+ } + { typingStatus && +
+
{typingStatus}
+
+ }
diff --git a/src/components/message.jsx b/src/components/message.jsx index a07894e..93283a7 100644 --- a/src/components/message.jsx +++ b/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 ( +
+
+
+ ) + } return ( -
+
{ message.content.body }
) diff --git a/src/components/notice.jsx b/src/components/notice.jsx new file mode 100644 index 0000000..2e12374 --- /dev/null +++ b/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 ( +
+
+
+ ) + } + + return ( +
+
{ message.content.body }
+
+ ) +} + +export default Notice; \ No newline at end of file