<template>
  <div class="chat" :class="isSelf ? 'chat-end' : 'chat-start'">
    <!-- 头像 -->
    <div v-if="avatar" class="chat-image avatar">
      <div class="w-10 rounded-full">
        <img :alt="avatar" :src="avatar" />
      </div>
    </div>
    
    <!-- 消息气泡 -->
    <div class="chat-header mb-1">
      <time v-if="time" class="text-xs opacity-50">{{ time }}</time>
    </div>
    
    <div 
      class="chat-bubble"
      :class="isSelf ? 'chat-bubble-primary' : 'chat-bubble-neutral'"
    >
      {{ content }}
    </div>
    
    <div v-if="showFooter" class="chat-footer mt-1">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  // 消息内容
  content: string
  // 是否为自已发送的消息
  isSelf?: boolean
  // 显示时间
  time?: string
  // 头像 URL
  avatar?: string
  // 是否显示底部区域（用于插槽）
  showFooter?: boolean
}>()
</script>

<style scoped>
.chat {
  margin-bottom: 0.75rem;
}

.chat-bubble {
  max-width: 70%;
  word-wrap: break-word;
}
</style>
