@coveo/atomic 3.50.0 → 3.52.0

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-feedback-and-copy-buttons.js

@@ -8,9 +8,10 @@ import { hasClipboardSupport } from './generated-answer-utils';
  * Renders the feedback (like/dislike) and copy-to-clipboard buttons.
  */
 export const renderFeedbackAndCopyButtons = ({ props }) => {
-    const { i18n, generatedAnswerState, copied, copyError, getCopyToClipboardTooltip, onClickLike, onClickDislike, onCopyToClipboard, } = props;
-    const { liked, disliked, answer, isStreaming } = generatedAnswerState ?? {};
-    return html `${when(!isStreaming, () => html `
+    const { i18n, generatedAnswerActionsState, copied, copyError, getCopyToClipboardTooltip, onClickLike, onClickDislike, onCopyToClipboard, } = props;
+    const { liked, disliked, answer, isStreaming, isLoading } = generatedAnswerActionsState ?? {};
+    const shouldShowButtons = !!answer && !isStreaming && !isLoading;
+    return html `${when(shouldShowButtons, () => html `
       <div
         class="${classMap({
         'feedback-buttons flex h-9 items-center shrink-0 gap-2': true,

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}}[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}[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,