@asd20/ui 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.8.0",
+  "version": "3.9.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,36 @@
           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="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>
+                <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>
@@ -345,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: {
@@ -447,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)
@@ -459,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()
@@ -658,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 {
@@ -681,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;