@coveo/atomic 3.49.0 → 3.51.0

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/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.js

@@ -0,0 +1,444 @@
+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 AtomicInsightGeneratedAnswer_1;
+import { NumberValue, Schema } from '@coveo/bueno';
+import { buildGeneratedAnswer as buildInsightGeneratedAnswer, buildInteractiveCitation as buildInsightInteractiveCitation, buildSearchStatus as buildInsightSearchStatus, } from '@coveo/headless/insight';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.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";
+import { renderCardHeader } from "../../common/generated-answer/render-card-header";
+import { renderCitations } from "../../common/generated-answer/render-citations";
+import { renderCustomNoAnswerMessage } from "../../common/generated-answer/render-custom-no-answer-message";
+import { renderDisclaimer } from "../../common/generated-answer/render-disclaimer";
+import { renderFeedbackAndCopyButtons } from "../../common/generated-answer/render-feedback-and-copy-buttons";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { createLegacyArrayStringConverter } from "../../../converters/legacy-array-string-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 { AriaLiveRegionController } from "../../../utils/accessibility-utils";
+import { debounce } from "../../../utils/debounce-utils";
+import { getNamedSlotContent } from "../../../utils/slot-utils";
+import atomicInsightGeneratedAnswerStyles from './atomic-insight-generated-answer.tw.css.js';
+/**
+ * The `atomic-insight-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/)
+ *
+ * @slot no-answer-message - Lets you pass a custom sorry message when no answer is generated.
+ *
+ * @part container - The container displaying the generated answer.
+ * @part header-label - The header of the generated answer container.
+ * @part feedback-button - The "like" and "dislike" buttons.
+ * @part toggle - The switch to toggle the visibility of the generated answer.
+ * @part copy-button - The "Copy answer" button.
+ * @part retry-container - The container for the "retry" section.
+ * @part generated-text - The text of the generated answer.
+ * @part citations-label - The header of the citations list.
+ *
+ * @part answer-code-block - The generated answer multi-line code blocks.
+ * @part answer-emphasis - The generated answer emphasized text elements.
+ * @part answer-inline-code - The generated answer inline code elements.
+ * @part answer-heading-1 - The generated answer level 1 heading elements.
+ * @part answer-heading-2 - The generated answer level 2 heading elements.
+ * @part answer-heading-3 - The generated answer level 3 heading elements.
+ * @part answer-heading-4 - The generated answer level 4 heading elements.
+ * @part answer-heading-5 - The generated answer level 5 heading elements.
+ * @part answer-heading-6 - The generated answer level 6 heading elements.
+ * @part answer-list-item - The generated answer list item elements for both ordered and unordered lists.
+ * @part answer-ordered-list - The generated answer ordered list elements.
+ * @part answer-paragraph - The generated answer paragraph elements.
+ * @part answer-quote-block - The generated answer quote block elements.
+ * @part answer-unordered-list - The generated answer unordered list elements.
+ * @part answer-strong - The generated answer strong text elements.
+ * @part answer-table - The generated answer table elements.
+ * @part answer-table-container - The generated answer table container elements.
+ * @part answer-table-content - The generated answer table content cell elements.
+ * @part answer-table-header - The generated answer table header cell elements.
+ *
+ * @part citation - The link that allows the user to navigate to the item.
+ * @part citation-popover - The pop-up that shows an item preview when the user hovers over the citation.
+ */
+let AtomicInsightGeneratedAnswer = AtomicInsightGeneratedAnswer_1 = class AtomicInsightGeneratedAnswer extends LitElement {
+    constructor() {
+        super();
+        this.DEFAULT_COLLAPSED_HEIGHT = 16;
+        this.MAX_COLLAPSED_HEIGHT = 32;
+        this.MIN_COLLAPSED_HEIGHT = 9;
+        this.REQUIRED_FIELDS_TO_INCLUDE_IN_CITATIONS = ['filetype'];
+        /**
+         * Whether to render a toggle button that lets the user hide or show the answer.
+         */
+        this.withToggle = false;
+        /**
+         * Whether to allow the answer to be collapsed when the text is taller than the specified `--atomic-crga-collapsed-height` value (16rem by default).
+         */
+        this.collapsible = false;
+        /**
+         * The maximum height (in rem units) of the answer when collapsed.
+         */
+        this.maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT;
+        /**
+         * Whether to disable citation anchoring.
+         */
+        this.disableCitationAnchoring = false;
+        this.copied = false;
+        this.copyError = false;
+        this.ariaMessage = new AriaLiveRegionController(this, 'generated-answer');
+        // Used by bindStateToController decorator via onUpdateCallbackMethod option
+        this.onGeneratedAnswerStateUpdate = () => {
+            if (this.generatedAnswerState.isVisible !== this.controller.data.isVisible) {
+                this.controller.data = {
+                    ...this.controller.data,
+                    isVisible: this.generatedAnswerState.isVisible,
+                };
+                this.controller.writeStoredData(this.controller.data);
+            }
+            this.ariaMessage.message = this.controller.getGeneratedAnswerStatus();
+        };
+        new ValidatePropsController(this, () => ({ maxCollapsedHeight: this.maxCollapsedHeight }), AtomicInsightGeneratedAnswer_1.propsSchema, 
+        // TODO: V4: KIT-5197 - Remove skipValidation flag
+        false);
+    }
+    initialize() {
+        this.controller = new GeneratedAnswerController(this, {
+            withToggle: this.withToggle,
+            getGeneratedAnswer: () => this.generatedAnswer,
+            getGeneratedAnswerState: () => this.generatedAnswerState,
+            getSearchStatusState: () => this.searchStatusState,
+            getBindings: () => this.bindings,
+        });
+        this.generatedAnswer = buildInsightGeneratedAnswer(this.bindings.engine, {
+            initialState: {
+                isVisible: this.controller.data.isVisible,
+                responseFormat: {
+                    contentFormat: ['text/markdown', 'text/plain'],
+                },
+            },
+            ...(this.answerConfigurationId && {
+                answerConfigurationId: this.answerConfigurationId,
+            }),
+            fieldsToIncludeInCitations: this.getCitationFields(),
+        });
+        this.searchStatus = buildInsightSearchStatus(this.bindings.engine);
+        this.controller.insertFeedbackModal();
+        if (window.ResizeObserver && this.collapsible) {
+            const debouncedAdaptAnswerHeight = debounce(() => this.adaptAnswerHeight(), 100);
+            this.resizeObserver = new ResizeObserver(debouncedAdaptAnswerHeight);
+            this.resizeObserver.observe(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('generatedAnswerState')) {
+            const oldState = changedProperties.get('generatedAnswerState');
+            if (oldState &&
+                this.generatedAnswerState?.expanded !== oldState?.expanded) {
+                const container = this.getAnswerContainer();
+                if (container) {
+                    this.toggleClass(container, 'answer-collapsed', !this.generatedAnswerState.expanded);
+                }
+            }
+        }
+    }
+    render() {
+        const contentClasses = 'mx-auto mt-0 mb-4 border border-neutral shadow-lg bg-background rounded-lg text-on-background';
+        if (this.hasNoAnswerGenerated) {
+            if (this.generatedAnswerState?.cannotAnswer &&
+                this.hasCustomNoAnswerMessage) {
+                return html `
+          <div>
+            <aside
+              class=${contentClasses}
+              part="container"
+              aria-label=${this.bindings.i18n.t('generated-answer-title')}
+            >
+              <div part="generated-content">
+                ${this.renderCardHeaderWrapper()}
+                ${when(this.isAnswerVisible, () => html `<article>${renderCustomNoAnswerMessage()}</article>`)}
+              </div>
+            </aside>
+          </div>
+        `;
+            }
+            return nothing;
+        }
+        return html `
+      <div>
+        <aside
+          class=${contentClasses}
+          part="container"
+          aria-label=${this.bindings.i18n.t('generated-answer-title')}
+        >
+          <div part="generated-content">
+            ${this.renderCardHeaderWrapper()}
+            ${when(this.isAnswerVisible, () => html ` <div part="generated-content-container" class="px-6 pb-6">
+                  <article>${this.renderContent()}</article>
+                  ${renderDisclaimer({
+            props: {
+                i18n: this.bindings.i18n,
+                isStreaming: !!this.generatedAnswerState.isStreaming,
+            },
+        })}
+                </div>`)}
+          </div>
+        </aside>
+      </div>
+    `;
+    }
+    get hasNoAnswerGenerated() {
+        return this.controller.hasNoAnswerGenerated;
+    }
+    get isAnswerVisible() {
+        return this.controller.isAnswerVisible;
+    }
+    get toggleTooltip() {
+        return this.controller.getToggleTooltip();
+    }
+    get copyToClipboardTooltip() {
+        return this.controller.getCopyToClipboardTooltip(this.copied, this.copyError);
+    }
+    get hasCustomNoAnswerMessage() {
+        return getNamedSlotContent(this, 'no-answer-message').length > 0;
+    }
+    async copyToClipboard(answer) {
+        await this.controller.copyToClipboard(answer, () => {
+            this.copied = true;
+            setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        }, () => {
+            this.copyError = true;
+            setTimeout(() => {
+                this.copyError = false;
+            }, 2000);
+        });
+    }
+    clickOnShowButton() {
+        this.controller.clickOnShowButton();
+    }
+    getCitationFields() {
+        // Defensive: handle both string and array for backward compatibility
+        // TODO V4 (KIT-5306): remove string handling
+        let fields = [];
+        if (Array.isArray(this.fieldsToIncludeInCitations)) {
+            fields = this.fieldsToIncludeInCitations;
+        }
+        else if (typeof this.fieldsToIncludeInCitations === 'string') {
+            fields = this.fieldsToIncludeInCitations
+                .split(',')
+                .map((f) => f.trim())
+                .filter((f) => f.length > 0);
+        }
+        return fields.concat(this.REQUIRED_FIELDS_TO_INCLUDE_IN_CITATIONS);
+    }
+    validateMaxCollapsedHeight() {
+        const isValid = this.maxCollapsedHeight >= this.MIN_COLLAPSED_HEIGHT &&
+            this.maxCollapsedHeight <= this.MAX_COLLAPSED_HEIGHT;
+        if (!isValid) {
+            console.warn(`max-collapsed-height (${this.maxCollapsedHeight}rem) is out of the valid range (${this.MIN_COLLAPSED_HEIGHT}rem - ${this.MAX_COLLAPSED_HEIGHT}rem). Falling back to default value (${this.DEFAULT_COLLAPSED_HEIGHT}rem).`);
+        }
+        return isValid ? this.maxCollapsedHeight : this.DEFAULT_COLLAPSED_HEIGHT;
+    }
+    toggleClass(element, className, condition) {
+        element.classList.toggle(className, condition);
+    }
+    adaptAnswerHeight() {
+        const answerHeight = this.shadowRoot
+            ?.querySelector('[part="generated-text"]')
+            ?.getBoundingClientRect().height;
+        if (answerHeight) {
+            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+            this.fullAnswerHeight = answerHeight / rootFontSize;
+            this.updateAnswerHeight();
+        }
+    }
+    getAnswerContainer() {
+        return this.shadowRoot?.querySelector('[part="generated-container"]');
+    }
+    getAnswerFooter() {
+        return this.shadowRoot?.querySelector('[part="generated-answer-footer"]');
+    }
+    setCSSVariable(variableName, value) {
+        const container = this.getAnswerContainer();
+        if (container) {
+            container.style.setProperty(variableName, value);
+        }
+    }
+    updateAnswerHeight() {
+        const container = this.getAnswerContainer();
+        const footer = this.getAnswerFooter();
+        const maxHeight = this.validateMaxCollapsedHeight();
+        if (!container || !footer) {
+            return;
+        }
+        if (this.fullAnswerHeight > maxHeight) {
+            this.setCSSVariable('--atomic-crga-collapsed-height', `${maxHeight}rem`);
+            this.toggleClass(container, 'answer-collapsed', !this.generatedAnswerState.expanded);
+            this.toggleClass(footer, 'is-collapsible', true);
+            this.toggleClass(footer, 'generating-label-visible', this.generatedAnswerState.isStreaming);
+        }
+        else {
+            this.toggleClass(container, 'answer-collapsed', false);
+            this.toggleClass(footer, 'is-collapsible', false);
+            this.toggleClass(footer, 'generating-label-visible', false);
+        }
+    }
+    clickDislike() {
+        this.controller.clickDislike();
+    }
+    clickLike() {
+        this.controller.clickLike();
+    }
+    renderCitationsList() {
+        const { citations } = this.generatedAnswerState ?? {};
+        return renderCitations({
+            props: {
+                citations,
+                i18n: this.bindings.i18n,
+                buildInteractiveCitation: (citation) => buildInsightInteractiveCitation(this.bindings.engine, {
+                    options: { citation },
+                }),
+                logCitationHover: (citationId, citationHoverTimeMs) => {
+                    this.generatedAnswer?.logCitationHover(citationId, citationHoverTimeMs);
+                },
+                disableCitationAnchoring: this.disableCitationAnchoring,
+            },
+        });
+    }
+    renderFeedbackAndCopyButtonsWrapper() {
+        return renderFeedbackAndCopyButtons({
+            props: {
+                i18n: this.bindings.i18n,
+                generatedAnswerActionsState: {
+                    liked: this.generatedAnswerState.liked,
+                    disliked: this.generatedAnswerState.disliked,
+                    isStreaming: this.generatedAnswerState.isStreaming,
+                    isLoading: this.generatedAnswerState.isLoading,
+                    answer: this.generatedAnswerState.answer,
+                },
+                copied: this.copied,
+                copyError: this.copyError,
+                getCopyToClipboardTooltip: () => this.copyToClipboardTooltip,
+                onClickLike: () => this.clickLike(),
+                onClickDislike: () => this.clickDislike(),
+                onCopyToClipboard: (answer) => this.copyToClipboard(answer),
+            },
+        });
+    }
+    renderContent() {
+        const generatedAnswer = {
+            ...this.generatedAnswerState,
+            question: this.bindings.engine.state.query?.q ?? '',
+        };
+        return renderAnswerContent({
+            props: {
+                i18n: this.bindings.i18n,
+                generatedAnswer: generatedAnswer,
+                collapsible: this.collapsible,
+                renderFeedbackAndCopyButtonsSlot: () => this.renderFeedbackAndCopyButtonsWrapper(),
+                renderCitationsSlot: () => html `${this.renderCitationsList()}`,
+                onRetry: () => this.generatedAnswer?.retry(),
+                onClickShowButton: () => this.clickOnShowButton(),
+            },
+        });
+    }
+    renderCardHeaderWrapper() {
+        return renderCardHeader({
+            props: {
+                i18n: this.bindings.i18n,
+                isAnswerVisible: this.isAnswerVisible,
+                toggleTooltip: this.toggleTooltip,
+                withToggle: this.withToggle,
+                onToggle: (checked) => {
+                    checked ? this.generatedAnswer?.show() : this.generatedAnswer?.hide();
+                },
+            },
+        });
+    }
+};
+AtomicInsightGeneratedAnswer.styles = [atomicInsightGeneratedAnswerStyles];
+AtomicInsightGeneratedAnswer.propsSchema = new Schema({
+    maxCollapsedHeight: new NumberValue({
+        min: 9,
+        max: 32,
+        required: false,
+    }),
+});
+// TODO V4 (KIT-5306): Remove converter and use arrayConverter directly.
+AtomicInsightGeneratedAnswer.fieldsToIncludeInCitationsConverter = createLegacyArrayStringConverter((value) => {
+    console.warn(`Starting from Atomic v4, the "fields-to-include-in-citations" property will only accept an array of strings. Using a comma-separated string value ("${value}") is now deprecated. Please update the value to be a JSON array. For example: fields-to-include-in-citations='["fieldA","fieldB"]'`);
+});
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'with-toggle',
+        converter: booleanConverter,
+    })
+], AtomicInsightGeneratedAnswer.prototype, "withToggle", void 0);
+__decorate([
+    property({ type: Boolean, converter: booleanConverter })
+], AtomicInsightGeneratedAnswer.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-collapsed-height' })
+], AtomicInsightGeneratedAnswer.prototype, "maxCollapsedHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'answer-configuration-id' })
+], AtomicInsightGeneratedAnswer.prototype, "answerConfigurationId", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: 'fields-to-include-in-citations',
+        converter: AtomicInsightGeneratedAnswer.fieldsToIncludeInCitationsConverter,
+    })
+], AtomicInsightGeneratedAnswer.prototype, "fieldsToIncludeInCitations", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        attribute: 'disable-citation-anchoring',
+        converter: booleanConverter,
+    })
+], AtomicInsightGeneratedAnswer.prototype, "disableCitationAnchoring", void 0);
+__decorate([
+    state()
+], AtomicInsightGeneratedAnswer.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightGeneratedAnswer.prototype, "error", void 0);
+__decorate([
+    bindStateToController('generatedAnswer', {
+        onUpdateCallbackMethod: 'onGeneratedAnswerStateUpdate',
+    }),
+    state()
+], AtomicInsightGeneratedAnswer.prototype, "generatedAnswerState", void 0);
+__decorate([
+    bindStateToController('searchStatus'),
+    state()
+], AtomicInsightGeneratedAnswer.prototype, "searchStatusState", void 0);
+__decorate([
+    state()
+], AtomicInsightGeneratedAnswer.prototype, "copied", void 0);
+__decorate([
+    state()
+], AtomicInsightGeneratedAnswer.prototype, "copyError", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicInsightGeneratedAnswer.prototype, "render", null);
+AtomicInsightGeneratedAnswer = AtomicInsightGeneratedAnswer_1 = __decorate([
+    customElement('atomic-insight-generated-answer'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightGeneratedAnswer);
+export { AtomicInsightGeneratedAnswer };

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

@@ -0,0 +1,2 @@
+import generatedAnswer from '../../common/generated-answer/styles/generated-answer.tw.css';
+export default generatedAnswer;

package/dist/atomic/components/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.js

@@ -0,0 +1,122 @@
+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 { buildAttachedResults, } from '@coveo/headless/insight';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { renderIconButton } from "../../common/icon-button";
+import { ItemContextController } from "../../common/item-list/context/item-context-controller";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { LightDomMixin } from "../../../mixins/light-dom";
+const AttachIcon = "<svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.8125 18.3125C9.1125 18.6125 9.5625 18.5625 9.8625 18.3125L14.8625 13.3125C15.2125 12.9625 15.8125 12.9125 16.2625 13.3125C16.7125 13.7125 16.6625 14.4125 16.2625 14.8125L10.1125 20.8625C8.7625 22.2125 6.5125 22.2125 5.1625 20.8625L5.1125 20.8125C3.7625 19.4625 3.7625 17.2125 5.1125 15.8625L15.9625 5.0125C17.3125 3.6625 19.5625 3.6625 20.9125 5.0125L20.9625 5.0625C22.3125 6.4125 22.3125 8.6625 20.9625 10.0125L20.9125 10.0625C20.6625 10.3125 20.6125 10.6625 20.8125 10.9625C21.1125 11.5125 21.3625 12.1125 21.5125 12.7125C21.6125 13.1125 22.0625 13.2125 22.3625 12.9625C22.7625 12.5625 23.1125 12.1625 23.1125 12.1625C25.6625 9.6125 25.6625 5.4625 23.1125 2.9125H23.0125C20.4625 0.3625 16.3125 0.3625 13.7625 2.9125L2.9125 13.7125C0.3625 16.2625 0.3625 20.4125 2.9125 22.9625L3.0125 23.0625C5.5625 25.6125 9.6625 25.6125 12.2125 23.0625L18.4125 16.9125C20.0125 15.3125 19.9625 12.7125 18.3125 11.1125C16.7125 9.5625 14.1125 9.6625 12.5625 11.2625L7.6625 16.1625C7.3625 16.4625 7.3625 16.9625 7.6625 17.2625L8.8125 18.3125Z\"/>\n</svg>\n";
+const DetachIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26px\" height=\"26px\" viewBox=\"0 0 26 26\" version=\"1.1\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M 8.300781 16.898438 C 8.566406 17.148438 8.980469 17.148438 9.25 16.898438 L 13.851562 12.300781 C 14.214844 11.957031 14.785156 11.957031 15.148438 12.300781 C 15.53125 12.6875 15.53125 13.3125 15.148438 13.699219 L 9.449219 19.25 C 8.191406 20.457031 6.207031 20.457031 4.949219 19.25 L 4.898438 19.25 C 4.289062 18.640625 3.945312 17.8125 3.945312 16.949219 C 3.945312 16.085938 4.289062 15.257812 4.898438 14.648438 L 14.898438 4.648438 C 16.15625 3.445312 18.140625 3.445312 19.398438 4.648438 L 19.5 4.75 C 20.707031 6.007812 20.707031 7.992188 19.5 9.25 L 19.449219 9.351562 C 19.234375 9.5625 19.195312 9.890625 19.351562 10.148438 C 19.632812 10.65625 19.847656 11.191406 20 11.75 C 20.050781 11.894531 20.167969 12.011719 20.3125 12.058594 C 20.460938 12.109375 20.621094 12.085938 20.75 12 C 21.148438 11.648438 21.449219 11.25 21.449219 11.25 C 22.578125 10.125 23.214844 8.59375 23.214844 7 C 23.214844 5.40625 22.578125 3.875 21.449219 2.75 L 21.351562 2.75 C 20.222656 1.621094 18.695312 0.984375 17.101562 0.984375 C 15.503906 0.984375 13.976562 1.621094 12.851562 2.75 L 2.851562 12.699219 C 1.71875 13.824219 1.085938 15.355469 1.085938 16.949219 C 1.085938 18.542969 1.71875 20.074219 2.851562 21.199219 L 2.949219 21.300781 C 5.289062 23.621094 9.0625 23.621094 11.398438 21.300781 L 17.101562 15.648438 C 18.078125 14.695312 18.457031 13.285156 18.089844 11.964844 C 17.726562 10.648438 16.671875 9.636719 15.34375 9.320312 C 14.015625 9.003906 12.617188 9.4375 11.699219 10.449219 L 7.199219 14.949219 C 7.066406 15.082031 6.988281 15.261719 6.988281 15.449219 C 6.988281 15.636719 7.066406 15.816406 7.199219 15.949219 Z M 22.648438 20.800781 L 24.75 18.699219 C 24.839844 18.613281 24.890625 18.496094 24.890625 18.375 C 24.890625 18.253906 24.839844 18.136719 24.75 18.050781 L 23.5 16.75 C 23.414062 16.660156 23.296875 16.609375 23.175781 16.609375 C 23.050781 16.609375 22.933594 16.660156 22.851562 16.75 L 20.800781 19 L 18.800781 17 C 18.714844 16.910156 18.597656 16.859375 18.476562 16.859375 C 18.351562 16.859375 18.234375 16.910156 18.148438 17 L 16.898438 18.25 C 16.738281 18.4375 16.738281 18.710938 16.898438 18.898438 L 18.898438 20.898438 L 16.898438 22.800781 C 16.8125 22.886719 16.761719 23.003906 16.761719 23.125 C 16.761719 23.246094 16.8125 23.363281 16.898438 23.449219 L 18.25 24.75 C 18.335938 24.839844 18.453125 24.890625 18.574219 24.890625 C 18.699219 24.890625 18.816406 24.839844 18.898438 24.75 L 20.800781 22.800781 L 22.851562 24.898438 C 22.933594 24.988281 23.050781 25.039062 23.175781 25.039062 C 23.296875 25.039062 23.414062 24.988281 23.5 24.898438 L 24.800781 23.601562 C 24.886719 23.515625 24.9375 23.398438 24.9375 23.273438 C 24.9375 23.152344 24.886719 23.035156 24.800781 22.949219 Z M 22.648438 20.800781 \"/>\n</svg>\n";
+/**
+ * The `atomic-insight-result-attach-to-case-action` component can be nested
+ * inside a `atomic-insight-result-actions` to render an interactive button
+ * that will emit an `atomic/insight/attachToCase/attach` or
+ * `atomic/insight/attachToCase/detach` JavaScript event, based on its current
+ * state, when clicked.
+ *
+ * @part result-action-container - The result action container
+ * @part result-action-button - The result action button
+ * @part result-action-icon - The result action icon
+ */
+let AtomicInsightResultAttachToCaseAction = class AtomicInsightResultAttachToCaseAction extends LightDomMixin(LitElement) {
+    constructor() {
+        super();
+        this.itemContextController = new ItemContextController(this, {
+            parentName: 'atomic-insight-result',
+            folded: false,
+        });
+    }
+    get result() {
+        return this.itemContextController.item;
+    }
+    initialize() {
+        const caseId = this.bindings.engine.state.insightCaseContext?.caseId || '';
+        this.attachedResults = buildAttachedResults(this.bindings.engine, {
+            options: {
+                caseId: caseId,
+            },
+        });
+    }
+    onClick() {
+        if (!this.result) {
+            return;
+        }
+        if (this.attachedResults.isAttached(this.result)) {
+            this.dispatchEvent(new CustomEvent('atomic/insight/attachToCase/detach', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+                detail: {
+                    callback: () => this.attachedResults.detach(this.result),
+                    result: this.result,
+                },
+            }));
+        }
+        else {
+            this.dispatchEvent(new CustomEvent('atomic/insight/attachToCase/attach', {
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+                detail: {
+                    callback: () => this.attachedResults.attach(this.result),
+                    result: this.result,
+                },
+            }));
+        }
+    }
+    getIcon() {
+        return this.result && this.attachedResults?.isAttached(this.result)
+            ? DetachIcon
+            : AttachIcon;
+    }
+    getTooltip() {
+        return this.result && this.attachedResults?.isAttached(this.result)
+            ? this.bindings.i18n.t('detach-from-case')
+            : this.bindings.i18n.t('attach-to-case');
+    }
+    render() {
+        if (!this.result || !this.attachedResults) {
+            return html ``;
+        }
+        return renderIconButton({
+            props: {
+                partPrefix: 'result-action',
+                style: 'outline-neutral',
+                icon: this.getIcon(),
+                ariaLabel: this.getTooltip(),
+                title: this.getTooltip(),
+                onClick: () => this.onClick(),
+            },
+        });
+    }
+};
+__decorate([
+    state()
+], AtomicInsightResultAttachToCaseAction.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightResultAttachToCaseAction.prototype, "error", void 0);
+__decorate([
+    bindStateToController('attachedResults'),
+    state()
+    // @ts-ignore - Binds headless state to trigger Lit re-renders.
+    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Binds headless state to trigger Lit re-renders.
+], AtomicInsightResultAttachToCaseAction.prototype, "attachedResultsState", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightResultAttachToCaseAction.prototype, "render", null);
+AtomicInsightResultAttachToCaseAction = __decorate([
+    customElement('atomic-insight-result-attach-to-case-action'),
+    bindings()
+], AtomicInsightResultAttachToCaseAction);
+export { AtomicInsightResultAttachToCaseAction };