{this.renderSessionStartDate()}
- {this.areActionsAfterCaseCreationVisible &&
- this.renderActions(this.userActionsAfterCaseCreation)}
+ {this.areActionsAfterCaseCreationVisible && (
+
+ {this.renderActions(this.userActionsAfterCaseCreation)}
+
+ )}
{isShowMoreActionsButtonVisible && this.renderShowMoreActionsButton()}
diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/user-action.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/user-action.tsx
index c3535a7dfcc..9e090f39e8a 100644
--- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/user-action.tsx
+++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/user-action.tsx
@@ -50,7 +50,7 @@ export const UserAction: FunctionalComponent
= ({
case 'TICKET_CREATION':
return (
- a{bindings.i18n.t('ticket-created')}
+ {bindings.i18n.t('ticket-created')}
);
case 'CUSTOM':
diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.new.stories.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.new.stories.tsx
new file mode 100644
index 00000000000..ba3115d8205
--- /dev/null
+++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.new.stories.tsx
@@ -0,0 +1,26 @@
+import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {wrapInInsightInterface} from '../../../../../storybookUtils/insight/insight-interface-wrapper';
+
+const {decorator, play} = wrapInInsightInterface();
+
+const meta: Meta = {
+ component: 'atomic-insight-user-actions-timeline',
+ title: 'Atomic/Insight/UserActionsTimelines',
+ id: 'atomic-insight-user-actions-timeline',
+
+ render: renderComponent,
+ decorators: [decorator],
+ parameters,
+ play,
+};
+
+export default meta;
+
+export const Default: Story = {
+ name: 'atomic-insight-user-actions-timeline',
+ play: async (context) => {
+ await play(context);
+ },
+};
diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.pcss b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.pcss
new file mode 100644
index 00000000000..e0edebb1211
--- /dev/null
+++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.pcss
@@ -0,0 +1,6 @@
+@import '../../../../global/global.pcss';
+
+.separator {
+ height: 1px;
+ background-color: #e0e1dd;
+}
diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx
new file mode 100644
index 00000000000..dfdb30fdbbc
--- /dev/null
+++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx
@@ -0,0 +1,228 @@
+import {Component, h, State, Prop} from '@stencil/core';
+import {
+ buildInsightUserActions,
+ InsightUserActions,
+ InsightUserActionsState,
+ InsightUserSession,
+} from '../..';
+import ArrowDownIcon from '../../../../images/big-arrow-down.svg';
+import ArrowUpIcon from '../../../../images/big-arrow-up.svg';
+import {
+ InitializableComponent,
+ InitializeBindings,
+ BindStateToController,
+} from '../../../../utils/initialization-utils';
+import {Button} from '../../../common/button';
+import {NoItemsContainer} from '../../../common/no-items/container';
+import {MagnifyingGlass} from '../../../common/no-items/magnifying-glass';
+import {InsightBindings} from '../../atomic-insight-interface/atomic-insight-interface';
+
+/**
+ * This 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.
+ *
+ * @component
+ * @example
+ *
+ *
+ */
+@Component({
+ tag: 'atomic-insight-user-actions-timeline',
+ styleUrl: 'atomic-insight-user-actions-timeline.pcss',
+ shadow: true,
+})
+export class AtomicInsightUserActionsTimeline
+ implements InitializableComponent
+{
+ @InitializeBindings() public bindings!: InsightBindings;
+ public userActions!: InsightUserActions;
+
+ @BindStateToController('userActions')
+ @State()
+ public userActionsState!: InsightUserActionsState;
+ public error!: Error;
+
+ /**
+ * The ID of the user whose actions are being displayed. For example in email format "someone@company.com".
+ */
+ @Prop() public userId!: string;
+ /**
+ * The date and time when the case was created. For example "2024-01-01T00:00:00Z"
+ */
+ @Prop() public ticketCreationDateTime!: string;
+
+ public initialize() {
+ this.userActions = buildInsightUserActions(this.bindings.engine, {
+ options: {ticketCreationDate: this.ticketCreationDateTime},
+ });
+
+ this.userActions.fetchUserActions(this.userId);
+ }
+
+ @State() followingSessionsAreVisible = false;
+ @State() precedingSessionsAreVisible = false;
+
+ private toggleFollowingSessions() {
+ this.followingSessionsAreVisible = !this.followingSessionsAreVisible;
+ }
+
+ private togglePrecedingSessions() {
+ this.precedingSessionsAreVisible = !this.precedingSessionsAreVisible;
+ }
+
+ private renderSessions(
+ sessions: Array | undefined,
+ renderSeparator?: Function,
+ testId?: string
+ ) {
+ return (
+
+ {sessions?.map(({actions, start}) => [
+
,
+ renderSeparator ? renderSeparator() : null,
+ ])}
+
+ {this.renderFollowingSessionsSection()}
+
+ {this.renderPrecedingSessionsSection()}
+
+
+
+
+ {this.bindings.i18n.t('no-user-actions-available')}
+
+
+ {this.bindings.i18n.t('no-user-actions-associated-with-params')}
+
+
+