Fix bug in Search tabs calculation; clean up test references to ai qu…

…ery param

components/Chat/Chat.test.tsx

@@ -50,8 +50,7 @@ jest.mock("@/hooks/useChatSocket");
 }));
 
 describe("Chat component", () => {
- it("renders default ai response placeholder text", () => {
- mockRouter.setCurrentUrl("/search?ai=true");
+ it("renders default placeholder text when no search term is present", () => {
  render(<Chat />);
 
  const wrapper = screen.getByText(
@@ -64,7 +63,7 @@ describe("Chat component", () => {
  });
 
  it("renders the chat response component when search term is present", () => {
- mockRouter.setCurrentUrl("/search?q=tell+me+about+boats&ai=true");
+ mockRouter.setCurrentUrl("/search?q=tell+me+about+boats");
 
  render(
  <SearchProvider>
@@ -94,7 +93,7 @@ describe("Chat component", () => {
  sendMessage: mockMessage,
  }));
 
- mockRouter.setCurrentUrl("/search?q=boats&ai=true");
+ mockRouter.setCurrentUrl("/search?q=boats");
 
  render(
  <SearchProvider>
@@ -112,7 +111,7 @@ describe("Chat component", () => {
  });
 
  it("doesn't send a websocket message if the search term is empty", () => {
- mockRouter.setCurrentUrl("/search?ai=true");
+ mockRouter.setCurrentUrl("/search");
  render(
  <SearchProvider>
  <Chat />

components/Search/Search.test.tsx

@@ -1,14 +1,37 @@
 import { render, screen } from "@/test-utils";
 
 import Search from "./Search";
+import { UserContext } from "@/context/user-context";
+import { UserContext as UserContextType } from "@/types/context/user";
 import mockRouter from "next-router-mock";
 import { renderHook } from "@testing-library/react";
 import { useRouter } from "next/router";
 import userEvent from "@testing-library/user-event";
 
 const mockIsSearchActive = jest.fn();
 
+const defaultUser = {
+ user: {
+ email: "[email protected]",
+ isLoggedIn: true,
+ isReadingRoom: false,
+ name: "Ace Frehley",
+ sub: "xyz123",
+ },
+};
+
+const withUserProvider = (
+ Component: React.ReactNode,
+ user: UserContextType = defaultUser,
+) => {
+ return <UserContext.Provider value={user}>{Component}</UserContext.Provider>;
+};
+
 describe("Search component", () => {
+ beforeEach(() => {
+ localStorage.clear();
+ });
+
  it("renders the search ui component", () => {
  render(<Search isSearchActive={() => ({})} />);
  const wrapper = screen.getByTestId("search-ui-component");
@@ -71,19 +94,19 @@ describe("Search component", () => {
  it("renders standard placeholder text for non AI search", () => {
  render(<Search isSearchActive={mockIsSearchActive} />);
  const input = screen.getByPlaceholderText(
- "Search by keyword or phrase, ex: Berkeley Music Festival"
+ "Search by keyword or phrase, ex: Berkeley Music Festival",
  );
  expect(input).toBeInTheDocument();
  });
 
  it("renders generative AI placeholder text when AI search is active", () => {
- mockRouter.setCurrentUrl("/search?ai=true");
+ localStorage.setItem("ai", JSON.stringify("true"));
+
+ render(withUserProvider(<Search isSearchActive={mockIsSearchActive} />));
 
- render(<Search isSearchActive={mockIsSearchActive} />);
  const input = screen.getByPlaceholderText(
- "What can I show you from our collections?"
+ "What can I show you from our collections?",
  );
-
  expect(input).toBeInTheDocument();
  });
 });

components/Search/Search.tsx

@@ -13,6 +13,7 @@ import GenerativeAIToggle from "./GenerativeAIToggle";
 import SearchTextArea from "@/components/Search/TextArea";
 import { UrlFacets } from "@/types/context/filter-context";
 import { getAllFacetIds } from "@/lib/utils/facet-helpers";
+import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
 import useQueryParams from "@/hooks/useQueryParams";
 import { useRouter } from "next/router";
 
@@ -22,7 +23,9 @@ interface SearchProps {
 
 const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
  const router = useRouter();
- const { ai, urlFacets } = useQueryParams();
+ const { urlFacets } = useQueryParams();
+
+ const { isChecked } = useGenerativeAISearchToggle();
 
  const searchRef = useRef<HTMLTextAreaElement>(null);
  const formRef = useRef<HTMLFormElement>(null);
@@ -34,7 +37,7 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
  const handleSubmit = (
  e:
  | SyntheticEvent<HTMLFormElement>
- | React.KeyboardEvent<HTMLTextAreaElement>
+ | React.KeyboardEvent<HTMLTextAreaElement>,
  ) => {
  e.preventDefault();
 
@@ -102,7 +105,7 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
  isFocused={searchFocus}
  >
  <SearchTextArea
- isAi={!!ai}
+ isAi={!!isChecked}
  isFocused={searchFocus}
  searchValue={searchValue}
  handleSearchChange={handleSearchChange}

hooks/useQueryParams.ts

@@ -7,22 +7,18 @@ export default function useQueryParams() {
  const { isReady, query } = useRouter();
  const [urlFacets, setUrlFacets] = React.useState<UrlFacets>({});
  const [searchTerm, setSearchTerm] = React.useState<string>();
- const [ai, setAi] = React.useState<string>();
 
  React.useEffect(() => {
  if (!isReady) return;
 
  const obj = parseUrlFacets(query);
  const q = (query.q ? query.q : "") as string;
- const ai = (query.ai ? query.ai : "") as string;
 
  setUrlFacets(obj);
  setSearchTerm(q);
- setAi(ai);
  }, [isReady, query]);
 
  return {
- ai,
  searchTerm,
  urlFacets,
  };

lib/constants/endpoints.ts

@@ -9,7 +9,7 @@ const DC_URL = process.env.NEXT_PUBLIC_DC_URL;
 const DCAPI_ENDPOINT = process.env.NEXT_PUBLIC_DCAPI_ENDPOINT;
 
 const DC_API_SEARCH_URL = `${DCAPI_ENDPOINT}/search`;
-const DCAPI_CHAT_ENDPOINT = `${DCAPI_ENDPOINT}/chat-endpoint`;
+const DCAPI_CHAT_ENDPOINT = `${DCAPI_ENDPOINT}/chat/endpoint`;
 
 export {
  DC_URL,

pages/search.tsx

@@ -7,7 +7,7 @@ import {
  ResultsWrapper,
  StyledResponseWrapper,
 } from "@/components/Search/Search.styled";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { ActiveTab } from "@/types/context/search-context";
 import { ApiSearchRequestBody } from "@/types/api/request";
@@ -37,6 +37,7 @@ import { loadDefaultStructuredData } from "@/lib/json-ld";
 import { parseUrlFacets } from "@/lib/utils/facet-helpers";
 import { pluralize } from "@/lib/utils/count-helpers";
 import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
+import useQueryParams from "@/hooks/useQueryParams";
 import { useRouter } from "next/router";
 
 type RequestState = {
@@ -49,7 +50,8 @@ const SearchPage: NextPage = () => {
  const size = 40;
 
  const router = useRouter();
- const prevRouterQuery = useRef(router.query);
+
+ const { urlFacets } = useQueryParams();
 
  const { user } = React.useContext(UserContext);
  const { isChecked } = useGenerativeAISearchToggle();
@@ -155,21 +157,15 @@ const SearchPage: NextPage = () => {
  }, [pageQueryUrl]);
 
  /**
- * Maintain tab state when filtering in the Gen AI Chat component
+ * Maintain "stream / results" tab state when filtering in the Gen AI Chat component
  */
  useEffect(() => {
- const routerQueryParamsChanged =
- JSON.stringify(prevRouterQuery.current) !== JSON.stringify(router.query);
-
- if (routerQueryParamsChanged) {
- setActiveTab(
- routerQueryParamsChanged ? "results" : isChecked ? "stream" : "results",
- );
-
- // Update the previous value for the next render
- prevRouterQuery.current = router.query;
+ if (Object.keys(urlFacets).length > 0) {
+ setActiveTab("results");
+ } else if (isChecked) {
+ setActiveTab("stream");
  }
- }, [router.query]);
+ }, [urlFacets, isChecked]);
 
  /**
  * Handle any network errors