@asd20/ui 3.10.0 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "private": false,
   "license": "MIT",
   "sideEffects": [

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

@@ -1,4 +1,4 @@
-<template>
+\<template>
   <div
     ref="container"
     class="asd20-site-search"
@@ -8,47 +8,27 @@
   >
     <div class="asd20-site-search__viewport">
       <div class="asd20-site-search__options">
-        <!-- Ask a Question -->
-        <div
-          class="asd20-site-search__field asd20-site-search__field--question"
-        >
-          <!-- <label class="asd20-site-search__label">Ask a question</label> -->
+        <!-- Unified Query Input -->
+        <div class="asd20-site-search__field asd20-site-search__field--question">
           <div class="asd20-site-search__question-row">
             <asd20-search-field
-              idTag="-question"
-              ref="question"
-              v-model="questionText"
-              @keyup.enter.native.stop.prevent="onAskQuestion"
-              placeholder="Ask a question (preview)"
+              idTag="-unified"
+              ref="query"
+              v-model="inputText"
+              @keyup.enter.native.stop.prevent="onSubmitInput"
+              placeholder="Question (preview) or keywords..."
             />
             <asd20-button
               class="asd20-site-search__ask-button"
-              label="Ask"
+              label="Go"
               size="md"
               bordered
-              @click.native="onAskQuestion"
-              :disabled="!questionText || searchingAi"
-            />
-            <asd20-loader
-              v-if="searchingAi"
-              size="sm"
-              class="asd20-site-search__inline-loader"
+              reversed
+              @click.native="onSubmitInput"
+              :disabled="!inputText || searchingAi"
             />
           </div>
         </div>
-        <hr />
-
-        <!-- Search by Keyword -->
-        <div class="asd20-site-search__field asd20-site-search__field--keyword">
-          <!-- <label class="asd20-site-search__label">Search by keyword</label> -->
-          <asd20-search-field
-            idTag="-sitewide"
-            ref="search"
-            v-model="keywords"
-            placeholder="Search by keyword"
-          />
-        </div>
-
         <!-- Only show school results -->
         <asd20-checkbox
           v-show="hasParentOrg"
@@ -61,17 +41,22 @@
 
       <asd20-tab-bar :tabs="tabs" @tabClick="onTabClick" />
 
-      <asd20-viewport class="asd20-site-search__results" scrollable>
+      <asd20-viewport
+        ref="results"
+        class="asd20-site-search__results"
+        scrollable
+      >
         <asd20-notification
           v-if="
             !keywords &&
-            !questionText &&
+            !inputText &&
             !searchingFiles &&
             !searchingPages &&
             !searchingAi
           "
-          title="Ask a Question, or Search by Keyword"
-          description="Use the top input for plain-language questions, then press 'Ask'; or search by keyword in the lower input box."
+          title="Ask a Question or Search by Keyword"
+          description="Asking a question will generate an AI answer. Search by for pages and files by entering keyword(s).
+            <hr/>Our AI functionality is currently in preview and may not always provide accurate answers."
         />
 
         <!-- Answers tab -->
@@ -94,14 +79,11 @@
               {{ aiKeywordsDisplay }}
             </div>
 
-            <div
-              v-if="aiGroupedSources.length"
-              class="asd20-site-search__ai-sources"
-            >
-              <h4>Sources</h4>
-              <ul class="asd20-site-search__ai-source-groups">
-                <li v-for="group in aiGroupedSources" :key="group.hostLabel">
-                  <strong>Content from: {{ group.hostLabel }}</strong>
+            <!--
+            <div v-if="aiGroupedSources.length" class="asd20-site-search__ai-sources">
+              <h3>Sources</h3>
+              <div class="asd20-site-search__ai-source-groups">
+                <div v-for="group in aiGroupedSources" :key="group.hostLabel">
                   <ul class="asd20-site-search__ai-source-list">
                     <li v-for="src in group.sources" :key="src.url || src.id">
                       <a :href="src.url" target="_blank" rel="noreferrer">
@@ -109,9 +91,10 @@
                       </a>
                     </li>
                   </ul>
-                </li>
-              </ul>
+                </div>
+              </div>
             </div>
+            -->
 
             <asd20-loader v-if="searchingAi" size="lg" />
           </div>
@@ -140,6 +123,13 @@
             />
           </asd20-list>
           <asd20-loader v-if="searchingPages" size="lg" />
+
+          <div
+            v-if="aiKeywordsDisplay"
+            class="asd20-site-search__ai-keywords"
+          >
+            {{ aiKeywordsDisplay }}
+          </div>
         </div>
 
         <!-- Files tab -->
@@ -210,6 +200,14 @@ import mapFilesToListItems from '../../../helpers/mapFilesToListItems'
 // Mixins
 import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
 
+const SUBDOMAIN_LABELS = {
+  rampart: 'Rampart High School',
+  pinecreek: 'Pine Creek High School',
+  dcchigh: 'Discovery Canyon Campus High School',
+  liberty: 'Liberty High School',
+  d20online: 'Academy Online High School',
+}
+
 export default {
   name: 'Asd20SiteSearch',
 
@@ -275,10 +273,9 @@ export default {
 
   data: () => ({
     currentTab: 'Answers',
-    // keyword search (classic)
+    // unified input
+    inputText: '',
     keywords: '',
-    // question input (AI)
-    questionText: '',
     aiAnswer: null,
     searchingAi: false,
     aiSources: [],
@@ -287,6 +284,7 @@ export default {
     searchingFiles: false,
     keywordsFromAi: false,
     aiKeywordsDisplay: '',
+    skipKeywordWatcher: false,
   }),
 
   computed: {
@@ -357,6 +355,7 @@ export default {
     aiUiSources() {
       return (this.aiSources || []).map(src => ({
         ...src,
+        title: this.decodeHtml(src.title),
         hostLabel:
           this.resolveOrgTitleFromUrl(src.url) || this.labelFromUrl(src.url),
       }))
@@ -399,35 +398,40 @@ export default {
     active(newVal) {
       if (newVal) {
         // Focus keyword search by default for power users
-        if (this.$refs.search && this.$refs.search.$el) {
-          const input = this.$refs.search.$el.querySelector('input')
+        if (this.$refs.query && this.$refs.query.$el) {
+          const input = this.$refs.query.$el.querySelector('input')
           if (input) input.focus()
         }
-      } else if (this.$refs.search && this.$refs.search.$el) {
-        const input = this.$refs.search.$el.querySelector('input')
+      } else if (this.$refs.query && this.$refs.query.$el) {
+        const input = this.$refs.query.$el.querySelector('input')
         if (input) input.blur()
       }
     },
 
-    // classic keyword search – unchanged behavior
+    // keyword updates trigger searches unless explicitly skipped
     keywords: debounce(function (newVal, oldVal) {
+      if (this.skipKeywordWatcher) {
+        this.skipKeywordWatcher = false
+        return
+      }
       if (newVal !== oldVal) {
         this.searchPages()
         this.searchFiles()
         this.searchGroups()
       }
-    }, 500),
+    }, 400),
 
     _includeDistrictResults() {
       this.searchPages()
       this.searchFiles()
     },
 
-    // Clear AI answer if user clears the question
-    questionText(newVal) {
+    // Clear AI answer if user clears the input
+    inputText(newVal) {
       if (!newVal) {
         this.aiAnswer = null
         this.aiSources = []
+        this.aiKeywordsDisplay = ''
       }
     },
   },
@@ -441,8 +445,14 @@ export default {
         this.searchingPages = false
         if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
           this.currentTab = 'Pages'
+          this.scrollResultsToTop()
         }
         this.keywordsFromAi = false
+        if (!keepAnswersTab) {
+          this.aiAnswer = null
+          this.aiSources = []
+          this.aiKeywordsDisplay = ''
+        }
       }
     },
 
@@ -462,6 +472,9 @@ export default {
 
     onTabClick(tab) {
       this.currentTab = tab.label
+      if (tab.label === 'Pages') {
+        this.scrollResultsToTop()
+      }
     },
 
     onTab(event) {
@@ -469,6 +482,16 @@ export default {
         this.dismiss()
     },
 
+    scrollResultsToTop() {
+      this.$nextTick(() => {
+        const ref = this.$refs.results
+        const el = ref ? ref.$el || ref : null
+        if (el && typeof el.scrollTop === 'number') {
+          el.scrollTop = 0
+        }
+      })
+    },
+
     onBackgroundClick(e) {
       if (e.target === this.$refs.container) this.dismiss()
     },
@@ -483,27 +506,16 @@ export default {
     labelFromUrl(url) {
       if (!url) return 'Academy District 20'
       try {
-        const host = new URL(url).hostname
+        const host = new URL(url).hostname.toLowerCase()
 
         if (host === 'www.asd20.org') return 'Academy District 20'
 
         if (host.endsWith('.asd20.org')) {
           const subdomain = host.replace('.asd20.org', '')
-          switch (subdomain) {
-            case 'rampart':
-              return 'Rampart High School'
-            case 'pinecreek':
-              return 'Pine Creek High School'
-            case 'dcchigh':
-              return 'Discovery Canyon Campus High School'
-            case 'liberty':
-              return 'Liberty High School'
-            case 'd20online':
-              return 'Academy Online High School'
-            // add more mappings as needed
-            default:
-              return subdomain.charAt(0).toUpperCase() + subdomain.slice(1)
-          }
+          return (
+            SUBDOMAIN_LABELS[subdomain] ||
+            subdomain.replace(/(^|[-_.])([a-z])/g, (_, __, c) => c.toUpperCase())
+          )
         }
 
         return host
@@ -559,15 +571,28 @@ export default {
       return false
     },
 
-    // Called when user clicks Ask or presses Enter in question field
-    onAskQuestion() {
-      const q = (this.questionText || '').trim()
-      if (!q) {
+    onSubmitInput() {
+      const text = (this.inputText || '').trim()
+      if (!text) {
         this.aiAnswer = null
         this.aiSources = []
+        this.aiKeywordsDisplay = ''
         return
       }
-      this.searchAi(q)
+
+      const mode = this.decideMode(text)
+
+      if (mode === 'question') {
+        this.searchAi(text)
+      } else {
+        this.keywordsFromAi = false
+        this.skipKeywordWatcher = true
+        this.keywords = text
+        this.searchPages({ keepAnswersTab: false })
+        this.searchFiles()
+        this.searchGroups()
+        this.currentTab = 'Pages'
+      }
     },
 
     async searchAi(question) {
@@ -605,7 +630,7 @@ export default {
         const safeKeywords = this.sanitizeKeywords(aiKeywords)
         const fallbackKeywords = safeKeywords
           ? ''
-          : this.deriveFallbackKeywords(this.questionText)
+          : this.deriveFallbackKeywords(this.inputText)
         const keywordsToUse = safeKeywords || fallbackKeywords
 
         // Show the AI-provided keywords (or fallback) in brackets for visibility.
@@ -616,8 +641,11 @@ export default {
 
         if (keywordsToUse) {
           this.keywordsFromAi = true
+          this.skipKeywordWatcher = true
           this.keywords = keywordsToUse
-          // Let the keywords watcher trigger the searches; keep Answers tab active.
+          this.searchPages({ keepAnswersTab: true })
+          this.searchFiles()
+          this.searchGroups()
         }
 
         this.currentTab = 'Answers'
@@ -747,6 +775,46 @@ export default {
       return result
     },
 
+    decodeHtml(value) {
+      if (!value || typeof value !== 'string') return value || ''
+      if (typeof window === 'undefined' || !window.document) return value
+      const parser = new DOMParser()
+      const decoded = parser.parseFromString(value, 'text/html').documentElement
+        .textContent
+      return decoded || value
+    },
+
+    decideMode(text) {
+      const lower = (text || '').toLowerCase()
+      if (!lower) return 'keyword'
+      if (lower.includes('?')) return 'question'
+
+      const questionStarters = [
+        'who',
+        'what',
+        'when',
+        'where',
+        'why',
+        'how',
+        'should',
+        'can',
+        'could',
+        'would',
+        'is',
+        'are',
+        'do',
+        'does',
+        'will',
+        'may',
+      ]
+      const words = lower.split(/\s+/).filter(Boolean)
+      if (words.length >= 7) return 'question'
+      if (words.length > 0 && questionStarters.includes(words[0])) {
+        return 'question'
+      }
+      return 'keyword'
+    },
+
     deriveFallbackKeywords(questionText) {
       if (!questionText) return ''
       const STOP = new Set([
@@ -900,8 +968,8 @@ export default {
     ::v-deep ol,
     ::v-deep ul {
       display: block !important;
-      list-style-position: inside;
-      padding-left: 0;
+      list-style-position: outside;
+      padding-left: 1.5rem;
       margin-left: 0;
       flex: 0 0 auto;
       flex-wrap: nowrap;
@@ -924,16 +992,8 @@ export default {
     }
 
     ul {
-      list-style: disc;
-      list-style-position: inside;
-      padding-left: 0;
-      margin: 0;
-    }
-
-    li {
       list-style: none;
-      font-size: 0.85rem;
-      margin-bottom: space(0.25);
+      margin: 0;
     }
   }
 
@@ -941,21 +1001,22 @@ export default {
     list-style: none;
     padding-left: 0;
     margin: 0;
-    &__ai-source-list {
-      list-style: disc;
-      list-style-position: inside;
-      padding-left: space(0.75);
-      margin: space(0.25) 0 0.35rem space(0.5);
-
-      li {
-        display: list-item;
-        margin: 0;
-        padding: 0;
-      }
-    }
   }
 
+  &__ai-source-list {
+    display: block;
+    list-style: disc;
+    list-style-position: outside;
+    padding-left: space(0.5);
+    margin: 0 0 0.35rem space(0.5);
 
+    li {
+      list-style: disc;
+      list-style-position: outside;
+      display: list-item;
+      margin: 0;
+    }
+  }
 
   &__ai-snippet {
     margin: 0;