@coveo/atomic 3.60.1 → 3.60.3

package/dist/esm/components/common/atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.js

@@ -135,9 +135,7 @@ class AtomicGeneratedAnswerFeedbackModal extends LitElement {
             ${this.bindings.i18n.t(label)}
             <span class=${multiClassMap({
             'text-error-red ml-0.5': true
-        })}
-              >*</span
-            >
+        })}>*</span>
           </label>
         </div>
         <span
@@ -177,29 +175,29 @@ class AtomicGeneratedAnswerFeedbackModal extends LitElement {
                     label: this.bindings.i18n.t(localeKey)
                 }
             })(html`
-              <div
-                class=${multiClassMap({
+            <div
+              class=${multiClassMap({
                 'answer-evaluation mt-3 flex items-center': true,
                 [String(correspondingAnswer)]: true
             })}
-                key=${String(correspondingAnswer)}
-              >
-                <div class=${multiClassMap({
+              key=${String(correspondingAnswer)}
+            >
+              <div class=${multiClassMap({
                 'flex-1 pr-4': true
             })}>
-                  ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
-                </div>
-                <div
-                  class=${multiClassMap({
+                ${this.renderAnswerEvaluation(localeKey, correspondingAnswer)}
+              </div>
+              <div
+                class=${multiClassMap({
                 'options flex flex-shrink-0 text-base': true
             })}
-                >
-                  ${this.renderFeedbackOption('yes', correspondingAnswer)}
-                  ${this.renderFeedbackOption('unknown', correspondingAnswer)}
-                  ${this.renderFeedbackOption('no', correspondingAnswer)}
-                </div>
+              >
+                ${this.renderFeedbackOption('yes', correspondingAnswer)}
+                ${this.renderFeedbackOption('unknown', correspondingAnswer)}
+                ${this.renderFeedbackOption('no', correspondingAnswer)}
               </div>
-            `))}
+            </div>
+          `))}
       </fieldset>
     `;
     }
@@ -262,18 +260,12 @@ class AtomicGeneratedAnswerFeedbackModal extends LitElement {
     }
     renderSuccessMessage() {
         return html`
-      <div
-        slot="body"
-        class=${multiClassMap({
+      <div slot="body" class=${multiClassMap({
             'my-4 flex flex-col items-center gap-4': true
-        })}
-      >
-        <atomic-icon
-          icon=${success}
-          class=${multiClassMap({
+        })}>
+        <atomic-icon icon=${success} class=${multiClassMap({
             'w-48': true
-        })}
-        ></atomic-icon>
+        })}></atomic-icon>
         <p
           class=${multiClassMap({
             'text-base': true
@@ -295,19 +287,15 @@ class AtomicGeneratedAnswerFeedbackModal extends LitElement {
         const buttonClasses = 'flex items-center justify-center text-sm leading-4 p-2 rounded-md';
         return html`
       <div slot="footer" part="modal-footer">
-        <div
-          class=${multiClassMap({
+        <div class=${multiClassMap({
             'flex items-center justify-between': true
-        })}
-        >
+        })}>
           <div class=${multiClassMap({
             'required-label text-base': true
         })}>
             <span class=${multiClassMap({
             'text-error-red mr-0.5': true
-        })}
-              >*</span
-            >
+        })}>*</span>
             ${this.bindings.i18n.t('required-fields')}
           </div>
           <div class=${multiClassMap({

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

@@ -42,8 +42,7 @@ class AtomicGeneratedAnswerThread extends LitElement {
             const lastGeneratedAnswer = this.generatedAnswers[this.generatedAnswers.length - 1];
             return html`
         <ul>
-          ${this.renderShowPreviousAnswersButton()}
-          ${this.renderThread([
+          ${this.renderShowPreviousAnswersButton()} ${this.renderThread([
                 lastGeneratedAnswer
             ])}
         </ul>
@@ -90,12 +89,13 @@ class AtomicGeneratedAnswerThread extends LitElement {
         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
+      transition-colors hover:bg-neutral hover:text-primary 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
+      h-2 w-2 rounded-full bg-neutral-dim transition-colors
+      hover:bg-neutral-dark group-has-[button:hover]/title:bg-neutral-dark
     `;
         const timelineConnectorClasses = `
       relative h-full w-px bg-neutral
@@ -105,23 +105,23 @@ class AtomicGeneratedAnswerThread extends LitElement {
       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">
+      <li class="group/title grid min-w-0 grid-cols-[10px_1fr] gap-x-3">
+        <div class="row-span-2 flex flex-col items-center">
+          <div class="flex justify-center items-center text-base h-[1lh] my-1.5">
             <span class=${timelineDotClasses}></span>
           </div>
-          <div class="flex min-w-0 flex-col">
-            <button
-              type="button"
-              class=${showPreviousButtonClasses}
-              @click=${this.handleShowAllClick}
-            >
-              ${label}
-            </button>
+          <div class="flex grow w-full justify-center items-center py-2 -my-2 min-h-3">
+            <span class=${timelineConnectorClasses}> </span>
           </div>
         </div>
-        <div class="flex h-3 w-[10px] shrink-0 justify-center">
-          <span class=${timelineConnectorClasses}> </span>
+        <div class="flex min-w-0 flex-col">
+          <button
+            type="button"
+            class=${showPreviousButtonClasses}
+            @click=${this.handleShowAllClick}
+          >
+            ${label}
+          </button>
         </div>
       </li>
     `;

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

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } 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.js";
@@ -37,11 +37,14 @@ class AtomicGeneratedAnswerThreadItem extends LitElement {
         const titleButtonClasses = classMap({
             ...titleBaseClasses,
             ...titleWeightClasses,
-            'bg-transparent': true,
+            'bg-transparent': !this.isDotHovered,
+            'bg-neutral': this.isDotHovered,
+            'text-primary': this.isDotHovered,
             'border-0': true,
             'appearance-none': true,
             'transition-colors': true,
-            'hover:bg-neutral-light': true,
+            'hover:bg-neutral': true,
+            'hover:text-primary': true,
             'rounded-md': true,
             'cursor-pointer': true,
             'focus-visible:outline-none': true,
@@ -61,87 +64,85 @@ class AtomicGeneratedAnswerThreadItem extends LitElement {
             'bg-neutral-dark': this.isExpanded,
             'bg-neutral-dim': !this.isExpanded,
             'cursor-pointer': isTimelineDotInteractive,
-            'group-hover:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive
+            'hover:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive,
+            'group-has-[button:hover]/title:bg-neutral-dark': !this.isExpanded && isTimelineDotInteractive
         });
         const timelineDotToggleClasses = classMap({
             flex: true,
-            'w-[10px]': true,
-            'shrink-0': true,
             'justify-center': true,
-            'items-center': true
+            'items-center': true,
+            'text-base': true,
+            'h-[1lh] my-1.5': true
         });
         const timelineLineToggleClasses = classMap({
             flex: true,
-            'w-[10px]': true,
-            'shrink-0': true,
+            grow: true,
+            'w-full': true,
             'justify-center': true,
             'items-center': true,
             group: isTimelineLineInteractive,
             'cursor-pointer': isTimelineLineInteractive,
             'py-2': true,
-            '-my-2': true
-        });
-        const timelineBodyRowClasses = classMap({
-            flex: true,
-            'min-w-0': true,
-            'gap-3': true,
+            '-my-2': true,
             'min-h-3': !this.isExpanded
         });
         const timelineConnectorClasses = "relative h-full w-px bg-neutral transition-colors duration-150 group-hover:bg-neutral-dark before:absolute before:left-0 before:top-[-8px] before:h-[8px] before:w-px before:bg-neutral before:transition-colors before:duration-150 group-hover:before:bg-neutral-dark before:content-[''] after:absolute after:bottom-[-8px] after:left-0 after:h-[8px] after:w-px after:bg-neutral after:transition-colors after:duration-150 group-hover:after:bg-neutral-dark after:content-['']";
         return html`
-      <div class="grid min-w-0">
-        <div class="flex min-w-0 items-center gap-3">
+      <div class="group/title grid min-w-0 grid-cols-[10px_1fr] gap-x-3">
+        <div class="row-span-2 flex flex-col items-center">
           <div class=${timelineDotToggleClasses}>
             ${when(this.showTimelineDot, ()=>html`
                 <span
                   class=${timelineDotClasses}
                   @click=${isTimelineDotInteractive ? this.toggle : null}
+                  @mouseenter=${isTimelineDotInteractive ? this.handleDotMouseEnter : null}
+                  @mouseleave=${isTimelineDotInteractive ? this.handleDotMouseLeave : null}
                 ></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}
-                >
-                  <span part="thread-item-title" style=${clampedTitleStyles}
-                    >${this.title}</span
-                  >
-                </button>`, ()=>html`<span
-                  class=${titleTextClasses}
-                  part="thread-item-title"
-                  style=${clampedTitleStyles}
-                  >${this.title}</span
-                >`)}
-          </div>
-        </div>
-        <div class=${timelineBodyRowClasses}>
           <div
             class=${timelineLineToggleClasses}
             @click=${isTimelineLineInteractive ? this.toggle : null}
           >
             ${when(this.hideLine, ()=>html``, ()=>html`<span class=${timelineConnectorClasses}> </span>`)}
           </div>
-          <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
-            <div
-              class="mb-2"
-              ?hidden=${!this.isExpanded}
-              aria-hidden=${this.isExpanded ? 'false' : 'true'}
-            >
-              <slot></slot>
-            </div>
+        </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}
+              >
+                <span part="thread-item-title" style=${clampedTitleStyles}>${this.title}</span>
+              </button>`, ()=>html`<span
+                class=${titleTextClasses}
+                part="thread-item-title"
+                style=${clampedTitleStyles}
+                >${this.title}</span
+              >`)}
+        </div>
+        <div id=${this.contentId} class="min-w-0 pl-2 py-1.5">
+          <div
+            class="mb-2"
+            ?hidden=${!this.isExpanded}
+            aria-hidden=${this.isExpanded ? 'false' : 'true'}
+          >
+            <slot></slot>
           </div>
         </div>
       </div>
     `;
     }
     constructor(...args){
-        super(...args), this.contentId = `atomic-generated-answer-thread-item-content-${crypto.randomUUID()}`, this.title = '', this.disableCollapse = false, this.hideLine = false, this.isExpanded = false, this.showTimelineDot = true, this.toggle = ()=>{
+        super(...args), this.contentId = `atomic-generated-answer-thread-item-content-${crypto.randomUUID()}`, this.title = '', this.disableCollapse = false, this.hideLine = false, this.isExpanded = false, this.showTimelineDot = true, this.isDotHovered = false, this.toggle = ()=>{
             if (this.disableCollapse) return;
             this.isExpanded = !this.isExpanded;
+        }, this.handleDotMouseEnter = ()=>{
+            this.isDotHovered = true;
+        }, this.handleDotMouseLeave = ()=>{
+            this.isDotHovered = false;
         };
     }
 }
@@ -174,6 +175,9 @@ _ts_decorate([
         attribute: 'show-timeline-dot'
     })
 ], AtomicGeneratedAnswerThreadItem.prototype, "showTimelineDot", void 0);
+_ts_decorate([
+    state()
+], AtomicGeneratedAnswerThreadItem.prototype, "isDotHovered", void 0);
 AtomicGeneratedAnswerThreadItem = _ts_decorate([
     customElement('atomic-generated-answer-thread-item'),
     withTailwindStyles

package/dist/esm/components/common/atomic-rating/rating.js

@@ -42,12 +42,9 @@ const renderRating = ({ props })=>{
     })}
   >
     <div class="z-0 flex gap-0.5">${emptyIconDisplay()}</div>
-    <div
-      class="absolute top-0 left-0 z-1 flex gap-0.5 overflow-hidden"
-      style=${styleMap({
+    <div class="absolute top-0 left-0 z-1 flex gap-0.5 overflow-hidden" style=${styleMap({
         width
-    })}
-    >
+    })}>
       ${filledIconDisplay()}
     </div>
   </div>`;

package/dist/esm/components/common/atomic-result-placeholder/atomic-result-placeholder.js

@@ -22,10 +22,7 @@ class AtomicResultPlaceholder extends LitElement {
     renderExcerptLine(width) {
         return html`
       <div style="height: var(--line-height); width: ${width};">
-        <div
-          class=${placeholderClasses}
-          style="height: var(--font-size);"
-        ></div>
+        <div class=${placeholderClasses} style="height: var(--font-size);"></div>
       </div>
     `;
     }
@@ -59,11 +56,7 @@ class AtomicResultPlaceholder extends LitElement {
           <div class="fields-placeholder">
             ${Array.from({
             length: 4
-        }, ()=>html`
-                <div
-                  class="field-value-placeholder ${placeholderClasses}"
-                ></div>
-              `)}
+        }, ()=>html` <div class="field-value-placeholder ${placeholderClasses}"></div> `)}
           </div>
         </atomic-result-section-bottom-metadata>
       </div>

package/dist/esm/components/common/atomic-smart-snippet-collapse-wrapper/atomic-smart-snippet-collapse-wrapper.js

@@ -83,8 +83,7 @@ class AtomicSmartSnippetCollapseWrapper extends InitializeBindingsMixin(LitEleme
     }
 }
 AtomicSmartSnippetCollapseWrapper.styles = css`:host{display:block}:host(.invisible){visibility:hidden}.smart-snippet-content{height:auto;max-height:var(--collapsed-size);transition:max-height 2s cubic-bezier(0,1,.16,1) -1.82s;--gradient-start:var(
-        --atomic-smart-snippet-gradient-start,calc(max(var(--collapsed-size) - (var(--line-height) * 1.5),
-            var(--collapsed-size) * 0.5))
+        --atomic-smart-snippet-gradient-start,calc(max(var(--collapsed-size) - (var(--line-height) * 1.5), var(--collapsed-size) * 0.5))
       );mask-image:linear-gradient(#000,#000 var(--gradient-start),transparent 100%)}:host(.expanded) .smart-snippet-content{height:auto;mask-image:none;max-height:9999999px;transition:max-height 2s cubic-bezier(1,0,1,0) 0s}:host(.expanded) button atomic-icon{transform:scaleY(-1)}`;
 _ts_decorate([
     state(),

package/dist/esm/components/common/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.js

@@ -99,10 +99,7 @@ class AtomicSmartSnippetExpandableAnswer extends LitElement {
           aria-expanded=${this.isExpanded ? 'true' : 'false'}
         >
           ${this.bindings.i18n.t(this.isExpanded ? 'show-less' : 'show-more')}
-          <atomic-icon
-            .icon=${arrow_down}
-            class="ml-2 w-3 align-baseline"
-          ></atomic-icon>
+          <atomic-icon .icon=${arrow_down} class="ml-2 w-3 align-baseline"></atomic-icon>
         </button>
       `);
     }

package/dist/esm/components/common/atomic-smart-snippet-source/atomic-smart-snippet-source.js

@@ -67,10 +67,7 @@ class AtomicSmartSnippetSource extends LightDomMixin(LitElement) {
                     onBeginDelayedSelect: ()=>this.handleSourceEvent('begin-delayed-select-source'),
                     onCancelPendingSelect: ()=>this.handleSourceEvent('cancel-pending-select-source')
                 }
-            })(html`<atomic-result-text
-            field="title"
-            default="no-title"
-          ></atomic-result-text>`)}
+            })(html`<atomic-result-text field="title" default="no-title"></atomic-result-text>`)}
       `)}`;
     }
     constructor(...args){

package/dist/esm/components/common/atomic-tab-button/atomic-tab-button.js

@@ -63,10 +63,7 @@ class AtomicTabButton extends LightDomMixin(LitElement) {
             'sm:px-6'
         ].filter(Boolean).join(' ');
         return html`
-      <span
-        class=${buttonClasses}
-        part=${this.active ? 'tab-button-active' : 'tab-button'}
-      >
+      <span class=${buttonClasses} part=${this.active ? 'tab-button-active' : 'tab-button'}>
         ${this.label}
       </span>
     `;

package/dist/esm/components/common/atomic-tab-popover/atomic-tab-popover.js

@@ -158,9 +158,7 @@ class AtomicTabPopover extends LitElement {
     render() {
         this.classList.toggle('visibility-hidden', !this.show);
         this.ariaHidden = String(!this.show);
-        return html`
-      ${this.renderPopover()} ${when(this.isOpen, ()=>this.renderBackdrop())}
-    `;
+        return html` ${this.renderPopover()} ${when(this.isOpen, ()=>this.renderBackdrop())} `;
     }
     constructor(...args){
         super(...args), this.show = false, this.isOpen = false, this.buttonRef = createRef(), this.popupRef = createRef(), this.popoverId = 'atomic-tab-popover', this.handleKeyDown = (e)=>{

package/dist/esm/components/common/breadbox/breadcrumb-content.js

@@ -34,11 +34,7 @@ const renderBreadcrumbContent = ({ props })=>{
     <span part="breadcrumb-value" class=${multiClassMap(valueClass)}>
       ${props.breadcrumb.content ?? value}
     </span>
-    <atomic-icon
-      part="breadcrumb-clear"
-      class="mt-px ml-2 h-2.5 w-2.5"
-      icon=${images_close}
-    >
+    <atomic-icon part="breadcrumb-clear" class="mt-px ml-2 h-2.5 w-2.5" icon=${images_close}>
     </atomic-icon>`;
 };
 export { renderBreadcrumbContent };

