836 added AI search components

client/.env.test

@@ -1,5 +1,4 @@
 REACT_APP_API_BASE_URL=https://endpoint.yale.edu/
-REACT_APP_FACETS_API_BASE_URL=https://endpoint2.collections.yale.edu/
 REACT_APP_CMS_API_BASE_URL=https://endpoint.pantheonsite.io/jsonapi/
 REACT_APP_WIKIDATA_IMAGE_PATHNAME=https://commons.wikimedia.org/test/Special:Filepath/
 REACT_APP_LUX_WIKIDATA_MANIFEST_PREFIX=https://view.endpoint.yale.edu/uv3/?manifest=https://manifests.endpoint.yale.edu/test/manifest/

client/CHANGELOG.md

@@ -113,6 +113,7 @@ All notable changes to this project will be documented in this file.
 
 - Added Objects and Works overlay button to objects/works included section ([#559](https://github.com/project-lux/lux-frontend/issues/559)).
 - Added support for Collections Created, Published, or Influenced By on P&G pages ([#837](https://github.com/project-lux/lux-frontend/issues/837)).
+- Added AI Search components ([#836](https://github.com/project-lux/lux-frontend/issues/836)).
 
 ### Changed
 

client/src/config/advancedSearch/inputTypes.ts

@@ -28,8 +28,8 @@ export const dimensions: Array<string> = [
 
 export const recordTypes: Record<string, Record<string, string>> = {
   agent: {
-    person: 'Person',
-    group: 'Group',
+    Person: 'Person',
+    Group: 'Group',
   },
   item: {
     HumanMadeObject: 'Physical Object',

client/src/features/advancedSearch/ToggleSearchButton.tsx

@@ -60,6 +60,7 @@ const ToggleButton: React.FC<IToggleSearchButton> = ({
     translate({
       query: searchString,
       scope,
+      isAiSearch: false,
       onSuccess: (translatedString) => {
         dispatch(changeCurrentSearchState({ value: 'advanced' }))
         const translatedObject = JSON.parse(translatedString)

client/src/features/results/EventResults.tsx

@@ -31,7 +31,8 @@ const EventResults: React.FC<IProps> = ({ searchResponse, isMobile }) => {
   const pageParam = `${paramPrefix}p`
   const page: any = queryString.has(pageParam) ? queryString.get(pageParam) : 1
   const sort = queryString.get(`${tab}Sort`)
-  const hasSimpleSearchQuery = queryString.has('sq')
+  const hasSimpleSearchQuery =
+    queryString.has('sq') && !queryString.has('aiSearch')
   const view: string = queryString.has('view')
     ? (queryString.get('view') as string)
     : 'list'

client/src/features/results/ObjectResults.tsx

@@ -35,8 +35,8 @@ const ObjectResults: React.FC<IProps> = ({ searchResponse, isMobile }) => {
   const view: string = queryString.has('view')
     ? (queryString.get('view') as string)
     : 'list'
-  const hasSimpleSearchQuery = queryString.has('sq')
-
+  const hasSimpleSearchQuery =
+    queryString.has('sq') && !queryString.has('aiSearch')
   const { data, isFetching, isSuccess, isError, error, isLoading, status } =
     searchResponse
 

client/src/features/results/ResultsPage.tsx

@@ -101,7 +101,7 @@ const ResultsPage: React.FC = () => {
   const urlParams = new URLSearchParams(search)
   const fromLandingPage = isFromLandingPage(state as { [key: string]: boolean })
   // Check if current tab q exist
-  const hasSimpleSearchQuery = urlParams.has('sq')
+  const hasSimpleSearchQuery = urlParams.has('sq') && !urlParams.has('aiSearch')
   // Setting as empty strings
   const queryString = urlParams.get('q') || ''
   const queryTab = urlParams.get('qt') || tab
@@ -110,6 +110,7 @@ const ResultsPage: React.FC = () => {
   const rnd = urlParams.get('rnd') || undefined
   const isSwitchToSimpleSearch =
     urlParams.get('fromAdvanced') === 'true' || false
+  const isAiSearch = urlParams.get('aiSearch') === 'true' || false
   const facetSearchString = urlParams.get(`${paramPrefix}f`) || null
   let searchStringWithFacets = ''
 
@@ -136,6 +137,7 @@ const ResultsPage: React.FC = () => {
   const searchResponse = useSearchQuery(
     {
       q: searchStringWithFacets,
+      isAiSearch,
       filterResults,
       page,
       tab,

client/src/features/search/AdvancedSearchButton.tsx

@@ -42,6 +42,7 @@ const AdvancedSearchButton: React.FC<IProps> = ({ setIsError, id }) => {
     }
     translate({
       query: searchString,
+      isAiSearch: false,
       scope: searchScope[entityType],
       onSuccess: (translatedString) => {
         const urlParams = new URLSearchParams()

client/src/features/search/SearchBox.tsx

@@ -4,7 +4,7 @@ import { useNavigate, useLocation, useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { useAppDispatch, useAppSelector } from '../../app/hooks'
-import { searchScope } from '../../config/searchTypes'
+import { scopeToTabTranslation, searchScope } from '../../config/searchTypes'
 import { checkForStopWords, translate } from '../../lib/util/translate'
 import {
   addSimpleSearchInput,
@@ -43,6 +43,7 @@ const StyledSearchBox = styled.div`
   }
 
   .submitButton {
+    border: none;
     background-color: ${theme.color.white};
     border-radius: 0 ${theme.searchBox.borderRadiusMobile}
       ${theme.searchBox.borderRadiusMobile} 0;
@@ -56,6 +57,19 @@ const StyledSearchBox = styled.div`
         ${theme.searchBox.borderRadius} 0;
     }
   }
+
+  .submitAiButton {
+    border: none;
+    background-color: ${theme.color.white};
+    height: 72px;
+    font-size: inherit;
+  }
+
+  .submitSearch {
+    &:hover {
+      background-color: ${theme.color.lightGray};
+    }
+  }
 `
 
 const SearchBox: React.FC<{
@@ -74,6 +88,7 @@ const SearchBox: React.FC<{
   isSearchOpen = false,
 }) => {
   const [isLoading, setIsLoading] = useState(false)
+  const [isAiSearch, setIsAiSearch] = useState<boolean>(false)
   const currentState = useAppSelector(
     (state) => state.simpleSearch as ISimpleSearchState,
   )
@@ -122,23 +137,34 @@ const SearchBox: React.FC<{
       const valueToSubmit = checkForStopWords(currentState.value!)
       translate({
         query: valueToSubmit,
+        isAiSearch,
         scope: searchScope[tab],
         onSuccess: (translatedString) => {
+          let newTab = tab
+          if (isAiSearch) {
+            const jsonTranslatedString = JSON.parse(translatedString)
+            newTab = scopeToTabTranslation[jsonTranslatedString._scope]
+          }
           const newUrlParams = new URLSearchParams()
           const query = JSON.parse(translatedString)
           delete query._scope
           newUrlParams.set('q', JSON.stringify(query))
           newUrlParams.set('sq', valueToSubmit)
+          newUrlParams.set('aiSearch', isAiSearch ? 'true' : 'false')
           if (closeSearchBox) {
             closeSearchBox()
           }
           inputRef.current!.value = ''
           setIsError(false)
           setIsLoading(false)
-          pushClientEvent('Search Button', 'Submit', 'Simple Search')
+          pushClientEvent(
+            'Search Button',
+            'Submit',
+            isAiSearch ? 'AI Search' : 'Simple Search',
+          )
           navigate(
             {
-              pathname: `/view/results/${tab}`,
+              pathname: `/view/results/${newTab}`,
               search: `${newUrlParams.toString()}`,
             },
             {
@@ -196,8 +222,23 @@ const SearchBox: React.FC<{
                 <button
                   disabled={!validateInput()}
                   type="submit"
-                  className="btn submitButton"
+                  className="btn submitAiButton submitSearch"
+                  aria-label="submit AI search input"
+                  onClick={() => setIsAiSearch(true)}
+                  data-testid={`${id}-ai-search-submit-button`}
+                >
+                  {isLoading ? (
+                    <LoadingSpinner />
+                  ) : (
+                    <i className="bi bi-stars" />
+                  )}
+                </button>
+                <button
+                  disabled={!validateInput()}
+                  type="submit"
+                  className="btn submitButton submitSearch"
                   aria-label="submit search input"
+                  onClick={() => setIsAiSearch(false)}
                   data-testid={`${id}-search-submit-button`}
                 >
                   {isLoading ? (

client/src/lib/util/translate.ts

@@ -4,6 +4,7 @@ import { fetchWithToken } from './fetchWithToken'
 
 interface ITranslateParameters {
   query: string
+  isAiSearch: boolean
   scope: string
   onSuccess: (translatedString: string) => void
   onError: () => void
@@ -12,16 +13,18 @@ interface ITranslateParameters {
 
 export function translate({
   query,
+  isAiSearch,
   scope,
   onSuccess,
   onError,
   onLoading,
 }: ITranslateParameters): void {
   const urlParams = new URLSearchParams()
   urlParams.set('q', query)
+  const updatedScope = isAiSearch ? '' : `/${scope}`
   onLoading()
   fetchWithToken(
-    `${getDataApiBaseUrl()}api/translate/${scope}?${urlParams.toString()}`,
+    `${getDataApiBaseUrl()}api/${isAiSearch ? 'ai-' : ''}translate${updatedScope}?${urlParams.toString()}`,
   )
     .then((response) => {
       if (response.ok) {

client/src/redux/api/ml_api.ts

@@ -59,6 +59,7 @@ export const mlApi: any = createApi({
 
         let scope = ''
         if (!isUndefined(tab)) {
+          // If the search is an AI search, do not set a scope
           scope = searchScope[tab]
         }
         if (!isUndefined(subTab)) {

client/src/types/IMlApiParams.ts

@@ -9,7 +9,12 @@ export interface ISearchParams {
   facetNames?: string
   sort?: string
   rnd?: string // sequence number for random shuffle queries
-  [key: string]: string | number | { [key: string]: string } | undefined
+  [key: string]:
+    | string
+    | number
+    | boolean
+    | { [key: string]: string }
+    | undefined
 }
 
 export interface IItemParams {

server/config/env.ts

@@ -24,6 +24,7 @@ export const numInstances = getInt(process.env.NUM_INSTANCES) || -1
 
 export const dataApiBaseUrl = getString(process.env.DATA_API_BASE_URL)
 export const cmsApiBaseUrl = getString(process.env.CMS_API_BASE_URL)
+
 export const wikidataImagePathname = getString(
   process.env.WIKIDATA_IMAGE_PATHNAME,
 )