@coveo/atomic 3.51.0 → 3.52.1

package/dist/atomic/components/components/common/generated-answer/atomic-generated-answer-thread-item/atomic-generated-answer-thread-item.js

@@ -0,0 +1,155 @@
+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;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { when } from 'lit/directives/when.js';
+import { withTailwindStyles } from "../../../../decorators/with-tailwind-styles";
+/**
+ * The `atomic-generated-answer-thread-item` component renders a generated answer
+ * thread item with timeline visuals and collapsible content.
+ *
+ * @internal
+ *
+ * @slot (default) - The content rendered when the item is expanded.
+ */
+let AtomicGeneratedAnswerThreadItem = class AtomicGeneratedAnswerThreadItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.contentId = `atomic-generated-answer-thread-item-content-${crypto.randomUUID()}`;
+        /**
+         * The title displayed for the thread item.
+         */
+        this.title = '';
+        /**
+         * Whether the thread item can be expanded or collapsed.
+         */
+        this.disableCollapse = false;
+        /**
+         * Whether the timeline line should be hidden (e.g., for the last item).
+         */
+        this.hideLine = false;
+        /**
+         * Whether the thread item is initially expanded.
+         */
+        this.isExpanded = false;
+        this.toggle = () => {
+            if (this.disableCollapse) {
+                return;
+            }
+            this.isExpanded = !this.isExpanded;
+        };
+    }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.isExpanded = !this.disableCollapse ? this.isExpanded : true;
+        }
+    }
+    render() {
+        const titleBaseClasses = {
+            'text-on-background': true,
+            'text-base': true,
+            'min-w-0': true,
+            'inline-flex': true,
+            'text-left': true,
+            'mr-auto': true,
+            'px-2': true,
+            'py-1.5': true,
+        };
+        const titleWeightClasses = {
+            'font-semibold': this.isExpanded,
+            'font-normal': !this.isExpanded,
+        };
+        const titleButtonClasses = classMap({
+            ...titleBaseClasses,
+            ...titleWeightClasses,
+            'bg-transparent': true,
+            'border-0': true,
+            'appearance-none': true,
+            'transition-colors': true,
+            'hover:bg-neutral-light': true,
+            'rounded-md': true,
+            'cursor-pointer': true,
+            'focus-visible:outline-none': true,
+            'focus-visible:ring-2': true,
+            'focus-visible:ring-primary': true,
+            'focus-visible:ring-offset-2': true,
+        });
+        const titleTextClasses = classMap({
+            ...titleBaseClasses,
+            ...titleWeightClasses,
+        });
+        const timelineDotClasses = classMap({
+            'h-2': true,
+            'w-2': true,
+            'rounded-full': true,
+            'bg-neutral-dark': this.isExpanded,
+            'bg-neutral-dim': !this.isExpanded,
+        });
+        const timelineBodyRowClasses = classMap({
+            flex: true,
+            'min-w-0': true,
+            'gap-3': true,
+            'min-h-3': !this.isExpanded,
+        });
+        const timelineConnectorClasses = "relative h-full w-px bg-neutral before:absolute before:left-0 before:top-[-8px] before:h-[8px] before:w-px before:bg-neutral before:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-[8px] after:w-px after:bg-neutral after:content-['']";
+        return html `
+      <li class="grid min-w-0">
+        <div class="flex min-w-0 items-center gap-3">
+          <div class="flex w-[10px] shrink-0 items-center justify-center">
+            <span class=${timelineDotClasses}></span>
+          </div>
+          <div class="flex min-w-0 flex-col">
+            ${when(!this.disableCollapse, () => html `<button
+                  type="button"
+                  aria-expanded=${this.isExpanded}
+                  aria-controls=${this.contentId}
+                  class=${titleButtonClasses}
+                  @click=${this.toggle}
+                >
+                  ${this.title}
+                </button>`, () => html `<span class=${titleTextClasses}>${this.title}</span>`)}
+          </div>
+        </div>
+        <div class=${timelineBodyRowClasses}>
+          <div class="flex w-[10px] shrink-0 justify-center">
+            ${when(this.hideLine, () => html ``, () => html `<span class=${timelineConnectorClasses}> </span>`)}
+          </div>
+          <div id=${this.contentId} class="pl-2 py-1.5">
+            <div class="mb-2"
+              ?hidden=${!this.isExpanded}
+              aria-hidden=${this.isExpanded ? 'false' : 'true'}
+            >
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+        ${when(this.isExpanded, () => html `<div
+              class="thread-content-divider h-px w-full bg-gradient-to-r from-transparent via-neutral to-transparent"
+              aria-hidden="true"
+            ></div>`)}
+      </li>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AtomicGeneratedAnswerThreadItem.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-collapse' })
+], AtomicGeneratedAnswerThreadItem.prototype, "disableCollapse", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-line' })
+], AtomicGeneratedAnswerThreadItem.prototype, "hideLine", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'is-expanded' })
+], AtomicGeneratedAnswerThreadItem.prototype, "isExpanded", void 0);
+AtomicGeneratedAnswerThreadItem = __decorate([
+    customElement('atomic-generated-answer-thread-item'),
+    withTailwindStyles
+], AtomicGeneratedAnswerThreadItem);
+export { AtomicGeneratedAnswerThreadItem };

package/dist/atomic/components/components/common/generated-answer/atomic-generated-answers-thread/atomic-generated-answers-thread.js

@@ -0,0 +1,165 @@
+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;
+};
+import { html, LitElement, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { withTailwindStyles } from "../../../../decorators/with-tailwind-styles";
+import "../atomic-generated-answer-thread-item/atomic-generated-answer-thread-item";
+import "../atomic-answer-content/atomic-answer-content";
+import { repeat } from 'lit/directives/repeat.js';
+const MIN_ANSWERS_TO_COLLAPSE = 2;
+/**
+ * The `atomic-generated-answers-thread` component is responsible for rendering a thread of generated answers.
+ * @internal
+ */
+let AtomicGeneratedAnswersThread = class AtomicGeneratedAnswersThread extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The list of generated answers to render in the thread.
+         */
+        this.generatedAnswers = [];
+        /**
+         * A render function responsible for displaying the citations of a single answer.
+         */
+        this.renderCitations = () => html ``;
+        /**
+         * Callback invoked when the user clicks the "like" feedback button of a specific answer.
+         */
+        this.onClickLike = () => { };
+        /**
+         * Callback invoked when the user clicks the "dislike" feedback button of a specific answer.
+         */
+        this.onClickDislike = () => { };
+        /**
+         * Callback invoked after the text of a specific answer has been successfully copied.
+         */
+        this.onCopyToClipboard = () => { };
+        this.allGeneratedAnswersDisplayed = false;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('generatedAnswers')) {
+            const oldValue = changedProperties.get('generatedAnswers');
+            const newValue = this.generatedAnswers;
+            if (oldValue?.length !== newValue?.length) {
+                this.allGeneratedAnswersDisplayed = false;
+            }
+        }
+    }
+    render() {
+        if (this.generatedAnswers.length > MIN_ANSWERS_TO_COLLAPSE &&
+            !this.allGeneratedAnswersDisplayed) {
+            const lastGeneratedAnswer = this.generatedAnswers[this.generatedAnswers.length - 1];
+            return html `
+        <ul class="mt-6">
+          ${this.renderShowPreviousAnswersButton()}
+          ${this.renderThread([lastGeneratedAnswer])}
+        </ul>
+      `;
+        }
+        return html `
+      <ul class="mt-6">
+        ${this.renderThread(this.generatedAnswers)}
+      </ul>
+    `;
+    }
+    renderThread(generatedAnswers) {
+        return html `
+      ${repeat(generatedAnswers, (answer) => answer.answerId, (answer, index) => {
+            const isLastAnswer = index === generatedAnswers.length - 1;
+            return html `
+            <atomic-generated-answer-thread-item
+              .title=${answer.question}
+              .hideLine=${isLastAnswer}
+              .disableCollapse=${isLastAnswer}
+              .isExpanded=${isLastAnswer}
+            >
+              <atomic-answer-content
+                .generatedAnswer=${answer}
+                .i18n=${this.i18n}
+                .renderCitations=${this.renderCitations}
+                .onClickLike=${this.onClickLike}
+                .onClickDislike=${this.onClickDislike}
+                .onCopyToClipboard=${this.onCopyToClipboard}
+              ></atomic-answer-content>
+            </atomic-generated-answer-thread-item>
+          `;
+        })}
+    `;
+    }
+    handleShowAllClick() {
+        this.allGeneratedAnswersDisplayed = true;
+    }
+    renderShowPreviousAnswersButton() {
+        const label = this.i18n?.t?.('show-previous-questions', {
+            count: this.generatedAnswers.length - 1,
+        }) ?? 'Show previous questions';
+        const showPreviousButtonClasses = `
+      text-on-background text-base min-w-0 inline-flex text-left mr-auto
+      px-2 py-1.5 font-normal bg-transparent border-0 appearance-none
+      transition-colors hover:bg-neutral-light rounded-md cursor-pointer
+      focus-visible:outline-none focus-visible:ring-2
+      focus-visible:ring-primary focus-visible:ring-offset-2
+    `;
+        const timelineDotClasses = `
+      h-2 w-2 rounded-full bg-neutral-dim
+    `;
+        const timelineConnectorClasses = `
+      relative h-full w-px bg-neutral
+      before:absolute before:left-0 before:top-[-8px]
+      before:h-[8px] before:w-px before:bg-neutral before:content-['']
+      after:absolute after:bottom-[-8px] after:left-0
+      after:h-[8px] after:w-px after:bg-neutral after:content-['']
+    `;
+        return html `
+      <li class="grid min-w-0">
+        <div class="flex min-w-0 items-center gap-3">
+          <div class="flex w-[10px] shrink-0 items-center justify-center">
+            <span class=${timelineDotClasses}></span>
+          </div>
+          <div class="flex min-w-0 flex-col">
+            <button
+              type="button"
+              class=${showPreviousButtonClasses}
+              @click=${this.handleShowAllClick}
+            >
+              ${label}
+            </button>
+          </div>
+        </div>
+        <div class="flex h-3 w-[10px] shrink-0 justify-center">
+          <span class=${timelineConnectorClasses}> </span>
+        </div>
+      </li>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], AtomicGeneratedAnswersThread.prototype, "generatedAnswers", void 0);
+__decorate([
+    property({ attribute: false })
+], AtomicGeneratedAnswersThread.prototype, "i18n", void 0);
+__decorate([
+    property({ attribute: false })
+], AtomicGeneratedAnswersThread.prototype, "renderCitations", void 0);
+__decorate([
+    property({ attribute: false })
+], AtomicGeneratedAnswersThread.prototype, "onClickLike", void 0);
+__decorate([
+    property({ attribute: false })
+], AtomicGeneratedAnswersThread.prototype, "onClickDislike", void 0);
+__decorate([
+    property({ attribute: false })
+], AtomicGeneratedAnswersThread.prototype, "onCopyToClipboard", void 0);
+__decorate([
+    state()
+], AtomicGeneratedAnswersThread.prototype, "allGeneratedAnswersDisplayed", void 0);
+AtomicGeneratedAnswersThread = __decorate([
+    customElement('atomic-generated-answers-thread'),
+    withTailwindStyles
+], AtomicGeneratedAnswersThread);
+export { AtomicGeneratedAnswersThread };

