From 71e706a0bf88b989e6e3b126c7bb60c1884087f8 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 27 Nov 2024 16:46:46 +0530
Subject: [PATCH] feat: add in progress message

---
 .../components-next/message/MessageStatus.vue | 38 ++++++++++++++++++-
 .../message/Messages.story.vue                |  2 +-
 .../components-next/message/constants.js      |  1 +
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/MessageStatus.vue b/app/javascript/dashboard/components-next/message/MessageStatus.vue
index 5416b3804..13db86a99 100644
--- a/app/javascript/dashboard/components-next/message/MessageStatus.vue
+++ b/app/javascript/dashboard/components-next/message/MessageStatus.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
 import { MESSAGE_STATUS } from './constants';
 
 import Icon from 'next/icon/Icon.vue';
@@ -12,6 +13,34 @@ const { status } = defineProps({
   },
 });
 
+const progresIconSequence = [
+  'i-lucide-clock-1',
+  'i-lucide-clock-2',
+  'i-lucide-clock-3',
+  'i-lucide-clock-4',
+  'i-lucide-clock-5',
+  'i-lucide-clock-6',
+  'i-lucide-clock-7',
+  'i-lucide-clock-8',
+  'i-lucide-clock-9',
+  'i-lucide-clock-10',
+  'i-lucide-clock-11',
+  'i-lucide-clock-12',
+];
+
+const progessIcon = ref(progresIconSequence[0]);
+
+const rotateIcon = () => {
+  const currentIndex = progresIconSequence.indexOf(progessIcon.value);
+  const nextIndex = (currentIndex + 1) % progresIconSequence.length;
+  progessIcon.value = progresIconSequence[nextIndex];
+};
+
+useIntervalFn(rotateIcon, 500, {
+  immediate: status === MESSAGE_STATUS.PROGRESS,
+  immediateCallback: false,
+});
+
 const statusIcon = computed(() => {
   const statusIconMap = {
     [MESSAGE_STATUS.SENT]: 'i-lucide-check',
@@ -34,5 +63,10 @@ const statusColor = computed(() => {
 </script>
 
 <template>
-  <Icon :icon="statusIcon" :class="statusColor" class="size-[14px]" />
+  <Icon
+    v-if="status === MESSAGE_STATUS.PROGRESS"
+    :icon="progessIcon"
+    class="text-n-slate-10"
+  />
+  <Icon v-else :icon="statusIcon" :class="statusColor" class="size-[14px]" />
 </template>
diff --git a/app/javascript/dashboard/components-next/message/Messages.story.vue b/app/javascript/dashboard/components-next/message/Messages.story.vue
index 84cad389f..be49f5ab5 100644
--- a/app/javascript/dashboard/components-next/message/Messages.story.vue
+++ b/app/javascript/dashboard/components-next/message/Messages.story.vue
@@ -505,7 +505,7 @@ const messages = camelcaseKeys(
     },
     {
       conversation_id: 43,
-      status: 'read',
+      status: 'progress',
       content_type: 'text',
       processed_message_content: ' Happy to help :)',
       id: 5285,
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
index 0ba8c0233..fa30d79c6 100644
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -31,4 +31,5 @@ export const MESSAGE_STATUS = {
   DELIVERED: 'delivered',
   READ: 'read',
   FAILED: 'failed',
+  PROGRESS: 'progress',
 };