adb
/
matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add reply to events / update sendEvent / refactor parseMessage to eventUtils / fix quotes

Browse Source
matrix-chat-native
adb 3 years ago
parent 3b70b5b37c
commit d66f2c990e
6 changed files with 122 additions and 77 deletions
Show Stats Download Patch File Download Diff File

33
src/components/message.vue
Unescape Escape View File

@ -10,11 +10,12 @@
</template> </template>
<script> <script>
import {matrix} from "@/main"; import {matrix} from '@/main';
import {calcUserName} from "@/lib/matrixUtils"; import {calcUserName} from '@/lib/matrixUtils';
import {parseMessage} from '@/lib/eventUtils';
export default { export default {
name: "message", name: 'message',
props: { props: {
msg: String, msg: String,
time: String, time: String,
@ -23,18 +24,6 @@ export default {
roomId: String roomId: String
}, },
methods:{ methods:{
solveTextLinks(text){
return (text || "").replace(
/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
(match, space, url)=>{
let hyperlink = url;
if (!hyperlink.match('^https?://')) {
hyperlink = 'http://' + hyperlink;
}
return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
}
)
},
async getReplyEvent(content) { async getReplyEvent(content) {
let replyId = this.getReplyId(content); let replyId = this.getReplyId(content);
if (replyId === undefined) return undefined; if (replyId === undefined) return undefined;
@ -46,14 +35,8 @@ export default {
if(!content['m.relates_to']) return undefined; if(!content['m.relates_to']) return undefined;
return content['m.relates_to']['m.in_reply_to'].event_id || undefined; return content['m.relates_to']['m.in_reply_to'].event_id || undefined;
}, },
parseMessage(msg){ calcUserName,
return this.solveTextLinks( parseMessage
msg.replace(/>.*\n/gm, '').trim()
.replace(/</g, '&lt')
.replace(/>/g, '&gt')
);
},
calcUserName
}, },
data(){ data(){
return{ return{
@ -81,13 +64,13 @@ export default {
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.messageReceive{ .messageReceive{
background-color: #42b983; background-color: #424141;
border-radius: 1rem 1rem 1rem 0; border-radius: 1rem 1rem 1rem 0;
} }
.messageSend{ .messageSend{
margin-left:auto; margin-left:auto;
margin-right:0; margin-right:0;
background-color: #42a7b9; background-color: #357882;
border-radius: 1rem 1rem 0 1rem; border-radius: 1rem 1rem 0 1rem;
} }
.time{ .time{

77
src/components/newMessage.vue
Unescape Escape View File

@ -1,16 +1,16 @@
<template> <template>
<form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()"> <div class="newMessageBanner" ref="newMessageBanner">
<label for="newMessageInput"></label> <div class="reply" v-if="replyTo" @click="resetReplyTo">
<span class="username">{{calcUserName(replyTo.sender)}}</span><br>
{{parseMessage(replyTo.content.body)}}
</div>
<form v-on:submit.prevent="sendMessage()">
<textarea <textarea
@keyup.enter.exact="sendMessage()" @keyup.enter.exact="sendMessage()"
@input="resizeMessageBanner()" @input="resizeMessageBanner()"
v-model="msg.content.body" v-model="event.content.body"
ref="newMessageInput" ref="newMessageInput" class="newMessageInput"
id="newMessageInput" rows="1" placeholder="type a message ..."
class="newMessageInput"
autocomplete="off"
rows="1"
placeholder="type a message ..."
/> />
<icon <icon
type="submit" type="submit"
@ -19,52 +19,67 @@
ic="./sym/ic_send_white.svg" ic="./sym/ic_send_white.svg"
/> />
</form> </form>
</div>
</template> </template>
<script> <script>
import icon from '@/components/icon.vue'; import icon from '@/components/icon.vue';
import {matrix} from '@/main.js'; import {matrix} from '@/main.js';
import {parseMessage} from '@/lib/eventUtils';
import {calcUserName} from '@/lib/matrixUtils';
export default { export default {
name: "newMessage", name: 'newMessage',
components: { components: {
icon icon
}, },
props: { props: {
onResize: Function, onResize: Function,
roomId: String roomId: String,
replyTo: Object,
resetReplyTo: Function
}, },
methods: { methods: {
sendMessage(){ sendMessage(){
let content = this.msg.content; let content = this.event.content;
if (!content.body.trim()) return; if (!content.body.trim()) return;
let msgSend = Object.assign({}, this.msg); matrix.sendEvent(this.event, this.roomId, this.replyTo);
matrix.sendEvent(msgSend, this.roomId); content.body = '';
content.body = ""; this.resetReplyTo();
let id = this.$refs.newMessageInput; let id = this.$refs.newMessageInput;
id.style.height = "1.25rem"; id.style.height = '1.25rem';
this.onResize(id.parentElement.clientHeight); this.onResize(id.parentElement.clientHeight);
}, },
resizeMessageBanner(){ resizeMessageBanner(){
let id = this.$refs.newMessageInput; let id = this.$refs.newMessageInput;
id.style.height = '1.25rem'; id.style.height = '1.25rem';
id.style.height = `${id.scrollHeight}px`; id.style.height = `${id.scrollHeight}px`;
this.onResize(id.parentElement.clientHeight); this.onResize(this.$refs.newMessageBanner.clientHeight);
},
focusInput(){
this.$refs.newMessageInput.focus();
}, },
toggleEmojiPicker() { toggleEmojiPicker() {
this.showEmojiPicker = !this.showEmojiPicker; this.showEmojiPicker = !this.showEmojiPicker;
}, },
onSelectEmoji(emoji) { onSelectEmoji(emoji) {
this.msg.content.body += emoji.data; this.event.content.body += emoji.data;
} },
parseMessage,
calcUserName
}, },
data(){ data(){
return { return {
msg: { event: {
type: "m.room.message", type: 'm.room.message',
content: { content: {
body: "", body: '',
msgtype: "m.text" msgtype: 'm.text',
'm.relates_to': {
'm.in_reply_to': {
event_id: undefined
}
}
} }
}, },
showEmojiPicker: false showEmojiPicker: false
@ -89,7 +104,7 @@ export default {
margin-top: 1.25rem; margin-top: 1.25rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
padding: 0; padding: 0;
left: 2rem; left: 1rem;
min-height: 1.5rem; min-height: 1.5rem;
max-height: 10rem; max-height: 10rem;
width: calc(100% - 7rem); width: calc(100% - 7rem);
@ -110,4 +125,18 @@ export default {
bottom: 0.25rem; bottom: 0.25rem;
background-color: unset; background-color: unset;
} }
.reply{
position: relative;
width: calc(100% - 7rem);
left: 1rem;
border-left: 2px solid #fff;
padding-left: 0.5rem;
margin-top: 0.75rem;
margin-right: 0.5rem;
word-break: break-word;
white-space: pre-line;
}
.username{
font-weight: bold;
}
</style> </style>

14
src/components/timeline.vue
Unescape Escape View File

@ -29,6 +29,7 @@
v-for="event in group" v-for="event in group"
:key="event.origin_server_ts" :key="event.origin_server_ts"
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`" :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
@contextmenu.prevent="setReplyTo(event)"
> >
<message <message
v-if="event.content.msgtype==='m.text'" v-if="event.content.msgtype==='m.text'"
@ -54,11 +55,11 @@
</template> </template>
<script> <script>
import message from "@/components/message"; import message from '@/components/message';
import avatar from "@/components/avatar"; import avatar from '@/components/avatar';
import splitArray from "@/lib/splitArray"; import splitArray from '@/lib/splitArray';
import {getDate, getTime} from "@/lib/getTimeStrings"; import {getDate, getTime} from '@/lib/getTimeStrings';
import {getUser, calcUserName} from "@/lib/matrixUtils"; import {getUser, calcUserName} from '@/lib/matrixUtils';
export default { export default {
name: 'eventGroup', name: 'eventGroup',
@ -70,7 +71,8 @@ export default {
timeline: Array, timeline: Array,
user: String, user: String,
groupTimeline: Boolean, groupTimeline: Boolean,
roomId: String roomId: String,
setReplyTo: Function
}, },
methods: { methods: {
getUser, getUser,

19
src/lib/eventUtils.js
Unescape Escape View File

@ -0,0 +1,19 @@
export function solveTextLinks(text){
return (text || '').replace(
/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
(match, space, url)=>{
let hyperlink = url;
if (!hyperlink.match('^https?://')) {
hyperlink = 'http://' + hyperlink;
}
return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
}
)
}
export function parseMessage(msg){
return solveTextLinks(
msg.replace(/>.*\n/gm, '').trim()
.replace(/</g, '&lt')
.replace(/>/g, '&gt')
);
}

25
src/lib/matrixHandler.js
Unescape Escape View File

@ -68,18 +68,17 @@ export class MatrixHandler {
callback(); callback();
}); });
} }
async sendEvent(msg, roomId){ async sendEvent({content, type}, roomId, replyTo = undefined){
const msgSend = { await this.client.sendEvent(roomId, type, {
type: msg.type, body: content.body.trim(),
content: { msgtype: content.msgtype,
body: msg.content.body.trim(), 'm.relates_to': {
msgtype: msg.content.msgtype, 'm.in_reply_to': {
}, event_id: replyTo?replyTo.event_id:undefined
}; }
await this.client.sendEvent(roomId, msgSend.type, msgSend.content, '').then(() => { }
console.log('message sent successfully'); }).then(() => console.log('message sent successfully'))
}).catch((err) => { .catch((err) => console.log(`error while sending message => ${err}`)
console.log(`error while sending message => ${err}`); );
});
} }
} }

31
src/views/chat.vue
Unescape Escape View File

@ -1,14 +1,21 @@
<template> <template>
<div> <div>
<div ref="chatContainer" class="chatContainer"> <div ref="chatContainer" class="chatContainer">
<div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer"> <div @scroll="onScroll()" ref="timelineContainer" class="timelineContainer">
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div> <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p> <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
<timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId" /> <timeline
:timeline="room.timeline" :group-timeline="isGroup()"
:user="user" :roomId="room.roomId"
:setReplyTo="event=>{replyTo=event; resize();}"
/>
</div> </div>
<icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" /> <icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
</div> </div>
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/> <newMessage
:onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
:replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
/>
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/> <topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
</div> </div>
</template> </template>
@ -20,7 +27,7 @@ import Icon from '@/components/icon';
import {matrix} from '@/main'; import {matrix} from '@/main';
import splitArray from '@/lib/splitArray.js' import splitArray from '@/lib/splitArray.js'
import timeline from '@/components/timeline'; import timeline from '@/components/timeline';
import scrollHandler from "@/lib/scrollHandler"; import scrollHandler from '@/lib/scrollHandler';
export default { export default {
name: 'chat', name: 'chat',
@ -38,10 +45,10 @@ export default {
}, },
methods:{ methods:{
onScroll(){ onScroll(){
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents(); if (this.$refs.timelineContainer.scrollTop === 0) this.loadEvents();
this.showScrollBtn = this.scroll.getScrollBottom() > 400; this.showScrollBtn = this.scroll.getScrollBottom() > 400;
}, },
resize(height){ resize(height = this.$refs.newMessage.clientHeight){
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`; this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
}, },
isGroup(){ isGroup(){
@ -64,15 +71,21 @@ export default {
showScrollBtn: false, showScrollBtn: false,
scrollOnUpdate: true, scrollOnUpdate: true,
loadingStatus: 'load more', loadingStatus: 'load more',
scroll: ()=>{} scroll: ()=>{},
replyTo: undefined
} }
}, },
updated(){ updated(){
if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom(); if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom();
}, },
mounted(){ mounted(){
this.scroll = new scrollHandler(this.$refs.msgContainer); this.scroll = new scrollHandler(this.$refs.timelineContainer);
this.scroll.scrollToBottom(); this.scroll.scrollToBottom();
},
watch: {
'$route'(){
this.scroll.scrollToBottom();
}
} }
} }
</script> </script>
@ -85,7 +98,7 @@ export default {
top: 3.5rem; top: 3.5rem;
width: 100%; width: 100%;
height: calc(100% - 7rem); height: calc(100% - 7rem);
.messagesContainer{ .timelineContainer{
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }

Write Preview
Loading…
Cancel
Save