package/dist/atomic/components/components/common/generated-answer/render-agent-generation-steps.js

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { when } from 'lit/directives/when.js';
+const stepLabelKeys = {
+    searching: 'agent-generation-step-search',
+    thinking: 'agent-generation-step-think',
+    answering: 'generating-answer',
+};
+/**
+ * @internal
+ */
+export const renderAgentGenerationSteps = ({ props }) => {
+    const { i18n, agentSteps, isStreaming } = props;
+    const currentStepKey = getCurrentStepKey(agentSteps);
+    const currentStepLabel = currentStepKey ? i18n.t(currentStepKey) : undefined;
+    const canRender = isStreaming && !!currentStepLabel;
+    return html `${when(canRender, () => keyed(currentStepKey, html `
+        <div
+          part="agent-generation-status"
+          class="text-neutral-dark flex text-sm font-light"
+        >
+          <span class="generation-steps-container">
+            <span class="generation-steps-value">${currentStepLabel}</span>
+          </span>
+        </div>
+      `))}`;
+};
+/**
+ * Returns the current generation-step localization key.
+ */
+export function getCurrentStepKey(generationSteps) {
+    const activeStep = generationSteps.findLast((step) => step.status === 'active');
+    return activeStep ? stepLabelKeys[activeStep.name] : undefined;
+}

package/dist/atomic/components/components/common/generated-answer/render-answer-content.js

@@ -7,31 +7,14 @@ import { renderSourceCitations } from "./source-citations";
 import { renderGeneratingAnswerLabel } from './render-generating-answer-label';
 import "../atomic-icon/atomic-icon";
 /**
- * Renders the answer content of a given generated answer including question, answer text, and citations.
+ * Renders the answer content of a given generated answer including answer text and citations.
  */
 export const renderAnswerContent = ({ props }) => {
     const { i18n, generatedAnswer, collapsible, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onRetry, onClickShowButton, } = props;
-    const { answer, question, isStreaming, citations, answerContentFormat, expanded, error, } = generatedAnswer;
-    const isExpanded = collapsible ? expanded : true;
-    const trimmedQuestion = question.trim();
+    const { answer, isStreaming, citations, answerContentFormat, expanded, error } = generatedAnswer;
     const hasRetryableError = error?.isRetryable === true;
     return html `
     <div>
-      <div class="mt-6 flex gap-3">
-        <p
-          class="question-text min-w-0 flex-1 text-base font-semibold leading-6"
-        >
-          ${trimmedQuestion}
-        </p>
-        ${when(!hasRetryableError && isExpanded, () => html `
-            <div
-              part="feedback-and-copy-buttons"
-              class="flex h-9 shrink-0 items-center justify-end gap-2"
-            >
-              ${renderFeedbackAndCopyButtonsSlot()}
-            </div>
-          `)}
-      </div>
       ${hasRetryableError
         ? renderRetryPrompt({
             props: {
@@ -57,6 +40,11 @@ export const renderAnswerContent = ({ props }) => {
         })(renderCitationsSlot())}
           `)
         : nothing}
