mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
placeholder message
This commit is contained in:
parent
c98192d25a
commit
3fd72429e3
@ -315,6 +315,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
&.placeholder {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
border: 1px solid $theme-color;
|
border: 1px solid $theme-color;
|
||||||
background-color: $theme-color;
|
background-color: $theme-color;
|
||||||
|
@ -62,6 +62,7 @@ class ChatBox extends React.Component {
|
|||||||
isMobile: true,
|
isMobile: true,
|
||||||
isSlowConnection: true,
|
isSlowConnection: true,
|
||||||
decryptionErrors: {},
|
decryptionErrors: {},
|
||||||
|
messagesInFlight: []
|
||||||
}
|
}
|
||||||
this.state = this.initialState
|
this.state = this.initialState
|
||||||
this.chatboxInput = React.createRef();
|
this.chatboxInput = React.createRef();
|
||||||
@ -353,9 +354,11 @@ class ChatBox extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
sendMessage = (message) => {
|
sendMessage = (message) => {
|
||||||
|
console.log("SEND MESSAGE!", message)
|
||||||
if (!this.state.client) {
|
if (!this.state.client) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
this.state.client.sendTextMessage(this.state.roomId, message)
|
this.state.client.sendTextMessage(this.state.roomId, message)
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
switch (err["name"]) {
|
switch (err["name"]) {
|
||||||
@ -419,6 +422,16 @@ class ChatBox extends React.Component {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log("this.state.messagesInFlight", this.state.messagesInFlight)
|
||||||
|
const messagesInFlight = [...this.state.messagesInFlight]
|
||||||
|
console.log("message", message)
|
||||||
|
const placeholderMessageIndex = messagesInFlight.findIndex(msg => msg === message.content.body)
|
||||||
|
console.log("placeholderMessageIndex", placeholderMessageIndex)
|
||||||
|
if (placeholderMessageIndex > -1) {
|
||||||
|
messagesInFlight.splice(placeholderMessageIndex, 1)
|
||||||
|
this.setState({ messagesInFlight })
|
||||||
|
}
|
||||||
|
|
||||||
// check for decryption error message and replace with decrypted message
|
// check for decryption error message and replace with decrypted message
|
||||||
// or push message to messages array
|
// or push message to messages array
|
||||||
const messages = [...this.state.messages]
|
const messages = [...this.state.messages]
|
||||||
@ -562,9 +575,10 @@ class ChatBox extends React.Component {
|
|||||||
if (!Boolean(message)) return null;
|
if (!Boolean(message)) return null;
|
||||||
|
|
||||||
if (this.state.client && this.state.roomId) {
|
if (this.state.client && this.state.roomId) {
|
||||||
this.setState({ inputValue: "" })
|
const messagesInFlight = [...this.state.messagesInFlight]
|
||||||
|
messagesInFlight.push(message)
|
||||||
|
this.setState({ inputValue: "", messagesInFlight }, () => this.sendMessage(message))
|
||||||
this.chatboxInput.current.focus()
|
this.chatboxInput.current.focus()
|
||||||
return this.sendMessage(message)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -578,7 +592,7 @@ class ChatBox extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { ready, messages, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
|
const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
|
||||||
const inputLabel = 'Send a message...'
|
const inputLabel = 'Send a message...'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -620,6 +634,14 @@ class ChatBox extends React.Component {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
messagesInFlight.map((message, index) => {
|
||||||
|
return(
|
||||||
|
<Message key={`message-inflight-${index}`} message={{ content: { body: message }}} placeholder={true} />
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
{ typingStatus &&
|
{ typingStatus &&
|
||||||
<div className="notices">
|
<div className="notices">
|
||||||
<div role="status">{typingStatus}</div>
|
<div role="status">{typingStatus}</div>
|
||||||
|
@ -2,7 +2,7 @@ import React from "react"
|
|||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
import Linkify from 'linkifyjs/react';
|
import Linkify from 'linkifyjs/react';
|
||||||
|
|
||||||
const Message = ({ message, userId, botId, client }) => {
|
const Message = ({ message, userId, botId, client, placeholder }) => {
|
||||||
|
|
||||||
const senderClass = () => {
|
const senderClass = () => {
|
||||||
switch (message.sender) {
|
switch (message.sender) {
|
||||||
@ -17,6 +17,16 @@ const Message = ({ message, userId, botId, client }) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (placeholder) {
|
||||||
|
return(
|
||||||
|
<div className={`message from-me placeholder`}>
|
||||||
|
<div className="text">
|
||||||
|
{ message.content.body }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
if (message.content.msgtype === 'm.file') {
|
if (message.content.msgtype === 'm.file') {
|
||||||
const url = client.mxcUrlToHttp(message.content.url);
|
const url = client.mxcUrlToHttp(message.content.url);
|
||||||
|
Loading…
Reference in New Issue
Block a user