From a3048dc2d7fdde13a12c3f93977bab36f8f82112 Mon Sep 17 00:00:00 2001
From: Anh Thu Nguyen <anguyen@yext.com>
Date: Wed, 26 Jun 2024 18:37:45 -0400
Subject: [PATCH 1/4] support clickable citation card with link

J=CLIP-1332
TEST=auto,manual

ran `npm run test` and test manually on test-site
---
 ...ui-react.citationprops.getcitationlink.md} |  6 +-
 docs/search-ui-react.citationprops.md         |  4 +-
 ...ch-ui-react.citationprops.searchresult.md} |  6 +-
 .../search-ui-react.generativedirectanswer.md |  4 +-
 ...rativedirectanswerprops.getcitationlink.md | 13 ++++
 ...ch-ui-react.generativedirectanswerprops.md |  1 +
 docs/search-ui-react.md                       |  2 +-
 etc/search-ui-react.api.md                    |  9 ++-
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/GenerativeDirectAnswer.tsx     | 73 ++++++++++++-------
 test-site/src/pages/UniversalPage.tsx         | 27 ++++---
 12 files changed, 94 insertions(+), 57 deletions(-)
 rename docs/{search-ui-react.citationprops.searchresults.md => search-ui-react.citationprops.getcitationlink.md} (56%)
 rename docs/{search-ui-react.citationprops.citation.md => search-ui-react.citationprops.searchresult.md} (63%)
 create mode 100644 docs/search-ui-react.generativedirectanswerprops.getcitationlink.md

diff --git a/docs/search-ui-react.citationprops.searchresults.md b/docs/search-ui-react.citationprops.getcitationlink.md
similarity index 56%
rename from docs/search-ui-react.citationprops.searchresults.md
rename to docs/search-ui-react.citationprops.getcitationlink.md
index 1f7bf0d6..b03cbbc2 100644
--- a/docs/search-ui-react.citationprops.searchresults.md
+++ b/docs/search-ui-react.citationprops.getcitationlink.md
@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [searchResults](./search-ui-react.citationprops.searchresults.md)
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationLink](./search-ui-react.citationprops.getcitationlink.md)
 
-## CitationProps.searchResults property
+## CitationProps.getCitationLink property
 
 **Signature:**
 
 ```typescript
-searchResults: Result[];
+getCitationLink?: (searchResult: Result) => string | undefined;
 ```
diff --git a/docs/search-ui-react.citationprops.md b/docs/search-ui-react.citationprops.md
index fd7d8f1f..d2205bf8 100644
--- a/docs/search-ui-react.citationprops.md
+++ b/docs/search-ui-react.citationprops.md
@@ -16,7 +16,7 @@ interface CitationProps
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [citation](./search-ui-react.citationprops.citation.md) |  | string |  |
 |  [cssClasses](./search-ui-react.citationprops.cssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) |  |
-|  [searchResults](./search-ui-react.citationprops.searchresults.md) |  | Result\[\] |  |
+|  [getCitationLink?](./search-ui-react.citationprops.getcitationlink.md) |  | (searchResult: Result) =&gt; string \| undefined | _(Optional)_ |
+|  [searchResult](./search-ui-react.citationprops.searchresult.md) |  | Result |  |
 
diff --git a/docs/search-ui-react.citationprops.citation.md b/docs/search-ui-react.citationprops.searchresult.md
similarity index 63%
rename from docs/search-ui-react.citationprops.citation.md
rename to docs/search-ui-react.citationprops.searchresult.md
index 69061d9d..8ea00b30 100644
--- a/docs/search-ui-react.citationprops.citation.md
+++ b/docs/search-ui-react.citationprops.searchresult.md
@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [citation](./search-ui-react.citationprops.citation.md)
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [searchResult](./search-ui-react.citationprops.searchresult.md)
 
-## CitationProps.citation property
+## CitationProps.searchResult property
 
 **Signature:**
 
 ```typescript
-citation: string;
+searchResult: Result;
 ```
