feat: add better provider support, icons, regen, and a lot more

2026-02-12 14:56:13 +00:00
parent d5a5945c03
commit d29f95bacf
124 changed files with 6374 additions and 1861 deletions
@@ -1,21 +1,149 @@
 <script setup lang="ts">
-import type { Entity } from '@triplit/client';
-import type schema from '#triplit/schema';
+import type { Message } from '~/composables/useChat';

-defineProps<{
-    message: Readonly<
-        Entity<typeof schema, 'messages'> & {
-            parts: (Entity<typeof schema, 'message_parts'> & {
-                toolCall: Entity<typeof schema, 'tool_calls'> | null;
-            })[];
-        } & { generation: Entity<typeof schema, 'generations'> | null }
-    >;
+const triplit = useTriplitClient();
+
+const { message } = defineProps<{
+    message: Message
 }>();
+
+const focusedIndex = computed({
+    get: () => {
+        return message.focusedIndex || 0;
+    },
+    set: (newValue) => {
+        triplit.update('messages', message.id, {
+            focusedIndex: newValue
+        });
+    }
+});
+
+watch(() => message.children.length, (newCount, oldCount) => {
+    if (newCount === oldCount) return;
+
+    // if we are deleting children, only move the focus index if its no longer valid
+    // e.g. if we we have 4 children, and are focused on the 2nd, if we delete it, 
+    // we want to keep the focus on the 2nd index. It just makes me feel better
+    if (oldCount > newCount) {
+        if (message.deleted === true && focusedIndex.value === newCount) {
+            focusedIndex.value = Math.max(0, newCount - 1);
+            return;
+        }
+
+        if (focusedIndex.value > newCount) {
+
+            focusedIndex.value = newCount;
+        }
+
+        return;
+    }
+
+    if (message.deleted === true) {
+        focusedIndex.value = newCount - 1;
+        return;
+    }
+
+    focusedIndex.value = newCount;
+});
+
+const activeMessage = computed(() => {
+    if (message.children.length === 0 || (focusedIndex.value === 0 && !message.deleted)) {
+        return message;
+    }
+
+    if (message.deleted === true) {
+        return message.children[Math.min(focusedIndex.value, message.children.length - 1)];
+    }
+
+    return message.children[focusedIndex.value - 1];
+});
+
+const emit = defineEmits<{
+    regenerate: []
+    delete: []
+}>();
+
+const copied = ref(false);
+const copyMessage = async () => {
+    if (activeMessage.value!.role === 'user') {
+        await navigator.clipboard.writeText(activeMessage.value!.content!);
+    } else {
+        let text = [];
+        for (const part of activeMessage.value!.parts || []) {
+            if (part.type === 'text') {
+                text.push(part.content);
+            }
+        }
+
+        await navigator.clipboard.writeText(text.join('\n\n'));
+    }
+
+    copied.value = true;
+    setTimeout(() => {
+        copied.value = false;
+    }, 2000);
+}
+
+const regenerateMessage = async () => {
+    emit('regenerate');
+}
+
+const deleteMessage = () => {
+    if (focusedIndex.value !== 0 && focusedIndex.value === message.children.length) {
+        focusedIndex.value = Math.max(0, focusedIndex.value - 1);
+    }
+
+    nextTick(() => {
+        emit('delete');
+    });
+};
+
+const messageCount = computed(() => {
+    if (message.deleted === true) {
+        return message.children.length;
+    }
+
+    return message.children.length + 1;
+});
 </script>

 <template>
-    <div :class="['max-w-full mb-4', message.role === 'user' ? 'pl-9 flex justify-end' : '']">
-        <MessageUser v-if="message.role === 'user'" :message="message" />
-        <MessageAgent v-else :message="message" />
+    <div v-if="activeMessage" class="max-w-full mb-4 group flex flex-col">
+        <div :class="[message.role === 'user' ? 'pl-9 flex justify-end' : '']">
+            <MessageUser v-if="message.role === 'user'" :message="activeMessage!" />
+            <MessageAgent v-else :message="activeMessage" />
+        </div>
+        <div class="flex justify-between items-center">
+            <div>
+                <div v-if="messageCount > 1" class="flex gap-1">
+                    <button :inert="focusedIndex === 0" @click="focusedIndex = focusedIndex! - 1">
+                        <Icon name="mynaui:chevron-left" :class="['w-4 h-4', focusedIndex === 0 ? 'opacity-0' : '']" />
+                    </button>
+                    <span class="text-xs text-[var(--color-muted)]">
+                        {{ focusedIndex + 1 }} / {{ messageCount }}
+                    </span>
+                    <button :inert="focusedIndex + 1 === messageCount" @click="focusedIndex = focusedIndex + 1">
+                        <Icon name="mynaui:chevron-right"
+                            :class="['w-4 h-4', focusedIndex + 1 === messageCount ? 'opacity-0' : '']" />
+                    </button>
+                </div>
+            </div>
+
+            <div :class="activeMessage.generation?.status === 'pending' ? 'opacity-0!' : ''"
+                class="self-end mt-1 w-fit bg-[var(--color-highlight)] text-[var(--color-subtle)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                <button @click="regenerateMessage"
+                    class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-highlight)]">
+                    <Icon name="mynaui:refresh" class="text-4.5" />
+                </button>
+                <button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
+                    class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-highlight)]">
+                    <Icon :name="copied ? 'mynaui:check' : 'mynaui:copy'" class="text-4.5" />
+                </button>
+                <button @click="deleteMessage"
+                    class="flex justify-center items-center w-7 h-6 text-red-500 hover:bg-[var(--color-highlight)]">
+                    <Icon name="mynaui:trash" class="text-5" />
+                </button>
+            </div>
+        </div>
    </div>
 </template>