@asd20/ui 3.8.0 → 3.10.0

package/package.json

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

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

@@ -18,7 +18,7 @@
               idTag="-question"
               ref="question"
               v-model="questionText"
-              @keyup.enter.stop.prevent="onAskQuestion"
+              @keyup.enter.native.stop.prevent="onAskQuestion"
               placeholder="Ask a question (preview)"
             />
             <asd20-button
@@ -73,32 +73,42 @@
           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."
         />
-        <div class="disclaimer">
-          <p>
-            AI generated answers can have errors. Please contact our
-            <a href="www.asd20.org/help-desk">Help Desk</a> if you need
-            additional information.
-          </p>
-        </div>
 
         <!-- Answers tab -->
         <div v-show="currentTab === 'Answers'" scrollable>
+          <div v-if="aiAnswer" class="disclaimer">
+            <p>
+              AI generated answers can have errors. Please contact our
+              <a href="www.asd20.org/help-desk">Help Desk</a> if you need
+              additional information.
+            </p>
+          </div>
+
           <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="aiKeywordsDisplay"
+              class="asd20-site-search__ai-keywords"
+            >
+              {{ aiKeywordsDisplay }}
+            </div>
 
             <div
-              v-if="aiUiSources.length"
+              v-if="aiGroupedSources.length"
               class="asd20-site-search__ai-sources"
             >
               <h4>Sources</h4>
-              <ul>
-                <li v-for="src in aiUiSources" :key="src.url || src.id">
-                  <strong>Content from: {{ src.hostLabel }}</strong
-                  ><br />
-                  <a :href="src.url" target="_blank" rel="noreferrer">
-                    {{ src.title }}
-                  </a>
+              <ul class="asd20-site-search__ai-source-groups">
+                <li v-for="group in aiGroupedSources" :key="group.hostLabel">
+                  <strong>Content from: {{ group.hostLabel }}</strong>
+                  <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">
+                        {{ src.title }}
+                      </a>
+                    </li>
+                  </ul>
                 </li>
               </ul>
             </div>
@@ -275,6 +285,8 @@ export default {
     selectedGroup: null,
     searchingPages: false,
     searchingFiles: false,
+    keywordsFromAi: false,
+    aiKeywordsDisplay: '',
   }),
 
   computed: {
@@ -345,9 +357,42 @@ export default {
     aiUiSources() {
       return (this.aiSources || []).map(src => ({
         ...src,
-        hostLabel: this.labelFromUrl(src.url),
+        hostLabel:
+          this.resolveOrgTitleFromUrl(src.url) || this.labelFromUrl(src.url),
       }))
     },
+    aiGroupedSources() {
+      const groups = new Map()
+      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: [] })
+        }
+        const group = groups.get(key)
+        const exists = group.sources.find(
+          s => (s.url && src.url && s.url === src.url) || (s.id && src.id && s.id === src.id)
+        )
+        if (!exists) {
+          group.sources.push(src)
+        }
+      })
+      const currentOrgTitle =
+        (this.organization && this.organization.title) || 'Academy District 20'
+      const currentLower = currentOrgTitle.toLowerCase()
+
+      return Array.from(groups.values()).sort((a, b) => {
+        const aIsCurrent =
+          (a.hostLabel || '').toLowerCase() === currentLower
+        const bIsCurrent =
+          (b.hostLabel || '').toLowerCase() === currentLower
+        if (aIsCurrent && !bIsCurrent) return -1
+        if (bIsCurrent && !aIsCurrent) return 1
+        return (a.hostLabel || '').localeCompare(b.hostLabel || '')
+      })
+    },
   },
 
   watch: {
@@ -388,14 +433,16 @@ export default {
   },
 
   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.keywordsFromAi = false
       }
     },
 
@@ -447,6 +494,12 @@ export default {
               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)
@@ -459,6 +512,53 @@ export default {
       }
     },
 
+    // Try to resolve the full organization title from organizationOptions by URL
+    resolveOrgTitleFromUrl(url) {
+      if (!url || !Array.isArray(this.organizationOptions)) return null
+      try {
+        const host = new URL(url).hostname.toLowerCase()
+        const match = this.organizationOptions.find((org) => {
+          if (!org || !org.website) return false
+          try {
+            const orgHost = new URL(org.website).hostname.toLowerCase()
+            return host === orgHost || host.endsWith(orgHost)
+          } catch {
+            return false
+          }
+        })
+        return match && match.title ? match.title : null
+      } catch {
+        return null
+      }
+    },
+
+    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
+    },
+
     // Called when user clicks Ask or presses Enter in question field
     onAskQuestion() {
       const q = (this.questionText || '').trim()
@@ -496,8 +596,30 @@ 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.questionText)
+        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.keywords = keywordsToUse
+          // Let the keywords watcher trigger the searches; keep Answers tab active.
+        }
+
         this.currentTab = 'Answers'
       } catch (e) {
         console.error('AI search failed', e)
@@ -564,6 +686,122 @@ 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
+    },
+
+    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>
@@ -658,6 +896,22 @@ export default {
 
   &__ai-answer {
     margin-bottom: space(0.5);
+
+    ::v-deep ol,
+    ::v-deep ul {
+      display: block !important;
+      list-style-position: inside;
+      padding-left: 0;
+      margin-left: 0;
+      flex: 0 0 auto;
+      flex-wrap: nowrap;
+    }
+
+    ::v-deep li {
+      display: list-item;
+      flex: 0 0 auto;
+      width: auto;
+    }
   }
 
   &__ai-sources {
@@ -670,17 +924,39 @@ export default {
     }
 
     ul {
-      list-style: none;
+      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);
     }
   }
 
+  &__ai-source-groups {
+    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-snippet {
     margin: 0;
     opacity: 0.85;