package/dist/esm/components/common/button.js

@@ -29,8 +29,7 @@ const renderButton = ({ props })=>(children)=>{
       ?disabled=${props.disabled}
       ${props.ref ? ref(props.ref) : nothing}
     >
-      ${when(props.text, ()=>html`<span class="truncate">${props.text}</span>`)}
-      ${children}
+      ${when(props.text, ()=>html`<span class="truncate">${props.text}</span>`)} ${children}
     </button>`;
     };
 export { renderButton };

package/dist/esm/components/common/carousel.js

@@ -73,9 +73,7 @@ const renderCarousel = ({ props })=>(children)=>{
             ${renderPreviousButton(numberOfPages, previousPage, props.bindings)}
             ${renderNextButton(numberOfPages, nextPage, props.bindings)}
           </div>
-          <div class="carousel-items" aria-live="polite" aria-atomic="false">
-            ${children}
-          </div>
+          <div class="carousel-items" aria-live="polite" aria-atomic="false">${children}</div>
         </div>
         ${renderIndicators(numberOfPages, currentPage)}
       </div>

package/dist/esm/components/common/expandable-text/expandable-text.js

@@ -30,11 +30,7 @@ const renderExpandableText = ({ props: { isExpanded, isTruncated, isCollapsible,
         const buttonLabel = isExpanded ? showLessLabel : showMoreLabel;
         const icon = isExpanded ? minus : plus;
         return html`<div class="flex flex-col items-start">
-      <div
-        part="expandable-text"
-        class="${multiClassMap(expandableTextClasses)}"
-        ${ref(textRef)}
-      >
+      <div part="expandable-text" class="${multiClassMap(expandableTextClasses)}" ${ref(textRef)}>
         ${children}
       </div>
 
@@ -48,10 +44,7 @@ const renderExpandableText = ({ props: { isExpanded, isTruncated, isCollapsible,
                 },
                 onClick: onToggleExpand
             }
-        })(html` <atomic-icon
-            icon="${icon}"
-            class="mx-1 w-2 align-baseline"
-          ></atomic-icon>
+        })(html` <atomic-icon icon="${icon}" class="mx-1 w-2 align-baseline"></atomic-icon>
           ${buttonLabel}`)}
     </div>`;
     };

