refactor for better message handling

src/components/SupportChat.vue

@@ -74,29 +74,28 @@ onMounted(async () => {
     const supportPubkeyHex = npubToHex(SUPPORT_NPUB)
     nostrStore.activeChat = supportPubkeyHex
 
-    // Try to subscribe in the background
-    isSubscribing.value = true
-    nostrStore.subscribeToMessages()
-      .catch(err => {
-        console.debug('Support chat subscription error:', err)
-        // Continue anyway - messages will come through when connection succeeds
-      })
-      .finally(() => {
-        isSubscribing.value = false
-      })
+    // Only subscribe if not already subscribed
+    if (!nostrStore.hasActiveSubscription) {
+      isSubscribing.value = true
+      nostrStore.subscribeToMessages()
+        .catch(err => {
+          console.debug('Support chat subscription error:', err)
+        })
+        .finally(() => {
+          isSubscribing.value = false
+        })
+    }
 
     scrollToBottom()
   } catch (err) {
     console.debug('Support chat setup error:', err)
-    // Continue anyway
   }
 })
 
-// Add cleanup on unmount
+// Remove the unsubscribe on unmount since we want to keep the connection
 onUnmounted(() => {
-  if (nostrStore.activeChat) {
-    nostrStore.unsubscribeFromMessages()
-  }
+  // Only clear active chat
+  nostrStore.activeChat = null
 })
 
 // Watch for changes in activeChat
@@ -116,7 +115,11 @@ watch(() => nostrStore.activeChat, async (newChat) => {
 
 function scrollToBottom() {
   if (messagesEndRef.value) {
-    messagesEndRef.value.scrollIntoView({ behavior: 'smooth' })
+    // Get the scroll area element
+    const scrollArea = messagesEndRef.value.closest('.scrollarea-viewport')
+    if (scrollArea) {
+      scrollArea.scrollTop = scrollArea.scrollHeight
+    }
   }
 }
 
@@ -225,7 +228,7 @@ const getMessageGroupClasses = (sent: boolean) => {
               </div>
             </div>
           </template>
-          <div ref="messagesEndRef" />
+          <div ref="messagesEndRef" class="h-px" />
         </div>
       </ScrollArea>
     </CardContent>
@@ -307,14 +310,17 @@ const getMessageGroupClasses = (sent: boolean) => {
 
 :deep(.scrollarea-viewport) {
   height: 100% !important;
-  scroll-behavior: smooth;
 }
 
-/* Ensure the scroll area takes up all available space */
-:deep(.scrollarea-viewport > div) {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+/* Remove any scroll-behavior from parent elements */
+.scrollarea-viewport {
+  scroll-behavior: auto !important;
+}
+
+/* Ensure proper containment */
+.card {
+  position: relative;
+  contain: content;
 }
 
 /* Improved focus styles */
@@ -388,8 +394,4 @@ a:active {
   display: flex;
   flex-direction: column;
 }
-
-.scrollarea-viewport {
-  height: 100%;
-}
 </style>