archy/packages/app/src/components/chat/ChatMessage.vue

<template>
  <div
    class="flex animate-fade-up-fast"
    :class="isUser ? 'justify-end' : 'justify-start'"
    :style="{ animationDelay: `${index * 30}ms` }"
  >
    <div
      class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-300"
      :class="bubbleClasses"
    >
      <p class="text-sm leading-relaxed whitespace-pre-wrap break-words text-white/90">{{ message.content }}</p>
      <div class="flex items-center gap-2 mt-1.5">
        <span class="text-[10px] text-white/30 select-none">{{ formattedTime }}</span>
        <span v-if="isUser && message.status" class="text-[10px] text-white/20">
          {{ message.status === 'sent' ? '✓' : message.status === 'delivered' ? '✓✓' : '' }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Message } from '@aiui/core/types/message'

const props = defineProps<{
  message: Message
  index: number
}>()

const isUser = computed(() => props.message.role === 'user')

const bubbleClasses = computed(() =>
  isUser.value
    ? 'glass-strong rounded-br-md'
    : 'glass-card rounded-bl-md'
)

const formattedTime = computed(() => {
  const d = new Date(props.message.timestamp)
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
})
</script>