diff --git a/components/tailored/messaging/message/reply/Reply.html b/components/tailored/messaging/message/reply/Reply.html
index b264b67db2..fff2e5c865 100644
--- a/components/tailored/messaging/message/reply/Reply.html
+++ b/components/tailored/messaging/message/reply/Reply.html
@@ -2,7 +2,7 @@
diff --git a/components/tailored/messaging/message/reply/Reply.vue b/components/tailored/messaging/message/reply/Reply.vue
index be136ed143..58e27c7f5b 100644
--- a/components/tailored/messaging/message/reply/Reply.vue
+++ b/components/tailored/messaging/message/reply/Reply.vue
@@ -28,6 +28,28 @@ export default Vue.extend({
data() {
return { showReplies: false, replyHover: '' }
},
+ computed: {
+ /**
+ * makeReplyText: generates the "Replies from _____" text in a chat
+ * depending on the number of users in the reply thread, it will generate a different replyText
+ */
+ makeReplyText() {
+ const replyLength = Object.keys(this.$props.message.replies).length
+ let baseReply = replyLength > 1 ? "Replies from " : "Reply from "
+
+ const firstName = this.$mock.users.filter((u: any) => u.address === this.$props.message.replies[0].from)[0].name
+ const secondName = replyLength > 1 ? this.$mock.users.filter((u: any) => u.address === this.$props.message.replies[1].from)[0].name : ""
+
+ if (replyLength === 1) {
+ baseReply += firstName
+ } else if (replyLength === 2) {
+ baseReply += firstName + " and " + secondName
+ } else {
+ baseReply += firstName + ", " + secondName + ", and " + (replyLength - 2) + " more ..."
+ }
+ return baseReply
+ }
+ },
methods: {
mouseOver(replyId: string) {
this.$data.replyHover = replyId
diff --git a/mock/messages.ts b/mock/messages.ts
index f6bb4397b3..063a5169aa 100644
--- a/mock/messages.ts
+++ b/mock/messages.ts
@@ -259,6 +259,23 @@ export const Messages = [
payload: 'This is a message reply',
reactions: [],
},
+ {
+ id: '02-432-338',
+ from: '0xdc76cd25977e0a5ae17155770273ad58648913d3',
+ to: '00-00-03',
+ type: 'text',
+ at: 1620515563000,
+ payload: 'This is a message reply 3',
+ reactions: [],
+ }, {
+ id: '02-432-338',
+ from: '0x9bf4001d307dfd62b26a2f1307ee0c0307632d59',
+ to: '00-00-03',
+ type: 'text',
+ at: 1620515563000,
+ payload: 'This is a message reply 4',
+ reactions: [],
+ },
],
},
{
diff --git a/pages/index.vue b/pages/index.vue
index 39a3a4a66e..50cf0e635b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -64,7 +64,7 @@ export default Vue.extend({
right: 0;
bottom: 0;
overflow: hidden;
-
+
.loader-container {
min-width: 250px;
align-self: center;