diff --git a/docs/search-ui-react.generativedirectanswer.md b/docs/search-ui-react.generativedirectanswer.md
index d3baea94..c274102e 100644
--- a/docs/search-ui-react.generativedirectanswer.md
+++ b/docs/search-ui-react.generativedirectanswer.md
@@ -9,14 +9,14 @@ Displays the AI generated answer of a generative direct answer.
 **Signature:**
 
 ```typescript
-declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard }: GenerativeDirectAnswerProps): JSX.Element | null;
+declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink }: GenerativeDirectAnswerProps): JSX.Element | null;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { customCssClasses, answerHeader, citationsHeader, CitationCard } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
+|  { customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
 
 **Returns:**
 
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md b/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
new file mode 100644
index 00000000..c5f9d3d5
--- /dev/null
+++ b/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [getCitationLink](./search-ui-react.generativedirectanswerprops.getcitationlink.md)
+
+## GenerativeDirectAnswerProps.getCitationLink property
+
+A function which is called to get the page URL that clicking on a citation card routes to.
+
+**Signature:**
+
+```typescript
+getCitationLink?: (result: Result) => string | undefined;
+```
diff --git a/docs/search-ui-react.generativedirectanswerprops.md b/docs/search-ui-react.generativedirectanswerprops.md
index 1f1aeb09..8b870c4b 100644
--- a/docs/search-ui-react.generativedirectanswerprops.md
+++ b/docs/search-ui-react.generativedirectanswerprops.md
@@ -20,4 +20,5 @@ interface GenerativeDirectAnswerProps
 |  [CitationCard?](./search-ui-react.generativedirectanswerprops.citationcard.md) |  | (props: [CitationProps](./search-ui-react.citationprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citation card |
 |  [citationsHeader?](./search-ui-react.generativedirectanswerprops.citationsheader.md) |  | string \| JSX.Element | _(Optional)_ The header for the citations section of the generative direct answer. |
 |  [customCssClasses?](./search-ui-react.generativedirectanswerprops.customcssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
+|  [getCitationLink?](./search-ui-react.generativedirectanswerprops.getcitationlink.md) |  | (result: Result) =&gt; string \| undefined | _(Optional)_ A function which is called to get the page URL that clicking on a citation card routes to. |
 
diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md
index 6c99f746..df45e59c 100644
--- a/docs/search-ui-react.md
+++ b/docs/search-ui-react.md
@@ -20,7 +20,7 @@
 |  [Facets(props)](./search-ui-react.facets.md) | A component that displays all facets applicable to the current vertical search. |
 |  [FilterDivider({ className })](./search-ui-react.filterdivider.md) | A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters. |
 |  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
-|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
+|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
 |  [Geolocation\_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, })](./search-ui-react.geolocation_2.md) | A React Component which collects location information to create a location filter and perform a new search. |
 |  [getSearchIntents(searchActions)](./search-ui-react.getsearchintents.md) | Get search intents of the current query stored in headless using autocomplete request. |
 |  [getUserLocation(geolocationOptions)](./search-ui-react.getuserlocation.md) | Retrieves user's location using navigator.geolocation API. |
diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md
index 3b160df3..44f6876e 100644
--- a/etc/search-ui-react.api.md
+++ b/etc/search-ui-react.api.md
@@ -138,12 +138,12 @@ export interface CardProps<T = DefaultRawDataType> {
 
 // @public
 export interface CitationProps {
-    // (undocumented)
-    citation: string;
     // (undocumented)
     cssClasses: GenerativeDirectAnswerCssClasses;
     // (undocumented)
-    searchResults: Result[];
+    getCitationLink?: (searchResult: Result) => string | undefined;
+    // (undocumented)
+    searchResult: Result;
 }
 
 // @public
@@ -323,7 +323,7 @@ export interface FilterSearchProps {
 export type FocusedItemData = Record<string, unknown>;
 
 // @public
-export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard }: GenerativeDirectAnswerProps): JSX.Element | null;
+export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink }: GenerativeDirectAnswerProps): JSX.Element | null;
 
 // @public
 export interface GenerativeDirectAnswerCssClasses {
@@ -351,6 +351,7 @@ export interface GenerativeDirectAnswerProps {
     CitationCard?: (props: CitationProps) => JSX.Element | null;
     citationsHeader?: string | JSX.Element;
     customCssClasses?: GenerativeDirectAnswerCssClasses;
+    getCitationLink?: (result: Result) => string | undefined;
 }
 
 // @public
diff --git a/package-lock.json b/package-lock.json
index b1315f59..2f860355 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@yext/search-ui-react",
-      "version": "1.7.0-beta.3",
+      "version": "1.7.0-beta.4",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@restart/ui": "^1.0.1",
diff --git a/package.json b/package.json
index 7bd5ba66..477e8a7b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.4",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "slapshot@yext.com",
   "license": "BSD-3-Clause",
diff --git a/src/components/GenerativeDirectAnswer.tsx b/src/components/GenerativeDirectAnswer.tsx
index 31dab23f..3dceedbd 100644
--- a/src/components/GenerativeDirectAnswer.tsx
+++ b/src/components/GenerativeDirectAnswer.tsx
@@ -32,7 +32,7 @@ const builtInCssClasses: Readonly<GenerativeDirectAnswerCssClasses> = {
   answerText: 'mt-4',
   divider: 'border-b border-gray-200 w-full pb-6 mb-6',
   citationsContainer: 'mt-4 flex overflow-x-auto gap-4',
-  citation: 'p-4 border border-gray-200 rounded-lg shadow-sm bg-slate-100 flex flex-col grow-0 shrink-0 basis-64 text-sm text-neutral overflow-x-auto',
+  citation: 'p-4 border border-gray-200 rounded-lg shadow-sm bg-slate-100 flex flex-col grow-0 shrink-0 basis-64 text-sm text-neutral overflow-x-auto cursor-pointer hover:border-indigo-500',
   citationTitle: 'font-bold',
   citationSnippet: 'line-clamp-2 text-ellipsis break-words'
 };
@@ -50,7 +50,9 @@ export interface GenerativeDirectAnswerProps {
   /** The header for the citations section of the generative direct answer. */
   citationsHeader?: string | JSX.Element,
   /** The component for citation card */
-  CitationCard?: (props: CitationProps) => JSX.Element | null
+  CitationCard?: (props: CitationProps) => JSX.Element | null,
+  /** A function which is called to get the page URL that clicking on a citation card routes to. */
+  getCitationLink?: (result: Result) => string | undefined
 }
 
 /**
@@ -65,7 +67,8 @@ export function GenerativeDirectAnswer({
   customCssClasses,
   answerHeader,
   citationsHeader,
-  CitationCard
+  CitationCard,
+  getCitationLink
 }: GenerativeDirectAnswerProps): JSX.Element | null {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
@@ -100,7 +103,14 @@ export function GenerativeDirectAnswer({
     <div className={cssClasses.container}>
       <Answer gdaResponse={gdaResponse} cssClasses={cssClasses} answerHeader={answerHeader}/>
       <div className={cssClasses.divider} />
-      <Citations gdaResponse={gdaResponse} cssClasses={cssClasses} citationsHeader={citationsHeader} searchResults={searchResults} CitationCard={CitationCard}/>
+      <Citations 
+        gdaResponse={gdaResponse} 
+        cssClasses={cssClasses} 
+        citationsHeader={citationsHeader} 
+        searchResults={searchResults} 
+        CitationCard={CitationCard}
+        getCitationLink={getCitationLink}
+      />
     </div>
   );
 }
@@ -131,9 +141,10 @@ function Answer(props: AnswerProps) {
 interface CitationsProps {
   gdaResponse: GenerativeDirectAnswerResponse,
   cssClasses: GenerativeDirectAnswerCssClasses,
-  citationsHeader?: string | JSX.Element,
   searchResults: Result[],
-  CitationCard?: (props: CitationProps) => JSX.Element | null
+  citationsHeader?: string | JSX.Element,
+  CitationCard?: (props: CitationProps) => JSX.Element | null,
+  getCitationLink?: (result: Result) => string | undefined
 }
 
 /**
@@ -143,20 +154,36 @@ function Citations(props: CitationsProps) {
   const { 
     gdaResponse, 
     cssClasses,
-    citationsHeader = `Sources (${gdaResponse.citations.length})`,
     searchResults,
-    CitationCard = Citation
+    citationsHeader = `Sources (${gdaResponse.citations.length})`,
+    CitationCard = Citation,
+    getCitationLink
   } = props;
   if (!gdaResponse.citations.length) {
     return null;
   }
+  const citationCards: JSX.Element[] = [];
+  gdaResponse.citations.forEach(
+    citation => {
+      const result: Result | undefined = searchResults.find(r => r.rawData.uid === citation);
+      if (result) {
+        citationCards.push(
+          <CitationCard 
+            key={citation} 
+            searchResult={result} 
+            cssClasses={cssClasses}
+            getCitationLink={getCitationLink}
+          />
+        )
+      }
+    });
+
   return <>
     <div className={cssClasses.header}>
       {citationsHeader}
     </div>
     <div className={cssClasses.citationsContainer}>
-      {gdaResponse.citations.map(
-        citation => <CitationCard key={citation} searchResults={searchResults} citation={citation} cssClasses={cssClasses} />)}
+      {citationCards}
     </div>
   </>;
 }
@@ -167,24 +194,20 @@ function Citations(props: CitationsProps) {
  * @public
  */
 export interface CitationProps {
-  searchResults: Result[],
-  citation: string,
-  cssClasses: GenerativeDirectAnswerCssClasses
+  searchResult: Result,
+  cssClasses: GenerativeDirectAnswerCssClasses,
+  getCitationLink?: (searchResult: Result) => string | undefined
 }
 
 function Citation(props: CitationProps) {
   const {
-    searchResults,
-    citation,
-    cssClasses
+    searchResult,
+    cssClasses,
+    getCitationLink
   } = props;
-  const rawResult: Result | undefined = searchResults.find(r => r.rawData.uid === citation);
-  if (!rawResult) {
-    return null;
-  }
-
-  return <div className={cssClasses.citation}>
-    <div className={cssClasses.citationTitle}>{rawResult.rawData.name}</div>
-    <div className={cssClasses.citationSnippet}>{rawResult.rawData.description}</div>
-  </div>;
+  const citationLink: string | undefined = getCitationLink?.(searchResult);
+  return <a className={cssClasses.citation} href={citationLink}>
+    <div className={cssClasses.citationTitle}>{searchResult.rawData.name}</div>
+    <div className={cssClasses.citationSnippet}>{searchResult.rawData.description}</div>
+  </a>;
 }
diff --git a/test-site/src/pages/UniversalPage.tsx b/test-site/src/pages/UniversalPage.tsx
index 179e3063..f8bf3275 100644
--- a/test-site/src/pages/UniversalPage.tsx
+++ b/test-site/src/pages/UniversalPage.tsx
@@ -62,20 +62,15 @@ const customSearchBarCss = {
 
 function CustomCitationCard(props: CitationProps): JSX.Element | null {
   const {
-    searchResults,
-    citation,
-    cssClasses
+    searchResult,
+    cssClasses,
+    getCitationLink
   } = props;
-  const rawResult: Result | undefined = searchResults.find((r: Result) => r.rawData.uid === citation);
-
-  if (!rawResult) {
-    return null;
-  }
-
-  return <div key={citation} className={cssClasses.citation}>
-    {typeof rawResult.rawData.id === 'string' && <div className={cssClasses.citationTitle}>{rawResult.rawData.id}</div>}
-    {typeof rawResult.rawData.type === 'string' && <div className={cssClasses.citationSnippet}>{rawResult.rawData.type}</div>}
-  </div>;
+  const citationLink: string | undefined = getCitationLink?.(searchResult);
+  return <a className={cssClasses.citation} href={citationLink}>
+    {typeof searchResult.rawData.id === 'string' && <div className={cssClasses.citationTitle}>{searchResult.rawData.id}</div>}
+    {typeof searchResult.rawData.type === 'string' && <div className={cssClasses.citationSnippet}>{searchResult.rawData.type}</div>}
+  </a>;
 }
 
 export default function UniversalPage(): JSX.Element {
@@ -92,7 +87,11 @@ export default function UniversalPage(): JSX.Element {
         customCssClasses={customSearchBarCss}
       />
       <SpellCheck />
-      <GenerativeDirectAnswer answerHeader='A custom answer header' CitationCard={CustomCitationCard}/>
+      <GenerativeDirectAnswer 
+        answerHeader='A custom answer header' 
+        CitationCard={CustomCitationCard}
+        getCitationLink={searchResult => (typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined)}
+      />
       <DirectAnswer />
       <ResultsCount />
       <UniversalResults

From 1eb42ba5945576ff3ac25fc81cfd05c0fea59e5d Mon Sep 17 00:00:00 2001
From: Anh Thu Nguyen <anguyen@yext.com>
Date: Wed, 26 Jun 2024 18:37:45 -0400
Subject: [PATCH 2/4] support easily customizable citation card

J=CLIP-1332
TEST=auto,manual

ran `npm run test` and test manually on test-site
---
 ...-ui-react.citationprops.getcitationlink.md |  2 +-
 ...-react.citationprops.getcitationsnippet.md | 11 +++++
 ...ui-react.citationprops.getcitationtitle.md | 11 +++++
 docs/search-ui-react.citationprops.md         |  4 +-
 .../search-ui-react.generativedirectanswer.md |  4 +-
 ...rativedirectanswerprops.getcitationlink.md |  2 +-
 ...ivedirectanswerprops.getcitationsnippet.md | 13 ++++++
 ...ativedirectanswerprops.getcitationtitle.md | 13 ++++++
 ...ch-ui-react.generativedirectanswerprops.md |  4 +-
 docs/search-ui-react.md                       |  2 +-
 etc/search-ui-react.api.md                    | 12 ++++--
 src/components/GenerativeDirectAnswer.tsx     | 40 ++++++++++++++-----
 test-site/src/pages/UniversalPage.tsx         |  6 ++-
 13 files changed, 102 insertions(+), 22 deletions(-)
 create mode 100644 docs/search-ui-react.citationprops.getcitationsnippet.md
 create mode 100644 docs/search-ui-react.citationprops.getcitationtitle.md
 create mode 100644 docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md
 create mode 100644 docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md

diff --git a/docs/search-ui-react.citationprops.getcitationlink.md b/docs/search-ui-react.citationprops.getcitationlink.md
index b03cbbc2..3be8e2fa 100644
--- a/docs/search-ui-react.citationprops.getcitationlink.md
+++ b/docs/search-ui-react.citationprops.getcitationlink.md
@@ -7,5 +7,5 @@
 **Signature:**
 
 ```typescript
