@asd20/ui-next 2.3.8 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+# [2.4.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.8...ui-next-v2.4.0) (2026-05-01)
+
+
+### Bug Fixes
+
+* fix search state routing ([64f10cc](https://github.com/academydistrict20/asd20-ui-next/commit/64f10cc37b2f3d6e2b27b54e4fe96b94054bfb6d))
+
+
+### Features
+
+* improve search persistence and clearing ([6a27f9b](https://github.com/academydistrict20/asd20-ui-next/commit/6a27f9bfe62898ca00618b7fe896b061c44e5532))
+
 ## [2.3.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.7...ui-next-v2.3.8) (2026-04-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20StoryItemOld/index.vue

@@ -83,6 +83,27 @@ import Asd20TagGroup from '../../../components/organisms/Asd20TagGroup'
 import Asd20TextAvatar from '../../../components/atoms/Asd20TextAvatar'
 import Asd20ThumbnailAvatar from '../../../components/atoms/Asd20ThumbnailAvatar'
 
+function resolveRouter(vm) {
+  const internal = vm && vm.$
+  const context = internal && internal.ctx
+  if (context && context.$router) {
+    return context.$router
+  }
+
+  const parentContext = internal && internal.parent && internal.parent.ctx
+  if (parentContext && parentContext.$router) {
+    return parentContext.$router
+  }
+
+  return (
+    internal &&
+    internal.appContext &&
+    internal.appContext.config &&
+    internal.appContext.config.globalProperties &&
+    internal.appContext.config.globalProperties.$router
+  )
+}
+
 export default {
   name: 'Asd20StoryItem',
 
@@ -132,7 +153,8 @@ export default {
       return this.link || this.to
     },
     usesRouterNavigation() {
-      if (!this.$router || !this.to) return false
+      const router = resolveRouter(this)
+      if (!router || !this.to) return false
       if (typeof this.to === 'string') return this.to.startsWith('/')
       return typeof this.to === 'object'
     },
@@ -143,9 +165,11 @@ export default {
 
   methods: {
     onClick(e) {
-      if (this.usesRouterNavigation) {
+      const router = resolveRouter(this)
+
+      if (this.usesRouterNavigation && router && typeof router.push === 'function') {
         e.preventDefault()
-        this.$router.push(this.to)
+        router.push(this.to)
       }
     },
   },

package/src/components/molecules/Asd20Tab/index.vue

@@ -32,6 +32,27 @@
 import Asd20Icon from '../../../components/atoms/Asd20Icon'
 import Asd20Badge from '../../../components/atoms/Asd20Badge'
 
+function resolveRouter(vm) {
+  const internal = vm && vm.$
+  const context = internal && internal.ctx
+  if (context && context.$router) {
+    return context.$router
+  }
+
+  const parentContext = internal && internal.parent && internal.parent.ctx
+  if (parentContext && parentContext.$router) {
+    return parentContext.$router
+  }
+
+  return (
+    internal &&
+    internal.appContext &&
+    internal.appContext.config &&
+    internal.appContext.config.globalProperties &&
+    internal.appContext.config.globalProperties.$router
+  )
+}
+
 export default {
   name: 'Asd20Tab',
 
@@ -52,7 +73,7 @@ export default {
 
   computed: {
     component() {
-      if (this.$router && this.to) return 'router-link'
+      if (resolveRouter(this) && this.to) return 'router-link'
       return 'button'
     },
     classes() {

package/src/components/organisms/Asd20AiSearch/index.vue

@@ -374,21 +374,30 @@ export default {
     hasExistingResults() {
       const siteSearch = this.$refs.siteSearch
       if (!siteSearch) return false
+      const pages = Array.isArray(siteSearch.currentPages)
+        ? siteSearch.currentPages
+        : siteSearch.resolvedPages
+      const files = Array.isArray(siteSearch.currentFiles)
+        ? siteSearch.currentFiles
+        : siteSearch.resolvedFiles
+      const groups = Array.isArray(siteSearch.currentGroups)
+        ? siteSearch.currentGroups
+        : siteSearch.resolvedGroups
       if (
-        Array.isArray(siteSearch.resolvedPages) &&
-        siteSearch.resolvedPages.length
+        Array.isArray(pages) &&
+        pages.length
       ) {
         return true
       }
       if (
-        Array.isArray(siteSearch.resolvedFiles) &&
-        siteSearch.resolvedFiles.length
+        Array.isArray(files) &&
+        files.length
       ) {
         return true
       }
       if (
-        Array.isArray(siteSearch.resolvedGroups) &&
-        siteSearch.resolvedGroups.length
+        Array.isArray(groups) &&
+        groups.length
       ) {
         return true
       }

package/src/components/organisms/Asd20SiteSearch/index.vue

@@ -327,19 +327,19 @@
             v-if="
               hasSubmitted &&
                 showContacts &&
-                resolvedGroups.length === 0 &&
+                currentGroups.length === 0 &&
                 !searchingFiles
             "
             title="No Contacts Found"
             description="Try using different keywords."
           />
           <div
-            v-if="resolvedGroups.length > 0 && showContacts"
+            v-if="currentGroups.length > 0 && showContacts"
             class="asd20-site-search__suggested"
           >
             <h3>
               {{
-                resolvedGroups.length > 1
+                currentGroups.length > 1
                   ? 'Suggested Contacts:'
                   : 'Suggested Contact:'
               }}
@@ -357,7 +357,7 @@
             />
           </div>
           <asd20-loader
-            v-if="searchingFiles && resolvedGroups.length === 0"
+            v-if="searchingFiles && currentGroups.length === 0"
             size="lg"
           />
         </asd20-viewport>
@@ -381,7 +381,7 @@
               <hr/>AI can make mistakes. Verify important information."
           />
           <asd20-notification
-            v-if="keywords && resolvedFiles.length === 0 && !searchingFiles"
+            v-if="keywords && currentFiles.length === 0 && !searchingFiles"
             title="No Files Found"
             description="Try using different keywords."
           />
@@ -707,6 +707,10 @@ export default {
     searchingPages: false,
     searchingFiles: false,
 
+    localSearchPages: null,
+    localSearchFiles: null,
+    localSearchGroups: null,
+
     keywordsFromAi: false,
     aiKeywordsDisplayAnswer: '',
     aiKeywordsDisplayPages: '',
@@ -725,6 +729,7 @@ export default {
       .toString(36)
       .slice(2, 9)}`,
     activeAiQuestionKey: '',
+    searchRunId: 0,
 
     scrollReflowTimer: null,
     bodyScrollLock: null,
@@ -738,6 +743,21 @@ export default {
   }),
 
   computed: {
+    currentPages() {
+      if (Array.isArray(this.localSearchPages)) return this.localSearchPages
+      return Array.isArray(this.resolvedPages) ? this.resolvedPages : []
+    },
+
+    currentFiles() {
+      if (Array.isArray(this.localSearchFiles)) return this.localSearchFiles
+      return Array.isArray(this.resolvedFiles) ? this.resolvedFiles : []
+    },
+
+    currentGroups() {
+      if (Array.isArray(this.localSearchGroups)) return this.localSearchGroups
+      return Array.isArray(this.resolvedGroups) ? this.resolvedGroups : []
+    },
+
     shouldUsePageFallbacks() {
       const hasSearchText =
         typeof this.keywords === 'string' && this.keywords.trim()
@@ -745,14 +765,14 @@ export default {
         this.hasSubmitted &&
         !!hasSearchText &&
         !this.searchingPages &&
-        Array.isArray(this.resolvedPages) &&
-        this.resolvedPages.length === 0
+        Array.isArray(this.currentPages) &&
+        this.currentPages.length === 0
       )
     },
 
     displayPages() {
-      if (Array.isArray(this.resolvedPages) && this.resolvedPages.length) {
-        return this.resolvedPages
+      if (Array.isArray(this.currentPages) && this.currentPages.length) {
+        return this.currentPages
       }
       if (!this.shouldUsePageFallbacks) return []
 
@@ -821,8 +841,8 @@ export default {
     },
 
     fileListItems() {
-      return Array.isArray(this.resolvedFiles)
-        ? mapFilesToListItems(this.resolvedFiles)
+      return Array.isArray(this.currentFiles)
+        ? mapFilesToListItems(this.currentFiles)
         : []
     },
 
@@ -843,13 +863,13 @@ export default {
         if (this.showContacts) {
           assistantTabs.push({
             label: 'Contacts',
-            badge: this.resolvedGroups.length,
+            badge: this.currentGroups.length,
             active: this.currentTab === 'Contacts',
           })
         }
         assistantTabs.push({
           label: 'Files',
-          badge: this.resolvedFiles.length,
+          badge: this.currentFiles.length,
           active: this.currentTab === 'Files',
         })
         return assistantTabs
@@ -866,13 +886,13 @@ export default {
         if (this.showContacts) {
           keywordTabs.push({
             label: 'Contacts',
-            badge: this.resolvedGroups.length,
+            badge: this.currentGroups.length,
             active: this.currentTab === 'Contacts',
           })
         }
         keywordTabs.push({
           label: 'Files',
-          badge: this.resolvedFiles.length,
+          badge: this.currentFiles.length,
           active: this.currentTab === 'Files',
         })
         return keywordTabs
@@ -952,7 +972,7 @@ export default {
       })
     },
     groupListItems() {
-      return (this.resolvedGroups || []).map(g => {
+      return (this.currentGroups || []).map(g => {
         const org =
           (Array.isArray(this.organizationOptions) &&
             this.organizationOptions.find(
@@ -1125,17 +1145,19 @@ export default {
         return
       }
       if (newVal !== oldVal) {
+        const runId = this.beginSearchRun()
         this.selectedGroup = null
-        this.searchPages()
-        this.searchFilesWithGroupOwners()
+        this.searchPages({ runId })
+        this.searchFilesWithGroupOwners({ runId })
         this.syncSearchStateToRoute()
       }
     }, 400),
 
     resolvedIncludeDistrictResults() {
       if (this.routeRestoreInProgress) return
-      this.searchPages()
-      this.searchFilesWithGroupOwners()
+      const runId = this.beginSearchRun()
+      this.searchPages({ runId })
+      this.searchFilesWithGroupOwners({ runId })
       this.syncSearchStateToRoute()
     },
     // Clear AI answer if user clears the input
@@ -1244,9 +1266,44 @@ export default {
     },
 
     setSearchResults({ pages, files, groups } = {}) {
-      if (pages !== undefined) this.resolvedPages = pages
-      if (files !== undefined) this.resolvedFiles = files
-      if (groups !== undefined) this.resolvedGroups = groups
+      if (pages !== undefined) {
+        this.localSearchPages = Array.isArray(pages) ? pages : []
+      }
+      if (files !== undefined) {
+        this.localSearchFiles = Array.isArray(files) ? files : []
+      }
+      if (groups !== undefined) {
+        this.localSearchGroups = Array.isArray(groups) ? groups : []
+      }
+    },
+
+    readSearchResults(target) {
+      if (target === 'pages') return this.currentPages
+      if (target === 'files') return this.currentFiles
+      if (target === 'groups') return this.currentGroups
+      return []
+    },
+
+    readResolvedSearchResults(target) {
+      if (target === 'pages') {
+        return Array.isArray(this.resolvedPages) ? this.resolvedPages : []
+      }
+      if (target === 'files') {
+        return Array.isArray(this.resolvedFiles) ? this.resolvedFiles : []
+      }
+      if (target === 'groups') {
+        return Array.isArray(this.resolvedGroups) ? this.resolvedGroups : []
+      }
+      return []
+    },
+
+    beginSearchRun() {
+      this.searchRunId += 1
+      return this.searchRunId
+    },
+
+    isCurrentSearchRun(runId) {
+      return !runId || this.searchRunId === runId
     },
 
     async querySearchCollectionWithFallback({
@@ -1254,23 +1311,32 @@ export default {
       storeAction,
       payload,
       target,
+      runId,
     }) {
       if (typeof handler === 'function') {
         const result = await handler(payload)
+        if (!this.isCurrentSearchRun(runId)) {
+          return this.readSearchResults(target)
+        }
         if (Array.isArray(result)) {
-          this[target] = result
+          this.setSearchResults({ [target]: result })
           return result
         }
-        return Array.isArray(this[target]) ? this[target] : []
+        return this.readSearchResults(target)
       }
 
       const searchStore = this.getSearchStore()
       if (searchStore) {
         await searchStore.dispatch(storeAction, payload)
-        return Array.isArray(this[target]) ? this[target] : []
+        const result = this.readResolvedSearchResults(target)
+        if (!this.isCurrentSearchRun(runId)) {
+          return this.readSearchResults(target)
+        }
+        this.setSearchResults({ [target]: result })
+        return result
       }
 
-      return Array.isArray(this[target]) ? this[target] : []
+      return this.readSearchResults(target)
     },
 
     async queryAiSiteWithFallback(payload) {
@@ -1511,9 +1577,9 @@ export default {
           : 'Pages',
         searchMode: this.searchMode || '',
         includeDistrictResults: !!this.resolvedIncludeDistrictResults,
-        pages: Array.isArray(this.resolvedPages) ? this.resolvedPages : [],
-        files: Array.isArray(this.resolvedFiles) ? this.resolvedFiles : [],
-        groups: Array.isArray(this.resolvedGroups) ? this.resolvedGroups : [],
+        pages: Array.isArray(this.currentPages) ? this.currentPages : [],
+        files: Array.isArray(this.currentFiles) ? this.currentFiles : [],
+        groups: Array.isArray(this.currentGroups) ? this.currentGroups : [],
         aiAnswer: this.aiAnswer || null,
         aiSources: Array.isArray(this.aiSources) ? this.aiSources : [],
         aiErrorMessage: this.aiErrorMessage || '',
@@ -1897,18 +1963,21 @@ export default {
             await this.searchAi(restoredState.text)
           } else {
             await this.clearSearchState()
+            const runId = this.searchRunId
             this.keywordsFromAi = false
             this.skipKeywordWatcher = true
             this.keywords = this.limitWords(restoredState.text, 4)
             this.searchQuestion = restoredState.text
 
             await Promise.all([
-              this.searchPages({ keepAnswersTab: false }),
-              this.searchFilesWithGroupOwners(),
+              this.searchPages({ keepAnswersTab: false, runId }),
+              this.searchFilesWithGroupOwners({ runId }),
             ])
           }
         }
 
+        if (this.lastRestoredSearchKey !== restoreKey) return
+
         const hasManualTabOverride =
           this.hasRecentManualTabSelection() ||
           (this.lastManualTabChangeAt > restoreStartedAt &&
@@ -2399,7 +2468,18 @@ export default {
     async clearSearchState(options = {}) {
       const resetConversation = options.resetConversation !== false
       const resetTranscript = options.resetTranscript !== false
+      const preserveSearchRun = options.preserveSearchRun === true
+      const preserveAiLoading = options.preserveAiLoading === true
+      if (!preserveSearchRun) {
+        this.beginSearchRun()
+      }
       this.selectedGroup = null
+      this.searchingAi = preserveAiLoading ? this.searchingAi : false
+      this.searchingPages = false
+      this.searchingFiles = false
+      this.activeAiQuestionKey = preserveAiLoading
+        ? this.activeAiQuestionKey
+        : ''
       this.aiAnswer = null
       this.aiSources = []
       this.aiKeywordsDisplayAnswer = ''
@@ -2449,38 +2529,50 @@ export default {
 
     async searchPages(options = {}) {
       const keepAnswersTab = options.keepAnswersTab || this.keywordsFromAi
+      const runId = options.runId || this.searchRunId
       const searchInput = {
         keywords: this.keywords,
         question: this.searchQuestion || this.inputText,
       }
 
       this.searchingPages = true
-      await this.querySearchCollectionWithFallback({
-        handler: this.queryPagesHandler,
-        storeAction: 'search/queryPages',
-        payload: searchInput,
-        target: 'resolvedPages',
-      })
-      this.searchingPages = false
+      try {
+        await this.querySearchCollectionWithFallback({
+          handler: this.queryPagesHandler,
+          storeAction: 'search/queryPages',
+          payload: searchInput,
+          target: 'pages',
+          runId,
+        })
+        if (!this.isCurrentSearchRun(runId)) {
+          return this.currentPages
+        }
 
-      if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
-        this.currentTab = 'Pages'
-        this.scrollResultsToTop()
-      }
+        if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
+          this.currentTab = 'Pages'
+          this.scrollResultsToTop()
+        }
 
-      this.keywordsFromAi = false
+        this.keywordsFromAi = false
 
-      if (!keepAnswersTab) {
-        this.aiAnswer = null
-        this.aiSources = []
-        this.aiKeywordsDisplayAnswer = ''
-        this.aiKeywordsDisplayPages = ''
-      }
+        if (!keepAnswersTab) {
+          this.aiAnswer = null
+          this.aiSources = []
+          this.aiKeywordsDisplayAnswer = ''
+          this.aiKeywordsDisplayPages = ''
+        }
 
-      this.persistSearchCacheSnapshot()
+        this.persistSearchCacheSnapshot()
+        return this.currentPages
+      } finally {
+        if (this.isCurrentSearchRun(runId)) {
+          this.searchingPages = false
+        }
+      }
     },
 
     async searchFiles(options = {}) {
+      const runId = options.runId || this.searchRunId
       const searchInput = {
         keywords: this.keywords,
         question: this.searchQuestion || this.inputText,
@@ -2489,26 +2581,41 @@ export default {
       if (owners.length > 0) searchInput.owners = owners
 
       this.searchingFiles = true
-      await this.querySearchCollectionWithFallback({
-        handler: this.queryFilesHandler,
-        storeAction: 'search/queryFiles',
-        payload: searchInput,
-        target: 'resolvedFiles',
-      })
-      this.searchingFiles = false
-      this.persistSearchCacheSnapshot()
+      try {
+        await this.querySearchCollectionWithFallback({
+          handler: this.queryFilesHandler,
+          storeAction: 'search/queryFiles',
+          payload: searchInput,
+          target: 'files',
+          runId,
+        })
+        if (!this.isCurrentSearchRun(runId)) {
+          return this.currentFiles
+        }
+        this.persistSearchCacheSnapshot()
+        return this.currentFiles
+      } finally {
+        if (this.isCurrentSearchRun(runId)) {
+          this.searchingFiles = false
+        }
+      }
     },
 
-    async searchFilesWithGroupOwners() {
-      const groupsPromise = this.searchGroups()
-      await this.searchFiles()
+    async searchFilesWithGroupOwners(options = {}) {
+      const runId = options.runId || this.searchRunId
+      const groupsPromise = this.searchGroups({ runId })
+      await this.searchFiles({ runId })
+      if (!this.isCurrentSearchRun(runId)) return []
       const ownerFilters = await groupsPromise
+      if (!this.isCurrentSearchRun(runId)) return ownerFilters
       if (ownerFilters.length > 0) {
-        await this.searchFiles({ owners: ownerFilters })
+        await this.searchFiles({ owners: ownerFilters, runId })
       }
+      return ownerFilters
     },
 
-    async searchGroups() {
+    async searchGroups(options = {}) {
+      const runId = options.runId || this.searchRunId
       const searchInput = {
         keywords: this.keywords,
         question: this.searchQuestion || this.inputText,
@@ -2517,12 +2624,22 @@ export default {
         handler: this.queryGroupsHandler,
         storeAction: 'search/queryGroups',
         payload: searchInput,
-        target: 'resolvedGroups',
+        target: 'groups',
+        runId,
       })
+      if (!this.isCurrentSearchRun(runId)) {
+        return Array.from(
+          new Set(
+            this.currentGroups
+              .map(group => (group && group.title ? group.title.trim() : ''))
+              .filter(Boolean)
+          )
+        )
+      }
       this.persistSearchCacheSnapshot()
       return Array.from(
         new Set(
-          (this.resolvedGroups || [])
+          (this.currentGroups || [])
             .map(group => (group && group.title ? group.title.trim() : ''))
             .filter(Boolean)
         )
@@ -2557,11 +2674,13 @@ export default {
         this.searchAi(text)
       } else {
         await this.clearSearchState()
+        const runId = this.searchRunId
         this.keywordsFromAi = false
         this.skipKeywordWatcher = true
         this.keywords = this.limitWords(text, 4)
-        await this.searchPages({ keepAnswersTab: false })
-        this.searchFilesWithGroupOwners()
+        await this.searchPages({ keepAnswersTab: false, runId })
+        this.searchFilesWithGroupOwners({ runId })
+        if (!this.isCurrentSearchRun(runId)) return
         this.currentTab = 'Pages'
         this.syncSearchStateToRoute({ text, mode, tab: 'Pages' })
         this.$nextTick(() => this.refreshResultsScrollLayer())
@@ -2648,6 +2767,7 @@ export default {
 
       this.activeAiQuestionKey = normalizedQuestion
 
+      const runId = this.beginSearchRun()
       this.searchMode = 'question'
       const isFollowUpQuestion = this.hasAssistantTurns
       this.currentTab = 'Answers'
@@ -2669,6 +2789,8 @@ export default {
       await this.clearSearchState({
         resetConversation: false,
         resetTranscript: false,
+        preserveSearchRun: true,
+        preserveAiLoading: true,
       })
       this.searchQuestion = normalizedQuestion
       let assistantTurnId = ''
@@ -2695,6 +2817,7 @@ export default {
             includeDistrictResults: this.resolvedIncludeDistrictResults,
           }
         )
+        if (!this.isCurrentSearchRun(runId)) return
 
         const { cleanAnswer, keywords: aiKeywords } =
           this.extractKeywordsAndCleanAnswer(answer || '')
@@ -2759,11 +2882,12 @@ export default {
           this.keywordsFromAi = true
           this.skipKeywordWatcher = true
           this.keywords = keywordsToUse
-          await this.searchPages({ keepAnswersTab: true })
+          await this.searchPages({ keepAnswersTab: true, runId })
+          if (!this.isCurrentSearchRun(runId)) return
           relatedPagesForAnalytics = this.getAnalyticsPages()
             .slice(0, 10)
             .map(p => ({ title: p.title || '', url: p.url || '' }))
-          this.searchFilesWithGroupOwners()
+          this.searchFilesWithGroupOwners({ runId })
         }
 
         this.currentTab = 'Answers'
@@ -2774,6 +2898,7 @@ export default {
           this.refreshResultsScrollLayer()
         })
       } catch (e) {
+        if (!this.isCurrentSearchRun(runId)) return
         console.error('AI search failed', e)
         this.aiAnswer = null
         this.aiSources = []
@@ -2796,13 +2921,15 @@ export default {
           this.scrollTurnToTop(this.anchoredUserTurnId, { defer: true })
         }
       } finally {
-        this.searchingAi = false
-        this.activeAiQuestionKey = ''
-        this.persistSearchCacheSnapshot({
-          text: this.searchQuestion || normalizedQuestion,
-          mode: 'question',
-          tab: 'Answers',
-        })
+        if (this.isCurrentSearchRun(runId)) {
+          this.searchingAi = false
+          this.activeAiQuestionKey = ''
+          this.persistSearchCacheSnapshot({
+            text: this.searchQuestion || normalizedQuestion,
+            mode: 'question',
+            tab: 'Answers',
+          })
+        }
 
         // Log AI search analytics
         const logPagesFromPages =
@@ -3205,8 +3332,8 @@ export default {
     },
 
     getAnalyticsPages() {
-      if (!Array.isArray(this.resolvedPages)) return []
-      return this.resolvedPages.filter(
+      if (!Array.isArray(this.currentPages)) return []
+      return this.currentPages.filter(
         page => !this.isNoResultsFallbackPage(page)
       )
     },