100 lines
4.6 KiB
Vue
100 lines
4.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Message } from '~~/types';
|
|
|
|
interface Props {
|
|
message: Message;
|
|
regenerations?: Message[];
|
|
isCurrent?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
regenerations: () => [],
|
|
isCurrent: true
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
regenerate: [messageId: string];
|
|
select: [messageId: string];
|
|
delete: [messageId: string];
|
|
}>()
|
|
|
|
const isOpen = ref(false)
|
|
const content = computed(() => props.message.content)
|
|
const hasAlternatives = computed(() => props.regenerations.length > 0)
|
|
const showDropdown = computed(() => hasAlternatives.value || !props.isUser)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-3 relative group">
|
|
<div
|
|
class="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center"
|
|
:class="isUser ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-neutral)] border border-[var(--color-highlight)]'"
|
|
>
|
|
<Icon
|
|
:name="isUser ? 'mynaui:user' : 'mynaui:check-hexagon'"
|
|
class="w-4 h-4"
|
|
:class="isUser ? 'text-[var(--color-accent-text)]' : 'text-[var(--color-accent)]'"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<p class="text-sm font-medium" :class="isUser ? 'text-[var(--color-accent)]' : 'text-[var(--color-neutral)]'">
|
|
{{ isUser ? 'You' : 'Agent' }}
|
|
</p>
|
|
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Dropdown v-if="showDropdown" v-model="isOpen" placement="bottom-right" width="140px">
|
|
<template #trigger="{ toggle }">
|
|
<button
|
|
@click="toggle"
|
|
class="p-1 rounded hover:bg-[var(--color-highlight)]"
|
|
aria-label="More options"
|
|
>
|
|
<Icon name="mynaui:dots-horizontal" class="w-4 h-4 text-[var(--color-subtle)]" />
|
|
</button>
|
|
</template>
|
|
|
|
<template #default>
|
|
<button
|
|
v-if="!isUser"
|
|
@click="emit('regenerate', message.id)"
|
|
class="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[var(--color-highlight)] text-left"
|
|
>
|
|
<Icon name="mynaui:refresh" class="w-4 h-4" />
|
|
<span class="text-sm">Regenerate</span>
|
|
</button>
|
|
<div v-if="!isUser && hasAlternatives" class="h-px bg-[var(--color-highlight)] my-1" />
|
|
<template v-if="hasAlternatives">
|
|
<button
|
|
v-for="alt in regenerations"
|
|
:key="alt.id"
|
|
@click="emit('select', alt.id)"
|
|
class="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[var(--color-highlight)] text-left"
|
|
:class="message.id === alt.id ? 'bg-[var(--color-highlight)]' : ''"
|
|
>
|
|
<Icon name="mynaui:clock" class="w-4 h-4 text-[var(--color-subtle)]" />
|
|
<span class="text-sm text-[var(--color-subtle)]">{{ alt.id }}</span>
|
|
</button>
|
|
</template>
|
|
<div class="h-px bg-[var(--color-highlight)] my-1" />
|
|
<button
|
|
@click="emit('delete', message.id)"
|
|
class="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[var(--color-highlight)] text-left text-red-400"
|
|
>
|
|
<Icon name="mynaui:trash" class="w-4 h-4" />
|
|
<span class="text-sm">Delete</span>
|
|
</button>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-[var(--color-text)] whitespace-pre-wrap break-words">{{ content }}</p>
|
|
|
|
<div v-if="editedAt" class="mt-1 text-xs text-[var(--color-subtle)] flex items-center gap-1">
|
|
<Icon name="mynaui:pencil" class="w-3 h-3" />
|
|
<span>Edited</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |