From d83e2175c284fd2b9aeb870a9864a1593aee9f7c Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Wed, 1 May 2024 23:38:22 +0300
Subject: [PATCH] feat: timeline chat points [WTEL-4465]

---
 .../components/utils/timeline-pin.vue         |  4 +-
 .../components/utils/timeline-row.vue         | 27 ++----
 .../timeline/modules/calls/api/HistoryAPI.js  |  2 +-
 .../point-row/call-point-timeline-row.vue     | 66 ++++++++++++--
 .../call-points-timeline-row-section.vue      | 19 +---
 .../task-row/call-task-timeline-actions.vue   |  4 +-
 .../modules/chats/api/MessageHistoryAPI.js    | 11 +--
 .../chat-ended-point-timeline-row.vue         | 45 ++++++++++
 .../chat-point-timeline-row-content.vue       | 89 +++++++++++++++++++
 .../chat-point-timeline-row-dropdown.vue      | 13 ---
 .../chat-point-timeline-row-file.vue          | 35 ++++++++
 .../point-row/chat-point-timeline-row.vue     | 46 ++++------
 .../chat-points-timeline-row-section.vue      | 14 +++
 .../task-row/chat-task-timeline-row.vue       |  1 +
 14 files changed, 283 insertions(+), 93 deletions(-)
 create mode 100644 src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-ended-point-timeline-row.vue
 create mode 100644 src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-content.vue
 delete mode 100644 src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-dropdown.vue
 create mode 100644 src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-file.vue

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
index 78fe4e29..afd49dc2 100644
--- a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
+++ b/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',
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue
index 413b80f0..92b12765 100644
--- a/src/modules/contacts/modules/timeline/components/utils/timeline-row.vue
+++ b/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,8 +69,8 @@ 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 {
@@ -91,15 +78,19 @@ onUnmounted(() => eventBus.$off('timeline/rows/collapse-all', collapseRow));
 }
 
 .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>
diff --git a/src/modules/contacts/modules/timeline/modules/calls/api/HistoryAPI.js b/src/modules/contacts/modules/timeline/modules/calls/api/HistoryAPI.js
index 0ef53804..2511e959 100644
--- a/src/modules/contacts/modules/timeline/modules/calls/api/HistoryAPI.js
+++ b/src/modules/contacts/modules/timeline/modules/calls/api/HistoryAPI.js
@@ -194,7 +194,7 @@ const getHistory = getList({
     merge(getDefaultGetListResponse()),
   ],
   responseItemsTransformers: [
-    transformResponseItems,
+    // transformResponseItems,
   ],
 });
 
