From 3d053b5e699b38e4955c9e8a0252964888c416d8 Mon Sep 17 00:00:00 2001
From: Samir Vimercati <vimercati.samir@gmail.com>
Date: Wed, 11 May 2022 18:24:28 +0200
Subject: [PATCH] feat(markdown): added markdown preview in sidebar

---
 assets/styles/base.less         | 11 +++++++++++
 components/views/user/User.html |  2 +-
 components/views/user/User.vue  |  2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/styles/base.less b/assets/styles/base.less
index af7ea40b40..d94fcb14bf 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -601,3 +601,14 @@ strong {
 .sidebar-container.swiper-slide.swiper-slide-active {
   transform: none;
 }
+
+.user {
+  .user-info {
+    .subtitle {
+      * {
+        font-size: @micro-text-size;
+        color: @text-muted;
+      }
+    }
+  }
+}
diff --git a/components/views/user/User.html b/components/views/user/User.html
index b5958593e9..ae14661ce7 100644
--- a/components/views/user/User.html
+++ b/components/views/user/User.html
@@ -8,7 +8,7 @@
   <UiUserState :user="user" :isTyping="isTyping" :src="src" />
   <div class="user-info">
     <TypographyTitle :size="6" data-cy="sidebar-user-name" :text="user.name" />
-    <TypographySubtitle :size="6" :text="lastMessage" />
+    <VueMarkdown :source="lastMessage" class="subtitle" />
   </div>
   <div class="user-chat-details">
     <TypographyText :size="6" :text="timestamp" v-if="existConversation" />
diff --git a/components/views/user/User.vue b/components/views/user/User.vue
index e3c3f9b777..604f264ec1 100644
--- a/components/views/user/User.vue
+++ b/components/views/user/User.vue
@@ -3,6 +3,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { mapState, mapGetters } from 'vuex'
+import VueMarkdown from 'vue-markdown'
 
 import { SmartphoneIcon, CircleIcon } from 'satellite-lucide-icons'
 
@@ -29,6 +30,7 @@ declare module 'vue/types/vue' {
 
 export default Vue.extend({
   components: {
+    VueMarkdown,
     SmartphoneIcon,
     CircleIcon,
   },