@asd20/ui 3.9.0 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.9.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 -->
@@ -87,15 +72,18 @@
           <div v-if="aiAnswer" class="asd20-site-search__ai-result">
             <h3>Answer</h3>
             <div class="asd20-site-search__ai-answer" v-html="aiAnswer" />
-
             <div
-              v-if="aiGroupedSources.length"
-              class="asd20-site-search__ai-sources"
+              v-if="aiKeywordsDisplay"
+              class="asd20-site-search__ai-keywords"
             >
-              <h4>Sources</h4>
-              <ul>
-                <li v-for="group in aiGroupedSources" :key="group.hostLabel">
-                  <strong>Content from: {{ group.hostLabel }}</strong>
+              {{ aiKeywordsDisplay }}
+            </div>
+
+            <!--
+            <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">
@@ -103,9 +91,10 @@
                       </a>
                     </li>
                   </ul>
-                </li>
-              </ul>
+                </div>
+              </div>
             </div>
+            -->
 
             <asd20-loader v-if="searchingAi" size="lg" />
           </div>
@@ -134,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 -->
@@ -204,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',
 
@@ -269,16 +273,18 @@ export default {
 
   data: () => ({
     currentTab: 'Answers',
-    // keyword search (classic)
+    // unified input
+    inputText: '',
     keywords: '',
-    // question input (AI)
-    questionText: '',
     aiAnswer: null,
     searchingAi: false,
     aiSources: [],
     selectedGroup: null,
     searchingPages: false,
     searchingFiles: false,
+    keywordsFromAi: false,
+    aiKeywordsDisplay: '',
+    skipKeywordWatcher: false,
   }),
 
   computed: {
@@ -349,13 +355,17 @@ export default {
     aiUiSources() {
       return (this.aiSources || []).map(src => ({
         ...src,
+        title: this.decodeHtml(src.title),
         hostLabel:
           this.resolveOrgTitleFromUrl(src.url) || this.labelFromUrl(src.url),
       }))
     },
     aiGroupedSources() {
       const groups = new Map()
-      this.aiUiSources.forEach(src => {
+      const filteredSources = this.aiUiSources.filter((src) =>
+        this.isSourceCurrentOrg(src.url, src.hostLabel)
+      )
+      filteredSources.forEach(src => {
         const key = src.hostLabel || 'Academy District 20'
         if (!groups.has(key)) {
           groups.set(key, { hostLabel: key, sources: [] })
@@ -388,47 +398,60 @@ 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 = ''
       }
     },
   },
 
   methods: {
-    async searchPages() {
+    async searchPages(options = {}) {
       if (this.$store && this.$store.state.search) {
+        const keepAnswersTab = options.keepAnswersTab || this.keywordsFromAi
         this.searchingPages = true
         await this.$store.dispatch('search/queryPages', this.keywords)
         this.searchingPages = false
-        if (this.keywords && this.keywords.trim()) {
+        if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
           this.currentTab = 'Pages'
+          this.scrollResultsToTop()
+        }
+        this.keywordsFromAi = false
+        if (!keepAnswersTab) {
+          this.aiAnswer = null
+          this.aiSources = []
+          this.aiKeywordsDisplay = ''
         }
       }
     },
@@ -449,6 +472,9 @@ export default {
 
     onTabClick(tab) {
       this.currentTab = tab.label
+      if (tab.label === 'Pages') {
+        this.scrollResultsToTop()
+      }
     },
 
     onTab(event) {
@@ -456,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()
     },
@@ -470,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
@@ -519,15 +544,55 @@ export default {
       }
     },
 
-    // Called when user clicks Ask or presses Enter in question field
-    onAskQuestion() {
-      const q = (this.questionText || '').trim()
-      if (!q) {
+    isSourceCurrentOrg(url, hostLabel) {
+      const org = this.organization || {}
+      const orgTitle = (org.title || '').toLowerCase()
+      const orgWebsite = org.website || ''
+
+      // If org website is available, match by hostname
+      if (orgWebsite) {
+        try {
+          const orgHost = new URL(orgWebsite).hostname.toLowerCase()
+          const srcHost = url ? new URL(url).hostname.toLowerCase() : ''
+          if (orgHost && srcHost && (srcHost === orgHost || srcHost.endsWith(`.${orgHost}`))) {
+            return true
+          }
+        } catch {
+          // fall through to title comparison
+        }
+      }
+
+      // Fallback to title match
+      if (hostLabel && orgTitle) {
+        return hostLabel.toLowerCase() === orgTitle
+      }
+
+      // If no organization info, include nothing
+      return false
+    },
+
+    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) {
@@ -556,8 +621,33 @@ export default {
           }
         )
 
-        this.aiAnswer = this.sanitizeAnswer(answer)
+        const { cleanAnswer, keywords: aiKeywords } =
+          this.extractKeywordsAndCleanAnswer(answer || '')
+
+        this.aiAnswer = this.sanitizeAnswer(cleanAnswer)
         this.aiSources = sources || []
+
+        const safeKeywords = this.sanitizeKeywords(aiKeywords)
+        const fallbackKeywords = safeKeywords
+          ? ''
+          : this.deriveFallbackKeywords(this.inputText)
+        const keywordsToUse = safeKeywords || fallbackKeywords
+
+        // Show the AI-provided keywords (or fallback) in brackets for visibility.
+        const displayKeywordsSource = aiKeywords || keywordsToUse || ''
+        this.aiKeywordsDisplay = displayKeywordsSource
+          ? `[Keywords: ${displayKeywordsSource.replace(/<[^>]*>/g, '')}]`
+          : ''
+
+        if (keywordsToUse) {
+          this.keywordsFromAi = true
+          this.skipKeywordWatcher = true
+          this.keywords = keywordsToUse
+          this.searchPages({ keepAnswersTab: true })
+          this.searchFiles()
+          this.searchGroups()
+        }
+
         this.currentTab = 'Answers'
       } catch (e) {
         console.error('AI search failed', e)
@@ -624,6 +714,162 @@ export default {
       cleanNode(container)
       return container.innerHTML
     },
+
+    extractKeywordsAndCleanAnswer(answerText) {
+      if (!answerText) return { cleanAnswer: '', keywords: '' }
+
+      // Grab the last occurrence of a keywords marker to reduce prompt-injection tricks.
+      // Accepts `[Keywords: ...]` or `Keywords: ...` without brackets.
+      const regex = /\[?\s*keywords[:\-\s]*([^\]\n\r]+)\]?/gi
+      let match
+      let lastMatch = null
+      while ((match = regex.exec(answerText)) !== null) {
+        lastMatch = match
+      }
+
+      const rawKeywords = lastMatch ? (lastMatch[1] || '').trim() : ''
+
+      // Keep the keywords block visible for now. To hide later, uncomment below:
+      const cleanAnswer = lastMatch
+        ? `${answerText.slice(0, lastMatch.index)}${answerText
+            .slice(lastMatch.index + lastMatch[0].length)
+            .trim()}`
+        : answerText
+
+      return { cleanAnswer: cleanAnswer.trim(), keywords: rawKeywords }
+    },
+
+    sanitizeKeywords(rawKeywords) {
+      if (!rawKeywords || typeof rawKeywords !== 'string') return ''
+
+      // Remove brackets, leading "keywords" label, and weird punctuation; keep basic word chars, spaces, hyphens, commas
+      const cleaned = rawKeywords
+        .replace(/<[^>]*>/g, ' ')
+        .replace(/[\[\]\(\)\{\}]/g, ' ')
+        .replace(/\bkeywords\b[:\-\s]*/i, '')
+        .replace(/[^a-z0-9,\-\s]/gi, ' ')
+        .trim()
+
+      if (!cleaned) return ''
+
+      // Split on commas/semicolons/pipes first; fall back to spaces
+      const parts =
+        cleaned.split(/[,;|]/).filter(Boolean).map(p => p.trim()).filter(Boolean)
+      const tokens =
+        parts.length > 0
+          ? parts
+          : cleaned.split(/\s+/).filter(Boolean)
+
+      const unique = []
+      for (const token of tokens) {
+        if (!token) continue
+        if (token.length <= 1) continue
+        const clipped = token.slice(0, 32)
+        if (!unique.includes(clipped)) {
+          unique.push(clipped)
+        }
+        if (unique.length >= 3) break
+      }
+
+      const result = unique.join(' ').slice(0, 100).trim()
+      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([
+        'a',
+        'an',
+        'the',
+        'and',
+        'or',
+        'of',
+        'for',
+        'to',
+        'in',
+        'on',
+        'with',
+        'at',
+        'by',
+        'from',
+        'about',
+        'as',
+        'is',
+        'are',
+        'was',
+        'were',
+        'be',
+        'been',
+        'being',
+        'this',
+        'that',
+        'these',
+        'those',
+        'it',
+        'its',
+        'your',
+        'you',
+        'we',
+        'us',
+        'our',
+        'i',
+        'me',
+        'my',
+      ])
+      const tokens = questionText
+        .toLowerCase()
+        .replace(/[^a-z0-9\s]/g, ' ')
+        .split(/\s+/)
+        .filter(Boolean)
+        .filter((t) => !STOP.has(t))
+
+      const uniq = []
+      for (const t of tokens) {
+        if (!uniq.includes(t)) uniq.push(t)
+        if (uniq.length >= 3) break
+      }
+      return uniq.join(' ')
+    },
   },
 }
 </script>
@@ -722,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;
@@ -747,26 +993,28 @@ export default {
 
     ul {
       list-style: none;
-      padding-left: 0;
       margin: 0;
     }
+  }
 
-    li {
-      font-size: 0.85rem;
-      margin-bottom: space(0.25);
-    }
+  &__ai-source-groups {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
   }
 
   &__ai-source-list {
+    display: block;
     list-style: disc;
-    list-style-position: inside;
-    padding-left: 0;
-    margin: space(0.25) 0 0.35rem 0;
+    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;
-      padding: 0;
     }
   }