Feature: Send images from widget

app/javascript/widget/components/ImageBubble.vue

@@ -1,23 +1,45 @@
 <template>
-  <a :href="url" target="_blank" class="image message-text__wrap">
-    <img :src="url" alt="Picture message" />
-    <span class="time">{{ readableTime }}</span>
+  <a :href="url" target="_blank" class="image">
+    <div class="wrap">
+      <img :src="thumb" alt="Picture message" />
+      <span class="time">{{ readableTime }}</span>
+    </div>
   </a>
 </template>
 
 <script>
 export default {
-  props: ['url', 'readableTime'],
+  props: ['url', 'thumb', 'readableTime'],
 };
 </script>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
 .image {
-  max-width: 100%;
-  position: relative;
   display: block;
 
+  .wrap {
+    position: relative;
+    display: flex;
+    max-width: 100%;
+
+    &::before {
+      $color-black: #000;
+      background-image: linear-gradient(
+        -180deg,
+        transparent 3%,
+        $color-black 70%
+      );
+      bottom: 0;
+      content: '';
+      height: 20%;
+      left: 0;
+      opacity: 0.8;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
   img {
     width: 100%;
   }
@@ -30,21 +52,5 @@ export default {
     right: $space-small;
     white-space: nowrap;
   }
-
-  &::before {
-    $color-black: #000;
-    background-image: linear-gradient(
-      -180deg,
-      transparent 3%,
-      $color-black 70%
-    );
-    bottom: 0;
-    content: '';
-    height: 20%;
-    left: 0;
-    opacity: 0.8;
-    position: absolute;
-    width: 100%;
-  }
 }
 </style>