{"version":3,"sources":["webpack:///./src/developing/components/chat/ui/ChatMessage.vue?81ff","webpack:///./src/developing/components/chat/ui/ChatMessage.vue?afb1","webpack:///src/developing/components/chat/ui/ChatMessage.vue","webpack:///./src/developing/components/chat/ui/ChatMessage.vue?d1e9","webpack:///./src/developing/components/chat/ui/ChatMessage.vue?d0e2"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_l","m","key","id","order","member","isOwner","_e","_v","_s","senderName","content","dateFormat","timestamp","class","message","$t","staticRenderFns","components","ChatMemberAvatar","props","allMessages","type","Object","default","members","Array","computed","chatMessages","previousChatMessages","sendingQueue","processingQueue","nextMessage","methods","messageFormatter","isDateValid","senderUUID","index","messages","length","prevMessage","mounted","$flatmap","store","component"],"mappings":"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","file":"js/chunk-08c62c44.4214b86a.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChatMessage.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.allMessages)?_c('div',{staticClass:\"chat-message-box-inner m-8\",attrs:{\"id\":\"component-chat-log\"}},[_vm._l((_vm.previousChatMessages),function(m){return _c('div',{key:'prev_' + m.id + '::' + m.order,staticClass:\"msg-grp-container\"},[_c('ChatMemberAvatar',{attrs:{\"member\":_vm.member(m),\"isOwner\":m.isOwner}}),_c('div',[_c('div',{staticClass:\"msg break-words relative shadow-md rounded py-3 px-4 mb-2 rounded-lg max-w-sm bg-primary-gradient text-white\"},[(!m.isOwner)?_c('span',[_vm._v(_vm._s(_vm.senderName(m)))]):_vm._e(),_c('span',[_vm._v(\" \"+_vm._s(m.content)+\" \")]),_c('span',{staticClass:\"message-timestamp\"},[_vm._v(\" \"+_vm._s(m.dateFormat)+\" \")])])])],1)}),_vm._l((_vm.chatMessages),function(m){return _c('div',{key:m.id + '::' + m.order + '::' + m.timestamp,staticClass:\"msg-grp-container\"},[_c('div',{staticClass:\"message-item-container flex items-start mb-1 pb-2\",class:[{'flex-row-reverse' : m.isOwner }]},[_c('ChatMemberAvatar',{staticClass:\"pt-1\",attrs:{\"member\":_vm.member(m),\"isOwner\":m.isOwner}}),_c('div',{staticClass:\"message-box msg break-words relative shadow-md rounded mx-2 pt-3 pb-4 px-4 rounded-lg max-w-sm bg-white\",class:{\n          'bg-primary-gradient text-white': m.isOwner,\n          'flex flex-col-reverse justify-end items-end': m.isOwner  \n        }},[_c('div',{staticClass:\"w-full justify flex flex-inline\",class:m.isOwner ? 'text-white justify-end items-end' : 'justify-between items-center mb-2'},[(!m.isOwner)?_c('span',{staticClass:\"text-primary mr-16\"},[_vm._v(_vm._s(_vm.senderName(m)))]):_vm._e(),(m.isDateValid)?_c('span',{staticClass:\"message-timestamp\",class:m.isOwner ? 'mt-2' : 'mt-1'},[_vm._v(\" \"+_vm._s(m.dateFormat)+\" \")]):_vm._e()]),_c('span',[_vm._v(\" \"+_vm._s(m.content)+\" \")])])],1)])}),_vm._l((_vm.processingQueue),function(message){return _c('div',{key:message.id,staticClass:\"msg-grp-container\"},[_c('div',{staticClass:\"flex items-start flex-row-reverse\"},[_vm._v(\" \"+_vm._s(_vm.$t('general.sending'))+\" \"),_c('div',{staticClass:\"msg break-words relative shadow-md rounded pt-3 pb-4 px-4 mb-2 rounded-lg max-w-sm border border-solid border-transparent bg-white\"},[_c('span',[_vm._v(\" \"+_vm._s(message.content)+\" \")])])])])}),_vm._l((_vm.sendingQueue),function(message){return _c('div',{key:message.id,staticClass:\"msg-grp-container\"},[_c('div',{staticClass:\"flex items-start flex-row-reverse\"},[_c('div',{staticClass:\"msg break-words relative shadow-md rounded py-3 px-4 mb-2 rounded-lg max-w-sm border border-solid border-transparent bg-white\"},[_c('span',[_vm._v(\" \"+_vm._s(message.content)+\" \")])])])])})],2):_vm._e()}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"component-chat-log\" class=\"chat-message-box-inner m-8\" v-if=\"allMessages\">\n    <div v-for=\"m in previousChatMessages\" class=\"msg-grp-container\" :key=\"'prev_' + m.id + '::' + m.order\">\n      <ChatMemberAvatar\n        :member=\"member(m)\"\n        :isOwner=\"m.isOwner\"\n      />\n      <!-- <div class=\"flex items-start\" :class=\"[{'flex-row-reverse' : msg.isSent}]\"> -->\n      <div>\n        <div\n          class=\"msg break-words relative shadow-md rounded py-3 px-4 mb-2 rounded-lg max-w-sm bg-primary-gradient text-white\"\n        >\n          <span v-if=\"!m.isOwner\">{{ senderName(m) }}</span>\n          <span>\n            {{ m.content }}\n          </span>\n          <span class=\"message-timestamp\">\n            {{ m.dateFormat }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div v-for=\"m in chatMessages\" class=\"msg-grp-container\" :key=\"m.id + '::' + m.order + '::' + m.timestamp\">\n      <div class=\"message-item-container flex items-start mb-1 pb-2\" :class=\"[{'flex-row-reverse' : m.isOwner }]\">\n        <ChatMemberAvatar\n          :member=\"member(m)\"\n          :isOwner=\"m.isOwner\"\n          class=\"pt-1\"\n        />\n        <!-- :class=\"[{'items-end' : message(m, i).isOwner }]\" -->\n        <div\n          class=\"message-box msg break-words relative shadow-md rounded mx-2 pt-3 pb-4 px-4 rounded-lg max-w-sm bg-white\"\n          :class=\"{\n            'bg-primary-gradient text-white': m.isOwner,\n            'flex flex-col-reverse justify-end items-end': m.isOwner  \n          }\"\n        >\n          <div class=\"w-full justify flex flex-inline\"\n            :class=\"m.isOwner ? 'text-white justify-end items-end' : 'justify-between items-center mb-2'\"  \n          >\n            <span v-if=\"!m.isOwner\" class=\"text-primary mr-16\">{{ senderName(m) }}</span>\n            <span v-if=\"m.isDateValid\"\n              class=\"message-timestamp\"\n              :class=\"m.isOwner ? 'mt-2' : 'mt-1'\"\n            >\n              {{ m.dateFormat }}\n            </span>\n          </div>\n          <span>\n            {{ m.content }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div v-for=\"message in processingQueue\" class=\"msg-grp-container\" :key=\"message.id\">\n      <div class=\"flex items-start flex-row-reverse\">\n        {{ $t('general.sending') }}\n        <div\n          class=\"msg break-words relative shadow-md rounded pt-3 pb-4 px-4 mb-2 rounded-lg max-w-sm border border-solid border-transparent bg-white\"\n        >\n          <span>\n            {{ message.content }} \n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div v-for=\"message in sendingQueue\" class=\"msg-grp-container\" :key=\"message.id\">\n      <div class=\"flex items-start flex-row-reverse\">\n        <div\n          class=\"msg break-words relative shadow-md rounded py-3 px-4 mb-2 rounded-lg max-w-sm border border-solid border-transparent bg-white\"\n        >\n          <span>\n            {{ message.content }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport moment from \"moment-timezone\";\n\nexport default {\n  components: {\n    ChatMemberAvatar: () => import(\"./ChatMemberAvatar\")\n  },\n  props: {\n    allMessages: {\n      type: Object,\n      default: null\n    },\n    members: {\n      type: Array,\n      default: null\n    }\n  },\n  computed: {\n    chatMessages() { return this.allMessages.chatMessages.map((message, index) => this.messageFormatter(message, index, this.allMessages.chatMessages)) },\n    previousChatMessages() { return this.allMessages.previousChatMessages.map((message, index) => this.messageFormatter(message, index, this.allMessages.previousChatMessages)) },\n    sendingQueue() { return this.allMessages.sendingQueue.map((message, index) => this.messageFormatter(message, index, this.allMessages.processingQueue)) },\n    processingQueue() { return this.allMessages.processingQueue.map((message, index) => this.messageFormatter(message, index, this.allMessages.sendingQueue)) },\n    // message() {\n    //   const messages = this.allMessages.chatMessages;\n    //   return (message, index) => this.messageFormatter(message, index, messages);\n    // },\n    // prevMessage() {\n    //   const messages = this.allMessages.previousChatMessages;\n    //   return (message, index) => this.messageFormatter(message, index, messages);\n    // },\n    senderName() {\n      return (message) => {\n        // if (message && index && messages) {\n          // let prevMessage = messages[index > 0 ? index - 1 : index];\n          // const nextMessage = this.nextMessage(message, index, messages);\n          // const prevMessage = this.prevMessage(message, index, messages);\n\n          // if (message.senderUUID === prevMessage.userUUID) return null\n          if (this.$flatmap.has(message.senderUUID)) {\n            return this.$flatmap.get(message.senderUUID).fullname;\n          }\n          return \"Unknown\"\n        // }\n        // return null\n      }\n    },\n    member() {\n      // return (message) => this.members.find(member => member.uuid === message.senderUUID); \n      return (message) => this.members.find(member => member === message.senderUUID); \n    },\n    isOwner() {\n      return (message) => message.senderUUID === this.$currentUser.uuid ? true : false;\n    },\n    dateFormat() {\n      return (message, index, messages) => {\n        // const prevMessage = \n        //   index === 0\n        //   ? null\n        //   : messages[index === messages.length - 1 ? index - 5 : index > 0 ? index - 1 : index ];\n        // if (prevMessage && (message.timestamp - prevMessage.timestamp < 120000) && message.senderUUID === prevMessage.senderUUID) return null\n\n        // Use next message to check whether to show message time or not (if the current message's time is the same as the next one)\n        const nextMessage = this.nextMessage(message, index, messages);\n        if (nextMessage && (nextMessage.timestamp - message.timestamp < 60000) && message.senderUUID === nextMessage.senderUUID) return null;\n\n        return !message.timestamp\n          ? null\n          : new Date(message.timestamp).getDate() === new Date().getDate()\n          ? \"Today\" + moment(new Date(message.timestamp)).format(\" @ HH:mm\")\n          : moment(new Date(message.timestamp)).format(\"YYYY MMM DD @ HH:mm\")\n      }\n    }\n  },\n  methods: {\n    messageFormatter(message, index, messages) {\n      const isOwner = message.senderUUID === this.$currentUser.uuid;\n      const senderUUID = message.senderUUID;\n      const senderName = this.senderName(message);\n      const dateFormat = this.dateFormat(message, index, messages);\n      const isDateValid = message.timestamp ? true : false\n\n      return {\n        ...message,\n        isOwner,\n        isDateValid,\n        senderUUID,\n        senderName,\n        dateFormat\n      }\n    },\n    nextMessage(message, index, messages) {\n      return index < messages.length - 1 ? messages[index + 1] : null\n    },\n    prevMessage(message, index, messages) {\n      return index === 0 ? null\n        : messages[index === messages.length - 1 ? index - 5 : index > 0 ? index - 1 : index ];\n    }\n  },\n  mounted() {\n    this.$flatmap.store();\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.message-item-container {\n  & .message-box {\n    min-width: min-content;\n\n  }\n  & .message-timestamp {\n    font-size: 0.7rem !important;\n    // position: absolute;\n    // right: 0;\n    // bottom: -10rem;\n    min-width: min-content;\n  }\n}\n</style>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChatMessage.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ChatMessage.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ChatMessage.vue?vue&type=template&id=6604a7bc&\"\nimport script from \"./ChatMessage.vue?vue&type=script&lang=js&\"\nexport * from \"./ChatMessage.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ChatMessage.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}