@asd20/ui 3.5.6 → 3.6.0

package/package.json

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

package/src/components/organisms/Asd20SiteSearch/index.stories.js

@@ -25,7 +25,7 @@ storiesOf('Organisms - Asd20SiteSearch', module).add(
             pages: [{title: '1', description: 'adsfasdfasf', url: 'url', tags: ['one'] }], 
             files: [], 
             groups: [],
-            includeDistrictSearchResults: true,
+            includeDistrictResults: true,
           }, 
           actions: {
             queryPages({state, commit},  keywords) {
@@ -37,7 +37,7 @@ storiesOf('Organisms - Asd20SiteSearch', module).add(
             queryGroups() {
               console.log('queried groups')
             },
-            setIncludeDistrictSearchResults() {
+            setIncludeDistrictResults() {
               console.log('setting district search toggle')
             }
           }

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

@@ -1,4 +1,4 @@
-\<template>
+<template>
   <div
     ref="container"
     class="asd20-site-search"
@@ -8,7 +8,41 @@
   >
     <div class="asd20-site-search__viewport">
       <div class="asd20-site-search__options">
-        <asd20-search-field idTag="-sitewide" ref="search" v-model="keywords" />
+        <!-- Ask a 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."
+            />
+            <button
+              type="button"
+              class="asd20-site-search__ask-button"
+              @click="onAskQuestion"
+              :disabled="!questionText || searchingAi"
+            >
+              Ask
+            </button>
+          </div>
+        </div>
+        <hr/>
+
+        <!-- Search by Keyword -->
+        <div class="asd20-site-search__field asd20-site-search__field--keyword">
+          <!-- <label class="asd20-site-search__label">Search by keyword</label> -->
+          <asd20-search-field
+            idTag="-sitewide"
+            ref="search"
+            v-model="keywords"
+            placeholder="Search by keyword."
+          />
+        </div>
+
+        <!-- Only show school results -->
         <asd20-checkbox
           v-show="hasParentOrg"
           v-model="excludeDistrictResults"
@@ -17,29 +51,64 @@
           label="Only show school results"
         />
       </div>
+
       <asd20-tab-bar :tabs="tabs" @tabClick="onTabClick" />
+
       <asd20-viewport class="asd20-site-search__results" scrollable>
         <asd20-notification
-          v-if="!keywords && !searchingFiles && !searchingPages"
-          title="Search by Keyword"
-          description="Type in keywords to begin searching."
+          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."
         />
+
+        <!-- Pages tab -->
         <div v-show="currentTab === 'Pages'" scrollable>
+          <!-- AI Answer Section -->
+          <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">
+              <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>
+                  <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>
+
+          <!-- No results -->
           <asd20-notification
-            v-if="keywords && _pages.length === 0 && !searchingPages"
+            v-if="keywords && _pages.length === 0 && !searchingPages && !aiAnswer"
             title="No Pages Found"
             description="Try using different keywords."
           />
+
+          <!-- Results list -->
           <asd20-list @click.native="dismiss">
             <asd20-list-item
               v-for="item in pageListItems"
               :key="item.page.id"
-              :attribution="organization.id !== '26eaf390-d8ab-11e9-a3a8-5de5bba4f125' && !excludeDistrictResults"
+              :attribution="
+                organization.id !== '26eaf390-d8ab-11e9-a3a8-5de5bba4f125' &&
+                !excludeDistrictResults
+              "
               v-bind="item"
             />
           </asd20-list>
           <asd20-loader v-if="searchingPages" size="lg" />
         </div>
+
+        <!-- Files tab -->
         <div v-show="currentTab === 'Files'" scrollable>
           <asd20-notification
             v-if="keywords && _files.length === 0 && !searchingFiles"
@@ -50,15 +119,16 @@
           <asd20-loader v-if="searchingFiles" size="lg" />
         </div>
       </asd20-viewport>
+
       <div class="asd20-site-search__suggested" v-if="_groups.length > 0">
-        <h3>{{ _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:' }}</h3>
+        <h3>
+          {{ _groups.length > 1 ? 'Suggested Contacts:' : 'Suggested Contact:' }}
+        </h3>
         <asd20-list-item
           v-for="g in _groups"
           :text-avatar="
             g.abbreviation ||
-            ((g.shortName || g.title || '')
-              .match(/\b([A-Z])/g) || [])
-              .join('')
+            ((g.shortName || g.title || '').match(/\b([A-Z])/g) || []).join('')
           "
           :key="g.id"
           :label="`${g.title}`"
@@ -67,6 +137,7 @@
         />
       </div>
     </div>
+
     <asd20-modal
       :open="!!selectedGroup"
       title="Details"
@@ -130,8 +201,9 @@ export default {
       },
       'search'
     ),
+    // Make sure your search module state uses "includeDistrictResults"
     globalPropMixinFactory(
-      'includeDistrictSearchResults',
+      'includeDistrictResults',
       {
         type: Boolean,
         default: true,
@@ -156,17 +228,19 @@ 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: () => [] },
   },
 
   data: () => ({
     currentTab: 'Pages',
+    // keyword search (classic)
     keywords: '',
-    // suggestions: [],
-    // pages: [],
-    // files: [],
-    // groups: [],
+    // question input (AI)
+    questionText: '',
+    aiAnswer: null,
+    searchingAi: false,
+    aiSources: [],
     selectedGroup: null,
     searchingPages: false,
     searchingFiles: false,
@@ -195,7 +269,7 @@ export default {
             return {
               ...item,
               sourceTitle,
-              logoUrl
+              logoUrl,
             }
           })
         : []
@@ -222,37 +296,59 @@ export default {
         return this._organization.parentOrganization !== null
       }
       return false
-      // return true
     },
     excludeDistrictResults: {
       get() {
-        return !this._includeDistrictSearchResults
+        return !this._includeDistrictResults
       },
       set(val) {
-        this._includeDistrictSearchResults = !val
-      }
+        this._includeDistrictResults = !val
+      },
+    },
+    // Enriched AI sources with host label
+    aiUiSources() {
+      return (this.aiSources || []).map(src => ({
+        ...src,
+        hostLabel: this.labelFromUrl(src.url),
+      }))
     },
   },
 
   watch: {
-    active: function(newVal) {
+    active(newVal) {
       if (newVal) {
-        this.$refs.search.$el.querySelector('input').focus()
-      } else {
-        this.$refs.search.$el.querySelector('input').blur()
+        // Focus keyword search by default for power users
+        if (this.$refs.search && this.$refs.search.$el) {
+          const input = this.$refs.search.$el.querySelector('input')
+          if (input) input.focus()
+        }
+      } else if (this.$refs.search && this.$refs.search.$el) {
+        const input = this.$refs.search.$el.querySelector('input')
+        if (input) input.blur()
       }
     },
-    keywords: debounce(function(newVal, oldVal) {
+
+    // classic keyword search – unchanged behavior
+    keywords: debounce(function (newVal, oldVal) {
       if (newVal !== oldVal) {
         this.searchPages()
         this.searchFiles()
         this.searchGroups()
       }
     }, 500),
-    _includeDistrictSearchResults: function() {
+
+    _includeDistrictResults() {
       this.searchPages()
       this.searchFiles()
     },
+
+    // Clear AI answer if user clears the question
+    questionText(newVal) {
+      if (!newVal) {
+        this.aiAnswer = null
+        this.aiSources = []
+      }
+    },
   },
 
   methods: {
@@ -260,7 +356,6 @@ export default {
       if (this.$store && this.$store.state.search) {
         this.searchingPages = true
         await this.$store.dispatch('search/queryPages', this.keywords)
-        //  await this.$store.dispatch('search/setPages', this.keywords)
         this.searchingPages = false
       }
     },
@@ -297,6 +392,81 @@ export default {
         this.$emit('update:active', false)
       }
     },
+
+    // Small helper to derive a host label from URL
+    labelFromUrl(url) {
+      if (!url) return 'Academy District 20'
+      try {
+        const host = new URL(url).hostname
+
+        if (host === 'www.asd20.org') return 'Academy District 20'
+
+        if (host.endsWith('.asd20.org')) {
+          const subdomain = host.replace('.asd20.org', '')
+          switch (subdomain) {
+            case 'rampart':
+              return 'Rampart High School'
+            case 'pinecreek':
+              return 'Pine Creek High School'
+            // add more mappings as needed
+            default:
+              return subdomain.charAt(0).toUpperCase() + subdomain.slice(1)
+          }
+        }
+
+        return host
+      } catch {
+        return 'Academy District 20'
+      }
+    },
+
+    // Called when user clicks Ask or presses Enter in question field
+    onAskQuestion() {
+      const q = (this.questionText || '').trim()
+      if (!q) {
+        this.aiAnswer = null
+        this.aiSources = []
+        return
+      }
+      this.searchAi(q)
+    },
+
+    async searchAi(question) {
+      if (!question) return
+      if (this.searchingAi) return
+
+      this.searchingAi = true
+      try {
+        const organizationId =
+          this.organization && this.organization.id
+            ? this.organization.id
+            : null
+        const organizationWebsite =
+          this.organization && this.organization.website
+            ? this.organization.website
+            : null
+
+        const { answer, sources } = await this.$store.dispatch(
+          'search/queryAiSite',
+          {
+            question,
+            organizationId,
+            organizationWebsite,
+            includeDistrictResults: this._includeDistrictResults,
+          }
+        )
+
+        this.aiAnswer = answer
+        this.aiSources = sources || []
+        this.currentTab = 'Pages'
+      } catch (e) {
+        console.error('AI search failed', e)
+        this.aiAnswer = null
+        this.aiSources = []
+      } finally {
+        this.searchingAi = false
+      }
+    },
   },
 }
 </script>
@@ -329,16 +499,99 @@ export default {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+  }
+
+  &__options {
+    padding: space(0.5);
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
+
+  &__label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: space(0.25);
+  }
+
+  &__question-row {
+    display: flex;
+    align-items: stretch;
+    gap: space(0.5);
+
     .asd20-search-field {
-      border-bottom: 1px solid var(--color__tertiary);
+      flex: 1 1 auto;
+      border-bottom: none;
+    }
+  }
+
+  &__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;
     }
   }
+
   &__results {
     flex-grow: 1;
   }
+
+  &__ai-result {
+    border-bottom: 1px solid var(--color__tertiary);
+    padding: space(0.75) space(0.75) space(0.5);
+    background: var(--website-page__alternate-background-t25);
+  }
+
+  &__ai-answer {
+    margin-bottom: space(0.5);
+  }
+
+  &__ai-sources {
+    margin-top: space(0.25);
+
+    h4 {
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: space(0.25);
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+      margin: 0;
+    }
+
+    li {
+      font-size: 0.85rem;
+      margin-bottom: space(0.25);
+    }
+  }
+
+  &__ai-snippet {
+    margin: 0;
+    opacity: 0.85;
+  }
+
   &__suggested {
     border-top: 2px solid var(--color__tertiary);
     background: var(--website-page__alternate-background-t50);
+
     h3 {
       font-size: 1rem;
       font-weight: bold;
@@ -346,14 +599,17 @@ export default {
       margin: space(0.25) 0 0 space(0.5);
     }
   }
+
   ::v-deep .asd20-checkbox {
     justify-content: flex-start;
+
     label {
       padding: space(0.5) space(0.5) space(0.5) space(1.5);
       flex-grow: 0;
     }
   }
 }
+
 @media (min-width: 768px) {
   .asd20-site-search {
     .asd20-notificaiton {
@@ -388,6 +644,7 @@ export default {
         margin-left: space(0.5);
         margin-right: space(-2.5);
       }
+
       input {
         padding: 0 space(1) 0 space(2.75);
         font-size: space(1);
@@ -397,7 +654,7 @@ export default {
 
     .asd20-notification {
       margin: space(1);
-      flex-direction: column;
+      flex-direction: row;
       margin: space(0.5);
     }
   }
@@ -413,4 +670,4 @@ export default {
     border-left: 1px solid var(--color__tertiary);
   }
 }
-</style>
+</style>

package/src/helpers/queryAiSite.js

@@ -0,0 +1,45 @@
+// helpers/search/queryAiSite.js
+import axios from 'axios'
+
+/**
+ * Calls Azure Function / API for AI site search.
+ * Expected response shape:
+ * {
+ *   answer: string | null,
+ *   sources: Array<{ url, title, snippet }>
+ * }
+ */
+export default async function queryAiSite({
+  question,
+  organizationId = null,
+  organizationWebsite = null,
+  includeDistrictResults = true,
+}) {
+  const q = (question || '').trim()
+  if (!q) {
+    return { answer: null, sources: [] }
+  }
+
+  const { data } = await axios.post(
+    process.env.AI_SITE_SEARCH_ENDPOINT, // e.g. https://...azurewebsites.net/api/httpAiSiteSearch
+    {
+      question: q,
+      organizationId,
+      organizationWebsite,
+      includeDistrictResults,
+    }
+  )
+
+  const rawSources = Array.isArray(data && data.sources) ? data.sources : []
+
+  const sources = rawSources.map((s) => ({
+    url: s.url,
+    title: s.title || s.url,
+    snippet: s.snippet || '',
+  }))
+
+  return {
+    answer: data && data.answer ? data.answer : null,
+    sources,
+  }
+}

package/src/store.js

@@ -36,10 +36,10 @@ const store = new Vuex.Store({
     search: {
       namespaced: true,
       state: {
-        pages: [{one: '1'}], 
-        files: [], 
+        pages: [{ one: '1' }],
+        files: [],
         groups: [],
-        includeDistrictSearchResults: true,
+        includeDistrictResults: true,
         languageCode: 'es',
         isInLeadershipGroup: false,
       },
@@ -52,10 +52,14 @@ const store = new Vuex.Store({
         },
         queryGroups() {
           console.log('queried groups')
-        }
-      }
-    }
-  }
+        },
+        async queryAiSite(ctx, payload) {
+          // payload is { question, organizationId?, organizationWebsite?, includeDistrictResults? }
+          return await queryAiSiteHelper(payload)
+        },
+      },
+    },
+  },
 })
 
 export default store