Files
nuxt-claude/app/components/ai/ChatMessage.vue
NEW_GIL_HOME\hyeon e66321386a
Some checks failed
ci / ci (22, ubuntu-latest) (push) Failing after 25m52s
feat: nuxt-claude 프로젝트 초기 커밋
Made-with: Cursor
2026-03-08 16:36:13 +09:00

34 lines
1.0 KiB
Vue

<script setup lang="ts">
const props = defineProps<{
role: 'user' | 'assistant'
content: string
streaming?: boolean
}>()
const isUser = computed(() => props.role === 'user')
</script>
<template>
<div class="flex gap-3" :class="isUser ? 'flex-row-reverse' : 'flex-row'">
<!-- Avatar -->
<div
class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold"
:class="isUser ? 'bg-primary-500' : 'bg-gray-600'"
>
<UIcon v-if="!isUser" name="i-lucide-bot" class="text-base" />
<span v-else></span>
</div>
<!-- Message bubble -->
<div
class="max-w-[75%] rounded-2xl px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap"
:class="isUser
? 'bg-primary-500 text-white rounded-tr-sm'
: 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-tl-sm'"
>
{{ content }}
<span v-if="streaming" class="inline-block w-1 h-4 bg-current animate-pulse ml-0.5" />
</div>
</div>
</template>