From 34f207c1b48ec433bbeaef50031890b5f48bf673 Mon Sep 17 00:00:00 2001 From: anguyen-yext2 <143001514+anguyen-yext2@users.noreply.github.com> Date: Thu, 27 Jun 2024 16:55:42 -0400 Subject: [PATCH] support clickable citation card with link (#444) J=CLIP-1332 TEST=auto,manual ran `npm run test` and test manually on test-site --- docs/search-ui-react.citationprops.md | 3 +- ...ch-ui-react.citationprops.searchresult.md} | 6 +- ...ch-ui-react.citationprops.searchresults.md | 11 ---- .../search-ui-react.generativedirectanswer.md | 4 +- docs/search-ui-react.md | 2 +- etc/search-ui-react.api.md | 6 +- package-lock.json | 4 +- package.json | 2 +- src/components/GenerativeDirectAnswer.tsx | 55 ++++++++++++------- test-site/src/pages/UniversalPage.tsx | 25 ++++----- 10 files changed, 58 insertions(+), 60 deletions(-) rename docs/{search-ui-react.citationprops.citation.md => search-ui-react.citationprops.searchresult.md} (63%) delete mode 100644 docs/search-ui-react.citationprops.searchresults.md diff --git a/docs/search-ui-react.citationprops.md b/docs/search-ui-react.citationprops.md index fd7d8f1f..0ef56b4c 100644 --- a/docs/search-ui-react.citationprops.md +++ b/docs/search-ui-react.citationprops.md @@ -16,7 +16,6 @@ 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\[\] | | +| [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 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationProps](./search-ui-react.citationprops.md) > [citation](./search-ui-react.citationprops.citation.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationProps](./search-ui-react.citationprops.md) > [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.citationprops.searchresults.md b/docs/search-ui-react.citationprops.searchresults.md deleted file mode 100644 index 1f7bf0d6..00000000 --- a/docs/search-ui-react.citationprops.searchresults.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationProps](./search-ui-react.citationprops.md) > [searchResults](./search-ui-react.citationprops.searchresults.md) - -## CitationProps.searchResults property - -**Signature:** - -```typescript -searchResults: Result[]; -``` diff --git a/docs/search-ui-react.generativedirectanswer.md b/docs/search-ui-react.generativedirectanswer.md index d3baea94..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 }: GenerativeDirectAnswerProps): JSX.Element | null; +declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| { customCssClasses, answerHeader, citationsHeader, CitationCard } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) | | +| { customCssClasses, answerHeader, citationsHeader, CitationCard, } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) | | **Returns:** diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md index 6c99f746..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 })](./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 3b160df3..b7082a42 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -138,12 +138,10 @@ export interface CardProps { // @public export interface CitationProps { - // (undocumented) - citation: string; // (undocumented) cssClasses: GenerativeDirectAnswerCssClasses; // (undocumented) - searchResults: Result[]; + searchResult: Result; } // @public @@ -323,7 +321,7 @@ export interface FilterSearchProps { export type FocusedItemData = Record; // @public -export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard }: GenerativeDirectAnswerProps): JSX.Element | null; +export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null; // @public export interface GenerativeDirectAnswerCssClasses { 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..dbd4cee0 100644 --- a/src/components/GenerativeDirectAnswer.tsx +++ b/src/components/GenerativeDirectAnswer.tsx @@ -32,7 +32,7 @@ const builtInCssClasses: Readonly = { 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' }; @@ -65,7 +65,7 @@ export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, - CitationCard + CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null { const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses); @@ -100,7 +100,13 @@ export function GenerativeDirectAnswer({
- +
); } @@ -131,8 +137,8 @@ function Answer(props: AnswerProps) { interface CitationsProps { gdaResponse: GenerativeDirectAnswerResponse, cssClasses: GenerativeDirectAnswerCssClasses, - citationsHeader?: string | JSX.Element, searchResults: Result[], + citationsHeader?: string | JSX.Element, CitationCard?: (props: CitationProps) => JSX.Element | null } @@ -143,20 +149,34 @@ function Citations(props: CitationsProps) { const { gdaResponse, cssClasses, - citationsHeader = `Sources (${gdaResponse.citations.length})`, searchResults, + citationsHeader = `Sources (${gdaResponse.citations.length})`, CitationCard = Citation } = 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( + + ) + } + }); + return <>
{citationsHeader}
- {gdaResponse.citations.map( - citation => )} + {citationCards}
; } @@ -167,24 +187,19 @@ function Citations(props: CitationsProps) { * @public */ export interface CitationProps { - searchResults: Result[], - citation: string, + searchResult: Result, cssClasses: GenerativeDirectAnswerCssClasses } function Citation(props: CitationProps) { const { - searchResults, - citation, + searchResult, cssClasses } = props; - const rawResult: Result | undefined = searchResults.find(r => r.rawData.uid === citation); - if (!rawResult) { - return null; - } - - return
-
{rawResult.rawData.name}
-
{rawResult.rawData.description}
-
; + return ( + +
{searchResult.rawData.name}
+
{searchResult.rawData.description}
+ + ); } diff --git a/test-site/src/pages/UniversalPage.tsx b/test-site/src/pages/UniversalPage.tsx index 179e3063..b479f35f 100644 --- a/test-site/src/pages/UniversalPage.tsx +++ b/test-site/src/pages/UniversalPage.tsx @@ -62,20 +62,14 @@ const customSearchBarCss = { function CustomCitationCard(props: CitationProps): JSX.Element | null { const { - searchResults, - citation, - cssClasses + searchResult, + cssClasses, } = props; - const rawResult: Result | undefined = searchResults.find((r: Result) => r.rawData.uid === citation); - - if (!rawResult) { - return null; - } - - return
- {typeof rawResult.rawData.id === 'string' &&
{rawResult.rawData.id}
} - {typeof rawResult.rawData.type === 'string' &&
{rawResult.rawData.type}
} -
; + const citationLink = typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined; + return + {typeof searchResult.rawData.id === 'string' &&
{searchResult.rawData.id}
} + {typeof searchResult.rawData.s_snippet === 'string' &&
{searchResult.rawData.s_snippet}
} + ; } export default function UniversalPage(): JSX.Element { @@ -92,7 +86,10 @@ export default function UniversalPage(): JSX.Element { customCssClasses={customSearchBarCss} /> - +