@coveo/atomic 3.51.0 → 3.52.1

package/dist/atomic/components/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.js

@@ -0,0 +1,267 @@
+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 AtomicInsightTimeframeFacet_1;
+import { NumberValue, Schema, StringValue } from '@coveo/bueno';
+import { buildDateFacet, buildDateFilter, buildDateRange, buildFacetConditionsManager, buildSearchStatus, deserializeRelativeDate, loadDateFacetSetActions, } from '@coveo/headless/insight';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { parseDependsOn } from "../../common/facets/depends-on";
+import facetCommonStyles from "../../common/facets/facet-common.tw.css";
+import { renderFacetPlaceholder } from "../../common/facets/facet-placeholder/facet-placeholder";
+import { TimeframeFacetCommon } from "../../common/facets/timeframe-facet-common";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { booleanConverter } from "../../../converters/boolean-converter";
+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 { FocusTargetController } from "../../../utils/accessibility-utils";
+import { mapProperty } from "../../../utils/props-utils";
+/**
+ * The `atomic-insight-timeframe-facet` component displays a facet of results for the current query as date intervals.
+ *
+ * @slot default - The atomic-timeframe components defining the timeframes to display.
+ *
+ * @part facet - The wrapper for the entire facet.
+ * @part placeholder - The placeholder shown before the first search is executed.
+ * @part label-button - The button that displays the label and allows to expand/collapse the facet.
+ * @part label-button-icon - The label button icon.
+ * @part clear-button - The button that resets the actively selected facet values.
+ * @part clear-button-icon - The clear button icon.
+ * @part values - The facet values container.
+ * @part value-link - A facet value button.
+ * @part value-link-selected - A selected facet value button.
+ * @part value-count - The result count for a facet value.
+ * @part value-label - The label text of a facet value.
+ * @part input-start - The starting value of the custom date range.
+ * @part input-end - The ending value of the custom date range.
+ * @part input-label - The label for both the start and end input.
+ * @part input-apply-button - The apply button for the custom range.
+ */
+let AtomicInsightTimeframeFacet = AtomicInsightTimeframeFacet_1 = class AtomicInsightTimeframeFacet extends LitElement {
+    constructor() {
+        super();
+        /**
+         * The non-localized label for the facet.
+         * Used in the atomic-breadbox component through the bindings store.
+         */
+        this.label = 'no-label';
+        /**
+         * The field whose values you want to display in the facet.
+         */
+        this.field = 'date';
+        /**
+         * Whether this facet should contain a datepicker allowing users to set custom ranges.
+         */
+        this.withDatePicker = false;
+        /**
+         * Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.
+         */
+        this.isCollapsed = false;
+        /**
+         * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.
+         */
+        this.headingLevel = 0;
+        /**
+         * Whether to exclude the parents of folded results when estimating the result count for each facet value.
+         *
+         * Note: Resulting count is only an estimation, in some cases this value could be incorrect.
+         */
+        this.filterFacetCount = true;
+        /**
+         * The maximum number of results to scan in the index to ensure that the facet lists all potential facet values.
+         * Note: A high injectionDepth may negatively impact the facet request performance.
+         * Minimum: `0`
+         * Default: `1000`
+         */
+        this.injectionDepth = 1000;
+        /**
+         * The sort criterion to apply to the returned facet values.
+         * Possible values are 'ascending' and 'descending'.
+         */
+        this.sortCriteria = 'descending';
+        this.handleDateInputApply = () => {
+            if (this.facetId) {
+                this.bindings.engine.dispatch(loadDateFacetSetActions(this.bindings.engine).deselectAllDateFacetValues(this.facetId));
+            }
+        };
+        new ValidatePropsController(this, () => ({
+            injectionDepth: this.injectionDepth,
+            headingLevel: this.headingLevel,
+            sortCriteria: this.sortCriteria,
+        }), AtomicInsightTimeframeFacet_1.propsSchema, false);
+    }
+    get focusTarget() {
+        if (!this.headerFocus) {
+            this.headerFocus = new FocusTargetController(this, this.bindings);
+        }
+        return this.headerFocus;
+    }
+    initialize() {
+        this.timeframeFacetCommon = new TimeframeFacetCommon({
+            facetId: this.facetId,
+            host: this,
+            bindings: this.bindings,
+            label: this.label,
+            field: this.field,
+            headingLevel: this.headingLevel,
+            dependsOn: parseDependsOn(this.dependsOn) ? this.dependsOn : {},
+            withDatePicker: this.withDatePicker,
+            setFacetId: (id) => {
+                this.facetId = id;
+                return id;
+            },
+            getSearchStatusState: () => this.searchStatusState,
+            buildDependenciesManager: (facetId) => buildFacetConditionsManager(this.bindings.engine, {
+                facetId,
+                conditions: parseDependsOn(this.dependsOn),
+            }),
+            deserializeRelativeDate,
+            buildDateRange,
+            initializeFacetForDatePicker: () => this.initializeFacetForDatePicker(),
+            initializeFacetForDateRange: (values) => this.initializeFacetForDateRange(values),
+            initializeFilter: () => this.initializeFilter(),
+            sortCriteria: this.sortCriteria,
+        });
+        this.searchStatus = buildSearchStatus(this.bindings.engine);
+        this.addEventListener('atomic-date-input-apply', this.handleDateInputApply);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.timeframeFacetCommon?.disconnectedCallback();
+        this.removeEventListener('atomic-date-input-apply', this.handleDateInputApply);
+    }
+    initializeFacetForDatePicker() {
+        return buildDateFacet(this.bindings.engine, {
+            options: {
+                facetId: `${this.facetId}_input_range`,
+                numberOfValues: 1,
+                generateAutomaticRanges: true,
+                field: this.field,
+                filterFacetCount: this.filterFacetCount,
+                injectionDepth: this.injectionDepth,
+            },
+        });
+    }
+    initializeFacetForDateRange(values) {
+        return buildDateFacet(this.bindings.engine, {
+            options: {
+                facetId: this.facetId,
+                field: this.field,
+                currentValues: values,
+                generateAutomaticRanges: false,
+                sortCriteria: this.sortCriteria,
+                filterFacetCount: this.filterFacetCount,
+                injectionDepth: this.injectionDepth,
+            },
+        });
+    }
+    initializeFilter() {
+        return buildDateFilter(this.bindings.engine, {
+            options: {
+                facetId: `${this.facetId}_input`,
+                field: this.field,
+            },
+        });
+    }
+    render() {
+        return html `${when(this.timeframeFacetCommon, () => this.timeframeFacetCommon.render({
+            hasError: this.searchStatusState.hasError,
+            firstSearchExecuted: this.searchStatusState.firstSearchExecuted,
+            isCollapsed: this.isCollapsed,
+            headerFocus: this.focusTarget,
+            onToggleCollapse: () => {
+                this.isCollapsed = !this.isCollapsed;
+                return this.isCollapsed;
+            },
+        }), () => renderFacetPlaceholder({
+            props: {
+                numberOfValues: 5,
+                isCollapsed: this.isCollapsed,
+            },
+        }))}`;
+    }
+};
+AtomicInsightTimeframeFacet.propsSchema = new Schema({
+    injectionDepth: new NumberValue({ min: 0, required: false }),
+    headingLevel: new NumberValue({ min: 0, max: 6, required: false }),
+    sortCriteria: new StringValue({
+        constrainTo: ['ascending', 'descending'],
+        required: false,
+    }),
+});
+AtomicInsightTimeframeFacet.styles = facetCommonStyles;
+__decorate([
+    property({ reflect: true })
+], AtomicInsightTimeframeFacet.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], AtomicInsightTimeframeFacet.prototype, "field", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'with-date-picker',
+    })
+], AtomicInsightTimeframeFacet.prototype, "withDatePicker", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'is-collapsed',
+    })
+], AtomicInsightTimeframeFacet.prototype, "isCollapsed", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'heading-level' })
+], AtomicInsightTimeframeFacet.prototype, "headingLevel", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'filter-facet-count',
+    })
+], AtomicInsightTimeframeFacet.prototype, "filterFacetCount", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'injection-depth' })
+], AtomicInsightTimeframeFacet.prototype, "injectionDepth", void 0);
+__decorate([
+    mapProperty({ attributePrefix: 'depends-on' })
+], AtomicInsightTimeframeFacet.prototype, "dependsOn", void 0);
+__decorate([
+    property({
+        reflect: true,
+        attribute: 'sort-criteria',
+    })
+], AtomicInsightTimeframeFacet.prototype, "sortCriteria", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'facet-id' })
+], AtomicInsightTimeframeFacet.prototype, "facetId", void 0);
+__decorate([
+    state()
+], AtomicInsightTimeframeFacet.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightTimeframeFacet.prototype, "error", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicInsightTimeframeFacet.prototype, "searchStatusState", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicInsightTimeframeFacet.prototype, "render", null);
+AtomicInsightTimeframeFacet = AtomicInsightTimeframeFacet_1 = __decorate([
+    customElement('atomic-insight-timeframe-facet'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightTimeframeFacet);
+export { AtomicInsightTimeframeFacet };

package/dist/atomic/components/components/insight/atomic-insight-user-actions-session/atomic-insight-user-actions-session.js

@@ -140,7 +140,7 @@ let AtomicInsightUserActionsSession = class AtomicInsightUserActionsSession exte
     `;
     }
 };
-AtomicInsightUserActionsSession.styles = css``;
+AtomicInsightUserActionsSession.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */.session-start-icon__container{background-color:#fbb439}.user-action__separator{background-color:var(--atomic-neutral)}.ticket-creation-action__text{color:var(--atomic-success)}.text-xxs{font-size:.625rem}`;
 __decorate([
     state()
 ], AtomicInsightUserActionsSession.prototype, "bindings", void 0);

package/dist/atomic/components/components/insight/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js

@@ -202,7 +202,7 @@ let AtomicInsightUserActionsTimeline = AtomicInsightUserActionsTimeline_1 = clas
         return this.renderNoUserActionsScreen();
     }
 };
