@coveo/atomic 3.33.0 → 3.33.1-pre.06f3294396

package/dist/atomic/components/components/common/facets/numeric-facet-common.tw.css.js

@@ -1,3 +1,9 @@
-const css = `/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.value-checkbox{width:var(--atomic-facet-checkbox-size,1rem);height:var(--atomic-facet-checkbox-size,1rem);left:calc(var(--spacing,.25rem)*2);z-index:1;position:absolute}.value-checkbox+label{cursor:pointer;text-overflow:ellipsis;white-space:nowrap;width:100%;padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*2);padding-left:calc(var(--spacing,.25rem)*8);color:var(--atomic-on-background);flex-direction:row;display:flex;overflow:hidden;&:hover{@media (hover:hover){&{background-color:var(--atomic-neutral-light)}}}}.value-checkbox.selected:focus-visible+label .value-label,.value-checkbox.selected:hover+label .value-label{color:var(--atomic-primary)}.value-checkbox.excluded:focus-visible+label .value-label,.value-checkbox.excluded:hover+label .value-label{color:var(--atomic-error)}.value-exclude-button:focus-visible atomic-icon{visibility:visible}.value-count{margin-left:calc(var(--spacing,.25rem)*1.5);color:var(--atomic-neutral-dark);[part=value-exclude-button]+&{margin-right:calc(var(--spacing,.25rem)*2)}}:host(.popover-nested){min-width:var(--container-2xs,18rem);&::part(label-button){display:none}&::part(facet){--tw-shadow:0px 2px 8px var(--tw-shadow-color,#e5e8e8bf);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&::part(values){margin-top:calc(var(--spacing,.25rem)*0);max-height:calc(var(--spacing,.25rem)*96);overflow-y:auto}&::part(search-wrapper){margin-bottom:calc(var(--spacing,.25rem)*2)}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`;
-export default css;
+import facetCommonStyles from './facet-common.tw.css';
+import facetValueCheckboxStyles from './facet-value-checkbox/facet-value-checkbox.tw.css';
+import facetValueExcludeStyles from './facet-value-exclude/facet-value-exclude.tw.css';
+const styles = [
+    facetValueCheckboxStyles,
+    facetValueExcludeStyles,
+    facetCommonStyles,
+];
+export default styles;

package/dist/atomic/components/components/search/atomic-results-per-page/atomic-results-per-page.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { buildResultsPerPage, buildSearchStatus, } from '@coveo/headless';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
 import { renderFieldsetGroup } from "../../common/fieldset-group.js";
 import { createAppLoadedListener } from "../../common/interface/store.js";
 import { renderChoices } from "../../common/items-per-page/choices.js";
 import { ChoiceIsNaNError, InitialChoiceNotInChoicesError, } from "../../common/items-per-page/error.js";
 import { renderLabel } from "../../common/items-per-page/label.js";
 import { convertChoicesToNumbers, validateInitialChoice, } from "../../common/items-per-page/validate.js";
-import { renderPagerGuard } from "../../common/pager/pager-guard.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
 import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
@@ -74,16 +74,12 @@ let AtomicResultsPerPage = class AtomicResultsPerPage extends InitializeBindings
             return html ``;
         }
         return html `
-      ${renderPagerGuard({
-            props: {
-                hasError: this.searchStatusState.hasError,
-                hasItems: this.searchStatusState.hasResults,
-                isAppLoaded: this.isAppLoaded,
-            },
-        })(html `
-        <div class="flex items-center" role="toolbar" aria-label=${this.label}>
-          ${renderLabel()(html `${this.label}`)}
-          ${renderFieldsetGroup({
+      ${when(!this.searchStatusState.hasError &&
+            this.isAppLoaded &&
+            this.searchStatusState.hasResults, () => html `
+          <div class="flex items-center" role="toolbar" aria-label=${this.label}>
+            ${renderLabel()(html `${this.label}`)}
+            ${renderFieldsetGroup({
             props: {
                 label: this.label,
             },
@@ -100,8 +96,8 @@ let AtomicResultsPerPage = class AtomicResultsPerPage extends InitializeBindings
                 focusOnNextNewResult: () => this.bindings.store.state.resultList?.focusOnNextNewResult(),
             },
         }))}
-        </div>
-      `)}
+          </div>
+        `)}
     `;
     }
 };

package/dist/atomic/components/createPopper.js

@@ -1390,6 +1390,6 @@ function popperGenerator(generatorOptions) {
   };
 }
 
