Replies
This commit is contained in:
N-Pex
parent
ad0e5788aa
commit
3f1c58b743
7 changed files with 157 additions and 22 deletions
|
|
@ -150,7 +150,7 @@ $chat-text-size: 0.7pt;
|
|||
margin-left: 30% !important;
|
||||
text-align: right;
|
||||
.bubble {
|
||||
background-color: #88eec0;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -243,12 +243,40 @@ $chat-text-size: 0.7pt;
|
|||
font-size: 14 * $chat-text-size;
|
||||
color: #000000;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre;
|
||||
.edit-marker {
|
||||
font-size: 0.8rem;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
.original-message {
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
max-height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 8px;
|
||||
.original-message-sender {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13 * $chat-text-size;
|
||||
color: #000000;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre;
|
||||
}
|
||||
.original-message-text {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: #000000;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
v-on:close="showContextMenu = false"
|
||||
v-if="selectedEvent && showContextMenu"
|
||||
v-on:addreaction="addReaction"
|
||||
v-on:addreply="addReply(selectedEvent)"
|
||||
v-on:edit="edit(selectedEvent)"
|
||||
:event="selectedEvent"
|
||||
:incoming="selectedEvent.getSender() != $matrix.currentUserId"
|
||||
|
|
@ -55,16 +56,10 @@
|
|||
'm.reaction'
|
||||
)
|
||||
"
|
||||
:timelineSet="timelineWindow._timelineSet"
|
||||
v-on:send-quick-reaction="sendQuickReaction"
|
||||
v-on:context-menu="showContextMenuForEvent($event)"
|
||||
/>
|
||||
<!-- <message-operations
|
||||
v-on:close="showContextMenu = false"
|
||||
v-if="selectedEvent == event && showContextMenu"
|
||||
v-on:addreaction="addReaction"
|
||||
:event="event"
|
||||
:incoming="event.getSender() != $matrix.currentUserId"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,6 +68,8 @@
|
|||
<!-- Input area -->
|
||||
<v-container v-if="room" fluid class="input-area-outer">
|
||||
<v-row class="ma-0 pa-0">
|
||||
<div v-if="replyToEvent">REPLYING TO EVENT: {{ replyToEvent.getContent().body }}</div>
|
||||
|
||||
<!-- CONTACT IS TYPING -->
|
||||
<div class="typing">
|
||||
{{ typingMembersString }}
|
||||
|
|
@ -112,8 +109,8 @@
|
|||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent">
|
||||
<v-btn fab small elevation="0" color="black" @click.stop="cancelEdit">
|
||||
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent || replyToEvent">
|
||||
<v-btn fab small elevation="0" color="black" @click.stop="cancelEditReply">
|
||||
<v-icon color="white">cancel</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
|
@ -261,6 +258,7 @@ export default {
|
|||
showEmojiPicker: false,
|
||||
selectedEvent: null,
|
||||
editedEvent: null,
|
||||
replyToEvent: null,
|
||||
showContextMenu: false,
|
||||
/**
|
||||
* Current chat container size. We need to keep track of this so that if and when
|
||||
|
|
@ -298,7 +296,7 @@ export default {
|
|||
return this.room.roomId;
|
||||
},
|
||||
attachButtonDisabled() {
|
||||
return this.editedEvent || this.currentInput.length > 0;
|
||||
return this.editedEvent != null || this.replyToEvent != null || this.currentInput.length > 0;
|
||||
},
|
||||
sendButtonDisabled() {
|
||||
return this.currentInput.length == 0;
|
||||
|
|
@ -328,6 +326,7 @@ export default {
|
|||
|
||||
watch: {
|
||||
room: {
|
||||
immediate: true,
|
||||
handler(room, ignoredOldVal) {
|
||||
console.log("Chat: Current room changed");
|
||||
|
||||
|
|
@ -351,8 +350,7 @@ export default {
|
|||
this.paginateBackIfNeeded();
|
||||
});
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -524,7 +522,8 @@ export default {
|
|||
this.$matrix.matrixClient,
|
||||
this.roomId,
|
||||
this.currentInput,
|
||||
this.editedEvent
|
||||
this.editedEvent,
|
||||
this.replyToEvent
|
||||
)
|
||||
.then(() => {
|
||||
console.log("Sent message");
|
||||
|
|
@ -534,6 +533,7 @@ export default {
|
|||
});
|
||||
this.currentInput = "";
|
||||
this.editedEvent = null; //TODO - Is this a good place to reset this?
|
||||
this.replyToEvent = null;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -678,15 +678,21 @@ export default {
|
|||
this.showEmojiPicker = true;
|
||||
},
|
||||
|
||||
addReply(event) {
|
||||
this.replyToEvent = event;
|
||||
this.$refs.messageInput.focus();
|
||||
},
|
||||
|
||||
edit(event) {
|
||||
this.editedEvent = event;
|
||||
this.currentInput = event.getContent().body;
|
||||
this.$refs.messageInput.focus();
|
||||
},
|
||||
|
||||
cancelEdit() {
|
||||
cancelEditReply() {
|
||||
this.currentInput = "";
|
||||
this.editedEvent = null;
|
||||
this.replyToEvent = null;
|
||||
},
|
||||
|
||||
emojiSelected(e) {
|
||||
|
|
|
|||
|
|
@ -8,13 +8,18 @@
|
|||
</v-avatar>
|
||||
|
||||
<div class="bubble">
|
||||
<div class="original-message" v-if="inReplyToText">
|
||||
<div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
|
||||
<div class="original-message-text">{{ inReplyToText }}</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
{{ event.getContent().body }}
|
||||
{{ messageText }}
|
||||
<span class="edit-marker" v-if="event.replacingEventId()"
|
||||
>(edited)</span
|
||||
>
|
||||
</div>
|
||||
<QuickReactions :event="event" :reactions="reactions" />
|
||||
<!-- <div>{{ JSON.stringify(event) }}</div> -->
|
||||
</div>
|
||||
<v-btn icon class="op-button" @click.stop="showContextMenu"
|
||||
><v-icon>more_vert</v-icon></v-btn
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<template>
|
||||
<div class="messageOut">
|
||||
<div class="bubble">
|
||||
<div class="original-message" v-if="inReplyToText">
|
||||
<div class="original-message-sender">{{ inReplyToSender || 'Someone' }} said:</div>
|
||||
<div class="original-message-text">{{ inReplyToText }}</div>
|
||||
</div>
|
||||
|
||||
<div class="message">
|
||||
{{ event.getContent().body }}
|
||||
{{ messageText }}
|
||||
<span class="edit-marker" v-if="event.replacingEventId()"
|
||||
>(edited)</span
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,78 @@ export default {
|
|||
default: function () {
|
||||
return null
|
||||
}
|
||||
},
|
||||
timelineSet: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inReplyToEvent: null,
|
||||
inReplyToSender: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const relatesTo = this.event.getWireContent()['m.relates_to'];
|
||||
if (relatesTo && relatesTo['m.in_reply_to'])
|
||||
{
|
||||
// Can we find the original message?
|
||||
const originalEventId = relatesTo['m.in_reply_to'].event_id;
|
||||
if (originalEventId) {
|
||||
const originalEvent = this.timelineSet.findEventById(originalEventId);
|
||||
this.inReplyToEvent = originalEvent;
|
||||
this.inReplyToSender = this.messageEventDisplayName(originalEvent);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inReplyToText() {
|
||||
const relatesTo = this.event.getWireContent()['m.relates_to'];
|
||||
if (relatesTo && relatesTo['m.in_reply_to'])
|
||||
{
|
||||
const content = this.event.getContent();
|
||||
|
||||
const lines = content.body.split('\n').reverse();
|
||||
while (lines.length && !lines[0].startsWith('> ')) lines.shift();
|
||||
// Reply fallback has a blank line after it, so remove it to prevent leading newline
|
||||
if (lines[0] === '') lines.shift();
|
||||
const text = lines
|
||||
.map((item) => { return item.replace(/^> (<.*> )?/g, ''); })
|
||||
.reverse()
|
||||
.join('\n');
|
||||
if (text) {
|
||||
return text;
|
||||
}
|
||||
|
||||
if (this.inReplyToEvent) {
|
||||
var c = this.inReplyToEvent.getContent();
|
||||
return c.body;
|
||||
}
|
||||
|
||||
// We don't have the original text (at the moment at least)
|
||||
return "<original text>";
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
messageText() {
|
||||
const relatesTo = this.event.getWireContent()['m.relates_to'];
|
||||
if (relatesTo && relatesTo['m.in_reply_to'])
|
||||
{
|
||||
const content = this.event.getContent();
|
||||
|
||||
// Remove the new text and strip "> " from the old original text
|
||||
const lines = content.body.split('\n');
|
||||
while (lines.length && lines[0].startsWith('> ')) lines.shift();
|
||||
// Reply fallback has a blank line after it, so remove it to prevent leading newline
|
||||
if (lines[0] === '') lines.shift();
|
||||
return lines.join('\n');
|
||||
}
|
||||
return this.event.getContent().body;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showContextMenu() {
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ class Util {
|
|||
});
|
||||
}
|
||||
|
||||
sendTextMessage(matrixClient, roomId, text, editedEvent) {
|
||||
sendTextMessage(matrixClient, roomId, text, editedEvent, replyToEvent) {
|
||||
var content = ContentHelpers.makeTextMessage(text);
|
||||
if (editedEvent) {
|
||||
content['m.relates_to'] = {
|
||||
|
|
@ -124,6 +124,18 @@ class Util {
|
|||
body: content.body,
|
||||
msgtype: content.msgtype
|
||||
}
|
||||
} else if (replyToEvent) {
|
||||
content['m.relates_to'] = {
|
||||
'm.in_reply_to': {
|
||||
event_id: replyToEvent.getId()
|
||||
}
|
||||
}
|
||||
|
||||
// Prefix the content with reply info (seems to be a legacy thing)
|
||||
const prefix = replyToEvent.getContent().body.split('\n').map((item,index) => {
|
||||
return "> " + (index == 0 ? ("<" + replyToEvent.getSender() + "> ") : "") + item;
|
||||
}).join('\n');
|
||||
content.body = prefix + "\n\n" + content.body;
|
||||
}
|
||||
return this.sendMessage(matrixClient, roomId, "m.room.message", content);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export default {
|
|||
matrixClient: null,
|
||||
matrixClientReady: false,
|
||||
rooms: [],
|
||||
currentRoom: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -47,11 +48,15 @@ export default {
|
|||
currentRoomId() {
|
||||
return this.$store.state.currentRoomId;
|
||||
},
|
||||
},
|
||||
|
||||
currentRoom() {
|
||||
return this.getRoom(this.currentRoomId);
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentRoomId: {
|
||||
immediate: true,
|
||||
handler(roomId) {
|
||||
this.currentRoom = this.getRoom(roomId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -120,6 +125,8 @@ export default {
|
|||
initClient() {
|
||||
this.reloadRooms();
|
||||
this.matrixClientReady = true;
|
||||
this.currentRoom = null;
|
||||
this.currentRoom = this.getRoom(this.currentRoomId);
|
||||
this.matrixClient.emit('Matrix.initialized', this.matrixClient);
|
||||
},
|
||||
|
||||
|
|
@ -259,6 +266,9 @@ export default {
|
|||
},
|
||||
|
||||
getRoom(roomId) {
|
||||
if (!roomId) {
|
||||
return null;
|
||||
}
|
||||
var room = this.rooms.find(room => {
|
||||
if (roomId.startsWith("#")) {
|
||||
return room.getCanonicalAlias() == roomId;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue