@coveo/atomic 3.33.0 → 3.33.1-pre.2a3e15151f

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