mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
styling for bot messages
This commit is contained in:
parent
03335e0cc2
commit
066824cb3b
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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} />
|
||||
<Message key={message.id} message={message} userId={userId} botId={BOT_USERNAME} />
|
||||
)
|
||||
}) :
|
||||
<div className="loader">loading...</div>
|
||||
}
|
||||
</div>
|
||||
{ typingStatus &&
|
||||
<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> }
|
||||
<div role="status">{typingStatus}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-window">
|
||||
|
@ -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>
|
||||
)
|
||||
|
22
src/components/notice.jsx
Normal file
22
src/components/notice.jsx
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user