From a67f35583f842d7ff9fc999382b893da65f9775d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarvo=20M=C3=A4esepp?= <tarvomaesepp@gmail.com>
Date: Fri, 6 Sep 2019 10:36:04 +0300
Subject: [PATCH 1/2] Compare author against id instead of 'me'

---
 demo/src/App.vue             |  1 +
 src/ChatWindow.vue           |  5 +++++
 src/Launcher.vue             |  5 +++++
 src/Message.vue              | 14 ++++++++++----
 src/MessageList.vue          |  6 +++++-
 src/messages/TextMessage.vue |  6 +++++-
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 4cc6cb60..bd4d3d4b 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -22,6 +22,7 @@
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      :authorId="'me'"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 40f43ff0..dd0b8480 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -20,6 +20,7 @@
     <MessageList
       v-if="!showUserList"
       :messages="messages"
+      :authorId="authorId"
       :participants="participants"
       :showTypingIndicator="showTypingIndicator"
       :colors="colors"
@@ -131,6 +132,10 @@ export default {
     disableUserListToggle: {
       type: Boolean,
       default: false
+    },
+    authorId: {
+      type: String,
+      required: false
     }
   },
   data() {
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 46fcc914..716d8c77 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -27,6 +27,7 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      :authorId="authorId"
     >
       <template v-slot:header>
         <slot name="header">
@@ -185,6 +186,10 @@ export default {
     disableUserListToggle: {
       type: Boolean,
       default: false
+    },
+    authorId: {
+      type: String,
+      required: true
     }
   },
   computed: {
diff --git a/src/Message.vue b/src/Message.vue
index 4c02290b..65b29884 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="sc-message">
     <div class="sc-message--content" :class="{
-        sent: message.author === 'me',
-        received: message.author !== 'me' && message.type !== 'system',
+        sent: message.author === authorId,
+        received: message.author !== authorId && message.type !== 'system',
         system: message.type === 'system'
       }">
       <slot 
@@ -19,7 +19,9 @@
         :message="message" 
         :messageColors="determineMessageColors()" 
         :messageStyling="messageStyling"
-        @remove="$emit('remove')">
+        @remove="$emit('remove')"
+        :authorId="authorId"
+        >
           <template v-slot:default="scopedProps">
             <slot name="text-message-body" :message="scopedProps.message" :messageText="scopedProps.messageText" :messageColors="scopedProps.messageColors" :me="scopedProps.me">
             </slot>
@@ -78,6 +80,10 @@ export default {
     user: {
       type: Object,
       required: true
+    },
+    authorId: {
+      type: String,
+      required: false
     }
   },
   methods: {
@@ -94,7 +100,7 @@ export default {
       }
     },
     determineMessageColors() {
-      return this.message.author === 'me' ? this.sentColorsStyle() : this.receivedColorsStyle()
+      return this.message.author === this.authorId ? this.sentColorsStyle() : this.receivedColorsStyle()
     }
   },
   computed:{
diff --git a/src/MessageList.vue b/src/MessageList.vue
index efc90ddf..e56aa9eb 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sc-message-list" ref="scrollList" :style="{backgroundColor: colors.messageList.bg}" @scroll="handleScroll">
-    <Message v-for="(message, idx) in messages" :message="message" :user="profile(message.author)" :key="idx" :colors="colors" :messageStyling="messageStyling" @remove="$emit('remove', message)">
+    <Message v-for="(message, idx) in messages" :message="message" :authorId="authorId" :user="profile(message.author)" :key="idx" :colors="colors" :messageStyling="messageStyling" @remove="$emit('remove', message)">
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message">
         </slot>
@@ -49,6 +49,10 @@ export default {
     messageStyling: {
       type: Boolean,
       required: true
+    },
+    authorId: {
+      type: String,
+      required: true
     }
   },
   methods: {
diff --git a/src/messages/TextMessage.vue b/src/messages/TextMessage.vue
index 1f3396b0..ac25d8b6 100644
--- a/src/messages/TextMessage.vue
+++ b/src/messages/TextMessage.vue
@@ -55,6 +55,10 @@ export default {
     messageStyling: {
       type: Boolean,
       required: true
+    },
+    authorId: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -67,7 +71,7 @@ export default {
       })
     },
     me(){
-      return this.message.author === 'me';
+      return this.message.author === this.authorId;
     },
     isEditing() {
       return (store.editMessage && store.editMessage.id) == this.message.id;

From 61b6fedcfe4e532646d2e5d89b501faa45711d95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarvo=20M=C3=A4esepp?= <tarvomaesepp@gmail.com>
Date: Fri, 6 Sep 2019 10:44:17 +0300
Subject: [PATCH 2/2] Updated README

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 652e2e08..2dd5af1d 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,9 @@ Vue.use(Chat)
       :alwaysScrollToBottom="alwaysScrollToBottom"
       :messageStyling="messageStyling"
       @onType="handleOnType"
-      @edit="editMessage" />
+      @edit="editMessage"
+      :authorId="'me'"
+      />
   </div>
 </template>
 ```
@@ -198,6 +200,7 @@ For more detailed examples see the demo folder.
 | showTypingIndicator | Boolean | A bool indicating whether or not to show the `typing` indicator
 | colors | Object | An object containing the specs of the colors used to paint the component. [See here](#faq)
 | messageStyling | Boolean | A bool indicating whether or not to enable `msgdown` support for message formatting in chat. [See here](#faq)
+| authorId | String | Current user id used to compare message authors.
 
 #### Events