forked from Github/ocrcc-chatbox
linkify messages
This commit is contained in:
Sharon Kennedy
parent
54d4980e84
commit
47d546a8d4
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
</div>
|
||||
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text">Please read the full <a href={this.props.termsUrl} ref={this.termsUrl}>terms and conditions</a>. By using this chat, you agree to these terms.</div>
|
||||
<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`}>
|
||||
@ -471,8 +471,8 @@ class ChatBox extends React.Component {
|
||||
<div className={`message from-bot`}>
|
||||
<div className="text buttons">
|
||||
{`👉`}
|
||||
<button id="accept" onClick={this.handleAcceptTerms}>YES</button>
|
||||
<button id="reject" onClick={this.handleRejectTerms}>NO</button>
|
||||
<button className="btn" id="accept" onClick={this.handleAcceptTerms}>YES</button>
|
||||
<button className="btn" id="reject" onClick={this.handleRejectTerms}>NO</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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 (
|
||||
<div className={`message ${senderClass()}`}>
|
||||
@ -24,9 +26,17 @@ const Message = ({ message, userId, botId }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const linkifyOpts = {
|
||||
linkAttributes: {
|
||||
rel: 'noreferrer noopener',
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`message ${senderClass()}`}>
|
||||
<div className="text">{ message.content.body }</div>
|
||||
<div className="text">
|
||||
<Linkify options={linkifyOpts}>{ message.content.body }</Linkify>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user