Compare author against id instead of 'me'

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
 

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)">

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() {

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: {

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:{

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: {

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;