Feature: Rich Message Types (#610)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/widget/components/template/Article.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="!!items.length" class="chat-bubble agent">
+    <div v-for="item in items" :key="item.link" class="article-item">
+      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
+        <span class="title">
+          <i class="ion-link icon"></i>{{ item.title }}
+        </span>
+        <span class="description">{{ truncateMessage(item.description) }}</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+
+export default {
+  mixins: [messageFormatterMixin],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.article-item {
+  border-bottom: 1px solid $color-border;
+  font-size: $font-size-default;
+  padding: $space-small 0;
+
+  a {
+    color: $color-body;
+    text-decoration: none;
+  }
+
+  .title {
+    color: $color-woot;
+    display: block;
+    font-weight: $font-weight-medium;
+
+    .icon {
+      color: $color-body;
+      font-size: $font-size-medium;
+      padding-right: $space-small;
+    }
+  }
+
+  .description {
+    display: block;
+    margin-top: $space-smaller;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+</style>