From a794ed5818f9df58a5ef1c318fdbf3ed95b18faa Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Fri, 26 Jul 2024 14:01:12 -0400 Subject: [PATCH] GDA: citations component override (#451) Changes: - Added `CitationsContainer` prop to `` to allow custom components to be passed in - Updated test cases and test-site with new component passed through J=CLIP-1369 TEST=manual|auto Ran `npm run build`, `npm run test`, and `npm run wcag` and did manual testing on test-site --- ...ch-ui-react.citationsprops.citationcard.md | 13 + ...ui-react.citationsprops.citationsheader.md | 13 + ...arch-ui-react.citationsprops.cssclasses.md | 13 + ...rch-ui-react.citationsprops.gdaresponse.md | 13 + docs/search-ui-react.citationsprops.md | 24 ++ ...h-ui-react.citationsprops.searchresults.md | 13 + .../search-ui-react.generativedirectanswer.md | 4 +- ...ivedirectanswerprops.citationscontainer.md | 13 + ...ch-ui-react.generativedirectanswerprops.md | 1 + docs/search-ui-react.md | 3 +- etc/search-ui-react.api.md | 12 +- package-lock.json | 307 +++++++++++++++--- package.json | 8 +- src/components/GenerativeDirectAnswer.tsx | 27 +- src/components/index.ts | 3 +- test-site/package-lock.json | 10 +- test-site/src/pages/UniversalPage.tsx | 20 +- .../GenerativeDirectAnswer.test.tsx | 20 +- 18 files changed, 446 insertions(+), 71 deletions(-) create mode 100644 docs/search-ui-react.citationsprops.citationcard.md create mode 100644 docs/search-ui-react.citationsprops.citationsheader.md create mode 100644 docs/search-ui-react.citationsprops.cssclasses.md create mode 100644 docs/search-ui-react.citationsprops.gdaresponse.md create mode 100644 docs/search-ui-react.citationsprops.md create mode 100644 docs/search-ui-react.citationsprops.searchresults.md create mode 100644 docs/search-ui-react.generativedirectanswerprops.citationscontainer.md diff --git a/docs/search-ui-react.citationsprops.citationcard.md b/docs/search-ui-react.citationsprops.citationcard.md new file mode 100644 index 00000000..2818ae99 --- /dev/null +++ b/docs/search-ui-react.citationsprops.citationcard.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationsProps](./search-ui-react.citationsprops.md) > [CitationCard](./search-ui-react.citationsprops.citationcard.md) + +## CitationsProps.CitationCard property + +The component for citation card + +**Signature:** + +```typescript +CitationCard?: (props: CitationProps) => JSX.Element | null; +``` diff --git a/docs/search-ui-react.citationsprops.citationsheader.md b/docs/search-ui-react.citationsprops.citationsheader.md new file mode 100644 index 00000000..a26ba9cf --- /dev/null +++ b/docs/search-ui-react.citationsprops.citationsheader.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationsProps](./search-ui-react.citationsprops.md) > [citationsHeader](./search-ui-react.citationsprops.citationsheader.md) + +## CitationsProps.citationsHeader property + +The header for the citations section generative direct answer. + +**Signature:** + +```typescript +citationsHeader?: string | JSX.Element; +``` diff --git a/docs/search-ui-react.citationsprops.cssclasses.md b/docs/search-ui-react.citationsprops.cssclasses.md new file mode 100644 index 00000000..8067d2ab --- /dev/null +++ b/docs/search-ui-react.citationsprops.cssclasses.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationsProps](./search-ui-react.citationsprops.md) > [cssClasses](./search-ui-react.citationsprops.cssclasses.md) + +## CitationsProps.cssClasses property + +CSS classes for customizing the component styling. + +**Signature:** + +```typescript +cssClasses: GenerativeDirectAnswerCssClasses; +``` diff --git a/docs/search-ui-react.citationsprops.gdaresponse.md b/docs/search-ui-react.citationsprops.gdaresponse.md new file mode 100644 index 00000000..66fa3fbd --- /dev/null +++ b/docs/search-ui-react.citationsprops.gdaresponse.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationsProps](./search-ui-react.citationsprops.md) > [gdaResponse](./search-ui-react.citationsprops.gdaresponse.md) + +## CitationsProps.gdaResponse property + +Response object containing generative direct answer info. + +**Signature:** + +```typescript +gdaResponse: GenerativeDirectAnswerResponse; +``` diff --git a/docs/search-ui-react.citationsprops.md b/docs/search-ui-react.citationsprops.md new file mode 100644 index 00000000..79060f8f --- /dev/null +++ b/docs/search-ui-react.citationsprops.md @@ -0,0 +1,24 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationsProps](./search-ui-react.citationsprops.md) + +## CitationsProps interface + +Props for citations component. + +**Signature:** + +```typescript +interface CitationsProps +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [CitationCard?](./search-ui-react.citationsprops.citationcard.md) | | (props: [CitationProps](./search-ui-react.citationprops.md)) => JSX.Element \| null | _(Optional)_ The component for citation card | +| [citationsHeader?](./search-ui-react.citationsprops.citationsheader.md) | | string \| JSX.Element | _(Optional)_ The header for the citations section generative direct answer. | +| [cssClasses](./search-ui-react.citationsprops.cssclasses.md) | | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) | CSS classes for customizing the component styling. | +| [gdaResponse](./search-ui-react.citationsprops.gdaresponse.md) | | GenerativeDirectAnswerResponse | Response object containing generative direct answer info. | +| [searchResults](./search-ui-react.citationsprops.searchresults.md) | | Result\[\] | Returned results relevant to the users' query to be used in Citations. | + diff --git a/docs/search-ui-react.citationsprops.searchresults.md b/docs/search-ui-react.citationsprops.searchresults.md new file mode 100644 index 00000000..b1e50bb2 --- /dev/null +++ b/docs/search-ui-react.citationsprops.searchresults.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [CitationsProps](./search-ui-react.citationsprops.md) > [searchResults](./search-ui-react.citationsprops.searchresults.md) + +## CitationsProps.searchResults property + +Returned results relevant to the users' query to be used in Citations. + +**Signature:** + +```typescript +searchResults: Result[]; +``` diff --git a/docs/search-ui-react.generativedirectanswer.md b/docs/search-ui-react.generativedirectanswer.md index 67acaba3..21d6f6f9 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, CitationsContainer, }: GenerativeDirectAnswerProps): JSX.Element | null; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| { customCssClasses, answerHeader, citationsHeader, CitationCard, } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) | | +| { customCssClasses, answerHeader, citationsHeader, CitationCard, CitationsContainer, } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) | | **Returns:** diff --git a/docs/search-ui-react.generativedirectanswerprops.citationscontainer.md b/docs/search-ui-react.generativedirectanswerprops.citationscontainer.md new file mode 100644 index 00000000..d86a9e1e --- /dev/null +++ b/docs/search-ui-react.generativedirectanswerprops.citationscontainer.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) > [CitationsContainer](./search-ui-react.generativedirectanswerprops.citationscontainer.md) + +## GenerativeDirectAnswerProps.CitationsContainer property + +The component for citations container + +**Signature:** + +```typescript +CitationsContainer?: (props: CitationsProps) => JSX.Element | null; +``` diff --git a/docs/search-ui-react.generativedirectanswerprops.md b/docs/search-ui-react.generativedirectanswerprops.md index 1f1aeb09..c2390c6f 100644 --- a/docs/search-ui-react.generativedirectanswerprops.md +++ b/docs/search-ui-react.generativedirectanswerprops.md @@ -18,6 +18,7 @@ interface GenerativeDirectAnswerProps | --- | --- | --- | --- | | [answerHeader?](./search-ui-react.generativedirectanswerprops.answerheader.md) | | string \| JSX.Element | _(Optional)_ The header for the answer section of the generative direct answer. | | [CitationCard?](./search-ui-react.generativedirectanswerprops.citationcard.md) | | (props: [CitationProps](./search-ui-react.citationprops.md)) => JSX.Element \| null | _(Optional)_ The component for citation card | +| [CitationsContainer?](./search-ui-react.generativedirectanswerprops.citationscontainer.md) | | (props: [CitationsProps](./search-ui-react.citationsprops.md)) => JSX.Element \| null | _(Optional)_ The component for citations container | | [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. | diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md index 1087d208..e2a1a4a2 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, CitationsContainer, })](./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. | @@ -64,6 +64,7 @@ | [AutocompleteResultCssClasses](./search-ui-react.autocompleteresultcssclasses.md) | The CSS class interface for the Autocomplete Result. | | [CardProps](./search-ui-react.cardprops.md) | The props provided to every [CardComponent](./search-ui-react.cardcomponent.md). | | [CitationProps](./search-ui-react.citationprops.md) | Props for citation card. | +| [CitationsProps](./search-ui-react.citationsprops.md) | Props for citations component. | | [Coordinate](./search-ui-react.coordinate.md) | Coordinate use to represent the result's location on a map. | | [CtaData](./search-ui-react.ctadata.md) | The shape of a StandardCard CTA field's data. | | [DirectAnswerCssClasses](./search-ui-react.directanswercssclasses.md) | The CSS class interface for [DirectAnswer()](./search-ui-react.directanswer.md). | diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index b7082a42..934c5972 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -144,6 +144,15 @@ export interface CitationProps { searchResult: Result; } +// @public +export interface CitationsProps { + CitationCard?: (props: CitationProps) => JSX.Element | null; + citationsHeader?: string | JSX.Element; + cssClasses: GenerativeDirectAnswerCssClasses; + gdaResponse: GenerativeDirectAnswerResponse; + searchResults: Result[]; +} + // @public export const ComponentsContentPath = "node_modules/@yext/search-ui-react/lib/**/*.{js,jsx}"; @@ -321,7 +330,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, CitationsContainer, }: GenerativeDirectAnswerProps): JSX.Element | null; // @public export interface GenerativeDirectAnswerCssClasses { @@ -347,6 +356,7 @@ export interface GenerativeDirectAnswerCssClasses { export interface GenerativeDirectAnswerProps { answerHeader?: string | JSX.Element; CitationCard?: (props: CitationProps) => JSX.Element | null; + CitationsContainer?: (props: CitationsProps) => JSX.Element | null; citationsHeader?: string | JSX.Element; customCssClasses?: GenerativeDirectAnswerCssClasses; } diff --git a/package-lock.json b/package-lock.json index 2f860355..ef032f61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@yext/search-ui-react", - "version": "1.7.0-beta.4", + "version": "1.7.0-beta.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@yext/search-ui-react", - "version": "1.7.0-beta.4", + "version": "1.7.0-beta.5", "license": "BSD-3-Clause", "dependencies": { "@restart/ui": "^1.0.1", @@ -9830,14 +9830,14 @@ } }, "node_modules/@swc/core": { - "version": "1.3.89", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.89.tgz", - "integrity": "sha512-+FchWateF57g50ChX6++QQDwgVd6iWZX5HA6m9LRIdJIB56bIqbwRQDwVL3Q8Rlbry4kmw+RxiOW2FjAx9mQOQ==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.0.tgz", + "integrity": "sha512-d4vMzH6ICllDwlPuhset2h8gu/USHdbyfJim+2hQEdxC0UONtfpmu38XBgNqRjStrji1Q5M10jfeUZL3cu1i8g==", "dev": true, "hasInstallScript": true, "dependencies": { - "@swc/counter": "^0.1.1", - "@swc/types": "^0.1.5" + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.9" }, "engines": { "node": ">=10" @@ -9847,19 +9847,19 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.3.89", - "@swc/core-darwin-x64": "1.3.89", - "@swc/core-linux-arm-gnueabihf": "1.3.89", - "@swc/core-linux-arm64-gnu": "1.3.89", - "@swc/core-linux-arm64-musl": "1.3.89", - "@swc/core-linux-x64-gnu": "1.3.89", - "@swc/core-linux-x64-musl": "1.3.89", - "@swc/core-win32-arm64-msvc": "1.3.89", - "@swc/core-win32-ia32-msvc": "1.3.89", - "@swc/core-win32-x64-msvc": "1.3.89" + "@swc/core-darwin-arm64": "1.7.0", + "@swc/core-darwin-x64": "1.7.0", + "@swc/core-linux-arm-gnueabihf": "1.7.0", + "@swc/core-linux-arm64-gnu": "1.7.0", + "@swc/core-linux-arm64-musl": "1.7.0", + "@swc/core-linux-x64-gnu": "1.7.0", + "@swc/core-linux-x64-musl": "1.7.0", + "@swc/core-win32-arm64-msvc": "1.7.0", + "@swc/core-win32-ia32-msvc": "1.7.0", + "@swc/core-win32-x64-msvc": "1.7.0" }, "peerDependencies": { - "@swc/helpers": "^0.5.0" + "@swc/helpers": "*" }, "peerDependenciesMeta": { "@swc/helpers": { @@ -9868,9 +9868,9 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.3.89", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.89.tgz", - "integrity": "sha512-LVCZQ2yGrX2678uMvW66IF1bzcOMqiABi+ioNDnJtAIsE/zRVMEYp1ivbOrH32FmPplBby6CGgJIOT3P4VaP1g==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.0.tgz", + "integrity": "sha512-2ylhM7f0HwUwLrFYZAe/dse8PCbPsYcJS3Dt7Q8NT3PUn7vy6QOMxNcOPPuDrnmaXqQQO3oxdmRapguTxaat9g==", "cpu": [ "arm64" ], @@ -9883,6 +9883,150 @@ "node": ">=10" } }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.0.tgz", + "integrity": "sha512-SgVnN4gT1Rb9YfTkp4FCUITqSs7Yj0uB2SUciu5CV3HuGvS5YXCUzh+KrwpLFtx8NIgivISKcNnb41mJi98X8Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.0.tgz", + "integrity": "sha512-+Z9Dayart1iKJQEJJ9N/KS4z5EdXJE3WPFikY0jonKTo4Dd8RuyVz5yLvqcIMeVdz/SwximATaL6iJXw7hZS9A==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.0.tgz", + "integrity": "sha512-UnLrCiZ1EI4shznJn0xP6DLgsXUSwtfsdgHhGYCrvbgVBBve3S9iFgVFEB3SPl7Q/TdowNbrN4zHU0oChfiNfw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.0.tgz", + "integrity": "sha512-H724UANA+ptsfwKRr9mnaDa9cb5fw0oFysiGKTgb3DMYcgk3Od0jMTnXVPFSVpo7FlmyxeC9K8ueUPBOoOK6XA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.0.tgz", + "integrity": "sha512-SY3HA0K0Dpqt1HIfMLGpwL4hd4UaL2xHP5oZXPlRQPhUDZrbb4PbI3ZJnh66c63eL4ZR8EJ+HRFI0Alx5p69Zw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.0.tgz", + "integrity": "sha512-cEJ2ebtV1v/5Ilb55E05J6F5SrHKQWzUttIhR5Mkayyo+yvPslcpByuFC3D+J7X1ebziTOBpWuMpUdjLfh3SMQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.0.tgz", + "integrity": "sha512-ecQOOmzEssz+m0pR4xDYCGuvn3E/l0nQ3tk5jp1NA1lsAy4bMV0YbYCHjptYvWL/UjhIerIp3IlCJ8x5DodSog==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.0.tgz", + "integrity": "sha512-gz81seZkRn3zMnVOc7L5k6F4vQC82gIxmHiL+GedK+A37XI/X26AASU3zxvORnqQbwQYXQ+AEVckxBmFlz3v2g==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.0.tgz", + "integrity": "sha512-b5Fd1xEOw9uqBpj2lqsaR4Iq9UhiL84hNDcEsi6DQA7Y1l85waQAslTbS0E4/pJ1PISAs0jW0zIGLco1eaWBOg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", @@ -9919,10 +10063,13 @@ } }, "node_modules/@swc/types": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz", - "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==", - "dev": true + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.9.tgz", + "integrity": "sha512-qKnCno++jzcJ4lM4NTfYifm1EFSCeIfKiAHAfkENZAV5Kl9PjJIyd2yeeVv6c/2CckuLyv2NmRC5pv6pm2WQBg==", + "dev": true, + "dependencies": { + "@swc/counter": "^0.1.3" + } }, "node_modules/@tailwindcss/forms": { "version": "0.5.7", @@ -34708,29 +34855,92 @@ } }, "@swc/core": { - "version": "1.3.89", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.89.tgz", - "integrity": "sha512-+FchWateF57g50ChX6++QQDwgVd6iWZX5HA6m9LRIdJIB56bIqbwRQDwVL3Q8Rlbry4kmw+RxiOW2FjAx9mQOQ==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.0.tgz", + "integrity": "sha512-d4vMzH6ICllDwlPuhset2h8gu/USHdbyfJim+2hQEdxC0UONtfpmu38XBgNqRjStrji1Q5M10jfeUZL3cu1i8g==", "dev": true, "requires": { - "@swc/core-darwin-arm64": "1.3.89", - "@swc/core-darwin-x64": "1.3.89", - "@swc/core-linux-arm-gnueabihf": "1.3.89", - "@swc/core-linux-arm64-gnu": "1.3.89", - "@swc/core-linux-arm64-musl": "1.3.89", - "@swc/core-linux-x64-gnu": "1.3.89", - "@swc/core-linux-x64-musl": "1.3.89", - "@swc/core-win32-arm64-msvc": "1.3.89", - "@swc/core-win32-ia32-msvc": "1.3.89", - "@swc/core-win32-x64-msvc": "1.3.89", - "@swc/counter": "^0.1.1", - "@swc/types": "^0.1.5" + "@swc/core-darwin-arm64": "1.7.0", + "@swc/core-darwin-x64": "1.7.0", + "@swc/core-linux-arm-gnueabihf": "1.7.0", + "@swc/core-linux-arm64-gnu": "1.7.0", + "@swc/core-linux-arm64-musl": "1.7.0", + "@swc/core-linux-x64-gnu": "1.7.0", + "@swc/core-linux-x64-musl": "1.7.0", + "@swc/core-win32-arm64-msvc": "1.7.0", + "@swc/core-win32-ia32-msvc": "1.7.0", + "@swc/core-win32-x64-msvc": "1.7.0", + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.9" } }, "@swc/core-darwin-arm64": { - "version": "1.3.89", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.89.tgz", - "integrity": "sha512-LVCZQ2yGrX2678uMvW66IF1bzcOMqiABi+ioNDnJtAIsE/zRVMEYp1ivbOrH32FmPplBby6CGgJIOT3P4VaP1g==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.0.tgz", + "integrity": "sha512-2ylhM7f0HwUwLrFYZAe/dse8PCbPsYcJS3Dt7Q8NT3PUn7vy6QOMxNcOPPuDrnmaXqQQO3oxdmRapguTxaat9g==", + "dev": true, + "optional": true + }, + "@swc/core-darwin-x64": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.0.tgz", + "integrity": "sha512-SgVnN4gT1Rb9YfTkp4FCUITqSs7Yj0uB2SUciu5CV3HuGvS5YXCUzh+KrwpLFtx8NIgivISKcNnb41mJi98X8Q==", + "dev": true, + "optional": true + }, + "@swc/core-linux-arm-gnueabihf": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.0.tgz", + "integrity": "sha512-+Z9Dayart1iKJQEJJ9N/KS4z5EdXJE3WPFikY0jonKTo4Dd8RuyVz5yLvqcIMeVdz/SwximATaL6iJXw7hZS9A==", + "dev": true, + "optional": true + }, + "@swc/core-linux-arm64-gnu": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.0.tgz", + "integrity": "sha512-UnLrCiZ1EI4shznJn0xP6DLgsXUSwtfsdgHhGYCrvbgVBBve3S9iFgVFEB3SPl7Q/TdowNbrN4zHU0oChfiNfw==", + "dev": true, + "optional": true + }, + "@swc/core-linux-arm64-musl": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.0.tgz", + "integrity": "sha512-H724UANA+ptsfwKRr9mnaDa9cb5fw0oFysiGKTgb3DMYcgk3Od0jMTnXVPFSVpo7FlmyxeC9K8ueUPBOoOK6XA==", + "dev": true, + "optional": true + }, + "@swc/core-linux-x64-gnu": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.0.tgz", + "integrity": "sha512-SY3HA0K0Dpqt1HIfMLGpwL4hd4UaL2xHP5oZXPlRQPhUDZrbb4PbI3ZJnh66c63eL4ZR8EJ+HRFI0Alx5p69Zw==", + "dev": true, + "optional": true + }, + "@swc/core-linux-x64-musl": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.0.tgz", + "integrity": "sha512-cEJ2ebtV1v/5Ilb55E05J6F5SrHKQWzUttIhR5Mkayyo+yvPslcpByuFC3D+J7X1ebziTOBpWuMpUdjLfh3SMQ==", + "dev": true, + "optional": true + }, + "@swc/core-win32-arm64-msvc": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.0.tgz", + "integrity": "sha512-ecQOOmzEssz+m0pR4xDYCGuvn3E/l0nQ3tk5jp1NA1lsAy4bMV0YbYCHjptYvWL/UjhIerIp3IlCJ8x5DodSog==", + "dev": true, + "optional": true + }, + "@swc/core-win32-ia32-msvc": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.0.tgz", + "integrity": "sha512-gz81seZkRn3zMnVOc7L5k6F4vQC82gIxmHiL+GedK+A37XI/X26AASU3zxvORnqQbwQYXQ+AEVckxBmFlz3v2g==", + "dev": true, + "optional": true + }, + "@swc/core-win32-x64-msvc": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.0.tgz", + "integrity": "sha512-b5Fd1xEOw9uqBpj2lqsaR4Iq9UhiL84hNDcEsi6DQA7Y1l85waQAslTbS0E4/pJ1PISAs0jW0zIGLco1eaWBOg==", "dev": true, "optional": true }, @@ -34766,10 +34976,13 @@ } }, "@swc/types": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz", - "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==", - "dev": true + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.9.tgz", + "integrity": "sha512-qKnCno++jzcJ4lM4NTfYifm1EFSCeIfKiAHAfkENZAV5Kl9PjJIyd2yeeVv6c/2CckuLyv2NmRC5pv6pm2WQBg==", + "dev": true, + "requires": { + "@swc/counter": "^0.1.3" + } }, "@tailwindcss/forms": { "version": "0.5.7", diff --git a/package.json b/package.json index 477e8a7b..2bf33276 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yext/search-ui-react", - "version": "1.7.0-beta.4", + "version": "1.7.0-beta.5", "description": "A library of React Components for powering Yext Search integrations", "author": "slapshot@yext.com", "license": "BSD-3-Clause", @@ -155,6 +155,7 @@ "dependencies": { "@restart/ui": "^1.0.1", "@tailwindcss/forms": "^0.5.0", + "@tailwindcss/line-clamp": "^0.4.4", "@yext/analytics": "^0.6.5", "classnames": "^2.3.1", "lodash": "^4.17.21", @@ -162,11 +163,10 @@ "mapbox-gl": "^2.9.2", "prop-types": "^15.8.1", "react-collapsed": "^4.1.2", + "react-markdown": "^6.0.3", "recent-searches": "^1.0.5", "tailwind-merge": "^1.3.0", - "use-isomorphic-layout-effect": "^1.1.2", - "react-markdown": "^6.0.3", - "@tailwindcss/line-clamp": "^0.4.4" + "use-isomorphic-layout-effect": "^1.1.2" }, "repository": { "type": "git", diff --git a/src/components/GenerativeDirectAnswer.tsx b/src/components/GenerativeDirectAnswer.tsx index dbd4cee0..17f668a1 100644 --- a/src/components/GenerativeDirectAnswer.tsx +++ b/src/components/GenerativeDirectAnswer.tsx @@ -51,6 +51,8 @@ export interface GenerativeDirectAnswerProps { citationsHeader?: string | JSX.Element, /** The component for citation card */ CitationCard?: (props: CitationProps) => JSX.Element | null + /** The component for citations container */ + CitationsContainer?: (props: CitationsProps) => JSX.Element | null } /** @@ -66,6 +68,7 @@ export function GenerativeDirectAnswer({ answerHeader, citationsHeader, CitationCard, + CitationsContainer = Citations, }: GenerativeDirectAnswerProps): JSX.Element | null { const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses); @@ -84,7 +87,7 @@ export function GenerativeDirectAnswer({ const searchActions = useSearchActions(); const gdaResponse = useSearchState(state => state.generativeDirectAnswer?.response); const isLoading = useSearchState(state => state.generativeDirectAnswer?.isLoading); - + React.useEffect(() => { if (!searchResults?.length) { return; @@ -100,11 +103,11 @@ export function GenerativeDirectAnswer({
-
@@ -134,11 +137,21 @@ function Answer(props: AnswerProps) { ; } -interface CitationsProps { +/** + * Props for citations component. + * + * @public + */ +export interface CitationsProps { + /** Response object containing generative direct answer info. */ gdaResponse: GenerativeDirectAnswerResponse, + /** CSS classes for customizing the component styling. */ cssClasses: GenerativeDirectAnswerCssClasses, + /** Returned results relevant to the users' query to be used in Citations. */ searchResults: Result[], + /** The header for the citations section generative direct answer. */ citationsHeader?: string | JSX.Element, + /** The component for citation card */ CitationCard?: (props: CitationProps) => JSX.Element | null } diff --git a/src/components/index.ts b/src/components/index.ts index 854f4f35..dae4e46e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -180,5 +180,6 @@ export { GenerativeDirectAnswer, GenerativeDirectAnswerCssClasses, GenerativeDirectAnswerProps, - CitationProps + CitationProps, + CitationsProps, } from './GenerativeDirectAnswer'; \ No newline at end of file diff --git a/test-site/package-lock.json b/test-site/package-lock.json index acb7b816..ae9c173c 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -33,10 +33,11 @@ }, "..": { "name": "@yext/search-ui-react", - "version": "1.7.0-beta", + "version": "1.7.0-beta.4", "license": "BSD-3-Clause", "dependencies": { "@restart/ui": "^1.0.1", + "@swc/core": "^1.7.0", "@tailwindcss/forms": "^0.5.0", "@tailwindcss/line-clamp": "^0.4.4", "@yext/analytics": "^0.6.5", @@ -81,7 +82,7 @@ "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.5.0-beta", + "@yext/search-headless-react": "^2.5.0-beta.3", "axe-core": "^4.8.2", "axe-playwright": "^1.2.3", "babel-jest": "^29.7.0", @@ -104,7 +105,7 @@ "util": "^0.12.5" }, "peerDependencies": { - "@yext/search-headless-react": "^2.4.0", + "@yext/search-headless-react": "^2.5.0-beta.3", "react": "^16.14 || ^17 || ^18", "react-dom": "^16.14 || ^17 || ^18" } @@ -21983,6 +21984,7 @@ "@storybook/react-webpack5": "^7.4.5", "@storybook/test-runner": "^0.15.2", "@storybook/testing-library": "^0.2.1", + "@swc/core": "^1.7.0", "@tailwindcss/forms": "^0.5.0", "@tailwindcss/line-clamp": "^0.4.4", "@testing-library/jest-dom": "^5.16.1", @@ -21997,7 +21999,7 @@ "@typescript-eslint/parser": "^5.16.0", "@yext/analytics": "^0.6.5", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.5.0-beta", + "@yext/search-headless-react": "^2.5.0-beta.3", "axe-core": "^4.8.2", "axe-playwright": "^1.2.3", "babel-jest": "^29.7.0", diff --git a/test-site/src/pages/UniversalPage.tsx b/test-site/src/pages/UniversalPage.tsx index b479f35f..c7efacdc 100644 --- a/test-site/src/pages/UniversalPage.tsx +++ b/test-site/src/pages/UniversalPage.tsx @@ -8,7 +8,8 @@ import { UniversalResults, VisualAutocompleteConfig, GenerativeDirectAnswer, - CitationProps + CitationProps, + CitationsProps, } from '@yext/search-ui-react'; import classNames from 'classnames'; import { useLayoutEffect } from 'react'; @@ -72,6 +73,12 @@ function CustomCitationCard(props: CitationProps): JSX.Element | null { ; } +function CustomCitationsComponent(props: CitationsProps): JSX.Element | null { + return ( + <>This is a custom component for citations + ) +} + export default function UniversalPage(): JSX.Element { const searchActions = useSearchActions(); useLayoutEffect(() => { @@ -87,14 +94,23 @@ export default function UniversalPage(): JSX.Element { /> + + {/* Example of passing in custom citations component to GDA */} + {/**/} + + {/* Test generic result type */} {/* = { } }; +const CustomCitationsComponent = (props: CitationsProps) => { + return ( + <> + CustomCitationsComponentTest + + ) +} + jest.mock('@yext/search-headless-react'); describe('GenerativeDirectAnswer', () => { @@ -37,7 +45,7 @@ describe('GenerativeDirectAnswer', () => { expect(screen.getByText(generativeDirectAnswerResponse.directAnswer)).toBeDefined(); function checkResultData(resultData: Record, isCitation: boolean) { - if (isCitation) { + if (isCitation) { expect(typeof resultData.name === 'string' && screen.getByText(resultData.name)).toBeTruthy(); expect(typeof resultData.description === 'string' && screen.getByText(resultData.description)).toBeTruthy(); } else { @@ -50,4 +58,12 @@ describe('GenerativeDirectAnswer', () => { checkResultData(verticals[0].results[1].rawData, true); checkResultData(verticals[1].results[0].rawData, true); }); + + it('Citations component overridden with dummy text', () => { + render(); + expect(screen.getByText(generativeDirectAnswerResponse.directAnswer)).toBeDefined(); + expect(screen.getByText("CustomCitationsComponentTest")).toBeTruthy(); + }); });