From 980eca46c6d543e63bc8b76fea3a520105fa94cf Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 14 May 2025 15:53:30 +0530
Subject: [PATCH] feat: start typing indicator

---
 .../message/TypingIndicator.vue               | 45 +++++++++++++++++++
 app/javascript/ui/MessageList.vue             |  8 ++++
 2 files changed, 53 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/message/TypingIndicator.vue

diff --git a/app/javascript/dashboard/components-next/message/TypingIndicator.vue b/app/javascript/dashboard/components-next/message/TypingIndicator.vue
new file mode 100644
index 000000000..87b0d6a20
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/TypingIndicator.vue
@@ -0,0 +1,45 @@
+<template>
+  <svg
+    class="w-8 h-4"
+    viewBox="0 0 120 30"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <circle cx="15" cy="15" r="12">
+      <animate
+        attributeName="cy"
+        from="15"
+        to="5"
+        begin="0s"
+        dur="0.9s"
+        values="15;5;15;15;15;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="55" cy="15" r="12">
+      <animate
+        attributeName="cy"
+        from="15"
+        to="5"
+        begin="0.1s"
+        dur="0.9s"
+        values="15;5;15;15;15;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="95" cy="15" r="12">
+      <animate
+        attributeName="cy"
+        from="15"
+        to="5"
+        begin="0.2s"
+        dur="0.9s"
+        values="15;5;15;15;15;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
+</template>
diff --git a/app/javascript/ui/MessageList.vue b/app/javascript/ui/MessageList.vue
index d61726e91..598261bfb 100644
--- a/app/javascript/ui/MessageList.vue
+++ b/app/javascript/ui/MessageList.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, watch, useTemplateRef } from 'vue';
 import Message from 'next/message/Message.vue';
 import ButtonNext from 'next/button/Button.vue';
+import TypingIndicator from 'next/message/TypingIndicator.vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { useInfiniteScroll, useThrottleFn } from '@vueuse/core';
@@ -102,6 +103,13 @@ const sendMessage = async () => {
       ref="messageListRef"
       class="px-4 pt-4 flex flex-col-reverse pb-32 bg-n-background h-screen overflow-scroll"
     >
+      <div id="conversationFooter" class="my-2 py-2 flex items-center w-full">
+        <div
+          class="flex py-2 px-4 shadow-md rounded-full bg-white dark:bg-slate-700 text-n-slate-11 text-xs font-semibold mx-auto items-center gap-1"
+        >
+          <TypingIndicator class="text-n-slate-9" />
+        </div>
+      </div>
       <Message
         v-for="message in allMessages"
         :key="message.id"