fix: direct message focus

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

@@ -18,14 +18,16 @@
     <q-card-section>
       <div class="chat-container" ref="chatCard">
         <div class="chat-box">
-          <div class="chat-messages" style="height: 45vh">
+          <div  class="chat-messages" style="height: 45vh">
             <q-chat-message
               v-for="(dm, index) in messages"
               :key="index"
+            
               :name="dm.incoming ? 'customer': 'me'"
               :text="[dm.message]"
               :sent="!dm.incoming"
               :bg-color="dm.incoming ? 'white' : 'light-green-2'"
+              :class="'chat-mesage-index-'+index"
             />
           </div>
         </div>

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

@@ -30,6 +30,8 @@ async function directMessages(path) {
             '### this.messages',
             this.messages.map(m => m.message)
           )
+          this.focusOnChatBox(this.messages.length - 1)
+          
         } catch (error) {
           LNbits.utils.notifyApiError(error)
         }
@@ -48,9 +50,18 @@ async function directMessages(path) {
           this.messages = this.messages.concat([data])
           console.log('###  this.messages', this.messages)
           this.newMessage = ''
+            this.focusOnChatBox(this.messages.length - 1)
         } catch (error) {
           LNbits.utils.notifyApiError(error)
         }
+      },
+      focusOnChatBox: function(index) {
+        setTimeout(() => {
+          const lastChatBox = document.getElementsByClassName(`chat-mesage-index-${index}`);
+          if (lastChatBox && lastChatBox[0]) {
+            lastChatBox[0].scrollIntoView()
+          }
+        }, 100)
       }
     },
     created: async function () {

templates/nostrmarket/index.html

@@ -166,6 +166,7 @@
     margin-left: auto;
     width: 100%;
   }
+  
 </style>
 
 <!-- todo: serve locally -->