package/dist/esm/components/common/facets/category-facet/all-categories-button.js

@@ -16,11 +16,7 @@ const renderCategoryFacetAllCategoryButton = ({ props: { i18n, onClick, facetId,
             part: 'all-categories-button',
             onClick: onClick
         }
-    })(html`<atomic-icon
-          aria-hidden="true"
-          icon=${arrow_left_rounded}
-          part="back-arrow"
-        ></atomic-icon>
+    })(html`<atomic-icon aria-hidden="true" icon=${arrow_left_rounded} part="back-arrow"></atomic-icon>
         <span class="truncate">${allCategories}</span>`)}
   `;
 };

package/dist/esm/components/common/facets/category-facet/parent-button.js

@@ -21,11 +21,7 @@ const renderCategoryFacetParentButton = ({ props })=>{
             ariaLabel: ariaLabel
         }
     })(html`
-    <atomic-icon
-      icon=${arrow_left_rounded}
-      part="back-arrow"
-      class="back-arrow"
-    ></atomic-icon>
+    <atomic-icon icon=${arrow_left_rounded} part="back-arrow" class="back-arrow"></atomic-icon>
     <span class="truncate">${displayValue}</span>
   `);
 };

package/dist/esm/components/common/facets/category-facet/search-value.js

@@ -59,9 +59,7 @@ const renderCategoryFacetSearchValue = ({ props })=>{
         path: localizedPath,
         separator: SEPARATOR,
         maxLength: PATH_MAX_LENGTH,
-        emptyPathContent: html`<span class="truncate">
-            ${inLabel} ${allCategories}
-          </span>`,
+        emptyPathContent: html`<span class="truncate"> ${inLabel} ${allCategories} </span>`,
         separatorClass: 'mx-0.5',
         itemClass: 'max-w-max flex-1 truncate',
         ellipsisClass: ''

package/dist/esm/components/common/facets/facet-container/facet-container.js

@@ -1,10 +1,5 @@
 import { html } from "lit";
 const renderFacetContainer = ()=>(children)=>html`
-      <div
-        class="bg-background border-neutral rounded-lg border p-4"
-        part="facet"
-      >
-        ${children}
-      </div>
-    `;
+    <div class="bg-background border-neutral rounded-lg border p-4" part="facet">${children}</div>
+  `;
 export { renderFacetContainer };

package/dist/esm/components/common/facets/facet-placeholder/facet-placeholder.js

@@ -2,10 +2,7 @@ import { html } from "lit";
 import { when } from "lit/directives/when.js";
 const renderFacetPlaceholder = ({ props })=>{
     const facetValues = [];
-    for(let i = 0; i < props.numberOfValues; i++)facetValues.push(html`<div
-        class="bg-neutral mt-4 flex h-5"
-        style="width: 100%; opacity: 0.5"
-      ></div>`);
+    for(let i = 0; i < props.numberOfValues; i++)facetValues.push(html`<div class="bg-neutral mt-4 flex h-5" style="width: 100%; opacity: 0.5"></div>`);
     return html`<div
     part="placeholder"
     class="bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7"

package/dist/esm/components/common/facets/facet-search/facet-search-input.js

@@ -41,10 +41,7 @@ const renderFacetSearchInput = ({ props })=>{
                     inputRef.value?.focus();
                 }
             }
