@coveo/atomic 3.47.1 → 3.49.0

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

@@ -0,0 +1,204 @@
+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 "../../common/atomic-modal/atomic-modal";
+import "../atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { ATOMIC_MODAL_EXPORT_PARTS } from "../../common/atomic-modal/export-parts";
+import { renderButton } from "../../common/button";
+import { booleanConverter } from "../../../converters/boolean-converter";
+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 { rectEquals } from "../../../utils/dom-utils";
+const CloseIcon = "<svg viewBox=\"0 0 22 22\"><g transform=\"matrix(.7071 -.7071 .7071 .7071 -3.142 11)\"><path d=\"m9-3.4h2v26.9h-2z\"/><path d=\"m-3.4 9h26.9v2h-26.9z\"/></g></svg>";
+/**
+ * The `atomic-insight-user-actions-modal` is automatically created as a child of the `atomic-insight-interface` when the `atomic-insight-user-actions-toggle` is initialized.
+ *
+ * When the modal is opened, the CSS class `atomic-modal-opened` is added to the interface element and the body, allowing further customization.
+ *
+ * @internal
+ *
+ * @part title - The title element displaying "user-actions" text.
+ * @part close-button - The button used to close the modal.
+ * @part close-icon - The close icon within the close button.
+ *
+ * @part backdrop - The transparent backdrop hiding the content behind the modal (inherited from atomic-modal).
+ * @part container - The modal's outermost container with the outline and background (inherited from atomic-modal).
+ * @part header-wrapper - The wrapper around the header (inherited from atomic-modal).
+ * @part header - The header at the top of the modal (inherited from atomic-modal).
+ * @part header-ruler - The horizontal ruler underneath the header (inherited from atomic-modal).
+ * @part body-wrapper - The wrapper around the body (inherited from atomic-modal).
+ * @part body - The body of the modal, between the header and the footer (inherited from atomic-modal).
+ * @part footer-wrapper - The wrapper with a shadow or background color around the footer (inherited from atomic-modal).
+ * @part footer - The footer at the bottom of the modal (inherited from atomic-modal).
+ */
+let AtomicInsightUserActionsModal = class AtomicInsightUserActionsModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         */
+        this.isOpen = false;
+        /**
+         * The names of custom events to exclude.
+         */
+        this.excludedCustomActions = [];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.animationFrameId !== undefined) {
+            window.cancelAnimationFrame(this.animationFrameId);
+        }
+    }
+    initialize() {
+        // Noop
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('isOpen') && this.isOpen) {
+            this.onAnimationFrame();
+        }
+    }
+    render() {
+        return html `
+      ${when(this.interfaceDimensions, () => html `
+          <style>
+            atomic-modal::part(backdrop) {
+              top: ${this.interfaceDimensions.top}px;
+              left: ${this.interfaceDimensions.left}px;
+              width: ${this.interfaceDimensions.width}px;
+              height: ${this.interfaceDimensions.height}px;
+            }
+          </style>
+        `)}
+      <atomic-modal
+        .fullscreen=${true}
+        .isOpen=${this.isOpen}
+        .source=${this.openButton}
+        .container=${this}
+        .close=${() => {
+            this.isOpen = false;
+        }}
+        exportparts=${ATOMIC_MODAL_EXPORT_PARTS}
+        .scope=${this.bindings.interfaceElement}
+      >
+        ${this.renderHeader()} ${this.renderBody()}
+      </atomic-modal>
+    `;
+    }
+    renderHeader() {
+        return html `
+      <div slot="header" class="contents">
+        <div part="title" class="font-light truncate">
+          ${this.bindings.i18n.t('user-actions')}
+        </div>
+        ${renderButton({
+            props: {
+                style: 'text-transparent',
+                class: 'grid place-items-center',
+                part: 'close-button',
+                onClick: () => {
+                    this.isOpen = false;
+                },
+                ariaLabel: this.bindings.i18n.t('close'),
+            },
+        })(html `
+          <atomic-icon
+            part="close-icon"
+            class="w-5 h-5"
+            .icon=${CloseIcon}
+          ></atomic-icon>
+        `)}
+      </div>
+    `;
+    }
+    renderBody() {
+        return html `
+      <aside
+        style="height: 100%"
+        slot="body"
+        class="flex flex-col w-full px-2"
+        aria-label=${this.bindings.i18n.t('user-actions-content')}
+      >
+        <atomic-insight-user-actions-timeline
+          .userId=${this.userId}
+          .ticketCreationDateTime=${this.ticketCreationDateTime}
+          .excludedCustomActions=${this.excludedCustomActions}
+          class="flex-1"
+        ></atomic-insight-user-actions-timeline>
+      </aside>
+    `;
+    }
+    onAnimationFrame() {
+        if (!this.isOpen) {
+            this.animationFrameId = undefined;
+            return;
+        }
+        if (this.dimensionChanged()) {
+            this.updateDimensions();
+        }
+        this.animationFrameId = window.requestAnimationFrame(() => this.onAnimationFrame());
+    }
+    dimensionChanged() {
+        if (!this.interfaceDimensions) {
+            return true;
+        }
+        if (!this.bindings?.interfaceElement) {
+            return false;
+        }
+        return !rectEquals(this.interfaceDimensions, this.bindings.interfaceElement.getBoundingClientRect());
+    }
+    updateDimensions() {
+        if (!this.bindings?.interfaceElement) {
+            return;
+        }
+        this.interfaceDimensions =
+            this.bindings.interfaceElement.getBoundingClientRect();
+    }
+};
+AtomicInsightUserActionsModal.styles = css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-modal::part(body-wrapper),atomic-modal::part(footer-wrapper){padding:2px}`;
+__decorate([
+    state()
+], AtomicInsightUserActionsModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsModal.prototype, "error", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsModal.prototype, "interfaceDimensions", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicInsightUserActionsModal.prototype, "openButton", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'is-open',
+    })
+], AtomicInsightUserActionsModal.prototype, "isOpen", void 0);
+__decorate([
+    property({ type: String, attribute: 'user-id' })
+], AtomicInsightUserActionsModal.prototype, "userId", void 0);
+__decorate([
+    property({ type: String, attribute: 'ticket-creation-date-time' })
+], AtomicInsightUserActionsModal.prototype, "ticketCreationDateTime", void 0);
+__decorate([
+    property({ type: Array, attribute: 'excluded-custom-actions' })
+], AtomicInsightUserActionsModal.prototype, "excludedCustomActions", void 0);
+__decorate([
+    errorGuard(),
+    bindingGuard()
+], AtomicInsightUserActionsModal.prototype, "render", null);
+AtomicInsightUserActionsModal = __decorate([
+    customElement('atomic-insight-user-actions-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightUserActionsModal);
+export { AtomicInsightUserActionsModal };

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>`;
+};