feat: start typing indicator

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"