Added ability to specify user ID in chat json instead of 'me'.

Author: eduardsmetanin

demo/src/App.vue

@@ -144,10 +144,10 @@ export default {
       alwaysScrollToBottom: true,
       messageStyling: true,
       userIsTyping: false,
-      placeholder: "Write something...",
+      placeholder: 'Write something...',
       multipleChatsEnabled: true,
       currentChatID: Object.keys(chatHistory)[0],
-      chatListTitle: "My chats",
+      chatListTitle: 'My chats'
     }
   },
   created() {
@@ -171,7 +171,7 @@ export default {
           : ''
     },
     onMessageWasSent(message, chatID) {
-      const msg = Object.assign({}, message, {id: Math.random(), read: (message.author === 'me')})
+      const msg = Object.assign({}, message, {id: Math.random(), read: (message.author === this.myId)})
       if (chatID !== undefined) {
         this.chatMessageList(chatID).push(msg)
       } else {
@@ -241,7 +241,11 @@ export default {
       })
     },
     chatMessageList(chatID) {
-      return this.chatHistory[chatID]["messages"]
+      const chat = this.chatHistory[chatID];
+      if (chat === undefined) {
+        return [];
+      }
+      return chat["messages"];
     },
   },
   computed: {
@@ -254,10 +258,18 @@ export default {
       return this.chosenColor === 'dark' ? this.colors.messageList.bg : '#fff'
     },
     messageList() {
-        return this.chatHistory[this.currentChatID]["messages"]
+      const chat = this.chatHistory[this.currentChatID];
+      if (chat === undefined) {
+        return [];
+      }
+      return chat["messages"];
     },
     participants() {
-      return this.chatHistory[this.currentChatID]["participants"]
+      const chat = this.chatHistory[this.currentChatID];
+      if (chat === undefined) {
+        return [];
+      }
+      return chat["participants"];
     },
     chatList() {
       var chats = []

src/ChatWindow.vue

@@ -34,6 +34,7 @@
       :show-edition="showEdition"
       :show-deletion="showDeletion"
       :message-styling="messageStyling"
+      :myId="myId"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
@@ -67,6 +68,7 @@
       :show-file="showFile"
       :placeholder="placeholder"
       :colors="colors"
+      :myId="myId"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
     />
@@ -182,6 +184,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   data() {

src/Header.vue

@@ -98,6 +98,7 @@ export default {
   flex: 1;
   user-select: none;
   font-size: 20px;
+  text-align: left;
 }
 
 .sc-header--title.enabled {

src/Launcher.vue

@@ -37,6 +37,7 @@
       :multiple-chats-enabled="multipleChatsEnabled"
       :chat-list="chatList"
       :chat-list-title="chatListTitle"
+      :myId="myId"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
@@ -238,6 +239,10 @@ export default {
     chatListTitle: {
       type: String,
       default: () => ''
+    },
+    myId: {
+      type: String,
+      default: 'me'
     }
   },
   computed: {

src/Message.vue

@@ -3,14 +3,14 @@
     <div
       class="sc-message--content"
       :class="{
-        sent: message.author === 'me',
-        received: message.author !== 'me' && message.type !== 'system',
+        sent: message.author === this.myId,
+        received: message.author !== this.myId && message.type !== 'system',
         system: message.type === 'system'
       }"
     >
       <slot name="user-avatar" :message="message" :user="user">
         <div
-          v-if="message.type !== 'system' && authorName && authorName !== 'me'"
+          v-if="message.type !== 'system' && authorName && authorName !== this.myId"
           v-tooltip="authorName"
           :title="authorName"
           class="sc-message--avatar"
@@ -27,6 +27,7 @@
         :message-styling="messageStyling"
         :show-edition="showEdition"
         :show-deletion="showDeletion"
+        :myId="myId"
         @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
@@ -103,6 +104,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -113,7 +118,7 @@ export default {
       return (this.user && this.user.imageUrl) || chatIcon
     },
     messageColors() {
-      return this.message.author === 'me' ? this.sentColorsStyle : this.receivedColorsStyle
+      return this.message.author === this.myId ? this.sentColorsStyle : this.receivedColorsStyle
     },
     receivedColorsStyle() {
       return {

src/MessageList.vue

@@ -14,6 +14,7 @@
       :message-styling="messageStyling"
       :show-edition="showEdition"
       :show-deletion="showDeletion"
+      :myId="myId"
       @remove="$emit('remove', message)"
     >
       <template v-slot:user-avatar="scopedProps">
@@ -45,6 +46,7 @@
       :message-styling="messageStyling"
       :show-edition="showEdition"
       :show-deletion="showDeletion"
+      :myId="myId"
     />
   </div>
 </template>
@@ -89,6 +91,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   computed: {

src/UserInput.vue

@@ -139,6 +139,10 @@ export default {
     colors: {
       type: Object,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -203,7 +207,7 @@ export default {
       })
     },
     _submitSuggestion(suggestion) {
-      this.onSubmit({author: 'me', type: 'text', data: {text: suggestion}})
+      this.onSubmit({author: this.myId, type: 'text', data: {text: suggestion}})
     },
     _checkSubmitSuccess(success) {
       if (Promise !== undefined) {
@@ -229,7 +233,7 @@ export default {
         if (text && text.length > 0) {
           this._checkSubmitSuccess(
             this.onSubmit({
-              author: 'me',
+              author: this.myId,
               type: 'text',
               data: {text}
             })
@@ -241,15 +245,15 @@ export default {
       if (text && text.length > 0) {
         this._checkSubmitSuccess(
           this.onSubmit({
-            author: 'me',
+            author: this.myId,
             type: 'file',
             data: {text, file}
           })
         )
       } else {
         this._checkSubmitSuccess(
           this.onSubmit({
-            author: 'me',
+            author: this.myId,
             type: 'file',
             data: {file}
           })
@@ -260,7 +264,7 @@ export default {
       const text = this.$refs.userInput.textContent
       if (text && text.length) {
         this.$emit('edit', {
-          author: 'me',
+          author: this.myId,
           type: 'text',
           id: store.editMessage.id,
           data: {text}
@@ -271,7 +275,7 @@ export default {
     _handleEmojiPicked(emoji) {
       this._checkSubmitSuccess(
         this.onSubmit({
-          author: 'me',
+          author: this.myId,
           type: 'emoji',
           data: {emoji}
         })
@@ -320,6 +324,7 @@ export default {
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  text-align: left;
 }
 
 .sc-user-input--text:empty:before {

src/messages/TextMessage.vue

@@ -72,6 +72,10 @@ export default {
     showDeletion: {
       type: Boolean,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -89,7 +93,7 @@ export default {
       })
     },
     me() {
-      return this.message.author === 'me'
+      return this.message.author === this.myId
     },
     isEditing() {
       return (store.editMessage && store.editMessage.id) == this.message.id