-        })(html`<atomic-icon
-              part="search-clear-button"
-              .icon=${images_close}
-            ></atomic-icon>`))}
+        })(html`<atomic-icon part="search-clear-button" .icon=${images_close}></atomic-icon>`))}
       </div>
     </div>
   `;

package/dist/esm/components/common/generated-answer/generated-answer-controller.js

@@ -1,5 +1,6 @@
 import { SafeStorage, StorageItems } from "../../../utils/local-storage-utils.js";
 import "../atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.js";
+import { markdownToPlainText } from "./generated-content/markdown-utils.js";
 class GeneratedAnswerController {
     hostConnected() {}
     get data() {
@@ -34,14 +35,23 @@ class GeneratedAnswerController {
         const isGenerating = !!state.isStreaming;
         const hasNonEmptyAnswer = !!state.answer?.trim();
         const hasError = !!state.error?.message;
+        const cannotAnswer = !!state.cannotAnswer;
         if (isHidden) return bindings.i18n.t('generated-answer-hidden');
         if (isGenerating) return bindings.i18n.t('generating-answer');
-        if (hasError) return bindings.i18n.t('answer-could-not-be-generated');
+        if (hasError || cannotAnswer) return bindings.i18n.t('answer-could-not-be-generated');
         if (hasNonEmptyAnswer) return bindings.i18n.t('answer-generated', {
-            answer: state.answer
+            answer: markdownToPlainText(state.answer)
         });
         return '';
     }
+    isStatusAssertive() {
+        const state = this.options.getGeneratedAnswerState();
+        if (!state) return false;
+        const isHidden = !state.isVisible;
+        const isGenerating = !!state.isStreaming;
+        const hasError = !!state.error?.message;
+        return !isHidden && !isGenerating && hasError;
+    }
     get hasRetryableError() {
         const searchState = this.options.getSearchStatusState();
         const answerState = this.options.getGeneratedAnswerState();

package/dist/esm/components/common/generated-answer/generated-content/generated-markdown-content.js

@@ -14,10 +14,7 @@ const renderGeneratedMarkdownContent = ({ props })=>{
         }
     });
     return html`
-    <div
-      part="generated-text"
-      class="text-on-background mb-0 ${props.isStreaming ? 'cursor' : ''}"
-    >
+    <div part="generated-text" class="text-on-background mb-0 ${props.isStreaming ? 'cursor' : ''}">
       ${unsafeHTML(answerAsHtml)}
     </div>
   `;