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"
         :class="isDark ? 'text-white/90' : 'text-gray-800'">{{ message.content }}</p>
      <div class="flex items-center gap-2 mt-1.5">
        <span class="text-[10px] select-none"
              :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ formattedTime }}</span>
      </div>
    </div>
  </div>
</template>

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

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

const { isDark } = useTheme()
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>