-export { getLayoutRect as a, basePlacements as b, getOffsetParent as c, contains as d, expandToHashMap as e, getMainAxisFromPlacement as f, getBasePlacement as g, bottom as h, getVariation as i, detectOverflow as j, auto as k, left as l, mergePaddingObject as m, popperGenerator as n, eventListeners as o, placements as p, popperOffsets$1 as q, right as r, start as s, top as t, computeStyles$1 as u, variationPlacements as v, within as w, applyStyles$1 as x, preventOverflow$1 as y };
+export { getLayoutRect as a, basePlacements as b, getOffsetParent as c, contains as d, expandToHashMap as e, getMainAxisFromPlacement as f, getBasePlacement as g, bottom as h, getVariation as i, detectOverflow as j, placements as k, left as l, mergePaddingObject as m, auto as n, popperGenerator as o, preventOverflow$1 as p, eventListeners as q, right as r, start as s, top as t, popperOffsets$1 as u, variationPlacements as v, within as w, computeStyles$1 as x, applyStyles$1 as y };
 
 //# sourceMappingURL=createPopper.js.map

package/dist/atomic/components/decorators/with-tailwind-styles.js

@@ -1,7 +1,6 @@
 import { unsafeCSS } from 'lit';
 import theme from "../utils/coveo.tw.css";
 import styles from "../utils/tailwind.global.tw.css";
