Deduplicate generative direct answer calls (#554)

The effect hook that triggers a GDA call has two dependencies: the search results and the search ID. These both change when a search is made. In React 18, these updates are batched together so only one call to GDA gets made when the search is updated. However, in React 17, no batching is performed and updates are handled in order, meaning a call to GDA is made when the search results are updated and when the search ID is updated, even if the same search triggers both updates. This change tracks the search results and only executes a new GDA call if the search results have changed.

J=WAT-4861
TEST=manual

Created a local test site that runs on React 17. Made a local tarball with my changes to search-ui-react using npm pack and pointed the local test site's import of search-ui-react to the tarball. Confirmed that only one GDA call is made per-seasrch.

Also spun up the search-ui-react test-site (which runs on React 18) and confirmed that GDA calls are still made once per search as expected.

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.storybook/snapshots/__snapshots__/filtersearch--dropdown-unsectioned.png

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "watson@yext.com",
   "license": "BSD-3-Clause",

package-lock.json

@@ -11,7 +11,7 @@ import { useCardAnalytics } from '../hooks/useCardAnalytics';
 import { DefaultRawDataType } from '../models/index';
 import { executeGenerativeDirectAnswer } from '../utils/search-operations';
 import { Markdown, MarkdownCssClasses } from './Markdown';
-import React, { useMemo } from 'react';
+import React, {useMemo, useRef} from 'react';
 
 /**
  * The CSS class interface used for {@link GenerativeDirectAnswer}.
@@ -92,16 +92,18 @@ export function GenerativeDirectAnswer({
     }
   }, [isUniversal, universalResults, verticalResults]);
 
+  const lastExecutedSearchResults = useRef(undefined as Result[] | undefined);
   const searchActions = useSearchActions();
   const gdaResponse = useSearchState(state => state.generativeDirectAnswer?.response);
   const isLoading = useSearchState(state => state.generativeDirectAnswer?.isLoading);
   const handleClickEvent = useReportClickEvent();
 
   React.useEffect(() => {
-    if (!searchResults?.length || !searchId) {
+    if (!searchResults?.length || !searchId || searchResults === lastExecutedSearchResults.current) {
       return;
     }
     executeGenerativeDirectAnswer(searchActions);
+    lastExecutedSearchResults.current = searchResults;
   }, [searchResults, searchId]);
 
   if (!searchResults?.length || isLoading || !gdaResponse || gdaResponse.resultStatus !== 'SUCCESS') {
@@ -152,7 +154,7 @@ function Answer(props: AnswerProps) {
     }),
     [cssClasses.answerText]
   );
-  
+
   return <>
     <div className={cssClasses.header}>
       {answerHeader ?? t('aiGeneratedAnswer')}