Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Wire up not logged in modal on Search page directing users to login i…
Browse files Browse the repository at this point in the history
…f they want to use generative AI search
adamjarling committed Mar 1, 2024
1 parent 168e6d4 commit 1d1be7c
Showing 3 changed files with 81 additions and 12 deletions.
21 changes: 21 additions & 0 deletions components/Search/Search.styled.ts
Original file line number Diff line number Diff line change
@@ -100,6 +100,26 @@ const Clear = styled("button", {
},
});

const GenerativeAICheckbox = styled("div", {
color: "$black50",
fontSize: "$gr2",
display: "flex",
alignItems: "center",

"& label": {
cursor: "pointer",
width: "120px",
},

"& svg": {
position: "relative",
padding: "$gr0",
height: "$gr3",
width: "$gr3",
fill: "$black50",
},
});

const ResultsMessage = styled("span", {
color: "$black50",
padding: "0 $gr4 $gr4",
@@ -144,6 +164,7 @@ const ResultsWrapper = styled("div", {
export {
Button,
Clear,
GenerativeAICheckbox,
Input,
NoResultsMessage,
ResultsMessage,
62 changes: 51 additions & 11 deletions components/Search/Search.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { Button, Clear, Input, SearchStyled } from "./Search.styled";
import {
Button,
Clear,
GenerativeAICheckbox,
Input,
SearchStyled,
} from "./Search.styled";
import {
IconArrowForward,
IconClear,
IconInfo,
IconSearch,
} from "@/components/Shared/SVG/Icons";
import React, {
@@ -14,7 +21,9 @@ import React, {
} from "react";

import { ALL_FACETS } from "@/lib/constants/facets-model";
import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
import GenerativeAIDialog from "@/components/Shared/Dialog";
import { Gothic_A1 } from "next/font/google";
import { UserContext } from "@/context/user-context";
import useQueryParams from "@/hooks/useQueryParams";
import { useRouter } from "next/router";
@@ -44,6 +53,9 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
isOpen: false,
title: "Generative AI Dialog",
});
const [genAICheckBox, setGenAICheckBox] = useState<boolean>(
searchState.isGenerativeAI
);

const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -86,11 +98,16 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
};

const handleGenerativeAIChange = (e: ChangeEvent<HTMLInputElement>) => {
setModalGenerativeUI({ ...modalGenerativeAI, isOpen: e.target.checked });
searchDispatch({
isGenerativeAI: e.target.checked,
type: "updateGenerativeAI",
});
if (!user?.isLoggedIn) {
setModalGenerativeUI({ ...modalGenerativeAI, isOpen: e.target.checked });
}

if (user?.isLoggedIn) {
searchDispatch({
isGenerativeAI: e.target.checked,
type: "updateGenerativeAI",
});
}
};

useEffect(() => {
@@ -109,6 +126,21 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
!searchFocus && !searchValue ? isSearchActive(false) : isSearchActive(true);
}, [searchFocus, searchValue, isSearchActive]);

useEffect(() => {
setGenAICheckBox(searchState.isGenerativeAI);
}, [searchState.isGenerativeAI]);

// TODO: This needs to accept more than one query param when
// directing to NU SSO. We need the additional query param
// to know that user came wanting to use Generative AI
function goToLocation() {
const currentUrl = `${window.location.origin}${router.asPath}`;
const url = new URL(currentUrl);
url.searchParams.set("ai", "true");
console.log("url.toString()", url.toString());
return url.toString();
}

return (
<>
<SearchStyled
@@ -130,14 +162,18 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
<IconClear />
</Clear>
)}
<label htmlFor="isGenerativeAI">

<GenerativeAICheckbox>
<input
type="checkbox"
name="isGenerativeAI"
onChange={handleGenerativeAIChange}
checked={genAICheckBox}
/>
Use Generative AI [tooltip]
</label>
<label htmlFor="isGenerativeAI">Use Generative AI</label>
<IconInfo />
</GenerativeAICheckbox>

<Button type="submit" data-testid="submit-button">
Search <IconArrowForward />
</Button>
@@ -151,8 +187,12 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
setModalGenerativeUI({ ...modalGenerativeAI, isOpen: false })
}
>
<p>You must log in to proceed</p>
<Button>Login</Button>
<p>
<a href={`${DCAPI_ENDPOINT}/auth/login?goto=${window.location}`}>
Click here
</a>{" "}
to login
</p>
<Button>Close</Button>
</GenerativeAIDialog>
</>
10 changes: 9 additions & 1 deletion pages/search.tsx
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ import { NextPage } from "next";
import { PRODUCTION_URL } from "@/lib/constants/endpoints";
import PaginationAltCounts from "@/components/Search/PaginationAltCounts";
import SearchSimilar from "@/components/Search/Similar";
import { UserContext } from "@/context/user-context";
import { apiPostRequest } from "@/lib/dc-api";
import axios from "axios";
import { buildDataLayer } from "@/lib/ga/data-layer";
@@ -29,6 +30,7 @@ import { loadDefaultStructuredData } from "@/lib/json-ld";
import { parseUrlFacets } from "@/lib/utils/facet-helpers";
import { pluralize } from "@/lib/utils/count-helpers";
import { useRouter } from "next/router";
import { useSearchState } from "@/context/search-context";

type RequestState = {
data: ApiSearchResponse | null;
@@ -39,6 +41,12 @@ type RequestState = {
const SearchPage: NextPage = () => {
const size = 40;
const router = useRouter();

const { searchState } = useSearchState();
const { user } = React.useContext(UserContext);
const showChatResponse = user?.isLoggedIn && searchState.isGenerativeAI;
console.log("showChatResponse", showChatResponse);

const [requestState, setRequestState] = useState<RequestState>({
data: null,
error: "",
@@ -182,7 +190,7 @@ const SearchPage: NextPage = () => {
/>
)}

<ChatWrapper />
{showChatResponse && <ChatWrapper />}

<Facets />

0 comments on commit 1d1be7c

Please sign in to comment.