feat: timeline chat points [WTEL-4465]

src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue

@@ -62,12 +62,12 @@ const stateMap = {
   [TimelinePinType.USER]: {
     component: 'wt-icon',
     color: 'default',
-    icon: 'account',
+    icon: 'contacts',
   },
   [TimelinePinType.AGENT]: {
     component: 'wt-icon',
     color: 'default',
-    icon: 'edit',
+    icon: 'agent',
   },
   [TimelinePinType.BOT]: {
     component: 'wt-icon',

src/modules/contacts/modules/timeline/components/utils/timeline-row.vue

@@ -13,20 +13,7 @@
       </section>
 
       <section class="timeline-row-main-content">
-        <header class="timeline-row-main-content-header">
-          <slot name="content" v-bind="{ toggle, collapsed }" />
-        </header>
-
-        <timeline-row-dropdown-transition
-          v-if="slots['content-dropdown']"
-        >
-          <article
-            v-if="!collapsed"
-            class="timeline-row-content-dropdown"
-          >
-            <slot name="content-dropdown" v-bind="{ toggle, collapsed }" />
-          </article>
-        </timeline-row-dropdown-transition>
+        <slot name="content" v-bind="{ toggle, collapsed }" />
       </section>
     </section>
 
@@ -82,24 +69,28 @@ onUnmounted(() => eventBus.$off('timeline/rows/collapse-all', collapseRow));
 .timeline-row-self-content {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-sm);
   min-height: 56px;
+  gap: var(--spacing-sm);
 }
 
 .timeline-row-before-content {
   flex: 0 0 120px;
 }
 
 .timeline-row-pin {
-  flex: 0 0 90px; // wt-button min width
   align-self: stretch;
+  flex: 0 0 90px; // wt-button min width
 }
 
 .timeline-row-main-content {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  gap: var(--spacing-xs);
   margin-bottom: var(--spacing-xs);
+  gap: var(--spacing-xs);
+}
+
+.timeline-row--width-fit-content .timeline-row-main-content {
+  flex: 0;
 }
 </style>

src/modules/contacts/modules/timeline/modules/calls/api/HistoryAPI.js

@@ -194,7 +194,7 @@ const getHistory = getList({
     merge(getDefaultGetListResponse()),
   ],
   responseItemsTransformers: [
-    transformResponseItems,
+    // transformResponseItems,
   ],
 });
 

src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-point-timeline-row.vue

@@ -1,22 +1,76 @@
 <template>
- <timeline-row>
-   <template #content>
-     {{ point }}
-   </template>
- </timeline-row>
+  <timeline-row width-fit-content>
+    <template #before-content>
+      <timeline-row-info
+        :timestamp="point.createdAt"
+      >
+        <template #title="{ time }">
+          {{ time }}
+        </template>
+
+        <template #subtitle>
+          <timeline-task-status
+            :status="pointStatus"
+          />
+        </template>
+      </timeline-row-info>
+    </template>
+
+    <template #pin>
+      <timeline-pin
+        :type="pinType"
+      />
+    </template>
+
+    <template #content>
+      <task-timeline-row-content-wrapper>
+        <timeline-row-initiator
+          :text="initiator"
+          :type="initiatorType"
+        />
+
+        <timeline-row-duration
+          :duration="point.duration"
+        />
+      </task-timeline-row-content-wrapper>
+    </template>
+  </timeline-row>
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import TaskTimelineRowContentWrapper from '../../../../components/task-row/task-timeline-row-content-wrapper.vue';
+import TimelinePin from '../../../../components/utils/timeline-pin.vue';
+import TimelineRowDuration from '../../../../components/utils/timeline-row-duration.vue';
+import TimelineRowInfo from '../../../../components/utils/timeline-row-info.vue';
+import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
 import TimelineRow from '../../../../components/utils/timeline-row.vue';
+import TimelineTaskStatus from '../../../../components/utils/timeline-task-status.vue';
+import TimelinePinType from '../../../../enums/TimelinePinType.enum.js';
+import TimelineTaskStatusEnum from '../../../../enums/TimelineTaskStatus.enum.js';
 
 const props = defineProps({
   point: {
     type: Object,
     required: true,
   },
 });
+
+const pointType = computed(() => {});
+
+const pointStatus = computed(() => {
+  return TimelineTaskStatusEnum.TRANSFERRED;
+});
+
+const pinType = computed(() => {
+  return TimelinePinType.CALL_TRANSFER;
+});
+
+const initiatorType = computed(() => {});
+
+const initiator = computed(() => {});
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 
 </style>

