From c394c26b59112395dcaba37800f398363f52a222 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sat, 5 Sep 2020 16:51:34 -0600
Subject: [PATCH 01/32] Added multiple chats functionality.

---
 src/ChatList.vue    | 66 +++++++++++++++++++++++++++++++++++++++++++
 src/ChatWindow.vue  | 69 ++++++++++++++++++++++++++++++++++++++-------
 src/Header.vue      | 49 +++++++++++++++++++++++++-------
 src/Launcher.vue    | 18 +++++++++++-
 src/MessageList.vue |  5 ++++
 src/UserInput.vue   |  2 +-
 6 files changed, 187 insertions(+), 22 deletions(-)
 create mode 100644 src/ChatList.vue

diff --git a/src/ChatList.vue b/src/ChatList.vue
new file mode 100644
index 00000000..bd111d0f
--- /dev/null
+++ b/src/ChatList.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="chat-list" :style="{background: colors.chatList.bg}">
+    <table style="padding-top: 5px;" width=100%>
+      <tbody>
+        <tr v-for="chat in chatList" :key="chat.id" @click="openChat(chat.id)">
+          <td style="text-align: center;">
+            <img :src="chat.imageUrl" class="chat-img" />
+          </td>
+          <td class="chat-element" :style="{color: colors.chatList.text}">
+            {{ chat.name }}
+          </td>
+          <td>
+            <svg width="22px" height="22px" viewBox="0 0 32 32" class="bi bi-circle-fill chat-badge" :fill="chat.unreadCount ? colors.chatListBadge.bg : colors.chatList.bg" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="16" cy="16" r="16"/>
+              <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" :fill="chat.unreadCount ? colors.chatListBadge.text : colors.chatList.bg">
+                {{ chat.unreadCount }}
+              </text>
+            </svg>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    chatList: {
+      type: Array,
+      required: true
+    },
+    colors: {
+      type: Object,
+      required: true
+    },
+  },
+  methods: {
+    openChat(chatID) {
+      this.$emit('changeCurrentChat', chatID)
+      this.$emit('showMessageList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-list {
+  height: 100%;
+  overflow: auto;
+  padding-left: 5px;
+  padding-top: 8px;
+}
+.chat-img {
+  border-radius: 50%;
+  width: 50px;
+  margin-right: 5px;
+}
+.chat-element {
+  font-size: 20px;
+  vertical-align: middle;
+}
+.chat-badge {
+  font-size: 17px;
+}
+</style>
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 72e92f43..a63d4d9a 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -2,18 +2,23 @@
   <div class="sc-chat-window" :class="{opened: isOpen, closed: !isOpen}">
     <Header
       v-if="showHeader"
-      :title="title"
-      :colors="colors"
+      :show-chat-list-button="multipleChats && !showingChatList"
+      :title="showingChatList ? chatListTitle : title"
+      :image-url="titleImageUrl"
       @close="$emit('close')"
-      @userList="handleUserListToggle"
+      :colors="colors"
+      :disable-user-list-toggle="disableUserListToggle || showingChatList"
+      @toggleUserListMessageList="handleToggleUserListMessageList"
+      @showChatList="handleShowChatList"
     >
       <template>
         <slot name="header"> </slot>
       </template>
     </Header>
-    <UserList v-if="showUserList" :colors="colors" :participants="participants" />
+    <UserList v-if="showingUserList" :colors="colors" :participants="participants" />
+    <ChatList v-if="showingChatList" :colors="colors" :chatList="chatList" @showMessageList="handleShowMessageList" v-on="$listeners"/>
     <MessageList
-      v-if="!showUserList"
+      v-if="showingMessageList"
       :messages="messages"
       :participants="participants"
       :show-typing-indicator="showTypingIndicator"
@@ -26,6 +31,7 @@
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
+      v-on="$listeners"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
@@ -49,7 +55,7 @@
       </template>
     </MessageList>
     <UserInput
-      v-if="!showUserList"
+      v-if="showingMessageList"
       :show-emoji="showEmoji"
       :on-submit="onUserInputSubmit"
       :suggestions="getSuggestions()"
@@ -67,19 +73,31 @@ import Header from './Header.vue'
 import MessageList from './MessageList.vue'
 import UserInput from './UserInput.vue'
 import UserList from './UserList.vue'
+import ChatList from './ChatList.vue'
+
+const uiState = {
+    MESSAGE_LIST: 'message-list',
+    USER_LIST: 'user-list',
+    CHAT_LIST: 'chat-list'
+}
 
 export default {
   components: {
     Header,
     MessageList,
     UserInput,
-    UserList
+    UserList,
+    ChatList
   },
   props: {
     showEmoji: {
       type: Boolean,
       default: false
     },
+    multipleChats: {
+      type: Boolean,
+      default: false
+    },
     showFile: {
       type: Boolean,
       default: false
@@ -92,6 +110,14 @@ export default {
       type: Array,
       required: true
     },
+    chatList: {
+      type: Array,
+      required: true
+    },
+    chatListTitle: {
+      type: String,
+      default: 'Chats'
+    },
     title: {
       type: String,
       required: true
@@ -147,7 +173,12 @@ export default {
   },
   data() {
     return {
-      showUserList: false
+      state: this.initialState()
+    }
+  },
+  watch: {
+    multipleChats: function(newMultipleChats) {
+      this.state = this.initialState()
     }
   },
   computed: {
@@ -155,14 +186,32 @@ export default {
       let messages = this.messageList
 
       return messages
+    },
+    showingUserList() {
+      return this.state == uiState.USER_LIST
+    },
+    showingChatList() {
+      return this.state == uiState.CHAT_LIST
+    },
+    showingMessageList() {
+      return this.state == uiState.MESSAGE_LIST
     }
   },
   methods: {
-    handleUserListToggle(showUserList) {
-      this.showUserList = showUserList
+    handleToggleUserListMessageList() {
+      this.state = (this.state == uiState.USER_LIST) ? uiState.MESSAGE_LIST : uiState.USER_LIST
+    },
+    handleShowChatList() {
+      this.state = uiState.CHAT_LIST
+    },
+    handleShowMessageList() {
+      this.state = uiState.MESSAGE_LIST
     },
     getSuggestions() {
       return this.messages.length > 0 ? this.messages[this.messages.length - 1].suggestions : []
+    },
+    initialState() {
+      return this.multipleChats ? uiState.CHAT_LIST : uiState.MESSAGE_LIST
     }
   }
 }
diff --git a/src/Header.vue b/src/Header.vue
index fc1032ab..2e9108ba 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="sc-header" :style="{background: colors.header.bg, color: colors.header.text}">
+    <div v-if="showChatListButton" class="bi bi-chevron-left sc-header--chat-list-button" @click="showChatList">
+      <svg class="sc-header--svg-button" height="15px" width="15px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"></path>
+      </svg>
+    </div>
     <slot>
       <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" />
-      <div v-if="!disableUserListToggle" class="sc-header--title enabled" @click="toggleUserList">
+      <div v-if="!disableUserListToggle" class="sc-header--title enabled" @click="toggleUserListMessageList">
         {{ title }}
       </div>
       <div v-else class="sc-header--title">{{ title }}</div>
@@ -37,20 +42,21 @@ export default {
     colors: {
       type: Object,
       required: true
-    }
-  },
-  data() {
-    return {
-      inUserList: false
-    }
+    },
+    showChatListButton: {
+      type: Boolean,
+      default: false
+    },
   },
   computed: {
     ...mapState(['disableUserListToggle', 'titleImageUrl', 'showCloseButton'])
   },
   methods: {
-    toggleUserList() {
-      this.inUserList = !this.inUserList
-      this.$emit('userList', this.inUserList)
+    toggleUserListMessageList() {
+      this.$emit('toggleUserListMessageList')
+    },
+    showChatList() {
+      this.$emit('showChatList')
     }
   }
 }
@@ -113,6 +119,29 @@ export default {
   box-sizing: border-box;
 }
 
+.sc-header--chat-list-button {
+  width: 40px;
+  align-self: center;
+  height: 40px;
+  margin-right: 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.sc-header--chat-list-button:hover {
+  box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1);
+}
+
+.sc-header--svg-button {
+  margin: 0 auto;
+  display: block;
+  fill: white
+}
+
 @media (max-width: 450px) {
   .sc-header {
     border-radius: 0px;
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 89411a4d..ba9c2697 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -7,16 +7,19 @@
       :style="{backgroundColor: colors.launcher.bg}"
       @click.prevent="isOpen ? close() : openAndFocus()"
     >
-      <div v-if="newMessagesCount > 0 && !isOpen" class="sc-new-messsages-count">
+      <div v-if="newMessagesCount > 0" class="sc-new-messsages-count">
         {{ newMessagesCount }}
       </div>
       <img v-if="isOpen" class="sc-closed-icon" :src="icons.close.img" :alt="icons.close.name" />
       <img v-else class="sc-open-icon" :src="icons.open.img" :alt="icons.open.name" />
     </div>
     <ChatWindow
+      :multiple-chats="multipleChats"
       :message-list="messageList"
       :on-user-input-submit="onMessageWasSent"
       :participants="participants"
+      :chatList="chatList"
+      :chat-list-title="chatListTitle"
       :title="chatWindowTitle"
       :is-open="isOpen"
       :show-emoji="showEmoji"
@@ -36,6 +39,7 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      v-on="$listeners"
     >
       <template v-slot:header>
         <slot name="header"> </slot>
@@ -131,6 +135,10 @@ export default {
       type: Boolean,
       default: true
     },
+    multipleChats: {
+      type: Boolean,
+      default: false
+    },
     showCloseButton: {
       type: Boolean,
       default: true
@@ -143,6 +151,14 @@ export default {
       type: Array,
       required: true
     },
+    chatList: {
+      type: Array,
+      required: true
+    },
+    chatListTitle: {
+      type: String,
+      default: () => ''
+    },
     title: {
       type: String,
       default: () => ''
diff --git a/src/MessageList.vue b/src/MessageList.vue
index 586a0285..b4c14ac0 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -109,9 +109,11 @@ export default {
     }
   },
   mounted() {
+    this.onMessageListMountedUpdated()
     this.$nextTick(this._scrollDown())
   },
   updated() {
+    this.onMessageListMountedUpdated()
     if (this.shouldScrollToBottom()) this.$nextTick(this._scrollDown())
   },
   methods: {
@@ -133,6 +135,9 @@ export default {
 
       // A profile may not be found for system messages or messages by 'me'
       return profile || {imageUrl: '', name: ''}
+    },
+    onMessageListMountedUpdated() {
+      this.$emit("messageListMountedUpdated")
     }
   }
 }
diff --git a/src/UserInput.vue b/src/UserInput.vue
index c73b3989..55b11631 100644
--- a/src/UserInput.vue
+++ b/src/UserInput.vue
@@ -37,7 +37,6 @@
         @focus="setInputActive(true)"
         @blur="setInputActive(false)"
         @keydown="handleKey"
-        @focusUserInput="focusUserInput()"
       ></div>
       <div class="sc-user-input--buttons">
         <div class="sc-user-input--button"></div>
@@ -167,6 +166,7 @@ export default {
     }
   },
   mounted() {
+    this.focusUserInput()
     this.$root.$on('focusUserInput', () => {
       if (this.$refs.userInput) {
         this.focusUserInput()

From f2a49eba5971f53443d633af0c595f52b339bee4 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sat, 5 Sep 2020 17:05:42 -0600
Subject: [PATCH 02/32] Changed chatList prop to not required.

---
 src/ChatList.vue   | 2 +-
 src/ChatWindow.vue | 2 +-
 src/Launcher.vue   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index bd111d0f..afcd7406 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -28,7 +28,7 @@ export default {
   props: {
     chatList: {
       type: Array,
-      required: true
+      required: false
     },
     colors: {
       type: Object,
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index a63d4d9a..bb8804f7 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -112,7 +112,7 @@ export default {
     },
     chatList: {
       type: Array,
-      required: true
+      required: false
     },
     chatListTitle: {
       type: String,
diff --git a/src/Launcher.vue b/src/Launcher.vue
index ba9c2697..597e8527 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -153,7 +153,7 @@ export default {
     },
     chatList: {
       type: Array,
-      required: true
+      required: false
     },
     chatListTitle: {
       type: String,

From d28f795c55d4f833aad3281c6cbde64aa2434bbf Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sat, 5 Sep 2020 20:15:19 -0600
Subject: [PATCH 03/32] Renamed a prop and reordered a few props.

---
 src/ChatWindow.vue |  8 ++++----
 src/Launcher.vue   | 29 +++++++++++++++--------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index bb8804f7..56456bd9 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -2,7 +2,7 @@
   <div class="sc-chat-window" :class="{opened: isOpen, closed: !isOpen}">
     <Header
       v-if="showHeader"
-      :show-chat-list-button="multipleChats && !showingChatList"
+      :show-chat-list-button="multipleChatsEnabled && !showingChatList"
       :title="showingChatList ? chatListTitle : title"
       :image-url="titleImageUrl"
       @close="$emit('close')"
@@ -94,7 +94,7 @@ export default {
       type: Boolean,
       default: false
     },
-    multipleChats: {
+    multipleChatsEnabled: {
       type: Boolean,
       default: false
     },
@@ -177,7 +177,7 @@ export default {
     }
   },
   watch: {
-    multipleChats: function(newMultipleChats) {
+    multipleChatsEnabled: function(newMultipleChatsEnabled) {
       this.state = this.initialState()
     }
   },
@@ -211,7 +211,7 @@ export default {
       return this.messages.length > 0 ? this.messages[this.messages.length - 1].suggestions : []
     },
     initialState() {
-      return this.multipleChats ? uiState.CHAT_LIST : uiState.MESSAGE_LIST
+      return this.multipleChatsEnabled ? uiState.CHAT_LIST : uiState.MESSAGE_LIST
     }
   }
 }
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 597e8527..e909218e 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -18,8 +18,6 @@
       :message-list="messageList"
       :on-user-input-submit="onMessageWasSent"
       :participants="participants"
-      :chatList="chatList"
-      :chat-list-title="chatListTitle"
       :title="chatWindowTitle"
       :is-open="isOpen"
       :show-emoji="showEmoji"
@@ -35,6 +33,9 @@
       :always-scroll-to-bottom="alwaysScrollToBottom"
       :message-styling="messageStyling"
       @close="close"
+      :multiple-chats-enabled="multipleChatsEnabled"
+      :chat-list="chatList"
+      :chat-list-title="chatListTitle"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
@@ -135,10 +136,6 @@ export default {
       type: Boolean,
       default: true
     },
-    multipleChats: {
-      type: Boolean,
-      default: false
-    },
     showCloseButton: {
       type: Boolean,
       default: true
@@ -151,14 +148,6 @@ export default {
       type: Array,
       required: true
     },
-    chatList: {
-      type: Array,
-      required: false
-    },
-    chatListTitle: {
-      type: String,
-      default: () => ''
-    },
     title: {
       type: String,
       default: () => ''
@@ -244,6 +233,18 @@ export default {
     disableUserListToggle: {
       type: Boolean,
       default: false
+    },
+    multipleChatsEnabled: {
+      type: Boolean,
+      default: false
+    },
+    chatList: {
+      type: Array,
+      required: false
+    },
+    chatListTitle: {
+      type: String,
+      default: () => ''
     }
   },
   computed: {

From dbb7cb1a3a025deb33ceb93bd3ff5d3ef616668c Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sat, 5 Sep 2020 22:46:24 -0600
Subject: [PATCH 04/32] Added multiple chats to demo.

---
 demo/src/App.vue           | 105 ++++++++++++++++++++++++++++++-------
 demo/src/TestArea.vue      |  31 +++++++++--
 demo/src/chatProfiles.js   |  12 -----
 demo/src/colors.js         |  36 ++++++++++++-
 demo/src/messageHistory.js |  71 ++++++++++++++++---------
 5 files changed, 194 insertions(+), 61 deletions(-)
 delete mode 100644 demo/src/chatProfiles.js

diff --git a/demo/src/App.vue b/demo/src/App.vue
index f2ec2300..4a24f596 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -26,9 +26,15 @@
       :confirmationDeletionMessage="'Are you sure? (you can customize this message)'"
       :titleImageUrl="titleImageUrl"
       :disableUserListToggle="false"
+      :placeholder="placeholder"
+      :multipleChatsEnabled="multipleChatsEnabled"
+      :chatList="chatList"
+      :chatListTitle="chatListTitle"
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      @changeCurrentChat="handleChangeCurrentChat"
+      @messageListMountedUpdated="handleMessageListMountedUpdated"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
@@ -103,6 +109,9 @@
       :messageStyling="messageStyling"
       :onMessage="sendMessage"
       :onTyping="handleTyping"
+      :multipleChatsEnabled="multipleChatsEnabled"
+      :chatList="chatList"
+      @multipleChatsEnabledChange="handleMultipleChatsEnabledChange"
     />
     <Footer
       :chosenColor="chosenColor"
@@ -112,8 +121,7 @@
 </template>
 
 <script>
-import messageHistory from './messageHistory'
-import chatParticipants from './chatProfiles'
+import chatHistory from './messageHistory'
 import Header from './Header.vue'
 import Footer from './Footer.vue'
 import TestArea from './TestArea.vue'
@@ -128,11 +136,9 @@ export default {
   },
   data() {
     return {
-      participants: chatParticipants,
       titleImageUrl:
         'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
-      messageList: messageHistory,
-      newMessagesCount: 0,
+      chatHistory: chatHistory,
       isChatOpen: false,
       showTypingIndicator: '',
       colors: null,
@@ -140,38 +146,43 @@ export default {
       chosenColor: null,
       alwaysScrollToBottom: true,
       messageStyling: true,
-      userIsTyping: false
+      userIsTyping: false,
+      placeholder: "Write something...",
+      multipleChatsEnabled: true,
+      currentChatID: Object.keys(chatHistory)[0],
+      chatListTitle: "My chats",
     }
   },
   created() {
     this.setColor('blue')
   },
   methods: {
-    sendMessage(text) {
+    sendMessage(text, chatID) {
       if (text.length > 0) {
-        this.newMessagesCount = this.isChatOpen
-          ? this.newMessagesCount
-          : this.newMessagesCount + 1
         this.onMessageWasSent({
           author: 'support',
           type: 'text',
           id: Math.random(),
           data: { text }
-        })
+        }, chatID)
       }
     },
-    handleTyping(text) {
+    handleTyping(text, chatID) {
       this.showTypingIndicator =
-        text.length > 0
+        text.length > 0 && (chatID === undefined || this.currentChatID == chatID)
           ? this.participants[this.participants.length - 1].id
           : ''
     },
-    onMessageWasSent(message) {
-      this.messageList = [...this.messageList, Object.assign({}, message, {id: Math.random()})]
+    onMessageWasSent(message, chatID) {
+      const msg = Object.assign({}, message, {id: Math.random(), read: (message.author === 'me')})
+      if (chatID !== undefined) {
+        this.chatMessageList(chatID).push(msg)
+      } else {
+        this.messageList.push(msg)
+      }
     },
     openChat() {
       this.isChatOpen = true
-      this.newMessagesCount = 0
     },
     closeChat() {
       this.isChatOpen = false
@@ -204,12 +215,35 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    handleChangeCurrentChat(newCurrentChatID) {
+      this.showTypingIndicator = ''
+      this.currentChatID = newCurrentChatID
+    },
+    handleMultipleChatsEnabledChange(newMultipleChatsEnabled) {
+      this.multipleChatsEnabled = newMultipleChatsEnabled
+      this.currentChatID = Object.keys(this.chatHistory)[0]
+    },
+    handleMessageListMountedUpdated() {
+      if (this.isChatOpen) {
+        this.markCurrentChatRead()
+      }
+    },
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];
       msg.liked = !msg.liked;
       this.$set(this.messageList, m, msg);
-    }
+    },
+    markCurrentChatRead() {
+      this.messageList.forEach((msg) => {
+        if (!msg.read) {
+          msg.read = true
+        }
+      })
+    },
+    chatMessageList(chatID) {
+      return this.chatHistory[chatID]["messages"]
+    },
   },
   computed: {
     linkColor() {
@@ -219,10 +253,45 @@ export default {
     },
     backgroundColor() {
       return this.chosenColor === 'dark' ? this.colors.messageList.bg : '#fff'
+    },
+    messageList() {
+        return this.chatHistory[this.currentChatID]["messages"]
+    },
+    participants() {
+      return this.chatHistory[this.currentChatID]["participants"]
+    },
+    chatList() {
+      var chats = []
+      Object.entries(this.chatHistory).forEach(([chatKey, chat]) => {
+        var unreadCount = 0
+        chat.messages.forEach((msg) => {
+          if (!msg.read) {
+            unreadCount++
+          }
+        })
+        chats.push(
+          {
+            id: chatKey,
+            name: chat.name,
+            imageUrl: chat.imageUrl,
+            unreadCount: unreadCount
+          }
+        )
+      })
+      return chats
+    },
+    newMessagesCount() {
+      var totalUnreadCount = 0
+      this.chatList.forEach((chat) => {
+        totalUnreadCount += chat.unreadCount
+      })
+      return totalUnreadCount
     }
   },
   mounted(){
-    this.messageList.forEach(x=>x.liked = false);
+    Object.entries(this.chatHistory).forEach(([_, chat]) => {
+      chat.messages.forEach(msg => msg.liked = false)
+    })
   }
 }
 </script>
diff --git a/demo/src/TestArea.vue b/demo/src/TestArea.vue
index 245ba0b6..04f45571 100644
--- a/demo/src/TestArea.vue
+++ b/demo/src/TestArea.vue
@@ -7,6 +7,16 @@
     <form class="demo-test-area" @submit.prevent="_handleSubmit" @keyup="_handleTyping">
       <div class="demo-test-area--preamble">
         <p>Test the chat window by sending a message:</p>
+        <p class="text-center messageStyling">
+          Multiple chat groups?
+          <input :checked="multipleChatsEnabled" type="checkbox" @change.prevent="_multipleChatsEnabledChanged">
+        </p>
+        <p v-if="multipleChatsEnabled">
+          To:
+          <select name="chat" id="id" v-model="chatID">
+            <option v-for="chat in chatList" :key="chat.id" :value="chat.id">{{ chat.name }}</option>
+          </select>
+        </p>
         <p v-if="userIsTyping">User is typing...</p>
       </div>
       <textarea ref="textArea" class="demo-test-area--text" placeholder="Write a test message...." :style="textareaStyle" />
@@ -46,21 +56,34 @@ export default {
     messageStyling: {
       type: Boolean,
       required: true
+    },
+    chatList: {
+      type: Array,
+      required: true
+    },
+    multipleChatsEnabled: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
     return {
-      userIsTyping: false
+      userIsTyping: false,
+      chatID: this.chatList[0].id
     }
   },
   methods: {
     _handleSubmit() {
-      this.onMessage(this.$refs.textArea.value)
+      this.onMessage(this.$refs.textArea.value, this.chatID)
       this.$refs.textArea.value = ''
-      this.onTyping('')
+      this.onTyping('', this.chatID)
     },
     _handleTyping() {
-      this.onTyping(this.$refs.textArea.value)
+      this.onTyping(this.$refs.textArea.value, this.chatID)
+    },
+    _multipleChatsEnabledChanged(e) {
+      this.chatID = this.chatList[0].id
+      this.$emit("multipleChatsEnabledChange", e.srcElement.checked)
     }
   },
   computed: {
diff --git a/demo/src/chatProfiles.js b/demo/src/chatProfiles.js
deleted file mode 100644
index 0684851a..00000000
--- a/demo/src/chatProfiles.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default [
-  {
-    id: 'mattmezza',
-    name: 'Matteo',
-    imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
-  },
-  {
-    id: 'support',
-    name: 'Support',
-    imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
-  }
-]
diff --git a/demo/src/colors.js b/demo/src/colors.js
index 2f545cbb..b0336c4e 100644
--- a/demo/src/colors.js
+++ b/demo/src/colors.js
@@ -25,6 +25,14 @@ export default {
     userList: {
       bg: '#fff',
       text: '#212121'
+    },
+    chatList: {
+      bg: '#fff',
+      text: '#212121'
+    },
+    chatListBadge: {
+      bg: '#D32F2F',
+      text: '#fff'
     }
   },
   green: {
@@ -53,7 +61,15 @@ export default {
     userList: {
       bg: '#fff',
       text: '#212121'
-    }
+    },
+    chatList: {
+      bg: '#fff',
+      text: '#212121'
+    },
+    chatListBadge: {
+      bg: '#388E3C',
+      text: '#fff'
+    },
   },
   blue: {
     header: {
@@ -81,7 +97,15 @@ export default {
     userList: {
       bg: '#fff',
       text: '#212121'
-    }
+    },
+    chatList: {
+      bg: '#fff',
+      text: '#212121'
+    },
+    chatListBadge: {
+      bg: '#4e8cff',
+      text: '#ffffff'
+    },
   },
   dark: {
     header: {
@@ -109,6 +133,14 @@ export default {
     userList: {
       bg: '#2c3e50',
       text: '#ecf0f1'
+    },
+    chatList: {
+      bg: '#2c3e50',
+      text: '#ecf0f1'
+    },
+    chatListBadge: {
+      bg: '#95a5a6',
+      text: '#ecf0f1'
     }
   }
 }
diff --git a/demo/src/messageHistory.js b/demo/src/messageHistory.js
index cbdabb16..7551d967 100644
--- a/demo/src/messageHistory.js
+++ b/demo/src/messageHistory.js
@@ -1,25 +1,46 @@
-export default [
-  { type: 'text', author: `me`, id: 0, data: { text: `Why don't they have salsa on the table?` } },
-  { type: 'text', author: `mattmezza`, id: 1, data: { text: `What do you need salsa for?` } },
-  { type: 'text', author: `me`, id: 2, data: { text: `Salsa is now the number one condiment in America.` } },
-  { type: 'text', author: `mattmezza`, id: 3, data: { text: `You know why? Because people like to say 'salsa.' 'Excuse me, do you have salsa?' 'We need more salsa.' 'Where is the salsa? No salsa?'` } },
-  { type: 'text', author: `me`, id: 4, data: { text: `You know it must be impossible for a Spanish person to order seltzer and not get salsa. 'I wanted seltzer, not salsa.'` } },
-  { type: 'text', author: `mattmezza`, id: 5, data: { text: `Don't you know the difference between seltzer and salsa?? You have the seltezer after the salsa!` } },
-  { type: 'text', author: `me`, id: 6, data: { text: `See, this should be a show. This is the show. ` } },
-  { type: 'text', author: `mattmezza`, id: 7, data: { text: `What?` } },
-  { type: 'text', author: `me`, id: 8, data: { text: `This. Just talking.` } },
-  { type: 'text', author: `mattmezza`, id: 9, data: { text: `Yeah, right.` } },
-  { type: 'text', author: `me`, id: 10, data: { text: `I'm really serious. I think that's a good idea. ` } },
-  { type: 'text', author: `mattmezza`, id: 11, data: { text: `Just talking? Well what's the show about?` } },
-  { type: 'text', author: `me`, id: 12, data: { text: `It's about nothing.` } },
-  { type: 'text', author: `mattmezza`, id: 100, data: { text: `No story?` } },
-  { type: 'system', id: 13, data: { text: 'You have been transferred to another operator', meta: '04-07-2018 15:57' } },
-  { type: 'file', author: `support`, id: 14, data: { text: `No forget the story. `, file: { name: 'awesome', url: 'https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif' } } },
-  { type: 'file', author: `me`, id: 15, data: { text: `What about this one instead?? `, file: { url: 'http://www.quickmeme.com/img/2d/2d95cc80f9a2a2578a8f632eebecddcc1c12e5b08ab85f81a5d401670d5f36c1.jpg' }, meta: '✓✓ Read' } },
-  { type: 'text', author: `support`, id: 16, data: { text: `You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. ` } },
-  { type: 'emoji', author: `me`, id: 17, data: { emoji: `😋` } },
-  { type: 'text', author: `me`, id: 18, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
-  { type: 'text', author: `me`, id: 19, data: { text: `...or not?`, meta: '✓ Delivered' } },
-  { type: 'system', id: 20, data: { text: 'User changed security key', meta: '04-08-2018 15:57' } },
-  { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."] }
-]
+export default {
+  "1": {
+    name: 'Matteo + support',
+    imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4',
+    participants: [
+      { id: 'mattmezza', name: 'Matteo', imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4' },
+      { id: 'support', name: 'Support', imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4' }
+    ],
+    messages: [
+      { type: 'text', author: `me`, id: 0, data: { text: `Why don't they have salsa on the table?` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 1, data: { text: `What do you need salsa for?` }, read: true },
+      { type: 'text', author: `me`, id: 2, data: { text: `Salsa is now the number one condiment in America.` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 3, data: { text: `You know why? Because people like to say 'salsa.' 'Excuse me, do you have salsa?' 'We need more salsa.' 'Where is the salsa? No salsa?'` }, read: true },
+      { type: 'text', author: `me`, id: 4, data: { text: `You know it must be impossible for a Spanish person to order seltzer and not get salsa. 'I wanted seltzer, not salsa.'` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 5, data: { text: `Don't you know the difference between seltzer and salsa?? You have the seltezer after the salsa!` }, read: true },
+      { type: 'text', author: `me`, id: 6, data: { text: `See, this should be a show. This is the show. ` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 7, data: { text: `What?` }, read: true },
+      { type: 'text', author: `me`, id: 8, data: { text: `This. Just talking.` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 9, data: { text: `Yeah, right.` }, read: true },
+      { type: 'text', author: `me`, id: 10, data: { text: `I'm really serious. I think that's a good idea. ` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 11, data: { text: `Just talking? Well what's the show about?` }, read: true },
+      { type: 'text', author: `me`, id: 12, data: { text: `It's about nothing.` }, read: true },
+      { type: 'text', author: `mattmezza`, id: 100, data: { text: `No story?` }, read: true },
+      { type: 'system', id: 13, data: { text: 'You have been transferred to another operator', meta: '04-07-2018 15:57' }, read: true },
+      { type: 'file', author: `support`, id: 14, data: { text: `No forget the story. `, file: { name: 'awesome', url: 'https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif' }, read: true }, read: true },
+      { type: 'file', author: `me`, id: 15, data: { text: `What about this one instead?? `, file: { url: 'http://www.quickmeme.com/img/2d/2d95cc80f9a2a2578a8f632eebecddcc1c12e5b08ab85f81a5d401670d5f36c1.jpg' }, meta: '✓✓ Read' }, read: true },
+      { type: 'text', author: `support`, id: 16, data: { text: `You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. You've got to have a story. ` }, read: false },
+      { type: 'emoji', author: `me`, id: 17, data: { emoji: `😋` }, read: true },
+      { type: 'text', author: `me`, id: 18, data: { text: `Do you read me...`, meta: '✓✓ Read' }, read: true },
+      { type: 'text', author: `me`, id: 19, data: { text: `...or not?`, meta: '✓ Delivered' }, read: true },
+      { type: 'system', id: 20, data: { text: 'User changed security key', meta: '04-08-2018 15:57' }, read: false },
+      { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."], read: false }
+    ]
+  },
+  "2": {
+    name: 'Bob',
+    imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4',
+    participants: [
+      { id: 'bob', name: 'Bob', imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4' }
+    ],
+    messages: [
+      { type: 'text', author: `me`, id: 0, data: { text: `Why don't they have salsa on the table?` }, read: true },
+      { type: 'text', author: `bob`, id: 1, data: { text: `What do you need salsa for?` }, read: false }
+    ]
+  }
+}

From c45b282631a35e8ba1438b815109286d27bdfd61 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sun, 6 Sep 2020 09:08:52 -0600
Subject: [PATCH 05/32] Fixed bugs due to v-on='' by re-emitting events on
 every component.

---
 src/ChatWindow.vue | 10 ++++++++--
 src/Launcher.vue   |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 56456bd9..81737906 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -16,7 +16,13 @@
       </template>
     </Header>
     <UserList v-if="showingUserList" :colors="colors" :participants="participants" />
-    <ChatList v-if="showingChatList" :colors="colors" :chatList="chatList" @showMessageList="handleShowMessageList" v-on="$listeners"/>
+    <ChatList
+      v-if="showingChatList"
+      :colors="colors"
+      :chatList="chatList"
+      @changeCurrentChat="(chatID) => { this.$emit('changeCurrentChat', chatID) }"
+      @showMessageList="handleShowMessageList"
+      />
     <MessageList
       v-if="showingMessageList"
       :messages="messages"
@@ -31,7 +37,7 @@
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
-      v-on="$listeners"
+      @messageListMountedUpdated="$emit('messageListMountedUpdated')"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
diff --git a/src/Launcher.vue b/src/Launcher.vue
index e909218e..18ca4b77 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -40,7 +40,8 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
-      v-on="$listeners"
+      @changeCurrentChat="(chatID) => { this.$emit('changeCurrentChat', chatID) }"
+      @messageListMountedUpdated="$emit('messageListMountedUpdated')"
     >
       <template v-slot:header>
         <slot name="header"> </slot>

From 6e5aa75fa34763606570354a7d1cad0410060229 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Mon, 7 Sep 2020 15:23:30 -0600
Subject: [PATCH 06/32] Fixed text alignment in ChatList and UserList.

---
 src/ChatList.vue | 1 +
 src/UserList.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index afcd7406..17f4d238 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -59,6 +59,7 @@ export default {
 .chat-element {
   font-size: 20px;
   vertical-align: middle;
+  text-align: left;
 }
 .chat-badge {
   font-size: 17px;
diff --git a/src/UserList.vue b/src/UserList.vue
index bacb4825..92ecdfe0 100644
--- a/src/UserList.vue
+++ b/src/UserList.vue
@@ -56,5 +56,6 @@ export default {
 .user-element {
   font-size: 20px;
   vertical-align: middle;
+  text-align: left;
 }
 </style>

From 8825474fea586d0601d1dcf4c4b07ba18dc1d086 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Tue, 15 Sep 2020 17:03:40 -0600
Subject: [PATCH 07/32] Added ability to specify user ID in chat json instead
 of 'me'.

---
 demo/src/App.vue             | 24 ++++++++++++++++++------
 src/ChatWindow.vue           |  6 ++++++
 src/Header.vue               |  1 +
 src/Launcher.vue             |  5 +++++
 src/Message.vue              | 13 +++++++++----
 src/MessageList.vue          |  6 ++++++
 src/UserInput.vue            | 17 +++++++++++------
 src/messages/TextMessage.vue |  6 +++++-
 8 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 4a24f596..5cd78775 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -147,10 +147,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() {
@@ -174,7 +174,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 {
@@ -242,7 +242,11 @@ export default {
       })
     },
     chatMessageList(chatID) {
-      return this.chatHistory[chatID]["messages"]
+      const chat = this.chatHistory[chatID];
+      if (chat === undefined) {
+        return [];
+      }
+      return chat["messages"];
     },
   },
   computed: {
@@ -255,10 +259,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 = []
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 81737906..9bb02df7 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -35,6 +35,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       :message-styling="messageStyling"
+      :myId="myId"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
@@ -68,6 +69,7 @@
       :show-file="showFile"
       :placeholder="placeholder"
       :colors="colors"
+      :myId="myId"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
     />
@@ -175,6 +177,10 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   data() {
diff --git a/src/Header.vue b/src/Header.vue
index 2e9108ba..6a201127 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -86,6 +86,7 @@ export default {
   flex: 1;
   user-select: none;
   font-size: 20px;
+  text-align: left;
 }
 
 .sc-header--title.enabled {
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 18ca4b77..e2d6ece1 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -36,6 +36,7 @@
       :multiple-chats-enabled="multipleChatsEnabled"
       :chat-list="chatList"
       :chat-list-title="chatListTitle"
+      :myId="myId"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
@@ -246,6 +247,10 @@ export default {
     chatListTitle: {
       type: String,
       default: () => ''
+    },
+    myId: {
+      type: String,
+      default: 'me'
     }
   },
   computed: {
diff --git a/src/Message.vue b/src/Message.vue
index 652452d5..e0d0d8dd 100644
--- a/src/Message.vue
+++ b/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"
@@ -29,6 +29,7 @@
         :show-deletion="showDeletion"
         :show-confirmation-deletion="showConfirmationDeletion"
         :confirmation-deletion-message="confirmationDeletionMessage"
+        :myId="myId"
         @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
@@ -112,6 +113,10 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -122,7 +127,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 {
diff --git a/src/MessageList.vue b/src/MessageList.vue
index b4c14ac0..0e199150 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -16,6 +16,7 @@
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
+      :myId="myId"
       @remove="$emit('remove', message)"
     >
       <template v-slot:user-avatar="scopedProps">
@@ -49,6 +50,7 @@
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
+      :myId="myId"
     />
   </div>
 </template>
@@ -99,6 +101,10 @@ export default {
       required: true
     },
     confirmationDeletionMessage: {
+      type: String,
+      required: true,
+    },
+    myId: {
       type: String,
       required: true
     }
diff --git a/src/UserInput.vue b/src/UserInput.vue
index 55b11631..13382323 100644
--- a/src/UserInput.vue
+++ b/src/UserInput.vue
@@ -139,6 +139,10 @@ export default {
     colors: {
       type: Object,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -202,7 +206,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) {
@@ -228,7 +232,7 @@ export default {
         if (text && text.length > 0) {
           this._checkSubmitSuccess(
             this.onSubmit({
-              author: 'me',
+              author: this.myId,
               type: 'text',
               data: {text}
             })
@@ -240,7 +244,7 @@ export default {
       if (text && text.length > 0) {
         this._checkSubmitSuccess(
           this.onSubmit({
-            author: 'me',
+            author: this.myId,
             type: 'file',
             data: {text, file}
           })
@@ -248,7 +252,7 @@ export default {
       } else {
         this._checkSubmitSuccess(
           this.onSubmit({
-            author: 'me',
+            author: this.myId,
             type: 'file',
             data: {file}
           })
@@ -259,7 +263,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.state.editMessage.id,
           data: {text}
@@ -270,7 +274,7 @@ export default {
     _handleEmojiPicked(emoji) {
       this._checkSubmitSuccess(
         this.onSubmit({
-          author: 'me',
+          author: this.myId,
           type: 'emoji',
           data: {emoji}
         })
@@ -319,6 +323,7 @@ export default {
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  text-align: left;
 }
 
 .sc-user-input--text:empty:before {
diff --git a/src/messages/TextMessage.vue b/src/messages/TextMessage.vue
index 480fbc28..1540ab45 100644
--- a/src/messages/TextMessage.vue
+++ b/src/messages/TextMessage.vue
@@ -85,6 +85,10 @@ export default {
     confirmationDeletionMessage: {
       type: String,
       required: true
+    },
+    myId: {
+      type: String,
+      required: true
     }
   },
   computed: {
@@ -97,7 +101,7 @@ export default {
       })
     },
     me() {
-      return this.message.author === 'me'
+      return this.message.author === this.myId
     },
     isEditing() {
       return (store.state.editMessage && store.state.editMessage.id) === this.message.id

From 10bd969772febda59257a35f4913c5f13f63d86f Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 1 Oct 2020 21:15:38 -0600
Subject: [PATCH 08/32] Set header image size to be a constant independent of
 actual image size.

---
 src/Header.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Header.vue b/src/Header.vue
index 6a201127..87f94c47 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -78,6 +78,8 @@ export default {
   border-radius: 50%;
   align-self: center;
   padding: 10px;
+  width:34px;
+  height:34px;
 }
 
 .sc-header--title {

From 6c7bf402a6811865e918679117d8fcaf627aa614 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sat, 3 Oct 2020 21:14:05 -0600
Subject: [PATCH 09/32] Added 'box-sizing: border-box' to title image. Added
 chatListImageUrl param.

---
 demo/src/App.vue   | 8 ++++++--
 src/ChatWindow.vue | 8 ++++++--
 src/Header.vue     | 5 +++--
 src/Launcher.vue   | 5 +++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 5cd78775..d523f1e6 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -26,6 +26,7 @@
       :confirmationDeletionMessage="'Are you sure? (you can customize this message)'"
       :titleImageUrl="titleImageUrl"
       :disableUserListToggle="false"
+      :chatListImageUrl="chatListImageUrl"
       :placeholder="placeholder"
       :multipleChatsEnabled="multipleChatsEnabled"
       :chatList="chatList"
@@ -136,8 +137,8 @@ export default {
   },
   data() {
     return {
-      titleImageUrl:
-        'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
+      titleImageUrl: "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
+      chatListImageUrl: "https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png",
       chatHistory: chatHistory,
       isChatOpen: false,
       showTypingIndicator: '',
@@ -218,6 +219,9 @@ export default {
     handleChangeCurrentChat(newCurrentChatID) {
       this.showTypingIndicator = ''
       this.currentChatID = newCurrentChatID
+      const chat = this.chatHistory[this.currentChatID]
+      this.titleImageUrl = chat.imageUrl
+      this.title = chat.name
     },
     handleMultipleChatsEnabledChange(newMultipleChatsEnabled) {
       this.multipleChatsEnabled = newMultipleChatsEnabled
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 9bb02df7..32b6b388 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -4,7 +4,7 @@
       v-if="showHeader"
       :show-chat-list-button="multipleChatsEnabled && !showingChatList"
       :title="showingChatList ? chatListTitle : title"
-      :image-url="titleImageUrl"
+      :image-url="showingChatList ? chatListImageUrl : titleImageUrl"
       @close="$emit('close')"
       :colors="colors"
       :disable-user-list-toggle="disableUserListToggle || showingChatList"
@@ -20,7 +20,7 @@
       v-if="showingChatList"
       :colors="colors"
       :chatList="chatList"
-      @changeCurrentChat="(chatID) => { this.$emit('changeCurrentChat', chatID) }"
+      @changeCurrentChat="(chatID) => { $emit('changeCurrentChat', chatID) }"
       @showMessageList="handleShowMessageList"
       />
     <MessageList
@@ -130,6 +130,10 @@ export default {
       type: String,
       required: true
     },
+    chatListImageUrl: {
+      type: String,
+      default: ''
+    },
     onUserInputSubmit: {
       type: Function,
       required: true
diff --git a/src/Header.vue b/src/Header.vue
index 87f94c47..077dd812 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -78,8 +78,9 @@ export default {
   border-radius: 50%;
   align-self: center;
   padding: 10px;
-  width:34px;
-  height:34px;
+  box-sizing: border-box;
+  width:54px;
+  height:54px;
 }
 
 .sc-header--title {
diff --git a/src/Launcher.vue b/src/Launcher.vue
index e2d6ece1..c9bb4687 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -36,6 +36,7 @@
       :multiple-chats-enabled="multipleChatsEnabled"
       :chat-list="chatList"
       :chat-list-title="chatListTitle"
+      :chat-list-image-url="chatListImageUrl"
       :myId="myId"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
@@ -248,6 +249,10 @@ export default {
       type: String,
       default: () => ''
     },
+    chatListImageUrl: {
+      type: String,
+      default: () => ''
+    },
     myId: {
       type: String,
       default: 'me'

From ee8aa9ca06051ca2e16d16a154fbe5bbd4f15318 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sat, 3 Oct 2020 21:58:51 -0600
Subject: [PATCH 10/32] Removed margin-right for 'go back' button.

---
 src/Header.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Header.vue b/src/Header.vue
index 077dd812..ac6d2367 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -127,7 +127,6 @@ export default {
   width: 40px;
   align-self: center;
   height: 40px;
-  margin-right: 10px;
   box-sizing: border-box;
   cursor: pointer;
   border-radius: 5px;

From c08382cc3957fa14bcf5d1e9e1b2b1755c5ce968 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sun, 4 Oct 2020 13:30:07 -0600
Subject: [PATCH 11/32] Updated chat list layout.

---
 src/ChatList.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index 17f4d238..49750fad 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="chat-list" :style="{background: colors.chatList.bg}">
-    <table style="padding-top: 5px;" width=100%>
+    <table>
       <tbody>
         <tr v-for="chat in chatList" :key="chat.id" @click="openChat(chat.id)">
-          <td style="text-align: center;">
+          <td class="chat-img-td">
             <img :src="chat.imageUrl" class="chat-img" />
           </td>
-          <td class="chat-element" :style="{color: colors.chatList.text}">
+          <td class="chat-name-td" :style="{color: colors.chatList.text}">
             {{ chat.name }}
           </td>
           <td>
@@ -51,12 +51,17 @@ export default {
   padding-left: 5px;
   padding-top: 8px;
 }
+.chat-img-td {
+  text-align: center;
+  width: 50px;
+}
 .chat-img {
   border-radius: 50%;
   width: 50px;
   margin-right: 5px;
+  display: block;
 }
-.chat-element {
+.chat-name-td {
   font-size: 20px;
   vertical-align: middle;
   text-align: left;
@@ -64,4 +69,10 @@ export default {
 .chat-badge {
   font-size: 17px;
 }
+table {
+  width: 100%
+}
+tr>td {
+  padding-top: 5px;
+}
 </style>

From 9b930953c41c3168917b56b015aac3d49775a436 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sun, 4 Oct 2020 17:54:51 -0600
Subject: [PATCH 12/32] More changes to chat list layout.

---
 src/ChatList.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index 49750fad..54cd2fc4 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -9,7 +9,7 @@
           <td class="chat-name-td" :style="{color: colors.chatList.text}">
             {{ chat.name }}
           </td>
-          <td>
+          <td class="badge-td">
             <svg width="22px" height="22px" viewBox="0 0 32 32" class="bi bi-circle-fill chat-badge" :fill="chat.unreadCount ? colors.chatListBadge.bg : colors.chatList.bg" xmlns="http://www.w3.org/2000/svg">
               <circle cx="16" cy="16" r="16"/>
               <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" :fill="chat.unreadCount ? colors.chatListBadge.text : colors.chatList.bg">
@@ -46,31 +46,44 @@ export default {
 
 <style scoped>
 .chat-list {
+  box-sizing: border-box;
   height: 100%;
   overflow: auto;
-  padding-left: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   padding-top: 8px;
 }
 .chat-img-td {
+  box-sizing: border-box;
   text-align: center;
   width: 50px;
 }
 .chat-img {
+  box-sizing: border-box;
   border-radius: 50%;
   width: 50px;
   margin-right: 5px;
   display: block;
 }
 .chat-name-td {
+  box-sizing: border-box;
   font-size: 20px;
   vertical-align: middle;
   text-align: left;
 }
+.badge-td {
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+  width: 24px;
+}
 .chat-badge {
+  box-sizing: border-box;
   font-size: 17px;
 }
 table {
-  width: 100%
+  box-sizing: border-box;
+  width: 100%;
 }
 tr>td {
   padding-top: 5px;

From c7ed93ea6fa8463c0d678fb0b47a0afb62c8f553 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Sun, 4 Oct 2020 17:59:49 -0600
Subject: [PATCH 13/32] Added code-workspace files to gitignore.

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 1c751e9d..f697a247 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@ yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
+*.code-workspace
 *.suo
 *.ntvs*
 *.njsproj

From c573bdbd0824de536bb68f9fc8d1c7f3ba53da5a Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Tue, 6 Oct 2020 21:41:38 -0600
Subject: [PATCH 14/32] Set border-collapse: collapse.

---
 src/ChatList.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index 54cd2fc4..affff910 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -49,8 +49,8 @@ export default {
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 8px;
+  padding-right: 8px;
   padding-top: 8px;
 }
 .chat-img-td {
@@ -84,8 +84,9 @@ export default {
 table {
   box-sizing: border-box;
   width: 100%;
+  border-collapse: collapse;
 }
 tr>td {
-  padding-top: 5px;
+  padding-top: 7px;
 }
 </style>

From 38cd5620762a31e315bea53671b8adf97d18fce5 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Tue, 20 Oct 2020 11:58:34 -0600
Subject: [PATCH 15/32] Added cursor: pointer to chat list row. Replaced calls
 like () => '' with ''.

---
 src/ChatList.vue   |  5 ++++-
 src/ChatWindow.vue |  2 +-
 src/Launcher.vue   | 18 +++++++++---------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index affff910..ff480694 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -2,7 +2,7 @@
   <div class="chat-list" :style="{background: colors.chatList.bg}">
     <table>
       <tbody>
-        <tr v-for="chat in chatList" :key="chat.id" @click="openChat(chat.id)">
+        <tr class="chat-list-row" v-for="chat in chatList" :key="chat.id" @click="openChat(chat.id)">
           <td class="chat-img-td">
             <img :src="chat.imageUrl" class="chat-img" />
           </td>
@@ -53,6 +53,9 @@ export default {
   padding-right: 8px;
   padding-top: 8px;
 }
+.chat-list-row {
+  cursor: pointer;
+}
 .chat-img-td {
   box-sizing: border-box;
   text-align: center;
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 32b6b388..9cd50e57 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -193,7 +193,7 @@ export default {
     }
   },
   watch: {
-    multipleChatsEnabled: function(newMultipleChatsEnabled) {
+    multipleChatsEnabled(newMultipleChatsEnabled) {
       this.state = this.initialState()
     }
   },
diff --git a/src/Launcher.vue b/src/Launcher.vue
index c9bb4687..733d2233 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -153,11 +153,11 @@ export default {
     },
     title: {
       type: String,
-      default: () => ''
+      default: ''
     },
     titleImageUrl: {
       type: String,
-      default: () => ''
+      default: ''
     },
     onMessageWasSent: {
       type: Function,
@@ -165,11 +165,11 @@ export default {
     },
     messageList: {
       type: Array,
-      default: () => []
+      default: []
     },
     newMessagesCount: {
       type: Number,
-      default: () => 0
+      default: 0
     },
     placeholder: {
       type: String,
@@ -177,7 +177,7 @@ export default {
     },
     showTypingIndicator: {
       type: String,
-      default: () => ''
+      default: ''
     },
     colors: {
       type: Object,
@@ -227,11 +227,11 @@ export default {
     },
     alwaysScrollToBottom: {
       type: Boolean,
-      default: () => false
+      default: false
     },
     messageStyling: {
       type: Boolean,
-      default: () => false
+      default: false
     },
     disableUserListToggle: {
       type: Boolean,
@@ -247,11 +247,11 @@ export default {
     },
     chatListTitle: {
       type: String,
-      default: () => ''
+      default: ''
     },
     chatListImageUrl: {
       type: String,
-      default: () => ''
+      default: ''
     },
     myId: {
       type: String,

From 821ec66a3d2a74458a2390e7624e89b03adb4b91 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Wed, 21 Oct 2020 08:18:00 -0600
Subject: [PATCH 16/32] Fixed remaining rebase issues.

---
 src/ChatWindow.vue | 6 ++++--
 src/Header.vue     | 8 ++++++--
 src/Launcher.vue   | 1 -
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 9cd50e57..72cf82ec 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -7,7 +7,7 @@
       :image-url="showingChatList ? chatListImageUrl : titleImageUrl"
       @close="$emit('close')"
       :colors="colors"
-      :disable-user-list-toggle="disableUserListToggle || showingChatList"
+      :disable-list-toggle="disableUserListToggle || showingChatList"
       @toggleUserListMessageList="handleToggleUserListMessageList"
       @showChatList="handleShowChatList"
     >
@@ -77,6 +77,7 @@
 </template>
 
 <script>
+import {mapState} from './store/'
 import Header from './Header.vue'
 import MessageList from './MessageList.vue'
 import UserInput from './UserInput.vue'
@@ -211,7 +212,8 @@ export default {
     },
     showingMessageList() {
       return this.state == uiState.MESSAGE_LIST
-    }
+    },
+    ...mapState(['titleImageUrl', 'disableUserListToggle'])
   },
   methods: {
     handleToggleUserListMessageList() {
diff --git a/src/Header.vue b/src/Header.vue
index ac6d2367..47582815 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -7,7 +7,7 @@
     </div>
     <slot>
       <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" />
-      <div v-if="!disableUserListToggle" class="sc-header--title enabled" @click="toggleUserListMessageList">
+      <div v-if="!disableListToggle" class="sc-header--title enabled" @click="toggleUserListMessageList">
         {{ title }}
       </div>
       <div v-else class="sc-header--title">{{ title }}</div>
@@ -47,9 +47,13 @@ export default {
       type: Boolean,
       default: false
     },
+    disableListToggle: {
+      type: Boolean,
+      required: true
+    },
   },
   computed: {
-    ...mapState(['disableUserListToggle', 'titleImageUrl', 'showCloseButton'])
+    ...mapState(['titleImageUrl', 'showCloseButton'])
   },
   methods: {
     toggleUserListMessageList() {
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 733d2233..fb6badb6 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -14,7 +14,6 @@
       <img v-else class="sc-open-icon" :src="icons.open.img" :alt="icons.open.name" />
     </div>
     <ChatWindow
-      :multiple-chats="multipleChats"
       :message-list="messageList"
       :on-user-input-submit="onMessageWasSent"
       :participants="participants"

From fbe2cac229508246aadd7a0bec639ee9beec96e2 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 22 Oct 2020 10:59:36 -0600
Subject: [PATCH 17/32] Renamed ChatWindow.vue's var 'state' to 'windowState'.

---
 src/ChatWindow.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 72cf82ec..204de262 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -190,12 +190,12 @@ export default {
   },
   data() {
     return {
-      state: this.initialState()
+      windowState: this.initialState()
     }
   },
   watch: {
     multipleChatsEnabled(newMultipleChatsEnabled) {
-      this.state = this.initialState()
+      this.windowState = this.initialState()
     }
   },
   computed: {
@@ -205,25 +205,25 @@ export default {
       return messages
     },
     showingUserList() {
-      return this.state == uiState.USER_LIST
+      return this.windowState == uiState.USER_LIST
     },
     showingChatList() {
-      return this.state == uiState.CHAT_LIST
+      return this.windowState == uiState.CHAT_LIST
     },
     showingMessageList() {
-      return this.state == uiState.MESSAGE_LIST
+      return this.windowState == uiState.MESSAGE_LIST
     },
     ...mapState(['titleImageUrl', 'disableUserListToggle'])
   },
   methods: {
     handleToggleUserListMessageList() {
-      this.state = (this.state == uiState.USER_LIST) ? uiState.MESSAGE_LIST : uiState.USER_LIST
+      this.windowState = (this.windowState == uiState.USER_LIST) ? uiState.MESSAGE_LIST : uiState.USER_LIST
     },
     handleShowChatList() {
-      this.state = uiState.CHAT_LIST
+      this.windowState = uiState.CHAT_LIST
     },
     handleShowMessageList() {
-      this.state = uiState.MESSAGE_LIST
+      this.windowState = uiState.MESSAGE_LIST
     },
     getSuggestions() {
       return this.messages.length > 0 ? this.messages[this.messages.length - 1].suggestions : []

From 3d3531a2ee8dc33dab4a54161fa20642fb08f208 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 22 Oct 2020 16:52:21 -0600
Subject: [PATCH 18/32] Ran npm run lint and fixed all errors and warnings.

---
 src/ChatList.vue    | 32 +++++++++++++++++++++++++-------
 src/ChatWindow.vue  | 37 +++++++++++++++++++++----------------
 src/Header.vue      | 33 +++++++++++++++++++++++++--------
 src/Launcher.vue    | 14 +++++++++-----
 src/Message.vue     |  8 ++++----
 src/MessageList.vue |  8 ++++----
 6 files changed, 88 insertions(+), 44 deletions(-)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index ff480694..97f12aa2 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -2,7 +2,12 @@
   <div class="chat-list" :style="{background: colors.chatList.bg}">
     <table>
       <tbody>
-        <tr class="chat-list-row" v-for="chat in chatList" :key="chat.id" @click="openChat(chat.id)">
+        <tr
+          v-for="chat in chatList"
+          :key="chat.id"
+          class="chat-list-row"
+          @click="openChat(chat.id)"
+        >
           <td class="chat-img-td">
             <img :src="chat.imageUrl" class="chat-img" />
           </td>
@@ -10,9 +15,22 @@
             {{ chat.name }}
           </td>
           <td class="badge-td">
-            <svg width="22px" height="22px" viewBox="0 0 32 32" class="bi bi-circle-fill chat-badge" :fill="chat.unreadCount ? colors.chatListBadge.bg : colors.chatList.bg" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="16" cy="16" r="16"/>
-              <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" :fill="chat.unreadCount ? colors.chatListBadge.text : colors.chatList.bg">
+            <svg
+              width="22px"
+              height="22px"
+              viewBox="0 0 32 32"
+              class="bi bi-circle-fill chat-badge"
+              :fill="chat.unreadCount ? colors.chatListBadge.bg : colors.chatList.bg"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="16" cy="16" r="16" />
+              <text
+                x="50%"
+                y="55%"
+                dominant-baseline="middle"
+                text-anchor="middle"
+                :fill="chat.unreadCount ? colors.chatListBadge.text : colors.chatList.bg"
+              >
                 {{ chat.unreadCount }}
               </text>
             </svg>
@@ -28,12 +46,12 @@ export default {
   props: {
     chatList: {
       type: Array,
-      required: false
+      required: true
     },
     colors: {
       type: Object,
       required: true
-    },
+    }
   },
   methods: {
     openChat(chatID) {
@@ -89,7 +107,7 @@ table {
   width: 100%;
   border-collapse: collapse;
 }
-tr>td {
+tr > td {
   padding-top: 7px;
 }
 </style>
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 204de262..e304a3ba 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -5,9 +5,9 @@
       :show-chat-list-button="multipleChatsEnabled && !showingChatList"
       :title="showingChatList ? chatListTitle : title"
       :image-url="showingChatList ? chatListImageUrl : titleImageUrl"
-      @close="$emit('close')"
       :colors="colors"
       :disable-list-toggle="disableUserListToggle || showingChatList"
+      @close="$emit('close')"
       @toggleUserListMessageList="handleToggleUserListMessageList"
       @showChatList="handleShowChatList"
     >
@@ -19,10 +19,14 @@
     <ChatList
       v-if="showingChatList"
       :colors="colors"
-      :chatList="chatList"
-      @changeCurrentChat="(chatID) => { $emit('changeCurrentChat', chatID) }"
+      :chat-list="chatList"
+      @changeCurrentChat="
+        (chatID) => {
+          $emit('changeCurrentChat', chatID)
+        }
+      "
       @showMessageList="handleShowMessageList"
-      />
+    />
     <MessageList
       v-if="showingMessageList"
       :messages="messages"
@@ -35,7 +39,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       :message-styling="messageStyling"
-      :myId="myId"
+      :my-id="myId"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
@@ -69,7 +73,7 @@
       :show-file="showFile"
       :placeholder="placeholder"
       :colors="colors"
-      :myId="myId"
+      :my-id="myId"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
     />
@@ -85,9 +89,9 @@ import UserList from './UserList.vue'
 import ChatList from './ChatList.vue'
 
 const uiState = {
-    MESSAGE_LIST: 'message-list',
-    USER_LIST: 'user-list',
-    CHAT_LIST: 'chat-list'
+  MESSAGE_LIST: 'message-list',
+  USER_LIST: 'user-list',
+  CHAT_LIST: 'chat-list'
 }
 
 export default {
@@ -121,7 +125,7 @@ export default {
     },
     chatList: {
       type: Array,
-      required: false
+      required: true
     },
     chatListTitle: {
       type: String,
@@ -193,11 +197,6 @@ export default {
       windowState: this.initialState()
     }
   },
-  watch: {
-    multipleChatsEnabled(newMultipleChatsEnabled) {
-      this.windowState = this.initialState()
-    }
-  },
   computed: {
     messages() {
       let messages = this.messageList
@@ -215,9 +214,15 @@ export default {
     },
     ...mapState(['titleImageUrl', 'disableUserListToggle'])
   },
+  watch: {
+    multipleChatsEnabled(newMultipleChatsEnabled) {
+      this.windowState = this.initialState()
+    }
+  },
   methods: {
     handleToggleUserListMessageList() {
-      this.windowState = (this.windowState == uiState.USER_LIST) ? uiState.MESSAGE_LIST : uiState.USER_LIST
+      this.windowState =
+        this.windowState == uiState.USER_LIST ? uiState.MESSAGE_LIST : uiState.USER_LIST
     },
     handleShowChatList() {
       this.windowState = uiState.CHAT_LIST
diff --git a/src/Header.vue b/src/Header.vue
index 47582815..4040d578 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -1,13 +1,30 @@
 <template>
   <div class="sc-header" :style="{background: colors.header.bg, color: colors.header.text}">
-    <div v-if="showChatListButton" class="bi bi-chevron-left sc-header--chat-list-button" @click="showChatList">
-      <svg class="sc-header--svg-button" height="15px" width="15px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1">
-        <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"></path>
+    <div
+      v-if="showChatListButton"
+      class="bi bi-chevron-left sc-header--chat-list-button"
+      @click="showChatList"
+    >
+      <svg
+        class="sc-header--svg-button"
+        height="15px"
+        width="15px"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+      >
+        <path
+          d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
+        ></path>
       </svg>
     </div>
     <slot>
       <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" />
-      <div v-if="!disableListToggle" class="sc-header--title enabled" @click="toggleUserListMessageList">
+      <div
+        v-if="!disableListToggle"
+        class="sc-header--title enabled"
+        @click="toggleUserListMessageList"
+      >
         {{ title }}
       </div>
       <div v-else class="sc-header--title">{{ title }}</div>
@@ -50,7 +67,7 @@ export default {
     disableListToggle: {
       type: Boolean,
       required: true
-    },
+    }
   },
   computed: {
     ...mapState(['titleImageUrl', 'showCloseButton'])
@@ -83,8 +100,8 @@ export default {
   align-self: center;
   padding: 10px;
   box-sizing: border-box;
-  width:54px;
-  height:54px;
+  width: 54px;
+  height: 54px;
 }
 
 .sc-header--title {
@@ -146,7 +163,7 @@ export default {
 .sc-header--svg-button {
   margin: 0 auto;
   display: block;
-  fill: white
+  fill: white;
 }
 
 @media (max-width: 450px) {
diff --git a/src/Launcher.vue b/src/Launcher.vue
index fb6badb6..f7f72737 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -31,17 +31,21 @@
       :colors="colors"
       :always-scroll-to-bottom="alwaysScrollToBottom"
       :message-styling="messageStyling"
-      @close="close"
       :multiple-chats-enabled="multipleChatsEnabled"
       :chat-list="chatList"
       :chat-list-title="chatListTitle"
       :chat-list-image-url="chatListImageUrl"
-      :myId="myId"
+      :my-id="myId"
+      @close="close"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
-      @changeCurrentChat="(chatID) => { this.$emit('changeCurrentChat', chatID) }"
+      @changeCurrentChat="
+        (chatID) => {
+          this.$emit('changeCurrentChat', chatID)
+        }
+      "
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
     >
       <template v-slot:header>
@@ -164,7 +168,7 @@ export default {
     },
     messageList: {
       type: Array,
-      default: []
+      default: () => []
     },
     newMessagesCount: {
       type: Number,
@@ -242,7 +246,7 @@ export default {
     },
     chatList: {
       type: Array,
-      required: false
+      default: () => []
     },
     chatListTitle: {
       type: String,
diff --git a/src/Message.vue b/src/Message.vue
index e0d0d8dd..af7c599e 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -3,14 +3,14 @@
     <div
       class="sc-message--content"
       :class="{
-        sent: message.author === this.myId,
-        received: message.author !== this.myId && message.type !== 'system',
+        sent: message.author === myId,
+        received: message.author !== myId && message.type !== 'system',
         system: message.type === 'system'
       }"
     >
       <slot name="user-avatar" :message="message" :user="user">
         <div
-          v-if="message.type !== 'system' && authorName && authorName !== this.myId"
+          v-if="message.type !== 'system' && authorName && authorName !== myId"
           v-tooltip="authorName"
           :title="authorName"
           class="sc-message--avatar"
@@ -29,7 +29,7 @@
         :show-deletion="showDeletion"
         :show-confirmation-deletion="showConfirmationDeletion"
         :confirmation-deletion-message="confirmationDeletionMessage"
-        :myId="myId"
+        :my-id="myId"
         @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
diff --git a/src/MessageList.vue b/src/MessageList.vue
index 0e199150..ee3b6f7c 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -16,7 +16,7 @@
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
-      :myId="myId"
+      :my-id="myId"
       @remove="$emit('remove', message)"
     >
       <template v-slot:user-avatar="scopedProps">
@@ -50,7 +50,7 @@
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
-      :myId="myId"
+      :my-id="myId"
     />
   </div>
 </template>
@@ -102,7 +102,7 @@ export default {
     },
     confirmationDeletionMessage: {
       type: String,
-      required: true,
+      required: true
     },
     myId: {
       type: String,
@@ -143,7 +143,7 @@ export default {
       return profile || {imageUrl: '', name: ''}
     },
     onMessageListMountedUpdated() {
-      this.$emit("messageListMountedUpdated")
+      this.$emit('messageListMountedUpdated')
     }
   }
 }

From f70de300269d31c091f080a650987718949e51f2 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 22 Oct 2020 17:05:03 -0600
Subject: [PATCH 19/32] Changed access of object props from using subscripts to
 period.

---
 demo/src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index d523f1e6..45f1df61 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -250,7 +250,7 @@ export default {
       if (chat === undefined) {
         return [];
       }
-      return chat["messages"];
+      return chat.messages;
     },
   },
   computed: {
@@ -267,14 +267,14 @@ export default {
       if (chat === undefined) {
         return [];
       }
-      return chat["messages"];
+      return chat.messages;
     },
     participants() {
       const chat = this.chatHistory[this.currentChatID];
       if (chat === undefined) {
         return [];
       }
-      return chat["participants"];
+      return chat.participants;
     },
     chatList() {
       var chats = []

From 158450ab41e039b97621ea5225c96d4b6a8f45be Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 5 Nov 2020 11:02:30 -0700
Subject: [PATCH 20/32] Added events for clicks on headers and icons.

---
 demo/src/App.vue    | 13 +++++++++++++
 src/ChatWindow.vue  |  9 +++++++++
 src/Header.vue      |  9 +++++++--
 src/Launcher.vue    |  3 +++
 src/Message.vue     |  1 +
 src/MessageList.vue |  1 +
 6 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 45f1df61..a73b465b 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -36,6 +36,9 @@
       @remove="removeMessage"
       @changeCurrentChat="handleChangeCurrentChat"
       @messageListMountedUpdated="handleMessageListMountedUpdated"
+      @messageListHeaderTitleClicked="messageListHeaderTitleClicked"
+      @chatListHeaderTitleClicked="chatListHeaderTitleClicked"
+      @messageIconClicked="messageIconClicked"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
@@ -232,6 +235,16 @@ export default {
         this.markCurrentChatRead()
       }
     },
+    messageListHeaderTitleClicked() {
+      console.log("messageListHeaderTitleClicked")
+    },
+    chatListHeaderTitleClicked() {
+      console.log("chatListHeaderTitleClicked")
+    },
+    messageIconClicked(param) {
+      console.log("messageIconClicked param:")
+      console.log(param)
+    },
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index e304a3ba..9ede0597 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -10,6 +10,7 @@
       @close="$emit('close')"
       @toggleUserListMessageList="handleToggleUserListMessageList"
       @showChatList="handleShowChatList"
+      @headerTitleClicked="headerTitleClicked"
     >
       <template>
         <slot name="header"> </slot>
@@ -43,6 +44,7 @@
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
+      @messageIconClicked="$emit('messageIconClicked', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
@@ -230,6 +232,13 @@ export default {
     handleShowMessageList() {
       this.windowState = uiState.MESSAGE_LIST
     },
+    headerTitleClicked() {
+      if (this.showingMessageList) {
+        this.$emit('messageListHeaderTitleClicked')
+      } else if (this.showingChatList) {
+        this.$emit('chatListHeaderTitleClicked')
+      }
+    },
     getSuggestions() {
       return this.messages.length > 0 ? this.messages[this.messages.length - 1].suggestions : []
     },
diff --git a/src/Header.vue b/src/Header.vue
index 4040d578..1bd3a0c5 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -19,7 +19,7 @@
       </svg>
     </div>
     <slot>
-      <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" />
+      <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" @click="$emit('headerTitleClicked')" />
       <div
         v-if="!disableListToggle"
         class="sc-header--title enabled"
@@ -27,7 +27,12 @@
       >
         {{ title }}
       </div>
-      <div v-else class="sc-header--title">{{ title }}</div>
+      <div
+        v-else class="sc-header--title"
+        @click="$emit('headerTitleClicked')"
+      >
+        {{ title }}
+      </div>
     </slot>
     <div v-if="showCloseButton" class="sc-header--close-button" @click="$emit('close')">
       <img :src="icons.close.img" :alt="icons.close.name" />
diff --git a/src/Launcher.vue b/src/Launcher.vue
index f7f72737..62ae5ad6 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -47,6 +47,9 @@
         }
       "
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
+      @messageListHeaderTitleClicked="$emit('messageListHeaderTitleClicked')"
+      @chatListHeaderTitleClicked="$emit('chatListHeaderTitleClicked')"
+      @messageIconClicked="$emit('messageIconClicked', $event)"
     >
       <template v-slot:header>
         <slot name="header"> </slot>
diff --git a/src/Message.vue b/src/Message.vue
index af7c599e..5accef41 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -17,6 +17,7 @@
           :style="{
             backgroundImage: `url(${chatImageUrl})`
           }"
+          @click="$emit('messageIconClicked', user)"
         ></div>
       </slot>
 
diff --git a/src/MessageList.vue b/src/MessageList.vue
index ee3b6f7c..628d9fa6 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -18,6 +18,7 @@
       :confirmation-deletion-message="confirmationDeletionMessage"
       :my-id="myId"
       @remove="$emit('remove', message)"
+      @messageIconClicked="$emit('messageIconClicked', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>

From a060084c795ed6cd17c9e07fbfb02f5f1f335741 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 5 Nov 2020 11:07:51 -0700
Subject: [PATCH 21/32] Ran linter.

---
 src/Header.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Header.vue b/src/Header.vue
index 1bd3a0c5..ce2bb9d5 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -19,7 +19,13 @@
       </svg>
     </div>
     <slot>
-      <img v-if="titleImageUrl" class="sc-header--img" :src="titleImageUrl" alt="" @click="$emit('headerTitleClicked')" />
+      <img
+        v-if="titleImageUrl"
+        class="sc-header--img"
+        :src="titleImageUrl"
+        alt=""
+        @click="$emit('headerTitleClicked')"
+      />
       <div
         v-if="!disableListToggle"
         class="sc-header--title enabled"
@@ -27,10 +33,7 @@
       >
         {{ title }}
       </div>
-      <div
-        v-else class="sc-header--title"
-        @click="$emit('headerTitleClicked')"
-      >
+      <div v-else class="sc-header--title" @click="$emit('headerTitleClicked')">
         {{ title }}
       </div>
     </slot>

From 931640f51dcf146e18add79ca5445b1cefe150de Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 5 Nov 2020 11:37:10 -0700
Subject: [PATCH 22/32] Renamed param to user.

---
 demo/src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index a73b465b..5b40d62f 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -241,9 +241,9 @@ export default {
     chatListHeaderTitleClicked() {
       console.log("chatListHeaderTitleClicked")
     },
-    messageIconClicked(param) {
-      console.log("messageIconClicked param:")
-      console.log(param)
+    messageIconClicked(user) {
+      console.log("messageIconClicked user:")
+      console.log(user)
     },
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);

From fb59708ef2088cc6b130525af9af5ff5d2cbb634 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 5 Nov 2020 14:09:19 -0700
Subject: [PATCH 23/32] Handled case when currently open chat is no longer
 available.

---
 src/ChatWindow.vue | 11 +++++++----
 src/Launcher.vue   |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 9ede0597..4cfabd76 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -147,7 +147,7 @@ export default {
     },
     messageList: {
       type: Array,
-      default: () => []
+      default: undefined
     },
     isOpen: {
       type: Boolean,
@@ -201,9 +201,7 @@ export default {
   },
   computed: {
     messages() {
-      let messages = this.messageList
-
-      return messages
+      return this.messageList || []
     },
     showingUserList() {
       return this.windowState == uiState.USER_LIST
@@ -219,6 +217,11 @@ export default {
   watch: {
     multipleChatsEnabled(newMultipleChatsEnabled) {
       this.windowState = this.initialState()
+    },
+    messageList(newValue) {
+      if (newValue === undefined && this.multipleChatsEnabled) {
+        this.handleShowChatList()
+      }
     }
   },
   methods: {
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 62ae5ad6..1d28afc9 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -171,7 +171,7 @@ export default {
     },
     messageList: {
       type: Array,
-      default: () => []
+      default: undefined
     },
     newMessagesCount: {
       type: Number,

From 16aa042ff3055e5acf07b6d01cb9d13fa51034ef Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 5 Nov 2020 14:38:48 -0700
Subject: [PATCH 24/32] Fixed demo app to show developers how to handle chat
 room that is no longer available.

---
 demo/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 5b40d62f..b904a265 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -261,7 +261,7 @@ export default {
     chatMessageList(chatID) {
       const chat = this.chatHistory[chatID];
       if (chat === undefined) {
-        return [];
+        return undefined;
       }
       return chat.messages;
     },

From 968f543763fde73f95815244699091097a3db8fa Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 5 Nov 2020 14:44:13 -0700
Subject: [PATCH 25/32] Fixed (again) demo app to show developers how to handle
 chat room that is no longer available.

---
 demo/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index b904a265..768c9b4b 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -278,7 +278,7 @@ export default {
     messageList() {
       const chat = this.chatHistory[this.currentChatID];
       if (chat === undefined) {
-        return [];
+        return undefined;
       }
       return chat.messages;
     },

From 00454fe3bc53c82fd6335e9fe6091583e7a9c7c3 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Thu, 19 Nov 2020 14:23:20 -0700
Subject: [PATCH 26/32] Added props to show  header and message icon clickable.

---
 demo/src/App.vue    |  3 +++
 src/ChatWindow.vue  | 17 +++++++++++++++++
 src/Header.vue      | 18 ++++++++++++++++--
 src/Launcher.vue    | 15 +++++++++++++++
 src/Message.vue     | 11 ++++++++++-
 src/MessageList.vue |  6 ++++++
 6 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 768c9b4b..30164d64 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -31,6 +31,9 @@
       :multipleChatsEnabled="multipleChatsEnabled"
       :chatList="chatList"
       :chatListTitle="chatListTitle"
+      :messageListHeaderTitleClickable="false"
+      :chatListHeaderTitleClickable="true"
+      :messageIconClickable="true"
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 4cfabd76..7671ee9f 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -7,6 +7,10 @@
       :image-url="showingChatList ? chatListImageUrl : titleImageUrl"
       :colors="colors"
       :disable-list-toggle="disableUserListToggle || showingChatList"
+      :header-title-clickable="
+        (showingMessageList && messageListHeaderTitleClickable) ||
+        (showingChatList && chatListHeaderTitleClickable)
+      "
       @close="$emit('close')"
       @toggleUserListMessageList="handleToggleUserListMessageList"
       @showChatList="handleShowChatList"
@@ -41,6 +45,7 @@
       :confirmation-deletion-message="confirmationDeletionMessage"
       :message-styling="messageStyling"
       :my-id="myId"
+      :message-icon-clickable="messageIconClickable"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
       @messageListMountedUpdated="$emit('messageListMountedUpdated')"
@@ -192,6 +197,18 @@ export default {
     myId: {
       type: String,
       required: true
+    },
+    messageListHeaderTitleClickable: {
+      type: Boolean,
+      required: true
+    },
+    chatListHeaderTitleClickable: {
+      type: Boolean,
+      required: true
+    },
+    messageIconClickable: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
diff --git a/src/Header.vue b/src/Header.vue
index ce2bb9d5..8da3d902 100644
--- a/src/Header.vue
+++ b/src/Header.vue
@@ -22,9 +22,10 @@
       <img
         v-if="titleImageUrl"
         class="sc-header--img"
+        :class="{clickable: headerTitleClickable}"
         :src="titleImageUrl"
         alt=""
-        @click="$emit('headerTitleClicked')"
+        @click="headerTitleClickable ? $emit('headerTitleClicked') : null"
       />
       <div
         v-if="!disableListToggle"
@@ -33,7 +34,12 @@
       >
         {{ title }}
       </div>
-      <div v-else class="sc-header--title" @click="$emit('headerTitleClicked')">
+      <div
+        v-else
+        class="sc-header--title"
+        :class="{clickable: headerTitleClickable}"
+        @click="headerTitleClickable ? $emit('headerTitleClicked') : null"
+      >
         {{ title }}
       </div>
     </slot>
@@ -75,6 +81,10 @@ export default {
     disableListToggle: {
       type: Boolean,
       required: true
+    },
+    headerTitleClickable: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {
@@ -174,6 +184,10 @@ export default {
   fill: white;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 @media (max-width: 450px) {
   .sc-header {
     border-radius: 0px;
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 1d28afc9..8d0c9ab6 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -36,6 +36,9 @@
       :chat-list-title="chatListTitle"
       :chat-list-image-url="chatListImageUrl"
       :my-id="myId"
+      :message-list-header-title-clickable="messageListHeaderTitleClickable"
+      :chat-list-header-title-clickable="chatListHeaderTitleClickable"
+      :message-icon-clickable="messageIconClickable"
       @close="close"
       @scrollToTop="$emit('scrollToTop')"
       @onType="$emit('onType')"
@@ -262,6 +265,18 @@ export default {
     myId: {
       type: String,
       default: 'me'
+    },
+    messageListHeaderTitleClickable: {
+      type: Boolean,
+      default: false
+    },
+    chatListHeaderTitleClickable: {
+      type: Boolean,
+      default: false
+    },
+    messageIconClickable: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
diff --git a/src/Message.vue b/src/Message.vue
index 5accef41..aeca4988 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -14,10 +14,11 @@
           v-tooltip="authorName"
           :title="authorName"
           class="sc-message--avatar"
+          :class="{clickable: messageIconClickable}"
           :style="{
             backgroundImage: `url(${chatImageUrl})`
           }"
-          @click="$emit('messageIconClicked', user)"
+          @click="messageIconClickable ? $emit('messageIconClicked', user) : null"
         ></div>
       </slot>
 
@@ -118,6 +119,10 @@ export default {
     myId: {
       type: String,
       required: true
+    },
+    messageIconClickable: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {
@@ -371,4 +376,8 @@ export default {
     }
   }
 }
+
+.clickable {
+  cursor: pointer;
+}
 </style>
diff --git a/src/MessageList.vue b/src/MessageList.vue
index 628d9fa6..876f0204 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -17,6 +17,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       :my-id="myId"
+      :message-icon-clickable="messageIconClickable"
       @remove="$emit('remove', message)"
       @messageIconClicked="$emit('messageIconClicked', $event)"
     >
@@ -52,6 +53,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       :my-id="myId"
+      :message-icon-clickable="false"
     />
   </div>
 </template>
@@ -108,6 +110,10 @@ export default {
     myId: {
       type: String,
       required: true
+    },
+    messageIconClickable: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {

From c92b3c10863943649edb3b9369b73e567a639d5b Mon Sep 17 00:00:00 2001
From: Silas Ribas Martins <silasrm@gmail.com>
Date: Mon, 30 Nov 2020 09:22:40 -0300
Subject: [PATCH 27/32] Add support to toolbox on Emoji and File message type.

---
 src/ChatWindow.vue            |   8 ++
 src/Launcher.vue              |   8 ++
 src/Message.vue               | 148 +++++++++++++++++++++++++---------
 src/MessageList.vue           |   8 ++
 src/messages/EmojiMessage.vue |  75 ++++++++++++++++-
 src/messages/FileMessage.vue  |  93 ++++++++++++++++++---
 src/messages/TextMessage.vue  |  43 +++++-----
 7 files changed, 306 insertions(+), 77 deletions(-)

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 7671ee9f..ae815f7b 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -71,6 +71,14 @@
         <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
         </slot>
       </template>
+      <template v-slot:file-message-toolbox="scopedProps">
+        <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
+      <template v-slot:emoji-message-toolbox="scopedProps">
+        <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
     </MessageList>
     <UserInput
       v-if="showingMessageList"
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 8d0c9ab6..7bfe81ee 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -77,6 +77,14 @@
         <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
         </slot>
       </template>
+      <template v-slot:file-message-toolbox="scopedProps">
+        <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
+      <template v-slot:emoji-message-toolbox="scopedProps">
+        <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
     </ChatWindow>
   </div>
 </template>
diff --git a/src/Message.vue b/src/Message.vue
index aeca4988..e7c32057 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -1,8 +1,8 @@
 <template>
   <div :id="message.id" class="sc-message">
     <div
-      class="sc-message--content"
-      :class="{
+        class="sc-message--content"
+        :class="{
         sent: message.author === myId,
         received: message.author !== myId && message.type !== 'system',
         system: message.type === 'system'
@@ -10,37 +10,37 @@
     >
       <slot name="user-avatar" :message="message" :user="user">
         <div
-          v-if="message.type !== 'system' && authorName && authorName !== myId"
-          v-tooltip="authorName"
-          :title="authorName"
-          class="sc-message--avatar"
-          :class="{clickable: messageIconClickable}"
-          :style="{
+            v-if="message.type !== 'system' && authorName && authorName !== myId"
+            v-tooltip="authorName"
+            :title="authorName"
+            class="sc-message--avatar"
+            :class="{clickable: messageIconClickable}"
+            :style="{
             backgroundImage: `url(${chatImageUrl})`
           }"
-          @click="messageIconClickable ? $emit('messageIconClicked', user) : null"
+            @click="messageIconClickable ? $emit('messageIconClicked', user) : null"
         ></div>
       </slot>
 
       <TextMessage
-        v-if="message.type === 'text'"
-        :message="message"
-        :message-colors="messageColors"
-        :message-styling="messageStyling"
-        :show-edition="showEdition"
-        :show-deletion="showDeletion"
-        :show-confirmation-deletion="showConfirmationDeletion"
-        :confirmation-deletion-message="confirmationDeletionMessage"
-        :my-id="myId"
-        @remove="$emit('remove')"
+          v-if="message.type === 'text'"
+          :message="message"
+          :message-colors="messageColors"
+          :message-styling="messageStyling"
+          :show-edition="showEdition"
+          :show-deletion="showDeletion"
+          :show-confirmation-deletion="showConfirmationDeletion"
+          :confirmation-deletion-message="confirmationDeletionMessage"
+          :my-id="myId"
+          @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
           <slot
-            name="text-message-body"
-            :message="scopedProps.message"
-            :messageText="scopedProps.messageText"
-            :messageColors="scopedProps.messageColors"
-            :me="scopedProps.me"
+              name="text-message-body"
+              :message="scopedProps.message"
+              :messageText="scopedProps.messageText"
+              :messageColors="scopedProps.messageColors"
+              :me="scopedProps.me"
           >
           </slot>
         </template>
@@ -49,19 +49,62 @@
           </slot>
         </template>
       </TextMessage>
-      <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
+      <EmojiMessage
+          v-else-if="message.type === 'emoji'"
+          :message="message"
+          :message-colors="messageColors"
+          :message-styling="messageStyling"
+          :show-edition="showEdition"
+          :show-deletion="showDeletion"
+          :show-confirmation-deletion="showConfirmationDeletion"
+          :confirmation-deletion-message="confirmationDeletionMessage"
+          :my-id="myId"
+          @remove="$emit('remove')">
+        <template v-slot:default="scopedProps">
+          <slot
+              name="emoji-message-body"
+              :message="scopedProps.message"
+              :messageColors="scopedProps.messageColors"
+              :me="scopedProps.me"
+          >
+          </slot>
+        </template>
+        <template v-slot:emoji-message-toolbox="scopedProps">
+          <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+          </slot>
+        </template>
+      </EmojiMessage>
       <FileMessage
-        v-else-if="message.type === 'file'"
-        :data="message.data"
-        :message-colors="messageColors"
-      />
+          v-else-if="message.type === 'file'"
+          :message="message"
+          :message-colors="messageColors"
+          :show-deletion="showDeletion"
+          :show-confirmation-deletion="showConfirmationDeletion"
+          :confirmation-deletion-message="confirmationDeletionMessage"
+          :my-id="myId"
+          @remove="$emit('remove')"
+      >
+        <template v-slot:default="scopedProps">
+          <slot
+              name="file-message-body"
+              :message="scopedProps.message"
+              :messageColors="scopedProps.messageColors"
+              :me="scopedProps.me"
+          >
+          </slot>
+        </template>
+        <template v-slot:file-message-toolbox="scopedProps">
+          <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+          </slot>
+        </template>
+      </FileMessage>
       <TypingMessage v-else-if="message.type === 'typing'" :message-colors="messageColors" />
       <SystemMessage
-        v-else-if="message.type === 'system'"
-        :data="message.data"
-        :message-colors="messageColors"
+          v-else-if="message.type === 'system'"
+          :data="message.data"
+          :message-colors="messageColors"
       >
-        <slot name="system-message-body" :message="message.data"> </slot>
+        <slot name="system-message-body" :message="message.data"></slot>
       </SystemMessage>
     </div>
   </div>
@@ -126,22 +169,22 @@ export default {
     }
   },
   computed: {
-    authorName() {
+    authorName () {
       return this.user && this.user.name
     },
-    chatImageUrl() {
+    chatImageUrl () {
       return (this.user && this.user.imageUrl) || chatIcon
     },
-    messageColors() {
+    messageColors () {
       return this.message.author === this.myId ? this.sentColorsStyle : this.receivedColorsStyle
     },
-    receivedColorsStyle() {
+    receivedColorsStyle () {
       return {
         color: this.colors.receivedMessage.text,
         backgroundColor: this.colors.receivedMessage.bg
       }
     },
-    sentColorsStyle() {
+    sentColorsStyle () {
       return {
         color: this.colors.sentMessage.text,
         backgroundColor: this.colors.sentMessage.bg
@@ -157,6 +200,7 @@ export default {
   margin: auto;
   padding-bottom: 10px;
   display: flex;
+
   .sc-message--edited {
     opacity: 0.7;
     word-wrap: normal;
@@ -206,7 +250,7 @@ export default {
   }
 }
 
-.sc-message--text {
+.sc-message--text, .sc-message--file, .sc-message--emoji {
   padding: 5px 20px;
   border-radius: 6px;
   font-weight: 300;
@@ -214,21 +258,26 @@ export default {
   line-height: 1.4;
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;
+
   .sc-message--text-body {
     .sc-message--text-content {
       white-space: pre-wrap;
     }
   }
+
   &:hover .sc-message--toolbox {
     left: -20px;
     opacity: 1;
   }
+
   &.confirm-delete:hover .sc-message--toolbox {
     left: -90px;
   }
+
   &.confirm-delete .sc-message--toolbox {
     width: auto;
   }
+
   .sc-message--toolbox {
     transition: left 0.2s ease-out 0s;
     white-space: normal;
@@ -237,6 +286,7 @@ export default {
     left: 0px;
     width: 25px;
     top: 0;
+
     button {
       background: none;
       border: none;
@@ -246,12 +296,14 @@ export default {
       width: 100%;
       text-align: center;
       cursor: pointer;
+
       &:focus {
         outline: none;
       }
     }
   }
 }
+
 .sc-message--content.sent .sc-message--text {
   color: white;
   background-color: #4e8cff;
@@ -272,12 +324,14 @@ export default {
 .tooltip {
   display: block !important;
   z-index: 10000;
+
   .tooltip-inner {
     background: black;
     color: white;
     border-radius: 16px;
     padding: 5px 10px 4px;
   }
+
   .tooltip-arrow {
     width: 0;
     height: 0;
@@ -287,8 +341,10 @@ export default {
     border-color: black;
     z-index: 1;
   }
+
   &[x-placement^='top'] {
     margin-bottom: 5px;
+
     .tooltip-arrow {
       border-width: 5px 5px 0 5px;
       border-left-color: transparent !important;
@@ -300,8 +356,10 @@ export default {
       margin-bottom: 0;
     }
   }
+
   &[x-placement^='bottom'] {
     margin-top: 5px;
+
     .tooltip-arrow {
       border-width: 0 5px 5px 5px;
       border-left-color: transparent !important;
@@ -313,8 +371,10 @@ export default {
       margin-bottom: 0;
     }
   }
+
   &[x-placement^='right'] {
     margin-left: 5px;
+
     .tooltip-arrow {
       border-width: 5px 5px 5px 0;
       border-left-color: transparent !important;
@@ -326,8 +386,10 @@ export default {
       margin-right: 0;
     }
   }
+
   &[x-placement^='left'] {
     margin-right: 5px;
+
     .tooltip-arrow {
       border-width: 5px 0 5px 5px;
       border-top-color: transparent !important;
@@ -339,18 +401,22 @@ export default {
       margin-right: 0;
     }
   }
+
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.15s, visibility 0.15s;
   }
+
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
     transition: opacity 0.15s;
   }
+
   &.info {
     $color: rgba(#004499, 0.9);
+
     .tooltip-inner {
       background: $color;
       color: white;
@@ -358,12 +424,15 @@ export default {
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
     }
+
     .tooltip-arrow {
       border-color: $color;
     }
   }
+
   &.popover {
     $color: #f9f9f9;
+
     .popover-inner {
       background: $color;
       color: black;
@@ -371,6 +440,7 @@ export default {
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
     }
+
     .popover-arrow {
       border-color: $color;
     }
diff --git a/src/MessageList.vue b/src/MessageList.vue
index 876f0204..dbe1d5e2 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -41,6 +41,14 @@
         <slot name="text-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
         </slot>
       </template>
+      <template v-slot:file-message-toolbox="scopedProps">
+        <slot name="file-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
+      <template v-slot:emoji-message-toolbox="scopedProps">
+        <slot name="emoji-message-toolbox" :message="scopedProps.message" :me="scopedProps.me">
+        </slot>
+      </template>
     </Message>
     <Message
       v-show="showTypingIndicator !== ''"
diff --git a/src/messages/EmojiMessage.vue b/src/messages/EmojiMessage.vue
index 9ca12f6e..d3bc4fa6 100644
--- a/src/messages/EmojiMessage.vue
+++ b/src/messages/EmojiMessage.vue
@@ -1,13 +1,84 @@
 <template>
-  <div class="sc-message--emoji">{{ data.emoji }}</div>
+  <div class="sc-message--emoji">
+    <template>
+      <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
+        <button
+            v-if="showDeletion && me && message.id != null && message.id != undefined"
+            @click="
+            ifelse(
+              showConfirmationDeletion,
+              withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+              () => $emit('remove')
+            )()
+          "
+        >
+          <IconBase :color="messageColors.color" width="10" icon-name="remove">
+            <IconCross />
+          </IconBase>
+        </button>
+        <slot name="emoji-message-toolbox" :message="message" :me="me"></slot>
+      </div>
+    </template>
+    <slot :message="message" :messageColors="messageColors" :me="me">
+      {{ message.data.emoji }}
+    </slot>
+  </div>
 </template>
 
 <script>
+import IconBase from './../components/IconBase.vue'
+import IconCross from './../components/icons/IconCross.vue'
+
 export default {
+  components: {
+    IconBase,
+    IconCross,
+  },
   props: {
-    data: {
+    message: {
+      type: Object,
+      required: true
+    },
+    messageColors: {
       type: Object,
       required: true
+    },
+    showDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      default: false,
+      required: false
+    },
+    myId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    me () {
+      return this.message.author === this.myId
+    }
+  },
+  methods: {
+    ifelse (cond, funcIf, funcElse) {
+      return () => {
+        if (funcIf && cond) funcIf()
+        else if (funcElse) funcElse()
+      }
+    },
+    withConfirm (msg, func) {
+      return () => {
+        if (confirm(msg)) func()
+      }
     }
   }
 }
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index 5bdf6a29..e7200adb 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -1,30 +1,97 @@
 <template>
   <div class="sc-message--file" :style="messageColors">
-    <div class="sc-message--file-icon">
-      <img :src="data.file.url" class="sc-image" />
-    </div>
-    <div class="sc-message--file-name" :style="messageColors">
-      <a :href="data.file.url ? data.file.url : '#'" target="_blank">{{ data.file.name || '' }}</a>
-    </div>
-    <div class="sc-message--file-text" :style="messageColors">
-      {{ data.text }}
-      <p v-if="data.meta" class="sc-message--meta" :style="messageColors">
-        {{ data.meta }}
-      </p>
-    </div>
+    <template>
+      <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
+        <button
+          v-if="showDeletion && me && message.id != null && message.id != undefined"
+          @click="
+            ifelse(
+              showConfirmationDeletion,
+              withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+              () => $emit('remove')
+            )()
+          "
+        >
+          <IconBase :color="messageColors.color" width="10" icon-name="remove">
+            <IconCross />
+          </IconBase>
+        </button>
+        <slot name="file-message-toolbox" :message="message" :me="me"></slot>
+      </div>
+    </template>
+    <slot :message="message" :messageColors="messageColors" :me="me">
+      <div class="sc-message--file-icon">
+        <img :src="message.data.file.url" class="sc-image" />
+      </div>
+      <div class="sc-message--file-name" :style="messageColors">
+        <a :href="message.data.file.url ? message.data.file.url : '#'" target="_blank">
+          {{ message.data.file.name || '' }}
+        </a>
+      </div>
+      <div class="sc-message--file-text" :style="messageColors">
+        {{ message.data.text }}
+        <p v-if="message.data.meta" class="sc-message--meta" :style="messageColors">
+          {{ message.data.meta }}
+        </p>
+      </div>
+    </slot>
   </div>
 </template>
 
 <script>
+import IconBase from './../components/IconBase.vue'
+import IconCross from './../components/icons/IconCross.vue'
+
 export default {
+  components: {
+    IconBase,
+    IconCross,
+  },
   props: {
-    data: {
+    message: {
       type: Object,
       required: true
     },
     messageColors: {
       type: Object,
       required: true
+    },
+    showDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    showConfirmationDeletion: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      default: false,
+      required: false
+    },
+    myId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    me () {
+      return this.message.author === this.myId
+    }
+  },
+  methods: {
+    ifelse (cond, funcIf, funcElse) {
+      return () => {
+        if (funcIf && cond) funcIf()
+        else if (funcElse) funcElse()
+      }
+    },
+    withConfirm (msg, func) {
+      return () => {
+        if (confirm(msg)) func()
+      }
     }
   }
 }
diff --git a/src/messages/TextMessage.vue b/src/messages/TextMessage.vue
index 1540ab45..734456ac 100644
--- a/src/messages/TextMessage.vue
+++ b/src/messages/TextMessage.vue
@@ -7,23 +7,20 @@
             <IconEdit />
           </IconBase>
         </button>
-        <div v-if="showDeletion">
-          <button
-            v-if="me && message.id != null && message.id != undefined"
-            @click="
-              ifelse(
-                showConfirmationDeletion,
-                withConfirm(confirmationDeletionMessage, () => $emit('remove')),
-                () => $emit('remove')
-              )()
-            "
-          >
-            <IconBase :color="messageColors.color" width="10" icon-name="remove">
-              <IconCross />
-            </IconBase>
-          </button>
-        </div>
-        <slot name="text-message-toolbox" :message="message" :me="me"> </slot>
+        <button v-if="showDeletion && me && message.id != null && message.id != undefined"
+          @click="
+            ifelse(
+              showConfirmationDeletion,
+              withConfirm(confirmationDeletionMessage, () => $emit('remove')),
+              () => $emit('remove')
+            )()
+          "
+        >
+          <IconBase :color="messageColors.color" width="10" icon-name="remove">
+            <IconCross />
+          </IconBase>
+        </button>
+        <slot name="text-message-toolbox" :message="message" :me="me"></slot>
       </div>
     </template>
     <slot :message="message" :messageText="messageText" :messageColors="messageColors" :me="me">
@@ -92,7 +89,7 @@ export default {
     }
   },
   computed: {
-    messageText() {
+    messageText () {
       const escaped = escapeGoat.escape(this.message.data.text)
 
       return Autolinker.link(this.messageStyling ? fmt(escaped) : escaped, {
@@ -100,24 +97,24 @@ export default {
         truncate: {length: 50, location: 'smart'}
       })
     },
-    me() {
+    me () {
       return this.message.author === this.myId
     },
-    isEditing() {
+    isEditing () {
       return (store.state.editMessage && store.state.editMessage.id) === this.message.id
     }
   },
   methods: {
-    edit() {
+    edit () {
       store.setState('editMessage', this.message)
     },
-    ifelse(cond, funcIf, funcElse) {
+    ifelse (cond, funcIf, funcElse) {
       return () => {
         if (funcIf && cond) funcIf()
         else if (funcElse) funcElse()
       }
     },
-    withConfirm(msg, func) {
+    withConfirm (msg, func) {
       return () => {
         if (confirm(msg)) func()
       }

From c7e3acce74cea4520a68a7c20ca7dbeaa54fa6ad Mon Sep 17 00:00:00 2001
From: Silas Ribas Martins <silasrm@gmail.com>
Date: Tue, 1 Dec 2020 20:05:39 -0300
Subject: [PATCH 28/32] Fix wrong default value for confirmationDeletionMessage
 param. Fix code with lint

---
 src/Message.vue               | 121 +++++++++++++++++-----------------
 src/UserList.vue              |   4 +-
 src/icons/FileIcons.vue       |   2 +-
 src/messages/EmojiMessage.vue |  14 ++--
 src/messages/FileMessage.vue  |  10 +--
 src/messages/TextMessage.vue  |  15 +++--
 6 files changed, 85 insertions(+), 81 deletions(-)

diff --git a/src/Message.vue b/src/Message.vue
index e7c32057..31ccfda4 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -1,8 +1,8 @@
 <template>
   <div :id="message.id" class="sc-message">
     <div
-        class="sc-message--content"
-        :class="{
+      class="sc-message--content"
+      :class="{
         sent: message.author === myId,
         received: message.author !== myId && message.type !== 'system',
         system: message.type === 'system'
@@ -10,37 +10,37 @@
     >
       <slot name="user-avatar" :message="message" :user="user">
         <div
-            v-if="message.type !== 'system' && authorName && authorName !== myId"
-            v-tooltip="authorName"
-            :title="authorName"
-            class="sc-message--avatar"
-            :class="{clickable: messageIconClickable}"
-            :style="{
+          v-if="message.type !== 'system' && authorName && authorName !== myId"
+          v-tooltip="authorName"
+          :title="authorName"
+          class="sc-message--avatar"
+          :class="{clickable: messageIconClickable}"
+          :style="{
             backgroundImage: `url(${chatImageUrl})`
           }"
-            @click="messageIconClickable ? $emit('messageIconClicked', user) : null"
+          @click="messageIconClickable ? $emit('messageIconClicked', user) : null"
         ></div>
       </slot>
 
       <TextMessage
-          v-if="message.type === 'text'"
-          :message="message"
-          :message-colors="messageColors"
-          :message-styling="messageStyling"
-          :show-edition="showEdition"
-          :show-deletion="showDeletion"
-          :show-confirmation-deletion="showConfirmationDeletion"
-          :confirmation-deletion-message="confirmationDeletionMessage"
-          :my-id="myId"
-          @remove="$emit('remove')"
+        v-if="message.type === 'text'"
+        :message="message"
+        :message-colors="messageColors"
+        :message-styling="messageStyling"
+        :show-edition="showEdition"
+        :show-deletion="showDeletion"
+        :show-confirmation-deletion="showConfirmationDeletion"
+        :confirmation-deletion-message="confirmationDeletionMessage"
+        :my-id="myId"
+        @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
           <slot
-              name="text-message-body"
-              :message="scopedProps.message"
-              :messageText="scopedProps.messageText"
-              :messageColors="scopedProps.messageColors"
-              :me="scopedProps.me"
+            name="text-message-body"
+            :message="scopedProps.message"
+            :messageText="scopedProps.messageText"
+            :messageColors="scopedProps.messageColors"
+            :me="scopedProps.me"
           >
           </slot>
         </template>
@@ -50,22 +50,23 @@
         </template>
       </TextMessage>
       <EmojiMessage
-          v-else-if="message.type === 'emoji'"
-          :message="message"
-          :message-colors="messageColors"
-          :message-styling="messageStyling"
-          :show-edition="showEdition"
-          :show-deletion="showDeletion"
-          :show-confirmation-deletion="showConfirmationDeletion"
-          :confirmation-deletion-message="confirmationDeletionMessage"
-          :my-id="myId"
-          @remove="$emit('remove')">
+        v-else-if="message.type === 'emoji'"
+        :message="message"
+        :message-colors="messageColors"
+        :message-styling="messageStyling"
+        :show-edition="showEdition"
+        :show-deletion="showDeletion"
+        :show-confirmation-deletion="showConfirmationDeletion"
+        :confirmation-deletion-message="confirmationDeletionMessage"
+        :my-id="myId"
+        @remove="$emit('remove')"
+      >
         <template v-slot:default="scopedProps">
           <slot
-              name="emoji-message-body"
-              :message="scopedProps.message"
-              :messageColors="scopedProps.messageColors"
-              :me="scopedProps.me"
+            name="emoji-message-body"
+            :message="scopedProps.message"
+            :messageColors="scopedProps.messageColors"
+            :me="scopedProps.me"
           >
           </slot>
         </template>
@@ -75,21 +76,21 @@
         </template>
       </EmojiMessage>
       <FileMessage
-          v-else-if="message.type === 'file'"
-          :message="message"
-          :message-colors="messageColors"
-          :show-deletion="showDeletion"
-          :show-confirmation-deletion="showConfirmationDeletion"
-          :confirmation-deletion-message="confirmationDeletionMessage"
-          :my-id="myId"
-          @remove="$emit('remove')"
+        v-else-if="message.type === 'file'"
+        :message="message"
+        :message-colors="messageColors"
+        :show-deletion="showDeletion"
+        :show-confirmation-deletion="showConfirmationDeletion"
+        :confirmation-deletion-message="confirmationDeletionMessage"
+        :my-id="myId"
+        @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
           <slot
-              name="file-message-body"
-              :message="scopedProps.message"
-              :messageColors="scopedProps.messageColors"
-              :me="scopedProps.me"
+            name="file-message-body"
+            :message="scopedProps.message"
+            :messageColors="scopedProps.messageColors"
+            :me="scopedProps.me"
           >
           </slot>
         </template>
@@ -100,9 +101,9 @@
       </FileMessage>
       <TypingMessage v-else-if="message.type === 'typing'" :message-colors="messageColors" />
       <SystemMessage
-          v-else-if="message.type === 'system'"
-          :data="message.data"
-          :message-colors="messageColors"
+        v-else-if="message.type === 'system'"
+        :data="message.data"
+        :message-colors="messageColors"
       >
         <slot name="system-message-body" :message="message.data"></slot>
       </SystemMessage>
@@ -169,22 +170,22 @@ export default {
     }
   },
   computed: {
-    authorName () {
+    authorName() {
       return this.user && this.user.name
     },
-    chatImageUrl () {
+    chatImageUrl() {
       return (this.user && this.user.imageUrl) || chatIcon
     },
-    messageColors () {
+    messageColors() {
       return this.message.author === this.myId ? this.sentColorsStyle : this.receivedColorsStyle
     },
-    receivedColorsStyle () {
+    receivedColorsStyle() {
       return {
         color: this.colors.receivedMessage.text,
         backgroundColor: this.colors.receivedMessage.bg
       }
     },
-    sentColorsStyle () {
+    sentColorsStyle() {
       return {
         color: this.colors.sentMessage.text,
         backgroundColor: this.colors.sentMessage.bg
@@ -250,7 +251,9 @@ export default {
   }
 }
 
-.sc-message--text, .sc-message--file, .sc-message--emoji {
+.sc-message--text,
+.sc-message--file,
+.sc-message--emoji {
   padding: 5px 20px;
   border-radius: 6px;
   font-weight: 300;
diff --git a/src/UserList.vue b/src/UserList.vue
index 92ecdfe0..44d4811a 100644
--- a/src/UserList.vue
+++ b/src/UserList.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="user-list" :style="{background: userListColor.userList.bg}">
-    <table style="padding-top: 5px;">
+    <table style="padding-top: 5px">
       <tbody>
         <tr v-for="user in participants" :key="user.id">
-          <td style="text-align: center;">
+          <td style="text-align: center">
             <img :src="user.imageUrl" class="img-msg" />
           </td>
           <td class="user-element" :style="{color: userListColor.userList.text}">
diff --git a/src/icons/FileIcons.vue b/src/icons/FileIcons.vue
index fca0175a..351e7cd6 100644
--- a/src/icons/FileIcons.vue
+++ b/src/icons/FileIcons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative;">
+  <div style="position: relative">
     <button class="sc-user-input--file-icon-wrapper" type="button">
       <svg
         version="1.1"
diff --git a/src/messages/EmojiMessage.vue b/src/messages/EmojiMessage.vue
index d3bc4fa6..886983f5 100644
--- a/src/messages/EmojiMessage.vue
+++ b/src/messages/EmojiMessage.vue
@@ -3,8 +3,8 @@
     <template>
       <div class="sc-message--toolbox" :style="{background: messageColors.backgroundColor}">
         <button
-            v-if="showDeletion && me && message.id != null && message.id != undefined"
-            @click="
+          v-if="showDeletion && me && message.id != null && message.id != undefined"
+          @click="
             ifelse(
               showConfirmationDeletion,
               withConfirm(confirmationDeletionMessage, () => $emit('remove')),
@@ -32,7 +32,7 @@ import IconCross from './../components/icons/IconCross.vue'
 export default {
   components: {
     IconBase,
-    IconCross,
+    IconCross
   },
   props: {
     message: {
@@ -55,7 +55,7 @@ export default {
     },
     confirmationDeletionMessage: {
       type: String,
-      default: false,
+      default: '',
       required: false
     },
     myId: {
@@ -64,18 +64,18 @@ export default {
     }
   },
   computed: {
-    me () {
+    me() {
       return this.message.author === this.myId
     }
   },
   methods: {
-    ifelse (cond, funcIf, funcElse) {
+    ifelse(cond, funcIf, funcElse) {
       return () => {
         if (funcIf && cond) funcIf()
         else if (funcElse) funcElse()
       }
     },
-    withConfirm (msg, func) {
+    withConfirm(msg, func) {
       return () => {
         if (confirm(msg)) func()
       }
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index e7200adb..70a6333d 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -45,7 +45,7 @@ import IconCross from './../components/icons/IconCross.vue'
 export default {
   components: {
     IconBase,
-    IconCross,
+    IconCross
   },
   props: {
     message: {
@@ -68,7 +68,7 @@ export default {
     },
     confirmationDeletionMessage: {
       type: String,
-      default: false,
+      default: '',
       required: false
     },
     myId: {
@@ -77,18 +77,18 @@ export default {
     }
   },
   computed: {
-    me () {
+    me() {
       return this.message.author === this.myId
     }
   },
   methods: {
-    ifelse (cond, funcIf, funcElse) {
+    ifelse(cond, funcIf, funcElse) {
       return () => {
         if (funcIf && cond) funcIf()
         else if (funcElse) funcElse()
       }
     },
-    withConfirm (msg, func) {
+    withConfirm(msg, func) {
       return () => {
         if (confirm(msg)) func()
       }
diff --git a/src/messages/TextMessage.vue b/src/messages/TextMessage.vue
index 734456ac..0294af2b 100644
--- a/src/messages/TextMessage.vue
+++ b/src/messages/TextMessage.vue
@@ -7,7 +7,8 @@
             <IconEdit />
           </IconBase>
         </button>
-        <button v-if="showDeletion && me && message.id != null && message.id != undefined"
+        <button
+          v-if="showDeletion && me && message.id != null && message.id != undefined"
           @click="
             ifelse(
               showConfirmationDeletion,
@@ -89,7 +90,7 @@ export default {
     }
   },
   computed: {
-    messageText () {
+    messageText() {
       const escaped = escapeGoat.escape(this.message.data.text)
 
       return Autolinker.link(this.messageStyling ? fmt(escaped) : escaped, {
@@ -97,24 +98,24 @@ export default {
         truncate: {length: 50, location: 'smart'}
       })
     },
-    me () {
+    me() {
       return this.message.author === this.myId
     },
-    isEditing () {
+    isEditing() {
       return (store.state.editMessage && store.state.editMessage.id) === this.message.id
     }
   },
   methods: {
-    edit () {
+    edit() {
       store.setState('editMessage', this.message)
     },
-    ifelse (cond, funcIf, funcElse) {
+    ifelse(cond, funcIf, funcElse) {
       return () => {
         if (funcIf && cond) funcIf()
         else if (funcElse) funcElse()
       }
     },
-    withConfirm (msg, func) {
+    withConfirm(msg, func) {
       return () => {
         if (confirm(msg)) func()
       }

From ffe86083d63808a275fe85922f4d7f821f932b6c Mon Sep 17 00:00:00 2001
From: Silas Ribas Martins <silasrm@gmail.com>
Date: Thu, 3 Dec 2020 12:21:38 -0300
Subject: [PATCH 29/32] Change button style on sc-message--emoji >
 sc-message--toolbox

---
 src/Message.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/Message.vue b/src/Message.vue
index 31ccfda4..860da6c0 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -307,6 +307,25 @@ export default {
   }
 }
 
+.sc-message--emoji {
+  .sc-message--toolbox {
+    background: transparent!important;
+
+    button {
+      vertical-align: top;
+      background: rgb(78, 140, 255) none repeat scroll 0% 0%;
+
+      svg {
+        width: 100%;
+        padding: 3px;
+        display: block;
+        //vertical-align: top;
+        margin-bottom: auto;
+      }
+    }
+  }
+}
+
 .sc-message--content.sent .sc-message--text {
   color: white;
   background-color: #4e8cff;

From 9eacbc471df09b82b1aa1ee7a06e763ee362ccc9 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Mon, 7 Dec 2020 11:39:09 -0700
Subject: [PATCH 30/32] yarn lint.

---
 src/Message.vue         | 2 +-
 src/UserList.vue        | 4 ++--
 src/icons/FileIcons.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Message.vue b/src/Message.vue
index 860da6c0..2300229b 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -309,7 +309,7 @@ export default {
 
 .sc-message--emoji {
   .sc-message--toolbox {
-    background: transparent!important;
+    background: transparent !important;
 
     button {
       vertical-align: top;
diff --git a/src/UserList.vue b/src/UserList.vue
index 44d4811a..92ecdfe0 100644
--- a/src/UserList.vue
+++ b/src/UserList.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="user-list" :style="{background: userListColor.userList.bg}">
-    <table style="padding-top: 5px">
+    <table style="padding-top: 5px;">
       <tbody>
         <tr v-for="user in participants" :key="user.id">
-          <td style="text-align: center">
+          <td style="text-align: center;">
             <img :src="user.imageUrl" class="img-msg" />
           </td>
           <td class="user-element" :style="{color: userListColor.userList.text}">
diff --git a/src/icons/FileIcons.vue b/src/icons/FileIcons.vue
index 351e7cd6..fca0175a 100644
--- a/src/icons/FileIcons.vue
+++ b/src/icons/FileIcons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative">
+  <div style="position: relative;">
     <button class="sc-user-input--file-icon-wrapper" type="button">
       <svg
         version="1.1"

From 92bc47e4f63499db329178faf802923e9a46d0b4 Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Tue, 22 Dec 2020 16:09:30 -0700
Subject: [PATCH 31/32] Fixed aspect ratio for non-square images in chat list.

---
 src/ChatList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ChatList.vue b/src/ChatList.vue
index 97f12aa2..1d5d34f0 100644
--- a/src/ChatList.vue
+++ b/src/ChatList.vue
@@ -83,6 +83,7 @@ export default {
   box-sizing: border-box;
   border-radius: 50%;
   width: 50px;
+  height: 50px;
   margin-right: 5px;
   display: block;
 }

From 1e89a127c6691f8ece4c2fd7b998758770c7c00d Mon Sep 17 00:00:00 2001
From: Eduard Smetanin <eduard.smetanin@gmail.com>
Date: Wed, 13 Jan 2021 18:27:26 -0700
Subject: [PATCH 32/32] No longer showing keyboard on mobile devices when user
 opens a chat.

---
 src/UserInput.vue |  9 ++++++++-
 src/device.js     | 22 ++++++++++++++++++++++
 src/index.js      |  3 +++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/device.js

diff --git a/src/UserInput.vue b/src/UserInput.vue
index 13382323..dc4d9917 100644
--- a/src/UserInput.vue
+++ b/src/UserInput.vue
@@ -202,7 +202,14 @@ export default {
     },
     focusUserInput() {
       this.$nextTick(() => {
-        this.$refs.userInput.focus()
+        if (this.$isMobile) {
+          // On mobile device, just scroll to the bottom to show the new message control, don't move
+          // focus there, because it would show keyboard. This is how other chat apps do it.
+          window.scrollTo(0, document.body.scrollHeight)
+        } else {
+          // On desktop or tablet, move focus to the new message control, so user can start typing a message right away.
+          this.$refs.userInput.focus()
+        }
       })
     },
     _submitSuggestion(suggestion) {
diff --git a/src/device.js b/src/device.js
new file mode 100644
index 00000000..469977a8
--- /dev/null
+++ b/src/device.js
@@ -0,0 +1,22 @@
+export default class Device {
+  static mobile() {
+    let f = function () {
+      let check = false
+      /* eslint-disable no-useless-escape */
+      ;(function (a) {
+        if (
+          /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+            a
+          ) ||
+          /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+            a.substr(0, 4)
+          )
+        )
+          check = true
+      })(navigator.userAgent || navigator.vendor || window.opera)
+      /* eslint-enable no-useless-escape */
+      return check
+    }
+    return f()
+  }
+}
diff --git a/src/index.js b/src/index.js
index ca6e5516..a519ad17 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import Device from '@/device.js'
 import Launcher from './Launcher.vue'
 import VTooltip from 'v-tooltip'
 
@@ -29,6 +30,8 @@ const Plugin = {
      */
     Vue.component(this.componentName, Launcher)
     Vue.use(VTooltip)
+
+    Vue.prototype.$isMobile = Device.mobile()
   }
 }