Client fixes aug 31 (#9010)

* Separated private message model

* Added markdown to profile

* Add color backgrounds

* Added broken challenge flow

* Added summary field to getgroups

* Fixed group form information loading

* Updated autocomplete to use chat

* Fixed npc styles

* Fixed onload mentions

website/client/components/userMenu/profile.vue

@@ -23,7 +23,7 @@ div
         .col-8
           .about
             h2 About
-            p {{user.profile.blurb}}
+            p(v-markdown='user.profile.blurb')
           .photo
             h2 Photo
             img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
@@ -254,11 +254,7 @@ div
               .col-4(v-if='user.stats.points', @click='allocate(stat)')
                  button.btn.btn-primary(popover-trigger='mouseenter', popover-placement='right',
                   :popover='$t(statInfo.allocatepop)') +
-
-    // @TODO: Make separate componenet
-    b-modal#private-message(title="Message", size='sm', :hide-footer="true")
-      textarea.form-control(v-model='privateMessage')
-      button.btn.btn-primary(@click='sendPrivateMessage()') Send
+  private-message-modal(:userIdToMessage='userIdToMessage')
 </template>
 
 <style lang="scss" scoped>
@@ -335,8 +331,9 @@ import { beastMasterProgress, mountMasterProgress } from '../../../common/script
 import statsComputed from  '../../../common/script/libs/statsComputed';
 import autoAllocate from '../../../common/script/fns/autoAllocate';
 import allocate from  '../../../common/script/ops/allocate';
-import notifications from 'client/mixins/notifications';
 
+import privateMessageModal from 'client/components/private-message-modal';
+import markdown from 'client/directives/markdown';
 import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -345,14 +342,16 @@ const DROP_ANIMALS = keys(Content.pets);
 const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
 
 export default {
+  directives: {
+    markdown,
+  },
   components: {
     bModal,
+    privateMessageModal,
   },
-  mixins: [notifications],
   data () {
     return {
       userIdToMessage: '',
-      privateMessage: '',
       editing: false,
       editingProfile: {
         name: '',
@@ -447,15 +446,6 @@ export default {
       this.userIdToMessage = this.user._id;
       this.$root.$emit('show::modal', 'private-message');
     },
-    async sendPrivateMessage () {
-      if (!this.privateMessage || !this.userIdToMessage) return;
-
-      await this.$store.dispatch('members:sendPrivateMessage', {
-        message: this.privateMessage,
-        toUserId: this.userIdToMessage,
-      });
-      this.text(this.$t('messageSentAlert'));
-    },
     getProgressDisplay () {
       // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
       // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');