Initial commit

resources/js/pages/apps/components/TypingIndicator.vue

@@ -0,0 +1,72 @@
+<script setup>
+const props = defineProps({
+  activeModelColor: String,
+  activeModelBgColor: String,
+});
+</script>
+
+<template>
+  <li class="my-3 d-flex justify-start typing-indicator-container">
+    <VAvatar
+      size="32"
+      :color="activeModelColor"
+      variant="tonal"
+      class="me-2 message-avatar"
+    >
+      <VIcon icon="tabler-robot" />
+    </VAvatar>
+
+    <div
+      class="pa-3 rounded-lg message-bubble"
+      :class="`bg-${activeModelBgColor} text-${activeModelColor}`"
+    >
+      <div class="bot-typing-indicator">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </div>
+    </div>
+  </li>
+</template>
+
+<style scoped>
+.typing-indicator-container {
+  animation: fade-in 0.3s ease forwards;
+}
+
+.bot-typing-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+}
+
+.bot-typing-indicator .dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(var(--v-theme-on-surface), 0.6);
+  margin: 0 2px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.bot-typing-indicator .dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.bot-typing-indicator .dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(0.7);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+</style>