Feature: Support card options in widget and dashboard #594 (#609)

app/javascript/shared/components/CardButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <a
+    v-if="isLink"
+    :key="action.uri"
+    class="action-button button"
+    :href="action.uri"
+  >
+    {{ action.text }}
+  </a>
+  <button
+    v-else
+    :key="action.payload"
+    class="action-button button"
+    @click="onClick"
+  >
+    {{ action.text }}
+  </button>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    action: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    isLink() {
+      return this.action.type === 'link';
+    },
+  },
+  methods: {
+    onClick() {
+      // Do postback here
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+@import '~dashboard/assets/scss/mixins.scss';
+
+.action-button {
+  width: 100%;
+  padding: 0;
+  max-height: 34px;
+  margin-top: $space-smaller;
+  border-radius: $space-micro;
+  font-weight: $font-weight-medium;
+
+  + .action-button {
+    background: white;
+    @include thin-border($color-woot);
+    color: $color-woot;
+  }
+}
+</style>

app/javascript/shared/components/ChatCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="card-message chat-bubble agent">
+    <img class="media" :src="mediaUrl" />
+    <div class="card-body">
+      <h4 class="title">
+        {{ title }}
+      </h4>
+      <p class="body">
+        {{ description }}
+      </p>
+      <card-button
+        v-for="action in actions"
+        :key="action.id"
+        :action="action"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CardButton from 'shared/components/CardButton';
+
+export default {
+  components: {
+    CardButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    mediaUrl: {
+      type: String,
+      default: '',
+    },
+    actions: {
+      type: Array,
+      default: () => [],
+    },
+    showAvatar: Boolean,
+  },
+  computed: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+@import '~dashboard/assets/scss/mixins.scss';
+
+.card-message {
+  @include border-normal;
+  background: white;
+  max-width: 220px;
+  padding: $space-small;
+  border-radius: $space-small;
+  overflow: hidden;
+
+  .title {
+    font-size: $font-size-default;
+    font-weight: $font-weight-medium;
+    margin-top: $space-smaller;
+    margin-bottom: $space-smaller;
+    color: $color-heading;
+    line-height: 1.5;
+  }
+
+  .body {
+    color: $color-body;
+    margin-bottom: $space-smaller;
+  }
+
+  .media {
+    @include border-light;
+    width: 100%;
+    object-fit: contain;
+    max-height: 150px;
+  }
+}
+</style>