better-ish chat box

static/components/chat-dialog/chat-dialog.html

@@ -1,9 +1,9 @@
-<div class="q-mr-lg">
-  <q-btn dense round flat icon="chat" @click="dialog = true" />
+<div class="q-mr-md">
+  <q-btn dense round flat icon="chat" @click="startDialog" />
   <q-dialog
     v-model="dialog"
     persistent
-    :maximized="maximizedToggle"
+    maximized
     transition-show="slide-up"
     transition-hide="slide-down"
   >
@@ -13,77 +13,57 @@
         <div>Chat Box</div>
 
         <q-space></q-space>
-        <q-btn
-          dense
-          flat
-          icon="minimize"
-          @click="maximizedToggle = false"
-          :disable="!maximizedToggle"
-        >
-          <q-tooltip
-            v-if="maximizedToggle"
-            content-class="bg-white text-primary"
-            >Minimize</q-tooltip
-          >
-        </q-btn>
-        <q-btn
-          dense
-          flat
-          icon="crop_square"
-          @click="maximizedToggle = true"
-          :disable="maximizedToggle"
-        >
-          <q-tooltip
-            v-if="!maximizedToggle"
-            content-class="bg-white text-primary"
-            >Maximize</q-tooltip
-          >
-        </q-btn>
-        <q-btn dense flat icon="close" v-close-popup>
+
+        <q-btn dense flat icon="close" @click="closeDialog">
           <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
 
-      <q-card-section class="absolute-bottom">
-        <div class="chat-container" ref="chatCard">
-          <div class="chat-box">
-            <!-- <p v-if="Object.keys(messages).length === 0">No messages yet</p> -->
-            <div class="chat-messages">
-              <q-chat-message
-                :key="index"
-                v-for="(message, index) in sortedMessages"
-                :name="message.sender"
-                :text="[message.msg]"
-                :sent="message.sender == 'Me'"
-                :bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
-              />
-            </div>
-          </div>
-          <q-card-section>
-            <q-form @submit="sendMessage" class="full-width chat-input">
-              <q-input
-                ref="newMessage"
-                v-model="newMessage"
-                placeholder="Message"
-                class="full-width"
-                dense
-                outlined
-              >
-                <template>
-                  <q-btn
-                    round
-                    dense
-                    flat
-                    type="submit"
-                    icon="send"
-                    color="primary"
-                  />
-                </template>
-              </q-input>
-            </q-form>
-          </q-card-section>
-        </div>
+      <q-card-section
+        style="
+          height: calc(100vh - 120px);
+          overflow-y: scroll;
+          display: flex;
+          flex-direction: column-reverse;
+        "
+      >
+        <q-chat-message
+          :key="index"
+          v-for="(message, index) in sortedMessages"
+          :name="message.sender"
+          :text="[message.msg]"
+          :sent="message.sender == 'Me'"
+          :bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
+          :stamp="`${timeFromNow(message.timestamp * 1000)}`"
+          size="6"
+        />
       </q-card-section>
+      <q-card-actions>
+        <q-form @submit="sendMessage" class="full-width chat-input">
+          <q-input
+            ref="newMessage"
+            v-model="newMessage"
+            placeholder="Message"
+            class="full-width"
+            dense
+            outlined
+          >
+            <template>
+              <q-btn
+                round
+                dense
+                flat
+                type="submit"
+                icon="send"
+                color="primary"
+              />
+            </template>
+          </q-input>
+        </q-form>
+      </q-card-actions>
+      <q-inner-loading :showing="loading">
+        <q-spinner-cube size="50px" color="primary" />
+      </q-inner-loading>
     </q-card>
   </q-dialog>
 </div>

static/components/chat-dialog/chat-dialog.js