-import utilities from "../utils/tailwind-utilities/utilities.tw.css";
 const tailwindPropertiesSheet = typeof window !== 'undefined'
     ? (() => {
         const propCss = styles;
@@ -43,7 +42,6 @@ export const withTailwindStyles = (Base) => {
             const baseStyles = [
                 unsafeCSS(theme),
                 unsafeCSS(styles),
-                unsafeCSS(utilities),
             ];
             const customStyles = Base.styles;
             if (Array.isArray(customStyles)) {

package/dist/atomic/components/{generated-answer-common.js → generated-answer-renderer.js}

@@ -1,6 +1,5 @@
+import { S as StorageItems, a as SafeStorage } from './local-storage-utils.js';
 import { h } from '@stencil/core/internal/client';
-import { a as SafeStorage, S as StorageItems } from './local-storage-utils.js';
-import { a as getNamedSlotFromHost } from './slot-utils.js';
 import { H as Heading } from './stencil-heading.js';
 import { B as Button } from './stencil-button.js';
 import { D as DOMPurify } from './purify.js';
@@ -8,6 +7,62 @@ import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { A as ArrowBottomIcon } from './arrow-bottom-rounded.js';
 import { A as ArrowUp } from './arrow-top-rounded.js';
 
+const readGeneratedAnswerStoredData = (withToggle) => {
+    const storage = new SafeStorage();
+    const storedData = storage.getParsedJSON(StorageItems.GENERATED_ANSWER_DATA, { isVisible: true });
+    // This check ensures that the answer is visible when the toggle is hidden and visible is set to false in the local storage.
+    return { isVisible: (withToggle && storedData.isVisible) || !withToggle };
+};
+const writeGeneratedAnswerStoredData = (data) => {
+    const storage = new SafeStorage();
+    storage.setJSON(StorageItems.GENERATED_ANSWER_DATA, data);
+};
+const insertGeneratedAnswerFeedbackModal = (host, generatedAnswer) => {
+    const modalRef = document.createElement('atomic-generated-answer-feedback-modal');
+    modalRef.generatedAnswer = generatedAnswer();
+    host.insertAdjacentElement('beforebegin', modalRef);
+    return modalRef;
+};
+const getGeneratedAnswerStatus = (generatedAnswerState, i18n) => {
+    if (!generatedAnswerState || !i18n) {
+        return '';
+    }
+    const isHidden = !generatedAnswerState.isVisible;
+    const isGenerating = !!generatedAnswerState.isStreaming;
+    const hasAnswer = !!generatedAnswerState.answer;
+    const hasError = !!generatedAnswerState.error;
+    if (isHidden) {
+        return i18n.t('generated-answer-hidden');
+    }
+    if (isGenerating) {
+        return i18n.t('generating-answer');
+    }
+    if (hasError) {
+        return i18n.t('answer-could-not-be-generated');
+    }
+    if (hasAnswer) {
+        return i18n.t('answer-generated', {
+            answer: generatedAnswerState.answer,
+        });
+    }
+    return '';
+};
+const copyToClipboard = async ({ answer, setCopied, setCopyError, onLogCopyToClipboard, logger, }) => {
+    try {
+        await navigator.clipboard.writeText(answer);
+        setCopied(true);
+        onLogCopyToClipboard();
+    }
+    catch (error) {
+        setCopyError(true);
+        logger?.error(`Failed to copy to clipboard: ${error}`);
+    }
+    setTimeout(() => {
+        setCopied(false);
+        setCopyError(false);
+    }, 2000);
+};
+
 const Switch = (props) => {
     const attributes = {
         onClick: () => props.onToggle?.(!props.checked),
@@ -2670,258 +2725,115 @@ const SourceCitations = (props, children) => props.isVisible ? (h("div", { class
     h("p", { part: "citations-label", class: "text-neutral-dark mb-2 shrink-0" }, props.label),
     h("ol", { class: "citations-container flex list-none flex-wrap items-center gap-2" }, children))) : null;
 
-class GeneratedAnswerCommon {
-    constructor(props) {
-        this.props = props;
-        this.storage = new SafeStorage();
-        this._data = this.readStoredData();
-    }
-    insertFeedbackModal() {
-        this.modalRef = document.createElement('atomic-generated-answer-feedback-modal');
-        this.modalRef.generatedAnswer = this.props.getGeneratedAnswer();
-        this.props.host.insertAdjacentElement('beforebegin', this.modalRef);
-    }
-    readStoredData() {
-        const { withToggle } = this.props;
-        const storedData = this.storage.getParsedJSON(StorageItems.GENERATED_ANSWER_DATA, { isVisible: true });
-        // This check ensures that the answer is visible when the toggle is hidden and visible is set to false in the local storage.
-        return { isVisible: (withToggle && storedData.isVisible) || !withToggle };
-    }
-    writeStoredData(data) {
-        this.storage.setJSON(StorageItems.GENERATED_ANSWER_DATA, data);
-    }
-    get data() {
-        return this._data;
+const GeneratedAnswerRenderer = ({ onShowButtonClick, onClickDislike, onClickLike, onCopyToClipboard, collapsible, disableCitationAnchoring, copied, i18n, copyError, generatedAnswer, generatedAnswerState, withToggle, isAnswerVisible, hasRetryableError, hasClipboard, hasNoAnswerGenerated, hasCustomNoAnswerMessage, buildInteractiveCitationForCitation }) => {
+    if (hasNoAnswerGenerated) {
+        return generatedAnswerState?.cannotAnswer && hasCustomNoAnswerMessage ? (h(GeneratedAnswerWrapper, null,
+            h(GeneratedAnswerNoAnswerMessage, { i18n: i18n },
+                h("slot", { name: "no-answer-message" })))) : null;
     }
-    set data(newData) {
-        this._data = newData;
-    }
-    getGeneratedAnswerStatus() {
-        const isHidden = !this.props.getGeneratedAnswerState()?.isVisible;
-        const isGenerating = !!this.props.getGeneratedAnswerState()?.isStreaming;
-        const hasAnswer = !!this.props.getGeneratedAnswerState()?.answer;
-        const hasError = !!this.props.getGeneratedAnswerState()?.error;
-        if (isHidden) {
-            return this.props.getBindings().i18n.t('generated-answer-hidden');
-        }
-        if (isGenerating) {
-            return this.props.getBindings().i18n.t('generating-answer');
-        }
-        if (hasError) {
-            return this.props.getBindings().i18n.t('answer-could-not-be-generated');
-        }
-        if (hasAnswer) {
-            return this.props.getBindings().i18n.t('answer-generated', {
-                answer: this.props.getGeneratedAnswerState()?.answer,
-            });
-        }
-        return '';
-    }
-    get hasRetryableError() {
-        return (!this.props.getSearchStatusState()?.hasError &&
-            this.props.getGeneratedAnswerState()?.error?.isRetryable);
-    }
-    get hasNoAnswerGenerated() {
-        const { answer, citations } = this.props.getGeneratedAnswerState() ?? {};
-        return (answer === undefined && !citations?.length && !this.hasRetryableError);
-    }
-    get isAnswerVisible() {
-        return this.props.getGeneratedAnswerState()?.isVisible;
-    }
-    get toggleTooltip() {
-        const key = this.isAnswerVisible
-            ? 'generated-answer-toggle-on'
-            : 'generated-answer-toggle-off';
-        return this.props.getBindings().i18n.t(key);
-    }
-    get hasClipboard() {
-        return !!navigator?.clipboard?.writeText;
-    }
-    get copyToClipboardTooltip() {
-        if (this.props.getCopyError()) {
-            return this.props.getBindings().i18n.t('failed-to-copy-generated-answer');
-        }
-        return !this.props.getCopied()
-            ? this.props.getBindings().i18n.t('copy-generated-answer')
-            : this.props.getBindings().i18n.t('generated-answer-copied');
-    }
-    get hasCustomNoAnswerMessage() {
-        const slot = getNamedSlotFromHost(this.props.host, 'no-answer-message');
-        return !!slot;
-    }
-    async copyToClipboard(answer) {
-        try {
-            await navigator.clipboard.writeText(answer);
-            this.props.setCopied(true);
-            this.props.getGeneratedAnswer()?.logCopyToClipboard();
-        }
-        catch (error) {
-            this.props.setCopyError(true);
-            this.props
-                .getBindings()
-                .engine.logger.error(`Failed to copy to clipboard: ${error}`);
-        }
-        setTimeout(() => {
-            this.props.setCopied(false);
-            this.props.setCopyError(false);
-        }, 2000);
+    return h(GeneratedAnswerWrapper, null,
+        h("div", { part: "generated-content" },
+            h(GeneratedAnswerHeader, { i18n: i18n, isAnswerVisible: !!isAnswerVisible, withToggle: withToggle, onToggle: (checked) => {
+                    checked ? generatedAnswer?.show() : generatedAnswer?.hide();
+                } }),
+            hasRetryableError && isAnswerVisible ? (h(GeneratedAnswerRetryPrompt, { i18n: i18n, onRetry: () => generatedAnswer?.retry() })) : null,
+            !hasRetryableError && isAnswerVisible ? (h(GeneratedAnswerContent, { answer: generatedAnswerState?.answer, answerContentFormat: generatedAnswerState?.answerContentFormat, citations: generatedAnswerState?.citations, i18n: i18n, isStreaming: generatedAnswerState?.isStreaming, copied: copied, copyError: copyError, generatedAnswerState: generatedAnswerState, withToggle: withToggle, onClickDislike: onClickDislike, onClickLike: onClickLike, onCopyToClipboard: onCopyToClipboard, hasClipboard: hasClipboard, disableCitationAnchoring: disableCitationAnchoring, buildInteractiveCitationForCitation: buildInteractiveCitationForCitation, generatedAnswer: generatedAnswer })) : null,
+            !hasRetryableError && isAnswerVisible && (h(GeneratedAnswerFooter, { collapsible: collapsible, expanded: generatedAnswerState?.expanded, i18n: i18n, isStreaming: generatedAnswerState?.isStreaming, onShowButtonClick: onShowButtonClick },
+                h(GeneratedAnswerDisclaimer, { isStreaming: generatedAnswerState?.isStreaming, i18n: i18n },
+                    h("slot", { name: "disclaimer", slot: "disclaimer" }, i18n.t('generated-answer-disclaimer')))))));
+};
+const GeneratedAnswerWrapper = ({ contentClasses }, children) => {
+    const classes = contentClasses ||
+        'mx-auto mt-0 mb-4 border border-neutral shadow-lg p-6 bg-background rounded-lg p-6 text-on-background';
+    return (h("div", null,
+        h("aside", { class: classes, part: "container" },
+            h("article", null, children))));
+};
+const GeneratedAnswerHeader = ({ i18n, isAnswerVisible, withToggle, onToggle }) => {
+    const toggleTooltip = isAnswerVisible
+        ? i18n.t('generated-answer-toggle-on')
+        : i18n.t('generated-answer-toggle-off');
+    return (h("div", { class: "flex items-center" },
+        h(Heading, { level: 0, part: "header-label", class: "text-primary bg-primary-background inline-block rounded-md px-2.5 py-2 font-medium" }, i18n.t('generated-answer-title')),
+        h("div", { class: "ml-auto flex h-9 items-center" },
+            h(Switch, { part: "toggle", checked: isAnswerVisible, onToggle: onToggle, ariaLabel: i18n.t('generated-answer-title'), title: toggleTooltip, withToggle: withToggle }))));
+};
+const GeneratedAnswerFeedbackAndCopyButtons = ({ copied, copyError, disliked, hasClipboard, i18n, isStreaming, liked, withToggle, onClickDislike, onClickLike, onCopyToClipboard, }) => {
+    const containerClasses = [
+        'feedback-buttons',
+        'flex',
+        'h-9',
+        'absolute',
+        'top-6',
+        'shrink-0',
+        'gap-2',
+        withToggle ? 'right-20' : 'right-6',
+    ].join(' ');
+    if (isStreaming) {
+        return null;
     }
-    clickOnShowButton() {
-        if (this.props.getGeneratedAnswerState()?.expanded) {
-            this.props.getGeneratedAnswer()?.collapse();
-        }
-        else {
-            this.props.getGeneratedAnswer()?.expand();
-        }
+    const copyToClipboardTooltip = copyError
+        ? i18n.t('failed-to-copy-generated-answer')
+        : !copied
+            ? i18n.t('copy-generated-answer')
+            : i18n.t('generated-answer-copied');
+    return (h("div", { class: containerClasses },
+        h(FeedbackButton, { title: i18n.t('this-answer-was-helpful'), variant: "like", active: !!liked, onClick: onClickLike }),
+        h(FeedbackButton, { title: i18n.t('this-answer-was-not-helpful'), variant: "dislike", active: !!disliked, onClick: onClickDislike }),
+        hasClipboard ? (h(CopyButton, { title: copyToClipboardTooltip, isCopied: copied, error: copyError, onClick: onCopyToClipboard })) : null));
+};
+const GeneratedAnswerCitations = ({ citations, disableCitationAnchoring, buildInteractiveCitation, onLogCitationHover, i18n, }) => {
+    if (!citations?.length) {
+        return [];
     }
-    getCitation(citation) {
+    const getCitation = (citation) => {
         const { title } = citation;
-        const { i18n } = this.props.getBindings();
         return title.trim() !== ''
             ? citation
-            : { ...citation, title: i18n.t('no-title') };
-    }
-    renderCitations() {
-        const { getGeneratedAnswerState, buildInteractiveCitation, getGeneratedAnswer, disableCitationAnchoring, } = this.props;
-        const { citations } = getGeneratedAnswerState() ?? {};
-        const { logCitationHover } = getGeneratedAnswer() ?? {};
-        return citations?.map((citation, index) => {
-            const interactiveCitation = buildInteractiveCitation({
-                options: {
-                    citation,
-                },
-            });
-            return (h("li", { key: citation.id, class: "max-w-full" },
-                h("atomic-citation", { citation: this.getCitation(citation), index: index, sendHoverEndEvent: (citationHoverTimeMs) => {
-                        logCitationHover?.(citation.id, citationHoverTimeMs);
-                    }, interactiveCitation: interactiveCitation, disableCitationAnchoring: disableCitationAnchoring, exportparts: "citation,citation-popover" })));
-        });
-    }
-    renderFeedbackAndCopyButtons() {
-        const { getGeneratedAnswerState, getBindings, getCopied, getCopyError } = this.props;
-        const { i18n } = getBindings();
-        const { liked, disliked, answer, isStreaming } = getGeneratedAnswerState() ?? {};
-        const containerClasses = [
-            'feedback-buttons',
-            'flex',
-            'h-9',
-            'absolute',
-            'top-6',
-            'shrink-0',
-            'gap-2',
-            this.props.withToggle ? 'right-20' : 'right-6',
-        ].join(' ');
-        if (isStreaming) {
-            return null;
-        }
-        return (h("div", { class: containerClasses },
-            h(FeedbackButton, { title: i18n.t('this-answer-was-helpful'), variant: "like", active: !!liked, onClick: () => this.clickLike() }),
-            h(FeedbackButton, { title: i18n.t('this-answer-was-not-helpful'), variant: "dislike", active: !!disliked, onClick: () => this.clickDislike() }),
-            this.hasClipboard ? (h(CopyButton, { title: this.copyToClipboardTooltip, isCopied: getCopied(), error: getCopyError(), onClick: async () => {
-                    if (answer) {
-                        await this.copyToClipboard(answer);
-                    }
-                } })) : null));
-    }
-    setIsAnswerHelpful(isAnswerHelpful) {
-        if (this.modalRef) {
-            this.modalRef.helpful = isAnswerHelpful;
-        }
-    }
-    openFeedbackModal() {
-        if (this.modalRef &&
-            !this.props.getGeneratedAnswerState()?.feedbackSubmitted) {
-            this.modalRef.isOpen = true;
-        }
-    }
-    clickDislike() {
-        this.setIsAnswerHelpful(false);
-        this.props.getGeneratedAnswer()?.dislike();
-        this.openFeedbackModal();
-    }
-    clickLike() {
-        this.setIsAnswerHelpful(true);
-        this.props.getGeneratedAnswer()?.like();
-        this.openFeedbackModal();
-    }
-    renderDisclaimer() {
-        const { getGeneratedAnswerState, getBindings } = this.props;
-        const { i18n } = getBindings();
-        const { isStreaming } = getGeneratedAnswerState() ?? {};
-        if (isStreaming) {
-            return null;
-        }
-        return (h("div", { class: "text-neutral-dark text-xs/[1rem]" },
-            h("slot", { name: "disclaimer", slot: "disclaimer" }, i18n.t('generated-answer-disclaimer'))));
-    }
-    renderShowButton() {
-        const { getGeneratedAnswerState, getBindings, collapsible } = this.props;
-        const { i18n } = getBindings();
-        const { expanded, isStreaming } = getGeneratedAnswerState() ?? {};
-        const canRender = collapsible && !isStreaming;
-        if (!canRender) {
-            return null;
-        }
-        return (h(ShowButton, { i18n: i18n, onClick: () => this.clickOnShowButton(), isCollapsed: !expanded }));
+            : { ...citation, title: i18n?.t ? i18n.t('no-title') : 'No title' };
+    };
+    return citations.map((citation, index) => {
+        const interactiveCitation = buildInteractiveCitation?.(citation);
+        return (h("li", { key: citation.id, class: "max-w-full" },
+            h("atomic-citation", { citation: getCitation(citation), index: index, sendHoverEndEvent: (citationHoverTimeMs) => {
+                    onLogCitationHover?.(citation.id, citationHoverTimeMs);
+                }, interactiveCitation: interactiveCitation, disableCitationAnchoring: disableCitationAnchoring, exportparts: "citation,citation-popover" })));
+    });
+};
+const GeneratedAnswerDisclaimer = ({ isStreaming, i18n }, children) => {
+    if (isStreaming) {
+        return null;
     }
-    renderGeneratingAnswerLabel() {
-        const { getGeneratedAnswerState, getBindings, collapsible } = this.props;
-        const { i18n } = getBindings();
-        const { isStreaming } = getGeneratedAnswerState() ?? {};
-        const canRender = collapsible && isStreaming;
-        if (!canRender) {
-            return null;
-        }
-        return (h("div", { part: "is-generating", class: "text-primary hidden text-base font-light" },
+    return (h("div", { class: "text-neutral-dark text-xs/[1rem]" }, children || i18n.t('generated-answer-disclaimer')));
+};
+const GeneratedAnswerFooter = ({ collapsible, expanded, i18n, isStreaming, onShowButtonClick }, children) => {
+    const showGeneratingLabel = collapsible && isStreaming;
+    const showButton = collapsible && !isStreaming;
+    return (h("div", { part: "generated-answer-footer", class: "mt-6 flex justify-end" },
+        showGeneratingLabel && (h("div", { part: "is-generating", class: "text-primary hidden text-base font-light" },
             i18n.t('generating-answer'),
-            "..."));
-    }
-    renderContent() {
-        const { getGeneratedAnswerState, getBindings, getGeneratedAnswer } = this.props;
-        const { i18n } = getBindings();
-        const { isStreaming, answer, citations, answerContentFormat } = getGeneratedAnswerState() ?? {};
-        return (h("div", { part: "generated-content" },
-            h("div", { class: "flex items-center" },
-                h(Heading, { level: 0, part: "header-label", class: "text-primary bg-primary-background inline-block rounded-md px-2.5 py-2 font-medium" }, i18n.t('generated-answer-title')),
-                h("div", { class: "ml-auto flex h-9 items-center" },
-                    h(Switch, { part: "toggle", checked: this.isAnswerVisible, onToggle: (checked) => {
-                            checked
-                                ? getGeneratedAnswer()?.show()
-                                : getGeneratedAnswer()?.hide();
-                        }, ariaLabel: i18n.t('generated-answer-title'), title: this.toggleTooltip, withToggle: this.props.withToggle }))),
-            this.hasRetryableError && this.isAnswerVisible ? (h(RetryPrompt, { onClick: () => getGeneratedAnswer()?.retry(), buttonLabel: i18n.t('retry'), message: i18n.t('retry-stream-message') })) : null,
-            !this.hasRetryableError && this.isAnswerVisible ? (h(GeneratedContentContainer, { answer: answer, answerContentFormat: answerContentFormat, isStreaming: !!isStreaming },
-                this.renderFeedbackAndCopyButtons(),
-                h(SourceCitations, { label: i18n.t('citations'), isVisible: !!citations?.length }, this.renderCitations()))) : null,
-            !this.hasRetryableError && this.isAnswerVisible && (h("div", { part: "generated-answer-footer", class: "mt-6 flex justify-end" },
-                this.renderGeneratingAnswerLabel(),
-                this.renderShowButton(),
-                this.renderDisclaimer()))));
-    }
-    renderCustomNoAnswerMessage() {
-        const { getBindings } = this.props;
-        const { i18n } = getBindings();
-        return (h("div", { part: "generated-content" },
-            h("div", { class: "flex items-center" },
-                h(Heading, { level: 0, part: "header-label", class: "text-primary bg-primary-background inline-block rounded-md px-2.5 py-2 font-medium" }, i18n.t('generated-answer-title'))),
-            h("div", { part: "generated-container", class: "mt-6 break-words" },
-                h("slot", { name: "no-answer-message" }))));
-    }
-    render() {
-        const { getGeneratedAnswerState } = this.props;
-        const { cannotAnswer } = getGeneratedAnswerState() ?? {};
-        const contentClasses = 'mx-auto mt-0 mb-4 border border-neutral shadow-lg p-6 bg-background rounded-lg p-6 text-on-background';
-        if (this.hasNoAnswerGenerated) {
-            return cannotAnswer && this.hasCustomNoAnswerMessage ? (h("div", null,
-                h("aside", { class: contentClasses, part: "container" },
-                    h("article", null, this.renderCustomNoAnswerMessage())))) : null;
-        }
-        return (h("div", null,
-            h("aside", { class: contentClasses, part: "container" },
-                h("article", null, this.renderContent()))));
-    }
-}
+            "...")),
+        showButton && onShowButtonClick && (h(ShowButton, { i18n: i18n, onClick: onShowButtonClick, isCollapsed: !expanded })),
+        children));
+};
+const GeneratedAnswerRetryPrompt = ({ i18n, onRetry }) => {
+    return (h(RetryPrompt, { onClick: onRetry, buttonLabel: i18n.t('retry'), message: i18n.t('retry-stream-message') }));
+};
+const GeneratedAnswerContent = ({ answer, answerContentFormat, citations, i18n, isStreaming, copied, copyError, generatedAnswerState, withToggle, onClickDislike, onClickLike, onCopyToClipboard, hasClipboard, disableCitationAnchoring, buildInteractiveCitationForCitation, generatedAnswer }) => {
+    return (h(GeneratedContentContainer, { answer: answer, answerContentFormat: answerContentFormat, isStreaming: !!isStreaming },
+        h(GeneratedAnswerFeedbackAndCopyButtons, { copied: copied, copyError: copyError, disliked: generatedAnswerState?.disliked, hasClipboard: hasClipboard, i18n: i18n, isStreaming: generatedAnswerState?.isStreaming, liked: generatedAnswerState?.liked, withToggle: withToggle, onClickDislike: onClickDislike, onClickLike: onClickLike, onCopyToClipboard: onCopyToClipboard }),
+        h(SourceCitations, { label: i18n.t('citations'), isVisible: !!citations?.length },
+            h(GeneratedAnswerCitations, { citations: generatedAnswerState.citations, disableCitationAnchoring: disableCitationAnchoring, buildInteractiveCitation: buildInteractiveCitationForCitation, onLogCitationHover: (citationId, citationHoverTimeMs) => {
+                    generatedAnswer?.logCitationHover?.(citationId, citationHoverTimeMs);
+                }, i18n: i18n }))));
+};
+const GeneratedAnswerNoAnswerMessage = ({ i18n }, children) => {
+    return (h("div", { part: "generated-content" },
+        h("div", { class: "flex items-center" },
+            h(Heading, { level: 0, part: "header-label", class: "text-primary bg-primary-background inline-block rounded-md px-2.5 py-2 font-medium" }, i18n.t('generated-answer-title'))),
+        h("div", { part: "generated-container", class: "mt-6 break-words" }, children)));
+};
 
-export { GeneratedAnswerCommon as G };
+export { GeneratedAnswerRenderer as G, copyToClipboard as c, getGeneratedAnswerStatus as g, insertGeneratedAnswerFeedbackModal as i, readGeneratedAnswerStoredData as r, writeGeneratedAnswerStoredData as w };
 
-//# sourceMappingURL=generated-answer-common.js.map
+//# sourceMappingURL=generated-answer-renderer.js.map