chore(atomic): migrate atomic-insight-history-toggle to Lit

packages/atomic/src/components.d.ts

@@ -180,10 +180,6 @@ export namespace Components {
          */
         "withToggle"?: boolean;
     }
-    interface AtomicInsightHistoryToggle {
-        "clickCallback": () => void;
-        "tooltip": string;
-    }
     interface AtomicInsightNumericFacet {
         /**
           * The required facets and values for this facet to be displayed. Examples: ```html <atomic-insight-facet facet-id="abc" field="objecttype" ...></atomic-insight-facet>  <!-- To show the facet when any value is selected in the facet with id "abc": --> <atomic-insight-numeric-facet   depends-on-abc   ... ></atomic-insight-numeric-facet>  <!-- To show the facet when value "doc" is selected in the facet with id "abc": --> <atomic-insight-numeric-facet   depends-on-abc="doc"   ... ></atomic-insight-numeric-facet> ```
@@ -925,12 +921,6 @@ declare global {
         prototype: HTMLAtomicInsightGeneratedAnswerElement;
         new (): HTMLAtomicInsightGeneratedAnswerElement;
     };
-    interface HTMLAtomicInsightHistoryToggleElement extends Components.AtomicInsightHistoryToggle, HTMLStencilElement {
-    }
-    var HTMLAtomicInsightHistoryToggleElement: {
-        prototype: HTMLAtomicInsightHistoryToggleElement;
-        new (): HTMLAtomicInsightHistoryToggleElement;
-    };
     interface HTMLAtomicInsightNumericFacetElement extends Components.AtomicInsightNumericFacet, HTMLStencilElement {
     }
     var HTMLAtomicInsightNumericFacetElement: {
@@ -1283,7 +1273,6 @@ declare global {
         "atomic-insight-facet": HTMLAtomicInsightFacetElement;
         "atomic-insight-folded-result-list": HTMLAtomicInsightFoldedResultListElement;
         "atomic-insight-generated-answer": HTMLAtomicInsightGeneratedAnswerElement;
-        "atomic-insight-history-toggle": HTMLAtomicInsightHistoryToggleElement;
         "atomic-insight-numeric-facet": HTMLAtomicInsightNumericFacetElement;
         "atomic-insight-refine-modal": HTMLAtomicInsightRefineModalElement;
         "atomic-insight-refine-toggle": HTMLAtomicInsightRefineToggleElement;
@@ -1467,10 +1456,6 @@ declare namespace LocalJSX {
          */
         "withToggle"?: boolean;
     }