-getCitationLink?: (searchResult: Result) => string | undefined;
+getCitationLink?: (searchResult: Result) => unknown;
 ```
diff --git a/docs/search-ui-react.citationprops.getcitationsnippet.md b/docs/search-ui-react.citationprops.getcitationsnippet.md
new file mode 100644
index 00000000..6e063c1c
--- /dev/null
+++ b/docs/search-ui-react.citationprops.getcitationsnippet.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationSnippet](./search-ui-react.citationprops.getcitationsnippet.md)
+
+## CitationProps.getCitationSnippet property
+
+**Signature:**
+
+```typescript
+getCitationSnippet?: (searchResult: Result) => unknown;
+```
diff --git a/docs/search-ui-react.citationprops.getcitationtitle.md b/docs/search-ui-react.citationprops.getcitationtitle.md
new file mode 100644
index 00000000..03f837a0
--- /dev/null
+++ b/docs/search-ui-react.citationprops.getcitationtitle.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationTitle](./search-ui-react.citationprops.getcitationtitle.md)
+
+## CitationProps.getCitationTitle property
+
+**Signature:**
+
+```typescript
+getCitationTitle?: (searchResult: Result) => unknown;
+```
diff --git a/docs/search-ui-react.citationprops.md b/docs/search-ui-react.citationprops.md
index d2205bf8..b28f5914 100644
--- a/docs/search-ui-react.citationprops.md
+++ b/docs/search-ui-react.citationprops.md
@@ -17,6 +17,8 @@ interface CitationProps
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [cssClasses](./search-ui-react.citationprops.cssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) |  |
-|  [getCitationLink?](./search-ui-react.citationprops.getcitationlink.md) |  | (searchResult: Result) =&gt; string \| undefined | _(Optional)_ |
+|  [getCitationLink?](./search-ui-react.citationprops.getcitationlink.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
+|  [getCitationSnippet?](./search-ui-react.citationprops.getcitationsnippet.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
+|  [getCitationTitle?](./search-ui-react.citationprops.getcitationtitle.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
 |  [searchResult](./search-ui-react.citationprops.searchresult.md) |  | Result |  |
 
diff --git a/docs/search-ui-react.generativedirectanswer.md b/docs/search-ui-react.generativedirectanswer.md
index c274102e..aed04289 100644
--- a/docs/search-ui-react.generativedirectanswer.md
+++ b/docs/search-ui-react.generativedirectanswer.md
@@ -9,14 +9,14 @@ Displays the AI generated answer of a generative direct answer.
 **Signature:**
 
 ```typescript
-declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink }: GenerativeDirectAnswerProps): JSX.Element | null;
+declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet }: GenerativeDirectAnswerProps): JSX.Element | null;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
+|  { customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
 
 **Returns:**
 
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md b/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
index c5f9d3d5..12da26b0 100644
--- a/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
+++ b/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
@@ -9,5 +9,5 @@ A function which is called to get the page URL that clicking on a citation card
 **Signature:**
 
 ```typescript
-getCitationLink?: (result: Result) => string | undefined;
+getCitationLink?: (result: Result) => unknown;
 ```
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md b/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md
new file mode 100644
index 00000000..aa2eebe6
--- /dev/null
+++ b/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [getCitationSnippet](./search-ui-react.generativedirectanswerprops.getcitationsnippet.md)
+
+## GenerativeDirectAnswerProps.getCitationSnippet property
+
+A function which is called to get the snippet of citation card.
+
+**Signature:**
+
+```typescript
+getCitationSnippet?: (result: Result) => unknown;
+```
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md b/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md
new file mode 100644
index 00000000..cac056de
--- /dev/null
+++ b/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [getCitationTitle](./search-ui-react.generativedirectanswerprops.getcitationtitle.md)
+
+## GenerativeDirectAnswerProps.getCitationTitle property
+
+A function which is called to get the title of citation card.
+
+**Signature:**
+
+```typescript
+getCitationTitle?: (result: Result) => unknown;
+```
diff --git a/docs/search-ui-react.generativedirectanswerprops.md b/docs/search-ui-react.generativedirectanswerprops.md
index 8b870c4b..6cb250c9 100644
--- a/docs/search-ui-react.generativedirectanswerprops.md
+++ b/docs/search-ui-react.generativedirectanswerprops.md
@@ -20,5 +20,7 @@ interface GenerativeDirectAnswerProps
 |  [CitationCard?](./search-ui-react.generativedirectanswerprops.citationcard.md) |  | (props: [CitationProps](./search-ui-react.citationprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citation card |
 |  [citationsHeader?](./search-ui-react.generativedirectanswerprops.citationsheader.md) |  | string \| JSX.Element | _(Optional)_ The header for the citations section of the generative direct answer. |
 |  [customCssClasses?](./search-ui-react.generativedirectanswerprops.customcssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
-|  [getCitationLink?](./search-ui-react.generativedirectanswerprops.getcitationlink.md) |  | (result: Result) =&gt; string \| undefined | _(Optional)_ A function which is called to get the page URL that clicking on a citation card routes to. |
+|  [getCitationLink?](./search-ui-react.generativedirectanswerprops.getcitationlink.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the page URL that clicking on a citation card routes to. |
+|  [getCitationSnippet?](./search-ui-react.generativedirectanswerprops.getcitationsnippet.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the snippet of citation card. |
+|  [getCitationTitle?](./search-ui-react.generativedirectanswerprops.getcitationtitle.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the title of citation card. |
 
diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md
index df45e59c..d530c496 100644
--- a/docs/search-ui-react.md
+++ b/docs/search-ui-react.md
@@ -20,7 +20,7 @@
 |  [Facets(props)](./search-ui-react.facets.md) | A component that displays all facets applicable to the current vertical search. |
 |  [FilterDivider({ className })](./search-ui-react.filterdivider.md) | A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters. |
 |  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
-|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
+|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
 |  [Geolocation\_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, })](./search-ui-react.geolocation_2.md) | A React Component which collects location information to create a location filter and perform a new search. |
 |  [getSearchIntents(searchActions)](./search-ui-react.getsearchintents.md) | Get search intents of the current query stored in headless using autocomplete request. |
 |  [getUserLocation(geolocationOptions)](./search-ui-react.getuserlocation.md) | Retrieves user's location using navigator.geolocation API. |
diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md
index 44f6876e..8b89054e 100644
--- a/etc/search-ui-react.api.md
+++ b/etc/search-ui-react.api.md
@@ -141,7 +141,11 @@ export interface CitationProps {
     // (undocumented)
     cssClasses: GenerativeDirectAnswerCssClasses;
     // (undocumented)
-    getCitationLink?: (searchResult: Result) => string | undefined;
+    getCitationLink?: (searchResult: Result) => unknown;
+    // (undocumented)
+    getCitationSnippet?: (searchResult: Result) => unknown;
+    // (undocumented)
+    getCitationTitle?: (searchResult: Result) => unknown;
     // (undocumented)
     searchResult: Result;
 }
@@ -323,7 +327,7 @@ export interface FilterSearchProps {
 export type FocusedItemData = Record<string, unknown>;
 
 // @public
-export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink }: GenerativeDirectAnswerProps): JSX.Element | null;
+export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet }: GenerativeDirectAnswerProps): JSX.Element | null;
 
 // @public
 export interface GenerativeDirectAnswerCssClasses {
@@ -351,7 +355,9 @@ export interface GenerativeDirectAnswerProps {
     CitationCard?: (props: CitationProps) => JSX.Element | null;
     citationsHeader?: string | JSX.Element;
     customCssClasses?: GenerativeDirectAnswerCssClasses;
-    getCitationLink?: (result: Result) => string | undefined;
+    getCitationLink?: (result: Result) => unknown;
+    getCitationSnippet?: (result: Result) => unknown;
+    getCitationTitle?: (result: Result) => unknown;
 }
 
 // @public
diff --git a/src/components/GenerativeDirectAnswer.tsx b/src/components/GenerativeDirectAnswer.tsx
index 3dceedbd..0fc990c1 100644
--- a/src/components/GenerativeDirectAnswer.tsx
+++ b/src/components/GenerativeDirectAnswer.tsx
@@ -52,7 +52,11 @@ export interface GenerativeDirectAnswerProps {
   /** The component for citation card */
   CitationCard?: (props: CitationProps) => JSX.Element | null,
   /** A function which is called to get the page URL that clicking on a citation card routes to. */
-  getCitationLink?: (result: Result) => string | undefined
+  getCitationLink?: (result: Result) => unknown,
+  /** A function which is called to get the title of citation card. */
+  getCitationTitle?: (result: Result) => unknown,
+  /** A function which is called to get the snippet of citation card. */
+  getCitationSnippet?: (result: Result) => unknown
 }
 
 /**
@@ -68,7 +72,9 @@ export function GenerativeDirectAnswer({
   answerHeader,
   citationsHeader,
   CitationCard,
-  getCitationLink
+  getCitationLink,
+  getCitationTitle,
+  getCitationSnippet
 }: GenerativeDirectAnswerProps): JSX.Element | null {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
@@ -110,6 +116,8 @@ export function GenerativeDirectAnswer({
         searchResults={searchResults} 
         CitationCard={CitationCard}
         getCitationLink={getCitationLink}
+        getCitationTitle={getCitationTitle}
+        getCitationSnippet={getCitationSnippet}
       />
     </div>
   );
@@ -144,7 +152,9 @@ interface CitationsProps {
   searchResults: Result[],
   citationsHeader?: string | JSX.Element,
   CitationCard?: (props: CitationProps) => JSX.Element | null,
-  getCitationLink?: (result: Result) => string | undefined
+  getCitationLink?: (result: Result) => unknown,
+  getCitationTitle?: (result: Result) => unknown,
+  getCitationSnippet?: (result: Result) => unknown
 }
 
 /**
@@ -157,7 +167,9 @@ function Citations(props: CitationsProps) {
     searchResults,
     citationsHeader = `Sources (${gdaResponse.citations.length})`,
     CitationCard = Citation,
-    getCitationLink
+    getCitationLink,
+    getCitationTitle,
+    getCitationSnippet
   } = props;
   if (!gdaResponse.citations.length) {
     return null;
@@ -173,6 +185,8 @@ function Citations(props: CitationsProps) {
             searchResult={result} 
             cssClasses={cssClasses}
             getCitationLink={getCitationLink}
+            getCitationTitle={getCitationTitle}
+            getCitationSnippet={getCitationSnippet}
           />
         )
       }
@@ -196,18 +210,24 @@ function Citations(props: CitationsProps) {
 export interface CitationProps {
   searchResult: Result,
   cssClasses: GenerativeDirectAnswerCssClasses,
-  getCitationLink?: (searchResult: Result) => string | undefined
+  getCitationLink?: (searchResult: Result) => unknown,
+  getCitationTitle?: (searchResult: Result) => unknown,
+  getCitationSnippet?: (searchResult: Result) => unknown
 }
 
 function Citation(props: CitationProps) {
   const {
     searchResult,
     cssClasses,
-    getCitationLink
+    getCitationLink,
+    getCitationTitle = (searchResult: Result) => searchResult.rawData.name,
+    getCitationSnippet = (searchResult: Result) => searchResult.rawData.description
   } = props;
-  const citationLink: string | undefined = getCitationLink?.(searchResult);
-  return <a className={cssClasses.citation} href={citationLink}>
-    <div className={cssClasses.citationTitle}>{searchResult.rawData.name}</div>
-    <div className={cssClasses.citationSnippet}>{searchResult.rawData.description}</div>
+  const citationLink: unknown = getCitationLink?.(searchResult);
+  const citationTitle: unknown = getCitationTitle?.(searchResult);
+  const citationSnippet: unknown = getCitationSnippet?.(searchResult);
+  return <a className={cssClasses.citation} href={typeof citationLink === 'string' ? citationLink : undefined}>
+    <div className={cssClasses.citationTitle}>{citationTitle}</div>
+    <div className={cssClasses.citationSnippet}>{citationSnippet}</div>
   </a>;
 }
diff --git a/test-site/src/pages/UniversalPage.tsx b/test-site/src/pages/UniversalPage.tsx
index f8bf3275..ae1d919d 100644
--- a/test-site/src/pages/UniversalPage.tsx
+++ b/test-site/src/pages/UniversalPage.tsx
@@ -89,8 +89,10 @@ export default function UniversalPage(): JSX.Element {
       <SpellCheck />
       <GenerativeDirectAnswer 
         answerHeader='A custom answer header' 
-        CitationCard={CustomCitationCard}
-        getCitationLink={searchResult => (typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined)}
+        getCitationLink={searchResult => searchResult.rawData.link}
+        getCitationTitle={searchResult => `${searchResult.rawData.id} - ${searchResult.rawData.name}`}
+        getCitationSnippet={searchResult => searchResult.rawData.s_snippet}
+        // CitationCard={CustomCitationCard}
       />
       <DirectAnswer />
       <ResultsCount />

From b847f795e53dde8fcf288a0ca4b8b77941ad4f2a Mon Sep 17 00:00:00 2001
From: Anh Thu Nguyen <anguyen@yext.com>
Date: Thu, 27 Jun 2024 11:27:51 -0400
Subject: [PATCH 3/4] removed the additional props

---
 ...-ui-react.citationprops.getcitationlink.md | 11 -----
 ...-react.citationprops.getcitationsnippet.md | 11 -----
 ...ui-react.citationprops.getcitationtitle.md | 11 -----
 docs/search-ui-react.citationprops.md         |  3 --
 .../search-ui-react.generativedirectanswer.md |  4 +-
 ...rativedirectanswerprops.getcitationlink.md | 13 ------
 ...ivedirectanswerprops.getcitationsnippet.md | 13 ------
 ...ativedirectanswerprops.getcitationtitle.md | 13 ------
 ...ch-ui-react.generativedirectanswerprops.md |  3 --
 docs/search-ui-react.md                       |  2 +-
 etc/search-ui-react.api.md                    | 11 +----
 src/components/GenerativeDirectAnswer.tsx     | 46 ++++---------------
 test-site/src/pages/UniversalPage.tsx         | 10 ++--
 13 files changed, 16 insertions(+), 135 deletions(-)
 delete mode 100644 docs/search-ui-react.citationprops.getcitationlink.md
 delete mode 100644 docs/search-ui-react.citationprops.getcitationsnippet.md
 delete mode 100644 docs/search-ui-react.citationprops.getcitationtitle.md
 delete mode 100644 docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
 delete mode 100644 docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md
 delete mode 100644 docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md

diff --git a/docs/search-ui-react.citationprops.getcitationlink.md b/docs/search-ui-react.citationprops.getcitationlink.md
deleted file mode 100644
index 3be8e2fa..00000000
--- a/docs/search-ui-react.citationprops.getcitationlink.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationLink](./search-ui-react.citationprops.getcitationlink.md)
-
-## CitationProps.getCitationLink property
-
-**Signature:**
-
-```typescript
-getCitationLink?: (searchResult: Result) => unknown;
-```
diff --git a/docs/search-ui-react.citationprops.getcitationsnippet.md b/docs/search-ui-react.citationprops.getcitationsnippet.md
deleted file mode 100644
index 6e063c1c..00000000
--- a/docs/search-ui-react.citationprops.getcitationsnippet.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationSnippet](./search-ui-react.citationprops.getcitationsnippet.md)
-
-## CitationProps.getCitationSnippet property
-
-**Signature:**
-
-```typescript
-getCitationSnippet?: (searchResult: Result) => unknown;
-```
diff --git a/docs/search-ui-react.citationprops.getcitationtitle.md b/docs/search-ui-react.citationprops.getcitationtitle.md
deleted file mode 100644
index 03f837a0..00000000
--- a/docs/search-ui-react.citationprops.getcitationtitle.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationTitle](./search-ui-react.citationprops.getcitationtitle.md)
-
-## CitationProps.getCitationTitle property
-
-**Signature:**
-
-```typescript
-getCitationTitle?: (searchResult: Result) => unknown;
-```
diff --git a/docs/search-ui-react.citationprops.md b/docs/search-ui-react.citationprops.md
index b28f5914..0ef56b4c 100644
--- a/docs/search-ui-react.citationprops.md
+++ b/docs/search-ui-react.citationprops.md
@@ -17,8 +17,5 @@ interface CitationProps
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [cssClasses](./search-ui-react.citationprops.cssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) |  |
-|  [getCitationLink?](./search-ui-react.citationprops.getcitationlink.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
-|  [getCitationSnippet?](./search-ui-react.citationprops.getcitationsnippet.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
-|  [getCitationTitle?](./search-ui-react.citationprops.getcitationtitle.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
 |  [searchResult](./search-ui-react.citationprops.searchresult.md) |  | Result |  |
 
diff --git a/docs/search-ui-react.generativedirectanswer.md b/docs/search-ui-react.generativedirectanswer.md
index aed04289..67acaba3 100644
--- a/docs/search-ui-react.generativedirectanswer.md
+++ b/docs/search-ui-react.generativedirectanswer.md
@@ -9,14 +9,14 @@ Displays the AI generated answer of a generative direct answer.
 **Signature:**
 
 ```typescript
-declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet }: GenerativeDirectAnswerProps): JSX.Element | null;
+declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
+|  { customCssClasses, answerHeader, citationsHeader, CitationCard, } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
 
 **Returns:**
 
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md b/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
deleted file mode 100644
index 12da26b0..00000000
--- a/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [getCitationLink](./search-ui-react.generativedirectanswerprops.getcitationlink.md)
-
-## GenerativeDirectAnswerProps.getCitationLink property
-
-A function which is called to get the page URL that clicking on a citation card routes to.
-
-**Signature:**
-
-```typescript
-getCitationLink?: (result: Result) => unknown;
-```
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md b/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md
deleted file mode 100644
index aa2eebe6..00000000
--- a/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [getCitationSnippet](./search-ui-react.generativedirectanswerprops.getcitationsnippet.md)
-
-## GenerativeDirectAnswerProps.getCitationSnippet property
-
-A function which is called to get the snippet of citation card.
-
-**Signature:**
-
-```typescript
-getCitationSnippet?: (result: Result) => unknown;
-```
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md b/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md
deleted file mode 100644
index cac056de..00000000
--- a/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [getCitationTitle](./search-ui-react.generativedirectanswerprops.getcitationtitle.md)
-
-## GenerativeDirectAnswerProps.getCitationTitle property
-
-A function which is called to get the title of citation card.
-
-**Signature:**
-
-```typescript
-getCitationTitle?: (result: Result) => unknown;
-```
diff --git a/docs/search-ui-react.generativedirectanswerprops.md b/docs/search-ui-react.generativedirectanswerprops.md
index 6cb250c9..1f1aeb09 100644
--- a/docs/search-ui-react.generativedirectanswerprops.md
+++ b/docs/search-ui-react.generativedirectanswerprops.md
@@ -20,7 +20,4 @@ interface GenerativeDirectAnswerProps
 |  [CitationCard?](./search-ui-react.generativedirectanswerprops.citationcard.md) |  | (props: [CitationProps](./search-ui-react.citationprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citation card |
 |  [citationsHeader?](./search-ui-react.generativedirectanswerprops.citationsheader.md) |  | string \| JSX.Element | _(Optional)_ The header for the citations section of the generative direct answer. |
 |  [customCssClasses?](./search-ui-react.generativedirectanswerprops.customcssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
-|  [getCitationLink?](./search-ui-react.generativedirectanswerprops.getcitationlink.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the page URL that clicking on a citation card routes to. |
-|  [getCitationSnippet?](./search-ui-react.generativedirectanswerprops.getcitationsnippet.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the snippet of citation card. |
-|  [getCitationTitle?](./search-ui-react.generativedirectanswerprops.getcitationtitle.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the title of citation card. |
 
diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md
index d530c496..1087d208 100644
--- a/docs/search-ui-react.md
+++ b/docs/search-ui-react.md
@@ -20,7 +20,7 @@
 |  [Facets(props)](./search-ui-react.facets.md) | A component that displays all facets applicable to the current vertical search. |
 |  [FilterDivider({ className })](./search-ui-react.filterdivider.md) | A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters. |
 |  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
-|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
+|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
 |  [Geolocation\_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, })](./search-ui-react.geolocation_2.md) | A React Component which collects location information to create a location filter and perform a new search. |
 |  [getSearchIntents(searchActions)](./search-ui-react.getsearchintents.md) | Get search intents of the current query stored in headless using autocomplete request. |
 |  [getUserLocation(geolocationOptions)](./search-ui-react.getuserlocation.md) | Retrieves user's location using navigator.geolocation API. |
diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md
index 8b89054e..b7082a42 100644
--- a/etc/search-ui-react.api.md
+++ b/etc/search-ui-react.api.md
@@ -141,12 +141,6 @@ export interface CitationProps {
     // (undocumented)
     cssClasses: GenerativeDirectAnswerCssClasses;
     // (undocumented)
-    getCitationLink?: (searchResult: Result) => unknown;
-    // (undocumented)
-    getCitationSnippet?: (searchResult: Result) => unknown;
-    // (undocumented)
-    getCitationTitle?: (searchResult: Result) => unknown;
-    // (undocumented)
     searchResult: Result;
 }
 
@@ -327,7 +321,7 @@ export interface FilterSearchProps {
 export type FocusedItemData = Record<string, unknown>;
 
 // @public
-export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet }: GenerativeDirectAnswerProps): JSX.Element | null;
+export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null;
 
 // @public
 export interface GenerativeDirectAnswerCssClasses {
@@ -355,9 +349,6 @@ export interface GenerativeDirectAnswerProps {
     CitationCard?: (props: CitationProps) => JSX.Element | null;
     citationsHeader?: string | JSX.Element;
     customCssClasses?: GenerativeDirectAnswerCssClasses;
-    getCitationLink?: (result: Result) => unknown;
-    getCitationSnippet?: (result: Result) => unknown;
-    getCitationTitle?: (result: Result) => unknown;
 }
 
 // @public
diff --git a/src/components/GenerativeDirectAnswer.tsx b/src/components/GenerativeDirectAnswer.tsx
index 0fc990c1..8d25d63d 100644
--- a/src/components/GenerativeDirectAnswer.tsx
+++ b/src/components/GenerativeDirectAnswer.tsx
@@ -51,12 +51,6 @@ export interface GenerativeDirectAnswerProps {
   citationsHeader?: string | JSX.Element,
   /** The component for citation card */
   CitationCard?: (props: CitationProps) => JSX.Element | null,
-  /** A function which is called to get the page URL that clicking on a citation card routes to. */
-  getCitationLink?: (result: Result) => unknown,
-  /** A function which is called to get the title of citation card. */
-  getCitationTitle?: (result: Result) => unknown,
-  /** A function which is called to get the snippet of citation card. */
-  getCitationSnippet?: (result: Result) => unknown
 }
 
 /**
@@ -72,9 +66,6 @@ export function GenerativeDirectAnswer({
   answerHeader,
   citationsHeader,
   CitationCard,
-  getCitationLink,
-  getCitationTitle,
-  getCitationSnippet
 }: GenerativeDirectAnswerProps): JSX.Element | null {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
@@ -115,9 +106,6 @@ export function GenerativeDirectAnswer({
         citationsHeader={citationsHeader} 
         searchResults={searchResults} 
         CitationCard={CitationCard}
-        getCitationLink={getCitationLink}
-        getCitationTitle={getCitationTitle}
-        getCitationSnippet={getCitationSnippet}
       />
     </div>
   );
@@ -151,10 +139,7 @@ interface CitationsProps {
   cssClasses: GenerativeDirectAnswerCssClasses,
   searchResults: Result[],
   citationsHeader?: string | JSX.Element,
-  CitationCard?: (props: CitationProps) => JSX.Element | null,
-  getCitationLink?: (result: Result) => unknown,
-  getCitationTitle?: (result: Result) => unknown,
-  getCitationSnippet?: (result: Result) => unknown
+  CitationCard?: (props: CitationProps) => JSX.Element | null
 }
 
 /**
@@ -166,10 +151,7 @@ function Citations(props: CitationsProps) {
     cssClasses,
     searchResults,
     citationsHeader = `Sources (${gdaResponse.citations.length})`,
-    CitationCard = Citation,
-    getCitationLink,
-    getCitationTitle,
-    getCitationSnippet
+    CitationCard = Citation
   } = props;
   if (!gdaResponse.citations.length) {
     return null;
@@ -184,9 +166,6 @@ function Citations(props: CitationsProps) {
             key={citation} 
             searchResult={result} 
             cssClasses={cssClasses}
-            getCitationLink={getCitationLink}
-            getCitationTitle={getCitationTitle}
-            getCitationSnippet={getCitationSnippet}
           />
         )
       }
@@ -209,25 +188,18 @@ function Citations(props: CitationsProps) {
  */
 export interface CitationProps {
   searchResult: Result,
-  cssClasses: GenerativeDirectAnswerCssClasses,
-  getCitationLink?: (searchResult: Result) => unknown,
-  getCitationTitle?: (searchResult: Result) => unknown,
-  getCitationSnippet?: (searchResult: Result) => unknown
+  cssClasses: GenerativeDirectAnswerCssClasses
 }
 
 function Citation(props: CitationProps) {
   const {
     searchResult,
     cssClasses,
-    getCitationLink,
-    getCitationTitle = (searchResult: Result) => searchResult.rawData.name,
-    getCitationSnippet = (searchResult: Result) => searchResult.rawData.description
   } = props;
-  const citationLink: unknown = getCitationLink?.(searchResult);
-  const citationTitle: unknown = getCitationTitle?.(searchResult);
-  const citationSnippet: unknown = getCitationSnippet?.(searchResult);
-  return <a className={cssClasses.citation} href={typeof citationLink === 'string' ? citationLink : undefined}>
-    <div className={cssClasses.citationTitle}>{citationTitle}</div>
-    <div className={cssClasses.citationSnippet}>{citationSnippet}</div>
-  </a>;
+  return (
+    <a className={cssClasses.citation} href={typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined}>
+      <div className={cssClasses.citationTitle}>{searchResult.rawData.name}</div>
+      <div className={cssClasses.citationSnippet}>{searchResult.rawData.description}</div>
+    </a>
+  );
 }
diff --git a/test-site/src/pages/UniversalPage.tsx b/test-site/src/pages/UniversalPage.tsx
index ae1d919d..b479f35f 100644
--- a/test-site/src/pages/UniversalPage.tsx
+++ b/test-site/src/pages/UniversalPage.tsx
@@ -64,12 +64,11 @@ function CustomCitationCard(props: CitationProps): JSX.Element | null {
   const {
     searchResult,
     cssClasses,
-    getCitationLink
   } = props;
-  const citationLink: string | undefined = getCitationLink?.(searchResult);
+  const citationLink = typeof searchResult.rawData.link  === 'string' ? searchResult.rawData.link : undefined;
   return <a className={cssClasses.citation} href={citationLink}>
     {typeof searchResult.rawData.id === 'string' && <div className={cssClasses.citationTitle}>{searchResult.rawData.id}</div>}
-    {typeof searchResult.rawData.type === 'string' && <div className={cssClasses.citationSnippet}>{searchResult.rawData.type}</div>}
+    {typeof searchResult.rawData.s_snippet === 'string' && <div className={cssClasses.citationSnippet}>{searchResult.rawData.s_snippet}</div>}
   </a>;
 }
 
@@ -89,10 +88,7 @@ export default function UniversalPage(): JSX.Element {
       <SpellCheck />
       <GenerativeDirectAnswer 
         answerHeader='A custom answer header' 
-        getCitationLink={searchResult => searchResult.rawData.link}
-        getCitationTitle={searchResult => `${searchResult.rawData.id} - ${searchResult.rawData.name}`}
-        getCitationSnippet={searchResult => searchResult.rawData.s_snippet}
-        // CitationCard={CustomCitationCard}
+        CitationCard={CustomCitationCard}
       />
       <DirectAnswer />
       <ResultsCount />

From 25d5fdaea04fd784700af0d07647f96b6b58de16 Mon Sep 17 00:00:00 2001
From: Anh Thu Nguyen <anguyen@yext.com>
Date: Thu, 27 Jun 2024 11:31:19 -0400
Subject: [PATCH 4/4] removed commas

---
 src/components/GenerativeDirectAnswer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/GenerativeDirectAnswer.tsx b/src/components/GenerativeDirectAnswer.tsx
index 8d25d63d..dbd4cee0 100644
--- a/src/components/GenerativeDirectAnswer.tsx
+++ b/src/components/GenerativeDirectAnswer.tsx
@@ -50,7 +50,7 @@ export interface GenerativeDirectAnswerProps {
   /** The header for the citations section of the generative direct answer. */
   citationsHeader?: string | JSX.Element,
   /** The component for citation card */
-  CitationCard?: (props: CitationProps) => JSX.Element | null,
+  CitationCard?: (props: CitationProps) => JSX.Element | null
 }
 
 /**
@@ -103,8 +103,8 @@ export function GenerativeDirectAnswer({
       <Citations 
         gdaResponse={gdaResponse} 
         cssClasses={cssClasses} 
-        citationsHeader={citationsHeader} 
         searchResults={searchResults} 
+        citationsHeader={citationsHeader} 
         CitationCard={CitationCard}
       />
     </div>
@@ -194,7 +194,7 @@ export interface CitationProps {
 function Citation(props: CitationProps) {
   const {
     searchResult,
-    cssClasses,
+    cssClasses
   } = props;
   return (
     <a className={cssClasses.citation} href={typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined}>