@asd20/ui 3.6.1 → 3.7.0

package/package.json

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

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

@@ -17,16 +17,21 @@
               ref="question"
               v-model="questionText"
               @keyup.enter.stop.prevent="onAskQuestion"
-              placeholder="Ask a question."
+              placeholder="Ask a question"
             />
-            <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/>
@@ -38,7 +43,7 @@
             idTag="-sitewide"
             ref="search"
             v-model="keywords"
-            placeholder="Search by keyword."
+            placeholder="Search by keyword"
           />
         </div>
 
@@ -56,14 +61,19 @@
 
       <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."
         />
 
-        <!-- 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" />
@@ -76,19 +86,21 @@
                   <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."
           />
@@ -164,6 +176,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,6 +237,7 @@ export default {
     Asd20Modal,
     Asd20DepartmentContactCard,
     Asd20Checkbox,
+    Asd20Button,
   },
 
   props: {
@@ -233,7 +247,7 @@ export default {
   },
 
   data: () => ({
-    currentTab: 'Pages',
+    currentTab: 'Answers',
     // keyword search (classic)
     keywords: '',
     // question input (AI)
@@ -279,6 +293,11 @@ export default {
     },
     tabs() {
       return [
+        {
+          label: 'Answers',
+          badge: this.aiAnswer ? 1 : 0,
+          active: this.currentTab === 'Answers',
+        },
         {
           label: 'Pages',
           badge: this._pages.length,
@@ -357,6 +376,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 +458,7 @@ export default {
       if (this.searchingAi) return
 
       this.searchingAi = true
+      this.currentTab = 'Answers'
       try {
         const organizationId =
           this.organization && this.organization.id
@@ -456,9 +479,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 +490,71 @@ 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 +590,7 @@ export default {
   }
 
   &__options {
-    padding: space(0.5);
+    padding: space(0.125);
     display: flex;
     flex-direction: column;
   }
@@ -532,20 +620,10 @@ 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 {
@@ -608,6 +686,9 @@ export default {
       flex-grow: 0;
     }
   }
+  hr {
+    padding: 0.2px;
+  }
 }
 
 @media (min-width: 768px) {