-    interface AtomicInsightHistoryToggle {
-        "clickCallback"?: () => void;
-        "tooltip"?: string;
-    }
     interface AtomicInsightNumericFacet {
         /**
           * The required facets and values for this facet to be displayed. Examples: ```html <atomic-insight-facet facet-id="abc" field="objecttype" ...></atomic-insight-facet>  <!-- To show the facet when any value is selected in the facet with id "abc": --> <atomic-insight-numeric-facet   depends-on-abc   ... ></atomic-insight-numeric-facet>  <!-- To show the facet when value "doc" is selected in the facet with id "abc": --> <atomic-insight-numeric-facet   depends-on-abc="doc"   ... ></atomic-insight-numeric-facet> ```
@@ -2107,7 +2092,6 @@ declare namespace LocalJSX {
         "atomic-insight-facet": AtomicInsightFacet;
         "atomic-insight-folded-result-list": AtomicInsightFoldedResultList;
         "atomic-insight-generated-answer": AtomicInsightGeneratedAnswer;
-        "atomic-insight-history-toggle": AtomicInsightHistoryToggle;
         "atomic-insight-numeric-facet": AtomicInsightNumericFacet;
         "atomic-insight-refine-modal": AtomicInsightRefineModal;
         "atomic-insight-refine-toggle": AtomicInsightRefineToggle;
@@ -2160,7 +2144,6 @@ declare module "@stencil/core" {
             "atomic-insight-facet": LocalJSX.AtomicInsightFacet & JSXBase.HTMLAttributes<HTMLAtomicInsightFacetElement>;
             "atomic-insight-folded-result-list": LocalJSX.AtomicInsightFoldedResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightFoldedResultListElement>;
             "atomic-insight-generated-answer": LocalJSX.AtomicInsightGeneratedAnswer & JSXBase.HTMLAttributes<HTMLAtomicInsightGeneratedAnswerElement>;
-            "atomic-insight-history-toggle": LocalJSX.AtomicInsightHistoryToggle & JSXBase.HTMLAttributes<HTMLAtomicInsightHistoryToggleElement>;
             "atomic-insight-numeric-facet": LocalJSX.AtomicInsightNumericFacet & JSXBase.HTMLAttributes<HTMLAtomicInsightNumericFacetElement>;
             "atomic-insight-refine-modal": LocalJSX.AtomicInsightRefineModal & JSXBase.HTMLAttributes<HTMLAtomicInsightRefineModalElement>;
             "atomic-insight-refine-toggle": LocalJSX.AtomicInsightRefineToggle & JSXBase.HTMLAttributes<HTMLAtomicInsightRefineToggleElement>;

packages/atomic/src/components/insight/atomic-insight-history-toggle/atomic-insight-history-toggle.spec.ts

@@ -0,0 +1,138 @@
+import {html} from 'lit';
+import {describe, expect, it, vi} from 'vitest';
+import {page} from 'vitest/browser';
+import {fixture} from '@/vitest-utils/testing-helpers/fixture';
+import type {AtomicInsightHistoryToggle} from './atomic-insight-history-toggle';
+import './atomic-insight-history-toggle';
+
+describe('atomic-insight-history-toggle', () => {
+  let element: AtomicInsightHistoryToggle;
+
+  const renderComponent = async ({
+    clickCallback = () => {},
+    tooltip = '',
+  }: {
+    clickCallback?: () => void;
+    tooltip?: string;
+  } = {}) => {
+    element = await fixture<AtomicInsightHistoryToggle>(
+      html`<atomic-insight-history-toggle
+        .clickCallback=${clickCallback}
+        .tooltip=${tooltip}
+      ></atomic-insight-history-toggle>`
+    );
+
+    await element.updateComplete;
+
+    return {
+      element,
+      button: page.getByRole('button'),
+      parts: {
+        container: element.shadowRoot?.querySelector(
+          '[part="insight-history-toggle-container"]'
+        ),
+        button: element.shadowRoot?.querySelector(
+          '[part="insight-history-toggle-button"]'
+        ),
+        icon: element.shadowRoot?.querySelector(
+          '[part="insight-history-toggle-icon"]'
+        ),
+      },
+    };
+  };
+
+  describe('rendering', () => {
+    it('should render the history toggle button', async () => {
+      const {button} = await renderComponent();
+      await expect.element(button).toBeInTheDocument();
+    });
+
+    it('should render all shadow parts', async () => {
+      const {parts} = await renderComponent();
+      expect(parts.container).toBeTruthy();
+      expect(parts.button).toBeTruthy();
+      expect(parts.icon).toBeTruthy();
+    });
+
+    it('should have aria-label set to "history"', async () => {
+      const {button} = await renderComponent();
+      await expect.element(button).toHaveAttribute('aria-label', 'history');
+    });
+  });
+
+  describe('tooltip property', () => {
+    it('should have an empty title attribute when tooltip is empty', async () => {
+      const {button} = await renderComponent({tooltip: ''});
+      await expect.element(button).toHaveAttribute('title', '');
+    });
+
+    it('should have a title attribute when tooltip is provided', async () => {
+      const {button} = await renderComponent({
+        tooltip: 'View history',
+      });
+      await expect.element(button).toHaveAttribute('title', 'View history');
+    });
+
+    it('should update title when tooltip changes', async () => {
+      const {element, button} = await renderComponent({
+        tooltip: 'Initial tooltip',
+      });
+
+      await expect.element(button).toHaveAttribute('title', 'Initial tooltip');
+
+      element.tooltip = 'Updated tooltip';
+      await element.updateComplete;
+
+      await expect.element(button).toHaveAttribute('title', 'Updated tooltip');
+    });
+  });
+
+  describe('clickCallback property', () => {
+    it('should call clickCallback when button is clicked', async () => {
+      const clickCallback = vi.fn();
+      const {button} = await renderComponent({clickCallback});
+
+      await button.click();
+
+      expect(clickCallback).toHaveBeenCalledOnce();
+    });
+
+    it('should not throw error when clickCallback is not provided', async () => {
+      const {button} = await renderComponent();
+
+      await expect(button.click()).resolves.not.toThrow();
+    });
+
+    it('should call updated clickCallback after property change', async () => {
+      const firstCallback = vi.fn();
+      const secondCallback = vi.fn();
+
+      const {element, button} = await renderComponent({
+        clickCallback: firstCallback,
+      });
+
+      await button.click();
+      expect(firstCallback).toHaveBeenCalledOnce();
+      expect(secondCallback).not.toHaveBeenCalled();
+
+      element.clickCallback = secondCallback;
+      await element.updateComplete;
+
+      await button.click();
+      expect(firstCallback).toHaveBeenCalledOnce();
+      expect(secondCallback).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should be keyboard accessible', async () => {
+      const {button} = await renderComponent();
+      await expect.element(button).toBeEnabled();
+    });
+
+    it('should have appropriate role', async () => {
+      const {button} = await renderComponent();
+      await expect.element(button).toHaveRole('button');
+    });
+  });
+});

packages/atomic/src/components/insight/atomic-insight-history-toggle/atomic-insight-history-toggle.ts

@@ -0,0 +1,46 @@
+import {LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {renderIconButton} from '@/src/components/common/icon-button';
+import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles';
+import Clockicon from '../../../images/clock.svg';
+
+/**
+ * The `atomic-insight-history-toggle` component displays a button that toggles the visibility of the User Actions history panel.
+ * This is useful for showing an agent the history of actions performed by the user who opened a support case within an insight interface.
+ *
+ * This is an internal component intended for use by Coveo developers only.
+ *
+ * @internal
+ */
+@customElement('atomic-insight-history-toggle')
+@withTailwindStyles
+export class AtomicInsightHistoryToggle extends LitElement {
+  /**
+   * The callback function to execute when the button is clicked.
+   */
+  @property({type: Object}) public clickCallback: () => void = () => {};
+
+  /**
+   * The tooltip text to display on the button.
+   */
+  @property({type: String}) public tooltip = '';
+
+  protected render() {
+    return renderIconButton({
+      props: {
+        partPrefix: 'insight-history-toggle',
+        style: 'outline-neutral',
+        icon: Clockicon,
+        ariaLabel: 'history',
+        onClick: this.clickCallback,
+        title: this.tooltip,
+      },
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'atomic-insight-history-toggle': AtomicInsightHistoryToggle;
+  }
+}

packages/atomic/src/components/insight/index.ts

@@ -2,6 +2,7 @@
 export {AtomicInsightEditToggle} from './atomic-insight-edit-toggle/atomic-insight-edit-toggle.js';
 export {AtomicInsightFullSearchButton} from './atomic-insight-full-search-button/atomic-insight-full-search-button.js';
 export {AtomicInsightGenerateAnswerButton} from './atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.js';
+export {AtomicInsightHistoryToggle} from './atomic-insight-history-toggle/atomic-insight-history-toggle.js';
 export {AtomicInsightInterface} from './atomic-insight-interface/atomic-insight-interface.js';
 export {AtomicInsightLayout} from './atomic-insight-layout/atomic-insight-layout.js';
 export {AtomicInsightNoResults} from './atomic-insight-no-results/atomic-insight-no-results.js';

packages/atomic/src/components/insight/lazy-index.ts

@@ -10,6 +10,10 @@ export default {
     await import(
       './atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.js'
     ),
+  'atomic-insight-history-toggle': async () =>
+    await import(
+      './atomic-insight-history-toggle/atomic-insight-history-toggle.js'
+    ),
   'atomic-insight-interface': async () =>
     await import('./atomic-insight-interface/atomic-insight-interface.js'),
   'atomic-insight-layout': async () =>

packages/atomic/src/utils/custom-element-tags.ts

@@ -60,6 +60,7 @@ export const ATOMIC_CUSTOM_ELEMENT_TAGS = new Set<string>([
   'atomic-insight-edit-toggle',
   'atomic-insight-full-search-button',
   'atomic-insight-generate-answer-button',
+  'atomic-insight-history-toggle',
   'atomic-insight-interface',
   'atomic-insight-layout',
   'atomic-insight-no-results',