@asd20/ui-next 2.28.1 → 2.29.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.29.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.29.0...ui-next-v2.29.1) (2026-10-05)
+
+
+### Bug Fixes
+
+* carry ai search verified supporting pages into related pages and pages tab ([46253e0](https://github.com/academydistrict20/asd20-ui-next/commit/46253e05ef064c99dbe3151cd093f6c938e2e9f6))
+
+# [2.29.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.28.1...ui-next-v2.29.0) (2026-10-02)
+
+
+### Features
+
+* **handbook:** add expandable H2 subtopics to index ([ac65b77](https://github.com/academydistrict20/asd20-ui-next/commit/ac65b778538ea118855cb876d712909ae038a679))
+
 ## [2.28.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.28.0...ui-next-v2.28.1) (2026-10-02)
 
 

package/package.json

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

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

@@ -2701,6 +2701,12 @@ export default {
         question: this.searchQuestion || this.inputText,
       }
       if (options.purpose) searchInput.purpose = options.purpose
+      if (
+        options.purpose === 'ai-related-pages' &&
+        options.sourcePages?.length
+      ) {
+        searchInput.sourcePages = options.sourcePages
+      }
 
       this.searchingPages = true
       try {
@@ -3105,6 +3111,16 @@ export default {
           ? `[Keywords: ${keywordsToUse.replace(/<[^>]*>/g, '')}]`
           : ''
 
+        const sourcePages = Array.isArray(sources)
+          ? sources
+              .filter(
+                source =>
+                  typeof source?.url === 'string' &&
+                  typeof source?.chunkId === 'string'
+              )
+              .slice(0, 8)
+              .map(({ url, chunkId }) => ({ url, chunkId }))
+          : []
         const assistantTurnKeywords = safeKeywords || keywordsToUse || ''
         const assistantTurn = {
           id: `a-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
@@ -3115,7 +3131,8 @@ export default {
           feedbackValue: null,
           feedbackSubmitting: false,
           relatedPages: [],
-          relatedPagesStatus: keywordsToUse ? 'pending' : 'complete',
+          relatedPagesStatus:
+            keywordsToUse || sourcePages.length ? 'pending' : 'complete',
         }
         assistantTurnId = assistantTurn.id
         this.aiTranscript = [...this.aiTranscript, assistantTurn]
@@ -3124,13 +3141,14 @@ export default {
           this.scrollTurnToTop(this.anchoredUserTurnId, { defer: true })
         }
 
-        if (keywordsToUse) {
+        if (keywordsToUse || sourcePages.length) {
           this.keywordsFromAi = true
           this.skipKeywordWatcher = true
           this.keywords = keywordsToUse
           await this.searchPages({
             keepAnswersTab: true,
             purpose: 'ai-related-pages',
+            sourcePages,
             runId,
           })
           if (!this.isCurrentSearchRun(runId)) return

package/src/components/templates/Asd20HandbookTemplate/index.vue

@@ -78,13 +78,50 @@
             v-for="message in topicMessages"
             :key="message.id"
           >
-            <button
-              type="button"
-              :aria-current="activeMessage && activeMessage.id === message.id ? 'true' : null"
-              @click="selectTopic(message.id)"
+            <div class="asd20-template-handbook__topic-row">
+              <button
+                class="asd20-template-handbook__topic-button"
+                type="button"
+                :aria-current="activeMessage && activeMessage.id === message.id ? 'true' : null"
+                @click="selectTopic(message.id)"
+              >
+                {{ message.heading || message.title }}
+              </button>
+              <button
+                v-if="subtopicsFor(message.id).length"
+                class="asd20-template-handbook__expand-button"
+                type="button"
+                :aria-expanded="expandedTopicId === message.id"
+                :aria-controls="`handbook-subtopics-${message.id}`"
+                :aria-label="`${expandedTopicId === message.id ? 'Hide' : 'Show'} sections in ${message.heading || message.title}`"
+                @click="toggleTopic(message.id)"
+              >
+                <asd20-icon
+                  name="chevron"
+                  size="sm"
+                  focusable="false"
+                />
+              </button>
+            </div>
+            <ol
+              v-if="subtopicsFor(message.id).length"
+              v-show="expandedTopicId === message.id"
+              :id="`handbook-subtopics-${message.id}`"
+              class="asd20-template-handbook__subtopics"
             >
-              {{ message.heading || message.title }}
-            </button>
+              <li
+                v-for="subtopic in subtopicsFor(message.id)"
+                :key="subtopic.index"
+              >
+                <button
+                  class="asd20-template-handbook__subtopic-button"
+                  type="button"
+                  @click="selectSubtopic(message.id, subtopic.index)"
+                >
+                  {{ subtopic.label }}
+                </button>
+              </li>
+            </ol>
           </li>
         </ol>
       </nav>
@@ -92,6 +129,7 @@
       <article
         v-for="message in topicMessages"
         :key="message.id"
+        :data-message-id="message.id"
         class="asd20-template-handbook__topic"
         :class="{ 'is-active': activeMessage && activeMessage.id === message.id }"
       >
@@ -133,6 +171,7 @@
 <script>
 import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
 import Asd20Messaging from '../../../components/atoms/Asd20Messaging'
+import Asd20Icon from '../../../components/atoms/Asd20Icon'
 import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
 import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
@@ -145,6 +184,7 @@ export default {
   components: {
     Asd20SkipTo,
     Asd20Messaging,
+    Asd20Icon,
     Asd20PageHeader,
     Asd20SiteNavigation,
     Asd20NotificationGroup,
@@ -154,6 +194,8 @@ export default {
   mixins: [pageTemplateMixin],
   data: () => ({
     selectedMessageId: null,
+    expandedTopicId: null,
+    subtopicsByMessageId: {},
     topicsOpen: false,
   }),
   computed: {
@@ -169,13 +211,61 @@ export default {
         || null
     },
   },
+  watch: {
+    messages: {
+      handler() {
+        this.$nextTick(() => this.refreshSubtopics())
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => this.refreshSubtopics())
+  },
   methods: {
     topicSummary(message) {
       return message.shortDescription || message.summary || ''
     },
-    selectTopic(messageId) {
+    topicArticle(messageId) {
+      return Array.from(this.$el.querySelectorAll('.asd20-template-handbook__topic'))
+        .find(article => article.dataset.messageId === String(messageId))
+    },
+    subtopicsFor(messageId) {
+      return this.subtopicsByMessageId[messageId] || []
+    },
+    refreshSubtopics() {
+      const nextSubtopics = {}
+      this.topicMessages.forEach(message => {
+        const article = this.topicArticle(message.id)
+        if (!article) return
+        const headings = Array.from(article.querySelectorAll('.asd20-rich-body-content h2'))
+        const subtopics = headings
+          .map((heading, index) => ({ index, label: heading.textContent.trim() }))
+          .filter(subtopic => subtopic.label)
+        if (subtopics.length) nextSubtopics[message.id] = subtopics
+      })
+      if (JSON.stringify(nextSubtopics) !== JSON.stringify(this.subtopicsByMessageId)) {
+        this.subtopicsByMessageId = nextSubtopics
+      }
+    },
+    toggleTopic(messageId) {
+      this.expandedTopicId = this.expandedTopicId === messageId ? null : messageId
+    },
+    async selectTopic(messageId) {
       this.selectedMessageId = messageId
+      this.expandedTopicId = this.subtopicsFor(messageId).length ? messageId : null
       this.topicsOpen = false
+      await this.$nextTick()
+      this.topicArticle(messageId)?.scrollIntoView({ block: 'start' })
+    },
+    async selectSubtopic(messageId, headingIndex) {
+      this.selectedMessageId = messageId
+      this.expandedTopicId = messageId
+      this.topicsOpen = false
+      await this.$nextTick()
+      const article = this.topicArticle(messageId)
+      const headings = article?.querySelectorAll('.asd20-rich-body-content h2')
+      headings?.[headingIndex]?.scrollIntoView({ block: 'start' })
     },
   },
 }
@@ -227,8 +317,49 @@ export default {
     padding: 0;
   }
 
-  &__index ol.is-open {
+  &__index ol.is-open,
+  &__index ol.is-open ol.asd20-template-handbook__subtopics {
+    display: block;
+  }
+
+  &__subtopics {
+    padding-left: space(0.75) !important;
+  }
+
+  &__topic-row {
+    display: flex;
+    align-items: stretch;
+  }
+
+  &__topic-button {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__expand-button {
+    display: grid;
+    place-items: center;
+    flex: 0 0 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+  }
+
+  &__expand-button .asd20-icon {
     display: block;
+    color: inherit;
+    transform: rotate(90deg);
+    transition: transform 180ms ease-in-out;
+  }
+
+  &__expand-button[aria-expanded='true'] .asd20-icon {
+    transform: rotate(180deg);
+  }
+
+  &__subtopic-button {
+    font-size: 0.9em !important;
   }
 
   &__index-heading {
@@ -241,7 +372,8 @@ export default {
     cursor: pointer;
   }
 
-  &__index li button {
+  &__topic-button,
+  &__subtopic-button {
     display: block;
     width: 100%;
     min-height: 44px;
@@ -276,6 +408,11 @@ export default {
 
   &__topic {
     min-width: 0;
+    scroll-margin-top: space(2);
+  }
+
+  &__topic .asd20-rich-body-content h2 {
+    scroll-margin-top: space(2);
   }
 
   &__topic:not(.is-active) {
@@ -287,8 +424,8 @@ export default {
   .asd20-template-handbook {
     &__layout {
       grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
-      gap: space(3);
-      padding: space(3);
+      gap: space(2);
+      padding: space(2);
     }
 
     &__index {
@@ -314,6 +451,17 @@ export default {
   .asd20-template-handbook {
     margin-left: space(3);
     margin-top: 0;
+    &__layout {
+      grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr);
+      gap: space(3);
+      padding: space(3);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .asd20-template-handbook__expand-button .asd20-icon {
+    transition: none;
   }
 }
 

package/src/helpers/queryPages.js

@@ -3,6 +3,7 @@ import axios from 'axios'
 import { hasSearchProxyRuntime, resolveSearchProxyUrl } from './searchProxyUrl'
 import { resolveRuntimeConfigValue } from './runtimeConfig'
 import { buildTypoTolerantSearchQuery } from './searchQuery'
+import { mergeSupportingPages } from './supportingPages'
 
 export const NO_PAGE_RESULTS_FALLBACKS = [
   {
@@ -100,6 +101,8 @@ function searchPayload(state) {
  */
 export default async function queryPages({
   keywords = '',
+  purpose = '',
+  sourcePages = [],
   top = 25,
   requireKeywords = false,
   organizations = [],
@@ -111,7 +114,11 @@ export default async function queryPages({
   apiVersion = '',
   searchVersion = '',
 }) {
-  if (!keywords && requireKeywords)
+  const supportingSources =
+    purpose === 'ai-related-pages' && Array.isArray(sourcePages)
+      ? sourcePages.slice(0, 8)
+      : []
+  if (!keywords && requireKeywords && !supportingSources.length)
     return {
       pages: [],
       facets: [],
@@ -150,16 +157,17 @@ export default async function queryPages({
   const resolvedRequestUrl =
     typeof requestUrl === 'string' && requestUrl.trim()
       ? requestUrl.trim()
-      : !resolvedSearchEndpoint &&
-        hasSearchProxyRuntime(runtimeConfig)
-      ? resolveSearchProxyUrl('pages', runtimeConfig)
-      : ''
+      : !resolvedSearchEndpoint && hasSearchProxyRuntime(runtimeConfig)
+        ? resolveSearchProxyUrl('pages', runtimeConfig)
+        : ''
 
   if (
     !resolvedRequestUrl &&
     (!resolvedSearchEndpoint || !resolvedSearchKey || !resolvedApiVersion)
   ) {
-    throw new Error('Azure Search or proxy configuration is required for queryPages.')
+    throw new Error(
+      'Azure Search or proxy configuration is required for queryPages.'
+    )
   }
 
   const { data } = resolvedRequestUrl
@@ -170,6 +178,9 @@ export default async function queryPages({
           keywords,
           organizations,
           top,
+          ...(supportingSources.length
+            ? { sourcePages: supportingSources }
+            : {}),
         },
       })
     : await axios({
@@ -194,10 +205,15 @@ export default async function queryPages({
         ),
       })
 
-  const pages = Array.isArray(data.value) ? data.value : []
+  const pages = mergeSupportingPages(
+    Array.isArray(data.value) ? data.value : [],
+    Array.isArray(data.supportingPages) ? data.supportingPages : [],
+    supportingSources,
+    organizations
+  )
   const resolvedPages = pages.length
     ? pages
-    : NO_PAGE_RESULTS_FALLBACKS.map((page) => ({
+    : NO_PAGE_RESULTS_FALLBACKS.map(page => ({
         ...page,
         categories: Array.isArray(page.categories) ? [...page.categories] : [],
       }))

package/src/helpers/supportingPages.js

@@ -0,0 +1,53 @@
+export function normalizeSupportingPageUrl(value) {
+  if (typeof value !== 'string' || value.length > 2048) return ''
+  try {
+    const url = new URL(value.trim())
+    if (
+      !['http:', 'https:'].includes(url.protocol) ||
+      url.username ||
+      url.password
+    )
+      return ''
+    url.hash = ''
+    url.pathname = url.pathname.replace(/\/+$/, '') || '/'
+    return url.toString().replace(/\/$/, '')
+  } catch (_error) {
+    return ''
+  }
+}
+
+export function mergeSupportingPages(
+  pages = [],
+  supportingPages = [],
+  sourcePages = [],
+  organizations = []
+) {
+  const sourceUrls = sourcePages
+    .map(source => normalizeSupportingPageUrl(source?.url))
+    .filter(Boolean)
+  const supported = supportingPages
+    .filter(
+      page =>
+        page.type === 'page' &&
+        sourceUrls.includes(normalizeSupportingPageUrl(page.url)) &&
+        (!organizations.length ||
+          organizations.includes(page.ownerOrganizationId))
+    )
+    .sort(
+      (a, b) =>
+        sourceUrls.indexOf(normalizeSupportingPageUrl(a.url)) -
+        sourceUrls.indexOf(normalizeSupportingPageUrl(b.url))
+    )
+  if (!supported.length) return pages
+  const seen = new Set()
+  return [
+    ...supported.map(page => ({ ...page, isAnswerSupportingPage: true })),
+    ...pages,
+  ].filter(page => {
+    const key = normalizeSupportingPageUrl(page.url) || page.id
+    if (!key) return true
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}