Some checks failed
ci / ci (22, ubuntu-latest) (push) Failing after 25m52s
Made-with: Cursor
34 lines
1.0 KiB
Vue
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>
|