fix: conditional json syntax highlighting based on received msg type

Author: nktnet1

web/src/components/MessageList.vue

@@ -9,7 +9,12 @@
       <DynamicScroller v-if="showMessages.length" :items="showMessages" :min-item-size="40" class="scroller">
         <template v-slot="{ item, active }">
           <DynamicScrollerItem :item="item" :active="active" :data-index="item.id">
-            <MsgLeftItem v-if="!item.out" v-bind="item" @showmenu="handleShowContextMenu(arguments, item)" />
+            <MsgLeftItem
+              v-if="!item.out"
+              v-bind="item"
+              :receivedMsgType="receivedMsgType"
+              @showmenu="handleShowContextMenu(arguments, item)"
+            />
             <MsgRightItem v-else v-bind="item" @showmenu="handleShowContextMenu(arguments, item)" />
           </DynamicScrollerItem>
         </template>
@@ -40,6 +45,7 @@ export default class MessageList extends Vue {
   @Prop({ required: true }) subscriptions!: SubscriptionModel[]
   @Prop({ required: true }) marginTop!: number
   @Prop({ required: true }) addNewMsg!: boolean
+  @Prop({ required: true }) receivedMsgType!: string
 
   public showMessages: MessageModel[] = []
   private scrollTop: number = -1

web/src/components/MsgLeftItem.vue

@@ -32,7 +32,8 @@
           />
         </p>
       </div>
-      <highlightjs autodetect :code="payload" />
+      <highlightjs v-if="receivedMsgType === 'JSON'" language="json" :code="payload" />
+      <pre v-else>{{ payload }}</pre>
     </div>
     <p class="left-time time">{{ createAt }}</p>
   </div>
@@ -55,6 +56,7 @@ export default class MsgLeftItem extends Vue {
   @Prop({ required: false, default: false }) public retain!: boolean
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
   @Prop({ required: false, default: '' }) public color!: string
+  @Prop({ required: true }) receivedMsgType!: string
 
   private customMenu(event: MouseEvent) {
     this.$emit('showmenu', this.payload, event)

web/src/views/connections/ConnectionsDetail.vue

@@ -160,6 +160,7 @@
           :height="messageListHeight"
           :marginTop="messageListMarginTop"
           :addNewMsg="messagesAddedNewItem"
+          :receivedMsgType="receivedMsgType"
           @showContextMenu="handleContextMenu"
         />
         <contextmenu :visible.sync="showContextmenu" v-bind="contextmenuConfig">