@coveo/atomic 3.48.0 → 3.49.0

package/dist/atomic/components/components/recommendations/atomic-recs-list/atomic-recs-list.js

@@ -0,0 +1,437 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var AtomicRecsList_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildRecommendationList, buildInteractiveResult as buildRecsInteractiveResult, loadConfigurationActions, } from '@coveo/headless/recommendation';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import { renderItemPlaceholders } from "../../common/atomic-result-placeholder/item-placeholders";
+import { renderCarousel } from "../../common/carousel";
+import { renderHeading } from "../../common/heading";
+import { createAppLoadedListener } from "../../common/interface/store";
+import { renderDisplayWrapper } from "../../common/item-list/display-wrapper";
+import { renderGridLayout } from "../../common/item-list/grid-layout";
+import { ItemListCommon, } from "../../common/item-list/item-list-common";
+import { ResultTemplateProvider } from "../../common/item-list/result-template-provider";
+import { getItemListDisplayClasses, } from "../../common/layout/item-layout-utils";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
+import { FocusTargetController } from "../../../utils/accessibility-utils";
+import { randomID } from "../../../utils/utils";
+import '../atomic-recs-result/atomic-recs-result';
+/**
+ * The `atomic-recs-list` component displays recommendations by applying one or more result templates.
+ *
+ * @slot default - The default slot where to insert the template element.
+ * @part result-list - The element containing the list of results.
+ * @part result-list-grid-clickable-container - The parent of the result and the clickable link encompassing it.
+ * @part result-list-grid-clickable - The clickable link encompassing the result.
+ * @part label - The label of the result list.
+ * @part previous-button - The previous button.
+ * @part next-button - The next button.
+ * @part indicators - The list of indicators.
+ * @part indicator - A single indicator.
+ * @part active-indicator - The active indicator.
+ */
+let AtomicRecsList = AtomicRecsList_1 = class AtomicRecsList extends ChildrenUpdateCompleteMixin(LitElement) {
+    constructor() {
+        super();
+        this.loadingFlag = randomID('firstRecommendationLoaded-');
+        this.isAppLoaded = false;
+        this.isEveryResultReady = false;
+        this.resultTemplateRegistered = false;
+        this.templateHasError = false;
+        this.currentPage = 0;
+        /**
+         * The Recommendation identifier used by the Coveo platform to retrieve recommended documents.
+         * Make sure to set a different value for each atomic-recs-list in your page.
+         */
+        this.recommendation = 'Recommendation';
+        /**
+         * The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself.
+         * To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
+         */
+        this.display = 'list';
+        /**
+         * The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
+         */
+        this.density = 'normal';
+        /**
+         * The expected size of the image displayed in the results.
+         */
+        this.imageSize = 'small';
+        /**
+         * The total number of recommendations to display.
+         * This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.
+         */
+        this.numberOfRecommendations = 10;
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading label, from 1 to 6.
+         */
+        this.headingLevel = 0;
+        new ValidatePropsController(this, () => ({
+            density: this.density,
+            display: this.display,
+            imageSize: this.imageSize,
+        }), AtomicRecsList_1.propsSchema, 
+        // TODO V4: KIT-5197 - Remove false
+        false);
+    }
+    /**
+     * Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
+     * You can use this function while working with web frameworks that don't use plain HTML syntax such as React, Angular, or Vue.
+     *
+     * Do not use this method if you integrate Atomic in a plain HTML deployment.
+     *
+     * @param resultRenderingFunction
+     */
+    async setRenderFunction(resultRenderingFunction) {
+        this.itemRenderingFunction = resultRenderingFunction;
+    }
+    /**
+     * Moves to the previous page, when the carousel is activated.
+     */
+    async previousPage() {
+        this.currentPage =
+            this.currentPage - 1 < 0 ? this.numberOfPages - 1 : this.currentPage - 1;
+    }
+    /**
+     * Moves to the next page, when the carousel is activated.
+     */
+    async nextPage() {
+        this.currentPage = (this.currentPage + 1) % this.numberOfPages;
+    }
+    initialize() {
+        this.validateNumberOfRecommendationsPerPage();
+        this.validateRecommendationIdentifier();
+        this.updateOriginLevel2();
+        this.recommendationList = buildRecommendationList(this.bindings.engine, {
+            options: {
+                id: this.recommendation,
+                numberOfRecommendations: this.numberOfRecommendations,
+            },
+        });
+        this.initResultTemplateProvider();
+        this.initItemListCommon();
+        createAppLoadedListener(this.bindings.store, (isAppLoaded) => {
+            this.isAppLoaded = isAppLoaded;
+        });
+    }
+    async willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('numberOfRecommendationsPerPage')) {
+            this.currentPage = 0;
+        }
+        if (changedProperties.has('recommendationListState')) {
+            const oldState = changedProperties.get('recommendationListState');
+            if (this.recommendationListState.searchResponseId !== '') {
+                this.bindings.store.unsetLoadingFlag(this.loadingFlag);
+            }
+            if (!oldState?.isLoading && this.recommendationListState.isLoading) {
+                this.isEveryResultReady = false;
+            }
+        }
+        await this.updateResultReadyState();
+    }
+    async updateResultReadyState() {
+        if (this.isAppLoaded &&
+            !this.isEveryResultReady &&
+            this.recommendationListState?.searchResponseId !== '' &&
+            this.recommendationListState?.recommendations?.length > 0) {
+            await this.getUpdateComplete();
+            this.isEveryResultReady = true;
+        }
+    }
+    render() {
+        if (!this.resultTemplateRegistered ||
+            this.templateHasError ||
+            this.error ||
+            this.recommendationListStateWithAugment.hasError) {
+            return nothing;
+        }
+        const listContent = this.renderListOfRecommendations();
+        return html `
+      ${this.renderHeading()}
+      ${when(this.shouldRenderPagination, () => renderCarousel({
+            props: {
+                bindings: this.bindings,
+                currentPage: this.currentPage,
+                nextPage: () => this.nextPage(),
+                previousPage: () => this.previousPage(),
+                numberOfPages: this.numberOfPages,
+                ariaLabel: this.label
+                    ? this.bindings.i18n.t(this.label)
+                    : this.bindings.i18n.t('recommendations'),
+            },
+        })(listContent), () => listContent)}
+    `;
+    }
+    get focusTarget() {
+        if (!this.nextNewResultTarget) {
+            this.nextNewResultTarget = new FocusTargetController(this, this.bindings);
+        }
+        return this.nextNewResultTarget;
+    }
+    get recommendationListStateWithAugment() {
+        return {
+            ...this.recommendationListState,
+            firstRequestExecuted: this.recommendationListState.searchResponseId !== '',
+            hasError: this.recommendationListState.error !== null,
+            hasItems: this.recommendationListState.recommendations.length !== 0,
+            results: this.subsetRecommendations,
+        };
+    }
+    get currentIndex() {
+        return Math.abs((this.currentPage * this.numberOfRecommendationsPerPage) %
+            this.recommendationListState.recommendations.length);
+    }
+    get subsetRecommendations() {
+        if (!this.numberOfRecommendationsPerPage) {
+            return this.recommendationListState.recommendations;
+        }
+        return this.recommendationListState.recommendations.slice(this.currentIndex, this.currentIndex + this.numberOfRecommendationsPerPage);
+    }
+    get numberOfPages() {
+        return Math.ceil(this.recommendationListState.recommendations.length /
+            this.numberOfRecommendationsPerPage);
+    }
+    get hasPagination() {
+        return this.numberOfPages > 1;
+    }
+    get shouldRenderPagination() {
+        return (this.hasPagination && this.recommendationListStateWithAugment.hasItems);
+    }
+    validateNumberOfRecommendationsPerPage() {
+        if (this.numberOfRecommendationsPerPage === undefined) {
+            return;
+        }
+        const msg = new NumberValue({
+            min: 1,
+            max: this.numberOfRecommendations - 1,
+        }).validate(this.numberOfRecommendationsPerPage);
+        if (msg) {
+            this.error = new Error(`The "numberOfRecommendationsPerPage" is invalid: ${msg}`);
+        }
+    }
+    validateRecommendationIdentifier() {
+        const recListWithRecommendation = document.querySelectorAll(`atomic-recs-list[recommendation="${this.recommendation}"]`);
+        if (recListWithRecommendation.length > 1) {
+            this.bindings.engine.logger.warn(`There are multiple atomic-recs-list in this page with the same recommendation property "${this.recommendation}". Make sure to set a different recommendation property for each.`);
+        }
+    }
+    updateOriginLevel2() {
+        if (this.label) {
+            const action = loadConfigurationActions(this.bindings.engine).setOriginLevel2({
+                originLevel2: this.label,
+            });
+            this.bindings.engine.dispatch(action);
+        }
+    }
+    initResultTemplateProvider() {
+        this.itemTemplateProvider = new ResultTemplateProvider({
+            includeDefaultTemplate: true,
+            templateElements: Array.from(this.querySelectorAll('atomic-recs-result-template')),
+            getResultTemplateRegistered: () => this.resultTemplateRegistered,
+            getTemplateHasError: () => this.templateHasError,
+            setResultTemplateRegistered: (value) => {
+                this.resultTemplateRegistered = value;
+            },
+            setTemplateHasError: (value) => {
+                this.templateHasError = value;
+            },
+            bindings: this.bindings,
+        });
+    }
+    initItemListCommon() {
+        this.itemListCommon = new ItemListCommon({
+            engineSubscribe: this.bindings.engine.subscribe,
+            getCurrentNumberOfItems: () => this.recommendationListState.recommendations.length,
+            getIsLoading: () => this.recommendationListState.isLoading,
+            host: this,
+            loadingFlag: this.loadingFlag,
+            nextNewItemTarget: this.focusTarget,
+            store: this.bindings.store,
+        });
+    }
+    computeListDisplayClasses() {
+        const displayPlaceholders = !(this.isAppLoaded && this.isEveryResultReady);
+        return getItemListDisplayClasses('grid', this.density, this.imageSize, this.recommendationListState?.isLoading, displayPlaceholders);
+    }
+    renderHeading() {
+        if (!this.label) {
+            return nothing;
+        }
+        if (this.recommendationListStateWithAugment.hasError) {
+            return nothing;
+        }
+        if (this.recommendationListStateWithAugment.firstRequestExecuted &&
+            !this.recommendationListStateWithAugment.hasItems) {
+            return nothing;
+        }
+        return renderHeading({
+            props: {
+                level: this.headingLevel,
+                part: 'label',
+                class: 'm-0 mb-2',
+            },
+        })(html `${this.bindings.i18n.t(this.label)}`);
+    }
+    renderListOfRecommendations() {
+        const listClasses = this.computeListDisplayClasses();
+        const resultClasses = `${listClasses} ${!this.isEveryResultReady && 'hidden'}`;
+        // Results must be rendered immediately (though hidden) to start their initialization and loading processes.
+        // If we wait to render results until placeholders are removed, the components won't begin loading until then,
+        // causing a longer delay. The `isEveryResultReady` flag hides results while preserving placeholders,
+        // then removes placeholders once results are fully loaded to prevent content flash.
+        return html `
+      ${when(this.isAppLoaded, () => renderDisplayWrapper({
+            props: {
+                listClasses: resultClasses,
+                display: 'grid',
+            },
+        })(html `${this.renderGrid()}`))}
+      ${when(!this.isEveryResultReady, () => renderDisplayWrapper({
+            props: { listClasses, display: 'grid' },
+        })(renderItemPlaceholders({
+            props: {
+                density: this.density,
+                display: this.display,
+                imageSize: this.imageSize,
+                numberOfPlaceholders: this.numberOfRecommendationsPerPage ??
+                    this.numberOfRecommendations,
+            },
+        })))}
+    `;
+    }
+    renderGrid() {
+        return html `${map(this.subsetRecommendations, (recommendation, index) => {
+            return renderGridLayout({
+                props: {
+                    item: {
+                        ...recommendation,
+                        title: recommendation.title ?? '',
+                    },
+                    selectorForItem: 'atomic-recs-result',
+                    setRef: (element) => {
+                        element instanceof HTMLElement &&
+                            this.itemListCommon.setNewResultRef(element, index);
+                    },
+                },
+            })(html `${keyed(this.getResultId(recommendation), html `<atomic-recs-result
+            .content=${this.getContent(recommendation)}
+            .density=${this.density}
+            .display=${this.display}
+            .imageSize=${this.imageSize}
+            .interactiveResult=${this.getInteractiveResult(recommendation)}
+            .linkContent=${this.getLinkContent(recommendation)}
+            .loadingFlag=${this.loadingFlag}
+            .result=${recommendation}
+            .renderingFunction=${this.itemRenderingFunction}
+            .store=${this.bindings.store}
+          ></atomic-recs-result>`)}`);
+        })}`;
+    }
+    getLinkContent(result) {
+        return this.itemTemplateProvider.getLinkTemplateContent(result);
+    }
+    getContent(result) {
+        return this.itemTemplateProvider.getTemplateContent(result);
+    }
+    getInteractiveResult(result) {
+        return buildRecsInteractiveResult(this.bindings.engine, {
+            options: { result },
+        });
+    }
+    getResultId(result) {
+        return this.itemListCommon.getResultId(result.uniqueId, this.recommendationListState.searchResponseId, this.density, this.imageSize);
+    }
+};
+AtomicRecsList.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties;.list-wrapper.placeholder{.result-component,table.list-root{display:none}}.list-wrapper:not(.placeholder){atomic-result-placeholder,atomic-result-table-placeholder{display:none}}.list-root.loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}:host{display:block;[part~=outline][part~=result-list-grid-clickable-container]{border:1px solid transparent;border-radius:1rem;padding:1rem;position:relative;transition:all .12s ease-out;&:hover{border-color:var(--atomic-neutral);border-style:var(--tw-border-style);border-width:1px;box-shadow:0 10px 25px var(--atomic-neutral);cursor:pointer}}[part=result-list-grid-clickable]:focus-visible{border-color:var(--atomic-primary);border-radius:2px;border-style:var(--tw-border-style);border-width:2px;color:var(--atomic-primary);cursor:pointer;display:inline-block;position:absolute;text-align:center;text-decoration:underline}[part=result-list-grid-clickable]:not(:focus){clip:rect(1px,1px,1px,1px);overflow:hidden;padding:0;position:absolute}.list-wrapper{word-break:break-word}.list-root.display-grid{display:grid;justify-content:space-evenly;.result-component{box-sizing:border-box;height:100%}}.list-root{grid-column-gap:.5rem;grid-row-gap:.5rem;grid-template-columns:repeat(var(--atomic-recs-number-of-columns,1),minmax(0,1fr));[part~=outline]{border-color:var(--atomic-neutral);border-radius:1rem;border-style:var(--tw-border-style);border-width:1px;padding:1rem}atomic-result-placeholder{border-color:transparent}}[part=label]{font-family:var(--atomic-font-family);font-size:var(--atomic-text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height,1.33333));--tw-font-weight:var(--atomic-font-bold);font-weight:var(--atomic-font-bold)}atomic-result:not(.hydrated){visibility:hidden}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial}}}`;
+AtomicRecsList.propsSchema = new Schema({
+    density: new StringValue({
+        constrainTo: ['normal', 'comfortable', 'compact'],
+    }),
+    display: new StringValue({ constrainTo: ['grid', 'list'] }),
+    imageSize: new StringValue({
+        constrainTo: ['small', 'large', 'icon', 'none'],
+    }),
+});
+__decorate([
+    state()
+], AtomicRecsList.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "isAppLoaded", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "isEveryResultReady", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "resultTemplateRegistered", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "templateHasError", void 0);
+__decorate([
+    state()
+], AtomicRecsList.prototype, "currentPage", void 0);
+__decorate([
+    bindStateToController('recommendationList'),
+    state()
+], AtomicRecsList.prototype, "recommendationListState", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "recommendation", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "display", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "density", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'image-size', type: String })
+], AtomicRecsList.prototype, "imageSize", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-recommendations',
+        type: Number,
+    })
+], AtomicRecsList.prototype, "numberOfRecommendations", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'number-of-recommendations-per-page',
+        type: Number,
+    })
+], AtomicRecsList.prototype, "numberOfRecommendationsPerPage", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], AtomicRecsList.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'heading-level', type: Number })
+], AtomicRecsList.prototype, "headingLevel", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicRecsList.prototype, "render", null);
+AtomicRecsList = AtomicRecsList_1 = __decorate([
+    customElement('atomic-recs-list'),
+    bindings(),
+    withTailwindStyles
+], AtomicRecsList);
+export { AtomicRecsList };

package/dist/atomic/components/components/recommendations/index.js

@@ -1,5 +1,6 @@
 // Auto-generated file
 export { AtomicRecsError } from './atomic-recs-error/atomic-recs-error.js';
 export { AtomicRecsInterface } from './atomic-recs-interface/atomic-recs-interface.js';
+export { AtomicRecsList } from './atomic-recs-list/atomic-recs-list.js';
 export { AtomicRecsResult } from './atomic-recs-result/atomic-recs-result.js';
 export { AtomicRecsResultTemplate } from './atomic-recs-result-template/atomic-recs-result-template.js';

package/dist/atomic/components/components/recommendations/lazy-index.js

@@ -2,6 +2,7 @@
 export default {
     'atomic-recs-error': async () => await import('./atomic-recs-error/atomic-recs-error.js'),
     'atomic-recs-interface': async () => await import('./atomic-recs-interface/atomic-recs-interface.js'),
+    'atomic-recs-list': async () => await import('./atomic-recs-list/atomic-recs-list.js'),
     'atomic-recs-result': async () => await import('./atomic-recs-result/atomic-recs-result.js'),
     'atomic-recs-result-template': async () => await import('./atomic-recs-result-template/atomic-recs-result-template.js'),
 };

package/dist/atomic/components/components/search/atomic-generated-answer/atomic-generated-answer.js

@@ -156,6 +156,9 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
             ...(this.answerConfigurationId && {
                 answerConfigurationId: this.answerConfigurationId,
             }),
+            ...(this.agentId && {
+                agentId: this.agentId,
+            }),
             fieldsToIncludeInCitations: this.getCitationFields(),
         });
         this.searchStatus = buildSearchStatus(this.bindings.engine);
@@ -435,6 +438,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'answer-configuration-id' })
 ], AtomicGeneratedAnswer.prototype, "answerConfigurationId", void 0);
+__decorate([
+    property({ type: String, attribute: 'agent-id' })
+], AtomicGeneratedAnswer.prototype, "agentId", void 0);
 __decorate([
     property({
         type: String,