Added ability to have multiple chats

.gitignore

@@ -14,6 +14,7 @@ yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
+*.code-workspace
 *.suo
 *.ntvs*
 *.njsproj

demo/src/App.vue

@@ -26,9 +26,22 @@
       :confirmationDeletionMessage="'Are you sure? (you can customize this message)'"
       :titleImageUrl="titleImageUrl"
       :disableUserListToggle="false"
+      :chatListImageUrl="chatListImageUrl"
+      :placeholder="placeholder"
+      :multipleChatsEnabled="multipleChatsEnabled"
+      :chatList="chatList"
+      :chatListTitle="chatListTitle"
+      :messageListHeaderTitleClickable="false"
+      :chatListHeaderTitleClickable="true"
+      :messageIconClickable="true"
       @onType="handleOnType"
       @edit="editMessage"
       @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)">
@@ -103,6 +116,9 @@
       :messageStyling="messageStyling"
       :onMessage="sendMessage"
       :onTyping="handleTyping"
+      :multipleChatsEnabled="multipleChatsEnabled"
+      :chatList="chatList"
+      @multipleChatsEnabledChange="handleMultipleChatsEnabledChange"
     />
     <Footer
       :chosenColor="chosenColor"
@@ -112,8 +128,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,50 +143,53 @@ export default {
   },
   data() {
     return {
-      participants: chatParticipants,
-      titleImageUrl:
-        'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
-      messageList: messageHistory,
-      newMessagesCount: 0,
+      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: '',
       colors: null,
       availableColors,
       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 === this.myId)})
+      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 +222,52 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    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
+      this.currentChatID = Object.keys(this.chatHistory)[0]
+    },
+    handleMessageListMountedUpdated() {
+      if (this.isChatOpen) {
+        this.markCurrentChatRead()
+      }
+    },
+    messageListHeaderTitleClicked() {
+      console.log("messageListHeaderTitleClicked")
+    },
+    chatListHeaderTitleClicked() {
+      console.log("chatListHeaderTitleClicked")
+    },
+    messageIconClicked(user) {
+      console.log("messageIconClicked user:")
+      console.log(user)
+    },
     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) {
+      const chat = this.chatHistory[chatID];
+      if (chat === undefined) {
+        return undefined;
+      }
+      return chat.messages;
+    },
   },
   computed: {
     linkColor() {
@@ -219,10 +277,53 @@ export default {
     },
     backgroundColor() {
       return this.chosenColor === 'dark' ? this.colors.messageList.bg : '#fff'
+    },
+    messageList() {
+      const chat = this.chatHistory[this.currentChatID];
+      if (chat === undefined) {
+        return undefined;
+      }
+      return chat.messages;
+    },
+    participants() {
+      const chat = this.chatHistory[this.currentChatID];
+      if (chat === undefined) {
+        return [];
+      }
+      return chat.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>

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

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'
     }
   }
 }