Added 'box-sizing: border-box' to title image. Added chatListImageUrl param.

Author: eduardsmetanin

demo/src/App.vue

@@ -25,6 +25,7 @@
       :showConfirmationDeletion="true"
       :confirmationDeletionMessage="'Are you sure? (you can customize this message)'"
       :titleImageUrl="titleImageUrl"
+      :chatListImageUrl="chatListImageUrl"
       :placeholder="placeholder"
       :multipleChatsEnabled="multipleChatsEnabled"
       :chatList="chatList"
@@ -135,8 +136,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: '',
@@ -217,6 +218,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

src/ChatWindow.vue

@@ -5,7 +5,7 @@
       :show-close-button="showCloseButton"
       :show-chat-list-button="multipleChatsEnabled && !showingChatList"
       :title="showingChatList ? chatListTitle : title"
-      :image-url="titleImageUrl"
+      :image-url="showingChatList ? chatListImageUrl : titleImageUrl"
       :on-close="onClose"
       :colors="colors"
       :disable-user-list-toggle="disableUserListToggle || showingChatList"
@@ -21,7 +21,7 @@
       v-if="showingChatList"
       :colors="colors"
       :chatList="chatList"
-      @changeCurrentChat="(chatID) => { this.$emit('changeCurrentChat', chatID) }"
+      @changeCurrentChat="(chatID) => { $emit('changeCurrentChat', chatID) }"
       @showMessageList="handleShowMessageList"
       />
     <MessageList
@@ -139,6 +139,10 @@ export default {
       type: String,
       default: ''
     },
+    chatListImageUrl: {
+      type: String,
+      default: ''
+    },
     onUserInputSubmit: {
       type: Function,
       required: true

src/Header.vue

@@ -90,8 +90,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 {

src/Launcher.vue

@@ -39,6 +39,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')"
@@ -250,6 +251,10 @@ export default {
       type: String,
       default: () => ''
     },
+    chatListImageUrl: {
+      type: String,
+      default: () => ''
+    },
     myId: {
       type: String,
       default: 'me'