<script setup lang="ts">
import LogoIcon from '@/assets/logo.svg'

defineProps<{ firstHumanAgentIndex: number }>()
</script>

<template>
  <div v-if="firstHumanAgentIndex === -1" class="babylai:mb-4 babylai:flex">
    <div class="babylai:shrink-0 babylai:me-3">
      <div class="babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary">
        <LogoIcon class="babylai:w-4 babylai:h-4 babylai:text-primary" />
      </div>
    </div>
    <div class="babylai:max-w-[80%] babylai:rounded-2xl babylai:p-4 babylai:bg-card">
      <p class="babylai:text-sm babylai:text-muted-foreground babylai:m-0 babylai:flex babylai:gap-0.5 babylai:items-center" aria-hidden="true">
        <span class="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
        <span class="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
        <span class="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
      </p>
    </div>
  </div>
</template>