src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-points-timeline-row-section.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import { inject, computed } from 'vue';
-import { useStore } from 'vuex';
+import { inject } from 'vue';
+import { useTaskPoints } from '../../../../composables/useTaskPoints.js';
 import CallPointTimelineRow from './call-point-timeline-row.vue';
 
 const props = defineProps({
@@ -24,20 +24,7 @@ const timelineNamespace = inject('namespace');
 
 const namespace = `${timelineNamespace}/calls`;
 
-const store = useStore();
-
-const points = computed(() => {
-  return store.getters[`${namespace}/GET_HISTORY_BY_ID`](props.taskId);
-});
-
-function loadHistory() {
-  store.dispatch(`${namespace}/LOAD_HISTORY`, { taskId: props.taskId });
-}
-
-if (!points.value) {
-  loadHistory();
-}
-
+const { points } = useTaskPoints({ namespace, taskId: props.taskId });
 </script>
 
 <style scoped lang="scss">

src/modules/contacts/modules/timeline/modules/calls/components/task-row/call-task-timeline-actions.vue

@@ -15,8 +15,8 @@
         </wt-tooltip>
       </template>
 
-      <template #option="option">
-        <p>{{ option.text }}</p>
+      <template #option="{ text }">
+        <p>{{ text }}</p>
       </template>
     </wt-context-menu>
   </div>

src/modules/contacts/modules/timeline/modules/chats/api/MessageHistoryAPI.js

@@ -10,11 +10,12 @@ const service = new CatalogApiFactory(configuration, '', instance);
 
 const getList = async ({ taskId }) => {
   const mergeMessageData = ({ peers, messages }) => {
-    const peersMap = new Map(peers.map((peer) => [peer.id, peer]));
-    return messages.map(({ peer, ...message }) => ({
-      ...message,
-      peer: peer && peersMap.get(message.peer.id),
-    }));
+    return messages.map(({ from, ...message }) => {
+      return {
+        ...message,
+        peer: peers[from.id - 1],
+      };
+    });
   };
 
   try {

src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-ended-point-timeline-row.vue

@@ -0,0 +1,45 @@
+<template>
+  <timeline-row>
+    <template #before-content>
+      <timeline-row-info
+        :timestamp="point.date"
+      >
+        <template #title="{ time }">
+          {{ time }}
+        </template>
+        <template #subtitle>
+          <timeline-task-status
+            :status="TimelineTaskStatusEnum.ENDED"
+          />
+        </template>
+      </timeline-row-info>
+    </template>
+
+    <template #pin>
+      <timeline-pin
+        :type="TimelinePinType.CHAT_END"
+        collapsed
+      />
+    </template>
+  </timeline-row>
+</template>
+
+<script setup>
+import TimelineTaskStatus from '../../../../components/utils/timeline-task-status.vue';
+import TimelinePinType from '../../../../enums/TimelinePinType.enum.js';
+import TimelinePin from '../../../../components/utils/timeline-pin.vue';
+import TimelineRowInfo from '../../../../components/utils/timeline-row-info.vue';
+import TimelineRow from '../../../../components/utils/timeline-row.vue';
+import TimelineTaskStatusEnum from '../../../../enums/TimelineTaskStatus.enum.js';
+
+const props = defineProps({
+  point: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-content.vue

@@ -0,0 +1,89 @@
+<template>
+  <section class="chat-point-row-content">
+    <header class="chat-point-row-content-header">
+      <wt-icon-btn
+        :icon="collapsed ? 'arrow-right' : 'arrow-down'"
+        @click="toggle"
+      />
+      <timeline-row-initiator
+        :text="initiator"
+        :type="isInitiatorBot ? TimelineInitiatorType.BOT : TimelineInitiatorType.CONTACT"
+      />
+    </header>
+
+    <article
+      v-if="point.text"
+      class="chat-point-row-content-text"
+      :class="{ 'chat-point-row-content-text--collapsed': collapsed }"
+      >
+      {{ point.text }}
+    </article>
+
+    <footer
+      v-if="showFooter"
+      class="chat-point-row-content-footer"
+    >
+      <chat-point-timeline-row-file
+        v-for="(file) of point.files"
+        :key="file.id"
+        :file="file"
+      />
+    </footer>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import ChatPointTimelineRowFile from './chat-point-timeline-row-file.vue';
+import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
+import TimelineInitiatorType from '../../../../enums/TimelineInitiatorType.enum.js';
+
+const props = defineProps({
+  point: {
+    type: Object,
+    required: true,
+  },
+});
+
+const collapsed = ref(true);
+
+const toggle = () => {
+  collapsed.value = !collapsed.value;
+};
+
+const initiator = computed(() => {
+  return props.point.peer?.name || '';
+});
+
+const isInitiatorBot = computed(() => {
+  return props.point.peer?.type === 'bot';
+});
+
+const showFooter = computed(() => {
+  return !!props.point.files;
+});
+</script>
+
+<style scoped lang="scss">
+.chat-point-row-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.chat-point-row-content-header,
+.chat-point-row-content-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.chat-point-row-content-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &--collapsed {
+    height: 24px;
+  }
+}
+</style>