diff --git a/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-point-timeline-row.vue b/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-point-timeline-row.vue
index 7d57f76b..1d9724f3 100644
--- a/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-point-timeline-row.vue
+++ b/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-point-timeline-row.vue
@@ -1,13 +1,53 @@
 <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: {
@@ -15,8 +55,22 @@ const props = defineProps({
     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>
diff --git a/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-points-timeline-row-section.vue b/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-points-timeline-row-section.vue
index 6d58e3b4..e28e997f 100644
--- a/src/modules/contacts/modules/timeline/modules/calls/components/point-row/call-points-timeline-row-section.vue
+++ b/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">
diff --git a/src/modules/contacts/modules/timeline/modules/calls/components/task-row/call-task-timeline-actions.vue b/src/modules/contacts/modules/timeline/modules/calls/components/task-row/call-task-timeline-actions.vue
index 8a0aad30..763dfa1d 100644
--- a/src/modules/contacts/modules/timeline/modules/calls/components/task-row/call-task-timeline-actions.vue
+++ b/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>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/api/MessageHistoryAPI.js b/src/modules/contacts/modules/timeline/modules/chats/api/MessageHistoryAPI.js
index 161cb45b..35b2db27 100644
--- a/src/modules/contacts/modules/timeline/modules/chats/api/MessageHistoryAPI.js
+++ b/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 {
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-ended-point-timeline-row.vue b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-ended-point-timeline-row.vue
new file mode 100644
index 00000000..b1bad513
--- /dev/null
+++ b/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>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-content.vue b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-content.vue
new file mode 100644
index 00000000..042c1346
--- /dev/null
+++ b/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>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-dropdown.vue b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-dropdown.vue
deleted file mode 100644
index bd398352..00000000
--- a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-dropdown.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <section class="chat-point-row-dropdown">
-    dropdown content goes here!
-  </section>
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-file.vue b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-file.vue
new file mode 100644
index 00000000..b1fa4222
--- /dev/null
+++ b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row-file.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="chat-point-timeline-row-file">
+    <wt-icon
+      icon="attach"
+    />
+    <span class="chat-point-timeline-row-file__name">
+      {{ filename }}
+    </span>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  file: {
+    type: Object,
+    required: true,
+  },
+});
+
+const filename = computed(() => {
+  return `${props.file.name}.${props.file.type}`;
+});
+</script>
+
+<style scoped lang="scss">
+.chat-point-timeline-row-file {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xs);
+
+  &__name {
+  }
+}
+</style>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row.vue b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row.vue
index 615b642a..36921d51 100644
--- a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row.vue
+++ b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-point-timeline-row.vue
@@ -14,9 +14,9 @@
           <timeline-task-status
             v-if="pointStatus"
             :status="pointStatus"
-          ></timeline-task-status>
+          />
 
-<!--           empty -->
+          <!--           empty -->
           <div v-else />
         </template>
       </timeline-row-info>
@@ -29,33 +29,26 @@
       />
     </template>
 
-    <template #content="{ toggle, collapsed }">
-      {{ point }}
-      <wt-icon-btn
-        icon="expand"
-        @click="toggle"
-      />
-      <timeline-row-initiator
-        :text="initiator"
-      />
-    </template>
-
-    <template #content-dropdown>
-      <chat-point-row-dropdown />
+    <template #content>
+      <task-timeline-row-content-wrapper>
+        <chat-point-row-content
+          :point="point"
+        />
+      </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 TimelineRowInfo from '../../../../components/utils/timeline-row-info.vue';
 import TimelineRow from '../../../../components/utils/timeline-row.vue';
-import TimelinePin from '../../../../components/utils/timeline-pin.vue';
-import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
 import TimelineTaskStatus from '../../../../components/utils/timeline-task-status.vue';
 import TimelinePinType from '../../../../enums/TimelinePinType.enum.js';
 import TimelineTaskStatusEnum from '../../../../enums/TimelineTaskStatus.enum.js';
-import ChatPointRowDropdown from './chat-point-timeline-row-dropdown.vue';
+import ChatPointRowContent from './chat-point-timeline-row-content.vue';
 
 const props = defineProps({
   point: {
@@ -64,22 +57,15 @@ const props = defineProps({
   },
 });
 
-// TODO
-const initiator = computed(() => {
-
-});
-
-// TODO ME!
 const pinType = computed(() => {
-  if (true) return TimelinePinType.USER;
-  if (false) return TimelinePinType.AGENT;
-  if (false) return TimelinePinType.BOT;
-  throw new Error(`Unknown pin type for chat point!, ${JSON.stringify(props.point)}`);
+  if (props.point.peer?.type === 'user') return TimelinePinType.AGENT;
+  if (props.point.peer?.type === 'bot') return TimelinePinType.BOT;
+  return TimelinePinType.USER;
 });
 
-// TODO
+// transfer is not implemented
 const pointStatus = computed(() => {
-  if (true) return TimelineTaskStatusEnum.TRANSFERRED;
+  if (false) return TimelineTaskStatusEnum.TRANSFERRED;
   return false;
 });
 </script>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-points-timeline-row-section.vue b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-points-timeline-row-section.vue
index cf733278..a4fa3d6e 100644
--- a/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-points-timeline-row-section.vue
+++ b/src/modules/contacts/modules/timeline/modules/chats/components/point-row/chat-points-timeline-row-section.vue
@@ -5,12 +5,17 @@
       :key="point.id"
       :point="point"
     />
+    <chat-ended-point-timeline-row
+      v-if="task.closedAt"
+      :point="{ date: task.closedAt }"
+    />
   </div>
 </template>
 
 <script setup>
 import { inject } from 'vue';
 import { useTaskPoints } from '../../../../composables/useTaskPoints.js';
+import ChatEndedPointTimelineRow from './chat-ended-point-timeline-row.vue';
 import ChatPointTimelineRow from './chat-point-timeline-row.vue';
 
 const props = defineProps({
@@ -18,6 +23,14 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  /**
+   * @type {Object}
+   * @description Task object is needed to display "ended" stub with task.closedAt
+   */
+  task: {
+    type: Object,
+    required: true,
+  },
 });
 
 const timelineNamespace = inject('namespace');
@@ -28,6 +41,7 @@ const { points } = useTaskPoints({
   taskId: props.taskId,
   namespace,
 });
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue b/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
index 07473978..c6bf2aa7 100644
--- a/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
+++ b/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
@@ -57,6 +57,7 @@
     <template #dropdown>
       <chat-points-row-section
         :task-id="taskId"
+        :task="task"
       />
     </template>
   </timeline-row>