diff --git a/public/index.html b/public/index.html index e6c274d..1d3477a 100644 --- a/public/index.html +++ b/public/index.html @@ -4,24 +4,26 @@ Embeddable Chatbox Demo +

+ Bookmarklet (drag it to your bookmarks bar) +

Look down!

+ + diff --git a/src/components/_chat.scss b/src/components/_chat.scss index 23b8f42..bed91c2 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -11,6 +11,10 @@ min-height: 180px; border: 1px solid $theme-color; + a { + color: inherit; + } + .message-window { background-color: $light-color; flex: 1 1 auto; @@ -24,6 +28,10 @@ .notices { color: $dark-color; font-size: 0.9rem; + + > div { + padding-bottom: 0.5rem; + } } .message { diff --git a/src/components/_variables.scss b/src/components/_variables.scss index 9b9ba8a..052b0c5 100644 --- a/src/components/_variables.scss +++ b/src/components/_variables.scss @@ -6,6 +6,7 @@ $white: #ffffff; $highlight-color: $yellow; $theme-color: $dark-blue; $theme-font: 'Assistant', 'Helvetica', sans-serif; +$drop-shadow-color: #BDBEBF; /* Dark mode colors */ diff --git a/src/components/_widget.scss b/src/components/_widget.scss index 2198c3e..214d937 100644 --- a/src/components/_widget.scss +++ b/src/components/_widget.scss @@ -36,7 +36,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0.5rem; + padding: 0.75rem; width: 400px; max-width: calc(100vw - 10px); background: $theme-color; @@ -47,6 +47,7 @@ color: $white; font-size: 1rem; line-height: 1; + box-shadow: 0 2px 15px $drop-shadow-color; } @@ -56,6 +57,7 @@ border-bottom: none; animation-duration: 0.2s; animation-fill-mode: forwards; + box-shadow: 0 2px 15px $drop-shadow-color; &-entering { animation-name: slideInUp; diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index 1d872cf..ef93256 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -196,7 +196,6 @@ class ChatBox extends React.Component { } }); - this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => { if (event.getType() === "m.room.message") { @@ -214,6 +213,10 @@ class ChatBox extends React.Component { this.handleMessageEvent(event) } + + if (event.getType() === "m.room.encryption") { + this.setState({ isRoomEncrypted: true }) + } }); this.state.client.on("Event.decrypted", (event) => { @@ -264,7 +267,7 @@ class ChatBox extends React.Component { render() { const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state; - const { opened, handleToggleOpen } = this.props; + const { opened, handleToggleOpen, privacyStatement, termsUrl } = this.props; const inputLabel = 'Send a message...' return ( @@ -296,9 +299,9 @@ class ChatBox extends React.Component { }
- { - isRoomEncrypted &&
Messages in this chat are secured with end-to-end encryption.
- } + { 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.
}
@@ -324,6 +327,8 @@ ChatBox.propTypes = { matrixServerUrl: PropTypes.string.isRequired, roomName: PropTypes.string.isRequired, theme: PropTypes.object, + termsUrl: PropTypes.string, + privacyStatement: PropTypes.string, } ChatBox.defaultProps = { diff --git a/src/outputs/bookmarklet.js b/src/outputs/bookmarklet.js index a183fa6..d8e8073 100644 --- a/src/outputs/bookmarklet.js +++ b/src/outputs/bookmarklet.js @@ -6,7 +6,12 @@ export default function bookmarklet() { } window.EmbeddableWidget = EmbeddableWidget; - EmbeddableWidget.mount(); + EmbeddableWidget.mount({ + termsUrl: "https://tosdr.org/", + privacyStatement: "This chat application does not collect any of your personal data or any data from your use of this service.", + matrixServerUrl: "https://matrix.rhok.space", + roomName: "Support Chat", + }); } bookmarklet();