@coveo/atomic 3.47.0 → 3.48.0

package/dist/atomic/components/components/insight/atomic-insight-user-actions-session/atomic-insight-user-actions-session.js

@@ -0,0 +1,173 @@
+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 dayjs from 'dayjs';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { renderButton } from "../../common/button";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+const Flag = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.1752 0.937598C2.1752 0.757598 2.0177 0.600098 1.8377 0.600098H1.1627C0.982695 0.600098 0.825195 0.757598 0.825195 0.937598V11.0626C0.825195 11.2426 0.982695 11.4001 1.1627 11.4001H1.8377C2.0177 11.4001 2.1752 11.2426 2.1752 11.0626V0.937598Z\" fill=\"white\"/>\n<path d=\"M10.8377 1.88255C7.2377 3.77255 7.6427 -0.097451 3.3002 1.41005C3.1652 1.45505 3.0752 1.59005 3.0752 1.72505V6.96755C3.0752 7.12505 3.2327 7.23755 3.3677 7.17005C7.6877 5.73005 7.2377 9.69005 10.9952 7.57505C11.1077 7.50755 11.1752 7.39505 11.1752 7.28255V2.06255C11.1752 1.90505 10.9952 1.79255 10.8377 1.88255Z\" fill=\"white\"/>\n</svg>\n";
+const ThreeDotsIcon = "<svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.69208 4.23096C2.39016 4.23096 2.96131 4.80211 2.96131 5.50019C2.96131 6.19826 2.39016 6.76942 1.69208 6.76942C0.994005 6.76942 0.422852 6.19826 0.422852 5.50019C0.422852 4.80211 0.994005 4.23096 1.69208 4.23096ZM5.49977 4.23096C6.19785 4.23096 6.76901 4.80211 6.76901 5.50019C6.76901 6.19826 6.19785 6.76942 5.49977 6.76942C4.8017 6.76942 4.23054 6.19826 4.23054 5.50019C4.23054 4.80211 4.8017 4.23096 5.49977 4.23096ZM9.30747 4.23096C10.0055 4.23096 10.5767 4.80211 10.5767 5.50019C10.5767 6.19826 10.0055 6.76942 9.30747 6.76942C8.60939 6.76942 8.03824 6.19826 8.03824 5.50019C8.03824 4.80211 8.60939 4.23096 9.30747 4.23096Z\" fill=\"#706E6B\"/>\n</svg>\n";
+import { renderUserAction } from './user-action';
+/**
+ * Internal component used by the `atomic-insight-user-actions-modal`. Do not use directly.
+ *
+ * The `atomic-insight-user-actions-session` component displays all the user actions that took place during a specific user session.
+ *
+ * @internal
+ *
+ * @part session-start-icon__container - The container for the session start icon.
+ * @part show-more-actions-button - The button to show more actions in the session.
+ */
+let AtomicInsightUserActionsSession = class AtomicInsightUserActionsSession extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The list of user actions performed during the session.
+         */
+        this.userActions = [];
+        this.userActionsToDisplay = [];
+        this.userActionsAfterCaseCreation = [];
+        this.areActionsAfterCaseCreationVisible = false;
+    }
+    get caseCreationIndex() {
+        return this.userActions.findIndex(({ actionType }) => actionType === 'TICKET_CREATION');
+    }
+    get isCaseCreationSession() {
+        return this.caseCreationIndex !== -1;
+    }
+    initialize() {
+        // Component is internal and doesn't need controller initialization
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.prepareUserActionsToDisplay();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('userActions')) {
+            this.prepareUserActionsToDisplay();
+        }
+    }
+    prepareUserActionsToDisplay() {
+        if (!this.isCaseCreationSession) {
+            this.userActionsToDisplay = this.userActions;
+            this.userActionsAfterCaseCreation = [];
+        }
+        else {
+            this.userActionsToDisplay = this.userActions.slice(this.caseCreationIndex);
+            this.userActionsAfterCaseCreation = this.userActions.slice(0, this.caseCreationIndex);
+        }
+    }
+    showActionsAfterCaseCreation() {
+        this.areActionsAfterCaseCreationVisible = true;
+    }
+    renderSessionStartDate() {
+        const date = dayjs(this.startTimestamp);
+        const formatedStartDate = date.format('ddd. MMMM D, YYYY');
+        return html `
+      <div data-testid="session-start-date-container" class="flex items-center px-2 pb-3">
+        ${when(this.isCaseCreationSession, () => html `
+            <div
+              part="session-start-icon__container"
+              class="session-start-icon__container mr-2 flex h-5 w-5 items-center justify-center rounded-full"
+            >
+              <atomic-icon icon=${Flag} class="h-3 w-3"></atomic-icon>
+            </div>
+          `)}
+        <div class="flex-1 font-semibold">${formatedStartDate}</div>
+      </div>
+    `;
+    }
+    renderActions(actions) {
+        return html `
+      <ol class="px-3">
+        ${actions?.map((action) => renderUserAction({
+            props: {
+                action,
+                bindings: this.bindings,
+            },
+        }))}
+      </ol>
+    `;
+    }
+    renderShowMoreActionsButton() {
+        const btnClasses = 'flex items-center p-1 max-w-full';
+        const label = this.bindings.i18n.t('more-actions-in-session', {
+            count: this.userActionsAfterCaseCreation.length,
+        });
+        return html `
+      <div
+        data-testid="show-more-actions-button"
+        class="flex items-center px-3 pb-3"
+      >
+        <div class="flex justify-center pr-2">
+          <atomic-icon icon=${ThreeDotsIcon} class="h-3 w-3"></atomic-icon>
+        </div>
+        <div class="flex-1">
+          ${renderButton({
+            props: {
+                style: 'text-primary',
+                part: 'show-more-actions-button',
+                class: btnClasses,
+                ariaLabel: label,
+                onClick: this.showActionsAfterCaseCreation.bind(this),
+            },
+        })(html `<span class="truncate text-xs font-light">${label}</span>`)}
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        const isShowMoreActionsButtonVisible = !this.areActionsAfterCaseCreationVisible &&
+            !!this.userActionsAfterCaseCreation.length;
+        return html `
+      <div>
+        ${this.renderSessionStartDate()}
+        ${when(this.areActionsAfterCaseCreationVisible, () => html `
+            <div data-testid="more-actions-section">
+              ${this.renderActions(this.userActionsAfterCaseCreation)}
+            </div>
+          `)}
+        ${when(isShowMoreActionsButtonVisible, () => this.renderShowMoreActionsButton())}
+        ${this.renderActions(this.userActionsToDisplay)}
+      </div>
+    `;
+    }
+};
+AtomicInsightUserActionsSession.styles = css``;
+__decorate([
+    state()
+], AtomicInsightUserActionsSession.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsSession.prototype, "error", void 0);
+__decorate([
+    property({ type: Number, attribute: 'start-timestamp' })
+], AtomicInsightUserActionsSession.prototype, "startTimestamp", void 0);
+__decorate([
+    property({ type: Array, attribute: 'user-actions' })
+], AtomicInsightUserActionsSession.prototype, "userActions", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsSession.prototype, "userActionsToDisplay", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsSession.prototype, "userActionsAfterCaseCreation", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsSession.prototype, "areActionsAfterCaseCreationVisible", void 0);
+__decorate([
+    bindingGuard()
+], AtomicInsightUserActionsSession.prototype, "render", null);
+AtomicInsightUserActionsSession = __decorate([
+    customElement('atomic-insight-user-actions-session'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightUserActionsSession);
+export { AtomicInsightUserActionsSession };

package/dist/atomic/components/components/insight/atomic-insight-user-actions-session/user-action.js

@@ -0,0 +1,78 @@
+import { html, nothing } from 'lit';
+import { multiClassMap, tw } from "../../../directives/multi-class-map";
+const BookmarkIcon = "<svg width=\"10\" height=\"14\" viewBox=\"0 0 10 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0 1.3C0 0.58203 0.58203 0 1.3 0H8.7C9.41797 0 10 0.58203 10 1.3V12.1735C10 13.2842 8.69725 13.8834 7.85397 13.1605L5.84603 11.4395C5.35919 11.0222 4.64081 11.0222 4.15397 11.4395L2.14603 13.1605C1.30275 13.8834 0 13.2842 0 12.1735V1.3Z\" fill=\"#12A344\"/>\n</svg>\n";
+const DocumentIcon = "<svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 8.5H6.00001C5.17158 8.5 4.50001 7.82843 4.50001 7L4.5 2C4.5 1.17157 5.17157 0.5 6 0.5H10C10.8284 0.5 11.5 1.17157 11.5 2V6.29605V7C11.5 7.82843 10.8284 8.5 10 8.5Z\" stroke=\"#1372EC\" stroke-linecap=\"round\"/>\n<path d=\"M7.50001 10.4956V11C7.50001 11.8284 6.82843 12.5 6.00001 12.5L2.00001 12.5C1.17159 12.5 0.500014 11.8284 0.500012 11L0.500003 6C0.500001 5.17157 1.17157 4.5 2 4.5H2.5\" stroke=\"#1372EC\" stroke-linecap=\"round\"/>\n<line x1=\"6.5\" y1=\"3.5\" x2=\"9.5\" y2=\"3.5\" stroke=\"#1372EC\" stroke-linecap=\"round\"/>\n<line x1=\"6.5\" y1=\"5.5\" x2=\"9.5\" y2=\"5.5\" stroke=\"#1372EC\" stroke-linecap=\"round\"/>\n</svg>\n";
+const PointIcon = "<svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"3.5\" cy=\"3.5\" r=\"3.5\" fill=\"#8E959D\"/>\n</svg>\n";
+const QuickviewIcon = "<svg focusable=\"false\" enable-background=\"new 0 0 20 12\" viewBox=\"0 0 20 12\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Quickview\"><title>Quickview</title><g fill=\"currentColor\"><path d=\"m10 4.3c-1 0-1.7.8-1.7 1.7 0 1 .8 1.7 1.7 1.7 1 0 1.7-.8 1.7-1.7 0-1-.7-1.7-1.7-1.7m0 4.7c-1.6 0-3-1.4-3-3s1.4-3 3-3 3 1.4 3 3-1.4 3-3 3\"/><path d=\"m19.8 6.4v-.001c.069-.117.109-.253.109-.399s-.04-.282-.109-.399v-.001c-.005-.008.005.007 0 0-2.203-3.473-5.917-5.6-9.8-5.6-3.884 0-7.655 2.091-9.8 5.602l0 0c-.069.117-.109.253-.109.398s.04.281.109.398c0 0-.001-.002 0 0 2.203 3.475 5.916 5.602 9.8 5.602 3.883 0 7.597-2.127 9.8-5.6.005-.007-.005.008 0 0zm-9.8 4.1c-3.236 0-6.28-1.635-8.189-4.339-.067-.095-.067-.228-.002-.324 1.908-2.797 4.953-4.337 8.191-4.337 3.235 0 6.278 1.634 8.187 4.337.068.096.068.231 0 .327-1.909 2.702-4.952 4.336-8.187 4.336z\"/></g></svg>";
+const SearchIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.4 0c3.5 0 6.4 2.9 6.4 6.4 0 1.4-.4 2.7-1.2 3.7l4 4c.4.4.4 1 .1 1.5l-.1.1c-.2.2-.5.3-.8.3s-.6-.1-.8-.3l-4-4c-1 .7-2.3 1.2-3.7 1.2-3.4-.1-6.3-3-6.3-6.5s2.9-6.4 6.4-6.4zm0 2.1c-2.3 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3 4.3-1.9 4.3-4.3-1.9-4.3-4.3-4.3z\"/></svg>";
+import { parseTimestampToDateDetails } from "../../../utils/date-utils";
+const icons = {
+    SEARCH: SearchIcon,
+    CLICK: DocumentIcon,
+    VIEW: QuickviewIcon,
+    CUSTOM: PointIcon,
+    TICKET_CREATION: BookmarkIcon,
+};
+export const renderUserAction = ({ props, }) => {
+    const renderActionTimestamp = () => {
+        const { hours, minutes } = parseTimestampToDateDetails(props.action.timestamp);
+        const formattedHours = String(hours).padStart(2, '0');
+        const formattedMinutes = String(minutes).padStart(2, '0');
+        return `${formattedHours}:${formattedMinutes}`;
+    };
+    const renderIcon = () => {
+        const iconClasses = tw({
+            'w-3 h-3': true,
+            'text-primary': ['CLICK', 'VIEW'].includes(props.action.actionType),
+        });
+        return html `<atomic-icon
+      icon=${icons[props.action.actionType]}
+      class=${multiClassMap(iconClasses)}
+    ></atomic-icon>`;
+    };
+    const renderActionTitle = () => {
+        switch (props.action.actionType) {
+            case 'TICKET_CREATION':
+                return html `<div class="ticket-creation-action__text text-xs font-semibold">
+          ${props.bindings.i18n.t('ticket-created')}
+        </div>`;
+            case 'CUSTOM':
+                return html `<div class="text-xs font-semibold">
+          ${props.action.eventData?.value ?? props.action.eventData?.type}
+        </div>`;
+            case 'SEARCH':
+                return html `<div class="text-xs font-semibold">
+          ${props.action.query || props.bindings.i18n.t('empty-search')}
+        </div>`;
+            case 'VIEW':
+                return html `<a
+          href=${props.action.document?.contentIdValue}
+          class="text-primary text-xs font-semibold"
+          target="_blank"
+        >
+          ${props.action.document?.title}
+        </a>`;
+            case 'CLICK':
+                return html `<div class="text-xs font-semibold">
+          ${props.action.document?.title}
+        </div>`;
+            default:
+                return nothing;
+        }
+    };
+    return html `<li class="flex">
+    <div class="flex-none pr-2">
+      <div class="flex justify-center py-1">${renderIcon()}</div>
+      <div class="flex justify-center py-1">
+        <div class="user-action__separator h-7 w-0.5 rounded"></div>
+      </div>
+    </div>
+    <div class="flex-1">
+      ${renderActionTitle()}
+      <div class="text-neutral-dark text-xxs flex py-2 font-light">
+        <div>${renderActionTimestamp()}</div>
+        <div class="px-2">${props.action.searchHub}</div>
+      </div>
+    </div>
+  </li>`;
+};

package/dist/atomic/components/components/insight/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js

@@ -0,0 +1,250 @@
+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 AtomicInsightUserActionsTimeline_1;
+import { ArrayValue, Schema, StringValue } from '@coveo/bueno';
+import { buildUserActions as buildInsightUserActions, } from '@coveo/headless/insight';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { renderButton } from "../../common/button";
+import { renderNoItemsContainer } from "../../common/no-items/container";
+import { renderMagnifyingGlass } from "../../common/no-items/magnifying-glass";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+const ArrowDownIcon = "<svg width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 0.5L4 12.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M7.5 9.5L4 13.5L0.5 9.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
+const ArrowUpIcon = "<svg width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 13.5L4 1.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M0.5 4.5L4 0.5L7.5 4.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
+/**
+ * The `atomic-insight-user-actions-timeline` component displays all the actions performed by a user around the time they created a case.
+ * The actions are grouped into multiple sessions, including the session during which the case was created,
+ * the sessions preceding the case creation, and the sessions following the case creation.
+ *
+ * **Note:** This is an internal component used through the `atomic-insight-user-actions-toggle`. Do not use directly.
+ *
+ * @part toggle-following-sessions - The button to toggle the visibility of following sessions.
+ * @part toggle-following-sessions-icon - The icon displayed on the toggle following sessions button.
+ * @part toggle-preceding-sessions - The button to toggle the visibility of preceding sessions.
+ * @part toggle-preceding-sessions-icon - The icon displayed on the toggle preceding sessions button.
+ *
+ * @cssprop --atomic-user-actions-timeline-separator-background - Background color of the separator lines between sessions.
+ */
+let AtomicInsightUserActionsTimeline = AtomicInsightUserActionsTimeline_1 = class AtomicInsightUserActionsTimeline extends LitElement {
+    constructor() {
+        super();
+        /**
+         * The names of custom events to exclude.
+         */
+        this.excludedCustomActions = [];
+        this.followingSessionsAreVisible = false;
+        this.precedingSessionsAreVisible = false;
+        new ValidatePropsController(this, () => ({
+            userId: this.userId,
+            ticketCreationDateTime: this.ticketCreationDateTime,
+            excludedCustomActions: this.excludedCustomActions,
+        }), AtomicInsightUserActionsTimeline_1.propsSchema, false);
+    }
+    initialize() {
+        this.userActions = buildInsightUserActions(this.bindings.engine, {
+            options: {
+                ticketCreationDate: this.ticketCreationDateTime,
+                excludedCustomActions: this.excludedCustomActions,
+            },
+        });
+        this.userActions.fetchUserActions(this.userId);
+    }
+    toggleFollowingSessions() {
+        this.followingSessionsAreVisible = !this.followingSessionsAreVisible;
+    }
+    togglePrecedingSessions() {
+        this.precedingSessionsAreVisible = !this.precedingSessionsAreVisible;
+    }
+    renderSessions(sessions, renderSeparator, testId) {
+        if (!sessions) {
+            return nothing;
+        }
+        return html `
+      <div>
+        ${sessions.map(({ actions, start }) => html `
+            <div class="mt-4">
+              <atomic-insight-user-actions-session
+                .startTimestamp=${start}
+                .userActions=${actions}
+                data-testid=${testId}
+              ></atomic-insight-user-actions-session>
+            </div>
+            ${renderSeparator ? renderSeparator() : nothing}
+          `)}
+      </div>
+    `;
+    }
+    renderToggleFollowingSessionsButton() {
+        const btnClasses = 'flex items-center text-left p-2 text-sm max-w-full';
+        const iconClasses = 'h-3 w-3 mr-1';
+        const label = this.followingSessionsAreVisible
+            ? this.bindings.i18n.t('hide-following-sessions')
+            : this.bindings.i18n.t('show-following-sessions');
+        const icon = this.followingSessionsAreVisible ? ArrowDownIcon : ArrowUpIcon;
+        return html `
+      <div class="flex justify-center p-2">
+        ${renderButton({
+            props: {
+                style: 'text-primary',
+                part: 'toggle-following-sessions',
+                class: btnClasses,
+                ariaLabel: label,
+                onClick: this.toggleFollowingSessions.bind(this),
+            },
+        })(html `
+          <atomic-icon
+            part="toggle-following-sessions-icon"
+            class=${iconClasses}
+            .icon=${icon}
+          ></atomic-icon>
+          <span class="truncate">${label}</span>
+        `)}
+      </div>
+    `;
+    }
+    renderTogglePrecedingSessionsButton() {
+        const btnClasses = 'flex items-center text-left p-2 text-sm max-w-full';
+        const iconClasses = 'h-3 w-3 mr-1';
+        const label = this.precedingSessionsAreVisible
+            ? this.bindings.i18n.t('hide-preceding-sessions')
+            : this.bindings.i18n.t('show-preceding-sessions');
+        const icon = this.precedingSessionsAreVisible ? ArrowUpIcon : ArrowDownIcon;
+        return html `
+      <div class="flex justify-center p-2">
+        ${renderButton({
+            props: {
+                style: 'text-primary',
+                part: 'toggle-preceding-sessions',
+                class: btnClasses,
+                ariaLabel: label,
+                onClick: this.togglePrecedingSessions.bind(this),
+            },
+        })(html `
+          <atomic-icon
+            part="toggle-preceding-sessions-icon"
+            class=${iconClasses}
+            .icon=${icon}
+          ></atomic-icon>
+          <span class="truncate">${label}</span>
+        `)}
+      </div>
+    `;
+    }
+    renderFollowingSessionsSection() {
+        if (!this.userActionsState.timeline?.followingSessions?.length) {
+            return nothing;
+        }
+        return html `
+      ${this.renderToggleFollowingSessionsButton()}
+      <div class="separator mx-1 rounded"></div>
+      ${when(this.followingSessionsAreVisible, () => this.renderSessions(this.userActionsState.timeline?.followingSessions, () => html `<div class="separator mx-1 mt-4 rounded"></div>`, 'following-session'))}
+    `;
+    }
+    renderPrecedingSessionsSection() {
+        if (!this.userActionsState.timeline?.precedingSessions?.length) {
+            return nothing;
+        }
+        return html `
+      <div class="separator mx-1 mt-4 rounded"></div>
+      ${when(this.precedingSessionsAreVisible, () => this.renderSessions(this.userActionsState.timeline?.precedingSessions, () => html `<div class="separator mx-1 mt-4 rounded"></div>`, 'preceding-session'))}
+      ${this.renderTogglePrecedingSessionsButton()}
+    `;
+    }
+    renderTimeline() {
+        const session = this.userActionsState.timeline?.session;
+        if (!session) {
+            return nothing;
+        }
+        return html `
+      <div>
+        ${this.renderFollowingSessionsSection()}
+        <div class="mt-4">
+          <atomic-insight-user-actions-session
+            .startTimestamp=${session.start}
+            .userActions=${session.actions}
+            data-testid="active-session"
+          ></atomic-insight-user-actions-session>
+        </div>
+        ${this.renderPrecedingSessionsSection()}
+      </div>
+    `;
+    }
+    renderNoUserActionsScreen() {
+        return html `
+      <div class="my-6 py-3" data-testid="user-actions-error">
+        ${renderNoItemsContainer()(html `
+          ${renderMagnifyingGlass()}
+          <div class="my-2 max-w-full text-center text-2xl font-light">
+            ${this.bindings.i18n.t('no-user-actions-available')}
+          </div>
+          <div class="text-neutral-dark my-2 text-center text-lg">
+            ${this.bindings.i18n.t('no-user-actions-associated-with-params')}
+          </div>
+        `)}
+      </div>
+    `;
+    }
+    render() {
+        const areUserActionsAvailable = this.userActionsState?.timeline?.session;
+        const hasError = this.userActionsState?.error;
+        if (areUserActionsAvailable && !hasError) {
+            return this.renderTimeline();
+        }
+        return this.renderNoUserActionsScreen();
+    }
+};
+AtomicInsightUserActionsTimeline.styles = css``;
+AtomicInsightUserActionsTimeline.propsSchema = new Schema({
+    userId: new StringValue({ required: true, emptyAllowed: false }),
+    ticketCreationDateTime: new StringValue({
+        required: true,
+        emptyAllowed: false,
+    }),
+    excludedCustomActions: new ArrayValue({
+        each: new StringValue({}),
+        required: false,
+    }),
+});
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "error", void 0);
+__decorate([
+    bindStateToController('userActions'),
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "userActionsState", void 0);
+__decorate([
+    property({ type: String, attribute: 'user-id' })
+], AtomicInsightUserActionsTimeline.prototype, "userId", void 0);
+__decorate([
+    property({ type: String, attribute: 'ticket-creation-date-time' })
+], AtomicInsightUserActionsTimeline.prototype, "ticketCreationDateTime", void 0);
+__decorate([
+    property({ type: Array, attribute: 'excluded-custom-actions' })
+], AtomicInsightUserActionsTimeline.prototype, "excludedCustomActions", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "followingSessionsAreVisible", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "precedingSessionsAreVisible", void 0);
+__decorate([
+    bindingGuard()
+], AtomicInsightUserActionsTimeline.prototype, "render", null);
+AtomicInsightUserActionsTimeline = AtomicInsightUserActionsTimeline_1 = __decorate([
+    customElement('atomic-insight-user-actions-timeline'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightUserActionsTimeline);
+export { AtomicInsightUserActionsTimeline };

package/dist/atomic/components/components/insight/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 "../atomic-insight-user-actions-modal/atomic-insight-user-actions-modal";
 import { Schema, StringValue } from '@coveo/bueno';
 import { buildUserActions as buildInsightUserActions, } from '@coveo/headless/insight';
 import { html, LitElement } from 'lit';

package/dist/atomic/components/components/insight/index.js

@@ -11,12 +11,21 @@ export { AtomicInsightNumericFacet } from './atomic-insight-numeric-facet/atomic
 export { AtomicInsightPager } from './atomic-insight-pager/atomic-insight-pager.js';
 export { AtomicInsightQueryError } from './atomic-insight-query-error/atomic-insight-query-error.js';
 export { AtomicInsightQuerySummary } from './atomic-insight-query-summary/atomic-insight-query-summary.js';
+export { AtomicInsightRefineModal } from './atomic-insight-refine-modal/atomic-insight-refine-modal.js';
 export { AtomicInsightRefineToggle } from './atomic-insight-refine-toggle/atomic-insight-refine-toggle.js';
 export { AtomicInsightResult } from './atomic-insight-result/atomic-insight-result.js';
+export { AtomicInsightResultActionBar } from './atomic-insight-result-action-bar/atomic-insight-result-action-bar.js';
+export { AtomicInsightResultAttachToCaseIndicator } from './atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js';
 export { AtomicInsightResultChildren } from './atomic-insight-result-children/atomic-insight-result-children.js';
+export { AtomicInsightResultList } from './atomic-insight-result-list/atomic-insight-result-list.js';
+export { AtomicInsightResultQuickviewAction } from './atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js';
 export { AtomicInsightResultTemplate } from './atomic-insight-result-template/atomic-insight-result-template.js';
 export { AtomicInsightSearchBox } from './atomic-insight-search-box/atomic-insight-search-box.js';
+export { AtomicInsightSmartSnippet } from './atomic-insight-smart-snippet/atomic-insight-smart-snippet.js';
 export { AtomicInsightSmartSnippetFeedbackModal } from './atomic-insight-smart-snippet-feedback-modal/atomic-insight-smart-snippet-feedback-modal.js';
 export { AtomicInsightTab } from './atomic-insight-tab/atomic-insight-tab.js';
 export { AtomicInsightTabs } from './atomic-insight-tabs/atomic-insight-tabs.js';
+export { AtomicInsightUserActionsModal } from './atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js';
+export { AtomicInsightUserActionsSession } from './atomic-insight-user-actions-session/atomic-insight-user-actions-session.js';
+export { AtomicInsightUserActionsTimeline } from './atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js';
 export { AtomicInsightUserActionsToggle } from './atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js';

package/dist/atomic/components/components/insight/lazy-index.js

@@ -12,13 +12,22 @@ export default {
     'atomic-insight-pager': async () => await import('./atomic-insight-pager/atomic-insight-pager.js'),
     'atomic-insight-query-error': async () => await import('./atomic-insight-query-error/atomic-insight-query-error.js'),
     'atomic-insight-query-summary': async () => await import('./atomic-insight-query-summary/atomic-insight-query-summary.js'),
+    'atomic-insight-refine-modal': async () => await import('./atomic-insight-refine-modal/atomic-insight-refine-modal.js'),
     'atomic-insight-refine-toggle': async () => await import('./atomic-insight-refine-toggle/atomic-insight-refine-toggle.js'),
     'atomic-insight-result': async () => await import('./atomic-insight-result/atomic-insight-result.js'),
+    'atomic-insight-result-action-bar': async () => await import('./atomic-insight-result-action-bar/atomic-insight-result-action-bar.js'),
+    'atomic-insight-result-attach-to-case-indicator': async () => await import('./atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js'),
     'atomic-insight-result-children': async () => await import('./atomic-insight-result-children/atomic-insight-result-children.js'),
+    'atomic-insight-result-list': async () => await import('./atomic-insight-result-list/atomic-insight-result-list.js'),
+    'atomic-insight-result-quickview-action': async () => await import('./atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js'),
     'atomic-insight-result-template': async () => await import('./atomic-insight-result-template/atomic-insight-result-template.js'),
     'atomic-insight-search-box': async () => await import('./atomic-insight-search-box/atomic-insight-search-box.js'),
+    'atomic-insight-smart-snippet': async () => await import('./atomic-insight-smart-snippet/atomic-insight-smart-snippet.js'),
     'atomic-insight-smart-snippet-feedback-modal': async () => await import('./atomic-insight-smart-snippet-feedback-modal/atomic-insight-smart-snippet-feedback-modal.js'),
     'atomic-insight-tab': async () => await import('./atomic-insight-tab/atomic-insight-tab.js'),
     'atomic-insight-tabs': async () => await import('./atomic-insight-tabs/atomic-insight-tabs.js'),
+    'atomic-insight-user-actions-modal': async () => await import('./atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js'),
+    'atomic-insight-user-actions-session': async () => await import('./atomic-insight-user-actions-session/atomic-insight-user-actions-session.js'),
+    'atomic-insight-user-actions-timeline': async () => await import('./atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js'),
     'atomic-insight-user-actions-toggle': async () => await import('./atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js'),
 };

package/dist/atomic/components/components/ipx/atomic-ipx-body/ipx-body-styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const ipxBodyStyles = css`.ipx-body-container{height:inherit;max-height:calc(100vh - 4.25rem)}.ipx-body-scrollbar::-webkit-scrollbar{width:.8rem}.ipx-body-scrollbar::-webkit-scrollbar-track{background:var(--atomic-background)}.ipx-body-scrollbar::-webkit-scrollbar-thumb{background:var(--atomic-primary);border:.15rem solid var(--atomic-background);border-radius:100vh}.ipx-body-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--atomic-primary-light)}.ipx-body-scrollbar{scrollbar-color:var(--atomic-primary) var(--atomic-background);scrollbar-width:auto}`;

package/dist/atomic/components/components/ipx/atomic-ipx-body/ipx-body.js

@@ -0,0 +1,49 @@
+import { html, nothing } from 'lit';
+export const renderIpxBody = ({ props }) => {
+    const visibilityClass = props.visibility === 'embedded'
+        ? ''
+        : props.visibility === 'open'
+            ? 'visible'
+            : 'invisible';
+    return html `
+    <article
+      part="container"
+      class="ipx-body-container bg-background box-border flex flex-col justify-between overflow-hidden rounded ${visibilityClass}"
+      @animationend=${() => props.onAnimationEnd?.()}
+    >
+      <header
+        part="header-wrapper"
+        class="bg-neutral-light grid w-full items-center px-6 pt-6"
+      >
+        <div part="header" class="min-w-0 font-bold">
+          ${props.header ?? nothing}
+        </div>
+      </header>
+      <hr part="header-ruler" class="border-neutral border-0 border-t" />
+      <div
+        part="body-wrapper"
+        class="ipx-body-scrollbar flex w-full grow flex-col overflow-auto px-6 py-4"
+        tabindex="0"
+        role="region"
+        aria-label=${props.i18n.t('ipx-body-content')}
+      >
+        <div part="body" class="w-full">
+          ${props.body ?? nothing}
+        </div>
+      </div>
+      ${props.displayFooterSlot !== false ? renderFooter(props.footer ?? nothing) : nothing}
+    </article>
+  `;
+};
+function renderFooter(footerContent) {
+    return html `
+    <footer
+      part="footer-wrapper"
+      class="border-neutral bg-neutral-light z-10 flex w-full flex-col items-stretch border-t px-7 py-4"
+    >
+      <div part="footer">
+        ${footerContent}
+      </div>
+    </footer>
+  `;
+}