+      ${when(!hasRetryableError && (collapsible ? expanded : true), () => html `
+          <div class="mt-4" part="feedback-and-copy-buttons">
+            ${renderFeedbackAndCopyButtonsSlot()}
+          </div>
+        `)}
       ${!hasRetryableError
         ? html `
             <div part="generated-answer-footer" class="mt-6">

package/dist/atomic/components/components/common/generated-answer/render-follow-up-input.js

@@ -0,0 +1,66 @@
+import { html } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { renderButton } from "../button";
+export const renderFollowUpInput = ({ props }) => {
+    const { submitButtonDisabled = false, askFollowUp } = props;
+    const inputRef = createRef();
+    let isSubmitting = false;
+    const handleSubmit = async () => {
+        const input = inputRef.value;
+        if (!input || isSubmitting)
+            return;
+        const inputValue = input.value.trim();
+        if (!inputValue || submitButtonDisabled) {
+            return;
+        }
+        isSubmitting = true;
+        try {
+            input.value = '';
+            await askFollowUp(inputValue);
+        }
+        finally {
+            isSubmitting = false;
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+    return html `
+    <div class="relative" part="input-container">
+      <input
+        part="input-field"
+        class="w-full rounded-md border border-neutral px-4 py-2 pr-8 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary disabled:bg-neutral-light disabled:text-neutral-dark disabled:cursor-not-allowed"
+        ${ref(inputRef)}
+        type="text"
+        @keydown=${handleKeyDown}
+        placeholder=${props.i18n.t('ask-follow-up')}
+        aria-label=${props.i18n.t('ask-follow-up')}
+      />
+      ${renderButton({
+        props: {
+            style: 'primary',
+            part: 'submit-button',
+            class: 'absolute right-1 top-1 bottom-1 flex w-8 items-center justify-center rounded-md disabled:bg-primary/60 disabled:opacity-100',
+            type: 'button',
+            disabled: submitButtonDisabled,
+            ariaLabel: props.i18n.t('submit-follow-up'),
+            onClick: handleSubmit,
+        },
+    })(html `<svg
+          class="h-4 w-4"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          part="submit-icon"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04L10.75 5.612V16.25A.75.75 0 0110 17z"
+            clip-rule="evenodd"
+          />
+        </svg>`)}
+    </div>
+  `;
+};

package/dist/atomic/components/components/common/generated-answer/styles/generated-answer.tw.css.js

@@ -3,7 +3,7 @@ import generatedMarkdownContent from '../generated-content/generated-markdown-co
 import copyButton from './copy-button.tw.css';
 import feedbackButtons from './feedback-buttons.tw.css';
 import generatedText from './generated-text.tw.css';
-const baseStyle = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@keyframes cursor-blink{0%{opacity:0}}[part=container]{contain:layout;container-type:inline-size}.footer{display:flex}.footer .source-citations{margin-right:calc(var(--spacing, .25rem)*2)}@container (max-width: 37.5rem){.footer{flex-direction:column;gap:calc(var(--spacing, .25rem)*4)}.footer .source-citations{margin-right:calc(var(--spacing, .25rem)*0)}[part=generated-answer-footer]{flex-direction:column;gap:calc(var(--spacing, .25rem)*1)}}@media not all and (width >= 768px){.footer{flex-direction:column;gap:calc(var(--spacing, .25rem)*4)}.footer .source-citations{margin-right:calc(var(--spacing, .25rem)*0)}[part=generated-answer-footer]{flex-direction:column;gap:calc(var(--spacing, .25rem)*1)}}@container (max-width: 25rem){.footer{margin-top:calc(var(--spacing, .25rem)*4)}.footer .feedback-buttons{position:relative;right:calc(var(--spacing, .25rem)*0);top:calc(var(--spacing, .25rem)*0)}}.is-collapsible{justify-content:space-between}.is-collapsible [part=answer-show-button]{display:flex}[part=header-icon]{color:var(--atomic-primary)}[part=feedback-and-copy-buttons]{min-width:var(--atomic-generated-answer-actions-reserved-width,8rem)}[part=header-icon] svg,[part=header-icon] svg *{fill:currentColor;stroke:currentColor}.generating-label-visible [part=is-generating]{display:flex}[part=generated-container].answer-collapsed{max-height:var(--atomic-crga-collapsed-height,16rem);overflow:hidden;position:relative}[part=generated-container].answer-collapsed:before{background:linear-gradient(transparent calc(var(--atomic-crga-collapsed-height, 16rem)*.7),var(--atomic-background));content:"";height:100%;left:calc(var(--spacing, .25rem)*0);position:absolute;top:calc(var(--spacing, .25rem)*0);width:100%}[part=generated-container].answer-collapsed .feedback-buttons{display:none}.query-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}`;
+const baseStyle = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@keyframes cursor-blink{0%{opacity:0}}@keyframes generation-steps-rolodex{0%{opacity:.75;transform:translateY(105%) rotateX(-82deg)}to{opacity:1;transform:translateY(0) rotateX(0deg)}}[part=container]{contain:layout;container-type:inline-size}.footer{display:flex}.footer .source-citations{margin-right:calc(var(--spacing, .25rem)*2)}@container (max-width: 37.5rem){.footer{flex-direction:column;gap:calc(var(--spacing, .25rem)*4)}.footer .source-citations{margin-right:calc(var(--spacing, .25rem)*0)}[part=generated-answer-footer]{flex-direction:column;gap:calc(var(--spacing, .25rem)*1)}}@media not all and (width >= 768px){.footer{flex-direction:column;gap:calc(var(--spacing, .25rem)*4)}.footer .source-citations{margin-right:calc(var(--spacing, .25rem)*0)}[part=generated-answer-footer]{flex-direction:column;gap:calc(var(--spacing, .25rem)*1)}}@container (max-width: 25rem){.footer{margin-top:calc(var(--spacing, .25rem)*4)}.footer .feedback-buttons{position:relative;right:calc(var(--spacing, .25rem)*0);top:calc(var(--spacing, .25rem)*0)}}.is-collapsible{justify-content:space-between}.is-collapsible [part=answer-show-button]{display:flex}[part=header-icon]{color:var(--atomic-primary)}[part=feedback-and-copy-buttons]{min-width:var(--atomic-generated-answer-actions-reserved-width,8rem)}[part=header-icon] svg,[part=header-icon] svg *{fill:currentColor;stroke:currentColor}.generating-label-visible [part=is-generating]{display:flex}[part=agent-generation-status] .generation-steps-container{display:inline-flex;overflow:hidden;perspective:700px}[part=agent-generation-status] .generation-steps-value{animation:generation-steps-rolodex 1s cubic-bezier(.22,.9,.26,1) both;backface-visibility:hidden;display:inline-block;transform-origin:50% 100%;white-space:nowrap;will-change:transform}[part=generated-container].answer-collapsed{max-height:var(--atomic-crga-collapsed-height,16rem);overflow:hidden;position:relative}[part=generated-container].answer-collapsed:before{background:linear-gradient(transparent calc(var(--atomic-crga-collapsed-height, 16rem)*.7),var(--atomic-background));content:"";height:100%;left:calc(var(--spacing, .25rem)*0);position:absolute;top:calc(var(--spacing, .25rem)*0);width:100%}[part=generated-container].answer-collapsed .feedback-buttons{display:none}[part=generated-content-container] .agent-scrollable{height:var(--atomic-generated-answer-content-fixed-height,50vh);overflow-y:auto}.query-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}`;
 export default [
     baseStyle,
     generatedText,

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

@@ -260,7 +260,11 @@ let AtomicInsightGeneratedAnswer = AtomicInsightGeneratedAnswer_1 = class Atomic
             ?.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();
         }
     }
@@ -340,13 +344,13 @@ let AtomicInsightGeneratedAnswer = AtomicInsightGeneratedAnswer_1 = class Atomic
     renderContent() {
         const generatedAnswer = {
             ...this.generatedAnswerState,
-            question: this.bindings.engine.state.query?.q ?? '',
         };
         return renderAnswerContent({
             props: {
                 i18n: this.bindings.i18n,
                 generatedAnswer: generatedAnswer,
-                collapsible: this.collapsible,
+                collapsible: this.collapsible &&
+                    (this.fullAnswerHeight ?? 0) > this.validateMaxCollapsedHeight(),
                 renderFeedbackAndCopyButtonsSlot: () => this.renderFeedbackAndCopyButtonsWrapper(),
                 renderCitationsSlot: () => html `${this.renderCitationsList()}`,
                 onRetry: () => this.generatedAnswer?.retry(),