Incomplete search pieces to help with generative ai search

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 # npm run ts-lint-commit-hook
-# npm run lint && npm run test:ci
+# npm run lint && npm run test:ci

components/Search/Search.tsx

@@ -14,21 +14,36 @@ import React, {
 } from "react";
 
 import { ALL_FACETS } from "@/lib/constants/facets-model";
+import GenerativeAIDialog from "@/components/Shared/Dialog";
+import { UserContext } from "@/context/user-context";
 import useQueryParams from "@/hooks/useQueryParams";
 import { useRouter } from "next/router";
+import { useSearchState } from "@/context/search-context";
 
 interface SearchProps {
   isSearchActive: (value: boolean) => void;
 }
 
 const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
   const router = useRouter();
+  const { urlFacets } = useQueryParams();
+
   const search = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
+
   const [searchValue, setSearchValue] = useState<string>("");
   const [searchFocus, setSearchFocus] = useState<boolean>(false);
+
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const { urlFacets } = useQueryParams();
+
+  const { searchState, searchDispatch } = useSearchState();
+
+  const { user } = React.useContext(UserContext);
+
+  const [modalGenerativeAI, setModalGenerativeUI] = useState({
+    isOpen: false,
+    title: "Generative AI Dialog",
+  });
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -70,6 +85,14 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
     });
   };
 
+  const handleGenerativeAIChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setModalGenerativeUI({ ...modalGenerativeAI, isOpen: e.target.checked });
+    searchDispatch({
+      isGenerativeAI: e.target.checked,
+      type: "updateGenerativeAI",
+    });
+  };
+
   useEffect(() => {
     setIsLoaded(true);
   }, []);
@@ -87,30 +110,52 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
   }, [searchFocus, searchValue, isSearchActive]);
 
   return (
-    <SearchStyled
-      ref={formRef}
-      onSubmit={handleSubmit}
-      data-testid="search-ui-component"
-    >
-      <Input
-        placeholder="Search by keyword or phrase, ex: Berkeley Music Festival"
-        onChange={handleSearchChange}
-        onFocus={handleSearchFocus}
-        onBlur={handleSearchFocus}
-        ref={search}
-        name="search"
-        role="search"
-      />
-      {searchValue && (
-        <Clear onClick={clearSearchResults} type="reset">
-          <IconClear />
-        </Clear>
-      )}
-      <Button type="submit" data-testid="submit-button">
-        Search <IconArrowForward />
-      </Button>
-      {isLoaded && <IconSearch />}
-    </SearchStyled>
+    <>
+      <SearchStyled
+        ref={formRef}
+        onSubmit={handleSubmit}
+        data-testid="search-ui-component"
+      >
+        <Input
+          placeholder="Search by keyword or phrase, ex: Berkeley Music Festival"
+          onChange={handleSearchChange}
+          onFocus={handleSearchFocus}
+          onBlur={handleSearchFocus}
+          ref={search}
+          name="search"
+          role="search"
+        />
+        {searchValue && (
+          <Clear onClick={clearSearchResults} type="reset">
+            <IconClear />
+          </Clear>
+        )}
+        <label htmlFor="isGenerativeAI">
+          <input
+            type="checkbox"
+            name="isGenerativeAI"
+            onChange={handleGenerativeAIChange}
+          />
+          Use Generative AI [tooltip]
+        </label>
+        <Button type="submit" data-testid="submit-button">
+          Search <IconArrowForward />
+        </Button>
+        {isLoaded && <IconSearch />}
+      </SearchStyled>
+
+      <GenerativeAIDialog
+        isOpen={modalGenerativeAI.isOpen}
+        title={modalGenerativeAI.title}
+        handleCloseClick={() =>
+          setModalGenerativeUI({ ...modalGenerativeAI, isOpen: false })
+        }
+      >
+        <p>You must log in to proceed</p>
+        <Button>Login</Button>
+        <Button>Close</Button>
+      </GenerativeAIDialog>
+    </>
   );
 };
 

context/search-context.tsx

@@ -7,6 +7,7 @@ type Action =
       type: "updateAggregations";
       aggregations: ApiResponseAggregation | undefined;
     }
+  | { type: "updateGenerativeAI"; isGenerativeAI: boolean }
   | { type: "updateSearch"; q: string }
   | { type: "updateSearchFixed"; searchFixed: boolean };
 
@@ -19,6 +20,7 @@ type SearchProviderProps = {
 
 const defaultState: SearchContextStore = {
   aggregations: {},
+  isGenerativeAI: false,
   searchFixed: false,
 };
 
@@ -34,6 +36,12 @@ function searchReducer(state: State, action: Action) {
         aggregations: action.aggregations,
       };
     }
+    case "updateGenerativeAI": {
+      return {
+        ...state,
+        isGenerativeAI: action.isGenerativeAI,
+      };
+    }
     case "updateSearch": {
       return {
         ...state,

types/context/search-context.ts

@@ -2,6 +2,7 @@ import { ApiResponseAggregation } from "@/types/api/response";
 
 export interface SearchContextStore {
   aggregations?: ApiResponseAggregation;
+  isGenerativeAI: boolean;
   searchFixed: boolean;
 }