@@ -9,7 +9,7 @@ async function chatDialog(path) {
     data: function () {
       return {
         dialog: false,
-        maximizedToggle: true,
+        loading: false,
         pool: null,
         nostrMessages: [],
         newMessage: ''
@@ -17,11 +17,22 @@ async function chatDialog(path) {
     },
     computed: {
       sortedMessages() {
-        return this.nostrMessages.sort((a, b) => a.timestamp - b.timestamp)
+        return this.nostrMessages.sort((a, b) => b.timestamp - a.timestamp)
       }
     },
     methods: {
+      async startDialog() {
+        this.dialog = true
+        await this.startPool()
+      },
+      async closeDialog() {
+        this.dialog = false
+        await this.pool.close(Array.from(this.relays))
+      },
       async startPool() {
+        this.loading = true
+        this.pool = new NostrTools.SimplePool()
+        let messagesMap = new Map()
         let sub = this.pool.sub(Array.from(this.relays), [
           {
             kinds: [4],
@@ -32,6 +43,10 @@ async function chatDialog(path) {
             '#p': [this.account.pubkey]
           }
         ])
+        sub.on('eose', () => {
+          this.loading = false
+          this.nostrMessages = Array.from(messagesMap.values())
+        })
         sub.on('event', async event => {
           let mine = event.pubkey == this.account.pubkey
           let sender = mine
@@ -52,8 +67,7 @@ async function chatDialog(path) {
                 event.content
               )
             }
-            this.nostrMessages.push({
-              id: event.id,
+            messagesMap.set(event.id, {
               msg: plaintext,
               timestamp: event.created_at,
               sender: `${mine ? 'Me' : 'Merchant'}`
@@ -62,6 +76,10 @@ async function chatDialog(path) {
             console.error('Unable to decrypt message!')
           }
         })
+        setTimeout(() => {
+          this.nostrMessages = Array.from(messagesMap.values())
+          this.loading = false
+        }, 5000)
       },
       async sendMessage() {
         if (this.newMessage && this.newMessage.length < 1) return
@@ -128,16 +146,67 @@ async function chatDialog(path) {
           event = await window.nostr.signEvent(event)
         }
         return event
+      },
+      timeFromNow(time) {
+        // Get timestamps
+        let unixTime = new Date(time).getTime()
+        if (!unixTime) return
+        let now = new Date().getTime()
+
+        // Calculate difference
+        let difference = unixTime / 1000 - now / 1000
+
+        // Setup return object
+        let tfn = {}
+
+        // Check if time is in the past, present, or future
+        tfn.when = 'now'
+        if (difference > 0) {
+          tfn.when = 'future'
+        } else if (difference < -1) {
+          tfn.when = 'past'
+        }
+
+        // Convert difference to absolute
+        difference = Math.abs(difference)
+
+        // Calculate time unit
+        if (difference / (60 * 60 * 24 * 365) > 1) {
+          // Years
+          tfn.unitOfTime = 'years'
+          tfn.time = Math.floor(difference / (60 * 60 * 24 * 365))
+        } else if (difference / (60 * 60 * 24 * 45) > 1) {
+          // Months
+          tfn.unitOfTime = 'months'
+          tfn.time = Math.floor(difference / (60 * 60 * 24 * 45))
+        } else if (difference / (60 * 60 * 24) > 1) {
+          // Days
+          tfn.unitOfTime = 'days'
+          tfn.time = Math.floor(difference / (60 * 60 * 24))
+        } else if (difference / (60 * 60) > 1) {
+          // Hours
+          tfn.unitOfTime = 'hours'
+          tfn.time = Math.floor(difference / (60 * 60))
+        } else if (difference / 60 > 1) {
+          // Minutes
+          tfn.unitOfTime = 'minutes'
+          tfn.time = Math.floor(difference / 60)
+        } else {
+          // Seconds
+          tfn.unitOfTime = 'seconds'
+          tfn.time = Math.floor(difference)
+        }
+
+        // Return time from now data
+        return `${tfn.time} ${tfn.unitOfTime}`
       }
     },
     created() {
-      this.pool = new NostrTools.SimplePool()
       setTimeout(() => {
         if (window.nostr) {
           this.hasNip07 = true
         }
       }, 1000)
-      this.startPool()
     }
   })
 }