improve subscribe to messages

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.d4m96v8cgs"
+    "revision": "0.i6hkd1cnpb"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/SupportChat.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, watch } from 'vue'
+import { ref, computed, nextTick, onMounted, watch, onUnmounted } from 'vue'
 import { useNostrStore } from '@/stores/nostr'
 import { npubToHex } from '@/lib/nostr'
 import type { DirectMessage } from '@/types/nostr'
@@ -79,6 +79,25 @@ onMounted(async () => {
   }
 })
 
+// Add cleanup on unmount
+onUnmounted(() => {
+  if (nostrStore.activeChat) {
+    nostrStore.unsubscribeFromMessages()
+  }
+})
+
+// Watch for changes in activeChat
+watch(() => nostrStore.activeChat, async (newChat) => {
+  if (newChat) {
+    try {
+      await nostrStore.subscribeToMessages()
+    } catch (err) {
+      console.error('Failed to subscribe to messages:', err)
+      error.value = 'Failed to connect to chat. Please try again later.'
+    }
+  }
+})
+
 function scrollToBottom() {
   if (messagesEndRef.value) {
     messagesEndRef.value.scrollIntoView({ behavior: 'smooth' })

src/stores/nostr.ts

@@ -89,6 +89,7 @@ export const useNostrStore = defineStore('nostr', () => {
   const activeChat = ref<string | null>(null)
   const relayPool = ref<any[]>([])
   const processedMessageIds = ref(new Set<string>())
+  const currentSubscription = ref<any | null>(null)
 
   // Watch account changes and persist to localStorage
   watch(account, (newAccount) => {
@@ -245,9 +246,14 @@ export const useNostrStore = defineStore('nostr', () => {
     await publishEvent(event, account.value.relays)
   }
 
-  const subscribeToMessages = async () => {
+  async function subscribeToMessages() {
     if (!account.value) return
 
+    // Cleanup existing subscription if any
+    if (currentSubscription.value) {
+      unsubscribeFromMessages()
+    }
+
     // Filter for received messages with history
     const receivedFilter = {
       kinds: [4],
@@ -349,6 +355,14 @@ export const useNostrStore = defineStore('nostr', () => {
             resolve(true)
           }
         })
+
+        // Store subscriptions for cleanup
+        currentSubscription.value = {
+          unsub: () => {
+            receivedSub.unsub()
+            sentSub.unsub()
+          }
+        }
       })
     }
 
@@ -356,6 +370,13 @@ export const useNostrStore = defineStore('nostr', () => {
     await Promise.all(relayPool.value.map(relay => subscribeToRelay(relay)))
   }
 
+  function unsubscribeFromMessages() {
+    if (currentSubscription.value) {
+      currentSubscription.value.unsub()
+      currentSubscription.value = null
+    }
+  }
+
   return {
     account,
     profiles,
@@ -367,6 +388,7 @@ export const useNostrStore = defineStore('nostr', () => {
     login,
     logout,
     sendMessage,
-    subscribeToMessages
+    subscribeToMessages,
+    unsubscribeFromMessages
   }
 })