@asd20/ui 3.6.1 → 3.8.0

package/package.json

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

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

@@ -9,7 +9,9 @@
     <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
@@ -17,19 +19,24 @@
               ref="question"
               v-model="questionText"
               @keyup.enter.stop.prevent="onAskQuestion"
-              placeholder="Ask a question."
+              placeholder="Ask a question (preview)"
             />
-            <button
-              type="button"
+            <asd20-button
               class="asd20-site-search__ask-button"
-              @click="onAskQuestion"
+              label="Ask"
+              size="md"
+              bordered
+              @click.native="onAskQuestion"
               :disabled="!questionText || searchingAi"
-            >
-              Ask
-            </button>
+            />
+            <asd20-loader
+              v-if="searchingAi"
+              size="sm"
+              class="asd20-site-search__inline-loader"
+            />
           </div>
         </div>
-        <hr/>
+        <hr />
 
         <!-- Search by Keyword -->
         <div class="asd20-site-search__field asd20-site-search__field--keyword">
@@ -38,7 +45,7 @@
             idTag="-sitewide"
             ref="search"
             v-model="keywords"
-            placeholder="Search by keyword."
+            placeholder="Search by keyword"
           />
         </div>
 
@@ -56,39 +63,56 @@
 
       <asd20-viewport class="asd20-site-search__results" scrollable>
         <asd20-notification
-          v-if="!keywords && !questionText && !searchingFiles && !searchingPages && !searchingAi"
+          v-if="
+            !keywords &&
+            !questionText &&
+            !searchingFiles &&
+            !searchingPages &&
+            !searchingAi
+          "
           title="Ask a Question, or Search by Keyword"
-          description="Use the top box for plain-language questions, or search by keyword in the box below."
+          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>
 
-        <!-- Pages tab -->
-        <div v-show="currentTab === 'Pages'" scrollable>
-          <!-- AI Answer Section -->
+        <!-- Answers tab -->
+        <div v-show="currentTab === 'Answers'" scrollable>
           <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="aiUiSources.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 />
+                  <strong>Content from: {{ src.hostLabel }}</strong
+                  ><br />
                   <a :href="src.url" target="_blank" rel="noreferrer">
                     {{ src.title }}
                   </a>
-                  <p v-if="src.snippet" class="asd20-site-search__ai-snippet">
-                    {{ src.snippet }}
-                  </p>
                 </li>
               </ul>
             </div>
 
             <asd20-loader v-if="searchingAi" size="lg" />
           </div>
+          <asd20-loader v-if="searchingAi && !aiAnswer" size="lg" />
+        </div>
 
+        <!-- Pages tab -->
+        <div v-show="currentTab === 'Pages'" scrollable>
           <!-- No results -->
           <asd20-notification
-            v-if="keywords && _pages.length === 0 && !searchingPages && !aiAnswer"
+            v-if="keywords && _pages.length === 0 && !searchingPages"
             title="No Pages Found"
             description="Try using different keywords."
           />
@@ -122,7 +146,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"
@@ -164,6 +190,7 @@ import Asd20Loader from '../../molecules/Asd20Loader'
 import Asd20Modal from '../../molecules/Asd20Modal'
 import Asd20DepartmentContactCard from '../../molecules/Asd20DepartmentContactCard'
 import Asd20Checkbox from '../../atoms/Asd20Checkbox'
+import Asd20Button from '../../atoms/Asd20Button'
 
 // Helpers
 import debounce from 'lodash/debounce'
@@ -224,16 +251,20 @@ export default {
     Asd20Modal,
     Asd20DepartmentContactCard,
     Asd20Checkbox,
+    Asd20Button,
   },
 
   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: () => [] },
   },
 
   data: () => ({
-    currentTab: 'Pages',
+    currentTab: 'Answers',
     // keyword search (classic)
     keywords: '',
     // question input (AI)
@@ -279,6 +310,11 @@ export default {
     },
     tabs() {
       return [
+        {
+          label: 'Answers',
+          badge: this.aiAnswer ? 1 : 0,
+          active: this.currentTab === 'Answers',
+        },
         {
           label: 'Pages',
           badge: this._pages.length,
@@ -357,6 +393,9 @@ export default {
         this.searchingPages = true
         await this.$store.dispatch('search/queryPages', this.keywords)
         this.searchingPages = false
+        if (this.keywords && this.keywords.trim()) {
+          this.currentTab = 'Pages'
+        }
       }
     },
 
@@ -436,6 +475,7 @@ export default {
       if (this.searchingAi) return
 
       this.searchingAi = true
+      this.currentTab = 'Answers'
       try {
         const organizationId =
           this.organization && this.organization.id
@@ -456,9 +496,9 @@ export default {
           }
         )
 
-        this.aiAnswer = answer
+        this.aiAnswer = this.sanitizeAnswer(answer)
         this.aiSources = sources || []
-        this.currentTab = 'Pages'
+        this.currentTab = 'Answers'
       } catch (e) {
         console.error('AI search failed', e)
         this.aiAnswer = null
@@ -467,6 +507,63 @@ export default {
         this.searchingAi = false
       }
     },
+
+    sanitizeAnswer(rawHtml) {
+      if (!rawHtml) return ''
+      // 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 allowedAttrs = {
+        A: ['href'],
+      }
+
+      const container = window.document.createElement('div')
+      container.innerHTML = rawHtml
+
+      const cleanNode = node => {
+        const children = Array.from(node.childNodes)
+        children.forEach(child => {
+          if (child.nodeType === 1) {
+            const tag = child.tagName.toUpperCase()
+            if (!allowedTags.has(tag)) {
+              while (child.firstChild) {
+                node.insertBefore(child.firstChild, child)
+              }
+              node.removeChild(child)
+              return
+            }
+
+            const allowed = allowedAttrs[tag] || []
+            Array.from(child.attributes).forEach(attr => {
+              const name = attr.name.toLowerCase()
+              if (!allowed.includes(attr.name)) {
+                child.removeAttribute(attr.name)
+              } else if (tag === 'A' && name === 'href') {
+                const href = attr.value || ''
+                const safe =
+                  href.startsWith('#') ||
+                  href.startsWith('mailto:') ||
+                  /^https?:\/\//i.test(href)
+                if (!safe) {
+                  child.removeAttribute('href')
+                } else {
+                  child.setAttribute('rel', 'noreferrer noopener')
+                  child.setAttribute('target', '_blank')
+                }
+              }
+            })
+
+            cleanNode(child)
+          } else if (child.nodeType === 8) {
+            node.removeChild(child)
+          }
+        })
+      }
+
+      cleanNode(container)
+      return container.innerHTML
+    },
   },
 }
 </script>
@@ -502,7 +599,7 @@ export default {
   }
 
   &__options {
-    padding: space(0.5);
+    padding: space(0.125);
     display: flex;
     flex-direction: column;
   }
@@ -532,24 +629,25 @@ export default {
 
   &__ask-button {
     flex: 0 0 auto;
-    padding: 0 space(0.75);
-    border-radius: 999px;
-    border: 1px solid var(--color__primary, #22506a);
-    background: var(--color__primary, #22506a);
-    color: #fff;
-    font-weight: 600;
-    font-size: 0.9rem;
-    cursor: pointer;
-    white-space: nowrap;
+  }
 
-    &:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
+  &__inline-loader {
+    align-self: center;
   }
 
   &__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 {
@@ -608,6 +706,9 @@ export default {
       flex-grow: 0;
     }
   }
+  hr {
+    padding: 0.2px;
+  }
 }
 
 @media (min-width: 768px) {

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;