From 47d546a8d4ac94b463199d1cc6b80fd5149b580a Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Sun, 15 Mar 2020 00:47:19 -0400 Subject: [PATCH] linkify messages --- package.json | 1 + src/components/_chat.scss | 17 +++++++++++++++++ src/components/_dark_mode.scss | 28 ++++++++++++++++++++++++++++ src/components/chatbox.jsx | 28 ++++++++++++++-------------- src/components/message.jsx | 12 +++++++++++- src/outputs/bookmarklet.js | 26 +++++++++++++------------- yarn.lock | 5 +++++ 7 files changed, 89 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 224f1f6..96158c4 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "webpack-serve": "3.2.0" }, "dependencies": { + "linkifyjs": "^2.1.9", "matrix-js-sdk": "^4.0.0", "node-localstorage": "^2.1.5", "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz", diff --git a/src/components/_chat.scss b/src/components/_chat.scss index 8e983dc..8dbff05 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -30,6 +30,7 @@ right: 10px; z-index: 9999; width: 400px; + max-width: 100vw; } .dock { @@ -323,6 +324,14 @@ margin-left: 10%; padding: 0.5rem 0.75rem; } + + a { + color: $white; + + &:hover, &:focus { + color: $light-purple; + } + } } &.from-support { @@ -337,6 +346,14 @@ margin-right: 10%; padding: 0.5rem 0.75rem; } + + a { + color: $dark-color; + + &:hover, &:focus { + color: $medium-purple; + } + } } } diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss index b55678f..d661025 100644 --- a/src/components/_dark_mode.scss +++ b/src/components/_dark_mode.scss @@ -85,6 +85,34 @@ color: $light-text-color; border: 1px solid $dark-theme-color; } + + a { + color: $light-text-color; + + &:hover, &:focus { + color: $light-purple; + } + } + } + + .buttons { + button { + background-color: transparent; + border: 1px solid $theme-color; + + &:hover { + border: 1px solid $light-purple; + box-shadow: inset 0px 0px 0px 1px $light-purple; + } + + &:focus { + outline: none; + color: $white; + border: 1px solid $light-purple; + box-shadow: inset 0px 0px 0px 1px $light-purple; + background-color: $dark-theme-highlight-color; + } + } } } diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index beebf71..bb3ae0b 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -174,7 +174,6 @@ class ChatBox extends React.Component { userId: data.user_id, deviceId: data.device_id, sessionStore: new matrix.WebStorageSessionStore(localStorage), - displayName: this.props.anonymousDisplayName, } client = matrix.createClient(opts) @@ -184,6 +183,7 @@ class ChatBox extends React.Component { }) .then(() => client.initCrypto()) .catch(err => this.initializeUnencryptedChat()) + .then(() => client.setDisplayName(this.props.anonymousDisplayName)) .then(() => client.startClient()) .then(() => { this.setState({ @@ -202,12 +202,12 @@ class ChatBox extends React.Component { accessToken: this.state.accessToken, userId: this.state.userId, deviceId: this.state.deviceId, - displayName: this.props.anonymousDisplayName, } let client; try { client = matrix.createClient(opts) + client.setDisplayName(this.props.anonymousDisplayName) } catch { return this.handleInitError() } @@ -287,12 +287,8 @@ class ChatBox extends React.Component { }) } - sendMessage = () => { - this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue) - .then((res) => { - this.setState({ inputValue: "" }) - this.chatboxInput.current.focus() - }) + sendMessage = (message) => { + this.state.client.sendTextMessage(this.state.roomId, message) .catch((err) => { switch (err["name"]) { case "UnknownDeviceError": @@ -301,9 +297,10 @@ class ChatBox extends React.Component { this.state.client.setDeviceKnown(userId, deviceId, true); }); }); - this.sendMessage() + this.sendMessage(message) break; default: + this.displayBotMessage({ body: "Your message was not sent." }) console.log("Error sending message", err); } }) @@ -434,10 +431,13 @@ class ChatBox extends React.Component { handleSubmit = e => { e.preventDefault() - if (!Boolean(this.state.inputValue)) return null; + const message = this.state.inputValue + if (!Boolean(message)) return null; if (this.state.client && this.state.roomId) { - return this.sendMessage() + this.setState({ inputValue: "" }) + this.chatboxInput.current.focus() + return this.sendMessage(message) } } @@ -461,7 +461,7 @@ class ChatBox extends React.Component {
-
Please read the full terms and conditions. By using this chat, you agree to these terms.
+
Please read the full terms and conditions. By using this chat, you agree to these terms.
@@ -471,8 +471,8 @@ class ChatBox extends React.Component {
{`👉`} - - + +
diff --git a/src/components/message.jsx b/src/components/message.jsx index 6d7f674..9a51e7d 100644 --- a/src/components/message.jsx +++ b/src/components/message.jsx @@ -1,5 +1,6 @@ import React from "react" import PropTypes from "prop-types" +import Linkify from 'linkifyjs/react'; const Message = ({ message, userId, botId }) => { @@ -16,6 +17,7 @@ const Message = ({ message, userId, botId }) => { } } + if (message.content.formatted_body) { return (
@@ -24,9 +26,17 @@ const Message = ({ message, userId, botId }) => { ) } + const linkifyOpts = { + linkAttributes: { + rel: 'noreferrer noopener', + }, + } + return (
-
{ message.content.body }
+
+ { message.content.body } +
) } diff --git a/src/outputs/bookmarklet.js b/src/outputs/bookmarklet.js index de4df6a..dcf97f8 100644 --- a/src/outputs/bookmarklet.js +++ b/src/outputs/bookmarklet.js @@ -1,24 +1,24 @@ import EmbeddableChatbox from './embeddable-chatbox'; +const config = { + matrixServerUrl: 'https://matrix.rhok.space', + botUsername: '@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? Type yes or no.', + confirmationMessage: 'Waiting for a facilitator to join the chat...', + exitMessage: 'The chat was not started.', + chatUnavailableMessage: 'The chat service is not available right now. Please try again later.', + anonymousDisplayName: 'Anonymous', +}; + export default function bookmarklet() { if (window.EmbeddableChatbox) { return; } window.EmbeddableChatbox = EmbeddableChatbox; - var config = { - matrixServerUrl: 'https://matrix.rhok.space', - botUsername: '@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? Type yes or no.', - confirmationMessage: 'Waiting for a facilitator to join the chat...', - exitMessage: 'The chat was not started.', - chatUnavailableMessage: 'The chat service is not available right now. Please try again later.', - anonymousDisplayName: 'Anonymous', - } - EmbeddableChatbox.mount(config); } diff --git a/yarn.lock b/yarn.lock index b241199..365a4b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7950,6 +7950,11 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= +linkifyjs@^2.1.9: + version "2.1.9" + resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-2.1.9.tgz#af06e45a2866ff06c4766582590d098a4d584702" + integrity sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug== + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"