continue scaffolding and refine the basic foundation

2026-01-13 19:56:24 +00:00
parent 0877cc10bd
commit 8c28946703
37 changed files with 1431 additions and 509 deletions
@@ -0,0 +1,100 @@
+<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>