-AtomicInsightUserActionsTimeline.styles = css``;
+AtomicInsightUserActionsTimeline.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */.separator{background-color:var(--atomic-insight-user-actions-timeline-separator-background);height:1px}`;
 AtomicInsightUserActionsTimeline.propsSchema = new Schema({
     userId: new StringValue({ required: true, emptyAllowed: false }),
     ticketCreationDateTime: new StringValue({

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

@@ -16,10 +16,12 @@ export { AtomicInsightQuerySummary } from './atomic-insight-query-summary/atomic
 export { AtomicInsightRefineModal } from './atomic-insight-refine-modal/atomic-insight-refine-modal.js';
 export { AtomicInsightRefineToggle } from './atomic-insight-refine-toggle/atomic-insight-refine-toggle.js';
 export { AtomicInsightResult } from './atomic-insight-result/atomic-insight-result.js';
+export { AtomicInsightResultAction } from './atomic-insight-result-action/atomic-insight-result-action.js';
 export { AtomicInsightResultActionBar } from './atomic-insight-result-action-bar/atomic-insight-result-action-bar.js';
 export { AtomicInsightResultAttachToCaseAction } from './atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.js';
 export { AtomicInsightResultAttachToCaseIndicator } from './atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js';
 export { AtomicInsightResultChildren } from './atomic-insight-result-children/atomic-insight-result-children.js';
+export { AtomicInsightResultChildrenTemplate } from './atomic-insight-result-children-template/atomic-insight-result-children-template.js';
 export { AtomicInsightResultList } from './atomic-insight-result-list/atomic-insight-result-list.js';
 export { AtomicInsightResultQuickviewAction } from './atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js';
 export { AtomicInsightResultTemplate } from './atomic-insight-result-template/atomic-insight-result-template.js';
@@ -29,6 +31,7 @@ export { AtomicInsightSmartSnippetFeedbackModal } from './atomic-insight-smart-s
 export { AtomicInsightSmartSnippetSuggestions } from './atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.js';
 export { AtomicInsightTab } from './atomic-insight-tab/atomic-insight-tab.js';
 export { AtomicInsightTabs } from './atomic-insight-tabs/atomic-insight-tabs.js';
+export { AtomicInsightTimeframeFacet } from './atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.js';
 export { AtomicInsightUserActionsModal } from './atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js';
 export { AtomicInsightUserActionsSession } from './atomic-insight-user-actions-session/atomic-insight-user-actions-session.js';
 export { AtomicInsightUserActionsTimeline } from './atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js';

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

@@ -17,10 +17,12 @@ export default {
     'atomic-insight-refine-modal': async () => await import('./atomic-insight-refine-modal/atomic-insight-refine-modal.js'),
     'atomic-insight-refine-toggle': async () => await import('./atomic-insight-refine-toggle/atomic-insight-refine-toggle.js'),
     'atomic-insight-result': async () => await import('./atomic-insight-result/atomic-insight-result.js'),
+    'atomic-insight-result-action': async () => await import('./atomic-insight-result-action/atomic-insight-result-action.js'),
     'atomic-insight-result-action-bar': async () => await import('./atomic-insight-result-action-bar/atomic-insight-result-action-bar.js'),
     'atomic-insight-result-attach-to-case-action': async () => await import('./atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.js'),
     'atomic-insight-result-attach-to-case-indicator': async () => await import('./atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js'),
     'atomic-insight-result-children': async () => await import('./atomic-insight-result-children/atomic-insight-result-children.js'),
+    'atomic-insight-result-children-template': async () => await import('./atomic-insight-result-children-template/atomic-insight-result-children-template.js'),
     'atomic-insight-result-list': async () => await import('./atomic-insight-result-list/atomic-insight-result-list.js'),
     'atomic-insight-result-quickview-action': async () => await import('./atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js'),
     'atomic-insight-result-template': async () => await import('./atomic-insight-result-template/atomic-insight-result-template.js'),
@@ -30,6 +32,7 @@ export default {
     'atomic-insight-smart-snippet-suggestions': async () => await import('./atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.js'),
     'atomic-insight-tab': async () => await import('./atomic-insight-tab/atomic-insight-tab.js'),
     'atomic-insight-tabs': async () => await import('./atomic-insight-tabs/atomic-insight-tabs.js'),
+    'atomic-insight-timeframe-facet': async () => await import('./atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.js'),
     'atomic-insight-user-actions-modal': async () => await import('./atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js'),
     'atomic-insight-user-actions-session': async () => await import('./atomic-insight-user-actions-session/atomic-insight-user-actions-session.js'),
     'atomic-insight-user-actions-timeline': async () => await import('./atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js'),

package/dist/atomic/components/components/search/atomic-external/atomic-external.js

@@ -18,7 +18,7 @@ import { errorGuard } from "../../../decorators/error-guard";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { buildCustomEvent } from "../../../utils/event-utils";
 import { isParentReady, markParentAsReady, } from "../../../utils/init-queue";
-import { initializeEventName, } from "../../../utils/initialization-lit-stencil-common-utils";
+import { initializeEventName, } from "../../../utils/initialization-common-utils";
 /**
  * The `atomic-external` component allows components defined outside of the `atomic-search-interface` to initialize.
  *

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

@@ -9,6 +9,7 @@ import { NumberValue, Schema } from '@coveo/bueno';
 import { buildGeneratedAnswer, buildInteractiveCitation, buildSearchStatus, buildTabManager, } from '@coveo/headless';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 import { GeneratedAnswerController } from "../../common/generated-answer/generated-answer-controller";
 import { renderAnswerContent } from "../../common/generated-answer/render-answer-content";
@@ -31,6 +32,8 @@ import { debounce } from "../../../utils/debounce-utils";
 import { getNamedSlotContent } from "../../../utils/slot-utils";
 import { shouldDisplayOnCurrentTab } from "../../../utils/tab-utils";
 import atomicGeneratedAnswerStyles from './atomic-generated-answer.tw.css.js';
+import "../../common/generated-answer/atomic-generated-answers-thread/atomic-generated-answers-thread.js";
+import { renderFollowUpInput } from "../../common/generated-answer/render-follow-up-input.js";
 /**
  * The `atomic-generated-answer` component uses Coveo Machine Learning (Coveo ML) models to automatically generate an answer to a query executed by the user.
  * For more information, see [About Relevance Generative Answering (RGA)](https://docs.coveo.com/en/n9de0370/)
@@ -164,7 +167,7 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
         this.searchStatus = buildSearchStatus(this.bindings.engine);
         this.tabManager = buildTabManager(this.bindings.engine);
         this.controller.insertFeedbackModal();
-        if (window.ResizeObserver && this.collapsible) {
+        if (window.ResizeObserver && this.isCollapsibleEnabled) {
             const debouncedAdaptAnswerHeight = debounce(() => this.adaptAnswerHeight(), 100);
             this.resizeObserver = new ResizeObserver(debouncedAdaptAnswerHeight);
             this.resizeObserver.observe(this);
@@ -189,13 +192,19 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
         if (changedProperties.has('generatedAnswerState')) {
             const oldState = changedProperties.get('generatedAnswerState');
             if (oldState &&
-                this.generatedAnswerState?.expanded !== oldState?.expanded) {
+                this.generatedAnswerState?.expanded !== oldState?.expanded &&
+                this.isCollapsibleEnabled) {
                 const container = this.getAnswerContainer();
                 if (container) {
                     this.toggleClass(container, 'answer-collapsed', !this.generatedAnswerState.expanded);
                 }
             }
         }
+        if ((changedProperties.has('collapsible') ||
+            changedProperties.has('agentId')) &&
+            !this.isCollapsibleEnabled) {
+            this.resetCollapsibleStyles();
+        }
     }
     render() {
         if (!shouldDisplayOnCurrentTab(this.tabsIncluded, this.tabsExcluded, this.tabManagerState?.activeTab)) {
@@ -231,14 +240,24 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
         >
           <div part="generated-content">
             ${this.renderCardHeaderWrapper()}
-            ${when(this.isAnswerVisible, () => html ` <div part="generated-content-container" class="px-6 pb-6">
-                  <article>${this.renderAnswerContent()}</article>
-                  ${renderDisclaimer({
+            ${when(this.isAnswerVisible, () => html ` <div part="generated-content-container" class="pb-6">
+                  <div
+                    class=${classMap({
+            'px-6': true,
+            'agent-scrollable': this.areFollowUpsEnabled,
+        })}
+                  >
+                    <article>${this.renderAnswerContent()}</article>
+                  </div>
+                  <div class="px-6 pt-2">
+                    ${this.renderAskFollowUpInputWrapper()}
+                    ${renderDisclaimer({
             props: {
                 i18n: this.bindings.i18n,
                 isStreaming: !!this.generatedAnswerState.isStreaming,
             },
         })}
+                  </div>
                 </div>`)}
           </div>
         </aside>
@@ -308,7 +327,11 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
             ?.getBoundingClientRect().height;
         if (answerHeight) {
             const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-            this.fullAnswerHeight = answerHeight / rootFontSize;
+            const nextFullAnswerHeight = answerHeight / rootFontSize;
+            if (this.fullAnswerHeight !== nextFullAnswerHeight) {
+                this.fullAnswerHeight = nextFullAnswerHeight;
+                this.requestUpdate();
+            }
             this.updateAnswerHeight();
         }
     }
@@ -349,8 +372,7 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
     clickLike() {
         this.controller.clickLike();
     }
-    renderCitationsList() {
-        const { citations } = this.generatedAnswerState ?? {};
+    renderCitationsList(citations) {
         return renderCitations({
             props: {
                 citations,
@@ -386,22 +408,67 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
         });
     }
     renderAnswerContent() {
-        const generatedAnswer = {
-            ...this.generatedAnswerState,
-            question: this.bindings.engine.state.query?.q ?? '',
-        };
+        if (this.areFollowUpsEnabled) {
+            const generatedAnswerWithQuestion = {
+                ...this.generatedAnswerState,
+                question: this.bindings.engine.state.query?.q ?? '',
+            };
+            const allGeneratedAnswers = [
+                generatedAnswerWithQuestion,
+                ...(this.generatedAnswerWithFollowUps?.state.followUpAnswers
+                    .followUpAnswers ?? []),
+            ];
+            return html `<atomic-generated-answers-thread
+        .generatedAnswers=${allGeneratedAnswers}
+        .i18n=${this.bindings.i18n}
+        .renderCitations=${this.renderCitationsList.bind(this)}
+        .onClickLike=${(answerId) => this.generatedAnswer.like(answerId)}
+        .onClickDislike=${(answerId) => this.generatedAnswer.dislike(answerId)}
+        .onCopyToClipboard=${(answerId) => this.generatedAnswer.logCopyToClipboard(answerId)}
+      ></atomic-generated-answers-thread>`;
+        }
         return renderAnswerContent({
             props: {
                 i18n: this.bindings.i18n,
-                generatedAnswer: generatedAnswer,
-                collapsible: this.collapsible,
+                generatedAnswer: this.generatedAnswerState,
+                collapsible: this.isCollapsibleEnabled,
                 renderFeedbackAndCopyButtonsSlot: () => this.renderFeedbackAndCopyButtonsWrapper(),
-                renderCitationsSlot: () => html `${this.renderCitationsList()}`,
+                renderCitationsSlot: () => html `${this.renderCitationsList(this.generatedAnswerState.citations)}`,
                 onRetry: () => this.generatedAnswer?.retry(),
                 onClickShowButton: () => this.clickOnShowButton(),
             },
         });
     }
+    get hasAgentId() {
+        return Boolean(this.agentId);
+    }
+    get generatedAnswerWithFollowUps() {
+        if (!this.hasAgentId ||
+            !this.generatedAnswer ||
+            !('askFollowUp' in this.generatedAnswer)) {
+            return undefined;
+        }
+        return this.generatedAnswer;
+    }
+    get areFollowUpsEnabled() {
+        return (this.generatedAnswerWithFollowUps?.state.followUpAnswers?.isEnabled ===
+            true);
+    }
+    get isCollapsibleEnabled() {
+        return (this.collapsible &&
+            !this.areFollowUpsEnabled &&
+            (this.fullAnswerHeight ?? 0) > this.validateMaxCollapsedHeight());
+    }
+    resetCollapsibleStyles() {
+        const container = this.getAnswerContainer();
+        const footer = this.getAnswerFooter();
+        if (!container || !footer) {
+            return;
+        }
+        this.toggleClass(container, 'answer-collapsed', false);
+        this.toggleClass(footer, 'is-collapsible', false);
+        this.toggleClass(footer, 'generating-label-visible', false);
+    }
     renderCardHeaderWrapper() {
         return renderCardHeader({
             props: {
@@ -415,6 +482,32 @@ let AtomicGeneratedAnswer = AtomicGeneratedAnswer_1 = class AtomicGeneratedAnswe
             },
         });
     }
+    get isAnswerGenerationOngoing() {
+        const initialAnswerPending = this.generatedAnswerState.isStreaming ||
+            this.generatedAnswerState.isLoading;
+        return (initialAnswerPending ||
+            (this.generatedAnswerWithFollowUps?.state.followUpAnswers?.followUpAnswers?.some((answer) => answer.isStreaming || answer.isLoading) ??
+                false));
+    }
+    async handleAskFollowUp(question) {
+        if (this.areFollowUpsEnabled) {
+            await this.generatedAnswerWithFollowUps?.askFollowUp(question);
+        }
+    }
+    renderAskFollowUpInputWrapper() {
+        if (!this.areFollowUpsEnabled) {
+            return nothing;
+        }
+        return html ` <div class="mb-2">
+      ${renderFollowUpInput({
+            props: {
+                i18n: this.bindings.i18n,
+                submitButtonDisabled: this.isAnswerGenerationOngoing,
+                askFollowUp: this.handleAskFollowUp.bind(this),
+            },
+        })}
+    </div>`;
+    }
 };
 AtomicGeneratedAnswer.styles = [atomicGeneratedAnswerStyles];
 AtomicGeneratedAnswer.propsSchema = new Schema({