feat: show raw message data

static/components/direct-messages/direct-messages.html

@@ -57,9 +57,8 @@
                   <span v-text="dm.message.message"></span><br>
                   <span v-text="dm.message.id"></span>
                 </div>
-                <div v-else>
-                  <span v-text="JSON.stringify(dm.message)"></span>
-                </div>
+                <q-badge @click="showMessageRawData(index)" class="cursor-pointer">...</q-badge>
+               
               </div>
             </q-chat-message>
           </div>
@@ -88,5 +87,15 @@
         </q-form>
       </q-card>
     </q-dialog>
+    <q-dialog v-model="showRawMessage" position="top">
+      <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
+          <q-input filled dense type="textarea" rows="20" v-model.trim="rawMessage" label="Raw Data"></q-input>
+          <div class="row q-mt-lg">
+           
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+          </div>
+        </q-form>
+      </q-card>
+    </q-dialog>
   </div>
 </div>

static/components/direct-messages/direct-messages.js

@@ -40,7 +40,9 @@ async function directMessages(path) {
         messages: [],
         newMessage: '',
         showAddPublicKey: false,
-        newPublicKey: null
+        newPublicKey: null,
+        showRawMessage: false,
+        rawMessage: null,
       }
     },
     methods: {
@@ -141,6 +143,10 @@ async function directMessages(path) {
         await this.getDirectMessages(this.activePublicKey)
         await this.getCustomers()
       },
+      showMessageRawData: function (index) {
+        this.rawMessage = this.messages[index]?.message
+        this.showRawMessage = true
+      },
       focusOnChatBox: function (index) {
         setTimeout(() => {
           const lastChatBox = document.getElementsByClassName(