Move src to dashboard (#152)

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">Back</span>
+</template>
+<script>
+import router from '../../routes/index';
+
+export default {
+  methods: {
+    goBack() {
+      router.go(-1);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="small-3 columns channel" :class="{ inactive: channel !== 'facebook' }" @click.capture="itemClick">
+    <img src="~dashboard/assets/images/channels/facebook.png" v-if="channel === 'facebook'">
+    <img src="~dashboard/assets/images/channels/twitter.png" v-if="channel === 'twitter'">
+    <img src="~dashboard/assets/images/channels/telegram.png" v-if="channel === 'telegram'">
+    <img src="~dashboard/assets/images/channels/line.png" v-if="channel === 'line'">
+    <h3 class="channel__title">{{channel}}</h3>
+    <!-- <p>This is the most sexiest integration to begin </p> -->
+  </div>
+</template>
+<script>
+/* global bus */
+export default {
+  props: ['channel'],
+  created() {
+  },
+  methods: {
+    itemClick() {
+      bus.$emit('channelItemClick', this.channel);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/ChatTypeTabs.vue

@@ -0,0 +1,40 @@
+<template>
+  <woot-tabs :index="tabsIndex" @change="onTabChange">
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.name"
+      :name="item.name"
+      :count="item.count"
+    />
+  </woot-tabs>
+</template>
+<script>
+/* eslint no-console: 0 */
+
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    activeTabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tabsIndex: 0,
+    };
+  },
+  created() {
+    this.tabsIndex = this.activeTabIndex;
+  },
+  methods: {
+    onTabChange(selectedTabIndex) {
+      this.$emit('chatTabChange', selectedTabIndex);
+      this.tabsIndex = selectedTabIndex;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/EmptyState.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="row empty-state">
+    <h3 class="title">{{title}}</h3>
+    <p class="message">{{message}}</p>
+    <slot></slot>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    title: String,
+    message: String,
+    buttonText: String,
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/InboxListItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="inbox-item" >
+    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image"/>
+    <div class="item--details columns">
+      <h4 class="item--name">{{ inbox.label }}</h4>
+      <p class="item--sub">Facebook</p>
+    </div>
+    <!-- <span class="ion-chevron-right arrow"></span> -->
+  </div>
+</template>
+<script>
+/* eslint no-console: 0 */
+/* global bus */
+// import WootSwitch from '../ui/Switch';
+
+export default {
+  props: ['inbox'],
+  created() {
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/LoadingState.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="row loading-state">
+    <h6 class="message">{{message}}<span class="spinner"></span></h6>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    message: String,
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/ReportStatsCard.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="small-2 report-card" :class="{ 'active': selected }" v-on:click="onClick(index)">
+    <h3 class="heading">{{heading}}</h3>
+    <h4 class="metric">{{point}}</h4>
+    <p class="desc">{{desc}}</p>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    heading: String,
+    point: [Number, String],
+    index: Number,
+    desc: String,
+    selected: Boolean,
+    onClick: Function,
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/SearchBox.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search">
+    <i class="icon ion-ios-search-strong"></i>
+    <input class="input" type="email" v-bind:placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
+  </div>
+</template>
+<script>
+export default {
+
+};
+</script>

app/javascript/dashboard/components/widgets/StatusBar.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="status-bar" :class="type">
+    <p class="message">{{message}}</p>
+    <router-link
+      :to="buttonRoute"
+      class="button small warning nice"
+      v-if="showButton"
+    >
+      {{buttonText}}
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    message: String,
+    buttonRoute: Object,
+    buttonText: String,
+    showButton: Boolean,
+    type: String, // Danger, Info, Success, Warning
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="user-thumbnail-box" v-bind:style="{ height: size, width: size }">
+    <img v-bind:src="src" class="user-thumbnail">
+    <img class="source-badge" src="~dashboard/assets/images/fb-badge.png" v-if="badge === 'Facebook'">
+  </div>
+</template>
+<script>
+/**
+ * Thumbnail Component
+ * Src - source for round image
+ * Size - Size of the thumbnail
+ * Badge - Chat source indication { fb / telegram }
+ */
+export default {
+  props: {
+    src: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: '40px',
+    },
+    badge: {
+      type: String,
+      default: 'fb',
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/chart/BarChart.js

@@ -0,0 +1,36 @@
+import { Bar } from 'vue-chartjs';
+
+const fontFamily =
+  '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+
+export default Bar.extend({
+  props: ['collection'],
+  mounted() {
+    this.renderChart(this.collection, {
+      // responsive: true,
+      maintainAspectRatio: false,
+      legend: {
+        labels: {
+          fontFamily,
+        },
+      },
+      scales: {
+        xAxes: [
+          {
+            barPercentage: 1.9,
+            ticks: {
+              fontFamily,
+            },
+          },
+        ],
+        yAxes: [
+          {
+            ticks: {
+              fontFamily,
+            },
+          },
+        ],
+      },
+    });
+  },
+});

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+  <ul class="vertical dropdown menu canned" id="canned-list"  v-bind:style="{ top: getTopPadding() + 'rem'}">
+    <li
+      v-for="(item, index) in cannedMessages"
+      :id="`canned-${index}`"
+      :class="{'active': index === selectedIndex}"
+      v-on:click="onListItemSelection(index)"
+      v-on:mouseover="onHover(index)"
+    >
+      <a><strong>{{item.short_code}}</strong> - {{item.content}}</a>
+    </li>
+  </ul>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  props: ['onKeyenter', 'onClick'],
+  data() {
+    return {
+      selectedIndex: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      cannedMessages: 'getCannedResponses',
+    }),
+  },
+  mounted() {
+    /* eslint-disable no-confusing-arrow */
+    document.addEventListener('keydown', this.keyListener);
+  },
+  methods: {
+    getTopPadding() {
+      if (this.cannedMessages.length <= 4) {
+        return -this.cannedMessages.length * 3.5;
+      }
+      return -14;
+    },
+    isUp(e) {
+      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80);  // UP, Ctrl-P
+    },
+    isDown(e) {
+      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78);  // DOWN, Ctrl-N
+    },
+    isEnter(e) {
+      return e.keyCode === 13;
+    },
+    keyListener(e) {
+      if (this.isUp(e)) {
+        if (!this.selectedIndex) {
+          this.selectedIndex = this.cannedMessages.length - 1;
+        } else {
+          this.selectedIndex -= 1;
+        }
+      }
+      if (this.isDown(e)) {
+        if (this.selectedIndex === this.cannedMessages.length - 1) {
+          this.selectedIndex = 0;
+        } else {
+          this.selectedIndex += 1;
+        }
+      }
+      if (this.isEnter(e)) {
+        this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
+      }
+      this.$el.querySelector('#canned-list').scrollTop = 34 * this.selectedIndex;
+    },
+    onHover(index) {
+      this.selectedIndex = index;
+    },
+    onListItemSelection(index) {
+      this.selectedIndex = index;
+      this.onClick(this.cannedMessages[this.selectedIndex].content);
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keyListener);
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue

@@ -0,0 +1,22 @@
+
+<template>
+  <select class="status--filter" v-model="activeIndex" @change="onTabChange()">
+    <option v-for="(item, index) in $t('CHAT_LIST.CHAT_STAUTUS_ITEMS')" :value="item['VALUE']">{{item["TEXT"]}}</option>
+  </select>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    activeIndex: 0,
+  }),
+  mounted() {
+  },
+  methods: {
+    onTabChange() {
+      this.$store.dispatch('setChatFilter', this.activeIndex);
+      this.$emit('statusFilterChange', this.activeIndex);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/Conversation.vue

@@ -0,0 +1,97 @@
+<template>
+  <li :class="alignBubble" v-if="data.attachment || data.content">
+    <div :class="wrapClass">
+      <p
+        :class="{ bubble: isBubble, 'is-private': isPrivate }"
+        v-tooltip.top-start="sentByMessage"
+      >
+        <bubble-image
+          :url="data.attachment.data_url"
+          :readable-time="readableTime"
+          v-if="data.attachment && data.attachment.file_type==='image'"
+        />
+        <bubble-audio
+          :url="data.attachment.data_url"
+          :readable-time="readableTime"
+          v-if="data.attachment && data.attachment.file_type==='audio'"
+        />
+        <bubble-map
+          :lat="data.attachment.coordinates_lat"
+          :lng="data.attachment.coordinates_long"
+          :label="data.attachment.fallback_title"
+          :readable-time="readableTime"
+          v-if="data.attachment && data.attachment.file_type==='location'"
+        />
+        <i class="icon ion-person" v-if="data.message_type === 2"></i>
+        <bubble-text v-if="data.content" :message="message" :readable-time="readableTime"/>
+        <i class="icon ion-android-lock" v-if="isPrivate" v-tooltip.top-start="toolTipMessage" @mouseenter="isHovered = true" @mouseleave="isHovered = false"></i>
+      </p>
+    </div>
+    <!-- <img v-if="showSenderData" src="https://chatwoot-staging.s3-us-west-2.amazonaws.com/uploads/avatar/contact/3415/thumb_10418362_10201264050880840_6087258728802054624_n.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20170422T075421Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=8d5ff60e41415515f59ff682b9a4e4c0574d9d9aabfeff1dc5a51087a9b49e03" class="sender--thumbnail"> -->
+  </li>
+</template>
+<script>
+/* eslint-disable no-named-as-default */
+import getEmojiSVG from '../emoji/utils';
+import timeMixin from '../../../mixins/time';
+import BubbleText from './bubble/Text';
+import BubbleImage from './bubble/Image';
+import BubbleMap from './bubble/Map';
+import BubbleAudio from './bubble/Audio';
+
+export default {
+  components: {
+    BubbleText,
+    BubbleImage,
+    BubbleMap,
+    BubbleAudio,
+  },
+  props: ['data'],
+  mixins: [timeMixin],
+  data() {
+    return {
+      isHovered: false,
+    };
+  },
+  computed: {
+    message() {
+      const linkifiedMessage = this.linkify(this.data.content);
+      return linkifiedMessage.replace(/\n/g, '<br>');
+    },
+    alignBubble() {
+      return this.data.message_type === 1 ? 'right' : 'left';
+    },
+    readableTime() {
+      return this.messageStamp(this.data.created_at);
+    },
+    isBubble() {
+      return this.data.message_type === 1 || this.data.message_type === 0;
+    },
+    isPrivate() {
+      return this.data.private;
+    },
+    toolTipMessage() {
+      return this.data.private ? { content: this.$t('CONVERSATION.VISIBLE_TO_AGENTS'), classes: 'top' } : false;
+    },
+    sentByMessage() {
+      return this.data.message_type === 1 && !this.isHovered && this.data.sender !== undefined ?
+        { content: `Sent by: ${this.data.sender.name}`, classes: 'top' } : false;
+    },
+    wrapClass() {
+      return {
+        wrap: this.isBubble,
+        'activity-wrap': !this.isBubble,
+      };
+    },
+
+  },
+  methods: {
+    getEmojiSVG,
+    linkify(text) {
+      if (!text) return text;
+      const urlRegex = /(https?:\/\/[^\s]+)/g;
+      return text.replace(urlRegex, url => `<a href="${url}" target="_blank">${url}</a>`);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="medium-8 columns conversation-wrap">
+    <div v-if="currentChat.id !== null" class="view-box columns">
+      <conversation-header :chat="currentChat" />
+      <ul class="conversation-panel">
+        <transition name="slide-up">
+          <li>
+            <span v-if="shouldShowSpinner" class="spinner message" />
+          </li>
+        </transition>
+        <conversation
+          v-for="message in getReadMessages"
+          :key="message.id"
+          :data="message"
+        />
+        <li v-show="getUnreadCount != 0" class="unread--toast">
+          <span>
+            {{ getUnreadCount }} UNREAD MESSAGE{{
+              getUnreadCount > 1 ? 'S' : ''
+            }}
+          </span>
+        </li>
+        <conversation
+          v-for="message in getUnReadMessages"
+          :key="message.id"
+          :data="message"
+        />
+      </ul>
+      <ReplyBox
+        :conversation-id="currentChat.id"
+        @scrollToMessage="focusLastMessage"
+      />
+    </div>
+    <!-- No Conversation Selected -->
+    <div class="columns full-height conv-empty-state">
+      <!-- Loading status -->
+      <woot-loading-state
+        v-if="fetchingInboxes || loadingChatList"
+        :message="loadingIndicatorMessage"
+      />
+      <!-- Show empty state images if not loading -->
+      <div v-if="!fetchingInboxes && !loadingChatList" class="current-chat">
+        <!-- No inboxes attached -->
+        <div v-if="!inboxesList.length">
+          <img src="~dashboard/assets/images/inboxes.svg" alt="No Inboxes" />
+          <span v-if="isAdmin()">
+            {{ $t('CONVERSATION.NO_INBOX_1') }}
+            <br />
+            <router-link :to="newInboxURL">
+              {{ $t('CONVERSATION.CLICK_HERE') }}
+            </router-link>
+            {{ $t('CONVERSATION.NO_INBOX_2') }}
+          </span>
+          <span v-if="!isAdmin()">
+            {{ $t('CONVERSATION.NO_INBOX_AGENT') }}
+          </span>
+        </div>
+        <!-- No conversations available -->
+        <div v-else-if="!allConversations.length">
+          <img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
+          <span>
+            {{ $t('CONVERSATION.NO_MESSAGE_1') }}
+            <br />
+            <a :href="linkToMessage" target="_blank">
+              {{ $t('CONVERSATION.CLICK_HERE') }}
+            </a>
+            {{ $t('CONVERSATION.NO_MESSAGE_2') }}
+          </span>
+        </div>
+        <!-- No conversation selected -->
+        <div v-else-if="allConversations.length && currentChat.id === null">
+          <img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
+          <span>{{ $t('CONVERSATION.404') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint no-console: 0 */
+/* eslint no-extra-boolean-cast: 0 */
+/* global bus */
+import { mapGetters } from 'vuex';
+
+import ConversationHeader from './ConversationHeader';
+import ReplyBox from './ReplyBox';
+import Conversation from './Conversation';
+import conversationMixin from '../../../mixins/conversations';
+import adminMixin from '../../../mixins/isAdmin';
+import { frontendURL } from '../../../helper/URLHelper';
+
+export default {
+  components: {
+    ConversationHeader,
+    Conversation,
+    ReplyBox,
+  },
+
+  mixins: [conversationMixin, adminMixin],
+
+  props: {
+    inboxId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoadingPrevious: true,
+      heightBeforeLoad: null,
+      conversationPanel: null,
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      allConversations: 'getAllConversations',
+      inboxesList: 'getInboxesList',
+      listLoadingStatus: 'getAllMessagesLoaded',
+      getUnreadCount: 'getUnreadCount',
+      fetchingInboxes: 'getInboxLoadingStatus',
+      loadingChatList: 'getChatListLoadingStatus',
+    }),
+    // Loading indicator
+    // Returns corresponding loading message
+    loadingIndicatorMessage() {
+      if (this.fetchingInboxes) {
+        return this.$t('CONVERSATION.LOADING_INBOXES');
+      }
+      return this.$t('CONVERSATION.LOADING_CONVERSATIONS');
+    },
+    getMessages() {
+      const [chat] = this.allConversations.filter(
+        c => c.id === this.currentChat.id
+      );
+      return chat;
+    },
+    // Get current FB Page ID
+    getPageId() {
+      let stateInbox;
+      if (this.inboxId) {
+        const inboxId = Number(this.inboxId);
+        [stateInbox] = this.inboxesList.filter(
+          inbox => inbox.channel_id === inboxId
+        );
+      } else {
+        [stateInbox] = this.inboxesList;
+      }
+      return !stateInbox ? 0 : stateInbox.pageId;
+    },
+    // Get current FB Page ID link
+    linkToMessage() {
+      return `https://m.me/${this.getPageId}`;
+    },
+    getReadMessages() {
+      const chat = this.getMessages;
+      return chat === undefined ? null : this.readMessages(chat);
+    },
+    getUnReadMessages() {
+      const chat = this.getMessages;
+      return chat === undefined ? null : this.unReadMessages(chat);
+    },
+    shouldShowSpinner() {
+      return (
+        this.getMessages.dataFetched === undefined ||
+        (!this.listLoadingStatus && this.isLoadingPrevious)
+      );
+    },
+
+    newInboxURL() {
+      return frontendURL('settings/inboxes/new');
+    },
+
+    shouldLoadMoreChats() {
+      return !this.listLoadingStatus && !this.isLoadingPrevious;
+    },
+  },
+
+  created() {
+    bus.$on('scrollToMessage', () => {
+      this.focusLastMessage();
+      this.makeMessagesRead();
+    });
+  },
+
+  methods: {
+    focusLastMessage() {
+      setTimeout(() => {
+        this.attachListner();
+      }, 0);
+    },
+
+    attachListner() {
+      this.conversationPanel = this.$el.querySelector('.conversation-panel');
+      this.heightBeforeLoad =
+        this.getUnreadCount === 0
+          ? this.conversationPanel.scrollHeight
+          : this.$el.querySelector('.conversation-panel .unread--toast')
+              .offsetTop - 56;
+      this.conversationPanel.scrollTop = this.heightBeforeLoad;
+      this.conversationPanel.addEventListener('scroll', this.handleScroll);
+      this.isLoadingPrevious = false;
+    },
+
+    handleScroll(e) {
+      const dataFetchCheck =
+        this.getMessages.dataFetched === true && this.shouldLoadMoreChats;
+      if (
+        e.target.scrollTop < 100 &&
+        !this.isLoadingPrevious &&
+        dataFetchCheck
+      ) {
+        this.isLoadingPrevious = true;
+        this.$store
+          .dispatch('fetchPreviousMessages', {
+            id: this.currentChat.id,
+            before: this.getMessages.messages[0].id,
+          })
+          .then(() => {
+            this.conversationPanel.scrollTop =
+              this.conversationPanel.scrollHeight -
+              (this.heightBeforeLoad - this.conversationPanel.scrollTop);
+            this.isLoadingPrevious = false;
+            this.heightBeforeLoad =
+              this.getUnreadCount === 0
+                ? this.conversationPanel.scrollHeight
+                : this.$el.querySelector('.conversation-panel .unread--toast')
+                    .offsetTop - 56;
+          });
+      }
+    },
+
+    makeMessagesRead() {
+      if (this.getUnreadCount !== 0 && this.getMessages !== undefined) {
+        this.$store.dispatch('markMessagesRead', {
+          id: this.currentChat.id,
+          lastSeen: this.getMessages.messages.last().created_at,
+        });
+      }
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="conversation"
+    :class="{ active: isActiveChat, 'unread-chat': hasUnread }"
+    @click="cardClick(chat)"
+  >
+    <Thumbnail
+      :src="chat.meta.sender.thumbnail"
+      :badge="chat.meta.sender.channel"
+      class="columns"
+    />
+    <div class="conversation--details columns">
+      <h4 class="conversation--user">
+        {{ chat.meta.sender.name }}
+        <span
+          v-if="isInboxNameVisible"
+          v-tooltip.bottom="inboxName(chat.inbox_id)"
+          class="label"
+        >
+          {{ inboxName(chat.inbox_id) }}
+        </span>
+      </h4>
+      <p
+        class="conversation--message"
+        v-html="extractMessageText(lastMessage(chat))"
+      ></p>
+
+      <div class="conversation--meta">
+        <span class="timestamp">
+          {{ dynamicTime(lastMessage(chat).created_at) }}
+        </span>
+        <span class="unread">{{ getUnreadCount }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/* eslint no-console: 0 */
+/* eslint no-extra-boolean-cast: 0 */
+import { mapGetters } from 'vuex';
+import Thumbnail from '../Thumbnail';
+import getEmojiSVG from '../emoji/utils';
+import conversationMixin from '../../../mixins/conversations';
+import timeMixin from '../../../mixins/time';
+import router from '../../../routes';
+import { frontendURL } from '../../../helper/URLHelper';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+
+  mixins: [timeMixin, conversationMixin],
+  props: {
+    chat: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      inboxesList: 'getInboxesList',
+      activeInbox: 'getSelectedInbox',
+    }),
+
+    isActiveChat() {
+      return this.currentChat.id === this.chat.id;
+    },
+
+    getUnreadCount() {
+      return this.unreadMessagesCount(this.chat);
+    },
+
+    hasUnread() {
+      return this.getUnreadCount > 0;
+    },
+
+    isInboxNameVisible() {
+      return !this.activeInbox;
+    },
+  },
+
+  methods: {
+    cardClick(chat) {
+      router.push({
+        path: frontendURL(`conversations/${chat.id}`),
+      });
+    },
+    extractMessageText(chatItem) {
+      if (chatItem.content) {
+        return chatItem.content;
+      }
+      let fileType = '';
+      if (chatItem.attachment) {
+        fileType = chatItem.attachment.file_type;
+      } else {
+        return ' ';
+      }
+      const key = `CHAT_LIST.ATTACHMENTS.${fileType}`;
+      return `
+        <i class="${this.$t(`${key}.ICON`)}"></i>
+        ${this.$t(`${key}.CONTENT`)}
+      `;
+    },
+    getEmojiSVG,
+    inboxName(inboxId) {
+      const [stateInbox] = this.inboxesList.filter(
+        inbox => inbox.channel_id === inboxId
+      );
+      return !stateInbox ? '' : stateInbox.label;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="conv-header">
+    <div class="user">
+      <Thumbnail
+        :src="chat.meta.sender.thumbnail"
+        size="40px"
+        :badge="chat.meta.sender.channel"
+      />
+      <h3 class="user--name">{{chat.meta.sender.name}}</h3>
+    </div>
+    <div class="flex-container">
+      <div class="multiselect-box ion-headphone">
+        <multiselect
+          v-model="currentChat.meta.assignee"
+          :options="agentList"
+          label="name"
+          @select="assignAgent"
+          :allow-empty="true"
+          deselect-label="Remove"
+          placeholder="Select Agent"
+          selected-label=''
+          select-label="Assign"
+          track-by="id"
+          @remove="removeAgent"
+        />
+      </div>
+      <ResolveButton />
+    </div>
+  </div>
+
+
+</template>
+<script>
+
+/* eslint no-console: 0 */
+/* eslint no-param-reassign: 0 */
+/* eslint no-shadow: 0 */
+/* global bus */
+
+import { mapGetters } from 'vuex';
+import Thumbnail from '../Thumbnail';
+import ResolveButton from '../../buttons/ResolveButton';
+import EmojiInput from '../emoji/EmojiInput';
+
+export default {
+  props: [
+    'chat',
+  ],
+
+  data() {
+    return {
+      currentChatAssignee: null,
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      agents: 'getVerifiedAgents',
+      currentChat: 'getSelectedChat',
+    }),
+    agentList() {
+      return [
+        {
+          confirmed: true,
+          name: 'None',
+          id: 0,
+          role: 'agent',
+          account_id: 0,
+          email: 'None',
+        },
+        ...this.agents,
+      ];
+    },
+  },
+
+  methods: {
+    assignAgent(agent) {
+      this.$store.dispatch('assignAgent', [this.currentChat.id, agent.id]).then((response) => {
+        console.log('assignAgent', response);
+        bus.$emit('newToastMessage', this.$t('CONVERSATION.CHANGE_AGENT'));
+      });
+    },
+
+    removeAgent(agent) {
+      console.log(agent.email);
+    },
+  },
+
+  components: {
+    Thumbnail,
+    ResolveButton,
+    EmojiInput,
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="reply-box">
+    <div class="reply-box__top" :class="{ 'is-private': private }">
+      <canned-response
+        v-on-clickaway="hideCannedResponse"
+        data-dropdown-menu
+        :on-keyenter="replaceText"
+        :on-click="replaceText"
+        v-if="showCannedModal"
+      />
+      <emoji-input v-on-clickaway="hideEmojiPicker" :on-click="emojiOnClick" v-if="showEmojiPicker"/>
+      <textarea
+        rows="1"
+        v-model="message"
+        class="input"
+        type="text"
+        @click="onClick()"
+        @blur="onBlur()"
+        v-bind:placeholder="$t(messagePlaceHolder())"
+        ref="messageInput"
+      />
+      <i class="icon ion-happy-outline" :class="{ active: showEmojiPicker}" @click="toggleEmojiPicker()"></i>
+    </div>
+
+    <div class="reply-box__bottom" >
+      <ul class="tabs">
+        <li class="tabs-title" v-bind:class="{ 'is-active': !private }">
+          <a href="#" @click="makeReply" >Reply</a>
+        </li>
+        <li class="tabs-title is-private" v-bind:class="{ 'is-active': private }">
+          <a href="#" @click="makePrivate">Private Note</a>
+        </li>
+        <li class="tabs-title message-length" v-if="message.length">
+          <a :class="{ 'message-error': message.length > 620 }">{{ message.length }} / 640</a>
+        </li>
+      </ul>
+      <button
+        @click="sendMessage"
+        type="button"
+        class="button send-button"
+        :disabled="disableButton()"
+        v-bind:class="{ 'disabled': message.length === 0 || message.length > 640,
+                        'warning': private }"
+      >
+        {{ private ? $t('CONVERSATION.REPLYBOX.CREATE') : $t('CONVERSATION.REPLYBOX.SEND') }}
+        <i class="icon" :class="{ 'ion-android-send': !private, 'ion-android-lock': private }"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint no-console: 0 */
+
+import { mapGetters } from 'vuex';
+import emojione from 'emojione';
+import { mixin as clickaway } from 'vue-clickaway';
+
+import EmojiInput from '../emoji/EmojiInput';
+import CannedResponse from './CannedResponse';
+
+export default {
+  mixins: [clickaway],
+  data() {
+    return {
+      message: '',
+      private: false,
+      showEmojiPicker: false,
+      showCannedModal: false,
+    };
+  },
+  computed: mapGetters({
+    currentChat: 'getSelectedChat',
+  }),
+  components: {
+    EmojiInput,
+    CannedResponse,
+  },
+  mounted() {
+    /* eslint-disable no-confusing-arrow */
+    document.addEventListener('keydown', (e) => {
+      if (this.isEscape(e)) {
+        this.hideEmojiPicker();
+        this.hideCannedResponse();
+      }
+      if (this.isEnter(e)) {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.sendMessage();
+        }
+      }
+    });
+  },
+  watch: {
+    message(val) {
+      if (this.private) {
+        return;
+      }
+      const isSlashCommand = val[0] === '/';
+      const hasNextWord = val.indexOf(' ') > -1;
+      const isShortCodeActive = isSlashCommand && !hasNextWord;
+      if (isShortCodeActive) {
+        this.showCannedModal = true;
+        if (val.length > 1) {
+          const searchKey = val.substr(1, val.length);
+          this.$store.dispatch('searchCannedResponse', {
+            searchKey,
+          });
+        } else {
+          this.$store.dispatch('fetchCannedResponse');
+        }
+      } else {
+        this.showCannedModal = false;
+      }
+    },
+  },
+  methods: {
+    isEnter(e) {
+      return e.keyCode === 13;
+    },
+    isEscape(e) {
+      return e.keyCode === 27;  // ESCAPE
+    },
+    sendMessage() {
+      const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
+      if (messageHasOnlyNewLines) {
+        return;
+      }
+      const messageAction = this.private ? 'addPrivateNote' : 'sendMessage';
+      if (this.message.length !== 0 && !this.showCannedModal) {
+        this.$store.dispatch(messageAction, [this.currentChat.id, this.message]).then(() => {
+          this.$emit('scrollToMessage');
+        });
+        this.clearMessage();
+        this.hideEmojiPicker();
+      }
+    },
+    replaceText(message) {
+      setTimeout(() => {
+        this.message = message;
+      }, 200);
+    },
+    makePrivate() {
+      this.private = true;
+      this.$refs.messageInput.focus();
+    },
+    makeReply() {
+      this.private = false;
+      this.$refs.messageInput.focus();
+    },
+    emojiOnClick(emoji) {
+      this.message = emojione.shortnameToUnicode(`${this.message}${emoji.shortname} `);
+    },
+    clearMessage() {
+      this.message = '';
+    },
+    toggleEmojiPicker() {
+      this.showEmojiPicker = !this.showEmojiPicker;
+    },
+    hideEmojiPicker() {
+      if (this.showEmojiPicker) {
+        this.toggleEmojiPicker();
+      }
+    },
+    hideCannedResponse() {
+      this.showCannedModal = false;
+    },
+
+    onBlur() {
+      this.toggleTyping('off');
+    },
+    onClick() {
+      this.markSeen();
+      this.toggleTyping('on');
+    },
+    markSeen() {
+      this.$store.dispatch('markSeen', {
+        inboxId: this.currentChat.inbox_id,
+        senderId: this.currentChat.meta.sender.id,
+      });
+    },
+
+    toggleTyping(flag) {
+      this.$store.dispatch('toggleTyping', {
+        flag,
+        inboxId: this.currentChat.inbox_id,
+        senderId: this.currentChat.meta.sender.id,
+      });
+    },
+    disableButton() {
+      const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
+      return this.message.length === 0 || this.message.length > 640 || messageHasOnlyNewLines;
+    },
+
+    messagePlaceHolder() {
+      const placeHolder = this.private ? 'CONVERSATION.FOOTER.PRIVATE_MSG_INPUT' : 'CONVERSATION.FOOTER.MSG_INPUT';
+      return placeHolder;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  .send-button {
+    margin-bottom: 0;
+  }
+</style>

app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="audio message-text__wrap">
+    <a-player
+      :music="playerOptions"
+      mode="order"
+    />
+    <span class="time">{{readableTime}}</span>
+  </div>
+</template>
+
+<script>
+import APlayer from 'vue-aplayer';
+
+export default {
+  components: {
+    APlayer,
+  },
+  props: [
+    'url',
+    'readableTime',
+  ],
+  data() {
+    return {
+      musicObj: {
+        title: ' ',
+        author: ' ',
+        autoplay: false,
+        narrow: true,
+      },
+    };
+  },
+  computed: {
+    playerOptions() {
+      return {
+        ...this.musicObj,
+        url: this.url,
+      };
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="image message-text__wrap">
+    <img
+      :src="url"
+      v-on:click="onClick"
+    />
+    <span class="time">{{readableTime}}</span>
+    <woot-modal :show.sync="show" :on-close="onClose">
+      <img
+        :src="url"
+        class="modal-image"
+      />
+    </woot-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'url',
+    'readableTime',
+  ],
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.show = false;
+    },
+    onClick() {
+      this.show = true;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Map.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="map message-text__wrap">
+    <img
+      :src="locUrl"
+    />
+    <span class="locname">{{label || ' '}}</span>
+    <span class="time">{{readableTime}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'lat',
+    'lng',
+    'label',
+    'readableTime',
+  ],
+  data() {
+    return {
+      accessToken: 'pk.eyJ1IjoiY2hhdHdvb3QiLCJhIjoiY2oyazVsM3d0MDBmYjJxbmkyYXlwY3hzZyJ9.uWUdfItb0sSZQ4nfwlmuPg',
+      zoomLevel: 14,
+      mapType: 'mapbox.streets',
+      apiEndPoint: 'https://api.mapbox.com/v4/',
+      h: 100,
+      w: 150,
+    };
+  },
+  computed: {
+    locUrl() {
+      const { apiEndPoint, mapType, lat, lng, zoomLevel, h, w, accessToken } = this;
+      return `${apiEndPoint}${mapType}/${lng},${lat},${zoomLevel}/${w}x${h}.png?access_token=${accessToken}`;
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -0,0 +1,15 @@
+<template>
+  <span class="message-text__wrap">
+    <span v-html="message" class="message-text"></span>
+    <span class="time">{{readableTime}}</span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: [
+    'message',
+    'readableTime',
+  ],
+};
+</script>

app/javascript/dashboard/components/widgets/emoji/EmojiInput.vue

@@ -0,0 +1,103 @@
+<template>
+  <div role="dialog" class="emoji-dialog">
+    <header class="emoji-dialog-header" role="menu">
+      <ul>
+        <li
+          v-bind:class="{ 'active': selectedKey === category.key }"
+          v-for="category in categoryList"
+          @click="changeCategory(category)"
+        >
+          <div
+            @click="changeCategory(category)"
+            role="menuitem"
+            class="emojione"
+            v-html="getEmojiUnicode(`:${category.emoji}:`)"
+          >
+          </div>
+        </li>
+      </ul>
+    </header>
+    <div class="emoji-row">
+      <h5 class="emoji-category-title">{{selectedKey}}</h5>
+      <div
+        v-for="(emoji, key) in selectedEmojis"
+        role="menuitem"
+        :class="`emojione`"
+        v-html="getEmojiUnicode(emoji[emoji.length - 1].shortname)"
+        v-if="filterEmoji(emoji[emoji.length - 1].shortname)"
+        track-by="$index"
+        @click="onClick(emoji[emoji.length - 1])"
+      />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import strategy from 'emojione/emoji.json';
+import categoryList from './categories';
+import { getEmojiUnicode } from './utils';
+
+export default {
+  props: ['onClick'],
+  data() {
+    return {
+      selectedKey: 'people',
+      categoryList,
+      selectedEmojis: [],
+    };
+  },
+  computed: {
+    emojis() {
+      const emojiArr = {};
+
+      // categorise and nest emoji
+      // sort ensures that modifiers appear unmodified keys
+      const keys = Object.keys(strategy);
+      for (const key of keys) {
+        const value = strategy[key];
+
+        // skip unknown categoryList
+        if (value.category !== 'modifier') {
+          if (!emojiArr[value.category]) emojiArr[value.category] = {};
+          const match = key.match(/(.*?)_tone(.*?)$/);
+
+          if (match) {
+            // this check is to stop the plugin from failing in the case that the
+            // emoji strategy miscategorizes tones - which was the case here:
+            const unmodifiedEmojiExists = !!emojiArr[value.category][match[1]];
+            if (unmodifiedEmojiExists) {
+              emojiArr[value.category][match[1]][match[2]] = value;
+            }
+          } else {
+            emojiArr[value.category][key] = [value];
+          }
+        }
+      }
+      return emojiArr;
+    },
+  },
+  // On mount render initial emoji
+  mounted() {
+    this.getInitialEmoji();
+  },
+  methods: {
+
+    // Change category and associated emojis
+    changeCategory(category) {
+      this.selectedKey = category.key;
+      this.selectedEmojis = this.emojis[this.selectedKey];
+    },
+
+    // Filter non-existant or irregular unicode characters
+    filterEmoji(shortName) {
+      return shortName !== ':relaxed:' && shortName !== ':frowning2:';
+    },
+    // Get inital emojis
+    getInitialEmoji() {
+      this.selectedEmojis = this.emojis.people;
+    },
+    getEmojiUnicode,
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/emoji/categories.js

@@ -0,0 +1,42 @@
+export default [ // eslint-disable-line
+  {
+    key: 'people',
+    title: 'People',
+    emoji: 'smile',
+  },
+  {
+    key: 'nature',
+    title: 'Nature',
+    emoji: 'hamster',
+  },
+  {
+    key: 'food',
+    title: 'Food & Drink',
+    emoji: 'pizza',
+  },
+  {
+    key: 'activity',
+    title: 'Activity',
+    emoji: 'soccer',
+  },
+  {
+    key: 'travel',
+    title: 'Travel & Places',
+    emoji: 'earth_americas',
+  },
+  {
+    key: 'objects',
+    title: 'Objects',
+    emoji: 'bulb',
+  },
+  {
+    key: 'symbols',
+    title: 'Symbols',
+    emoji: 'clock9',
+  },
+  {
+    key: 'flags',
+    title: 'Flags',
+    emoji: 'flag_gb',
+  },
+];

app/javascript/dashboard/components/widgets/emoji/utils.js

@@ -0,0 +1,9 @@
+import emojione from 'emojione';
+/* eslint-disable */
+export default function (value, method = 'shortnameToImage') {
+  return emojione[method](value);
+}
+
+export function getEmojiUnicode(value) {
+  return emojione.shortnameToUnicode(value);
+}