{"version":3,"file":"UnreadMessageList-C1QXHUuo.js","sources":["../../../app/javascript/widget/components/UnreadMessage.vue","../../../app/javascript/widget/components/UnreadMessageList.vue"],"sourcesContent":["<script>\nimport { useMessageFormatter } from 'shared/composables/useMessageFormatter';\nimport Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';\nimport configMixin from '../mixins/configMixin';\nimport { isEmptyObject } from 'widget/helpers/utils';\nimport {\n  ON_CAMPAIGN_MESSAGE_CLICK,\n  ON_UNREAD_MESSAGE_CLICK,\n} from '../constants/widgetBusEvents';\nimport { emitter } from 'shared/helpers/mitt';\n\nimport { useDarkMode } from 'widget/composables/useDarkMode';\nexport default {\n  name: 'UnreadMessage',\n  components: { Thumbnail },\n  mixins: [configMixin],\n  props: {\n    message: {\n      type: String,\n      default: '',\n    },\n    showSender: {\n      type: Boolean,\n      default: false,\n    },\n    sender: {\n      type: Object,\n      default: () => {},\n    },\n    campaignId: {\n      type: Number,\n      default: null,\n    },\n  },\n  setup() {\n    const { formatMessage, getPlainText, truncateMessage, highlightContent } =\n      useMessageFormatter();\n    const { getThemeClass } = useDarkMode();\n    return {\n      formatMessage,\n      getPlainText,\n      truncateMessage,\n      highlightContent,\n      getThemeClass,\n    };\n  },\n  computed: {\n    companyName() {\n      return `${this.$t('UNREAD_VIEW.COMPANY_FROM')} ${\n        this.channelConfig.websiteName\n      }`;\n    },\n    avatarUrl() {\n      // eslint-disable-next-line\n      if (this.isSenderExist(this.sender) && this.sender.avatar_url) {\n        return this.sender.avatar_url;\n      }\n      return this.useInboxAvatarForBot\n        ? this.inboxAvatarUrl\n        : '/assets/images/chatwoot_bot.png';\n    },\n    agentName() {\n      if (this.isSenderExist(this.sender)) {\n        return this.sender.available_name || this.sender.name;\n      }\n      if (this.useInboxAvatarForBot) {\n        return this.channelConfig.websiteName;\n      }\n      return this.$t('UNREAD_VIEW.BOT');\n    },\n    availabilityStatus() {\n      if (this.isSenderExist(this.sender)) {\n        const { availability_status: availabilityStatus } = this.sender;\n        return availabilityStatus;\n      }\n      return null;\n    },\n  },\n  methods: {\n    isSenderExist(sender) {\n      return sender && !isEmptyObject(sender);\n    },\n    onClickMessage() {\n      if (this.campaignId) {\n        emitter.emit(ON_CAMPAIGN_MESSAGE_CLICK, this.campaignId);\n      } else {\n        emitter.emit(ON_UNREAD_MESSAGE_CLICK);\n      }\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"chat-bubble-wrap\">\n    <button\n      class=\"chat-bubble agent\"\n      :class=\"getThemeClass('bg-white', 'dark:bg-slate-50')\"\n      @click=\"onClickMessage\"\n    >\n      <div v-if=\"showSender\" class=\"row--agent-block\">\n        <Thumbnail\n          :src=\"avatarUrl\"\n          size=\"20px\"\n          :username=\"agentName\"\n          :status=\"availabilityStatus\"\n        />\n        <span v-dompurify-html=\"agentName\" class=\"agent--name\" />\n        <span v-dompurify-html=\"companyName\" class=\"company--name\" />\n      </div>\n      <div\n        v-dompurify-html=\"formatMessage(message, false)\"\n        class=\"message-content\"\n      />\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@import 'widget/assets/scss/variables.scss';\n\n.chat-bubble {\n  max-width: 85%;\n  padding: $space-normal;\n  cursor: pointer;\n}\n\n.row--agent-block {\n  align-items: center;\n  display: flex;\n  text-align: left;\n  padding-bottom: $space-small;\n  font-size: $font-size-small;\n\n  .agent--name {\n    font-weight: $font-weight-medium;\n    margin-left: $space-smaller;\n  }\n\n  .company--name {\n    color: $color-light-gray;\n    margin-left: $space-smaller;\n  }\n}\n</style>\n","<script>\nimport { mapGetters } from 'vuex';\nimport configMixin from '../mixins/configMixin';\nimport { ON_UNREAD_MESSAGE_CLICK } from '../constants/widgetBusEvents';\nimport FluentIcon from 'shared/components/FluentIcon/Index.vue';\nimport UnreadMessage from 'widget/components/UnreadMessage.vue';\nimport { isWidgetColorLighter } from 'shared/helpers/colorHelper';\nimport { emitter } from 'shared/helpers/mitt';\n\nexport default {\n  name: 'Unread',\n  components: {\n    FluentIcon,\n    UnreadMessage,\n  },\n  mixins: [configMixin],\n  props: {\n    messages: {\n      type: Array,\n      required: true,\n    },\n  },\n  emits: ['close'],\n  computed: {\n    ...mapGetters({\n      unreadMessageCount: 'conversation/getUnreadMessageCount',\n      widgetColor: 'appConfig/getWidgetColor',\n    }),\n    sender() {\n      const [firstMessage] = this.messages;\n      return firstMessage.sender || {};\n    },\n    isBackgroundLighter() {\n      return isWidgetColorLighter(this.widgetColor);\n    },\n  },\n  methods: {\n    openConversationView() {\n      emitter.emit(ON_UNREAD_MESSAGE_CLICK);\n    },\n    closeFullView() {\n      this.$emit('close');\n    },\n    getMessageContent(message) {\n      const { attachments, content } = message;\n      const hasAttachments = attachments && attachments.length;\n\n      if (content) return content;\n\n      if (hasAttachments) return `📑`;\n\n      return '';\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"unread-wrap\">\n    <div class=\"close-unread-wrap\">\n      <button class=\"button small close-unread-button\" @click=\"closeFullView\">\n        <span class=\"flex items-center\">\n          <FluentIcon class=\"mr-1\" icon=\"dismiss\" size=\"12\" />\n          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}\n        </span>\n      </button>\n    </div>\n    <div class=\"unread-messages\">\n      <UnreadMessage\n        v-for=\"(message, index) in messages\"\n        :key=\"message.id\"\n        :message-type=\"message.messageType\"\n        :message-id=\"message.id\"\n        :show-sender=\"!index\"\n        :sender=\"message.sender\"\n        :message=\"getMessageContent(message)\"\n        :campaign-id=\"message.campaignId\"\n      />\n    </div>\n\n    <div class=\"open-read-view-wrap\">\n      <button\n        v-if=\"unreadMessageCount\"\n        class=\"button clear-button\"\n        @click=\"openConversationView\"\n      >\n        <span\n          class=\"flex items-center\"\n          :class=\"{\n            'is-background-light': isBackgroundLighter,\n          }\"\n          :style=\"{\n            color: widgetColor,\n          }\"\n        >\n          <FluentIcon class=\"mr-2\" size=\"16\" icon=\"arrow-right\" />\n          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}\n        </span>\n      </button>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@import 'widget/assets/scss/variables';\n\n.unread-wrap {\n  width: 100%;\n  height: auto;\n  max-height: 100vh;\n  background: transparent;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  .unread-messages {\n    padding-bottom: $space-small;\n  }\n\n  .clear-button {\n    background: transparent;\n    color: $color-woot;\n    border: 0;\n    font-weight: $font-weight-bold;\n    font-size: $font-size-medium;\n    transition: all 0.3s var(--ease-in-cubic);\n    margin-left: $space-smaller;\n    padding: 0 $space-one 0 0;\n\n    &:hover {\n      transform: translateX($space-smaller);\n      color: $color-primary-dark;\n    }\n  }\n\n  .close-unread-button {\n    background: $color-background;\n    color: $color-light-gray;\n    border: 0;\n    font-weight: $font-weight-medium;\n    font-size: $font-size-mini;\n    transition: all 0.3s var(--ease-in-cubic);\n    margin-bottom: $space-slab;\n    border-radius: $space-normal;\n\n    &:hover {\n      color: $color-body;\n    }\n  }\n\n  .is-background-light {\n    color: $color-body !important;\n  }\n}\n</style>\n"],"names":["_sfc_main","Thumbnail","configMixin","formatMessage","getPlainText","truncateMessage","highlightContent","useMessageFormatter","getThemeClass","useDarkMode","availabilityStatus","sender","isEmptyObject","emitter","ON_CAMPAIGN_MESSAGE_CLICK","ON_UNREAD_MESSAGE_CLICK","_hoisted_1","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","$setup","$options","args","$props","_hoisted_2","_createVNode","_component_Thumbnail","_withDirectives","_createCommentVNode","_directive_dompurify_html","FluentIcon","UnreadMessage","mapGetters","firstMessage","isWidgetColorLighter","message","attachments","content","hasAttachments","_component_FluentIcon","_createTextVNode","_ctx","_Fragment","_renderList","index","_createBlock","_component_UnreadMessage","_normalizeStyle"],"mappings":"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"}