@asd20/ui 3.7.0 → 3.9.0

package/package.json

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

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

@@ -9,15 +9,17 @@
     <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">
+        <div
+          class="asd20-site-search__field asd20-site-search__field--question"
+        >
           <!-- <label class="asd20-site-search__label">Ask a question</label> -->
           <div class="asd20-site-search__question-row">
             <asd20-search-field
               idTag="-question"
               ref="question"
               v-model="questionText"
-              @keyup.enter.stop.prevent="onAskQuestion"
-              placeholder="Ask a question"
+              @keyup.enter.native.stop.prevent="onAskQuestion"
+              placeholder="Ask a question (preview)"
             />
             <asd20-button
               class="asd20-site-search__ask-button"
@@ -34,7 +36,7 @@
             />
           </div>
         </div>
-        <hr/>
+        <hr />
 
         <!-- Search by Keyword -->
         <div class="asd20-site-search__field asd20-site-search__field--keyword">
@@ -74,18 +76,33 @@
 
         <!-- 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="aiUiSources.length" class="asd20-site-search__ai-sources">
+            <div
+              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>
+                <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>
@@ -97,7 +114,6 @@
 
         <!-- Pages tab -->
         <div v-show="currentTab === 'Pages'" scrollable>
-
           <!-- No results -->
           <asd20-notification
             v-if="keywords && _pages.length === 0 && !searchingPages"
@@ -134,7 +150,9 @@
 
       <div class="asd20-site-search__suggested" v-if="_groups.length > 0">
         <h3>
-          {{ _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:' }}
+          {{
+            _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:'
+          }}
         </h3>
         <asd20-list-item
           v-for="g in _groups"
@@ -242,7 +260,10 @@ export default {
 
   props: {
     active: { type: Boolean, default: false },
-    organization: { type: Object, default: () => ({ title: 'Academy District 20' }) },
+    organization: {
+      type: Object,
+      default: () => ({ title: 'Academy District 20' }),
+    },
     organizationOptions: { type: Array, default: () => [] },
   },
 
@@ -328,9 +349,39 @@ 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()
+      this.aiUiSources.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: {
@@ -430,6 +481,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)
@@ -442,6 +499,26 @@ 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
+      }
+    },
+
     // Called when user clicks Ask or presses Enter in question field
     onAskQuestion() {
       const q = (this.questionText || '').trim()
@@ -496,15 +573,7 @@ export default {
       // If no DOM (e.g., SSR), return raw; client will re-run and sanitize.
       if (typeof window === 'undefined' || !window.document) return rawHtml
 
-      const allowedTags = new Set([
-        'P',
-        'UL',
-        'OL',
-        'LI',
-        'STRONG',
-        'EM',
-        'A',
-      ])
+      const allowedTags = new Set(['P', 'UL', 'OL', 'LI', 'STRONG', 'EM', 'A'])
       const allowedAttrs = {
         A: ['href'],
       }
@@ -512,9 +581,9 @@ export default {
       const container = window.document.createElement('div')
       container.innerHTML = rawHtml
 
-      const cleanNode = (node) => {
+      const cleanNode = node => {
         const children = Array.from(node.childNodes)
-        children.forEach((child) => {
+        children.forEach(child => {
           if (child.nodeType === 1) {
             const tag = child.tagName.toUpperCase()
             if (!allowedTags.has(tag)) {
@@ -526,7 +595,7 @@ export default {
             }
 
             const allowed = allowedAttrs[tag] || []
-            Array.from(child.attributes).forEach((attr) => {
+            Array.from(child.attributes).forEach(attr => {
               const name = attr.name.toLowerCase()
               if (!allowed.includes(attr.name)) {
                 child.removeAttribute(attr.name)
@@ -628,6 +697,17 @@ export default {
 
   &__results {
     flex-grow: 1;
+    .disclaimer {
+      padding: space(0.5);
+      font-size: 0.85rem;
+      background: var(--website-page__alternate-background-t25);
+      border-bottom: 1px solid var(--color__tertiary);
+
+      a {
+        color: var(--color__primary);
+        text-decoration: underline;
+      }
+    }
   }
 
   &__ai-result {
@@ -638,6 +718,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 {
@@ -661,6 +757,19 @@ export default {
     }
   }
 
+  &__ai-source-list {
+    list-style: disc;
+    list-style-position: inside;
+    padding-left: 0;
+    margin: space(0.25) 0 0.35rem 0;
+
+    li {
+      display: list-item;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
   &__ai-snippet {
     margin: 0;
     opacity: 0.85;

package/src/design/_typography.scss

@@ -94,7 +94,7 @@
   ul,
   ol {
     padding: 0;
-    list-style-position: outside;
+    list-style-position: inside;
     margin: space(0.25) 0 space(1) 0;
     display: flex;
     flex-wrap: wrap;