<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>
