mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
simpler transcript implementation, forgetting about file and image downloads for now
This commit is contained in:
parent
d8e482a689
commit
3935287c3f
@ -341,11 +341,8 @@ class ChatBox extends React.Component {
|
||||
sender: event.getSender(),
|
||||
roomId: event.getRoomId(),
|
||||
content: event.getContent(),
|
||||
|
||||
}
|
||||
|
||||
console.log('message ===========>', message)
|
||||
|
||||
const messages = [...this.state.messages]
|
||||
messages.push(message)
|
||||
this.setState({ messages })
|
||||
|
@ -1,53 +1,42 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import Linkify from 'linkifyjs/react';
|
||||
import decryptFile from '../utils/decryptFile'
|
||||
|
||||
const Message = ({ message, userId, botId, client }) => {
|
||||
|
||||
class Message extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
decryptedUrl: null,
|
||||
decryptedFile: null,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const needsDecryption = ['m.file', 'm.image'];
|
||||
if (needsDecryption.includes(this.props.message.content.msgtype)) {
|
||||
decryptFile(this.props.message.content.file, this.props.client)
|
||||
.then((decryptedBlob) => {
|
||||
const decryptedUrl = URL.createObjectURL(decryptedBlob)
|
||||
this.setState({
|
||||
decryptedUrl: decryptedUrl,
|
||||
decryptedBlob: decryptedBlob
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.decryptedUrl) {
|
||||
URL.revokeObjectURL(this.state.decryptedUrl);
|
||||
}
|
||||
}
|
||||
|
||||
senderClass = () => {
|
||||
switch (this.props.message.sender) {
|
||||
const senderClass = () => {
|
||||
switch (message.sender) {
|
||||
case 'from-me':
|
||||
return 'from-me'
|
||||
case this.props.userId:
|
||||
case userId:
|
||||
return 'from-me'
|
||||
case this.props.botId:
|
||||
case botId:
|
||||
return 'from-bot'
|
||||
default:
|
||||
return 'from-support'
|
||||
}
|
||||
}
|
||||
|
||||
renderTextMessage = () => {
|
||||
|
||||
if (message.content.msgtype === 'm.file') {
|
||||
const url = client.mxcUrlToHttp(message.content.url);
|
||||
return (
|
||||
<div className={`message ${senderClass()}`}>
|
||||
<div className="text">
|
||||
<a href={url} target='_blank' rel='noopener noreferrer'>{ message.content.body }</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (message.content.formatted_body) {
|
||||
return (
|
||||
<div className={`message ${senderClass()}`}>
|
||||
<div className="text" dangerouslySetInnerHTML={{__html: message.content.formatted_body}} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const linkifyOpts = {
|
||||
linkAttributes: {
|
||||
rel: 'noreferrer noopener',
|
||||
@ -55,59 +44,12 @@ class Message extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`message ${this.senderClass()}`}>
|
||||
<div className={`message ${senderClass()}`}>
|
||||
<div className="text">
|
||||
<Linkify options={linkifyOpts}>{ this.props.message.content.body }</Linkify>
|
||||
<Linkify options={linkifyOpts}>{ message.content.body }</Linkify>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderHtmlMessage = () => {
|
||||
return (
|
||||
<div className={`message ${this.senderClass()}`}>
|
||||
<div className="text" dangerouslySetInnerHTML={{__html: this.props.message.content.formatted_body}} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderImageMessage = () => {
|
||||
return (
|
||||
<div className={`message ${this.senderClass()}`}>
|
||||
<div className="text">
|
||||
<a href={this.state.decryptedUrl} target='_blank' rel='noopener noreferrer'>{ this.props.message.content.body }</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderFileMessage = () => {
|
||||
return (
|
||||
<div className={`message ${this.senderClass()}`}>
|
||||
<div className="text">
|
||||
<a href={this.state.decryptedUrl} target='_blank' rel='noopener noreferrer'>{ this.props.message.content.body }</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props.message)
|
||||
console.log(this.state)
|
||||
const { message } = this.props;
|
||||
|
||||
switch(message.content.msgtype) {
|
||||
case 'm.file':
|
||||
return this.renderFileMessage()
|
||||
case 'm.image':
|
||||
return this.renderImageMessage()
|
||||
default:
|
||||
if (message.content.formatted_body) {
|
||||
return this.renderHtmlMessage()
|
||||
}
|
||||
return this.renderTextMessage()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Message;
|
Loading…
Reference in New Issue
Block a user